/* ======================================================================
   RBM Algebra — style.css (FINAL)
   Tema: Biru + Ungu Lembut
   Revisi penuh: navbar, dropdown, sidebar, FAB, map, hero, media,
   features, tutor, testimonial, responsive, animasi ringan.
   ====================================================================== */

/* ===== GLOBAL & THEME ===== */
* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }
:root{
  --blue: #00c6ff;
  --purple: #9c27b0;
  --blue-dark: #0072e6;
  --card: #ffffff;
  --muted: #6b7280;
  --shadow: rgba(15,23,42,0.08);
  --glass: rgba(255,255,255,0.6);
  --glass-strong: rgba(255,255,255,0.85);
  --radius: 14px;
  --max-width: 1200px;
  --gap: 20px;
  --container-padding: 10%;
  --ff: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* { font-family: var(--ff); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ===== BODY ===== */
html,body { height:100%; }
body {
  background: var(--bg);
  color: #0f1724;
  line-height:1.6;
  overflow-x:hidden;
}

/* ===== LAYOUT CONTAINERS ===== */
.container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 20px; }
.container-wide { width:100%; max-width:1400px; margin:0 auto; padding:0 20px; }

/* ===== HEADER ===== */
header{
  position:sticky; top:12px; z-index:2200;
  margin: 0 auto; width: calc(100% - 40px);
  background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0.5));
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px var(--shadow);
  border-radius: 12px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
}

/* logo */
/* ===== LOGO ===== */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logo span {
  font-weight: 700;
  color: royalblue;
  font-size: 2rem;
  line-height: 1.2;
}

/* Hover (opsional, biar lebih hidup) */
.logo:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
/* ====== 🎬 Video Container ====== */
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

iframe {
  width: 90%;
  max-width: 720px;
  height: 405px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-top: 24px;
}

/* Responsif: kecilkan di HP */
@media (max-width: 768px) {
  .logo img {
    width: 70px;
    height: 70px;
  }

  .logo span {
    font-size: 1.4rem;
  }
}


/* ===== NAVIGATION MENU ===== */
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

nav a,
.dropbtn {
  display: inline-block;
  padding: 10px 18px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 2px solid transparent;
  transition: all 0.35s ease;
  backdrop-filter: blur(6px);
}

