/* NAVBAR GLASS + GRADIENT */
.glass-navbar{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: radial-gradient(circle at 10% 0,rgba(59,130,246,.85),rgba(37,99,235,.92))
              ,rgba(15,23,42,.78);
  background-blend-mode: soft-light;
  box-shadow: 0 18px 40px rgba(15,23,42,.55);
  border-bottom: 1px solid rgba(148,163,184,.35);
  z-index: 1020;
}

/* Brand */
.brand-logo-wrap{
  width: 42px;
  height: 42px;
  border-radius: 1rem;
  background: radial-gradient(circle at 0 0,#38bdf8,#6366f1);
  padding: 3px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo-img{
  max-width: 100%;
  max-height: 100%;
}
.brand-title{
  font-size: .95rem;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.brand-sub{
  font-size: .7rem;
  color: #cbd5f5;
}

/* Links */
.navbar .nav-link{
  position: relative;
  padding: .4rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.navbar .nav-link span{ pointer-events:none; }

.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:.05rem;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,#60a5fa,#f472b6);
  transform:scaleX(0);
  transform-origin:center;
  transition: transform .25s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:#ffffff;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after{
  transform:scaleX(1);
}

/* Dropdown glass */
.dropdown-glass{
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dropdown-glass .dropdown-item{
  font-size:.9rem;
  color:#e5e7eb;
  padding:.45rem 1rem;
}
.dropdown-glass .dropdown-item:hover{
  background: linear-gradient(90deg,rgba(59,130,246,.3),rgba(236,72,153,.2));
  color:#ffffff;
}

/* Search pill */
.search-pill{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .3rem .15rem .65rem;
  border-radius:999px;
  background: rgba(15,23,42,.85);
  border:1px solid rgba(148,163,184,.6);
}
.search-pill i{
  color:#9ca3af;
  font-size:.9rem;
}
.search-pill .search-input{
  background:transparent;
  border:0;
  color:#e5e7eb;
  padding:.25rem .75rem .25rem .25rem;
  font-size:.85rem;
}
.search-pill .search-input::placeholder{
  color:#9ca3af;
}
.search-pill .search-input:focus{
  box-shadow:none;
}

/* Mobile */
@media (max-width:991.98px){
  .glass-navbar{
    background: rgba(15,23,42,.96);
    backdrop-filter: blur(20px);
  }
  .navbar-collapse{
    padding-top:.5rem;
  }
  .navbar-nav .nav-link{
    padding:.4rem .3rem;
  }
}


/* ================= SCROLL REVEAL ================= */

.scroll-reveal{
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition:
    opacity .6s ease-out,
    transform .6s ease-out,
    box-shadow .6s ease-out,
    background-color .6s ease-out;
  will-change: opacity, transform;
}
.scroll-reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* sedikit beda untuk blok profile */
.profile-intro.scroll-reveal{
  transform: translateY(18px) scale(.99);
}

/* ================= PROGRAM UNGGULAN ================= */

.program-card{
  border-radius: 1rem;
  border: 0;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(15,76,129,.08);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.program-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15,76,129,.18);
  background: #f8fbff;
}
.program-card.scroll-reveal:hover{
  transform: translateY(-6px) scale(1.01);
}

.program-icon{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.program-mbg      { background: rgba(46,204,113,.12); color:#1e8449; }
.program-prestasi { background: rgba(241,196,15,.16); color:#b9770e; }
.program-eskul    { background: rgba(52,152,219,.18); color:#1b4f72; }
.program-7k       { background: rgba(155,89,182,.16); color:#6c3483; }

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

.banner-img{
  display:block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
}

/* kalau ID carousel yang dipakai hero beda, hapus blok berikut */
#carouselExampleCaptions .carousel-caption{
  bottom: 15%;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
#carouselExampleCaptions .carousel-item{
  position: relative;
}
#carouselExampleCaptions .carousel-item::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0.1));
}

.carousel-caption{
  background: linear-gradient(120deg,rgba(0,0,0,.75),rgba(0,0,0,.4));
  border-radius: 1rem;
  padding: 1.25rem 1.75rem;
}
.carousel-caption h5{
  font-size: 1.6rem;
  font-weight: 700;
}
.carousel-caption p{
  margin-bottom: 0;
  font-size: .98rem;
}


/* ================= GALLERY TILE - POLAROID FRAME ================= */

.gallery-tile{
  position: relative;
  overflow: visible;
}

/* FRAME POLAROID - KONDISI AWAL LURUS */
.gallery-tile-inner{
  position: relative;
  background: #fdfdfd;
  border-radius: .75rem;
  padding: 10px 10px 26px; /* bawah lebih besar ala polaroid */
  box-shadow: 0 10px 25px rgba(15,76,129,.25);
  transform: rotate(0deg);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* GAMBAR */
.gallery-tile-inner img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: .5rem;
  transition: transform .3s ease;
}

/* ===== EFEK HOVER ===== */

/* miring sesuai arah */
.gallery-tile:hover .tilt-left{
  transform: translateY(-6px) rotate(-3deg);
}

.gallery-tile:hover .tilt-right{
  transform: translateY(-6px) rotate(3deg);
}

/* bayangan & efek angkat */
.gallery-tile:hover .gallery-tile-inner{
  box-shadow: 0 18px 40px rgba(15,76,129,.35);
}

/* zoom halus gambar */
.gallery-tile:hover img{
  transform: scale(1.04);
}

/* CAPTION POLAROID */
.gallery-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: #555;
  padding: 0 .5rem;
}

/* IKON ZOOM */
.gallery-zoom-icon{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.gallery-tile:hover .gallery-zoom-icon{
  opacity: 1;
  transform: translateY(0);
}

/* ================= vidio ================= */
.video-card .ratio iframe{
  border-radius: 1.2rem 1.2rem 0 0;
}


/* ================= NEWS ================= */

.news-card{
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(15,76,129,.12);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.news-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(15,76,129,.22);
}
.news-img{
  min-height: 160px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
  transition: filter 0.28s;
}
.news-card:hover .news-img{
  filter: brightness(0.83) blur(1px);
}

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

.profile-bg{
  background: linear-gradient(120deg,#f7fbff 60%,#ebf0fa 100%);
}
.profile-photo img{
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform .20s;
  box-shadow: 0 6px 24px -10px #0056b3;
}
.profile-photo img:hover{
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 14px 36px -12px #31b2fc;
}
.profile-label .badge{
  font-size: 1em;
  box-shadow: 0 2px 8px #d0e6ff;
}
.heading-underline{
  position: relative;
}
.heading-underline::after{
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: #0056b3;
  border-radius: 3px;
  margin-top: 7px;
}
.school-story{
  animation: fadeIn .8s cubic-bezier(.19,.67,.83,.67);
  border-left: 4px solid #31b2fc;
  font-size: 1.03em;
}
@keyframes fadeIn{
  from { opacity: 0; transform: translateY(12px);}
  to   { opacity: 1; transform: translateY(0);}
}
/* =========================================================
   STAFF SLIDER – SMOOTH 1 BARIS LOOP
   ========================================================= */
.staff-slider-wrapper{
  overflow: hidden;
}

.staff-slider-track{
  display: flex;
  gap: 1rem;
  will-change: transform;
}

/* 1 baris */
.staff-slide-item{
  flex: 0 0 23%;
}

/* PANAH */
.staff-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(37,99,235,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.staff-arrow:hover{
  transform: translateY(-50%) scale(1.1);
}
.staff-arrow-left{ left: -10px; }
.staff-arrow-right{ right: -10px; }

/* RESPONSIVE */
@media (max-width: 992px){
  .staff-slide-item{ flex: 0 0 32%; }
}
@media (max-width: 768px){
  .staff-slide-item{ flex: 0 0 48%; }
}
@media (max-width: 576px){
  .staff-slide-item{ flex: 0 0 78%; }
  .staff-arrow{
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
}

/* =========================================================
   CARD
   ========================================================= */

.staff-simple-card{
  background: #ffffff;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15,76,129,.14);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}

.staff-simple-card:hover{
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 22px 48px rgba(15,76,129,.28);
}

/* FOTO */
.staff-simple-photo-wrap{
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg,#e0e7ff,#f0f9ff);
  overflow: hidden;
}
.staff-simple-photo-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.staff-simple-card:hover img{
  transform: scale(1.08);
}

/* BODY */
.staff-simple-body{
  padding: .7rem .8rem .85rem;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.staff-simple-name{
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
}
.staff-simple-position{
  font-size: .78rem;
  color: #64748b;
}

/* =========================================================
   ANIMASI
   ========================================================= */

@keyframes staffScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

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

@media (max-width: 992px){
  .staff-slide-item{
    flex: 0 0 calc(33.333% - 1rem);
  }
}

@media (max-width: 768px){
  .staff-slide-item{
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (max-width: 480px){
  .staff-slide-item{
    flex: 0 0 80%;
  }
  .staff-simple-name{
    font-size: .88rem;
  }
  .staff-simple-position{
    font-size: .75rem;
  }
}

/* ================= STATS MODERN ================= */

.stats-box{
  border-radius: 1.8rem;
  padding: 2.5rem;
  background: linear-gradient(135deg,#0062ff,#5a00ff,#00d4ff);
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

/* animasi gradient halus */
@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* efek glass overlay */
.stats-box::before{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  z-index:0;
}

/* isi stats di atas overlay */
.stats-box > *{
  position:relative;
  z-index:1;
}

/* ICON */
.stats-icon{
  color:#fff;
  opacity:.95;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
  transition: transform .35s ease;
}

/* ANGKA */
.stats-number{
  font-weight:800;
  letter-spacing:1px;
  color:#fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .35s ease, text-shadow .35s ease;
}

/* hover efek utama */
.stats-box:hover .stats-icon,
.stats-box:hover .stats-number{
  transform: scale(1.15);
  text-shadow: 0 10px 28px rgba(0,0,0,.5);
}

/* divider */
.stats-box hr{
  border-color: rgba(255,255,255,.25);
}

/* ================= BANGKU KOSONG ================= */

.bangku-card{
  background: rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem .5rem;
  backdrop-filter: blur(8px);
  transition: all .3s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.bangku-card:hover{
  background: rgba(255,255,255,.22);
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.bangku-card .stats-number{
  font-size:1.6rem;
  margin-bottom:.2rem;
}

/* warna dinamis (opsional) */
.bangku-card.kosong-0{
  background: linear-gradient(135deg,#00c853,#64dd17);
}
.bangku-card.kosong-banyak{
  background: linear-gradient(135deg,#ff9800,#ff5722);
}

/* ================= VISI MISI ================= */
/* =========================
   VISI & MISI – FINAL STYLE
   SDN RAWA BADAK SELATAN 09
   ========================= */

/* ===== VISI ===== */
.visi-card{
  background: linear-gradient(135deg,#0d6efd,#6610f2);
  background-size:200% 200%;
  border-radius:24px;
  padding:32px;
  min-height:280px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  box-shadow:0 18px 40px rgba(13,110,253,.25);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background-position .6s ease;
}

.visi-card h2{
  font-size:1.6rem;
}

.visi-card p{
  line-height:1.55;
}

/* Hover Visi */
.visi-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(13,110,253,.35);
  background-position:right bottom;
}

/* ===== MISI WRAPPER ===== */
#visi-misi .col-md-7{
  display:flex;
  flex-direction:column;
}

/* ===== MISI CARD ===== */
.misi-card{
  background:#ffffff;
  border-radius:18px;
  padding:14px 16px;

  display:flex;
  align-items:flex-start;
  gap:14px;

  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* Hover Misi */
.misi-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.14);
}

/* ===== BADGE ANGKA ===== */
.misi-badge{
  min-width:32px;
  height:32px;
  border-radius:50%;
  background:#0d6efd;
  color:#fff;

  font-size:14px;
  font-weight:700;

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

  flex-shrink:0;
}

/* Animasi badge */
.misi-card:hover .misi-badge{
  animation:pulse 1.2s infinite;
}

/* ===== TEKS MISI ===== */
.misi-card h6{
  font-size:.95rem;
  line-height:1.4;
}

.misi-card p{
  font-size:.85rem;
  line-height:1.45;
  margin-bottom:0;
}

/* ===== ANIMASI ===== */
@keyframes pulse{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(13,110,253,.45);
  }
  70%{
    transform:scale(1.08);
    box-shadow:0 0 0 10px rgba(13,110,253,0);
  }
  100%{
    transform:scale(1);
  }
}

/* ===== RESPONSIVE MOBILE ===== */
@media(max-width:768px){

  .visi-card{
    min-height:auto;
    padding:24px;
  }

  .visi-card h2{
    font-size:1.4rem;
  }

  .misi-card{
    padding:12px 14px;
  }

  .misi-card h6{
    font-size:.9rem;
  }

  .misi-card p{
    font-size:.82rem;
  }
}

/* ===== AKSESIBILITAS ===== */
@media (prefers-reduced-motion: reduce){
  .visi-card,
  .misi-card{
    transition:none;
  }
  .misi-card:hover .misi-badge{
    animation:none;
  }
}

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

.agenda-box{
  box-shadow: 0 10px 40px -18px rgba(0,0,0,0.6);
}
.agenda-card{
  border-radius: 1rem;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 4px 18px -10px rgba(0,0,0,0.4);
  transition: transform .22s, box-shadow .22s;
  overflow: hidden;
}
.agenda-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 14px 38px -14px rgba(0,0,0,0.6);
}
.agenda-img-big{
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.agenda-img-small{
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* ================= UTIL & WARNA ================= */

.bg-danger-subtle{
  background-color: rgba(220,53,69,.08);
}
.border-danger-subtle{
  border-color: rgba(220,53,69,.35);
}

/* ================= MODAL PENGADUAN ================= */

#pengaduanModal .modal-dialog{
  max-width: 960px;
  margin-top: 80px;
  margin-bottom: 20px;
}
#pengaduanModal .modal-content{
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
#pengaduanModal .modal-body{
  overflow-y: auto;
}

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

@media (max-width: 768px){
  .agenda-img-big,
  .agenda-img-small{
    height: 190px;
  }

  .idcard-photo{
    max-height: 260px;
  }
}

@media (max-width: 576px){
  .banner-img{
    height: 260px;
  }
  .carousel-caption{
    padding: .85rem 1rem;
    border-radius: .85rem;
  }
  .carousel-caption h5{
    font-size: 1.15rem;
  }
  .carousel-caption p{
    font-size: .85rem;
  }
}

/* Paksa menu aktif warnanya sama dengan yang lain */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: #ffffff; /* atau #e5e7eb sesuai selera */
}

/* ================= Footer ================= */
.site-footer{
  background: radial-gradient(circle at 10% 0,rgba(59,130,246,.9),rgba(37,99,235,.95)),
              rgba(15,23,42,.96);          /* senada dengan navbar */
  background-blend-mode: soft-light;
  color: #e5e7eb;
  box-shadow: 0 -16px 40px rgba(15,23,42,.7);
  border-top: 1px solid rgba(148,163,184,.35);
}
.footer-title{
  font-weight: 700;
  margin-bottom: .75rem;
}
.footer-social a{
  color:#e5e7eb;
  font-size:.9rem;
  text-decoration:none;
}
.footer-social a:hover{
  color:#ffffff;
  text-decoration:underline;
}
.footer-map-wrap{
  border-radius: .9rem;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.6);
}
.footer-hr{
  border-color: rgba(148,163,184,.6);
}