/* =====================================================
   RESET & GLOBAL
===================================================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:'Inter',sans-serif;
  background:#f3f3f3;
  padding-top:0px;
  line-height:1.45;
  letter-spacing:.1px;
}

/* HEADINGS */
h1,h2,h3,h4,h5,h6,
.hero-title,
.section-title,
.article-title,
.guru-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.3px;
}

/* Container lock (desktop) */
@media (min-width:1200px){
  .container{max-width:1140px}
}

/* =====================================================
   NAVBAR
===================================================== */
.navbar-custom{
  background:linear-gradient(135deg,#1f7a4d,#155c3a);
  height:62px;
  padding:0;
}

.navbar-brand{padding:0}

.navbar-brand img{
  height:38px;
  transform:translateY(1px);
}

.navbar-nav{align-items:center}

.navbar-custom .nav-link{
  color:#fff;
  font-weight:600;
  font-size:14px;
  line-height:62px;
  padding:0;
}

.navbar-custom .nav-link.active{
  color:#f4c430;
}

/* =====================================================
   HERO
===================================================== */
.hero-section{
  min-height:500px;
  display:flex;
  align-items:center;
    background:radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(
      135deg,
      #0f3d2e 0%,
      #1f7a4d 45%,
      #155c3a 100%
    );;
  padding:118px 0 60px;
  padding-top:0px !important;
  padding-bottom:0px !important;
  position: relative;
  overflow: hidden;
}

.hero-section .col-lg-6:first-child{
  position: relative;
  z-index: 2;
}

.hero-subtitle{
  font-size:14px;
  letter-spacing:.5px;
  margin-bottom:8px;
}

.hero-title{
  font-size:58px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.5px;
  margin-bottom:14px;
}

.hero-title span{color:#f4c430;}

.hero-quote{
  max-width:520px;
  font-size:14px;
  line-height:1.6;
}

.hero-img{
  max-width:460px;
  display:block;
  margin-left:auto;
  transform:translate(8px,22px);
  position: absolute;
  right: 40px;
  bottom: -200px;
  max-width: 480px;
  z-index: 1;
  pointer-events: none;
}

/* SEARCH */
.search-box{
  display:flex;
  max-width:520px;
  height:35px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  margin:22px 0 18px;
}

.search-box input{
  width:100%;
  border:none;
  outline:none;
  padding:0 18px;
  font-size:14px;
}

.search-box button{
  width:50px;
  border:none;
  background:#1f7a4d;
  color:#fff;
  font-size:15px;
}

/* =====================================================
   MENU ICON
===================================================== */
.menu-section{
  margin-top:-50px;
  margin-bottom:32px;
  position: relative;
  z-index: 5;
}

section.menu-section{
  padding:0 !important;
}

.menu-box{
  background:#fff;
  border-radius:22px;
  padding:8px;
}

.menu-row{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:12px;
  align-items:center;
}

.menu-item{
  height:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

  cursor:pointer;
  text-decoration:none;
  color:inherit;

  border-radius:12px;
  transition:
    background-color .25s ease,
    transform .2s ease,
    box-shadow .25s ease;
}

.menu-item i{
  font-size:28px;
  color:#1f7a4d;
  line-height:1;
  margin-bottom:2px;
  transition:.3s;
}

.menu-item span{
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}

.menu-item:hover{
  transform:translateY(-6px);
}

.menu-item:hover i{
  text-shadow:0 0 12px rgba(47,163,107,.7);
}

/* =====================================================
   GLOBAL SECTION SPACING (REFERENSI)
===================================================== */
section{
  padding:56px 0;
}

/* Section berat / berwarna */
.agenda-section,
.fasilitas-section{
  padding:64px 0;
  padding-top:0px !important;
  padding-bottom:15px !important;
}
.guru-section .lihat-semua,
.fasilitas-section .lihat-semua{
  color:#fff !important;
}
.guru-section .lihat-semua i,
.fasilitas-section .lihat-semua i{
  color:#fff !important;
}
.guru-section .guru-title{
  margin-bottom:4px;
}
.guru-card .badge-guru{
  color:#000000 !important;
}

.eskul-section,
.pengumuman-section{
  padding-top:20px !important;
  padding-bottom:0px !important;
}
.guru-section{
  padding-top:30px !important;
  padding-bottom:30px !important;
}
.prestasi-section{
  padding-top:30px !important;
  padding-bottom:15px !important;
}
/* =====================================================
   SECTION TITLE
===================================================== */
.article-title,
.section-title,
.guru-title{
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
}
.article-section{
  padding-top:0px !important;
  padding-bottom:10px !important;
}
.article-title i{color:#ff9800}

.lihat-semua{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  margin-top:0;
}

/* Bootstrap row spacing dikontrol */
.row{
  --bs-gutter-y:1.25rem;
}

/* =====================================================
   CARD GLOBAL
===================================================== */
.article-card,
.agenda-card,
.guru-card,
.prestasi-card,
.fasilitas-card{
  border-radius:22px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.08),
    0 2px 6px rgba(0,0,0,.04);
  transition:.3s;
  will-change:transform;
}

.article-card:hover,
.guru-card:hover,
.prestasi-card:hover,
.fasilitas-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.16);
  background:#155c3a;
}

