/* ===========================
   GLOBAL RESET
=========================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  background:#f8fafc;
  color:#0f172a;
  line-height:1.7;

  /* ruang navbar fixed */
  padding-top:22px;
}

section{
  scroll-margin-top:80px;
}

.container{
  width:92%;
  max-width:1200px;
  margin:auto;
}

/* ===========================
   NAVBAR FINAL
=========================== */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;

  z-index:9999;

  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(255,255,255,0.2);

  transition:all .3s ease;
}

/* saat scroll */
.navbar.scrolled{
  background:#ffffff;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* wrapper */
.nav-wrap{
  height:50px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ===========================
   BRAND
=========================== */
.brand{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;
}

.logo{
  width:44px;
  height:44px;
  object-fit:cover;
}

.brand span{
  font-size:17px;
  font-weight:700;
  color:#0f172a;
}

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

.nav-link{
  position:relative;

  text-decoration:none;
  color:#334155;

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

  padding:10px 14px;
  border-radius:10px;

  transition:all .25s ease;
}

/* hover */
.nav-link:hover{
  background:#eef2ff;
  color:#4f46e5;
}

/* active */
.nav-link.active{
  color:#4f46e5;
  font-weight:600;
}

/* garis bawah */
.nav-link.active::after{
  content:"";

  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;

  height:2px;
  border-radius:10px;

  background:#4f46e5;
}

/* ===========================
   BUTTON
=========================== */
.btn-primary{
  text-decoration:none;

  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff !important;

  padding:11px 18px;

  border-radius:10px;

  font-size:13px;
  font-weight:600;

  box-shadow:0 8px 25px rgba(79,70,229,0.25);

  transition:all .25s ease;
}

.btn-primary:hover{
  transform:translateY(-2px);

  box-shadow:0 14px 30px rgba(79,70,229,0.35);
}

/* ===========================
   TOGGLE MOBILE
=========================== */
.nav-toggle{
  display:none;

  border:none;
  background:transparent;

  font-size:28px;
  cursor:pointer;

  color:#0f172a;
}

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

  .nav-toggle{
    display:block;
  }

  .nav-menu{
    position:absolute;

    top:60px;
    left:15px;
    right:15px;

    display:none;
    flex-direction:column;
    align-items:stretch;

    gap:8px;

    padding:16px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 20px 40px rgba(0,0,0,0.12);
  }

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

  .nav-link{
    width:100%;
  }

  .btn-primary{
    text-align:center;
  }

  .brand span{
    font-size:15px;
  }
}
html, body{
  overflow-x:hidden;
}

/* ===========================
   HERO
=========================== */
.hero{
  padding:60px 0;
  background:linear-gradient(135deg, #0f766e, #064e3b);
  color:white;
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  top:-60px;
  right:-60px;
  width:250px;
  height:250px;
  background:rgba(255,255,255,0.12);
  border-radius:50%;
}

.hero-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:35px;
  line-height:1.2;
}

.hero p{
  margin-top:12px;
  font-size:16px;
  opacity:0.92;
}

.badge{
  display:inline-block;
  background:rgba(255,255,255,0.16);
  padding:7px 14px;
  border-radius:999px;
  font-size:18px;
  margin-bottom:14px;
}

.hero-actions{
  margin-top:15px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn-light{
  background:white;
  color:#0f766e;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.btn-light:hover{
  transform:translateY(-1px);
}

.btn-outline{
  border:2px solid rgba(255,255,255,0.7);
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  color:white;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.15);
}

.hero img{
  width:100%;
  border-radius:22px;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  object-fit:cover;
}

.stats{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.stat-box{
  background:rgba(255,255,255,0.14);
  padding:12px 14px;
  border-radius:16px;
  min-width:150px;
}

.stat-box h3{
  font-size:18px;
  margin-bottom:4px;
}

.stat-box p{
  font-size:13px;
  opacity:0.9;
}

@media(max-width:900px){
  .hero-wrap{
    grid-template-columns:1fr;
  }
  .hero h1{
    font-size:30px;
  }
}

/* ===========================
   KEUNGGULAN SECTION (UPGRADE)
=========================== */

/* =========================
   GLOBAL SAFE
========================= */
*{
  box-sizing:border-box;
}

body{
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

/* =========================
   CONTAINER
========================= */
.keunggulan-section .container{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding-left:15px;
  padding-right:15px;
}

/* =========================
   SECTION BACKGROUND
========================= */
.keunggulan-section{
  position:relative;
  padding:100px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,70,229,0.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(6,182,212,0.16), transparent 45%),
    linear-gradient(180deg, #ffffff, #f9fafb);
  overflow:hidden;
}

/* blob dekorasi */
.keunggulan-section::before,
.keunggulan-section::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
  z-index:0;
}

.keunggulan-section::before{
  top:-120px;
  left:-120px;
  background:rgba(79,70,229,0.6);
}

.keunggulan-section::after{
  bottom:-150px;
  right:-150px;
  background:rgba(6,182,212,0.55);
}

/* noise halus biar lebih hidup */
.keunggulan-section .container::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity:0.10;
  pointer-events:none;
  z-index:0;
}

/* pastikan konten di atas dekorasi */
.keunggulan-section .container{
  position:relative;
  z-index:2;
}

/* =========================
   HEADER
========================= */
.keunggulan-section .section-header{
  text-align:center;
  margin-bottom:60px;
}

.keunggulan-section .section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.keunggulan-section .section-title i{
  font-size:30px;
  color:#4f46e5;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.keunggulan-section .section-title h2{
  margin:0;
  font-size:30px;
  font-weight:800;
  color:#111827;
  line-height:1.2;
  letter-spacing:-0.6px;
}

.keunggulan-section .section-subtitle{
  max-width:760px;
  margin:auto;
  font-size:16px;
  line-height:1.9;
  color:#6b7280;
}

/* =========================
   GRID RESPONSIVE
========================= */
.keunggulan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px;
  width:100%;
}

/* =========================
   CARD
========================= */
.keunggulan-card{
  position:relative;
  width:100%;
  min-width:0;
  padding:34px 26px;
  border-radius:26px;
  text-align:center;

  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);

  border:1px solid rgba(229,231,235,0.9);
  overflow:hidden;

  transition:all 0.35s ease;
  box-shadow:
    0 12px 35px rgba(0,0,0,0.06),
    0 2px 10px rgba(0,0,0,0.04);

  transform:translateY(0);
}

/* garis gradient top */
.keunggulan-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#4f46e5,#06b6d4,#22c55e);
  opacity:0.85;
}

/* glow hover */
.keunggulan-card::after{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(circle, rgba(79,70,229,0.18), transparent 60%);
  opacity:0;
  transition:0.35s ease;
  z-index:0;
}

.keunggulan-card > *{
  position:relative;
  z-index:2;
}

.keunggulan-card:hover{
  transform:translateY(-10px);
  border-color:rgba(79,70,229,0.25);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.10),
    0 4px 14px rgba(0,0,0,0.06);
}

.keunggulan-card:hover::after{
  opacity:1;
}

/* featured */
.keunggulan-card.featured{
  border:1px solid rgba(79,70,229,0.25);
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,255,0.92));
  box-shadow:
    0 18px 45px rgba(79,70,229,0.12),
    0 6px 18px rgba(0,0,0,0.06);
}

/* =========================
   ICON BOX
========================= */
.keunggulan-icon{
  width:54px;
  height:54px;
  margin:0 auto 22px;
  border-radius:16px;

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

  font-size:30px;
  color:#fff;

  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  box-shadow:
    0 16px 30px rgba(79,70,229,0.30);

  position:relative;
  overflow:hidden;

  transition:0.35s ease;
}

