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

body{
  font-family:'Poppins', sans-serif;
  background:#ffffff;
  color:#000000;
  line-height:1.6;
}

/* ================= HEADER ================= */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 5%;
  background:#1e3b8a; /* BIRU SOLID TANPA TRANSPARAN */
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  position:sticky;
  top:0;
  z-index:999;
}

/* Logo Area */
.logo-left{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.logo-left img{
  height:55px;
}

/* TEXT PUTIH */
.logo-text h1{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
}

.logo-text p{
  font-size:12px;
  color:#e0e7ff; /* putih lembut */
}

/* ================= NAVIGATION ================= */

nav ul{
  display:flex;
  list-style:none;
  gap:28px;
  align-items:center;
}

nav ul li a{
  text-decoration:none;
  color:#ffffff; /* MENU PUTIH */
  font-weight:500;
  transition:0.3s;
}

nav ul li a:hover{
  color:#FFD700; /* Hover emas */
}

/* ================= HAMBURGER ================= */

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:26px;
  height:3px;
  background:#ffffff; /* garis putih */
  border-radius:3px;
}

/* ================= SECTION ================= */
section{
  padding:70px 5%;
}

section h2{
  text-align:center;
  font-size:28px;
  margin-bottom:50px;
  position:relative;
}

section h2::after{
  content:"";
  width:60px;
  height:4px;
  background:#007bff;
  display:block;
  margin:12px auto 0;
  border-radius:4px;
}

/* ================= GRID LAYOUT ================= */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:25px;
}
/* ==================================================
   HERO PREMIUM CLEAN
================================================== */

.hero{
  position:relative;
  min-height:600px;
  background:url('image/konten-website.jpeg') center center no-repeat;
  background-size:cover;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  padding:0 20px;
  overflow:hidden;
}

/* Overlay */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1;
}

/* Pastikan konten di atas overlay */
.hero h2,
.hero p,
.hero .btn{
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(40px);
  animation:fadeHeroUp 1s ease forwards;
}

/* Animasi delay */
.hero h2{ animation-delay:.2s; }
.hero p{ animation-delay:.5s; }
.hero .btn{ animation-delay:.9s; }

/* Heading */
.hero h2{
  font-size:42px;
  font-weight:700;
  margin-bottom:15px;
  text-shadow:0 15px 35px rgba(0,0,0,.6);
}

/* Paragraph */
.hero p{
  font-size:18px;
  max-width:700px;
  margin-bottom:30px;
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* Button */
.hero .btn{
  position:relative;
  padding:16px 38px;
  border-radius:50px;
  background:linear-gradient(135deg,#FFD700,#FFC107);
  color:#1E3A8A !important;
  font-weight:700;
  letter-spacing:.6px;
  border:none;
  cursor:pointer;
  overflow:hidden;
  transition:.4s cubic-bezier(.22,1,.36,1);
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

/* Glass frame effect */
.hero .btn::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:60px;
  background:linear-gradient(135deg,#f3e018,rgb(6, 43, 255));
  z-index:-1;
  filter:blur(8px);
  opacity:.7;
}

/* Inner glow */
.hero .btn{
  position:relative;
  padding:15px 36px;
  border-radius:50px;
  background:rgba(255,255,255,.12); /* nyaru */
  color:#fff !important;
  font-weight:600;
  letter-spacing:.6px;
  border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:.4s cubic-bezier(.22,1,.36,1);
}

/* Hover lembut */
.hero .btn:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}

/* Efek garis animasi halus */
.hero .btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50px;
  padding:1px;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:.5s;
}

.hero .btn:hover::after{
  opacity:1;
}

/* Animation */
@keyframes fadeHeroUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Responsive */
@media(max-width:768px){

  .hero{
    min-height:500px;
  }

  .hero h2{
    font-size:28px;
  }

  .hero p{
    font-size:15px;
  }

}
.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* konten di atas video */
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* ================= CARD ================= */
.card-elegant{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  transition:all 0.4s ease;
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp 0.8s ease forwards;
}

.card-elegant:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

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

.card-elegant h3{
  padding:18px;
  font-size:17px;
}

.card-elegant p{
  padding:0 18px 20px;
  font-size:14px;
  color:#555;
}

/* ================= SLIDER ================= */
.slider-wrapper{
  position:relative;
  overflow:hidden;
  max-width:1200px;
  margin:auto;
}

.slider-track{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

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

.slider-wrapper button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#000;
  color:#fff;
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
  transition:0.3s;
}

.slider-wrapper button:hover{
  background:#007bff;
}

.slider-wrapper .prev{
  left:-20px;
}

.slider-wrapper .next{
  right:-20px;
}

/* Slider berita 3 kolom */
#berita .card-elegant{
  flex:0 0 calc(33.333% - 16px);
}

/* ================= ANIMATION ================= */
@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

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

/* Tablet */
@media(max-width:1024px){

  .grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-4{
    grid-template-columns:repeat(2,1fr);
  }

  #berita .card-elegant{
    flex:0 0 calc(50% - 12px);
  }
}

/* Mobile */

@media(max-width:900px){
  
  .hamburger{
    display:flex;
  }

  header{
    flex-wrap:wrap;
  }

  .logo-left{
    width:100%;
    margin-bottom:12px;
  }

  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }

  #berita .card-elegant{
    flex:0 0 100%;
  }

  .slider-wrapper .prev{
    left:5px;
  }

  .slider-wrapper .next{
    right:5px;
  }
}