/* =====================================================
   ARTIKEL
===================================================== */
.article-card{background:#fff;height:100%}

.article-thumb{position:relative}

.article-thumb img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:22px 22px 0 0;
}

.badge-artikel{
  position:absolute;
  top:12px;
  left:12px;
  background:#fff;
  padding:4px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.article-body{padding:16px 16px 18px}

.article-body h6{
  font-size:15px;
  line-height:1.4;
  margin-bottom:6px;
  min-height:42px;
}

.article-body p{
  font-size:13px;
  line-height:1.5;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:#777;
  margin-top:6px;
}

.btn-detail{
  display:inline-block;
  margin-top:12px;
  background:#1f7a4d;
  color:#fff;
  padding:6px 18px;
  border-radius:20px;
  font-size:13px;
  text-decoration:none;
}

/* =====================================================
   AGENDA
===================================================== */
.agenda-box{
  display:flex;
  gap:28px;
  background:
  radial-gradient(circle at top right, rgba(255,255,255,.15), transparent 40%),
  linear-gradient(
    135deg,
    #145a32 0%,
    #1f7a4d 45%,
    #2fa36b 100%
  );
  border-radius:26px;
  padding:32px;
  color:#fff;
}

.agenda-left{
  width:30%;
  position:relative;
}

.agenda-left h3{font-weight:700}

.lihat-agenda{
  color:#fff;
  font-size:14px;
  text-decoration:none;
}

.agenda-maskot{
  max-width:200px;
  margin-left: 0px;
  bottom: -6px;
}

.agenda-right{
  width:70%;
  display:flex;
  gap:18px;
  align-items:stretch;
}

.agenda-card{
  background:#fff;
  color:#333;
  display:flex;
  flex-direction:column;
}

.agenda-img{position:relative}

.agenda-img img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.agenda-date{
  position:absolute;
  top:10px;
  left:10px;
  background:#1f7a4d;
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
}

.agenda-body{
  padding:14px;
  flex:1;
}

/* =====================================================
   PENGUMUMAN
===================================================== */
.pengumuman-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-top:8px;
}

.pengumuman-slider::-webkit-scrollbar{display:none}

.pengumuman-card{
  min-width:100% !important;
  width:100% !important;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}

.pengumuman-card img{
  width:100%;
  height:160px;
  object-fit:cover;
}

.badge-pengumuman{
  position:absolute;
  top:12px;
  left:12px;
  background:#1f7a4d;
  color:#fff;
  padding:4px 12px;
  border-radius:20px;
  font-size:12px;
}

.pengumuman-card p{
  padding:12px;
  font-size:14px;
  font-weight:600;
  min-height:44px;
}

/* =====================================================
   EKSKUL
===================================================== */
.ekskul-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
}

.ekskul-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.ekskul-overlay{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.45);
  display:flex;
  align-items:flex-end;
  padding:16px;
}

.ekskul-overlay span{
  background:#000000;
  padding:6px 18px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
}

/* =====================================================
   GURU & STAF
===================================================== */
.guru-section{
  background:#1f7a4d;
  color:#fff;
}

.guru-slider{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-top:8px;
}

.guru-slider::-webkit-scrollbar{display:none}

.guru-card{
  min-width:260px;
  background:#fff;
  overflow:hidden;
}

.guru-card img{
  width:100%;
  height:370px;
  object-fit:cover;
}

.badge-guru{
  position:absolute;
  top:14px;
  left:14px;
  background-color: #eaeaea;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
}

.badge-guru small{
  display:block;
  font-size:11px;
  opacity:.8;
}