/* shine efek */
.keunggulan-icon::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:200%;
  height:200%;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%
  );
  transform:rotate(25deg);
  opacity:0;
  transition:0.5s ease;
}

.keunggulan-card:hover .keunggulan-icon{
  transform:scale(1.08) rotate(-2deg);
}

.keunggulan-card:hover .keunggulan-icon::before{
  opacity:1;
  left:40%;
}

/* =========================
   TEXT
========================= */
.keunggulan-card h3{
  font-size:20px;
  font-weight:700;
  color:#111827;
  margin-bottom:12px;
  letter-spacing:-0.3px;
}

.keunggulan-card p{
  margin:0;
  font-size:15px;
  line-height:1.9;
  color:#6b7280;
}
/* ICON WARNA-WARNI PER CARD */
.keunggulan-card:nth-child(1) .keunggulan-icon{
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  box-shadow:0 16px 30px rgba(79,70,229,0.28);
}

.keunggulan-card:nth-child(2) .keunggulan-icon{
  background:linear-gradient(135deg,#f97316,#facc15);
  box-shadow:0 16px 30px rgba(249,115,22,0.28);
}

.keunggulan-card:nth-child(3) .keunggulan-icon{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 16px 30px rgba(34,197,94,0.28);
}

.keunggulan-card:nth-child(4) .keunggulan-icon{
  background:linear-gradient(135deg,#ec4899,#a855f7);
  box-shadow:0 16px 30px rgba(236,72,153,0.28);
}

.keunggulan-card:nth-child(5) .keunggulan-icon{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 16px 30px rgba(14,165,233,0.28);
}

.keunggulan-card:nth-child(6) .keunggulan-icon{
  background:linear-gradient(135deg,#ef4444,#f43f5e);
  box-shadow:0 16px 30px rgba(239,68,68,0.28);
}

/* =========================
   ANIMASI MASUK (SCROLL)
========================= */
.keunggulan-card{
  opacity:0;
  transform:translateY(25px);
  animation:fadeUp 0.9s ease forwards;
}

.keunggulan-card:nth-child(1){ animation-delay:0.05s; }
.keunggulan-card:nth-child(2){ animation-delay:0.12s; }
.keunggulan-card:nth-child(3){ animation-delay:0.19s; }
.keunggulan-card:nth-child(4){ animation-delay:0.26s; }
.keunggulan-card:nth-child(5){ animation-delay:0.33s; }
.keunggulan-card:nth-child(6){ animation-delay:0.40s; }

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

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
  .keunggulan-section{
    padding:80px 0;
  }

  .keunggulan-section .section-title h2{
    font-size:28px;
  }

  .keunggulan-card{
    padding:28px 20px;
  }
}

/* ===========================
   PENGUMUMAN
=========================== */
.pengumuman-item{
  padding:18px;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  margin-bottom:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.04);
}

.pengumuman-item h3{
  font-size:16px;
  margin-bottom:6px;
}

.small-muted{
  font-size:13px;
  color:#64748b;
}

/* ===========================
   CTA
=========================== */
.cta{
  background:linear-gradient(135deg, #0f766e, #064e3b);
  padding:55px 0;
  color:white;
  border-radius:26px;
  box-shadow:0 20px 50px rgba(15,118,110,0.22);
}

.cta-wrap{
  text-align:center;
  max-width:760px;
  margin:auto;
  padding:0 20px;
}

.cta-wrap h2{
  font-size:30px;
  margin-bottom:12px;
  color:white;
}

.cta-wrap p{
  opacity:0.92;
  margin-bottom:22px;
}
@media (max-width: 768px){

  .cta{
    padding:35px 0;
    border-radius:18px;
  }

  .cta-wrap{
    padding:0 16px;
  }

  .cta-wrap h2{
    font-size:22px !important;
    line-height:1.3;
    margin-bottom:10px;
  }

  .cta-wrap p{
    font-size:14px;
    line-height:1.5;
    margin-bottom:16px;
  }

  .cta .btn-light{
    display:inline-block;
    width:100%;
    text-align:center;
    padding:10px 16px;
  }
}

/* ===========================
   FOOTER
=========================== */
.footer{
  position:relative;
  background:linear-gradient(180deg,#0f172a,#111827);
  color:#e5e7eb;
  padding:70px 0 0;
  overflow:hidden;
}

/* efek glow dekorasi */
.footer::before,
.footer::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.35;
  z-index:0;
}

.footer::before{
  top:-140px;
  left:-120px;
  background:rgba(79,70,229,0.75);
}

.footer::after{
  bottom:-180px;
  right:-150px;
  background:rgba(6,182,212,0.75);
}

/* WRAP */
.footer .footer-wrap{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:40px;
}

/* TEXT */
.footer h3{
  font-size:22px;
  font-weight:800;
  margin-bottom:15px;
  letter-spacing:-0.3px;
  color:#ffffff;
}

.footer p{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.0;
  color:rgba(229,231,235,0.85);
}

/* biar email/wa lebih jelas */
.footer p:last-child{
  margin-bottom:0;
}

/* BOTTOM */
.footer-bottom{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,0.10);
  text-align:center;
  padding:18px 10px;
  font-size:14px;
  color:rgba(229,231,235,0.75);
  background:rgba(0,0,0,0.15);
  backdrop-filter:blur(6px);
}

.footer-bottom p{
  margin:0;
}
.footer-brand{
  font-weight:700;
  color:#ffffff;
  background:linear-gradient(90deg,#4f46e5,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer-brand{
  font-weight:800;
  color:#ffffff;
  background:linear-gradient(90deg,#4f46e5,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* MOBILE: brand turun ke baris baru */
@media(max-width:600px){
  .footer-brand{
    display:block;
    margin-top:4px;
  }
}
@media(max-width:600px){
  .footer-bottom p{
    line-height:1.2;
  }
}

/* =========================
   HERO TEXT FIX FINAL
========================= */

.hero-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  width:90%;
  max-width:900px;

  text-align:center;

  z-index:99;
}

/* TITLE */
.hero-text h1{
  font-family:'Poppins', sans-serif;

  font-size:58px;
  font-weight:800;
  line-height:1.1;

  color:#fff;

  margin-bottom:14px;

  text-shadow:
    0 5px 20px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.35);
}
/* SUBTITLE H2 */
.hero-text h2{
  font-family:'Poppins', sans-serif;
  font-size:34px;
  font-weight:800;
  margin:0 0 10px 0;
  color:#facc15; /* kuning sekolah */
  text-shadow:0 3px 12px rgba(0,0,0,0.35);
}

/* SUBTITLE */
.hero-text p{
  font-family:'Poppins', sans-serif;
  font-size:30px;
  font-weight:600;
  margin:6px 0;
  color:rgba(255,255,255,0.9);
  text-shadow:0 3px 12px rgba(0,0,0,0.35);
}

/* =========================
   HERO TEXT ANIMATION CLEAN
========================= */

.anim{
  opacity:0;
  transform:translateY(40px);
}

/* saat aktif */
.slide.active .anim{
  animation:heroFadeUp 1s cubic-bezier(.22,1,.36,1) forwards;
}

/* delay */
.slide.active .delay-1{
  animation-delay:0.2s;
}

.slide.active .delay-2{
  animation-delay:0.5s;
}

.slide.active .delay-3{
  animation-delay:0.8s;
}

/* keyframe */
@keyframes heroFadeUp{

  from{
    opacity:0;
    transform:translateY(45px);
  }

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

}
.hero-type {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.hero-type-cursor {
  border-right: 3px solid #fff;
  padding-right: 6px;
  animation: heroTypeBlink 0.8s infinite;
}

@keyframes heroTypeBlink {
  50% { border-color: transparent; }
}

/* =========================
   HERO BUTTON AREA
========================= */

.hero-btns{
  margin-top:25px;
  display:flex;
  justify-content:center;
  gap:15px;
}

/* BASE BUTTON */
.hero-btns .btn{
  min-width:165px;
  height:49px;
  padding:0 20px;
  border-radius:8px;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  transition:0.3s;

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

  box-sizing:border-box;
  text-align:center;

  line-height:1;
  white-space:nowrap;
}

/* BUTTON PRIMARY (BIRU) */
.hero-btns .btn-primary{
  background:#0d6efd;
  color:#fff;
  border:5px solid #fff;
}

.hero-btns .btn-primary:hover{
  background:#0b5ed7;
  border-color:#0b5ed7;
}

/* BUTTON OUTLINE (PUTIH) */
.hero-btns .btn-outline{
  background:transparent;
  color:#fff;
  border:6px solid #fff;
}

.hero-btns .btn-outline:hover{
  background:#fff;
  color:#000;
}
@media (max-width: 768px) {

  .hero-btns{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-btns .btn{
    width: 100%;
    max-width: 280px;
    min-width: unset;
    font-size: 14px;
    height: 44px;
    padding: 0 16px;
  }

  .hero-btns .btn-primary{
    border: 3px solid #fff;
  }

  .hero-btns .btn-outline{
    border: 3px solid #fff;
  }
}

/* ===========================
   GALERI
=========================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  cursor:pointer;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.gallery-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:0.35s;
}

.gallery-item:hover img{
  transform:scale(1.08);
}

.gallery-item span{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
  color:white;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

@media(max-width:1000px){
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:600px){
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .gallery-item img{
    height:220px;
  }
}

/* ===========================
   LIGHTBOX POPUP
=========================== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:99999;
  padding:20px;
}

.lightbox.active{
  display:flex;
}

.lightbox img{
  max-width:90%;
  max-height:85vh;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  font-size:28px;
  color:white;
  cursor:pointer;
  font-weight:bold;
  background:rgba(255,255,255,0.15);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.lightbox-close:hover{
  background:rgba(255,255,255,0.25);
}
/* ===========================
   SPACING SECTION GURU & ALUMNI
=========================== */
#guru,
#guru + .section,
#section-map{
  padding-top:90px;
  padding-bottom:90px;
  position:relative;
}

/* ===========================
   HEADER SECTION
=========================== */
#guru h2,
#guru + .section h2,
#section-map h2{
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin-bottom:14px;
  color:#0f172a;
  line-height:1.3;
}

#guru .section-subtitle,
#guru + .section .section-subtitle,
#section-map .section-subtitle{
  max-width:760px;
  margin:0 auto 50px auto;
  text-align:center;
  line-height:1.8;
  color:#64748b;
  font-size:14px;
}

/* ===========================
   GURU & ALUMNI GRID FIX
=========================== */
#guru .grid-3,
#guru + .section .grid-3{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:40px !important;
  align-items:stretch;
  margin-top:20px;
  position:relative;
  z-index:2;
}