/* Extra Small */
@media(max-width:500px){
  .logo-text h1{
    font-size:13px;
  }
  .logo-text p{
    font-size:11px;
  }
}/* ================= GLOBAL GRID ================= */

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

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

.card-elegant{
  background:#fff;
  border-radius:20px;
  padding:25px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:all 0.4s ease;
}

.card-elegant:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

/* Card dengan gambar */
.card-image{
  padding:0;
  overflow:hidden;
}

.card-image img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:0.4s;
}

.card-image:hover img{
  transform:scale(1.05);
}

.card-content{
  padding:20px;
}

/* ===============================
   VISI MISI - LUXURY VERSION
=============================== */

.visi-box,
.misi-box{
  position:relative;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(18px);
  border-radius:28px;
  padding:60px;
  box-shadow:0 30px 80px rgba(0,0,0,0.12);
  border:1px solid rgba(255,255,255,0.4);
  transition:0.6s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}

/* Glow border premium */
.visi-box::before,
.misi-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  padding:2px;
  background:linear-gradient(135deg,#FFD700,#3B82F6,#60A5FA);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:0.4s;
}

.visi-box:hover::before,
.misi-box:hover::before{
  opacity:1;
}

/* Hover naik elegan */
.visi-box:hover,
.misi-box:hover{
  transform:translateY(-12px) scale(1.01);
  box-shadow:0 40px 100px rgba(0,0,0,0.2);
}

/* Judul */
.visi-box h2,
.misi-box h2{
  font-size:30px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.5px;
}