.guru-footer{
  background:linear-gradient(135deg,#1f7a4d,#2fa36b);
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:64px;
}

.btn-detail-guru{
  background:#fff;
  padding:6px 16px;
  border-radius:16px;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  color:#333;
}

/* =====================================================
   PRESTASI
===================================================== */
.prestasi-card{
  background:#2fa36b;
  color:#fff;
  border-radius:24px;
}

.prestasi-img img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.badge-juara{
  position:absolute;
  top:14px;
  left:14px;
  background:#1f7a4d;
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
}

.prestasi-body{
  padding:16px;
}

.prestasi-body ul{
  list-style:none;
  padding:0;
  margin:0;
}

.prestasi-body li{
  display:flex;
  gap:6px;
  font-size:13px;
  margin-bottom:6px;
  color:#fff;
}

/* =====================================================
   FASILITAS
===================================================== */
.fasilitas-box{
  background:linear-gradient(135deg,#1f7a4d,#2fa36b);
  border-radius:26px;
  padding:32px;
  color:#fff;
}

.fasilitas-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
}

.fasilitas-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.fasilitas-card span{
  position:absolute;
  bottom:14px;
  left:14px;
  background:rgba(0,0,0,.55);
  padding:6px 14px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  max-width:calc(100% - 28px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =====================================================
   FOOTER
===================================================== */
.footer-section{
  background:radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(
      135deg,
      #0f3d2e 0%,
      #1f7a4d 45%,
      #155c3a 100%
    );;
  color:#fff;
  padding:60px 0 30px;
  margin-top:48px;
}

.footer-section h6{
  font-weight:700;
  margin-bottom:14px;
}

.footer-section ul{
  list-style:none;
  padding:0;
}

.footer-section li{margin-bottom:8px}

.footer-section a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
}

.footer-section p{font-size:14px}

.social a{
  display:inline-flex;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#0f3d2e;
  align-items:center;
  justify-content:center;
  margin-right:6px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:24px;
  padding-top:14px;
  text-align:center;
  font-size:13px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .menu-row{grid-template-columns:repeat(4,1fr)}
  .agenda-box{flex-direction:column}
  .agenda-left,.agenda-right{width:100%}
  .hero-title{font-size:36px}
}

/* ===== FADE ANIMATION ===== */
.fade-section{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-section.show{
  opacity: 1;
  transform: translateY(0);
}

/* variasi */
.fade-left{
  transform: translateX(-30px);
}

.fade-right{
  transform: translateX(30px);
}

/* =====================================
   ARTIKEL: MOBILE SCROLL KE SAMPING
===================================== */
@media (max-width: 576px) {

  .article-section .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0px;
    padding-bottom: 6px;
  }

  .article-section .row::-webkit-scrollbar {
    display: none;
  }

  .article-section .col-lg-3,
  .article-section .col-md-6 {
    flex: 0 0 85%;
    max-width: 85%;
  }

  .article-card {
    height: 100%;
  }

  .article-thumb img {
    height: 190px;
  }

  .article-body h6 {
    min-height: unset;
  }
}
.article-section .row {
  scroll-snap-type: x mandatory;
}

.article-section .col-lg-3 {
  scroll-snap-align: start;
}

/* =====================================
   AGENDA MOBILE SLIDER
===================================== */
@media (max-width: 576px) {

  /* sembunyikan maskot */
  .agenda-maskot {
    display: none;
  }

  .agenda-box {
    flex-direction: column;
    padding: 20px;
  }

  .agenda-left,
  .agenda-right {
    width: 100%;
  }

  /* slider */
  .agenda-right {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 12px;
    scroll-behavior: smooth;
  }

  .agenda-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* tombol navigasi */
  .agenda-nav {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }

  .agenda-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 14px;
  }
}
/* =====================================
   BOTTOM NAV MOBILE
===================================== */
@media (max-width:576px){

  .footer-section{
    display:none;
  }

  .footer-fixed{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:64px;
    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    z-index:9999;
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
  }

  .footer-fixed a{
    flex:1;
    text-align:center;
    font-size:11px;
    color:#555;
    text-decoration:none;
  }

  .footer-fixed i{
    display:block;
    font-size:18px;
    margin-bottom:4px;
    color:#1f7a4d;
  }


  body{
    padding-bottom:72px;
  }

  /* bottom nav */
  .bottom-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    height:64px;
    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    z-index:9998;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }

  .bottom-nav a{
    text-align:center;
    font-size:11px;
    color:#444;
    text-decoration:none;
  }

  .bottom-nav i{
    display:block;
    font-size:18px;
    margin-bottom:4px;
    color:#1f7a4d;
  }

  /* sheet base */
  .menu-sheet,
  .kontak-sheet{
    position:fixed;
    left:0; right:0;
    bottom:-100%;
    background:#fff;
    border-radius:20px 20px 0 0;
    z-index:9999;
    transition:
      transform .45s cubic-bezier(.34,1.56,.64,1),
      bottom .45s cubic-bezier(.34,1.56,.64,1),
      opacity .3s ease;
    transform: translateY(40px) scale(.98);
    opacity:0;
    box-shadow:0 -10px 30px rgba(0,0,0,.3);
  }

  .menu-sheet.show,
  .kontak-sheet.show{
      bottom: 64px;;
    transform: translateY(0) scale(1);
    opacity:1;
  }

  .sheet-content{
    padding:20px;
    text-align:center;
  max-height:70vh;
  overflow-y:auto;
  }

  /* menu list */
  .sheet-menu{
    list-style:none;
    padding:0;
    margin:14px 0;
  }

  .sheet-menu li{
    border-bottom:1px solid #eee;
  }

  .sheet-menu a{
    display:block;
    padding:14px;
    font-size:15px;
    font-weight:600;
    color:#333;
    text-decoration:none;
  }

  /* kontak */
  .kontak-item{
    display:flex;
    gap:14px;
    background:#f5f5f5;
    padding:14px;
    border-radius:14px;
    margin:12px 0;
    text-align:left;
  }

  .kontak-item i{
    font-size:20px;
    color:#1f7a4d;
  }

  .kontak-item small{
    display:block;
    font-size:12px;
    color:#666;
  }

  /* close button */
  .sheet-close{
    width:100%;
    margin-top:10px;
    padding:12px;
    border:none;
    border-radius:14px;
    background:#1f7a4d;
    color:#fff;
    font-weight:600;
  }
}
/* active state */
.bottom-nav .nav-item.active i{
  color:#1f7a4d;
}