/* Warna teks per menu (cerah) */
nav a[href*="blog"] { color: #ff4081; }
nav a[href*="testi"] { color: #ffb74d; }
nav a[href*="info"] { color: #81c784; }
nav a[href*="kuis"], nav a[href*="quiz"] { color: red; }
nav a[href*="tutor"] { color: #ba68c8; }
nav a[href*="about"] { color: red; }
nav a[href*="contact"] { color: red; }
nav a[href*="login"] { color: green; }

/* Hover tetap untuk efek ringan */
nav a:hover,
.dropbtn:hover {
  transform: scale(1.05);
  background: rgba(255,255,255,0.95);
  color: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  opacity: 0.95;
}

/* ===== DROPDOWN UMUM ===== */
.dropdown {
  position: relative;
}

.dropbtn {
  background: transparent;
  border: 3px solid; /* ukuran border */
  border-radius: 10px;
  border-image: linear-gradient(135deg,#42a5f5) 1; /* gradasi biru */
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 14px;
  transition: all 0.35s ease;
  color: royalblue; /* text default */
}


/* Konten dropdown desktop: default sembunyi */
.dropdown-content {
  position: absolute;
  top: 110%;
  left: 0;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all 0.35s ease;
  z-index: 999;
}

/* Muncul saat tombol diklik (JS tambahkan class .active pada parent dropdown) */
.dropdown.active .dropdown-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Link dalam dropdown */
.dropdown-content a {
  font-size: 0.92rem;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.35s ease;
  background: rgba(245,245,245,0.8);
  color: #000000;
}

.dropdown-content a:hover {
  color: #000;
  transform: translateX(4px);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ===== SUBMENU DESKTOP ===== */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
  cursor: pointer;
  color: royalblue;
}

/* Konten submenu default sembunyi */
.dropdown-subcontent {
  position: absolute;
  top: 0;
  left: 100%;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 200px;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: all 0.35s ease;
  z-index: 999;
}

/* Muncul saat submenu diklik (JS tambahkan .active) */
.dropdown-submenu.active .dropdown-subcontent {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.dropdown-subcontent a {
  padding: 6px 10px;
  border-radius: 8px;
  color: royalblue;
  transition: all 0.35s ease;
}

.dropdown-subcontent a:hover {
  color: #000;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.9);
}




/* ===== Dropdown Mobile Royal Blue Kalem ===== */
@media (max-width: 820px) {
/* Dropdown utama */
.dropdown-mobile {
  margin-bottom: 16px;
}

.dropdown-toggle {
  display: flex;
  align-items: flex-start; /* ⬅️ teks sejajar atas, bukan tengah */
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  text-align: left; /* ⬅️ teks rata kiri */
  transition: all 0.35s ease;
  perspective: 500px;
}

.dropdown-toggle:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  flex-direction: column;
  margin-top: 6px;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: all 0.35s ease;
}

.dropdown-mobile.active .dropdown-menu {
  display: flex;
  opacity: 1;
}

.dropdown-menu a {
  display: flex; /* ⬅️ tambahkan supaya ikon & teks sejajar kiri */
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: #111;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.35s ease;
}

.dropdown-menu a:hover {
  transform: translateX(3px);
  background: #2e4a8c;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Submenu toggle */
.dropdown-submobile {
  margin-top: 6px;
}

.dropdown-subtoggle {
  display: flex;
  align-items: flex-start; /* ⬅️ ganti dari center ke flex-start */
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.35s ease;
}

.dropdown-subtoggle:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dropdown-subtoggle::after {
  content: "+";
  font-size: 0.9rem;
  transition: transform 0.35s ease;
}

.dropdown-subtoggle.active::after {
  transform: rotate(180deg);
}

/* 🔹 Submenu About Us */
.dropdown-submenu {
  display: none;
  flex-direction: column;
  margin-left: 10px; /* sedikit indentasi dari menu utama */
  margin-top: 9px;
  gap: 6px;
}

.dropdown-submenu.show {
  display: flex;
  opacity: 1;
  transition: all 0.35s ease;
}

/* 🔹 Tautan dalam submenu */
.dropdown-submenu a {
  display: flex;               /* buat ikon + teks sejajar */
  align-items: center;         /* vertikal rapi */
  justify-content: flex-start; /* teks dan ikon rata kiri */
  text-align: left;            /* pastikan teks tidak center */
  gap: 8px;                    /* jarak antara ikon dan teks */
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9rem;
  color: #fff;
  background: #3a5998;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.35s ease;
}

.dropdown-submenu a:hover {
  transform: translateX(3px);
  background: #2e4a8c;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Optional: bikin ikon nggak terlalu rapat */
.dropdown-submenu a i {
  min-width: 18px; /* biar sejajar antar baris */
  text-align: center;
}

}




/* ===== HAMBURGER (MOBILE) ===== */
.hamburger{ display:none; width:34px; height:26px; cursor:pointer; gap:6px; flex-direction:column; justify-content:center; }
.hamburger span{ height:3px; background:var(--purple); border-radius:3px; transition:all .25s; }
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translateY(7px); }
.hamburger.active span:nth-child(2){ opacity:0; transform:scale(0.6); }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translateY(-7px); }

/* ===== SIDEBAR HALUS ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* sembunyi di kiri */
  width: 270px;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 6px 0 20px rgba(0, 0, 0, 0.08);
  border-radius: 0 20px 0 0;
  padding: 24px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: left 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  z-index: 2500;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(-15px);
}

/* Saat aktif */
.sidebar.active {
  left: 0;
  opacity: 1;
  transform: translateX(0);
}

/* Tombol close modern */
.sidebar-close {
  position: relative;
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.sidebar-close::before,
.sidebar-close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--purple);
  transition: transform 0.3s ease;
}

.sidebar-close::before { transform: rotate(45deg); }
.sidebar-close::after { transform: rotate(-45deg); }

.sidebar-close:hover::before { transform: rotate(135deg); }
.sidebar-close:hover::after { transform: rotate(-135deg); }
.sidebar-close:hover {
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Item menu */
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 16px;
  border-radius: 14px;
  color: black; /* ✅ teks hitam normal */
  transition: all 0.35s ease, transform 0.35s ease, background 0.35s ease, color 0.35s ease;
  opacity: 0;
  transform: translateX(-10px);
}

/* Saat aktif */
.sidebar.active a {
  opacity: 1;
  transform: translateX(0);
}

/* Hover */
.sidebar a:hover {
  transform: translateX(6px) scale(1.03);
  background: linear-gradient(90deg, var(--blue), var(--purple));
  color: #000; /* ✅ teks putih saat hover */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Ikon */
.sidebar a i {
  font-size: 1rem;
  opacity: 0.9;
  color: inherit; /* ✅ ikon ikut warna teks */
}

/* Scrollbar */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}






.hero {
  min-height: 105vh;
  display: flex; 
  align-items: center; 
  justify-content: center;
  text-align: center; 
  color: #fff; 
  border-radius: 12px; 
  margin: 18px;
  padding: 60px 20px;
  background:
              url('https://lh3.googleusercontent.com/pw/AP1GczNAXxgdQL-GhX2uitU03RG3-0IcwSNjgi39I54dp6S5TSQqHO189o-EoSKSi2kfYA4r6l_PDNnBYu94_gTjQFcBlsyXZwyR-36fVzZKYU0xRVdWd25QSurrK8NKi88lEIJhr7ChS4ceu-rPbvFC1EMZ=w1641-h923-s-no-gm?authuser=0') center/cover no-repeat;
  background-attachment: scroll; /* default, agar mobile aman */
  background-size: cover;
  background-position: center center;
}

/* Overlay semi-transparan */
.hero .overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.2); /* transparansi bisa diubah */
  border-radius: 12px;
  z-index: 0;
}
.hero .container{ max-width:980px; }
.hero h1{ font-size:2.6rem; letter-spacing:1px; margin-bottom:10px; text-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.hero h2{ font-size:2.5rem; opacity:0.95; margin-bottom:8px; }
.hero p{ font-size:1.8rem; margin-bottom:18px; opacity:0.95; }
.hero .btn{
  display:inline-block; background:linear-gradient(90deg,var(--blue),var(--purple)); color:#fff; padding:12px 22px; border-radius:20px; text-decoration:none; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,0.12);
  transition: transform .18s ease, box-shadow .20s ease;
}
.hero .btn:hover{ transform:translateY(-4px); box-shadow:0 18px 48px rgba(0,0,0,0.18); }

/* ===== FLOATING STATS & MAP ===== */
.floating-stats {
  position: fixed;
  bottom: 50px; /* ✅ muncul di bawah header */
  left: 20px; /* ✅ pindah ke kanan */
  background: transparent;
  border: 2px solid #00c6ff;
  border-radius: 10px;
  height: 80px;
  width: 200px;
  padding: 10px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  font-family: 'Poppins', sans-serif;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeInRight 0.6s ease-in-out;
}

.stat-item {
  color: #007bff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-item strong {
  color: #00c6ff;
  font-weight: 700;
}
.floating-map{
  position:fixed; right:20px; bottom:40px; width:150px; height:100px; border-radius:10px; overflow:hidden; border:1px solid rgba(0,198,255,0.12); z-index:1100; background:#fff; box-shadow:0 12px 30px rgba(2,6,23,0.06);
}
.floating-map iframe{ width:100%; height:100%; border:0; }

/* ==== FAB Desktop (Right Floating) ==== */
.fab-right {
  position: fixed;
  top: 30%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 2000;
}

/* Tombol utama FAB */
.fab-main {
  background: royalblue;
  color: #fff;
  border: none;
  border-radius: 10px 0 0 10px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease;
}

.fab-main:hover {
  background: green;
}

/* Container list menu FAB */
.fab-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 5px;
}

/* Item menu FAB */
.fab-item {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: #fff;
  padding: 6px 10px 6px 12px;
  border-radius: 10px 0 0 10px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.fab-item img {
  width: 25px;
  height: 30px;
  object-fit: contain;
}

/* Saat aktif, tampil berurutan dari atas ke bawah */
.fab-right.active .fab-item {
  opacity: 1;
  pointer-events: auto;
}

.fab-right.active .fab-item:nth-child(1) {
  transform: translateY(45px);
  transition-delay: 0s;
}
.fab-right.active .fab-item:nth-child(2) {
  transform: translateY(90px);
  transition-delay: 0.05s;
}
.fab-right.active .fab-item:nth-child(3) {
  transform: translateY(135px);
  transition-delay: 0.1s;
}
.fab-right.active .fab-item:nth-child(4) {
  transform: translateY(180px);
  transition-delay: 0.15s;
}
.fab-right.active .fab-item:nth-child(5) {
  transform: translateY(225px);
  transition-delay: 0.2s;
}



/* ===== PRIVATE ONLINE / SECTION ===== */
.private-online{
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,245,255,0.97));
  padding:48px 20px; margin:18px; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.04);
}
.private-online .section-title{ font-size:1rem; color:royalblue; font-weight:800; margin-bottom:6px; text-align:center; }
.private-online .section-subtitle{ text-align:center; color:var(--muted); margin-bottom:18px; font-weight:600; }

