:root{
  --green:#198754;
  --card-glass: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.25);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.20);
  --shadow-md: 0 10px 25px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI',sans-serif;background:#f7faf8;overflow-x:hidden;cursor:default}

/* Hiasan background lembut */
.bg-ornament{position:fixed;z-index:-2;filter:blur(80px);opacity:.25;pointer-events:none}
.bg-ornament.o1{width:420px;height:420px;left:-120px;top:-120px;background:radial-gradient( circle at 30% 30%, #9be7c4, transparent 60% ), radial-gradient(circle at 70% 70%, #6dd3b8, transparent 60%) }
.bg-ornament.o2{width:520px;height:520px;right:-160px;bottom:-160px;background:radial-gradient( circle at 30% 70%, #b9fbc0, transparent 60% ), radial-gradient(circle at 80% 20%, #8ee0bd, transparent 60%)}

/* Navbar */
body { font-family: 'Segoe UI', sans-serif; }


.navbar-nav .nav-link {
  position: relative;
  transition: color .25s ease;
}
/* warna default nav-link jadi putih */
.navbar-dark .navbar-nav .nav-link {
  color: #ffffff !important;
}

/* tetap pakai efek hover/active kuning */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: #FFD700 !important;
}

/* garis bawah (underline) default hidden */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* jarak dari teks */
  width: 100%;
  height: 2px;
  background-color: #FFD700; /* kuning */
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}

/* saat hover / aktif */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #FFD700; /* teks jadi kuning */
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Tombol informasi (desktop/hamburger) fix di kanan */
.info-btn {
  position: absolute;
  right: 1rem;
  top: 0.8rem; /* sesuaikan tinggi navbar */
  z-index: 1050;
}

/* Hamburger putih */
.info-icon {
  display: inline-block;
  cursor: pointer;
}

.info-icon .bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #fff;
  margin: 4px 0;
  border-radius: 1px;
}

/* Logo ikut flow Bootstrap */
.navbar-brand {
  position: relative;
  z-index: auto;
  margin-right: 1rem;
}

/* Tombol ikut flow Bootstrap */
.info-btn {
  position: relative;
  right: auto;
  top: auto;
  z-index: auto;
}


/* Tombol Informasi / hamburger tetap di kanan atas */
.info-btn {
  position: absolute;       /* kunci posisinya */
  right: 1rem;
  top: 0.8rem;
  z-index: 1050;
}

/* Saat dropdown terbuka, jangan biarkan Bootstrap ubah posisinya */
.nav-item.dropdown.show .info-btn {
  position: absolute !important;
  right: 1rem !important;
  top: 0.8rem !important;
  transform: none !important;
  margin: 0 !important;
}




/* ====== HERO SLIDER: bingkai/3D & pembatas ====== */
.slider-frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  /* height: 600px;  <-- hapus atau komen */
  margin: 0 auto;
  border-radius: 20px;
  background: #fff; /* bisa dihapus kalau mau langsung ikutin gambar */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);

  /* tambahkan ini untuk responsif */
  aspect-ratio: 16/9;  /* biar proporsional, bisa diganti 21/9 kalau lebih wide */
}


.slider-frame .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.slider-frame .carousel-control-prev,
.slider-frame .carousel-control-next{
  width: 12%;
}

/* indikator bar di dalam slider (bawah-tengah) */
.slider-frame .bar-indicators{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
  background: rgba(0,0,0,.28);
  padding:6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.slider-frame .bar-indicators .bar{
  width: 14px;
  height: 4px;
  background: rgba(255,255,255,.5);
  border-radius:3px;
  cursor:pointer;
  transition: all .25s;
}
.slider-frame .bar-indicators .bar.active{
  width: 24px;
  background:#fff;
}

/* (fallback) komponen bar-indicators global */
.bar-indicators{display:flex;justify-content:center;gap:6px}

/* Hero img default height (JS akan override utk responsif) */
.hero-slide img { height: 450px; object-fit: cover; }

/* ====== DROPDOWN BERTINGKAT ====== */
.dropdown-submenu{ position: relative; }
.dropdown-submenu > .dropdown-menu{
  top:0; left:100%; margin-top:-1px;
  transition: all .25s ease;
  opacity:0; transform: translateX(10px);
  pointer-events:none;
}
.dropdown-submenu.show > .dropdown-menu{
  opacity:1; transform: translateX(0); pointer-events:auto;
}
.dropdown-submenu.open-left > .dropdown-menu{
  left:auto; right:100%; transform: translateX(-10px);
}

/* ====== KARTU JENJANG: hover effect penuh ===== */
.jenjang-card {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.65));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
}
.jenjang-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0,0,0,.14);
  border-color: rgba(25,135,84,.25);
  background: linear-gradient(180deg, #198754, #ffffff); /* ubah warna background kartu saat hover */
}