.bottom-nav .nav-item.active span{
  color:#1f7a4d;
  font-weight:600;
}

.bottom-nav .nav-item.active::after{
  content:"";
  display:block;
  width:6px;
  height:6px;
  background:#1f7a4d;
  border-radius:50%;
  margin:4px auto 0;
}
/* =====================================
   PENGUMUMAN SLIDER (DESKTOP + MOBILE)
===================================== */

.pengumuman-section{
  position:relative;
}

/* slider utama */
.pengumuman-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding-bottom:14px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

/* scrollbar */
.pengumuman-slider::-webkit-scrollbar{
  height:6px;
}

.pengumuman-slider::-webkit-scrollbar-track{
  background:#eaeaea;
  border-radius:10px;
}

.pengumuman-slider::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#ff9800,#ffb703);
  border-radius:10px;
}

/* card */
.pengumuman-card{
  min-width:320px;
  flex-shrink:0;
  scroll-snap-align:start;
}

/* fade kanan (tanda bisa scroll) */
.pengumuman-section::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(to left,#f3f3f3,transparent);
}

/* =====================================
   INDIKATOR (DESKTOP + MOBILE)
===================================== */
.pengumuman-indicator{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:12px;
}

.pengumuman-indicator span{
  width:6px;
  height:6px;
  background:#ccc;
  border-radius:50%;
  transition:.3s;
}

.pengumuman-indicator span.active{
  background:#ff9800;
  width:18px;
  border-radius:10px;
}

/* =====================================
   MOBILE OPTIMIZATION
===================================== */
@media (max-width:576px){

  .pengumuman-slider{
    gap:14px;
  }

  .pengumuman-card{
    min-width:85%;
  }

  .pengumuman-indicator{
    margin-top:10px;
  }
}
/* =====================================
   EKSKUL SLIDER
===================================== */
.ekskul-wrapper{
  position:relative;
}

.ekskul-slider{
  display:flex;
  gap:20px;
  overflow:hidden;
  scroll-behavior:smooth;
}

.ekskul-slide{
  flex:0 0 25%; /* desktop: 4 card */
}

/* =====================================
   NAV BAWAH (PREV / NEXT)
===================================== */
.ekskul-nav-bottom{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  margin-top:18px;
}

.ekskul-nav{
  width:25px;
  height:25px;
  border:none;
  border-radius:50%;
  background:#1f7a4d;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  cursor:pointer;
  transition:.3s;
}

.ekskul-nav i{
  font-size:10px;
}

.ekskul-nav:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  background:#155c3a;
}

/* ===============================
   MOBILE
================================ */
@media (max-width:576px){
  .ekskul-slide{
    flex:0 0 100%; /* 1 card */
  }

  .ekskul-nav{
    width:30px;
    height:30px;
  }
}

/* =====================================
   FIX SPACING EKSKUL
===================================== */
.ekskul-section{
  padding-top:20px !important;
  padding-bottom:20px !important;
}

/* =====================================
   PRESTASI SLIDER
===================================== */
.prestasi-wrapper{
  position:relative;
}

.prestasi-slider{
  display:flex;
  gap:20px;
  overflow:hidden;
  scroll-behavior:smooth;
}