/* ===========================
   CARD IMPROVEMENT
=========================== */
#guru .profile-card,
#guru + .section .profile-card{
  background:#ffffff !important;
  border-radius:24px !important;
  padding:28px 22px !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 12px 30px rgba(0,0,0,0.06) !important;
  overflow:hidden;
  position:relative;
  text-align:center;
  transition:0.3s ease;
}

/* hover */
#guru .profile-card:hover,
#guru + .section .profile-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,0.10) !important;
}

/* isi card */
#guru .profile-card > *,
#guru + .section .profile-card > *{
  position:relative;
  z-index:2;
}

/* ===========================
   PHOTO FIX
=========================== */
#guru .profile-photo,
#guru + .section .profile-photo{
  width:210px !important;
  height:210px !important;
  border-radius:50% !important;
  overflow:hidden;
  margin:0 auto 18px auto;
  flex-shrink:0;
  border:4px solid #f8fafc;
  box-shadow:0 10px 25px rgba(0,0,0,0.10);
}

/* image */
#guru .profile-photo img,
#guru + .section .profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===========================
   NAMA
=========================== */
#guru .profile-card h3,
#guru + .section .profile-card h3{
  font-size:16px !important;
  font-weight:700;
  line-height:1.5;
  margin-bottom:8px;
  color:#0f172a;
  text-align:center;
}

/* ===========================
   DESKRIPSI
=========================== */
#guru .profile-card p,
#guru + .section .profile-card p{
  font-size:13px;
  line-height:1.0;
  color:#475569;
  text-align:center;
}

/* ===========================
   BADGE
=========================== */
#guru .badge-soft,
#guru + .section .badge-soft{
  display:inline-block;
  margin-top:4px;
  font-size:12px;
  padding:6px 12px;
  text-align:center;
  border-radius:999px;
  line-height:1.4;
}

/* ===========================
   ALUMNI CARD FIX
=========================== */
#guru + .section .profile-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
}

/* ===========================
   TESTIMONI
=========================== */
#guru + .section .testimoni-box{
  margin-top:14px;
  line-height:0.1;
  text-align:center;
  background:#f8fafc;
  border-radius:10px;
  padding:12px;
  border:1px solid #d39111;
  font-size:13px;
  color:#475569;

  /* tinggi seragam */
  min-height:24px;
  max-height:24px;
  overflow:hidden;

  /* potong otomatis */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* spacing kecil */
#guru + .section .profile-card h3{
  margin-bottom:4px;
}

#guru + .section .small-muted{
  margin-bottom:10px;
}

/* ===========================
   BUTTON
=========================== */
#guru .btn-primary,
#guru + .section .btn-primary{
  display:table;
  margin:35px auto 0 auto;
}

/* hapus efek <br> */
#guru br,
#guru + .section br{
  display:none;
}

/* ===========================
   TABLET
=========================== */
@media(max-width:992px){

  #guru .grid-3,
  #guru + .section .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

}

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

  #guru,
  #guru + .section,
  #section-map{
    padding-top:70px;
    padding-bottom:70px;
  }

  #guru h2,
  #guru + .section h2,
  #section-map h2{
    font-size:28px;
  }

  #guru .grid-3,
  #guru + .section .grid-3{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  #guru .profile-photo,
  #guru + .section .profile-photo{
    width:170px !important;
    height:170px !important;
  }

}
/* ===========================
   JURUSAN WARNA-WARNI MODERN
=========================== */

/* icon default */
.jurusan-card .icon{
  width:55px;
  height:55px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  margin-bottom:15px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4); /* fallback */
}

/* warna berbeda otomatis berdasarkan urutan */
.jurusan-grid .jurusan-card:nth-child(1) .icon{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
}
.jurusan-grid .jurusan-card:nth-child(2) .icon{
  background:linear-gradient(135deg,#f59e0b,#f97316);
}
.jurusan-grid .jurusan-card:nth-child(3) .icon{
  background:linear-gradient(135deg,#16a34a,#22c55e);
}

/* jurusan lainnya (yang hidden) */
#moreJurusan .jurusan-card:nth-child(1) .icon{
  background:linear-gradient(135deg,#7c3aed,#a855f7);
}
#moreJurusan .jurusan-card:nth-child(2) .icon{
  background:linear-gradient(135deg,#ef4444,#f97316);
}
#moreJurusan .jurusan-card:nth-child(3) .icon{
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}
#moreJurusan .jurusan-card:nth-child(4) .icon{
  background:linear-gradient(135deg,#22c55e,#84cc16);
}
#moreJurusan .jurusan-card:nth-child(5) .icon{
  background:linear-gradient(135deg,#f59e0b,#eab308);
}
#moreJurusan .jurusan-card:nth-child(6) .icon{
  background:linear-gradient(135deg,#334155,#0f172a);
}

/* efek hover biar lebih hidup */
.jurusan-card:hover .icon{
  transform:scale(1.08) rotate(2deg);
  transition:0.35s ease;
}
.jurusan-card{
  position:relative;
  overflow:hidden;
}

.jurusan-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg,#4f46e5,#06b6d4);
}