/* Garis emas */
.visi-box h2::after,
.misi-box h2::after{
  width:80px;
  height:4px;
  background:linear-gradient(90deg,#FFD700,#facc15);
}

/* Text */
.visi-box p{
  font-size:19px;
  line-height:1.9;
  color:#374151;
}

/* List */
.misi-box li{
  font-size:17px;
  line-height:1.8;
  position:relative;
  padding-left:28px;
}

/* Bullet premium */
.misi-box li::before{
  content:"✦";
  position:absolute;
  left:0;
  color:#3B82F6;
  font-size:14px;
}

/* ================= SLIDER FIX ================= */

.slider-track{
  display:flex;
  gap:25px;
}

.slider-track .card-elegant{
  min-width:300px;
}

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

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all 0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

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

@media(max-width:1024px){

  .grid-4{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-2{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .grid-4,
  .grid-3,
  .grid-2{
    grid-template-columns:1fr;
  }

  .map-container iframe{
    height:300px;
  }

}
/* =================================================
   PROFIL SEKOLAH
================================================= */

.profil-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.profil-card{
  background:#fff;
  padding:30px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:0.4s;
}

.profil-card i{
  font-size:40px;
  color:#007bff;
  margin-bottom:15px;
}

.profil-card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =================================================
   VISI MISI
================================================= */

.visi-misi-section{
  background:#f8fbff;
  padding:80px 5%;
}

.visi-misi-card{
  background:#fff;
  padding:40px;
  border-radius:25px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  max-width:900px;
  margin:auto;
}

.visi-misi-header{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:30px;
}

.visi-misi-header i{
  font-size:28px;
  color:#007bff;
}

.visi-misi-card ul{
  margin-top:15px;
  padding-left:20px;
}

.visi-misi-card ul li{
  margin-bottom:10px;
}

/* =================================================
   BERITA
================================================= */

#berita .card-elegant{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.card-body{
  padding:20px;
}

.tanggal{
  font-size:13px;
  color:#888;
}

.btn-small{
  display:inline-block;
  margin-top:15px;
  padding:8px 14px;
  background:#007bff;
  color:#fff;
  border-radius:8px;
  font-size:13px;
  text-decoration:none;
  transition:0.3s;
}

.btn-small:hover{
  background:#0056b3;
}

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

.program-card{
  min-width:280px;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

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

.program-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =================================================
   FASILITAS
================================================= */
.nav-menu{
  display:none;
  flex-direction:column;
  background:#fff;
  position:absolute;
  top:100%;
  right:0;
  width:220px;
  box-shadow:0 15px 40px rgba(0,0,0,.1);
  z-index:999;
}

.nav-menu.active{
  display:flex;
}

.nav-menu a{
  padding:15px;
  text-decoration:none;
  color:#1e3a8a;
}
.facility-card{
  min-width:280px;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

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

.facility-content{
  padding:20px;
}

.facility-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =================================================
   EKSTRAKURIKULER
================================================= */

.ekskul-card{
  min-width:250px;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

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

.ekskul-content{
  padding:20px;
}

.ekskul-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =================================================
   PRESTASI
================================================= */

.prestasi-card{
  min-width:260px;
  background:#fff;
  padding:30px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

.prestasi-card i,
.prestasi-icon{
  font-size:40px;
  color:#007bff;
  margin-bottom:15px;
}

.prestasi-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =================================================
   PENDAFTARAN (PMB)
================================================= */

.pmb-box{
  background:#fff;
  border-radius:25px;
  padding:40px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.pmb-info{
  flex:1;
}

.pmb-list{
  list-style:none;
  margin:20px 0;
}

.pmb-list li{
  margin-bottom:10px;
}

.btn-pmb{
  display:inline-block;
  padding:12px 20px;
  background:#007bff;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  margin-top:15px;
  transition:0.3s;
}

.btn-pmb:hover{
  background:#0056b3;
}

.pmb-cards{
  display:flex;
  gap:20px;
}

.pmb-card{
  background:#f4f6fa;
  padding:25px;
  border-radius:15px;
  text-align:center;
  min-width:160px;
  transition:0.3s;
}

.pmb-card:hover{
  background:#007bff;
  color:#fff;
}

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

@media(max-width:1024px){

  .profil-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .profil-grid{
    grid-template-columns:1fr;
  }

  .pmb-box{
    flex-direction:column;
  }

  .pmb-cards{
    flex-direction:column;
  }

}
/* =========================================
   GURU & STAFF - PREMIUM INTERNATIONAL
========================================= */

.guru-section{
  padding:100px 6%;
  background:linear-gradient(135deg,#f7f9fc,#eef3fb);
}

/* GRID */
.guru-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
  margin-top:50px;
}

/* CARD */
.guru-card{
  position:relative;
  background:#ffffff;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  transition:.6s cubic-bezier(.22,1,.36,1);
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}

/* Elegant glowing frame */
.guru-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  padding:2px;
  background:linear-gradient(135deg,#007bff,#00c6ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:.5s;
}

/* HOVER */
.guru-card:hover{
  transform:translateY(-14px);
  box-shadow:0 35px 90px rgba(0,0,0,.15);
}

.guru-card:hover::before{
  opacity:1;
}

/* IMAGE */
.guru-card img{
  width:100%;
  height:320px;
  object-fit:cover;
  transition:1s ease;
}

/* Smooth zoom */
.guru-card:hover img{
  transform:scale(1.07);
}

/* CONTENT */
.guru-card h3{
  margin:22px 0 8px;
  font-size:20px;
  font-weight:600;
  color:#1e3a8a;
  letter-spacing:.3px;
}

.guru-card p{
  font-size:14.5px;
  color:#6b7280;
  margin-bottom:30px;
}

/* Subtle divider */
.guru-card::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:linear-gradient(90deg,#FFD700,#ffb400);
  border-radius:10px;
  opacity:0;
  transition:.4s;
}

.guru-card:hover::after{
  opacity:1;
  bottom:20px;
}

/* =========================
   MOBILE COMPACT VERSION
========================= */

@media(max-width:768px){

  .guru-section{
    padding:80px 6%;
  }

  .guru-grid{
    gap:25px;
  }

  .guru-card{
    border-radius:22px;
  }

  .guru-card img{
    height:240px;
  }

  .guru-card h3{
    font-size:17px;
  }

  .guru-card p{
    font-size:13px;
    margin-bottom:20px;
  }
}
/* ================= JENJANG PENDIDIKAN PREMIUM ================= */

.jenjang-section{
  padding:120px 5%;
  background:linear-gradient(135deg,#f1f5ff,#eef2ff,#ffffff);
  position:relative;
  overflow:hidden;
}

/* Ornamen background glow */
.jenjang-section::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(59,130,246,.15),transparent 70%);
  top:-150px;
  left:-150px;
  animation:floatGlow 10s ease-in-out infinite;
}

.section-title{
  text-align:center;
  font-size:40px;
  font-weight:700;
  background:linear-gradient(135deg,#1e3a8a,#2563eb,#60a5fa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:70px;
  letter-spacing:1px;
}

/* GRID */
.jenjang-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px;
}

/* CARD PREMIUM */
.jenjang-card{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(15px);
  padding:50px 35px;
  border-radius:30px;
  text-align:center;
  position:relative;
  transition:all .4s ease;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

/* Gradient border effect */
.jenjang-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  padding:2px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6,#60a5fa);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:.4s;
}

/* Hover Effect */
.jenjang-card:hover{
  transform:translateY(-15px);
  box-shadow:0 30px 80px rgba(37,99,235,.25);
}

.jenjang-card:hover::before{
  opacity:1;
}

/* Icon */
.jenjang-icon{
  font-size:50px;
  margin-bottom:25px;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Title */
.jenjang-card h3{
  font-size:22px;
  font-weight:700;
  color:#1e3a8a;
  margin-bottom:15px;
}

/* Text */
.jenjang-card p{
  font-size:15px;
  line-height:1.7;
  color:#555;
  margin-bottom:30px;
}

/* Button Luxury */
.jenjang-btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:50px;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:.4s;
  box-shadow:0 10px 25px rgba(37,99,235,.4);
}

.jenjang-btn:hover{
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(37,99,235,.5);
}

/* Highlight Card (Internasional) */
.jenjang-card.highlight{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  transform:scale(1.05);
}

.jenjang-card.highlight h3,
.jenjang-card.highlight p{
  color:#fff;
}

.jenjang-card.highlight .jenjang-btn{
  background:#fff;
  color:#1e3a8a;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.jenjang-card.highlight .jenjang-btn:hover{
  background:#e0e7ff;
}

/* Responsive */
@media(max-width:768px){
  .section-title{
    font-size:30px;
  }
  .jenjang-card{
    padding:40px 25px;
  }
}
.jenjang-card *{
  position:relative;
  z-index:2;
}
/* ================= CAMBRIDGE PAGE ================= */

.cambridge-hero{
  background:
    linear-gradient(rgba(15,23,42,.7), rgba(30,58,138,.8)),
    url('image/cambridge-bg.jpg');
  background-size:cover;
  background-position:center;
}

/* Title efek mewah */
.cambridge-hero h1{
  font-size:52px;
  letter-spacing:2px;
  background:linear-gradient(135deg,#fff,#FFD700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Animasi masuk */
.cambridge-hero h1,
.cambridge-hero p{
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp 1s ease forwards;
}

.cambridge-hero p{
  animation-delay:.3s;
}
/* ================= PAGE HERO PREMIUM SMPIA ================= */

.page-hero{
  position:relative;
  padding:140px 5% 120px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);
  overflow:hidden;
}

.page-hero::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);
  top:-200px;
  right:-200px;
  animation:floatGlow 8s ease-in-out infinite;
}

@keyframes floatGlow{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(30px);}
}

.page-hero h1{
  font-size:48px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:15px;
  animation:fadeUp 1s ease forwards;
}

.page-hero p{
  font-size:18px;
  opacity:.9;
  animation:fadeUp 1.4s ease forwards;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:translateY(0);}
}
/* ================= PAGE HERO DENGAN FOTO ================= */

.page-hero{
  position:relative;
  padding:140px 5% 120px;
  text-align:center;
  color:#fff;
  overflow:hidden;

  /* FOTO BACKGROUND */
  background:
    linear-gradient(rgba(15,23,42,.75), rgba(30,58,138,.75)),
    url('image/konten-website.jpeg'); /* ganti dengan path foto kamu */
  
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
/* ================= PAGE CONTENT ELEGANT ================= */

.page-content{
  padding:100px 5%;
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
}

.page-content .container{
  max-width:1000px;
  margin:auto;
  background:#fff;
  padding:60px;
  border-radius:30px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.08);
  animation:fadeUp 1.2s ease;
}

/* Border frame elegan */
.page-content .container::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  padding:2px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6,#60a5fa);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.page-content h2{
  font-size:28px;
  margin-bottom:20px;
  color:#1e3a8a;
  font-weight:700;
}

.page-content p{
  font-size:16px;
  line-height:1.8;
  color:#444;
  margin-bottom:30px;
}

.page-content ul{
  padding-left:20px;
}

.page-content ul li{
  margin-bottom:15px;
  font-size:15px;
  position:relative;
  padding-left:25px;
}

.page-content ul li::before{
  content:"✦";
  position:absolute;
  left:0;
  color:#2563eb;
}
/* =========================================
   PROGRAM UNGGULAN → SLIDER KHUSUS HP
========================================= */

@media(max-width:768px){

  .program-grid{
    display:flex;
    overflow-x:auto;
    gap:20px;
    padding-bottom:10px;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
  }

  .program-grid::-webkit-scrollbar{
    display:none;
  }

  .program-card{
    flex:0 0 85%;
    scroll-snap-align:center;
  }

}
/* ================= HERO SMAIA STYLE ================= */

.smaia-hero{
  background:linear-gradient(135deg,#0f172a,#1e293b,#1e3a8a);
}

.smaia-hero::before{
  background:radial-gradient(circle,rgba(96,165,250,.2),transparent 70%);
}
/* ==============================
   SECTION TITLE
============================== */
.section-title{
  text-align:center;
  font-size:32px;
  margin-bottom:50px;
  font-weight:700;
  color:#1E3A8A;
  position:relative;
}

.section-title::after{
  content:"";
  width:80px;
  height:4px;
  background:linear-gradient(to right,#1E3A8A,#3B82F6);
  display:block;
  margin:15px auto 0;
  border-radius:5px;
}

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

.program-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  margin-top:20px;
}

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

.program-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(15px);
  padding:35px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
  transition:0.4s ease;
  text-align:center;
  border:1px solid rgba(255,255,255,0.3);
}

.program-card i{
  font-size:40px;
  color:#1E3A8A;
  margin-bottom:20px;
  transition:0.3s;
}

.program-card h3{
  font-size:20px;
  margin-bottom:15px;
  color:#111;
}

.program-card p{
  font-size:15px;
  color:#555;
  line-height:1.6;
}

/* Hover Effect Mewah */

.program-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(30,58,138,0.25);
  background:linear-gradient(135deg,#1E3A8A,#2563EB);
  color:#fff;
}

.program-card:hover h3,
.program-card:hover p{
  color:#fff;
}

.program-card:hover i{
  color:#fff;
}

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

@media(max-width:768px){

  .program-grid{
    grid-template-columns:1fr;
  }

  .program-card{
    padding:25px;
  }

}
/* ================= PAGE HERO DENGAN FOTO ================= */

.page-hero{
  position:relative;
  padding:140px 5% 120px;
  text-align:center;
  color:#fff;
  overflow:hidden;

  /* FOTO BACKGROUND */
  background:
    linear-gradient(rgba(15,23,42,.75), rgba(30,58,138,.75)),
    url('image/konten-website.jpeg'); /* ganti dengan path foto kamu */
  
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
/* ================= PROGRAM GRID PREMIUM ================= */

.program-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  margin-top:30px;
}

.program-card{
  background:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.5s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
}

.program-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 80px rgba(0,0,0,.15);
}

.program-card::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(37,99,235,.08),transparent 60%);
  top:-50%;
  left:-50%;
  transition:.6s;
}