/* agar button juga ikut berubah saat kartu dihover */
.jenjang-card:hover .jenjang-btn {
  background: #fff;          /* contoh: ubah warna background tombol */
  color: #198754;            /* teks tombol berubah */
  border-color: #fff;
  transform: translateY(-2px) scale(1.05); /* tombol ikut efek maju sedikit */
}

/* header dan gambar kartu tetap sama */
.jenjang-card .card-header {
  background: linear-gradient(180deg, rgba(25,135,84,.06), rgba(25,135,84,0));
  border: 0; 
  border-bottom: 1px dashed rgba(0,0,0,.06);
  border-radius: 16px 16px 0 0;
}
.jenjang-card img {
  width: 100%; 
  height: 100px; 
  object-fit: contain; 
  margin-bottom: 10px;
}
.jenjang-badge {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

/* ====== Tombol daftar + efek hover penuh ===== */
.jenjang-btn {
  position: relative;
  overflow: hidden;      
  border-radius: 10px;   /* ganti dari 999px -> 10px biar persegi tumpul */
  padding: .6rem 1rem;   /* padding lebih proporsional untuk kotak */
  perspective: 700px;    
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  box-shadow: 0 6px 14px rgba(25, 135, 84, .25);
  border: 1px solid rgba(25,135,84,.35);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.jenjang-btn .btn-label {
  display:inline-block;
  transform-style: preserve-3d;
  transition: transform .18s ease, text-shadow .18s ease;
}

/* efek hover tombol: seluruh tombol maju */
.jenjang-btn:hover {
  transform: translateY(-4px) scale(1.05);
  background: #198754;
  color: #fff;
  box-shadow: 0 10px 20px rgba(25,135,84,.35);
}
.jenjang-btn:hover .btn-label {
  text-shadow: 0 8px 16px rgba(0,0,0,.2);
}



/* Ripple circle */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple .6s ease-out;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform:scale(2.4); opacity:0; }
}

/* ====== Testimonial Card ====== */
.testimonial-card{
  padding:20px;
  border-radius:16px;
  background:white;
  text-align:center;
  box-shadow:var(--shadow-md);
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 250px;
}
.testimonial-card img{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 10px auto;
  display:block;
}
.testimonial-track {
   display: flex;
   gap: 20px;
   overflow-x: hidden; /* biar bisa discroll kalau kepanjangan */
   scroll-snap-type: x mandatory;
}
.testimonial-card.hidden {
  display: none;
}


/* ====== Kursor & Glitter ====== */
.cursor-dot{
  width:12px;height:12px;background:var(--green);border-radius:50%;
  position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:transform .15s linear
}
.sparkle{
  width:6px;height:6px;position:fixed;background:yellow;border-radius:50%;pointer-events:none;z-index:9999;opacity:.5;animation:fade .9s forwards
}
@keyframes fade{0%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* ====== buku & pensil jatuh ====== */
.fall-item{
  position:fixed;
  pointer-events:none;
  z-index:1;
  animation-name: fall, sway, spin;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: 1, infinite, infinite;
  user-select:none;
  will-change: transform, top, left;
}
@keyframes fall{ 0%{ top:-10vh; } 100%{ top:110vh; } }
@keyframes sway{ 0%{ transform: translateX(0); } 50%{ transform: translateX(24px); } 100%{ transform: translateX(0); } }
@keyframes spin{ 0%{ rotate:0deg; } 100%{ rotate:360deg; } }

/* ====== Judul seksi dengan garis animasi ====== */
.section-container{ width:100%; display:flex; justify-content:center; align-items:center; margin:0 auto; position:relative; }
.section-title{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:2rem;color:#ffffff;position:relative;display:inline-block;
}
.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #198754;
  position: relative;
  display: inline-block;

  /* Outline utama (WebKit) */
  -webkit-text-stroke: 0.5px #198754; 
  -webkit-text-fill-color: #ffffff;

  /* Backup + mempertebal outline */
  text-shadow: 
    -1px -1px 0 #198754,  
     1px -1px 0 #198754,  
    -1px  1px 0 #198754,  
     1px  1px 0 #198754;
}