.jurusan-grid .jurusan-card:nth-child(1)::before{ background:linear-gradient(90deg,#2563eb,#06b6d4); }
.jurusan-grid .jurusan-card:nth-child(2)::before{ background:linear-gradient(90deg,#f59e0b,#f97316); }
.jurusan-grid .jurusan-card:nth-child(3)::before{ background:linear-gradient(90deg,#16a34a,#22c55e); }

#moreJurusan .jurusan-card:nth-child(1)::before{ background:linear-gradient(90deg,#7c3aed,#a855f7); }
#moreJurusan .jurusan-card:nth-child(2)::before{ background:linear-gradient(90deg,#ef4444,#f97316); }
#moreJurusan .jurusan-card:nth-child(3)::before{ background:linear-gradient(90deg,#0ea5e9,#38bdf8); }
#moreJurusan .jurusan-card:nth-child(4)::before{ background:linear-gradient(90deg,#22c55e,#84cc16); }
#moreJurusan .jurusan-card:nth-child(5)::before{ background:linear-gradient(90deg,#f59e0b,#eab308); }
#moreJurusan .jurusan-card:nth-child(6)::before{ background:linear-gradient(90deg,#334155,#0f172a); }

/* ===========================
   HERO BUTTONS FINAL (DIRECT)
=========================== */
.hero-btns{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:22px;
}

.hero-btns a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:0.35s ease;
}

/* tombol 1 = FILL */
.hero-btns a:first-child{
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  border:none;
  box-shadow:0 12px 25px rgba(79,70,229,0.35);
}

/* tombol 2 = TRANSPARAN */
.hero-btns a:last-child{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  backdrop-filter:blur(10px);
}

.hero-btns a:hover{
  transform:translateY(-3px);
  opacity:0.95;
}

@media (max-width: 768px) {

  .hero-btns{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-btns .btn{
    width: 100%;
    max-width: 280px;
    min-width: unset;
    font-size: 14px;
    height: 44px;
    padding: 0 16px;
  }

  .hero-btns .btn-primary{
    border: 3px solid #fff;
  }

  .hero-btns .btn-outline{
    border: 3px solid #fff;
  }
}
/* ===========================
   HERO BUTTONS FINAL (DIRECT)
=========================== */
.slider-text{
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  width:80%;
}

.slider-text h2{
  font-size:34px;
  font-weight:900;
  margin-bottom:10px;
  text-shadow:0 5px 20px rgba(0,0,0,0.6);
}

.slider-text p{
  font-size:16px;
  opacity:0.9;
  text-shadow:0 5px 15px rgba(0,0,0,0.5);
}
/* ===========================
   GLOBAL / RESET
=========================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI", Arial, sans-serif;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  background:#f8fafc;
  color:#0f172a;
  line-height:1.7;
}

section{
  scroll-margin-top:90px;
}

.container{
  width:92%;
  max-width:1200px;
  margin:auto;
}

/* ===========================
   TIMELINE
=========================== */
.spmb-timeline{
  position:relative;
  padding:90px 0;
  overflow:hidden;

  background:
    radial-gradient(circle at 15% 25%, rgba(250,204,21,0.22), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(249,115,22,0.18), transparent 55%),
    linear-gradient(180deg,#fffdf3,#ffffff);
}

/* dekorasi glow lembut */
.spmb-timeline::before,
.spmb-timeline::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(110px);
  opacity:0.35;
  z-index:0;
}

.spmb-timeline::before{
  top:-160px;
  left:-150px;
  background:rgba(250,204,21,0.65); /* kuning */
}

.spmb-timeline::after{
  bottom:-170px;
  right:-150px;
  background:rgba(249,115,22,0.55); /* orange */
}

/* pastikan konten tetap di atas */
.spmb-timeline .container{
  position:relative;
  z-index:2;
}

.timeline-header{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:40px;
}

.timeline-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.timeline-title i{
  font-size:30px;
}

.timeline-title h2{
  margin:0;
  font-size:30px;
  font-weight:800;
  color:#0d47a1;
}

.section-subtitle{
  margin:0;
  max-width:700px;
  font-size:16px;
  line-height:1.7;
  color:#6b7280;
}

.timeline-wrapper{
  display:flex;
  justify-content:space-between;
  gap:20px;
  position:relative;
}

/* progress */
.timeline-progress{
  position:relative;
  height:6px;
  background:#e5e7eb;
  margin:40px auto 20px;
  width:90%;
  border-radius:10px;
  overflow:hidden;
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#4f46e5,#06b6d4);
  transition:width 0.6s ease;
}

/* item */
.timeline-item{
  flex:1;
  text-align:center;
  opacity:0.4;
  transform:translateY(20px);
  transition:0.5s ease;
}

.timeline-item.active{
  opacity:1;
  transform:translateY(0);
}

.timeline-icon{
  width:55px;
  height:55px;
  margin:auto;
  border-radius:50%;
  background:#fff;
  border:3px solid #d1d5db;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:0.4s;
}

.timeline-item.active .timeline-icon{
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  border-color:#4f46e5;
  box-shadow:0 10px 20px rgba(79,70,229,0.3);
}

.timeline-content{
  margin-top:12px;
}

.timeline-content span{
  font-size:14px;
  font-weight:700;
  color:#9ca3af;
}

.timeline-content h3{
  font-size:15px;
  font-weight:700;
  color:#111827;
}

.timeline-content p{
  font-size:16px;
  color:#6b7997;
}
.timeline-icon i{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.timeline-icon i.fa-regular{
  font-weight: 400 !important;
}
.timeline-event i,
.timeline-title i{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
/* ===========================
   MOBILE FIX
=========================== */
@media(max-width:768px){

  .timeline-wrapper{
    gap:8px;
  }

  .timeline-item{
    flex:1;
    min-width:auto;
  }

  .timeline-icon{
    width:42px;
    height:42px;
    font-size:14px;
    border-width:2px;
  }

  .timeline-content{
    margin-top:8px;
  }

  .timeline-content h3{
    font-size:12px;
    line-height:1.3;
    margin-bottom:4px;
  }

  .timeline-content p{
    font-size:11px;
    line-height:1.4;
  }

  .timeline-title h2{
    font-size:22px;
  }

  .timeline-title i{
    font-size:22px;
  }

  .section-subtitle{
    font-size:13px;
    padding:0 10px;
  }

}


/* ===========================
   JURUSAN SECTION
=========================== */
.jurusan-section{
  position:relative;
  padding:90px 0;
  color:#fff;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  overflow:hidden;
}

.jurusan-section::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);
  transform:rotate(25deg);
}

/* ===========================
   CONTAINER AMAN
=========================== */
.jurusan-section .container{
  position:relative;
  z-index:2;
}

/* ===========================
   HEADER SECTION
=========================== */
.jurusan-section .section-header{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:45px;
}

.jurusan-section .section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.jurusan-section .section-title i{
  font-size:32px;
  color:#fff;
}

.jurusan-section .section-title h2{
  margin:0;
  font-size:32px;
  font-weight:800;
  line-height:1.2;
}

/* teks */
.jurusan-section h2,
.jurusan-section p{
  color:#fff;
}

.jurusan-section .section-subtitle{
  max-width:760px;
  margin:0 auto;
  line-height:1.8;
  opacity:0.9;
  font-size:16px;
  color:#fff;
}

/* ===========================
   GRID
=========================== */
.jurusan-section .jurusan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  margin-top:30px;
  position:relative;
  z-index:2;
}

/* ===========================
   CARD
=========================== */
.jurusan-card{
  background:#fff;
  color:#111827;
  border-radius:18px;
  padding:25px;
  border:1px solid #eef0f4;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:0.4s ease;
  position:relative;
  overflow:hidden;
}

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

.jurusan-card .icon{
  width:55px;
  height:55px;
  border-radius:14px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  margin-bottom:15px;
}

.jurusan-card h3{
  font-size:17px;
  font-weight:800;
  margin-bottom:8px;
  color:#111827;
}

.jurusan-card p{
  font-size:15px;
  color:#6b7280;
  line-height:1.5;
}

/* ===========================
   FEATURED
=========================== */
.jurusan-card.featured{
  border:2px solid #4f46e5;
  background:linear-gradient(180deg,#f8faff,#ffffff);
}

/* ===========================
   READ MORE
=========================== */
.jurusan-section .read-more-wrap{
  text-align:center;
  margin-top:30px;
  position:relative;
  z-index:5;
}

.jurusan-section .read-more-btn{
  padding:10px 18px;
  border:none;
  background:#111827;
  color:#fff;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
  position:relative;
  z-index:10;
  pointer-events:auto;
  font-weight:600;
}

.jurusan-section .read-more-btn:hover{
  background:#4f46e5;
}

/* ===========================
   HIDDEN SECTION
=========================== */
.jurusan-section .jurusan-more{
  display:none;
  margin-top:25px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  position:relative;
  z-index:2;
}

.jurusan-section .jurusan-more.active{
  display:grid !important;
}


/* ===========================
   TABLET
=========================== */
@media(max-width:992px){

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

}

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

  .jurusan-section .jurusan-grid,
  .jurusan-section .jurusan-more{
    grid-template-columns:1fr;
    gap:16px;
  }

}

/* =========================
   PARALLAX IMG FIX
========================= */
.parallax-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateY(0);
  transition:transform 1.2s ease-in-out;
}

/* saat slide aktif (parallax halus sedikit naik) */
.slide.active .parallax-img{
  transform:translateY(0px);
}

/* =========================
   TEXT ANIMATION
========================= */
.hero-text{
  position:absolute;
  z-index:10;
}

/* kondisi awal */
.anim{
  opacity:0;
  transform:translateY(20px);
}

/* reset animasi */
.slide .anim{
  animation:none;
}

/* animasi saat slide aktif */
.slide.active .anim{
  animation:premiumFade 1s ease forwards;
}

/* delay animasi */
.slide.active .delay-1{ animation-delay:0.4s; }
.slide.active .delay-2{ animation-delay:0.9s; }
.slide.active .delay-3{ animation-delay:1.4s; }

/* keyframes */
@keyframes premiumFade{
  0%{
    opacity:0;
    transform:translateY(60px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   JALUR
========================= */
.jalur-section-modern{
  padding-top:40px !important;   /* sebelumnya 90/120 */
  padding-bottom:60px;
}

.jalur-section-modern .text-center{
  margin-top:0 !important;
}

.jalur-section-modern .mb-5{
  margin-bottom:25px !important; /* sebelumnya terlalu besar */
}

/* =========================
   PROFIL SEKOLAH
========================= */
/* ===========================
   WHY SECTION (UPGRADE PREMIUM)
=========================== */
.why-section{
  position:relative;
  padding:90px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(14,165,233,0.14), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(79,70,229,0.12), transparent 50%),
    linear-gradient(180deg,#f8fafc,#ffffff);
  overflow:hidden;
}

/* blob dekorasi */
.why-section::before,
.why-section::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.35;
  z-index:0;
}

.why-section::before{
  top:-150px;
  left:-150px;
  background:rgba(79,70,229,0.65);
}

.why-section::after{
  bottom:-180px;
  right:-160px;
  background:rgba(14,165,233,0.65);
}

/* =========================
   HEADER
========================= */
.section-title{
  font-size:36px;
  font-weight:900;
  color:#0f172a;
  margin-bottom:12px;
  letter-spacing:-0.6px;
  position:relative;
  z-index:2;
}

.section-subtitle{
  max-width:900px;
  font-size:16px;
  line-height:1.9;
  color:#475569;
  margin-bottom:45px;
  position:relative;
  z-index:2;
}

/* =========================
   GRID LAYOUT
========================= */
.profile-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:28px;
  align-items:start;
}

/* KOLOM KANAN */
.profile-side{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

/* =========================
   THEME CARD (PREMIUM)
========================= */
.theme-card{
  position:relative;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  padding:30px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,0.08);

  box-shadow:
    0 12px 35px rgba(15,23,42,0.08),
    0 3px 10px rgba(15,23,42,0.05);

  transition:all 0.35s ease;
  overflow:hidden;
}

/* glow hover */
.theme-card::after{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(circle, rgba(79,70,229,0.16), transparent 60%);
  opacity:0;
  transition:0.35s ease;
  z-index:0;
}

.theme-card > *{
  position:relative;
  z-index:2;
}

.theme-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 22px 60px rgba(15,23,42,0.14),
    0 8px 20px rgba(15,23,42,0.08);
}

.theme-card:hover::after{
  opacity:1;
}

/* ===========================
   ANIMATED GRADIENT BORDER
=========================== */
.theme-card.border-animate{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)) padding-box,
    linear-gradient(120deg,#0ea5e9,#4f46e5,#22c55e,#f97316,#ec4899) border-box;
  background-size:100% 100%, 300% 300%;
  animation:borderMove 9s ease infinite;
}

@keyframes borderMove{
  0%{ background-position:0% 50%, 0% 50%; }
  50%{ background-position:0% 50%, 100% 50%; }
  100%{ background-position:0% 50%, 0% 50%; }
}

/* =========================
   TEXT
========================= */
.theme-card h3{
  font-size:20px;
  font-weight:900;
  margin:16px 0 12px;
  color:#0f172a;
  letter-spacing:-0.3px;
}

.theme-card p{
  font-size:15px;
  line-height:1.9;
  color:#475569;
  margin:0 0 12px;
}

.theme-card p:last-child{
  margin-bottom:0;
}

/* =========================
   ICON BOX (UPGRADE)
========================= */
.icon-box{
  width:52px;
  height:52px;
  border-radius:16px;

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

  font-size:22px;
  color:#fff;

  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
  box-shadow:0 14px 28px rgba(79,70,229,0.28);

  position:relative;
  overflow:hidden;
  transition:0.35s ease;
}

/* shine efek */
.icon-box::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width:220%;
  height:220%;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%
  );
  transform:rotate(25deg);
  opacity:0;
  transition:0.55s ease;
}

.theme-card:hover .icon-box{
  transform:scale(1.08) rotate(-2deg);
}

.theme-card:hover .icon-box::before{
  opacity:1;
  left:40%;
}

/* =========================
   ICON WARNA-WARNI (AUTO)
========================= */
.profile-side .theme-card:nth-child(1) .icon-box{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 14px 28px rgba(34,197,94,0.25);
}

.profile-side .theme-card:nth-child(2) .icon-box{
  background:linear-gradient(135deg,#f97316,#facc15);
  box-shadow:0 14px 28px rgba(249,115,22,0.25);
}

.profile-side .theme-card:nth-child(3) .icon-box{
  background:linear-gradient(135deg,#ec4899,#a855f7);
  box-shadow:0 14px 28px rgba(236,72,153,0.25);
}

/* =========================
   KHUSUS CARD PROFIL
========================= */
.profile-card{
  text-align:left;
}

.profile-highlight{
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed rgba(15,23,42,0.15);
}

.profile-card h4{
  margin-top:18px;
  margin-bottom:8px;
  font-size:16px;
  font-weight:900;
  color:#0f172a;
}

.profile-card .tagline{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(79,70,229,0.08);
  border:1px solid rgba(79,70,229,0.15);
  font-weight:700;
  color:#0b7768;
  font-style:italic;
}

/* =========================
   ANIMASI MASUK HALUS
========================= */
/* FIX: border gradient harus override background theme-card */
.theme-card.border-animate{
  border:2px solid transparent !important;

  background:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)) padding-box,
    linear-gradient(120deg,#0ea5e9,#4f46e5,#22c55e,#f97316,#ec4899) border-box !important;

  background-size:100% 100%, 300% 300%;
  animation:borderMove 8s ease infinite;
}

/* matikan garis top supaya tidak ganggu */
.theme-card.border-animate::before{
  display:none !important;
}

@keyframes borderMove{
  0%{ background-position:0% 50%, 0% 50%; }
  50%{ background-position:0% 50%, 100% 50%; }
  100%{ background-position:0% 50%, 0% 50%; }
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){
  .profile-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .why-section{
    padding:70px 0;
  }

  .section-title{
    font-size:28px;
  }

  .theme-card{
    padding:24px;
    border-radius:18px;
  }

  .icon-box{
    width:48px;
    height:48px;
    font-size:20px;
  }
}
/* =========================
   SECTION TEAM (FINAL CLEAN)
========================= */

/* SECTION */
.team-section{
  padding:80px 0;
  background:#f8fafc;
}

/* HEADER */
.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-header h2{
  font-size:32px;
  font-weight:800;
  margin-bottom:10px;
}

.section-header p{
  color:#64748b;
}

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

/* CARD */
.team-member{
  background:transparent;
  padding:20px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:all 0.35s ease;
}

/* HOVER CARD */
.team-member:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
  background:#befcdf;
}


/* =========================
   TEXT
========================= */

.team-member h4{
  margin-top:15px;
  font-size:16px;
  font-weight:700;
  transition:0.3s;
}

.team-member span{
  display:block;
  font-size:13px;
  color:#64748b;
  margin-bottom:8px;
  transition:0.3s;
}

.team-member p{
  font-size:13px;
  color:#475569;
  transition:0.3s;
}
.team-section{
  padding: 90px 0;
  background: #f8fafc;
}

/* TITLE */
.section-title{
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
}

.section-subtitle{
  color: #64748b;
  font-size: 15px;
}

/* =========================
   CARD FIX
========================= */
.team-member{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}



/* container lingkaran */
.profile-picture figure{
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* gambar */
.profile-picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay */
.profile-overlay{
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* social */
.profile-social{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 50%;
  background: rgba(0,0,0,0.45);

  opacity: 0;
  transition: 0.3s;
}



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

@media(max-width:900px){
  .team-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .team-grid{
    grid-template-columns:1fr;
  }
}
.profile-picture{
  width:210px;
  height:210px;
  margin:auto;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  margin-bottom: 15px;

  border:7px solid rgba(0,0,0,0.12);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
/* ===========================
   FOOTER FINAL
=========================== */
.footer{
  background:#0f172a;
  color:#cbd5e1;

  margin-top:60px;
  padding-top:60px;
}

.footer-wrap{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;

  padding-bottom:40px;
}

/* BRAND */
.footer-brand h3{
  color:#ffffff;
  font-size:24px;
  margin-bottom:16px;
}

.footer-brand p{
  line-height:1.8;
  color:#94a3b8;
  max-width:600px;
}

/* CONTACT */
.footer-contact{
  margin-top:18px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-contact a{
  color:#e2e8f0;
  text-decoration:none;

  transition:.25s;
}

.footer-contact a:hover{
  color:#38bdf8;
}

/* LINKS */
.footer-links h4{
  color:#ffffff;
  margin-bottom:18px;
  font-size:18px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links a{
  text-decoration:none;
  color:#cbd5e1;

  transition:.25s;
}

.footer-links a:hover{
  color:#38bdf8;
  transform:translateX(3px);
}

/* COPYRIGHT */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);

  text-align:center;

  padding:18px;

  color:#94a3b8;
  font-size:12px;
}

/* ===========================
   WHATSAPP FLOAT
=========================== */
.wa-float{
  position:fixed;

  right:22px;
  bottom:22px;

  width:58px;
  height:58px;

  border-radius:50%;

  background:#25D366;
  color:#fff;

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

  text-decoration:none;

  font-size:28px;

  box-shadow:0 15px 30px rgba(0,0,0,0.18);

  z-index:99999;

  transition:.3s ease;
}

.wa-float:hover{
  transform:translateY(-4px) scale(1.05);

  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

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

  .footer-wrap{
    grid-template-columns:1fr;
  }

  .footer{
    text-align:center;
  }

  .footer-contact{
    align-items:center;
  }

  .footer-links{
    align-items:center;
  }

}
/* =========================
   FLOATING WHATSAPP
========================= */

.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;

  width:60px;
  height:60px;

  border-radius:50%;

  background:#25D366;
  color:#fff;

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

  font-size:28px;
  text-decoration:none;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);

  z-index:999999;

  transition:0.3s ease;
}

.wa-float:hover{
  transform:translateY(-4px) scale(1.05);
  background:#1ebe5d;
}

/* MOBILE */
@media(max-width:600px){

  .wa-float{
    width:55px;
    height:55px;
    font-size:24px;

    right:15px;
    bottom:15px;
  }

}
/* ===========================
   JALUR SELEKSI MODERN (1 BARIS)
=========================== */
.jalur-section-modern{
  padding:90px 0;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
}

.jalur-heading{
  font-size:30px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.jalur-subtitle{
  font-size:15px;
  color:#6b7280;
  max-width:720px;
  margin:auto;
  line-height:1.7;
}

/* ===========================
   WRAPPER GRID RESPONSIVE
=========================== */
.jalur-scroll-wrap{
  overflow-x:hidden; /* hilangkan scroll horizontal */
  padding-bottom:10px;
}

.jalur-scroll-row{
  display:flex;
  flex-wrap:wrap; /* wajib agar bisa turun baris */
  gap:20px;
  justify-content:center;
}

/* ===========================
   CARD RESPONSIVE
=========================== */
.jalur-card-modern{
  background:#fff;
  border-radius:22px;
  border:1px solid #eef0f4;
  padding:28px;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  transition:0.4s ease;
  position:relative;
  overflow:hidden;

  flex:1 1 100%;
  max-width:100%;
}

/* ===========================
   TABLET = 2 KOLOM
=========================== */
@media(min-width:768px){
  .jalur-card-modern{
    flex:1 1 calc(50% - 20px);
    max-width:calc(50% - 20px);
  }
}

/* ===========================
   DESKTOP = 3 KOLOM
=========================== */
@media(min-width:992px){
  .jalur-card-modern{
    flex:1 1 calc(33.333% - 20px);
    max-width:calc(33.333% - 20px);
  }
}

@media(min-width:992px){
  .jalur-card-modern{
    flex:1; /* desktop jadi 3 kolom penuh */
  }
}

.jalur-card-modern::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
}

.jalur-card-modern:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(0,0,0,0.14);
}

.jalur-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.jalur-icon{
  width:50px;
  height:50px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.jalur-badge{
  display:inline-block;
  font-size:16px;
  font-weight:900;
  padding:6px 14px;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  margin-bottom:4px;
}

.jalur-title{
  font-size:19px;
  font-weight:900;
  margin:0;
  color:#111827;
}

.jalur-desc{
  font-size:15px;
  color:#6b7280;
  line-height:1.75;
  margin-bottom:14px;
}

.jalur-list{
  margin:0;
  padding-left:18px;
  font-size:14px;
  color:#374151;
  line-height:1.7;
}

.jalur-list li{
  margin-bottom:8px;
}

/* ===========================
   COLOR VARIANT
=========================== */
.jalur-primary::before{
  background:linear-gradient(90deg,#2563eb,#06b6d4);
}
.jalur-primary .jalur-icon{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
}

.jalur-success::before{
  background:linear-gradient(90deg,#16a34a,#22c55e);
}
.jalur-success .jalur-icon{
  background:linear-gradient(135deg,#16a34a,#22c55e);
}

.jalur-warning::before{
  background:linear-gradient(90deg,#f59e0b,#f97316);
}
.jalur-warning .jalur-icon{
  background:linear-gradient(135deg,#f59e0b,#f97316);
}
/* ===========================
   FLOATING BUTTON MODERN
=========================== */

/* FLOATING WHATSAPP (KIRI) */
.wa-float{
  position:fixed;
  bottom:18px;
  left:18px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  z-index:9999;
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
  transition:0.25s ease;
}

.wa-float svg{
  width:24px;
  height:24px;
}

.wa-float:hover{
  transform:translateY(-4px);
  filter:brightness(1.05);
}

/* SCROLL TOP (KANAN) - ELEGANT TAB */
.scroll-top-btn{
  position:fixed;
  bottom:22px;
  right:18px;

  width:42px;
  height:42px;

  border:none;
  border-radius:10px;
  background:#40cef7; /* biru */

  color:#fff;
  cursor:pointer;
  z-index:9999;

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

  box-shadow:0 12px 20px rgba(37,99,235,0.35);

  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:0.25s ease;
}

.scroll-top-btn svg{
  width:26px;
  height:26px;
}

.scroll-top-btn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top-btn:hover{
  transform:translateY(-4px);
  background:#1d4ed8;
}
/* ===========================
   HERO THEME SEKOLAH (BIRU-KUNING)
=========================== */

/* default */
.slide .hero-text h1,
.slide .hero-text h2{
  color:#ffffff;
}

.slide .hero-text p{
  color:rgba(255,255,255,0.88);
}

/* SLIDE 1 (Kuning sebagai highlight utama) */
.slide.theme-1 .hero-text h1{
  color:#ffffff;
}

.slide.theme-1 .hero-text h2{
  color:#facc15; /* kuning sekolah */
  font-weight:800;
}

.slide.theme-1 .hero-text p{
  color:rgba(255,255,255,0.92);
}

/* SLIDE 2 (Biru muda elegan) */
.slide.theme-2 .hero-text h1{
  color:#38bdf8; /* sky blue */
  font-weight:900;
}

.slide.theme-2 .hero-text p{
  color:#ffffff;
}

/* SLIDE 3 (Kuning emas premium) */
.slide.theme-3 .hero-text h1{
  color:#f5f7f5; /* gold */
  font-weight:900;
}

.slide.theme-3 .hero-text p{
  color:rgba(255,255,255,0.95);
}

/* SLIDE 4 (Biru tua elegan) */
.slide.theme-4 .hero-text h1{
  color:#13e127; /* blue */
  font-weight:900;
}

.slide.theme-4 .hero-text p{
  color:rgba(255,255,255,0.92);
}
/* ===========================
   HERO SLIDER FULLSCREEN
=========================== */
.hero-slider{
  position:relative;
  width:100%;
  height:90vh;
  overflow:hidden;
}

.slider{
  position:relative;
  width:100%;
  height:100%;
}

/* semua slide ditumpuk */
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  transform:translateX(100%);
  opacity:0;

  transition:transform 1.1s ease, opacity 1.1s ease;
}

/* slide aktif masuk dari kanan */
.slide.active{
  transform:translateX(0);
  opacity:1;
  z-index:2;
}

/* slide lama keluar ke kiri */
.slide.prev{
  transform:translateX(-100%);
  opacity:0;
  z-index:1;
}

/* gambar tetap stabil */
.slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
/* responsive */
@media(max-width:900px){
  .hero-slider{
    height:80vh;
  }

  .hero-slider .hero-text h1{
    font-size:30px;
  }

  .hero-slider .hero-text h2{
    font-size:25px;
  }

  .hero-slider .hero-text p{
    font-size:20px;
  }

  .btn-hero{
    width:100%;
    max-width:280px;
  }
}

/* ===========================
   NAV BLUR
=========================== */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  transition:0.3s ease;
}

/* saat scroll */
.navbar.scrolled{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  box-shadow:0 5px 25px rgba(0,0,0,0.08);
}

/* ===========================
   HERO SLIDER (SOFT OVERLAP)
=========================== */
.hero-slider{
  position:relative;
  width:100%;
  height:90vh;

  margin-top:-5px; /* 👈 ini sudah cukup nyenggol nav, tidak masuk dalam */
  overflow:hidden;
}
.hero-slider::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:90px;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    transparent
  );

  z-index:3;
  pointer-events:none;
}
.team-grid {
  text-align: center;
}

.team-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 20px 10px;
}

.team-item .profile-photo {
  width: 210px;
  height: 210px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden; /* INI KUNCI UTAMA */
  border: 4px solid rgba(99,102,241,0.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.team-item .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-item .badge-soft {
  font-size: 12px;
  color: #64748b;
  background: none;
  padding: 0;
}
/* ==========================
   PAGINATION SIMPLE TEXT
========================== */
.galeri-pagination{
  margin-top:25px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.page-btn{
  border:none;
  background:transparent;
  color:#111827;
  font-weight:600;
  cursor:pointer;
  font-size:15px;
  padding:6px 4px;
  transition:0.2s ease;
}

.page-btn:hover{
  color:#0f766e;
  text-decoration:underline;
}

.page-btn.active{
  color:#2563eb;
  font-weight:800;
  text-decoration:underline;
}

.page-btn.nav{
  color:#111827;
  font-weight:700;
}

.page-btn.nav:hover{
  color:#0f766e;
}
/* ==========================
   TEAM PAGINATION (SCOPED)
========================== */
.team-section .team-pagination{
  margin-top: 25px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* BUTTON KHUSUS TEAM (tidak ganggu galeri) */
.team-section .team-pagination .page-btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
  font-weight:600;
  color:#333;
  cursor:pointer;
  transition:all 0.3s ease;
  transform:translateY(0);
}

/* hover smooth + naik sedikit */
.team-section .team-pagination .page-btn:hover{
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(13,110,253,0.25);
}

/* active state */
.team-section .team-pagination .page-btn.active{
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
  box-shadow:0 4px 10px rgba(13,110,253,0.25);
}

/* disabled button */
.team-section .team-pagination .page-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* info text */
.team-section .team-pagination .page-info{
  font-size:14px;
  font-weight:600;
  color:#555;
}

/* ==========================
   SMOOTH TEAM TRANSITION
========================== */
.team-grid{
  transition:opacity 0.4s ease, transform 0.4s ease;
}

/* animasi saat reload data AJAX */
.team-grid.loading{
  opacity:0.3;
  transform:translateY(5px);
}
/* ==========================
   TEAM AUTO + SWIPE SLIDER
========================== */

.team-viewport{
  overflow:hidden;
  width:100%;
}

.team-track{
  display:flex;
  gap:16px;
  transition:transform 0.5s ease;
  will-change:transform;
  cursor:grab;
}

.team-track.dragging{
  cursor:grabbing;
  transition:none;
}

/* 3 card desktop */
.team-section .team-member{
  flex:0 0 calc((100% - 32px) / 3);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px){
  .team-section .team-member{
    flex:0 0 calc((100% - 16px) / 2);
  }
}

/* =========================
   HP FIX (INI YANG PENTING)
========================= */
@media (max-width: 768px){
  .team-section .team-member{
    flex:0 0 100%;
    max-width:100%;
  }

  .team-viewport,
  .team-slider{
    width:100%;
  }
}
.team-dots{
  margin-top:15px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.team-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ffffff;        /* dasar putih */
  border:1px solid #ccc;    /* biar kelihatan di background putih */
  cursor:pointer;
  transition:0.3s ease;
  opacity:0.8;
}

/* aktif berubah warna saja (tanpa glow) */
.team-dots span.active{
  opacity:1;
}

/* warna aktif bergantian */
.team-dots span.active:nth-child(1){ background:#ff4d4d; }
.team-dots span.active:nth-child(2){ background:#ffb84d; }
.team-dots span.active:nth-child(3){ background:#ffe84d; }
.team-dots span.active:nth-child(4){ background:#4dff88; }
.team-dots span.active:nth-child(5){ background:#4dd2ff; }
.team-dots span.active:nth-child(6){ background:#7a4dff; }
.team-dots span.active:nth-child(7){ background:#ff4df2; }

/* =========================
   QUOTES / MOTIVASI SECTION
========================= */
#motivasi{
  position:relative;
  padding:90px 0;
  color:#ffffff;
  font-family:'Inter', sans-serif;
  overflow:hidden;

  background:
    radial-gradient(circle at 15% 20%, rgba(34,197,94,0.45), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(14,165,233,0.25), transparent 60%),
    linear-gradient(180deg,#14532d,#166534,#052e16);
}

/* glow dekorasi */
#motivasi::before,
#motivasi::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.35;
  z-index:0;
}

#motivasi::before{
  top:-170px;
  left:-170px;
  background:rgba(34,197,94,0.75);
}

#motivasi::after{
  bottom:-190px;
  right:-160px;
  background:rgba(14,165,233,0.55);
}

/* container + noise */
#motivasi .container{
  position:relative;
  z-index:2;
}

#motivasi .container::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity:0.12;
  pointer-events:none;
  z-index:0;
}

/* pastikan isi tetap di atas noise */
#motivasi .container > *{
  position:relative;
  z-index:2;
}

/* title */
#motivasi h2{
  text-align:center;
  font-size:30px;
  margin-bottom:30px;
  color:#ffffff;
  font-family:'Playfair Display', serif;
  letter-spacing:1px;
}

/* wrapper */
.motivasi-box{
  max-width:800px;
  margin:auto;
  position:relative;
}

/* SOURCE TEXT (disembunyikan, hanya untuk JS) */
.motivasi-item{
  display:none;
}

/* ===========================
   MOTIVASI OUTPUT BOX (FINAL)
=========================== */
#typingText{
  font-size:18px;
  line-height:1.6;
  max-width:750px;
  margin:0 auto;
  padding:28px 32px;
  min-height:120px;

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

  color:#fff;

  border-radius:18px;
  border:1px solid rgba(255,255,255,0.16);

  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);

  box-shadow:0 18px 45px rgba(0,0,0,0.25);

  transition:0.45s ease;
  position:relative;
  overflow:hidden;
}

/* fade out */
#typingText.fade-out{
  opacity:0;
  transform:translateY(10px) scale(0.98);
}

/* fade in (untuk mode fade) */
#typingText.fade-in{
  animation:fadeInMotivasi 0.6s ease;
}

@keyframes fadeInMotivasi{
  from{
    opacity:0;
    transform:translateY(10px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* anim masuk mode slide (opsional kalau mau dipakai) */
#typingText.slide-in{
  animation:slideIn 0.7s ease;
}

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

/* cursor blink */
.typing-cursor{
  display:inline-block;
  margin-left:6px;
  opacity:0.8;
  animation:blink 0.8s infinite;
}

@keyframes blink{
  50%{ opacity:0; }
}

/* quote pop mode */
.quote-pop{
  font-weight:900;
  font-style:italic;
  letter-spacing:0.2px;
}

/* ===========================
   STYLE 1: GLASS PREMIUM
=========================== */
#typingText.style-glass{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  text-align:center;
  justify-content:center;
}

/* ===========================
   STYLE 2: QUOTE ELEGAN
=========================== */
#typingText.style-quote{
  text-align:left;
  justify-content:flex-start;
  font-style:italic;

  background:rgba(0,0,0,0.22);
  border-left:5px solid rgba(34,197,94,0.95);
  padding-left:28px;
}

#typingText.style-quote::before{
  content:"“";
  position:absolute;
  top:8px;
  left:16px;
  font-size:58px;
  font-weight:900;
  opacity:0.22;
}