.program-card:hover::before{
  transform:scale(1.2);
}

.program-card h4{
  color:#1e3a8a;
  margin-bottom:10px;
  font-size:18px;
}

.program-card p{
  font-size:14px;
  color:#555;
}
/* =================================================
   AGENDA SEKOLAH
================================================= */

.agenda-wrapper{
  max-width:900px;
  margin:auto;
}

.agenda-item{
  display:flex;
  gap:25px;
  align-items:center;
  background:#fff;
  padding:25px;
  border-radius:20px;
  margin-bottom:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.07);
  transition:0.3s;
}

.agenda-date{
  background:#007bff;
  color:#fff;
  padding:15px;
  border-radius:15px;
  text-align:center;
  min-width:80px;
}

.agenda-date h3{
  margin:0;
  font-size:24px;
}

.agenda-date span{
  font-size:13px;
}

.agenda-item:hover{
  transform:translateX(8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =========================================
   SAMBUTAN KEPALA SEKOLAH - ELEGANT STYLE
========================================= */

.kepala-sekolah{
  padding:100px 6%;
  background:linear-gradient(135deg,#f5f9ff,#eef3fb);
}

.kepala-wrapper{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
}

/* FOTO */
.kepala-foto{
  position:relative;
  flex:0 0 320px;
}

.kepala-foto img{
  width:100%;
  border-radius:25px;
  position:relative;
  z-index:2;
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
  transition:0.5s;
}

/* Frame elegan */
.kepala-foto::before{
  content:"";
  position:absolute;
  inset:-15px;
  border-radius:30px;
  border:3px solid rgba(255,215,0,0.6);
  z-index:1;
}

.kepala-foto::after{
  content:"";
  position:absolute;
  inset:-25px;
  border-radius:35px;
  background:linear-gradient(135deg,#007bff,#00c6ff);
  opacity:0.08;
  z-index:0;
}

/* Hover subtle */
.kepala-foto:hover img{
  transform:translateY(-8px);
}

/* TEXT */
.kepala-text{
  flex:1;
  background:#fff;
  padding:50px;
  border-radius:30px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

/* Aksen garis atas */
.kepala-text::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:120px;
  height:5px;
  background:linear-gradient(90deg,#FFD700,#ffb400);
  border-top-left-radius:30px;
}

/* Badge */
.badge{
  display:inline-block;
  background:#007bff;
  color:#fff;
  padding:6px 18px;
  border-radius:50px;
  font-size:13px;
  margin-bottom:15px;
  letter-spacing:.5px;
}

/* Judul */
.kepala-text h2{
  font-size:28px;
  margin-bottom:5px;
  color:#1e3a8a;
}

.kepala-text h3{
  font-size:20px;
  margin-bottom:20px;
  color:#555;
  font-weight:500;
}

/* Paragraf */
.kepala-text p{
  font-size:15.5px;
  line-height:1.9;
  color:#555;
  margin-bottom:18px;
  text-align:justify;
}

/* TTD */
.ttd{
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid #eee;
}

.ttd strong{
  display:block;
  font-size:17px;
  color:#1e3a8a;
}

.ttd span{
  font-size:14px;
  color:#777;
}

/* RESPONSIVE */
@media(max-width:992px){
  .kepala-wrapper{
    flex-direction:column;
    text-align:center;
  }

  .kepala-text{
    padding:40px 30px;
  }

  .kepala-text p{
    text-align:left;
  }
}

/* =========================================
   FILOSOFI DIGITAL - PREMIUM STYLE
========================================= */

.filosofi-section{
  background:linear-gradient(135deg,#f8fafc,#eef3ff);
  padding:100px 5%;
  position:relative;
  overflow:hidden;
}

/* Title */
.filosofi-section .section-title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  margin-bottom:20px;
  color:#1e3a8a;
}

.filosofi-intro{
  text-align:center;
  max-width:750px;
  margin:0 auto 60px;
  font-size:17px;
  color:#555;
  line-height:1.8;
}

/* GRID */
.filosofi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:35px;
}

/* CARD */
.filosofi-card{
  background:#ffffff;
  padding:40px 30px;
  border-radius:24px;
  text-align:center;
  position:relative;
  transition:0.5s ease;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  overflow:hidden;
}

/* glowing border effect */
.filosofi-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:2px;
  background:linear-gradient(135deg,#007bff,#00c6ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:0.4s;
}

/* ICON */
.filosofi-card i{
  font-size:42px;
  color:#007bff;
  margin-bottom:20px;
  transition:0.4s;
}

.filosofi-card h3{
  font-size:20px;
  margin-bottom:15px;
  font-weight:600;
  color:#1e3a8a;
}

.filosofi-card p{
  font-size:15px;
  color:#666;
  line-height:1.7;
}

/* HOVER EFFECT */
.filosofi-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 60px rgba(0,0,0,0.12);
}

.filosofi-card:hover::before{
  opacity:1;
}

.filosofi-card:hover i{
  transform:scale(1.2) rotate(5deg);
  color:#0056d2;
}

/* ANIMASI MASUK */
.filosofi-card{
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s ease forwards;
}

.filosofi-card:nth-child(1){animation-delay:.2s;}
.filosofi-card:nth-child(2){animation-delay:.4s;}
.filosofi-card:nth-child(3){animation-delay:.6s;}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* RESPONSIVE */
@media(max-width:768px){
  .filosofi-section{
    padding:80px 6%;
  }
}

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

@media(max-width:1024px){

  .guru-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .filosofi-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .guru-grid{
    grid-template-columns:1fr;
  }

  .filosofi-grid{
    grid-template-columns:1fr;
  }

  .agenda-item{
    flex-direction:column;
    align-items:flex-start;
  }

  .kepsek-card{
    flex-direction:column;
    text-align:center;
  }

}
/* ===================================================
   GLASS MAP TITLE
=================================================== */

.map-wrapper{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.map-glass{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 30px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:10;
  transition:.4s ease;
}

.map-glass:hover{
  transform:translateX(-50%) scale(1.05);
  background:rgba(255,255,255,.25);
}

/* Responsive */
@media (max-width:768px){
  .map-glass{
    font-size:11px;
    padding:10px 22px;
  }
}


/* ===================================================
   FOOTER PREMIUM
=================================================== */

footer{
  background:linear-gradient(135deg,#1E3A8A,#162e6f);
  color:#fff;
  padding:50px 20px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  max-width:1100px;
  margin:auto;
}

.footer-grid h4{
  margin-bottom:15px;
  font-size:16px;
}

.footer-nav{
  display:flex;
  justify-content:center;
  gap:25px;
  margin-top:30px;
  flex-wrap:wrap;
}

.footer-nav a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition:.3s;
}

.footer-nav a:hover{
  opacity:.7;
  transform:translateY(-2px);
}

footer .copyright{
  text-align:center;
  margin-top:30px;
  font-size:.85rem;
  opacity:.8;
}

@media(max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
}


/* ===================================================
   ULTRA SMOOTH CARD FX
=================================================== */

.facility-card,
.program-card,
.ekskul-card,
.prestasi-card,
.card-elegant,
.guru-card,
.profil-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border-radius:24px;
  padding:28px;
  transition:
    transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .6s cubic-bezier(.22,1,.36,1);
  box-shadow:0 15px 35px rgba(0,0,0,.06);
}

/* Hover lift */
.facility-card:hover,
.program-card:hover,
.ekskul-card:hover,
.prestasi-card:hover,
.card-elegant:hover,
.guru-card:hover,
.profil-card:hover{
  transform:translateY(-10px);
  box-shadow:0 40px 90px rgba(0,0,0,.18);
}

/* Premium Shine Effect */
.facility-card::before,
.program-card::before,
.ekskul-card::before,
.prestasi-card::before,
.card-elegant::before,
.guru-card::before,
.profil-card::before{
  content:"";
  position:absolute;
  top:-150%;
  left:-150%;
  width:250%;
  height:250%;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.35) 50%,
    transparent 60%
  );
  transform:rotate(25deg);
  transition:1.2s ease;
}

.facility-card:hover::before,
.program-card:hover::before,
.ekskul-card:hover::before,
.prestasi-card:hover::before,
.card-elegant:hover::before,
.guru-card:hover::before,
.profil-card:hover::before{
  top:100%;
  left:100%;
}
/* Social Icon */
.social{
  margin-top:20px;
  display:flex;
  gap:15px;
}

.social a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  transition:.3s;
  font-size:16px;
}