.section-title::after{
  content:'';position:absolute;left:0;bottom:-8px;width:100%;height:4px;
  background:linear-gradient(270deg,#198754,#ffffff,#ffffff,#198754);border-radius:5px;background-size:200% 100%;
  animation:move-line 2s linear infinite;
}
@keyframes move-line{ 0%{background-position:0 0;} 100%{background-position:200% 0;} }

/* Utility spacing for sections */
section{ position:relative; z-index:0; }

/* style default icon */
.social-icons a img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  border-radius: 6px; /* biar lebih rapi */
}

/* efek hover dasar */
.social-icons a:hover img {
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

#logo {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  border-radius: 50%; /* opsional biar halus */
}

#logo:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

body {
  min-height: 100vh;
  margin: 0;

  /* FOTO BACKGROUND */
  background-image: url("/image/yayasan.jpg"); /* ganti path sesuai lokasi gambarmu */
  background-size: cover;       /* biar memenuhi layar */
  background-position: center;  /* posisinya di tengah */
  background-repeat: no-repeat; /* biar gak diulang */
  background-attachment: fixed; /* biar efek parallax saat discroll */

  /* OPSIONAL: overlay gradasi biar teks tetap terbaca */
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3); /* lapisan gelap */
  z-index: -1;
}


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

.testimonial-card {
  background: linear-gradient(-45deg,#FFD700, #ffffff, #ffffff, #FFD700);
  background-size: 300% 300%;
  animation: gradientCard 10s ease infinite;

  border-radius: 16px;
  padding: 20px;
  color: #333;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.08);
}

/* animasi gradasi bergerak */
@keyframes gradientCard {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fall {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes sway {
  0% { transform: translateX(0); }
  100% { transform: translateX(30px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fall-item {
  pointer-events: none;
  z-index: 9999;
}


.jenjang-card:hover h6.text-success {
  color: #fff !important; /* jadi putih */
  transition: color 0.3s ease;
}

.jenjang-card:hover h6.text-danger {
  color: #fff !important;
  transition: color 0.3s ease;
}
.footer-copy {
  font-size: 0.8rem; /* bisa atur misal 12px */
  color: #ccc;       /* opsional biar lebih soft */
}

/* wrapper */
.testimonial-wrapper, .testimonial-slider {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: 320px;
  margin: 0 auto;
  overflow: visible;
}

/* dasar kartu (posisi absolute agar mudah di-animate) */
.testimonial-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;           /* lebar kartu (sesuaikan jika perlu) */
  height: 76%;
  border-radius: 16px;
  transition: all 0.8s cubic-bezier(.2,.9,.3,1);
  box-shadow: var(--shadow-md);
  opacity: 0.6;
  z-index: 1;
}

/* posisi spesifik */
.testimonial-card.left{
  left: 2%;
  transform: translateY(-50%) scale(0.92);
  opacity: 0.45;
  z-index: 1;
}

.testimonial-card.center{
  left: 31%;
  transform: translateY(-50%) scale(1);
  opacity: 1;
  z-index: 3;
  /* efek kaca hanya untuk tengah */
  backdrop-filter: blur(8px);
}

.testimonial-card.right{
  left: 60%;
  transform: translateY(-50%) scale(0.96);
  opacity: 0.75;
  z-index: 2;
}

/* optional: agar gambar & teks tetap rapi */
.testimonial-card img{ width:80px; height:80px; border-radius:50%; margin:0 auto 10px; display:block; object-fit:cover; }
.testimonial-card p{ margin-bottom:8px; color:#222; }

.testimonial-card {
  max-width: 350px;       /* biar lebar tetap proporsional */
  min-height: 350px;      /* kasih tinggi minimal biar stabil */
  padding: 20px;
  overflow: hidden;       /* cegah isi keluar */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  word-wrap: break-word;  /* teks panjang dipaksa turun */
  white-space: normal;    /* teks tetap bisa turun ke bawah */
}

.testimonial-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 15px;
  white-space: normal;     /* teks bisa turun ke bawah */
  word-break: break-word;  /* pecah kata panjang */
  overflow: visible;       /* biar tidak terpotong */
  text-overflow: unset;    /* matikan elipsis */
}

/* jarak bawah agar tidak nabrak unit sekolah */
.testimonial-wrapper {
  position: relative;
  z-index: 1; 
  margin-bottom: 60px;
}

/* card tengah (utama) */
.testimonial-card.active {
  opacity: 1;
  filter: none;
  backdrop-filter: none;
}

/* card kiri & kanan */
.testimonial-card.side {
  opacity: 2;          /* makin redup */
  filter: blur(5px);      /* makin buram, teks samar banget */
  pointer-events: none;   /* tidak bisa diklik */
  transform: scale(0.9);  /* opsional: agak mengecil biar fokus ke tengah */
}

@media (max-width: 991.98px) {
  #navbarNav {
    position: static; /* ✅ biar Bootstrap yang handle */
    background: rgba(0,0,0,0.85); /* ✅ warna menu mobile */
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 1rem;
  }
}


/* Styling khusus untuk link navbar "Informasi" */
.navbar-nav .nav-link.dropdown-toggle {
  background: #198754;          /* hijau elegan (warna Bootstrap success) */
  color: #fff !important;       /* teks putih */
  padding: 12px 24px;
  border-radius: 30px;          /* tombol bulat */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;                     /* jarak icon & teks */
  transition: all 0.3s ease;
}

.navbar-nav .nav-link.dropdown-toggle::after {
  display: none; /* hilangkan caret default bootstrap */
}

/* Tombol persegi panjang dengan efek 3D balok */
.navbar-nav .nav-link.dropdown-toggle {
  background: #ffffff;                 /* dasar putih */
  color: #157347 !important;        /* teks hijau */
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  border: 2px solid #e6e6e6;

  /* Efek 3D balok */
  box-shadow: 
    0 4px 0 #157347,                /* bayangan garis bawah tebal */
    0 6px 12px rgba(0,0,0,0.25);    /* bayangan luar */
}

/* hilangkan caret bootstrap */
.navbar-nav .nav-link.dropdown-toggle::after {
  display: none;
}

/* Hover: naik ke atas, shadow makin panjang */
.navbar-nav .nav-link.dropdown-toggle:hover {
  background: #157347; /* dasar hijau saat hover */
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow:
    0 6px 0 #bdbdbd,                /* garis bawah lebih panjang */
    0 10px 16px rgba(0,0,0,0.3);
}

/* Active: ditekan ke bawah */
.navbar-nav .nav-link.dropdown-toggle:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #cfcfcf,
    0 4px 8px rgba(0,0,0,0.25) inset;
}

/* ikon garis 3 (hamburger) */
/* ====== HAPUS KOTAK PADA HAMBURGER MENU DI MOBILE ====== */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link.dropdown-toggle {
    background: transparent !important; /* hilang background */
    border: none !important;            /* hilang border */
    box-shadow: none !important;        /* hilang bayangan */
    padding: 0 !important;              /* rapat */
  }

  .info-icon {
    font-size: 26px;                    /* garis 3 lebih jelas */
    color: #ffffff;                     /* hijau default */
  }

  .navbar-nav .nav-link.dropdown-toggle:hover .info-icon {
    color: #ffffff !important;          /* kuning saat hover */
    transform: scale(1.2);
  }
}


/* slider image */
.slider-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* biar isi penuh frame */
  border-radius: 20px;  /* sama dengan frame */
}

/* === HERO SLIDER RESPONSIVE === */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-section .container {
  max-width: 1140px; /* default desktop */
  margin: 0 auto;
  padding: 0 16px;
}

.hero-slide img {
  width: 100%;
  height: 70vh;           /* tinggi fleksibel: 70% layar */
  min-height: 420px;      /* jangan terlalu kecil */
  object-fit: cover;      /* biar isi penuh frame */
  border-radius: 16px;    /* opsional */
}

/* --- Desktop khusus (layar >= 992px) --- */
@media (min-width: 992px) {
  .testimonial-card {
    min-height: 420px;   /* lebih tinggi di desktop */
  }
  .testimonial-wrapper {
    min-height: 480px;
    padding-bottom: 40px;
  }
}

.section-title {
  margin-bottom: 60px;   /* kasih jarak ke card */
  z-index: 5;  
  position: relative;
}

/* hp */
@media (max-width: 576px) {
  .hero-section .container {
    max-width: 100%;     /* full lebar */
    padding: 0 8px;      /* lebih rapat */
  }
  .hero-slide img {
    height: 50vh;
    min-height: 280px;
    border-radius: 12px;
  }
}

.unit-wrapper {
  border: 3px solid #198754;   /* border hijau besar */
  border-radius: 10px;         
  background: rgba(255,255,255,.75);            /* biar logonya lebih jelas */
}

.unit-logo {
  width: 120px;    /* semua logo seragam */
  height: 120px;   /* persegi sama besar */
  object-fit: contain;
}

.unit-wrapper {
  border: 3px solid #198754;   /* border besar hijau */
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
}

.unit-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;    /* outline tiap logo */
  border-radius: 4px;
  padding: 5px;
  background: transparent;
  transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
}