/* ===========================
   STYLE 3: CHAT BUBBLE
=========================== */
#typingText.style-bubble{
  text-align:left;
  justify-content:flex-start;

  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:18px;
}

#typingText.style-bubble::after{
  content:"";
  position:absolute;
  bottom:-12px;
  left:45px;
  width:26px;
  height:26px;

  background:rgba(255,255,255,0.12);
  border-left:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);

  transform:rotate(45deg);
}

/* ===========================
   STYLE 4: GLOW BORDER PREMIUM
=========================== */
#typingText.style-glow{
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  box-shadow:
    0 20px 55px rgba(0,0,0,0.30),
    0 0 35px rgba(34,197,94,0.22);
}
/* ===========================
   EXTRA FADE LEFT / RIGHT
=========================== */
#typingText.fade-left{
  animation:fadeLeft 0.7s ease;
}

@keyframes fadeLeft{
  from{
    opacity:0;
    transform:translateX(-25px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

#typingText.fade-right{
  animation:fadeRight 0.7s ease;
}

@keyframes fadeRight{
  from{
    opacity:0;
    transform:translateX(25px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

/* ===========================
   HERO MAP MODERN
=========================== */
.map-hero{
  position:relative;
  width:100%;
  height:500px;
  overflow:hidden;
}

/* MAP FULL BACKGROUND */
.map-hero iframe{
  width:100%;
  height:100%;
  border:0;
  filter: grayscale(0.1) contrast(1.05);
}

/* OVERLAY INFO */
.map-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(255,255,255,0.92);
  padding:25px 30px;
  border-radius:16px;
  text-align:center;
  max-width:420px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* TEXT */
.map-overlay h2{
  font-size:22px;
  margin-bottom:8px;
  color:#0b1220;
}

.map-overlay p{
  font-size:14px;
  color:#555;
  margin-bottom:15px;
  line-height:1.5;
}

/* BUTTON */
.map-btn{
  display:inline-block;
  padding:10px 16px;
  background:#0f766e;
  color:white;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  transition:0.2s ease;
}

.map-btn:hover{
  background:#0b5e58;
}

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

  .map-hero{
    height:420px;
  }

  /* ubah overlay dari tengah ke bawah */
  .map-overlay{
    top:auto;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:none;
    padding:16px;
  }

  .map-overlay h2{
    font-size:16px;
    margin-bottom:6px;
  }

  .map-overlay p{
    font-size:12px;
    margin-bottom:10px;
  }

  .map-btn{
    font-size:13px;
    padding:8px 12px;
  }
}
.section{
  padding:40px 0;
}

.map-hero{
  margin-bottom:40px;
}

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

  .hero-btns{
    flex-direction: column;
    align-items: center; /* jangan stretch */
    gap: 10px;
  }

  .hero-btns .btn{
    width: auto;          /* ini kunci */
    min-width: 160px;     /* biar tetap enak dilihat */
    max-width: 260px;

    height: 42px;
    font-size: 14px;
    padding: 0 16px;
  }

  .hero-btns .btn-primary,
  .hero-btns .btn-outline{
    border-width: 2px;
  }
}

/* ===========================
   VIDEO SECTION
=========================== */
.video-section{
  padding:50px 0;
  background:#f8fafc;
}

.video-header{
  text-align:center;
  margin-bottom:35px;
}

.video-header h2{
  font-size:32px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.video-header p{
  font-size:16px;
  color:#6b7280;
}

.video-box{
  max-width:900px;
  margin:auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.video-box iframe{
  width:100%;
  height:500px;
  display:block;
}

/* responsive hp */
@media(max-width:768px){
  .video-box iframe{
    height:240px;
  }
}