.social a:hover{
  background:#FFD700;
  color:#1E3A8A;
  transform:translateY(-4px);
}

/* Hover Global */
.social a:hover,
.kontak-social a:hover{
  transform:translateY(-5px) scale(1.08);
  box-shadow:0 12px 25px rgba(0,0,0,0.25);
}

/* ================= BRAND COLOR HOVER ================= */

/* Instagram */
.social a:nth-child(1):hover,
.kontak-social a:nth-child(1):hover{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

/* WhatsApp */
.social a:nth-child(2):hover,
.kontak-social a:nth-child(2):hover{
  background:#25D366;
}

/* YouTube */
.social a:nth-child(3):hover,
.kontak-social a:nth-child(3):hover{
  background:#FF0000;
}

/* TikTok (kalau ada) */
.social a:nth-child(4):hover,
.kontak-social a:nth-child(4):hover{
  background:#000;
}

/* Responsive kecilkan di HP */
@media(max-width:768px){
  .social a,
  .kontak-social a{
    width:32px;
    height:32px;
    font-size:14px;
  }
}
/* Show saat aktif */
@media(max-width:900px){

  header{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Logo full width */
  .logo-left{
    width:100%;
    margin-bottom:10px;
  }
  /* Wrapper bawah */
  .header-bottom{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
/* Hamburger kiri */
  .hamburger{
    display:flex;
    order:1;
  }
  /* Social kanan */
  .social{
    order:2;
    margin-top:0;
  }
  .header-bottom{
    display:flex;
    align-items:center;
    gap:20px;
  }

  nav ul{
    position:fixed;
    top:0;
    right:-100%;
    width:75%;
    height:100vh;
    background:#ffffff;
    flex-direction:column;
    padding:100px 30px;
    gap:20px;
    transition:.4s ease;
    box-shadow:-5px 0 25px rgba(0,0,0,0.2);
    z-index:1500;
  }

  nav ul.show{
    right:0;
  }

  nav ul li a{
    color:#111;
    font-size:16px;
  }
}
/* =================================
   KHUSUS TOMBOL DAFTAR DI HERO
================================= */

.hero .btn{
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#FFD700;
  background:none;
  border:none;
  padding:0;
  position:relative;
  transition:.3s ease;
}

/* Garis bawah animasi */
.hero .btn::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  background:#FFD700;
  border-radius:3px;
  transition:.3s ease;
}

.hero .btn:hover{
  color:#ffffff;
}

.hero .btn:hover::after{
  width:100%;
}
/* =========================
   SLIDER SIZE PERFECT
========================= */

.slider-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:10px 0;
}

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

.slider-track > *{
  flex:0 0 320px;
  scroll-snap-align:start;
}

/* Tablet */
@media(max-width:1024px){
  .slider-track > *{
    flex:0 0 280px;
  }
}

/* Mobile */
@media(max-width:768px){
  .slider-track > *{
    flex:0 0 85%;
  }
}

/* Extra Small */
@media(max-width:480px){
  .slider-track > *{
    flex:0 0 90%;
  }
}
/* =====================================================
   FORM PREMIUM
===================================================== */

.form-section{
  padding:80px 20px;
  background:linear-gradient(135deg,#eef2ff,#f8fafc);
}

.form-container{
  max-width:900px;
  margin:auto;
  background:#fff;
  padding:50px;
  border-radius:28px;
  box-shadow:0 40px 100px rgba(0,0,0,.08);
  animation:formFade 1s ease;
}

@keyframes formFade{
  from{opacity:0; transform:translateY(40px);}
  to{opacity:1; transform:translateY(0);}
}

.form-title{
  font-size:28px;
  font-weight:700;
  text-align:center;
  color:#1E3A8A;
}

.form-sub{
  text-align:center;
  color:#6b7280;
  margin-bottom:35px;
}

/* ================= BLOCK ================= */

.form-block{
  margin-bottom:35px;
  animation:blockFade .8s ease;
}

@keyframes blockFade{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

.form-block h3{
  margin-bottom:15px;
  color:#1E3A8A;
}

/* ================= GRID ================= */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-grid .full{
  grid-column:1/-1;
}

/* ================= FLOATING INPUT ================= */

.input-group{
  position:relative;
  transform:translateY(10px);
  opacity:0;
  animation:fieldIn .6s ease forwards;
}

@keyframes fieldIn{
  to{opacity:1; transform:translateY(0);}
}

.input-group input,
.input-group textarea,
.input-group select{
  width:100%;
  padding:16px 14px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  font-size:14px;
  background:#f9fafb;
  outline:none;
  transition:.3s;
}

.input-group textarea{
  min-height:100px;
  resize:none;
}

/* LABEL */
.input-group label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:#6b7280;
  pointer-events:none;
  transition:.25s;
  background:#fff;
  padding:0 6px;
}

/* FOCUS EFFECT */
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
  border-color:#2563EB;
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

/* FLOATING EFFECT */
.input-group input:focus + label,
.input-group textarea:focus + label,
.input-group select:focus + label,
.input-group input:not(:placeholder-shown)+label,
.input-group textarea:not(:placeholder-shown)+label{
  top:-8px;
  font-size:11px;
  color:#2563EB;
}

/* ================= SUBMIT BUTTON ================= */

.submit-btn{
  width:100%;
  margin-top:20px;
  padding:16px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#1E3A8A,#2563EB);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.35s;
  box-shadow:0 15px 40px rgba(37,99,235,.25);
}

.submit-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 30px 70px rgba(37,99,235,.35);
}

/* ================= WHATSAPP FLOAT ================= */

.wa-float{
  position:fixed;
  bottom:25px;
  right:25px;
  width:60px;
  height:60px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  z-index:9999;
  transition:.3s;
}

.wa-float:hover{
  transform:translateY(-5px) scale(1.1);
  box-shadow:0 15px 35px rgba(0,0,0,.35);
}

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

@media(max-width:768px){
  .form-container{
    padding:30px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}/* ===================================================
   STATS SECTION PREMIUM
=================================================== */

.stats{
  padding:90px 20px;
  background:linear-gradient(135deg,#1E3A8A,#2563EB);
  color:#fff;
  text-align:center;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:1100px;
  margin:auto;
}

.stats-grid div{
  background:rgba(255,255,255,.08);
  padding:40px 20px;
  border-radius:24px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:.5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.stats-grid div:hover{
  transform:translateY(-10px);
  background:rgba(255,255,255,.15);
  box-shadow:0 35px 80px rgba(0,0,0,.35);
}

.stats-grid h3{
  font-size:40px;
  margin-bottom:10px;
  font-weight:700;
}

.stats-grid p{
  font-size:15px;
  opacity:.9;
}

/* Responsive */
@media(max-width:900px){
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .stats-grid{
    grid-template-columns:1fr;
  }
}/* ================= VISI MISI PAGE ================= */

.visi-section{
  padding:100px 0;
  background:#f9fafc;
}

.visi-section .container{
  max-width:1100px;
  margin:auto;
}

.visi-box,
.misi-box{
  background:#ffffff;
  padding:50px;
  border-radius:25px;
  margin-bottom:40px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  transition:.4s;
}

.visi-box:hover,
.misi-box:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(0,0,0,0.12);
}

.visi-box h2,
.misi-box h2{
  font-size:28px;
  margin-bottom:20px;
  color:#0f172a;
  position:relative;
}

.visi-box h2::after,
.misi-box h2::after{
  content:"";
  width:60px;
  height:4px;
  background:#facc15;
  display:block;
  margin-top:10px;
  border-radius:10px;
}

.visi-box p{
  font-size:18px;
  line-height:1.8;
  color:#475569;
}

.misi-box ul{
  padding-left:20px;
}

.misi-box li{
  margin-bottom:12px;
  font-size:17px;
  color:#475569;
}

/* Active menu */
nav ul li a.active{
  color:#facc15;
  font-weight:600;
}
/* =========================================
   WHATSAPP FLOATING BUTTON - ELEGANT
========================================= */

.wa-float{
  position:fixed;
  bottom:30px;
  right:30px;
  width:60px;
  height:60px;
  background:linear-gradient(135deg,#25D366,#1ebe5d);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  z-index:9999;
  transition:.4s cubic-bezier(.22,1,.36,1);
}

/* Glow halus */
.wa-float::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:rgba(37,211,102,.25);
  z-index:-1;
  animation:waPulse 2s infinite;
}

@keyframes waPulse{
  0%{
    transform:scale(1);
    opacity:.6;
  }
  70%{
    transform:scale(1.4);
    opacity:0;
  }
  100%{
    transform:scale(1.4);
    opacity:0;
  }
}

/* Hover */
.wa-float:hover{
  transform:translateY(-6px) scale(1.1);
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

/* Mobile size lebih compact */
@media(max-width:768px){
  .wa-float{
    width:52px;
    height:52px;
    font-size:24px;
    bottom:20px;
    right:20px;
  }
}
/* =========================================
   DROPDOWN PROFIL - PREMIUM NAVY VERSION
========================================= */

.dropdown{
  position:relative;
}

/* MENU */
.dropdown-menu{
  position:absolute;
  top:120%;
  right:0;
  min-width:230px;
  padding:12px 0;

  /* Dark luxury style */
  background:linear-gradient(135deg,#1e3a8a,#162e6f);
  border-radius:18px;

  box-shadow:0 25px 60px rgba(0,0,0,.35);

  display:none;
  overflow:hidden;
  animation:dropdownFade .35s ease;
  z-index:2000;
}

/* Glow border tipis */
.dropdown-menu::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(135deg,#FFD700,#facc15,#fff3b0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* Item */
.dropdown-menu li{
  list-style:none;
}

.dropdown-menu li a{
  display:block;
  padding:14px 24px;
  font-size:14px;
  color:#ffffff;
  font-weight:500;
  text-decoration:none;
  transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;
}

/* Hover Elegant */
.dropdown-menu li a:hover{
  background:rgba(255,255,255,.1);
  padding-left:30px;
  color:#FFD700;
}

/* Divider */
.dropdown-menu li:not(:last-child){
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Active Show */
.dropdown.active .dropdown-menu{
  display:block;
}

/* Animation */
@keyframes dropdownFade{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* =========================================
   DROPDOWN MOBILE SAMA SEPERTI DESKTOP
========================================= */

@media(max-width:768px){

  .dropdown{
    position:relative;
  }

  .dropdown-menu{
    position:absolute; 
    top:110%;
    right:0;
    left:auto;
    width:230px;      
    border-radius:18px;
    z-index:3000;
  }

  .dropdown-menu li a{
    font-size:14px;
    padding:14px 24px;
  }

}
/* ================= DIGITAL LIBRARY PREMIUM ================= */

.library-container{
max-width:1100px;
margin:auto;
display:flex;
flex-direction:column;
gap:50px;
align-items:center;
}

/* GRID RAK BUKU */

.book-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
width:100%;
max-width:900px;
position:relative;
z-index:5;
}

/* BOOK CARD */

.book-card{
background:#fff;
border-radius:18px;
padding:15px;
text-align:center;
cursor:pointer;

transition:.4s;

box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.book-card img{
width:100%;
height:260px;
object-fit:cover;
border-radius:10px;
}

.book-card h3{
font-size:15px;
margin-top:10px;
color:#1e3a8a;
}

/* Hover effect */

.book-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 20px 50px rgba(0,0,0,.2);
}

/* ACTIVE BOOK */

.book-card.active{
outline:3px solid #d4af37;
}

/* VIEWER */

.library-viewer{
width:100%;
max-width:900px;
background:#fff;
border-radius:25px;
padding:20px;
border:10px solid #d4af37;

box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.library-viewer iframe{
width:100%;
height:520px;
border-radius:12px;
}
.logo-cambridge{
  width:100%;
  max-width:170px;
  height:auto;
  display:block;
  margin:0 auto 15px;
}

@media(max-width:768px){
  .logo-cambridge{
    max-width:130px;
  }
}

@media(min-width:1024px){
  .logo-cambridge{
    max-width:180px;
  }
}
/* CARD DASAR */
.jenjang-card {
  background: #f9fbff;
  border-radius: 25px;
  padding: 40px 25px;
  text-align: center;
  transition: all 0.35s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

/* HOVER EFFECT (NGANGKAT + GLOW) */
.jenjang-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 82, 204, 0.2);
}

/* LOGO */
.jenjang-icon {
  margin-bottom: 15px;
}

.jenjang-icon img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  transition: 0.3s;
}

/* LOGO HOVER */
.jenjang-card:hover .jenjang-icon img {
  transform: scale(1.1);
}

/* JUDUL */
.jenjang-title {
  font-size: 20px;
  font-weight: 700;
  color: #1d3557;
  margin-bottom: 10px;
}

/* TEKS */
.jenjang-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* BUTTON */
.jenjang-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 30px;
  background: linear-gradient(135deg, #2d6cdf, #1b4db1);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

/* BUTTON HOVER */
.jenjang-btn:hover {
  background: linear-gradient(135deg, #1b4db1, #163a8a);
  transform: scale(1.05);
}

/* OPTIONAL: GARIS GLOW ATAS */
.jenjang-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #2d6cdf, #00c6ff);
  opacity: 0;
  transition: 0.3s;
}

.jenjang-card:hover::before {
  opacity: 1;
}
/* ================= MOBILE FIX LOGO ================= */
@media (max-width: 768px){

  /* Logo SMP & SMA */
  .jenjang-icon img{
    width: 50px !important;
    height: 50px !important;
  }


}
/* LOGO CAMBRIDGE HERO */
.cambridge-logo{
  width:140px;
  margin-bottom:20px;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.4));
  animation:fadeLogo 1.2s ease forwards;
  opacity:0;
}

/* Animasi muncul */
@keyframes fadeLogo{
  from{
    opacity:0;
    transform:translateY(20px) scale(0.9);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Hover subtle */
.cambridge-logo:hover{
  transform:scale(1.05);
  transition:.3s;
}
@media(max-width:768px){
  .cambridge-hero h1{
    font-size:28px !important;
    line-height:1.3;
  }

  .cambridge-hero p{
    font-size:14px;
  }
}