.unit-logo-box:hover {
  transform: scale(1.1);       /* membesar sedikit */
  border-color: #198754;       /* ganti border jadi hijau */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* bayangan */
}

.unit-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.unit-logo-box:hover .unit-logo {
  transform: scale(1.05); /* logo ikut membesar */
}

.nav-link,
.dropdown-item {
  font-weight: 500 !important; /* semi bold */
}

/* mode slider untuk HP */
.testimonial-track.mobile-slider {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 10px;
  justify-content: center; /* center */
}

.testimonial-track.mobile-slider .testimonial-card {
  flex: 0 0 85%;
  max-width: 380px;
  margin: 0 auto;
  scroll-snap-align: center;
  position: relative;
  opacity: 1;
  transform: none;
}


.testimonial-track.mobile-slider .testimonial-card.active {
  opacity: 1;
  transform: translateX(0) translateX(-50%); /* card aktif pas center */
  z-index: 2;
}

.testimonial-track.mobile-slider .testimonial-card.prev {
  opacity: 0;
  transform: translateX(-100%) translateX(-50%); /* keluar ke kiri */
  z-index: 1;
}

/* Submenu tampil ke kanan */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/* MODE ANDROID */
@media (max-width: 768px) {
  .testimonial-track.mobile-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 420px;   /* biar proporsional */
    margin: 0 auto;
    min-height: 420px;  /* tinggi container */
  }

  .testimonial-track.mobile-slider .testimonial-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 380px;
    opacity: 0;
    transform: translateX(-50%) translateX(100%);
    transition: transform 0.6s ease, opacity 0.6s ease;
  }

  .testimonial-track.mobile-slider .testimonial-card.active {
    opacity: 1;
    transform: translateX(-50%) translateX(0);
    z-index: 2;
  }

  .testimonial-track.mobile-slider .testimonial-card.prev {
    opacity: 0;
    transform: translateX(-50%) translateX(-100%);
    z-index: 1;
  }
}