.prestasi-slide{
  flex:0 0 33.333%; /* desktop: 3 card */
}

/* nav */
.prestasi-nav{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:18px;
}

.prestasi-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#1f7a4d;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.prestasi-btn i{
  font-size:12px;
}
/* =====================================
   FORCE PRESTASI 1 CARD MOBILE
===================================== */
@media (max-width:576px){

  .prestasi-wrapper{
    width:100%;
    overflow:hidden;
  }

  .prestasi-slider{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  .prestasi-slide{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }

  .prestasi-card{
    width:100% !important;
  }
}

/* =====================================
   FASILITAS SLIDER
===================================== */

.fasilitas-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.fasilitas-wrapper{
  position:relative;
}

.fasilitas-slider{
  display:flex;
  gap:20px;
  overflow:hidden;
  scroll-behavior:smooth;
}

.fasilitas-slide{
  flex:0 0 33.333%;
}

/* tombol */
.fasilitas-nav{
  display:flex;
  gap:10px;
}

.fasilitas-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#1f7a4d;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.fasilitas-btn i{
  font-size:12px;
}

/* =====================================
   FORCE FASILITAS 1 CARD MOBILE
===================================== */
@media (max-width:576px){

  .fasilitas-wrapper{
    width:100%;
    overflow:hidden;
  }

  .fasilitas-slider{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  .fasilitas-slide{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }

  .fasilitas-card{
    width:100% !important;
  }
}
.guru-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.guru-nav{
  display:flex;
  gap:10px;
}

.guru-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#1f7a4d;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.guru-slider{
  display:flex;
  gap:22px;
  overflow:hidden;
  scroll-behavior:smooth;
}

.guru-card{
  flex:0 0 260px;
}

.guru-btn i{font-size:12px}

@media (max-width:576px){

  .guru-slider{
    gap:14px;
  }

  /* card 2 kolom */
  .guru-card{
    flex:0 0 calc(50% - 8px) !important;
    min-width:calc(50% - 8px) !important;
    max-width:calc(50% - 8px) !important;
    display:flex;
    flex-direction:column;
  }

  /* FOTO: kecil & proporsional */
  .guru-card img{
    width:100%;
    aspect-ratio: 4 / 5;
    object-fit:cover;
    height:270px;
  }

  /* footer dipadatkan */
  .guru-footer{
    padding:8px 10px;
    min-height:46px;
  }

  .guru-footer strong{
    font-size:12px;
    line-height:1.2;
  }

  .btn-detail-guru{
    font-size:10px;
    padding:4px 12px;
  }

  /* tombol nav */
  .guru-btn{
    width:32px;
    height:32px;
  }

  .guru-btn i{
    font-size:10px;
  }
}


/* ================================
   HOVER DROPDOWN (DESKTOP)
================================ */
@media (min-width: 992px) {

  .navbar .dropdown-menu{
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    margin-top: 8px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 10px 0;
  }

  .navbar .dropdown:hover > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar .dropdown-toggle::after{
    transition: transform .25s ease;
  }

  .navbar .dropdown:hover .dropdown-toggle::after{
    transform: rotate(180deg);
  }
}

/* ===============================
   SHEET MENU SUBMENU
================================ */
.sheet-menu{
  list-style:none;
  padding:0;
  margin:0;
}

.sheet-menu li{
  border-bottom:1px solid rgba(0,0,0,.06);
}

.sheet-menu a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  text-decoration:none;
  color:#111;
  font-weight:500;
}

.sheet-menu .arrow{
  transition:transform .3s ease;
  font-size:20px;
}

/* submenu */
.sheet-menu .submenu{
  max-height:0;
  overflow:hidden;
  background:#f9fafb;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}

.sheet-menu .submenu a{
  padding:14px 32px;
  font-size:14px;
  color:#444;
}

/* active */
.sheet-menu .has-sub.active .arrow{
  transform:rotate(90deg);
}

.sheet-menu .has-sub.active > .submenu{
  max-height: 600px; /* HARUS ADA */
}

/* ===============================
   DESKTOP DEFAULT
================================ */
.logo-mobile,
.logo-text-mobile{
  display: none;
}

/* ===============================
   MOBILE ONLY
================================ */
@media (max-width: 991.98px){

  .logo-desktop{
    display: none;
  }

  .logo-mobile{
    display: block;
    height: 28px;
  }

  .logo-text-mobile{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    display: block;
    font-size: 25px;
    font-weight: 600;
    background: linear-gradient(90deg, #ffffff, #ffd54f);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }

  .brand-mobile{
    display: flex;
    align-items: center;
    gap: 8px;
  }
    .mobile-navbar .container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}