/* content */
.private-online .description p{ margin-bottom:12px; color:#0f1724; font-size: 0.85rem; text-align:justify; line-height:1.7; }
.private-online .conclusion{ margin-top:16px; }
/* ===== MISSION SECTION ===== */
.mission {
  text-align: center;
  margin-top: 20px;
}

.mission-btn {
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.mission-btn:hover {
  background: dodgerblue;
  transform: scale(1.05);
}

/* Teks misi tersembunyi awalnya */
.mission-text {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  margin-top: 10px;
}

.mission-text.show {
  max-height: 300px;
  opacity: 1;
}

.mission-text p {
  color: #0f1724;
  text-align: justify;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 12px;
}

.media-section {
  padding: 44px 20px;
  margin: 18px;
  border-radius: 12px;
}

.scroll-section {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
}
.lihat-lainnya-container {
  text-align: center;      /* tombol berada di tengah */
  margin-top: 20px;        /* beri jarak dari gambar */
}

.next-btn {
  display: inline-block;
  background-color: transparent; /* warna tombol */
  color: royalblue;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.next-btn:hover {
  background-color: #fff; /* warna saat hover */
}


/* Box membungkus gambar + caption pas */
.media-box {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Gambar full lebar & proporsional */
.media-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0;
  border-radius: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.05); /* garis halus pemisah opsional */
}

/* Caption nempel di bawah tanpa jarak aneh */
.media-caption {
  padding: 10px 14px 14px 14px;
  color: #233;
  font-size: 0.80rem;
  line-height: 1.5;
  text-align: justify;
  background: #fff;
  margin: 0; /* hilangkan jarak default */
}

.media-section h2 {
  text-align: center;      /* rata tengah */
  color: #007bff;          /* biru terang, bisa ganti sesuai tema */
  font-size: 1.5rem;         /* ukuran font judul */
  font-weight: 700;        /* tebal */
  margin-bottom: 24px;     /* jarak ke bawah */
}

.media-section p {
  text-align: center;
  font-size: 1rem;
  color: #000;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.media-caption{ margin: 10px; padding:12px 14px; color:#233; font-size:0.95rem; line-height:1.5; text-align:center; }

/* video iframe */
.media-video iframe{ width:100%; height:200px; border:0; }

.features {
  position: relative;
  padding: 50px 0;
}

/* Feature list carousel */
.feature-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;  /* scroll horizontal */
  scroll-behavior: smooth;
  padding: 0 60px;   /* space untuk tombol panah */
  scrollbar-width: none; /* hilangkan scrollbar Firefox */
}
.feature-list::-webkit-scrollbar {
  display: none;      /* hilangkan scrollbar Chrome/Safari */
}
.features .container-wide {
  text-align: center; /* semua konten di dalam container rata tengah */
}

.features .rainbow-text {
  display: inline-block;  /* supaya lebarnya pas teks */
  text-align: center;     /* rata tengah teks */
  margin-bottom: 30px;    /* beri jarak bawah ke carousel */
}

.feature {
  flex: 0 0 250px;
  background-color: #f5f9ff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s;
}

.feature:hover {
  transform: translateY(-5px);
}

.feature-icon {
  max-width: 50%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
  display: block;
}

/* Tombol panah */
.feature-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 20px;
  background-color: #00c6ff;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.feature-nav:hover {
  background-color: #0094d6;
}

.feature-nav.left {
  left: 10px;
}

.feature-nav.right {
  right: 10px;
}

.feature h4 {
  font-size: 1rem;
  margin-bottom: 8px;
  font-weight: 600;
  text-align: center;
}

/* Variasi warna judul per card */
.feature-list .feature:nth-child(1) h4 { color: #00c6ff; }
.feature-list .feature:nth-child(2) h4 { color: #ff6f61; }
.feature-list .feature:nth-child(3) h4 { color: #ffa500; }
.feature-list .feature:nth-child(4) h4 { color: #28a745; }
.feature-list .feature:nth-child(5) h4 { color: #6f42c1; }
.feature-list .feature:nth-child(6) h4 { color: #ff1493; }

/* 🌈 Animasi masuk (fade-in) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }
.fade-in:nth-child(6) { animation-delay: 0.6s; }

/* === 📱 Mode Mobile & Fold (≤820px) === */
@media (max-width: 820px) {
  .features {
    padding: 30px 0;
  }

  /* Judul Rainbow di tengah dengan ukuran pas */
  .features .rainbow-text {
    font-size: clamp(1rem, 4vw, 1.3rem);
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: center;
  }

  /* Daftar fitur jadi lebih ramping & mudah digulir */
  .feature-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 20px;
    scrollbar-width: none;
  }

  .feature-list::-webkit-scrollbar {
    display: none;
  }

  /* Setiap kartu fitur */
  .feature {
    flex: 0 0 200px;              /* lebar kartu disesuaikan layar kecil */
    padding: 16px;
    border-radius: 14px;
    background: #f8faff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.25s ease;
  }

  .feature:hover {
    transform: translateY(-3px);
  }

  .feature-icon {
    width: 40%;
    max-width: 50px;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .feature h4 {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .feature p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555;
  }

  /* Tombol panah disembunyikan di mobile (pakai swipe saja) */
  .feature-nav {
    display: none !important;
  }

  /* Efek animasi fade-in lebih ringan di mobile */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
  }

  /* Sedikit jeda antar elemen agar halus */
  .fade-in:nth-child(1) { animation-delay: 0.1s; }
  .fade-in:nth-child(2) { animation-delay: 0.15s; }
  .fade-in:nth-child(3) { animation-delay: 0.2s; }
  .fade-in:nth-child(4) { animation-delay: 0.25s; }
  .fade-in:nth-child(5) { animation-delay: 0.3s; }
  .fade-in:nth-child(6) { animation-delay: 0.35s; }
}

/* Tambahan agar di mode landscape mobile tetap proporsional */
@media (max-width: 820px) and (orientation: landscape) {
  .feature-list {
    padding: 0 30px;
    gap: 10px;
  }

  .feature {
    flex: 0 0 180px;
    padding: 14px;
  }

  .feature h4 {
    font-size: 0.9rem;
  }

  .feature p {
    font-size: 0.8rem;
  }

  .features .rainbow-text {
    font-size: clamp(0.9rem, 2.8vw, 1.2rem);
  }
}

/* ===== TUTOR SECTION ===== */
.tutor-section {
  padding: 50px 10% 60px;
  text-align: center;
  border-radius: 12px;
  margin: 18px;
  overflow: hidden;
}

/* Judul & deskripsi */
.tutor-section h2 {
  font-size: 2rem;
  color: #004e92; /* biru tua */
  margin-bottom: 18px;
  text-align: center;
}

.tutor-section p {
  font-size: 1rem;
  color: #023e8a;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Kontainer scroll horizontal */
.tutor-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: auto;
    gap: 20px;
    justify-items: center;
    overflow: visible; /* nonaktifkan scroll */
  }


/* Sembunyikan scrollbar di browser modern */
.tutor-container::-webkit-scrollbar {
  height: 8px;
}
  
  .card {
    flex: none; /* hapus pengaruh flex */
    width: 100%;
    max-width: 280px;
  }

/* Foto tutor */
.card img {
  width: 60%;
  height: 200px;
  object-fit: cover;
}

/* Area teks biru tua */
.card-content {
  background: linear-gradient(135deg, #004e92, #0099ff);
  padding: 14px 10px;
  color: white;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

.card-content h3 {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

.role {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Universitas (bagian putih bawah) */
.achievements {
  background: #f9f9f9;
  padding: 8px;
  font-size: 0.80rem;
  color: #004e92;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover efek */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 78, 146, 0.25);
}
.alur-daftar {
  text-align: center;
  padding: 50px 20px;
}
.alur-daftar h2 {
  font-size: 2rem;
  color: #007bff;
  font-weight: 700;
  line-height: 1.3;
}
.alur-daftar h2 span {
  color: #81c784;
}

/* ===== Wrapper ===== */
.alur-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 40px;
}
.alur-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.alur-row.bottom {
  flex-direction: row-reverse;
}

/* ===== Step ===== */
.step {
  border-radius: 14px;
  padding: 18px 15px;
  width: 200px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.icon {
  font-size: 36px;
  margin-bottom: 8px;
  color: var(--icon-color, #0072ff);
}
.step:nth-child(1) .icon i { color: #0072ff; }  /* telepon */
.step:nth-child(3) .icon i { color: #ff4c29; }  /* kalender */
.step:nth-child(5) .icon i { color: #00b894; }  /* diskusi */
.step:nth-child(7) .icon i { color: #6c5ce7; }  /* invoice */
.step:nth-child(9) .icon i { color: #f39c12; }  /* kartu */
.step:nth-child(11) .icon i { color: #16a085; } /* wisuda */
.step p {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}

/* ===== Panah ===== */
.arrow {
  font-size: 22px;
  color: #0072ff;
  animation: arrowMove 1.2s infinite ease-in-out;
}
.arrow-down {
  font-size: 26px;
  color: #0072ff;
  animation: arrowDown 1.4s infinite ease-in-out;
}

/* Animasi arah panah kanan */
@keyframes arrowMove {
  0%, 100% { transform: translateX(0); opacity: 0.8; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* Animasi arah panah bawah */
@keyframes arrowDown {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ===== Mobile dua baris ===== */
@media (max-width: 600px) {
  .alur-wrapper {
    gap: 15px;
  }
  .alur-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .alur-daftar h2 {
    font-size: 1rem;
    color: #007bff;
    font-weight: 700;
    line-height: 1.3;
  }
  .step:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
  .alur-daftar h2 span {
    color:#81c784;
  }
  .step {
    width: 50px;
    padding: 10px;
    border-radius: 10px;
  }
  .icon {
    font-size: 24px;
    margin-bottom: 4px;
  }
  .step p {
    font-size: 10px;
    text-align: center;
  }
  .arrow {
    font-size: 14px;
    margin: 0 2px;
    animation: arrowMove 1s infinite ease-in-out;
  }
  .arrow-down {
    font-size: 18px;
    margin: 3px 0;
    animation: arrowDown 1s infinite ease-in-out;
  }
}
/* ===== Mode iPad (601px–1024px) ===== */
@media (min-width: 601px) and (max-width: 1024px) {
  .alur-wrapper {
    gap: 20px;
  }
  .step {
    width: 130px;
    padding: 14px;
    border-radius: 12px;
  }
  .icon {
    font-size: 30px;
  }
  .step p {
    font-size: 12px;
  }
  .arrow {
    font-size: 18px;
    margin: 0 6px;
  }
  .arrow-down {
    font-size: 22px;
  }
  .alur-daftar h2 {
    font-size: 1.5rem;
  }
}
/* === POPUP GAMBAR === */
.img-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
}

.img-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85%;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
  animation: zoomIn 0.3s ease;
}

.img-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.img-close:hover {
  color: #ff5757;
}
/* ===== VIDEO MODAL ===== */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.video-modal.active {
  display: flex;
}

.video-wrapper {
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

.animated-text {
  width: auto;       /* lebar tetap agar menu tidak tergeser */

  font-weight: 600;
  font-size: 1rem;
  color: #ff4081;
  display: inline-block;
  opacity: 0;
  transition: opacity 1s ease;
}




@keyframes zoomIn {
  from {transform: scale(0.8); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

/* Cursor pointer di gambar carousel */
.testimonial-report-carousel img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.testimonial-report-carousel img:hover {
  transform: scale(1.03);
}





.footer {
  background: #f4f6ff;
  color: #1b2a4e;
  font-family: 'Poppins', sans-serif;
  padding: 50px 8% 20px;
  z-index: 99999; /* 🔥 lebih tinggi dari semua elemen lain */
  position: relative; /* penting agar z-index berfungsi */
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.footer-col {
  flex: 1;
  min-width: 220px;
}

.footer-logo {
  width: 80px;
  margin-bottom: 15px;
}

.footer h3, .footer h4 {
  color: #001a44;
  font-weight: 600;
  margin-bottom: 15px;
}

.footer p, .footer a {
  font-size: 0.95rem;
  color: #1b2a4e;
  line-height: 1.7;
  text-decoration: none;
}

.footer a:hover {
  color: #007bff;
}

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

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-socials {
  margin-top: 10px;
}

.footer-socials .social {
  display: inline-block;
  background: #1b2a4e;
  color: white;
  margin-right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer-socials .social:hover {
  background: #007bff;
}

.footer-bottom {
  border-top: 1px solid #dce3f0;
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #555;
}

/* 🌐 Responsif untuk HP */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer-socials {
    justify-content: center;
  }
.footer-bottom {
  border-top: 1px solid #dce3f0;
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #555;
}
  .footer-col {
    max-width: 400px;
  }
}


/* ===== UTILITY & ANIMATIONS ===== */
.fade-in{ opacity:0; transform:translateY(18px); animation:fadeInUp .7s ease forwards; }
@keyframes fadeInUp{ to{ opacity:1; transform:none; } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

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

/* ≥ Desktop tweaks */
@media (min-width:1100px){
  header{ padding:14px 28px; margin:10px auto; width:calc(100% - 40px); }
}
/* Tablet & Mobile */
@media (max-width: 992px) {
  :root { --container-padding: 8%; }
  .logo img { width: 60px; height: 60px; }
  .hero { min-height: 60vh; margin: 12px; padding: 40px 18px; }


@media (max-width: 992px) {
  /* Floating stats di kanan atas */
  .floating-stats {
    top: 50px;
    right: 12px;
    left: auto;
    width: 180px;
    height: auto;
    flex-direction: column;
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  /* Floating map di kiri bawah */
  .floating-map {
    left: 12px;
    right: auto;
    bottom: 100px;
    width: 140px;
    height: 90px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }
}
@media (max-width: 600px) {
  /* Map lebih kecil untuk HP kecil */
  .floating-map {
    width: 120px;
    height: 80px;
    bottom: 80px;
  }

  .floating-stats {
    width: 160px;
    font-size: 0.8rem;
  }
}


/* Mobile kecil */
@media (max-width: 768px) {
  nav { display: none; }
  .hamburger { display: flex; }
  .feature-list { gap: 12px; padding-bottom: 8px; }
  .media-box img { height: 220px; }
  .carousel img { width: 120px; height: 200px; }

  /* 📱 Pindahkan posisinya agar tidak keluar layar */
  .floating-stats {
    left: 10px;
    right: auto;
    bottom: 180px;
    top: auto;
    font-size: 14px;
    padding: 8px 10px;
  }

  .floating-map {
    left: 10px;
    bottom: 90px;
    width: 70px;
    height: 70px;
  }
}



.scroll-section {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
}



/* Box putih pas membungkus gambar dan teks */
.media-box {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Gambar full proporsional */
.media-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.media-section h2 {
  text-align: center;      /* rata tengah */
  color: #007bff;          /* biru terang, bisa ganti sesuai tema */
  font-size: 1rem;         /* ukuran font judul */
  font-weight: 700;        /* tebal */
  margin-bottom: 24px;     /* jarak ke bawah */
}
.media-section p {
  text-align: center;      /* rata tengah */
  color: #000;          /* biru terang, bisa ganti sesuai tema */
  font-size: 0.90rem;      /* jarak ke bawah */
}

/* Caption */
.media-caption {
  padding: 10px 14px 14px 14px;
  color: #233;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: justify;
  background: #fff;
  margin: 0;
}

/* ===== Responsif HP ===== */
@media (max-width: 768px) {
  .tutor-section {
  padding: 50px 10% 60px;
  text-align: center;
  border-radius: 12px;
  margin: 0;
  overflow: hidden;
}

/* Judul & deskripsi */
.tutor-section h2 {
  font-size: 1rem;
  color: #004e92; /* biru tua */
  margin-bottom: 18px;
  text-align: center;
}

.tutor-section p {
  font-size: 1rem;
  color: #023e8a;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Kontainer scroll horizontal */
.tutor-container {
  display: flex;
  gap: 18px;
  overflow-x: auto; /* bisa scroll horizontal */
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  justify-content: flex-start;
}

/* Sembunyikan scrollbar di browser modern */
.tutor-container::-webkit-scrollbar {
  height: 8px;
}
.tutor-container::-webkit-scrollbar-thumb {
  background: rgba(0, 78, 146, 0.25);
  border-radius: 6px;
}

.card {
  flex: 0 0 240px; /* lebar tiap card */
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  height: 300px;
}


.card img {
  width: 100%;
  height: auto; /* proporsi asli tetap */
  object-fit: contain; /* atau bisa dihapus saja */
}


/* Area teks biru tua */
.card-content {
  padding: 14px 10px;
  color: white;
  text-align: center;
}

.card-content h3 {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}

.role {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Universitas (bagian putih bawah) */
.achievements {
  background: #f9f9f9;
  padding: 8px;
  font-size: 0.50rem;
  color: #004e92;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover efek */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 78, 146, 0.25);
}
}



@media (max-width: 420px) {
  .card {
    flex: 0 0 180px;
  }

  .card img {
    height: 140px;
  }
}

@media (max-width: 420px) {
  .card img {
    max-height: 180px;
  }
}


/* Responsif: mode HP */
@media (max-width: 768px) {
  .media-section {
    padding: 24px 12px;
    margin: 12px;
  }

  .scroll-section {
    gap: 12px;
    padding-bottom: 10px;
  }

  /* Box disesuaikan agar pas di layar kecil */
  .media-box {
    flex: 0 0 260px;
    border-radius: 10px;
  }

  .media-box img {
    border-radius: 10px 10px 0 0;
    object-fit: contain; /* pastikan gambar tidak terpotong */
  }

  .media-caption {
    font-size: 0.9rem;
    padding: 10px 12px 12px 12px;
  }
}

/* Responsif ekstra kecil (HP mini) */
@media (max-width: 420px) {
  .media-box {
    flex: 0 0 220px;
  }

  .media-caption {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  /* Hero Fullscreen di HP */
  .hero {
    margin: 0;
    border-radius: 10px 10px 10px 10px;
    padding: 0 16px; /* biar gambar full tanpa jarak */
    height: 20vh;
    min-height: 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix khusus untuk iPhone & Android modern */
  @supports (-webkit-touch-callout: none) {
    .hero {
      min-height: -webkit-fill-available;
    }
  }

  .hero .container {
    padding: 0 16px;
    text-align: center;
  }

  .hero h1 { font-size: 1rem; }
  .hero h2 { font-size: 0.8rem; }
  .hero p { font-size: 1rem; }
}


/* XS phones */
@media (max-width:420px){
  .logo span{ font-size:.85rem; }
  .hero{ padding:28px 12px; }
  .hero .btn{ padding:10px 16px; font-size:.95rem; }
  .fab-main{ padding:10px 12px; border-radius:14px 0 0 14px; font-size:.95rem;  }
  .fab-right{
  position:fixed; right:0; top:40%; transform:translateY(-50%); z-index:1250; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
  .sidebar{ width:260px; left:-300px; }

}
/* === 📱 iPhone 14 Pro Max Portrait (430–460px) === */
@media (min-width: 430px) and (max-width: 460px) {
  .hero {
    margin: 0;
    border-radius: 10px 10px 10px 10px;
    padding: 0 16px; /* biar gambar full tanpa jarak */
    height: 20vh;
    min-height: 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .logo span{ font-size:.85rem; }
  .hero{ padding:28px 12px; }
  .hero .btn{ padding:10px 16px; font-size:.95rem; }
  .fab-main{ padding:10px 12px; border-radius:14px 0 0 14px; font-size:.95rem;  }
  .fab-right{
  position:fixed; right:0; top:40%; transform:translateY(-50%); z-index:1250; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
  .hero h1 {
    font-size: 1rem;
  }

  .hero h2 {
    font-size: 1rem;
  }

  .animated-text {
    font-size: 1.1rem;
    line-height: 1.15;
  }
}

/* === 📱 iPhone 11 Portrait (375–400px) === */
@media (min-width: 375px) and (max-width: 400px) {
  .hero {
    margin: 0;
    border-radius: 10px;
    padding: 0 12px;
    height: 23vh;
    min-height: 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo span { font-size: .8rem; }
  .hero { padding: 24px 10px; }
  .hero .btn { padding: 8px 14px; font-size: .9rem; }

  .fab-main {
    padding: 10px 12px;
    border-radius: 14px 0 0 14px;
    font-size: .9rem;
  }

  .fab-right {
    position: fixed;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    z-index: 1250;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .hero h1 { font-size: .95rem; }
  .hero h2 { font-size: .95rem; }

  .animated-text {
    font-size: 1rem;
    line-height: 1.1;
  }
}

/* === 📱 iPhone 11 Pro Max Portrait (401–429px) === */
@media (min-width: 401px) and (max-width: 429px) {
  .hero {
    margin: 0;
    border-radius: 10px;
    padding: 0 14px;
    height: 23vh;
    min-height: 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo span { font-size: .85rem; }
  .hero { padding: 26px 12px; }
  .hero .btn { padding: 9px 15px; font-size: .92rem; }

  .fab-main {
    padding: 10px 12px;
    border-radius: 14px 0 0 14px;
    font-size: .92rem;
  }

  .fab-right {
    position: fixed;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    z-index: 1250;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .hero h1 { font-size: 1rem; }
  .hero h2 { font-size: 1rem; }

  .animated-text {
    font-size: 1.05rem;
    line-height: 1.12;
  }
}


/* Prevent floating elements cover CTA on very small screens */
@media (max-width:360px){
  .floating-map{ display:none; }
  .floating-stats{ display:none; }
}
/* ===== LINK BIASA DALAM SIDEBAR ===== */
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  transition: all 0.25s ease;
  margin-bottom: 6px; /* 🧩 jarak antar menu */
}

.sidebar a:hover {
  background: linear-gradient(90deg, #f0fbff, #f6eefc);
  transform: translateX(6px);
  box-shadow: 0 8px 22px rgba(2,6,23,0.08);
}

/* jika link punya ikon */
.sidebar a i {
  font-size: 1.2rem;
  width: 24px;
  min-width: 24px;
  text-align: center;
  color: #000;
  transition: all 0.25s ease;
}

/* hover tapi ikon tetap hitam */
.sidebar a:hover i {
  color: #000;
}

/* ===== DROPDOWN (SIDEBAR MOBILE) ===== */
.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  margin-bottom: 6px; /* 🧩 jarak antar menu dropdown juga */
}

.dropdown-toggle i {
  font-size: 1rem;
  width: 24px;
  min-width: 24px;
  text-align: center;
  transition: all 0.25s ease;
}

/* panah kanan */
.dropdown-toggle::after {
  content: "✚";
  font-size: 0.8rem;
  color: #666;
  margin-left: auto;
  transition: transform 0.25s ease;
}

/* hover & aktif */
.dropdown-toggle:hover,
.dropdown-toggle.active {
  transform: translateX(6px);
  box-shadow: 0 10px 26px rgba(2,6,23,0.12);
}

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

/* ===== ISI DROPDOWN ===== */
.dropdown-menu {
  display: none;
  margin-top: 8px;
  padding-left: 20px;
}

.dropdown-menu.show {
  display: block;
}

/* item link dalam dropdown */
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(2,6,23,0.03);
  text-decoration: none;
  color: #111;
  font-weight: 500;
  font-size: 0.80rem; /* 🔹 ukuran teks diperkecil */
  transition: all 0.25s ease;
  margin-bottom: 6px; /* 🧩 jarak antar item dropdown */
}

/* ikon di dalam dropdown */
.dropdown-menu a i {
  color: #000 !important;
  font-size: 0.80rem;
  min-width: 16px;
  text-align: center;
}

/* hover item dropdown */
.dropdown-menu a:hover {
  background: linear-gradient(90deg, #f0fbff, #f6eefc);
  transform: translateX(4px);
}

.dropdown-menu a:hover i {
  color: #000 !important;
}


/* ===== 🌈 IKON PELANGI URUTAN BENAR ===== */
/* 1️⃣ Profil Tutor */
.sidebar .dropdown-mobile:nth-child(2) .dropdown-toggle i { color: #1e88e5; }  /* 🔴 Merah */
/* 2️⃣ Blog */
.sidebar .dropdown-mobile:nth-child(3) .dropdown-toggle i { color: #1e88e5; }  /* 🟠 Oranye */
/* 3️⃣ Informasi */
.sidebar .dropdown-mobile:nth-child(4) .dropdown-toggle i { color: #1e88e5; }  /* 🟡 Kuning */
/* 4️⃣ Test Kuis */
.sidebar .kuis i       { color: #1e88e5; }  /* 🟢 Hijau */
/* 5️⃣ Testimoni */
.sidebar .testimony i  { color: #1e88e5; }  /* 🔵 Biru */
/* 6️⃣ Contact */
.sidebar .contact i    { color: #1e88e5; }  /* 🟣 Ungu muda */
/* 7️⃣ Login */
.sidebar .login i      { color: #1e88e5; }  /* 🟪 Ungu tua */

/* ===== Hover Efek Ungu Global ===== */
.sidebar .dropdown-toggle:hover,
.sidebar .kuis:hover,
.sidebar .testimony:hover,
.sidebar .contact:hover,
.sidebar .login:hover {
  background: #fff;           /* 💜 Ungu elegan */
  color: #1e88e5 !important;        /* teks putih */
  transform: translateX(6px);
}

/* Ubah warna ikon saat hover — panah tidak ikut */
.sidebar .dropdown-toggle:hover i,
.sidebar .kuis:hover i,
.sidebar .testimony:hover i,
.sidebar .contact:hover i,
.sidebar .login:hover i {
  color: #ff0500 !important; /* hanya ikon kiri yang ikut putih */
}

.sidebar .dropdown-toggle:hover::after {
  color: #00c853 !important; /* 💚 hijau terang */
}

/* saat aktif atau hover jadi X */
.dropdown-toggle.active::after,
.dropdown-toggle:hover::after {
  content: "✖";
  color: #00c853 !important; /* 💚 hijau terang */
  transform: none;
}

/* panah ikut warna ikon */
.sidebar .dropdown-mobile:nth-child(2) .dropdown-toggle::after { color: purple; }
.sidebar .dropdown-mobile:nth-child(3) .dropdown-toggle::after { color: purple; }
.sidebar .dropdown-mobile:nth-child(4) .dropdown-toggle::after { color: purple; }

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* make sure hero-section, hero-content classes used in html keep nice spacing if present */
.hero-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
/* make sure hero-section, hero-content classes used in html keep nice spacing if present */
.hero-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ensure .card-style .card-header .media-caption keep spacing */
.card-header{ padding:8px 12px; background:linear-gradient(90deg,var(--blue),var(--purple)); color:#fff; font-weight:700; border-radius:8px; margin-bottom:8px; text-align:center; }

/* small accessibility focus */
a:focus, button:focus{ outline:3px solid rgba(156,39,176,0.18); outline-offset:3px; }

/* ======================================================================
   END OF CSS
   ====================================================================== */
/* === 💻 Perbaikan untuk Tablet Landscape & Foldable (800px–1300px) === */