/* kartu keluar ke kanan */
.testimonial-track.mobile-slider .testimonial-card.next {
  opacity: 0;
  transform: translateX(-50%) translateX(100%);
  z-index: 1;
}

/* kartu lain yang bukan prev/next/active → benar-benar hilang */
.testimonial-track.mobile-slider .testimonial-card.hidden {
  opacity: 0;
  transform: translateX(-50%) translateX(200%);
  pointer-events: none;
  z-index: 0;
}

.jenjang-card {
  display: flex;
  flex-direction: column;
}

.jenjang-card img {
  max-height: 80px; /* batasi biar logo gak kebesaran */
  object-fit: contain;
}

.jenjang-card .card-body {
  flex-grow: 1; /* isi card menyesuaikan */
  display: flex;
  flex-direction: column;
}

.jenjang-card .btn {
  margin-top: auto; /* tombol selalu di bawah */
}

/* Hilangkan scrollbar horizontal khusus di testimonial */
.testimonial-track {
  overflow-x: hidden;
  scrollbar-width: none;   /* Firefox */
}

.testimonial-track::-webkit-scrollbar {
  display: none;           /* Chrome, Safari */
}

/* Mobile mode */
.testimonial-track.mobile-slider {
  overflow-x: hidden;
  scrollbar-width: none;
}

.testimonial-track.mobile-slider::-webkit-scrollbar {
  display: none;
}

/* Pastikan container tidak bisa geser kiri-kanan */
.testimonial-track,
.testimonial-track.mobile-slider {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Supaya anak2 card tidak bikin lebar berlebih */
.testimonial-track .testimonial-card {
  flex-shrink: 0;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Hilangkan scrollbar paksa */
.testimonial-track,
.testimonial-track.mobile-slider {
  scrollbar-width: none;  /* Firefox */
}
.testimonial-track::-webkit-scrollbar,
.testimonial-track.mobile-slider::-webkit-scrollbar {
  display: none;          /* Chrome, Safari, Edge */
}