/* ============================================================
   BLCI EDUCATION — MAIN STYLESHEET
   ============================================================ */

/* ----- CSS Variables ----- */
:root {
  --purple:       #342C87;
  --purple-dark:  #26206A;
  --purple-light: #4A42AA;
  --teal:         #fcb103;
  --sky:          #2cc6ff;
  --sky-soft:     rgba(44,198,255,0.14);
  --sky-ink:      #006080;
  --cream:        #FAFAF7;
  --white:        #FFFFFF;
  --offwhite:     #F4F2ED;
  --border:       rgba(0,0,0,0.07);
  --text:         #1A1828;
  --gray:         #6B7280;
  --gray2:        #9CA3AF;
}

/* ----- Reset & Base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ----- Typography ----- */
h1 {
  font-weight: 700;
  font-size: var(--fs-h1);
  letter-spacing: -2px;
  line-height: 1.03;
}
h2 {
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -1.5px;
  line-height: 1.08;
}
h3 { font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; }
h4 { font-weight: 700; font-size: var(--fs-h5); line-height: 1.4; }

.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

/* ----- Keyframe Animations ----- */
@keyframes floatCard   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-8px)} }
@keyframes floatY      { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-12px)} }
@keyframes ringPulse   { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.03)} }
@keyframes rotateBadge { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulseDot    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.75)} }
@keyframes gradientDrift{
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes floatCardAlt { 0%,100%{transform:translateY(-8px)} 50%{transform:translateY(0)} }

/* ----- Scroll Reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }


/* ============================================================
   NAVIGATION
   ============================================================ */
#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 76px;
  z-index: 1000;
  background: rgba(250,250,247,0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
#mainNav.scrolled {
  box-shadow: 0 4px 32px rgba(52,44,135,0.12);
}

.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  gap: 16px;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img {
  height: 50px;
  width: auto;
  display: block;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-links > li { position: relative; }

.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 10px; right: 10px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 2px;
}
.nav-links > li > a:hover       { color: var(--purple); }
.nav-links > li > a:hover::after{ transform: scaleX(1); }

/* Arrow on items with dropdown */
.nav-arrow {
  width: 12px; height: 12px;
  opacity: 0.5;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-links > li:hover .nav-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(52,44,135,0.15);
  border: 1px solid var(--border);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  list-style: none;
  z-index: 200;
}
.nav-links > li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li a {
  display: block;
  padding: 8px 14px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gray);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown li a:hover {
  background: rgba(52,44,135,0.05);
  color: var(--purple);
}

/* Nav Right */
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.btn-konsultasi {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid rgba(52,44,135,0.2);
  color: var(--purple);
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-konsultasi:hover { background: rgba(52,44,135,0.06); border-color: var(--purple); }

.btn-nav-wa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  background: var(--purple);
  color: white;
  border-radius: 100px;
  font-size: var(--fs-tiny); font-weight: 700;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-nav-wa:hover { background: var(--purple-dark); transform: translateY(-1px); }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--purple);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Mobile Menu */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 76px; left: 0; right: 0;
  background: rgba(250,250,247,0.98);
  backdrop-filter: blur(24px);
  padding: 16px 24px 32px;
  border-bottom: 1px solid var(--border);
  z-index: 999;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-item {
  padding: 12px 0;
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-mobile-item:last-child { border-bottom: none; }
.nav-mobile-sub {
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
}
.nav-mobile-sub a {
  display: block;
  padding: 6px 0;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--gray);
}


/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: calc(100vh - 64px);
  background: var(--purple);
  padding-top: 76px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ============================================================
   FULL-SCREEN HERO SLIDESHOW
   Rotating background images + rotating headline.
   ============================================================ */
#hero.hero-slideshow { background: #332D88; }

/* Photo on the right 60%; solid blue panel on the left 40% (no gradient). */
.hero-bg-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; z-index: 0; }
.hero-bg-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-bg-slide.active { opacity: 1; }

/* Uniform light tint over the photo only — hard edge at the 46% seam, no gradient. */
.hero-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 40%; z-index: 1;
  background: rgba(20,12,70,0.15);
}

.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  /* Left-aligned to the viewport so the text stays inside the 30% blue panel
     at any screen width (a centered box would drift over the image on wide screens). */
  margin: 0;
  padding: 0 64px;     /* match .nav-inner padding */
}

/* Rotating headline — slides stacked and cross-faded */
.hero-headlines {
  position: relative;
  /* Reserves room for the tallest headline (up to 3 lines) so rotating slides
     never overlap the subheading. Fixed px — not vh — so the gap on shorter
     slides stays small and constant instead of ballooning on large screens. */
  min-height: 190px;   /* fixed reserve (fits the tallest slide) so the buttons never move */
  margin-bottom: 16px;
  max-width: calc(40vw - 96px);   /* keep the headline inside the 40% blue panel */
}
.hero-headline {
  position: absolute; bottom: 0; left: 0; right: 0;   /* bottom-anchored: sits just above the subheading */
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -1.5px;
  max-width: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity .5s ease;   /* cross-fade in place, no vertical movement */
}
.hero-headline.active { opacity: 1; }

/* Inline headline styles: *teal* and _outline_ */
.hero-headline .hl-teal { color: var(--teal); }
.hero-headline .hl-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--teal);
}

/* Rotating subheading — cross-fades in sync with the headline */
.hero-subs {
  position: relative;
  min-height: 120px;   /* fixed reserve (fits the tallest slide) so the buttons never move */
  max-width: calc(40vw - 96px);
  margin-bottom: 24px;
}
.hero-slideshow .hero-sub {
  position: absolute; top: 0; left: 0; right: 0;
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-lead); line-height: 1.6;
  max-width: 100%;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity .5s ease;   /* cross-fade in place, no vertical movement */
}
.hero-slideshow .hero-sub.active { opacity: 1; }
.hero-slideshow .hstat-label { color: rgba(255,255,255,0.6); }

/* Slide dots */
.hero-slide-dots {
  position: absolute; z-index: 3;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.hero-dot {
  width: 10px; height: 10px;
  padding: 0; border: none; cursor: pointer;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background .3s ease, width .3s ease, border-radius .3s ease;
}
.hero-dot.active { background: var(--teal); width: 30px; border-radius: 5px; }
.hero-dot:hover { background: rgba(255,255,255,0.7); }

/* ---- Hero floating cards + sparkles + scroll cue (modern hero styling) ---- */
.hero-cards {
  position: absolute; inset: 0; z-index: 3;
  max-width: 1440px; margin: 0 auto;
  padding: 0 64px;
  pointer-events: none;            /* decorative — never block the slideshow */
}
.hcard {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(10,6,40,0.28);
  color: var(--purple);
}
/* Stat card */
.hcard-stat {
  top: 30%; right: 30%;
  padding: 18px 26px; text-align: center;
}
.hcard-num {
  font-size: var(--fs-num); font-weight: 700; line-height: 1; color: var(--purple);
}
.hcard-num span { color: var(--teal); }
.hcard-stat-label { font-size: var(--fs-small); color: var(--gray, #6B7280); margin-top: 4px; }
.hcard-stars { display: flex; justify-content: center; gap: 3px; margin-top: 8px; color: var(--teal); }
.hcard-stars svg { width: 15px; height: 15px; }
/* Feature cards */
.hcard-feature {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 14px 14px;
}
.hcard-a { top: 24%; right: 3%; }
.hcard-b { top: 64%; right: 7%; }
.hcard-ic {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252,177,3,0.16); color: var(--teal);
}
.hcard-ic svg { width: 22px; height: 22px; }
.hcard-txt { display: flex; flex-direction: column; line-height: 1.2; }
.hcard-txt strong { font-size: var(--fs-body); font-weight: 700; color: var(--purple); }
.hcard-txt span { font-size: var(--fs-small); color: var(--gray, #6B7280); }
/* Sparkles */
.hero-spark { position: absolute; color: var(--teal); opacity: 0.95; }
.hero-spark svg { width: 100%; height: 100%; display: block; }
.hero-spark-1 { width: 30px; height: 30px; top: 20%; right: 34%; }              /* pop, above the 100+ card */
.hero-spark-2 { width: 26px; height: 26px; top: 60%; right: 22%; opacity: 0.85; color: var(--sky); } /* twinkle, lower over photo */

/* Hand-drawn script accent over the photo */
.hero-script {
  position: absolute; top: 46%; right: 8%;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 30px; font-weight: 700; line-height: 1.02;
  color: #fff; text-align: center;
  transform: rotate(-8deg);
  text-shadow: 0 2px 10px rgba(10,6,40,0.35);
  pointer-events: none;
}

/* Scroll cue (bottom, aligned with the text column) */
.hero-scrollcue-wrap {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 30px;
  max-width: 1440px; margin: 0 auto;
  padding: 0 64px;
  pointer-events: none;
}
.hero-scrollcue {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 14px; font-weight: 500;
}
.hero-scrollcue:hover { color: #fff; }
.hero-scrollcue-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal); color: var(--purple-dark, #140c46);
  display: flex; align-items: center; justify-content: center;
  animation: heroCueBounce 1.8s ease-in-out infinite;
}
.hero-scrollcue-arrow svg { width: 18px; height: 18px; }
@keyframes heroCueBounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero-scrollcue-arrow { animation: none; } }

/* Decorative rings */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-ring-1 {
  width: 600px; height: 600px;
  top: -120px; right: -120px;
  border: 64px solid rgba(252,177,3,0.06);
  animation: ringPulse 7s ease-in-out infinite;
}
.hero-ring-2 {
  width: 900px; height: 900px;
  top: -270px; right: -270px;
  border: 64px solid rgba(252,177,3,0.04);
  animation: ringPulse 7s ease-in-out infinite 1.5s;
}
.hero-ring-bl {
  width: 400px; height: 400px;
  bottom: -200px; left: -120px;
  border: 64px solid rgba(252,177,3,0.04);
  animation: ringPulse 7s ease-in-out infinite 3s;
}

/* Grid lines */
.hero-gridlines { position: absolute; inset: 0; pointer-events: none; }
.hero-gridline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(252,177,3,0.04);
}
.hero-gridline:nth-child(1) { top: 33%; }
.hero-gridline:nth-child(2) { top: 66%; }

/* Dot grid */
#hdots {
  position: absolute;
  top: 22%; right: 6%;
  display: grid;
  grid-template-columns: repeat(6, 14px);
  gap: 14px;
  pointer-events: none;
  z-index: 1;
}
.hdot {
  width: 3px; height: 3px;
  background: var(--teal);
  border-radius: 50%;
  opacity: 0.12;
}

/* Gradient mesh */
.hero-mesh {
  display: none;
}

/* ── Squiggly decorations (all sections) ──────────────────────── */

/* Hero — right edge, centred */
.hero-squiggly {
  position: absolute;
  right: -30px; top: 50%;
  transform: translateY(-50%);
  width: 140px; opacity: 0.22;
  pointer-events: none; z-index: 1;
}

/* About — left edge, flipped, top-third */
.about-squiggly {
  position: absolute;
  left: -55px; top: 25%;
  transform: scaleX(-1);
  width: 120px; opacity: 0.09;
  pointer-events: none;
}

/* Programs — right edge, rotated, bottom */
.programs-squiggly {
  position: absolute;
  right: -50px; bottom: 60px;
  transform: rotate(20deg);
  width: 100px; opacity: 0.09;
  pointer-events: none;
}

/* Gallery — left edge, flipped & rotated, mid */
.gal-squiggly {
  position: absolute;
  left: -45px; top: 40%;
  transform: translateY(-50%) scaleX(-1) rotate(-10deg);
  width: 110px; opacity: 0.13;
  pointer-events: none;
}

/* Why — right edge, upside-down, upper */
.why-squiggly {
  position: absolute;
  right: -50px; top: 15%;
  transform: rotate(180deg);
  width: 115px; opacity: 0.1;
  pointer-events: none;
}

/* Testimonials — right edge, slight tilt, bottom */
.testi-squiggly {
  position: absolute;
  right: -45px; bottom: 40px;
  transform: rotate(10deg);
  width: 100px; opacity: 0.08;
  pointer-events: none;
}

/* CTA — left and right, mirrored pair */
.cta-squiggly-l {
  position: absolute;
  left: -40px; top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 120px; opacity: 0.18;
  pointer-events: none;
}
.cta-squiggly-r {
  position: absolute;
  right: -40px; top: 50%;
  transform: translateY(-50%);
  width: 120px; opacity: 0.18;
  pointer-events: none;
}

/* Shared img rule */
.hero-squiggly img, .about-squiggly img, .programs-squiggly img,
.gal-squiggly img, .why-squiggly img, .testi-squiggly img,
.cta-squiggly-l img, .cta-squiggly-r img {
  width: 100%; display: block;
}

/* Hero Layout */
.hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 40px 100px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero Left */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(252,177,3,0.3);
  border-radius: 100px;
  background: rgba(252,177,3,0.06);
  color: var(--teal);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}
.eyebrow-dot {
  width: 5px; height: 5px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-h1 { color: white; margin-bottom: 20px; font-size: clamp(24px, 5.8vw, 60px); }
.hero-h1 .teal    { color: var(--sky); }
.hero-h1 .outline {
  -webkit-text-stroke: 2px var(--teal);
  color: transparent;
}

.hero-sub {
  color: rgba(255,255,255,0.3);
  font-size: var(--fs-lead);
  line-height: 1.8;
  max-width: 460px;
  margin-bottom: 36px;
}

.hero-buttons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 52px; max-width: calc(40vw - 96px); }

/* Secondary hero action as a plain text link with a → arrow */
.hero-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 600; font-size: var(--fs-btn);
  padding: 6px 2px;
}
.hero-textlink svg { width: 18px; height: 18px; }
.hero-textlink:hover { color: var(--teal); }

.btn-teal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--teal);
  color: var(--purple-dark);
  border-radius: 100px;
  font-size: var(--fs-btn); font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-teal:hover { box-shadow: 0 8px 24px rgba(252,177,3,0.3); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: white;
  border-radius: 100px;
  font-size: var(--fs-btn); font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }

/* Hero Stats */
.hero-stats { display: flex; }
.hero-stat {
  display: flex; flex-direction: column;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child  { border-right: none; }

.hstat-n {
  font-size: 28px; font-weight: 800;
  color: white; line-height: 1;
  display: flex; align-items: center; gap: 1px;
}
.hstat-plus { color: var(--teal); }
.hstat-label { font-size: 11px; color: var(--gray2); margin-top: 4px; }

/* Hero Right */
.hero-right { display: flex; justify-content: center; align-items: center; }

.hero-photo-area {
  position: relative;
  width: 100%;
}

/* Hero Carousel */
.hero-carousel {
  width: 100%;
  height: clamp(460px, 68vh, 620px);
  border-radius: 24px;
  border: 1px solid rgba(252,177,3,0.2);
  overflow: hidden;
  position: relative;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.carousel-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* Prev / Next buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 22px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.carousel-btn:hover {
  background: rgba(252,177,3,0.2);
  transform: translateY(-50%) scale(1.1);
}
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.carousel-dot.active {
  background: var(--teal);
  transform: scale(1.3);
}

.photo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
.photo-icon { opacity: 0.15; }
.photo-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.hero-ring-acc {
  position: absolute;
  top: -16px; right: -16px;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 14px solid var(--teal);
  opacity: 0.25;
}

/* Float Cards */
.float-card {
  position: absolute;
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  min-width: 180px;
  z-index: 5;
}
.float-card-1 {
  bottom: -16px; left: -48px;
  animation: floatCard 4s ease-in-out infinite;
}
.float-card-2 {
  top: 48px; right: -48px;
  animation: floatCardAlt 4s ease-in-out infinite;
}
.fc-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gray); margin-bottom: 4px;
}
.fc-num {
  font-size: 22px; font-weight: 800;
  color: var(--purple); line-height: 1;
}
.fc-sub { font-size: 10px; color: var(--gray); margin-top: 3px; }




/* ============================================================
   ABOUT
   ============================================================ */
#about {
  background: var(--cream);
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
}
.section-inner { max-width: 1320px; margin: 0 auto; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-eyebrow { color: var(--purple); }
.about-h2 { color: var(--text); margin-bottom: 24px; }
.about-body { color: var(--gray); line-height: 1.9; font-size: var(--fs-body); margin-bottom: 16px; }
.about-body:last-of-type { margin-bottom: 0; }

/* About Stats */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
}
.stat-tile {
  background: white;
  border-radius: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(52,44,135,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.stn-wrap { display: flex; align-items: flex-end; gap: 2px; line-height: 1; }
.stn {
  font-size: var(--fs-num); font-weight: 700;
  color: var(--purple); line-height: 1;
}
.stat-tile:nth-child(2) .stn { color: #fcb103; }
.stn-plus { font-size: 24px; font-weight: 700; color: var(--teal); line-height: 1.15; }
.stat-lbl { font-size: var(--fs-tiny); color: var(--gray); margin-top: 6px; }

/* Photo Stack */
.photo-stack {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: 440px;
}
.stack-photo {
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s, box-shadow 0.35s;
  cursor: pointer;
  position: relative; /* grid item, not absolute */
}
.stack-photo-1 {
  grid-column: 1;
  grid-row: 1 / 3;      /* spans both rows — tall left photo */
  transform: rotate(-2deg);
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.stack-photo-2 {
  grid-column: 2;
  grid-row: 1;           /* top-right */
  transform: rotate(2deg);
  z-index: 3;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.stack-photo-3 {
  grid-column: 2;
  grid-row: 2;           /* bottom-right */
  transform: rotate(1deg);
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.stack-inner {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stack-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  display: flex; align-items: flex-end;
  padding: 16px;
}
.stack-caption {
  font-size: var(--fs-tiny); font-weight: 700;
  color: white; letter-spacing: 1px;
  text-transform: uppercase;
}

.year-badge {
  position: absolute;
  top: -24px; right: 0;
  width: 72px; height: 72px;
  background: var(--teal);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10;
  animation: rotateBadge 20s linear infinite;
  box-shadow: 0 4px 16px rgba(252,177,3,0.4);
}
.year-badge-yr   { font-size: 14px; font-weight: 800; color: var(--purple-dark); line-height: 1; }
.year-badge-txt  { font-size: 7px;  font-weight: 700; color: var(--purple-dark); text-transform: uppercase; letter-spacing: 1.5px; }

/* About decorative */
.about-ring {
  position: absolute;
  bottom: -220px; right: -220px;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 80px solid rgba(52,44,135,0.04);
  pointer-events: none;
}


/* ============================================================
   PROGRAMS
   ============================================================ */
#programs {
  background: var(--white);
  padding: 120px 40px;
  position: relative;
}
.programs-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}
.programs-header .eyebrow { color: var(--purple); }
.programs-header h2 { color: var(--text); margin-bottom: 14px; }
.programs-lead { color: var(--gray); font-size: 15px; }

.programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
}

.program-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: white;
  transition: transform 0.3s, box-shadow 0.3s;
}

.prog-photo {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pcard-1 .prog-photo { background: #4a4a52; }
.pcard-2 .prog-photo { background: #4a4a52; }
.pcard-3 .prog-photo { background: #4a4a52; }

.prog-ghost-num {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 64px; font-weight: 900;
  color: white; opacity: 0.07;
  line-height: 1; pointer-events: none;
}
.prog-badge {
  position: absolute;
  bottom: 16px; left: 16px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
}
.badge-purple { background: rgba(52,44,135,0.9); color: white; }
.badge-teal   { background: var(--teal); color: var(--purple-dark); }
.badge-light  { background: rgba(74,66,170,0.9); color: white; }

.prog-overlay {
  position: absolute; inset: 0;
  background: rgba(38,32,106,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.prog-overlay-lnk {
  color: var(--teal);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.5px;
}

.prog-body { padding: 28px; }
.prog-body h3 { color: var(--text); margin-bottom: 10px; font-size: 19px; }
.prog-body p  { color: var(--gray); font-size: 14px; line-height: 1.75; margin-bottom: 20px; }

.prog-features { margin-bottom: 20px; }
.prog-feat-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--gray);
  margin-bottom: 8px;
}
.feat-check {
  width: 18px; height: 18px; flex-shrink: 0;
  background: var(--teal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.feat-check svg { display: block; }

.prog-link {
  font-size: 13px; font-weight: 700;
  color: var(--purple);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
}
.prog-link:hover { gap: 10px; }


/* ============================================================
   GALLERY
   ============================================================ */
#gallery {
  background: var(--purple);
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}
.gallery-mesh { display: none; }
.gal-ring-tr {
  position: absolute; top: -150px; right: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 80px solid rgba(252,177,3,0.04);
  animation: ringPulse 9s ease-in-out infinite;
}
.gal-ring-bl {
  position: absolute; bottom: -200px; left: -150px;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 80px solid rgba(252,177,3,0.04);
  animation: ringPulse 9s ease-in-out infinite 2s;
}

.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 40px;
  margin-bottom: 48px;
  position: relative; z-index: 2;
  max-width: 1320px;
  margin-left: auto; margin-right: auto;
}
.gallery-hl .eyebrow { color: rgba(252,177,3,0.55); }
.gallery-hl h2 { color: white; margin-bottom: 8px; }
.gallery-hl h2 span { color: var(--teal); }
.gallery-hl p { color: var(--gray2); font-size: 14px; }
.gal-all-link {
  color: var(--teal); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  transition: gap 0.2s;
}
.gal-all-link:hover { gap: 10px; }

.gallery-scroll {
  display: flex;
  gap: 16px;
  justify-content: center;
  overflow-x: auto;
  padding: 0 40px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative; z-index: 2;
}
.gallery-scroll::-webkit-scrollbar { display: none; }

.gal-col { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }

.gal-item {
  position: relative; overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.3s, outline 0.2s;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  outline: 2px solid transparent;
}

.gal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.gal-year    { font-size: 10px; font-weight: 800; color: var(--teal); letter-spacing: 2px; }
.gal-caption { font-size: 11px; font-weight: 600; color: white; margin-top: 3px; line-height: 1.4; }


/* ============================================================
   WHY BLCI
   ============================================================ */
#why {
  background: var(--offwhite);
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
}
.why-ring {
  position: absolute; top: -180px; right: -180px;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 80px solid rgba(52,44,135,0.04);
  pointer-events: none;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}

.why-header { margin-bottom: 48px; }
.why-header .eyebrow { color: var(--purple); }
.why-header h2 { color: var(--text); }

/* Reasons */
.reason-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  cursor: default;
  align-items: flex-start;
}
.reason-item:first-child { padding-top: 0; }

.reason-num {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1.5px solid rgba(52,44,135,0.25);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--purple);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: 1px;
}

.reason-content h4 { color: var(--text); margin-bottom: 4px; font-size: 15px; }
.reason-content p  { font-size: 13px; color: var(--gray); line-height: 1.75; }

/* Why Right */
.why-right {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 14px;
}

.why-card {
  background: white;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}
.why-card-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gray2); margin-bottom: 14px;
}

.city-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.city-chip  {
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
}
.chip-active   { background: var(--purple); color: white; }
.chip-inactive { background: rgba(52,44,135,0.07); color: var(--gray); }

.prog-list { display: flex; flex-direction: column; gap: 10px; }
.prog-list-item {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.prog-list-name { font-size: 12px; color: var(--text); font-weight: 500; flex: 1; line-height: 1.4; }

.pill         { padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.pill-purple  { background: rgba(52,44,135,0.1); color: var(--purple); }
.pill-teal    { background: rgba(252,177,3,0.12); color: #fcb103; }
.pill-new     { background: var(--teal); color: var(--purple-dark); }

/* WhatsApp Card */
.wa-card {
  background: #0d5c38;
  border-radius: 18px; padding: 22px;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; gap: 4px;
}
.wa-card-title { font-size: 15px; font-weight: 700; color: white; }
.wa-card-sub   { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.wa-btn-row    { display: flex; align-items: center; gap: 12px; }
.wa-circle-btn {
  width: 44px; height: 44px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.wa-circle-btn:hover { transform: scale(1.1); }
.wa-hint { font-size: 11px; color: rgba(255,255,255,0.45); }


/* ============================================================
   TESTIMONIALS
   ============================================================ */
#testimonials {
  background: var(--white);
  padding: 120px 40px;
}
.testi-header {
  text-align: center; margin-bottom: 60px;
}
.testi-header .eyebrow { color: var(--purple); }
.testi-header h2 { color: var(--text); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
}

.testi-card {
  background: white;
  border-radius: 22px;
  padding: 32px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--purple);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.testi-card:nth-child(2) { border-top-color: var(--teal); }
.testi-card:nth-child(3) { border-top-color: var(--purple-light); }

.testi-quote {
  position: absolute;
  top: 16px; right: 24px;
  font-size: 80px;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(52,44,135,0.08);
  line-height: 1;
  pointer-events: none;
}
.testi-stars   { color: var(--teal); font-size: 15px; letter-spacing: 3px; margin-bottom: 16px; }
.testi-body    { color: var(--gray); font-size: 14px; line-height: 1.85; margin-bottom: 24px; font-style: italic; }
.testi-author  { display: flex; align-items: center; gap: 12px; }
.testi-avatar  {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; color: white; flex-shrink: 0;
}
.av-purple { background: var(--purple); }
.av-teal   { background: #fcb103; }
.av-light  { background: var(--purple-light); }
.testi-name { font-weight: 700; font-size: 14px; color: var(--purple); }
.testi-role { font-size: 11px; color: var(--gray); line-height: 1.4; }


/* ============================================================
   FINAL CTA
   ============================================================ */
#cta {
  background: var(--purple);
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-ring-tr {
  position: absolute; top: -150px; right: -150px;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 80px solid rgba(252,177,3,0.04);
  pointer-events: none;
  animation: ringPulse 8s ease-in-out infinite;
}
.cta-ring-bl {
  position: absolute; bottom: -150px; left: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 80px solid rgba(252,177,3,0.04);
  pointer-events: none;
  animation: ringPulse 8s ease-in-out infinite 2s;
}
.cta-mesh { display: none; }

.cta-inner {
  position: relative; z-index: 2;
  max-width: 680px; margin: 0 auto;
}
.cta-inner h2        { color: white; margin-bottom: 16px; }
.cta-inner h2 span   { color: var(--teal); }
.cta-sub             { color: var(--gray2); font-size: 16px; margin-bottom: 40px; line-height: 1.8; }
.cta-buttons         { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: #25D366; color: white;
  border-radius: 100px; font-size: var(--fs-btn); font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.4); }

.btn-phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border: 1.5px solid rgba(255,255,255,0.3); color: white;
  border-radius: 100px; font-size: var(--fs-btn); font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.btn-phone:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }


/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: #07101F;
  padding: 80px 64px 32px;
}
.footer-inner { max-width: 1320px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo-icon {
  width: 40px; height: 40px;
  background: rgba(52,44,135,0.7);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 13px;
  position: relative;
}
.footer-logo-icon::after {
  content: '';
  position: absolute;
  bottom: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--teal);
  border-radius: 50%;
}
.footer-logo-name { font-weight: 800; font-size: var(--fs-body); color: rgba(255,255,255,0.7); letter-spacing: -0.5px; }
.footer-desc { color: rgba(255,255,255,0.3); font-size: var(--fs-small); line-height: 1.8; }

.footer-col-label {
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(252,177,3,0.45); margin-bottom: 16px;
}
.footer-links li { margin-bottom: 8px; }
.footer-links a  { font-size: var(--fs-small); color: rgba(255,255,255,0.3); transition: color 0.2s; }
.footer-links a:hover { color: var(--teal); }

.footer-contact-item {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: var(--fs-small); color: rgba(255,255,255,0.72);
  margin-bottom: 12px; line-height: 1.6;
}
.footer-contact-item a { color: rgba(255,255,255,0.72); transition: color .2s ease; }
.footer-contact-item a:hover { color: var(--teal); }
.footer-ci {
  flex-shrink: 0; margin-top: 1px;
  color: #fff;
  display: inline-flex;
}
.footer-ci svg { width: 18px; height: 18px; display: block; }

/* Social icons */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.footer-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.footer-social-icon:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }
.footer-social-icon svg { width: 18px; height: 18px; display: block; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-small); color: rgba(255,255,255,0.6);
  flex-wrap: wrap; gap: 12px;
}
.footer-copyright { font-weight: 600; }
.footer-legal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.7); transition: color .2s ease; }
.footer-legal a:hover { color: var(--teal); }
.footer-legal > span { color: rgba(255,255,255,0.3); }


/* ============================================================
   RESPONSIVE — max-width: 960px
   ============================================================ */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: 1fr 340px; gap: 48px; }
}

@media (max-width: 960px) {
  /* Nav */
  .nav-links, .btn-nav-wa, .btn-konsultasi { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 0 24px; }

  /* Hero (old two-column layout, unused by the slideshow) */
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 60px 24px 80px;
    gap: 36px;
  }
  .hero-right { display: flex; }
  .hero-carousel { height: 300px; }
  .float-card-1, .float-card-2 { display: none; }
  .hero-squiggly { display: none; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .hero-stat { border-right: none; padding: 0; }
  .hero-ring-1, .hero-ring-2, .hero-ring-bl { display: none; }

  /* Hero slideshow — full-screen photo, content centered so there is space
     between the nav and the headline, and the subheading sits close under it. */
  #hero.hero-slideshow { min-height: clamp(540px, 82svh, 720px); }
  .hero-content { padding: 0 24px; }
  /* Full-width text again on mobile (the 30% blue panel is desktop-only) */
  .hero-headlines { min-height: 104px; margin-bottom: 12px; max-width: 100%; }
  .hero-buttons { max-width: none; }
  .hero-slideshow .hero-headline { font-size: var(--fs-h1); }
  .hero-slideshow .hero-sub { font-size: var(--fs-lead); line-height: 1.55; }
  .hero-subs      { min-height: 72px; margin-bottom: 22px; max-width: 100%; }   /* fits the tallest mobile subheading at 14px */
  .hero-cards, .hero-scrollcue-wrap { display: none; }         /* floating cards/scroll cue: desktop only */
  /* Full-bleed photo on mobile (no half-split); darker overlay for text legibility */
  .hero-bg-slides { left: 0; }
  .hero-overlay { left: 0; background: rgba(51,45,136,0.72); }

  /* About */
  #about { padding: 72px 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .photo-stack { display: none; }

  /* Programs */
  #programs { padding: 72px 24px; }
  .programs-grid { grid-template-columns: 1fr; }

  /* Gallery */
  #gallery { padding: 72px 0 60px; }
  .gallery-header { padding: 0 24px; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .gallery-scroll { padding: 0 24px 16px; }

  /* Why */
  #why { padding: 72px 24px; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .why-right { position: static; }

  /* Testimonials */
  #testimonials { padding: 72px 24px; }
  .testi-grid { grid-template-columns: 1fr; }

  /* CTA */
  #cta { padding: 72px 24px; }
  .about-squiggly, .programs-squiggly, .gal-squiggly,
  .why-squiggly, .testi-squiggly,
  .cta-squiggly-l, .cta-squiggly-r { display: none; }
  /* Footer */
  #footer { padding: 60px 24px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; align-items: center; }
}


/* ============================================================
   PAGE HERO (inner pages: Studi, Kursus, Achievement)
   The 140px top padding clears the fixed 76px nav.
   ============================================================ */
.page-hero {
  background: var(--purple);
  padding: 140px 40px 90px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero-mesh { display: none; }
.page-hero-rings {
  position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06); pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.page-hero .eyebrow { color: var(--teal); margin-bottom: 16px; display: block; }
.page-hero h1 {
  color: white; font-size: var(--fs-h1);
  font-weight: 700; line-height: 1.1; margin-bottom: 20px;
}
.page-hero h1 span { color: var(--sky); }
.page-hero p {
  color: rgba(255,255,255,0.72); font-size: var(--fs-lead);
  max-width: 560px; margin: 0 auto; line-height: 1.7;
}


/* ============================================================
   WORDPRESS ADMIN BAR FIX
   When logged in, WP shows a 32px admin bar at the top.
   Push the fixed nav below it so it doesn't get covered.
   (Has no effect for normal site visitors — only admins.)
   ============================================================ */
.admin-bar #mainNav { top: 32px; }
/* Admin bar also shifts the page down, so shorten the hero by its height too. */
.admin-bar #hero { min-height: calc(100vh - 64px - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar #mainNav { top: 46px; }
  .admin-bar #hero.hero-slideshow { min-height: calc(clamp(540px, 82svh, 720px) - 46px); }
}


/* ============================================================
   UNIVERSITY FILTER BAR (Studi di China)
   ============================================================ */
.filter-wrap { max-width: 100%; }

/* Search row: rounded pill input + teal circular button */
.filter-search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.filter-search-wrap { flex: 1; max-width: 560px; }
.filter-search-input {
  width: 100%;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid rgba(52,44,135,0.18);
  border-radius: 100px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.filter-search-input::placeholder { color: var(--gray); }
.filter-search-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(52,44,135,0.08);
}
.filter-search-btn {
  width: 52px; height: 52px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--teal);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.filter-search-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(252,177,3,0.4);
}

/* Collapsible filter controls */
.filter-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: var(--fs-btn);
  color: var(--text);
  padding: 6px 2px;
}
.filter-toggle-chev { transition: transform .35s ease; }
.filter-controls:not(.collapsed) .filter-toggle-chev { transform: rotate(90deg); }

/* The panel slides open to the right */
.filter-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  max-width: 1200px;
  opacity: 1;
  transform: translateX(0);
  transition: max-width .5s ease, opacity .35s ease, transform .45s ease;
}
.filter-controls.collapsed .filter-panel {
  max-width: 0;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}

.filter-group {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.filter-label {
  font-weight: 700; font-size: var(--fs-small); color: var(--text);
}
.filter-select {
  padding: 9px 34px 9px 14px;
  font-family: inherit; font-size: var(--fs-small); color: var(--text);
  background: #fff;
  border: 1.5px solid rgba(52,44,135,0.2);
  border-radius: 8px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23342C87' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* Blue hover on the filter dropdowns */
.filter-select:hover {
  border-color: #2563ff;
  background-color: rgba(37,99,255,0.07);
  box-shadow: 0 0 0 3px rgba(37,99,255,0.1);
}
.filter-select:focus {
  outline: none;
  border-color: #2563ff;
  box-shadow: 0 0 0 3px rgba(37,99,255,0.15);
}

.filter-count {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--gray);
  text-align: center;
}
.filter-count span { font-weight: 700; color: var(--purple); }

.uni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

@media (max-width: 700px) {
  .filter-controls { flex-wrap: wrap; align-items: flex-start; }
  .filter-controls.collapsed .filter-panel { max-width: 0; }
  .filter-panel { flex-direction: column; align-items: flex-start; gap: 12px; }
  .filter-controls:not(.collapsed) .filter-panel { max-height: 400px; }
  .filter-group { width: 100%; justify-content: space-between; }
  .filter-select { flex: 1; }
}


/* ============================================================
   UNIVERSITY CARDS
   ============================================================ */
.uni-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(52,44,135,0.1);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 14px rgba(52,44,135,0.06);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Card is clickable → subtle lift + teal edge on hover */
.uni-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(52,44,135,0.13);
  border-color: rgba(252,177,3,0.7);
}

/* Header: logo left, name right */
.uni-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(52,44,135,0.08);
}
.uni-logo {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.uni-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.uni-head-text { min-width: 0; }
/* University name = the biggest, boldest text on the card */
.uni-name {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--purple);
  line-height: 1.25;
}
.uni-name-zh { font-size: var(--fs-small); color: var(--gray); margin-top: 2px; }

/* Details */
.uni-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}
.uni-detail { display: flex; flex-direction: column; gap: 2px; }
.uni-detail > span { font-size: var(--fs-tiny); font-weight: 700; color: var(--gray); }
.uni-detail > strong { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.uni-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.uni-tag {
  font-size: var(--fs-tiny); font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
  background: rgba(52,44,135,0.08); color: var(--purple);
}

/* Footer: location at the bottom + CTA */
.uni-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(52,44,135,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.uni-loc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-small); font-weight: 600; color: var(--text);
}
.uni-loc svg { color: var(--teal); flex-shrink: 0; }
.uni-detail-link {
  font-size: var(--fs-small); font-weight: 700; color: var(--purple);
  white-space: nowrap;
}
.uni-card:hover .uni-detail-link { color: #fcb103; }


/* ============================================================
   SINGLE UNIVERSITY PAGE
   ============================================================ */
.uni-single-hero {
  background: var(--purple);
  padding: 130px 40px 60px;
  position: relative;
}
.uni-single-hero-inner { max-width: 1000px; margin: 0 auto; }
.uni-back {
  display: inline-block;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: var(--fs-small);
  margin-bottom: 28px;
  transition: color .2s ease;
}
.uni-back:hover { color: var(--teal); }

/* Breadcrumb trail over the banner */
.uni-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: var(--fs-small);
}
.uni-crumbs a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color .2s ease;
}
.uni-crumbs a:hover { color: var(--teal); }
.uni-crumbs > span[aria-hidden] { color: rgba(255,255,255,0.4); }
.uni-crumbs .current { color: #fff; font-weight: 700; }
.uni-single-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.uni-single-logo {
  width: 90px; height: 90px; flex-shrink: 0;
  background: #fff; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.uni-single-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.uni-single-head h1 {
  color: #fff; font-size: var(--fs-h1);
  font-weight: 700; line-height: 1.1; margin: 0;
}
.uni-single-zh { color: var(--teal); font-size: var(--fs-lead); margin-top: 6px; }
.uni-single-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 14px;
  color: rgba(255,255,255,0.85); font-size: var(--fs-body);
}

.uni-single-body { padding: 60px 40px 90px; background: var(--bg-cream); }
.uni-single-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 320px; gap: 40px;
  align-items: start;
}
.uni-single-content {
  --fs-university-body: var(--fs-body);   /* same as site body text: 16px laptop / 14px phone */
  background: #fff; border-radius: 16px; padding: 36px;
  box-shadow: 0 2px 14px rgba(52,44,135,0.06);
  font-size: var(--fs-university-body); line-height: 1.8; color: var(--gray);
}
.uni-single-content .uni-lead {
  font-size: inherit; font-weight: 400; color: var(--gray);
  line-height: inherit; margin: 0 0 20px;
}
.uni-single-content h2 { font-size: var(--fs-h3); margin: 28px 0 14px; color: var(--text); }
.uni-single-content h3 { font-size: var(--fs-h4); margin: 24px 0 10px; color: var(--text); }
.uni-single-content p { margin: 0 0 20px; }
.uni-single-content p:last-child { margin-bottom: 0; }
.uni-single-content strong { color: var(--text); }
.uni-single-content a { color: var(--purple); text-decoration: underline; }
.uni-single-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.uni-single-content ul, .uni-single-content ol { margin: 0 0 20px 20px; }
.uni-single-content li { margin-bottom: 8px; }

.uni-single-side { position: sticky; top: 100px; }
.uni-facts {
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 2px 14px rgba(52,44,135,0.06);
}
.uni-facts-title {
  font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gray); margin-bottom: 16px;
}
.uni-fact {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(52,44,135,0.07);
  font-size: var(--fs-small);
}
.uni-fact span { color: var(--gray); }
.uni-fact strong { color: var(--purple); text-align: right; }
.uni-fact-majors { padding: 12px 0 4px; }
.uni-fact-majors > span { color: var(--gray); font-size: var(--fs-small); }
.uni-fact-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uni-fact-tag {
  font-size: var(--fs-tiny); font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(52,44,135,0.08); color: var(--purple);
}

@media (max-width: 860px) {
  .uni-single-grid { grid-template-columns: 1fr; }
  .uni-single-side { position: static; }
}


/* Hide all eyebrow labels (the small uppercase text above headings) */
.eyebrow { display: none !important; }


/* ============================================================
   ACCESSIBILITY & POLISH (Web Interface Guidelines)
   ============================================================ */

/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Balance long headings so lines break evenly */
h1, h2, h3, .hero-headline { text-wrap: balance; }

/* Snappier taps + intentional tap highlight */
a, button, .filter-search-btn, .hero-dot { touch-action: manipulation; -webkit-tap-highlight-color: rgba(252,177,3,0.25); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   FILTER — searchable multi-select (Kota) + "Pilih…" dropdowns
   ============================================================ */
/* let the multi-select dropdown escape the panel when open */
.filter-controls:not(.collapsed) .filter-panel { overflow: visible; }

.filter-select.is-placeholder { color: var(--gray); }
.filter-panel .filter-select { min-height: 46px; min-width: 190px; }

.ms { position: relative; min-width: 240px; }
.ms-control {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-height: 46px; padding: 6px 34px 6px 12px;
  background: #fff; border: 1.5px solid rgba(52,44,135,0.2); border-radius: 10px;
  cursor: text; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ms-control:hover { border-color: #2563ff; }
.ms-control.open  { border-color: #2563ff; box-shadow: 0 0 0 3px rgba(37,99,255,0.15); }
.ms-chips { display: contents; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(52,44,135,0.08); color: var(--purple);
  font-size: var(--fs-small); font-weight: 600;
  padding: 3px 5px 3px 11px; border-radius: 20px;
}
.ms-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(52,44,135,0.15); color: var(--purple);
  font-size: 14px; line-height: 1; padding: 0;
}
.ms-chip-x:hover { background: var(--purple); color: #fff; }
.ms-input {
  flex: 1; min-width: 90px; border: none; outline: none;
  font-family: inherit; font-size: var(--fs-small); color: var(--text);
  background: transparent; padding: 5px 0;
}
.ms-input::placeholder { color: var(--gray); }
.ms-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gray); pointer-events: none; }

.ms-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(52,44,135,0.15);
  padding: 6px; max-height: 260px; overflow-y: auto;
}
.ms-option {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none;
  font-family: inherit; font-size: var(--fs-small); color: var(--text); border-radius: 8px;
}
.ms-option:hover { background: rgba(37,99,255,0.08); color: #2563ff; }
.ms-empty { padding: 10px 12px; color: var(--gray); font-size: var(--fs-small); }

@media (max-width: 700px) {
  .ms { width: 100%; min-width: 0; }
}


/* ============================================================
   LIGHTBOX (click an image to enlarge)
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,6,40,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff;
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ============================================================
   KURSUS — course detail cards (poster-style)
   ============================================================ */
.course-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 6px 24px rgba(52,44,135,0.08);
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid rgba(52,44,135,0.06);
  max-width: 560px;
}
.cc-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-level {
  background: var(--purple); color: #fff;
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
}
.cc-duration {
  background: rgba(252,177,3,0.18); color: #8a6100;
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
}
.cc-title { margin: 0; font-size: var(--fs-h4); color: var(--purple); line-height: 1.2; }
.cc-desc  { margin: 0; color: var(--gray); font-size: var(--fs-small); line-height: 1.6; }
.cc-info  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cc-info li { display: flex; align-items: center; gap: 12px; }
.cc-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52,44,135,0.07); color: var(--purple);
}
.cc-ic svg { width: 19px; height: 19px; }
.cc-info-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cc-info-txt span   { font-size: var(--fs-tiny); color: var(--gray); }
.cc-info-txt strong { font-size: var(--fs-body); color: var(--text); font-weight: 700; }
.cc-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 14px; border-top: 1px dashed rgba(52,44,135,0.15);
}
.cc-price-amt  { font-size: var(--fs-num); font-weight: 700; color: var(--purple); line-height: 1; }
.cc-price-unit { font-size: var(--fs-small); color: var(--gray); }
.cc-quota {
  align-self: flex-start;
  background: var(--teal); color: var(--purple-dark);
  font-size: var(--fs-tiny); font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 8px;
}
.cc-cta {
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #fff; font-weight: 700; font-size: var(--fs-btn);
  padding: 12px 20px; border-radius: 100px;
  transition: transform .2s, box-shadow .2s;
}
.cc-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.35); }

/* Flyer course card — spans the full row so the flyer reads horizontally */
.course-card--flyer {
  grid-column: 1 / -1;
  max-width: none;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.course-card--flyer .cc-flyer {
  display: block;
  width: 100%;
  height: auto;          /* keeps the flyer's own (horizontal) proportions */
  cursor: zoom-in;
}
.course-card--flyer .cc-cta { margin: 18px 26px 26px; align-self: flex-start; }

/* ============================================================
   TENTANG KAMI — editorial about header (kicker + serif + watermark)
   ============================================================ */
#about { position: relative; }
#about .section-inner { position: relative; z-index: 1; }

/* Kicker: vertical rule + two-line label. Uses its own class because
   .eyebrow is hidden site-wide (.eyebrow{display:none!important}). */
.about-kicker { display: flex; align-items: stretch; gap: 14px; margin-bottom: 22px; }
.about-kicker::before {
  content: ""; flex-shrink: 0;
  width: 2px; min-height: 36px;
  background: rgba(52,44,135,0.30);
}
.about-kicker span {
  display: block;
  font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #7b83a8; line-height: 1.7;
}

/* Serif headline — lighter and more editorial than the geometric sans (H2 scale: 36–48px) */
.about-h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--purple-dark);
}

/* Large, very faint Chinese watermark behind the text column */
.about-watermark {
  position: absolute; z-index: 0;
  left: 8px; top: 120px;
  font-size: clamp(56px, 8vw, 122px);
  font-weight: 700; line-height: 1.05; letter-spacing: 6px;
  color: rgba(52,44,135,0.07);
  pointer-events: none; user-select: none;
}

/* Stats on one row, like the reference (wraps gracefully when narrow) */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* --- Layout corrections for the editorial Tentang header --- */
/* Content was running flush to the viewport edge below 1320px because
   .section-inner had no horizontal padding. Site-wide fix. */
.section-inner { padding-left: 24px; padding-right: 24px; }

/* Watermark belongs in a left gutter BESIDE the text (as in the reference),
   not stacked behind the headline. Only shown when there's room for a gutter. */
@media (min-width: 1100px) {
  .about-text    { padding-left: 96px; }
  .about-watermark { left: 26px; top: 150px; }
}
@media (max-width: 1099px) {
  .about-watermark { display: none; }
}

/* --- Desktop refinements to match the reference --- */
@media (min-width: 1100px) {
  /* Four stat tiles on one row (auto-fit was collapsing to 3 + a wrapped tile) */
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

  /* Set the watermark vertically so it lives in the narrow left gutter
     instead of sitting behind the headline (a horizontal one is ~485px wide,
     far wider than the gutter the 2-column layout leaves). */
  .about-watermark {
    writing-mode: vertical-rl;
    left: 34px; top: 118px;
    font-size: 44px;
    letter-spacing: 8px;
    line-height: 1;
  }
}

/* ============================================================
   RESPONSIVE H1 — desktop 48px / tablet 40px / phone 32px
   (the homepage slideshow headline keeps its own sizing)
   ============================================================ */
@media (max-width: 960px) {
  h1, .page-hero h1 { font-size: var(--fs-h1); letter-spacing: -1.5px; }
}
@media (max-width: 600px) {
  h1, .page-hero h1 { font-size: var(--fs-h1); letter-spacing: -1px; line-height: 1.12; }
}

/* ============================================================
   TYPE SYSTEM — the single source of truth for text sizes.
   Every heading, paragraph, button and label uses one of these.
   Laptop values below; tablet/phone values in the media queries.
   ============================================================ */
:root {
  --fs-h1:    48px;   /* page titles, homepage slideshow headline */
  --fs-h2:    40px;   /* section headings */
  --fs-h3:    28px;   /* subsection headings */
  --fs-h4:    22px;   /* card titles */
  --fs-h5:    18px;   /* minor headings */
  --fs-num:   32px;   /* big numbers, stats, prices */
  --fs-lead:  18px;   /* subtitles, intro text */
  --fs-body:  16px;   /* paragraphs (phone: 14px below) */
  --fs-small: 14px;   /* card descriptions, meta, footer links */
  --fs-btn:   14px;   /* buttons, tabs, text links */
  --fs-tiny:  12px;   /* labels, badges, tags, captions */
}
@media (max-width: 960px) {
  :root { --fs-h1: 40px; }
}
@media (max-width: 600px) {
  :root {
    --fs-h1:    32px;
    --fs-h2:    28px;
    --fs-h3:    24px;
    --fs-h4:    20px;
    --fs-h5:    16px;
    --fs-num:   28px;
    --fs-lead:  15px;
    --fs-body:  14px;
    --fs-small: 13px;
    --fs-btn:   14px;
    --fs-tiny:  12px;
  }
  /* Form fields stay 16px so iPhones don't zoom in when tapped */
  .filter-search-input, .ms-input { font-size: 16px; }
}

/* ============================================================
   HERO — centre the floating cards, doodles, script and slide dots
   on the PHOTO (right 60%), not the whole hero. Each element is placed
   by its own centre point (translate -50%) as a % of the photo area,
   so the group stays centred at any laptop width.
   ============================================================ */
@media (min-width: 961px) {
  .hero-cards { left: 40%; right: 0; max-width: none; margin: 0; padding: 0; }
  .hero-cards .hcard, .hero-cards .hero-spark { right: auto; }
  .hcard-stat    { left: 27.5%; top: 41%;   transform: translate(-50%, -50%); }
  .hcard-a       { left: 71%;   top: 32%;   transform: translate(-50%, -50%); }
  .hcard-b       { left: 60%;   top: 72%;   transform: translate(-50%, -50%); }
  .hero-script   { left: 63.5%; right: auto; top: 53.5%; transform: translate(-50%, -50%) rotate(-8deg); }
  .hero-spark-1  { left: 27.5%; top: 25.5%; transform: translate(-50%, -50%); }
  .hero-spark-2  { left: 48%;   top: 65.5%; transform: translate(-50%, -50%); }
  /* dots centred under the photo (photo centre = 40% + 60%/2 = 70%) */
  .hero-slide-dots { left: 70%; }
}

/* ============================================================
   HOMEPAGE HERO — watermark on the blue panel, behind the text
   (z-index 1: above the navy background, below .hero-content at z 2)
   ============================================================ */
.hero-watermark {
  position: absolute; z-index: 1;
  top: 0; bottom: 0; left: 0; width: 40%;
  overflow: hidden;
  pointer-events: none; user-select: none;
}
.hw-chars {
  position: absolute; left: 48px; top: 11%;
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  font-weight: 700; line-height: 1.05; letter-spacing: 6px;
  color: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.hw-big   { font-size: clamp(96px, 9.5vw, 150px); }
.hw-small { font-size: clamp(68px, 6.8vw, 108px); }
.hw-gate {
  position: absolute; left: -6%; bottom: -3%;
  width: 118%; max-width: none; height: auto;
  opacity: 0.07;
}
/* The blue panel only exists on desktop (photo is full-bleed on tablet/phone) */
@media (max-width: 960px) { .hero-watermark { display: none; } }

/* Gate line-art: smaller and sized by panel HEIGHT so it never climbs into the characters */
.hw-gate { width: auto; height: 44%; max-width: 82%; left: -2%; bottom: -2%; }

/* Watermark on tablet/phone: the photo is full-bleed there, so the watermark
   spans the whole hero (still behind the text) and is slightly stronger so it
   shows over the darkened photo. Overrides the earlier "display:none". */
@media (max-width: 960px) {
  .hero-watermark { display: block; width: 100%; }
  .hw-chars { left: 24px; top: 12%; color: rgba(255,255,255,0.10); letter-spacing: 4px; }
  .hw-big   { font-size: 64px; }
  .hw-small { font-size: 46px; }
  .hw-gate  { left: 50%; bottom: -1%; transform: translateX(-50%);
              width: 92%; height: auto; max-width: 420px; opacity: 0.12; }
}

/* Laptop: smaller watermark characters tucked into the top-left of the blue panel */
@media (min-width: 961px) {
  .hw-chars { left: 64px; top: 104px; letter-spacing: 4px; }   /* 104px = just below the 76px nav */
  .hw-big   { font-size: clamp(56px, 5vw, 76px); }
  .hw-small { font-size: clamp(40px, 3.6vw, 54px); }
}

/* ============================================================
   HERO — slower, smoother slide transitions
   Photos: the incoming photo fades in ON TOP of the outgoing one (1.2s),
   and the outgoing one is only hidden once it's fully covered — so the
   hero never dips to the navy background mid-fade.
   Text: the old headline/subheading fades out first (0.35s), then the new
   one fades in (0.7s) — no two headlines overlapping.
   ============================================================ */
.hero-bg-slide        { z-index: 0; transition: opacity 0s linear 1.2s; }
.hero-bg-slide.active { z-index: 1; transition: opacity 1.2s cubic-bezier(.4,0,.2,1); }

.hero-headline,
.hero-slideshow .hero-sub                { transition: opacity .35s ease-out; }
.hero-headline.active,
.hero-slideshow .hero-sub.active         { transition: opacity .7s ease-in .35s; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide, .hero-bg-slide.active,
  .hero-headline, .hero-headline.active,
  .hero-slideshow .hero-sub, .hero-slideshow .hero-sub.active { transition: none; }
}

/* Tentang watermark: two explicit vertical columns, 印尼 always on the LEFT */
@media (min-width: 1100px) {
  .about-watermark { writing-mode: horizontal-tb; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
  .about-watermark .aw-col { writing-mode: vertical-rl; }
}

/* ============================================================
   STUDI DI CHINA — blue title banner with pagoda + 印尼北京学院 watermark
   The watermark sits behind the heading (z-index 0 vs heading z-index 1).
   Top padding clears the fixed 76px nav.
   ============================================================ */
.studi-hero {
  position: relative; overflow: hidden;
  background: #140c46;
  padding: 150px 24px 84px;
  text-align: center;
}
.studi-hero h1 { position: relative; z-index: 1; color: #fff; margin: 0; }
.studi-hero-watermark { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.studi-hero .sh-chars {
  position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  font-weight: 700; line-height: 1; letter-spacing: 6px;
  font-size: clamp(34px, 3.4vw, 48px);
  color: rgba(255,255,255,0.09);
}
.studi-hero .sh-chars .aw-col { writing-mode: vertical-rl; }
.studi-hero .sh-gate {
  position: absolute; right: 4%; bottom: -14%;
  width: auto; height: 150%; max-width: 40%;
  opacity: 0.10;
}
@media (max-width: 960px) {
  .studi-hero { padding: 120px 20px 64px; }
  .studi-hero .sh-chars { left: 4%; font-size: 28px; letter-spacing: 4px; }
  .studi-hero .sh-gate { right: -4%; height: 130%; max-width: 52%; opacity: 0.12; }
}
@media (max-width: 600px) {
  .studi-hero .sh-chars { font-size: 22px; }
}

/* Studi banner watermark: keep the characters clear of the fixed 76px nav
   (they were being clipped) and tame the pagoda bleed on small screens. */
.studi-hero .sh-chars {
  top: 96px; transform: none;            /* starts below the nav, not vertically centred */
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: 5px;
}
@media (max-width: 960px) {
  .studi-hero .sh-chars { top: 88px; font-size: 20px; letter-spacing: 3px; }
  .studi-hero .sh-gate  { right: -2%; height: 112%; max-width: 46%; bottom: -8%; }
}

/* ============================================================
   STUDI — compact search block: label + search + (filters · count)
   reads as one unit, with the cards immediately below.
   ============================================================ */
.filter-wrap { max-width: 900px; margin: 0 auto; }
.filter-search-label {
  text-align: center; font-size: var(--fs-small); font-weight: 600;
  color: var(--gray); margin-bottom: 8px;
}
.filter-search-row { margin-bottom: 12px; }
.filter-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.filter-row .filter-count { margin-top: 0; white-space: nowrap; }
.filter-controls { gap: 12px; }
.filter-panel { gap: 12px; }
@media (max-width: 600px) {
  .filter-row { gap: 10px; }
  .filter-search-row { margin-bottom: 10px; }
}

/* Keep the result count on the same row as the filters (it was wrapping because
   .filter-controls stretched to fill the row), and tighten the gap under the banner. */
.filter-wrap { max-width: 1000px; }
.filter-row .filter-controls { flex: 0 1 auto; }
#universitas { padding-top: 28px !important; }

/* Narrower filter dropdowns so filters + count fit on one row */
.filter-wrap { max-width: 1120px; }
.filter-row .ms { min-width: 0; width: 190px; }
@media (max-width: 700px) { .filter-row .ms { width: 100%; } }

/* Secondary sky accent; yellow remains the primary CTA colour.
   On light surfaces, use the darker ink for readable small text. */
.nav-links > li > a::after { background: var(--sky); }
.hcard-b .hcard-ic { background: var(--sky-soft); color: var(--sky-ink); }
.stat-tile:nth-child(3),
.testi-card:nth-child(3) { border-top-color: var(--sky); }
.gal-all-link,
.gal-year,
.uni-single-zh { color: var(--sky); }
.gal-item:hover { border-color: var(--sky); }
.cc-duration { background: var(--sky-soft); color: var(--sky-ink); }
.cc-ic { background: var(--sky-soft); color: var(--sky-ink); }
.uni-loc svg { color: var(--sky-ink); }
.footer-col-label,
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--sky); }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--sky-ink);
  outline-offset: 4px;
}
:where(#hero, #gallery, #cta, #footer) :where(a, button):focus-visible {
  outline-color: var(--sky);
}

/* WordPress marks the front page with .home; keep its palette unchanged. */
body:not(.home) {
  --purple: #332D88;
  --purple-dark: #332D88;
}
body:not(.home) .studi-hero {
  background: var(--purple);
}

/* Compact homepage stats above the program heading. */
.home-stats {
  padding: 0 0 28px;
  background: transparent;
}
.hero-statbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 1320px;
  min-height: 0;
  margin: 0 auto;
  padding: 20px 0;
  border: 1px solid #e6e3ee;
  border-radius: 18px;
  background: #fff;
}
.hsb-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 0 28px;
}
.hsb-item + .hsb-item { border-left: 1px solid #e6e3ee; }
.hero-statbar .hcard-ic { width: 40px; height: 40px; border-radius: 12px; }
.hero-statbar .hcard-ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.hero-statbar .hcard-txt { min-width: 0; gap: 4px; }
.hero-statbar .hcard-txt strong { display: block; min-height: 0; color: var(--purple); font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.hero-statbar .hcard-txt strong b { font-weight: inherit; }
.hero-statbar [data-count] { font-variant-numeric: tabular-nums; }
.hero-statbar .hcard-txt strong em { font-style: normal; color: var(--teal); }
.hero-statbar .hcard-txt span { color: #706f80; font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.6; }
.hsb-sky .hcard-ic { background: var(--sky-soft); color: var(--sky-ink); }

@media (min-width: 961px) {
  .hero-script  { left: 6%; right: auto; top: 128px; bottom: auto; transform: rotate(-8deg); }
  .hero-spark-1 { left: calc(6% + 196px); right: auto; top: 104px; bottom: auto; transform: none; }
}
@media (max-width: 1100px) {
  .hsb-item { padding: 0 18px; }
}
@media (max-width: 760px) {
  .home-stats { padding: 0 0 24px; }
  .hero-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 8px 0; }
  .hsb-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 18px; }
  .hsb-item:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; border-left: 0; }
  .hsb-item:nth-child(3) .hcard-txt strong { min-height: 0; }
  .hsb-item:nth-child(n+3) { border-top: 1px solid #e6e3ee; }
  .hero-statbar .hcard-txt strong { font-size: clamp(20px, 5vw, 24px); }
}

/* Play once on page entry; animate wrappers so slideshow fades stay independent. */
@keyframes heroEnterCopy {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroEnterPhoto {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-slideshow .hero-bg-slides { overflow: hidden; }
  .hero-slideshow .hero-bg-slide:first-child { animation: heroEnterPhoto 1.8s cubic-bezier(.2,.7,.2,1) both; }
  .hero-slideshow .hero-headlines { animation: heroEnterCopy .8s .12s both; }
  .hero-slideshow .hero-subs { animation: heroEnterCopy .8s .28s both; }
  .hero-slideshow .hero-buttons { animation: heroEnterCopy .8s .44s both; }
}

/* Filter dropdowns must open ABOVE the university cards.
   .filter-wrap uses .reveal (transform) which makes its own stacking layer,
   so the dropdown's z-index only counts inside it — lift the whole wrap. */
.filter-wrap { position: relative; z-index: 30; }
/* The box around the dropdown already shows the blue focus ring — no second outline on the text field inside */
.ms-input:focus-visible { outline: none; }

/* ============================================================
   BODY TEXT FONT — Poppins (same as headings/UI)
   Kept as a variable so body text can be switched in one place.
   ============================================================ */
:root { --font-body: 'Poppins', Arial, sans-serif; }
p, blockquote, figcaption, dd, td,
.testi-quote,
.uni-single-content, .uni-single-content li {
  font-family: var(--font-body);
}

/* ============================================================
   SINGLE UNIVERSITY PAGE — PHONE
   Logo and name side by side; tighter spacing so the page is shorter.
   ============================================================ */
@media (max-width: 600px) {
  .uni-single-hero { padding: 92px 16px 28px; }
  .uni-crumbs { gap: 4px 6px; margin-bottom: 18px; font-size: var(--fs-tiny); line-height: 1.5; }

  .uni-single-head { flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
  .uni-single-logo { width: 64px; height: 64px; padding: 8px; border-radius: 12px; }
  .uni-single-head > div:last-child { min-width: 0; }
  /* Smaller than the page-title H1 so long names fit beside the logo */
  .uni-single-head h1 { font-size: var(--fs-h3); line-height: 1.15; }
  .uni-single-zh { font-size: var(--fs-small); margin-top: 4px; line-height: 1.4; }
  .uni-single-meta { gap: 4px 12px; margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; }

  .uni-single-body { padding: 20px 16px 48px; }
  .uni-single-grid { gap: 16px; }
  .uni-single-content { padding: 20px; line-height: 1.65; }
  .uni-single-content p,
  .uni-single-content .uni-lead { margin-bottom: 12px; }
  .uni-single-content h2 { margin: 20px 0 8px; }
  .uni-single-content h3 { margin: 16px 0 6px; }
  .uni-single-content ul, .uni-single-content ol { margin-bottom: 12px; }
  .uni-single-content li { margin-bottom: 4px; }
  .uni-single-content img { margin: 8px 0; }

  .uni-facts { padding: 16px 18px; }
  .uni-facts-title { margin-bottom: 8px; }
  .uni-fact { padding: 8px 0; line-height: 1.4; }
  .uni-fact-majors { padding: 10px 0 2px; }
}
/* Headings inside body content stay Poppins */
.uni-single-content :is(h1, h2, h3, h4, h5, h6) { font-family: 'Poppins', sans-serif; }

/* ============================================================
   UNIVERSITY PAGE (single-university.php) — "us-" components
   Banner → logo card + name + gallery → pill tabs → other
   universities → WhatsApp CTA.
   ============================================================ */
.us-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Banner: Featured Image, or brand purple when none */
.us-banner {
  position: relative;
  height: 340px;
  padding-top: 92px;                       /* clears the 76px fixed nav */
  background: var(--purple) center / cover no-repeat;
}
.us-banner::before {                       /* dark top fade so the breadcrumb stays readable */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,12,70,0.55) 0%, rgba(20,12,70,0.10) 45%, rgba(20,12,70,0) 100%);
}
.us-banner .us-wrap { position: relative; }
.us-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-small); }
.us-crumbs a { color: rgba(255,255,255,0.8); text-decoration: none; }
.us-crumbs a:hover { color: var(--teal); }
.us-crumbs > span[aria-hidden] { color: rgba(255,255,255,0.45); }
.us-crumbs .current { color: #fff; font-weight: 700; }

/* Header row: identity left, gallery right (both overlap the banner) */
.us-head { background: var(--cream); }
.us-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.us-id { margin-top: -110px; position: relative; z-index: 1; }
.us-logo {
  width: 180px; height: 180px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20,12,70,0.14);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.us-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.us-logo-fallback { width: 100%; height: 100%; border-radius: 12px; background: var(--purple); display: flex; align-items: center; justify-content: center; }
.us-logo-fallback svg { width: 48px; height: 48px; }
.us-id-text { margin-top: 24px; }
.us-id h1 { font-family: 'Poppins', sans-serif; font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; color: var(--purple-dark); margin: 0; }
.us-zh { color: var(--gray); font-size: var(--fs-lead); margin-top: 6px; }
.us-loc { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; color: var(--purple); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.us-loc svg { flex-shrink: 0; margin-top: 3px; color: var(--teal); }

.us-gallery {
  margin-top: -70px; position: relative; z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
.us-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 14px; box-shadow: 0 10px 28px rgba(20,12,70,0.16);
  cursor: zoom-in; scroll-snap-align: start;
  transition: transform .25s ease;
}
.us-gallery img:hover { transform: translateY(-3px); }

/* Tabs */
.us-body { background: var(--cream); padding: 48px 0 64px; }
.us-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.us-tab {
  font-family: 'Poppins', sans-serif; font-size: var(--fs-btn); font-weight: 600;
  padding: 10px 22px; border-radius: 100px;
  border: 1.5px solid rgba(52,44,135,0.25); background: #fff; color: var(--purple);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.us-tab:hover { border-color: var(--purple); }
.us-tab.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.us-panel { max-width: 900px; }
.us-content { font-size: var(--fs-body); line-height: 1.75; color: #4b5060; }
.us-content p { margin: 0 0 18px; }
.us-content p:last-child { margin-bottom: 0; }
.us-content :is(h2, h3, h4) { font-family: 'Poppins', sans-serif; color: var(--text); margin: 28px 0 12px; }
.us-content h2 { font-size: var(--fs-h3); }
.us-content h3 { font-size: var(--fs-h4); }
.us-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.us-content ul, .us-content ol { margin: 0 0 18px 22px; list-style: revert; }
.us-content li { margin-bottom: 6px; font-family: var(--font-body); }
.us-content a { color: var(--purple); text-decoration: underline; }

.us-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.us-checklist li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.us-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(252,177,3,0.18); color: #b37a00; display: flex; align-items: center; justify-content: center; }

.us-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.us-fact { background: #fff; border: 1px solid rgba(52,44,135,0.1); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.us-fact span { font-size: var(--fs-tiny); font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .5px; }
.us-fact strong { font-size: var(--fs-body); color: var(--purple); font-weight: 600; }
.us-subhead { font-family: 'Poppins', sans-serif; font-size: var(--fs-h5); font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.us-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.us-tag { font-size: var(--fs-small); font-weight: 600; padding: 6px 14px; border-radius: 100px; background: rgba(52,44,135,0.08); color: var(--purple); }
.us-ask { margin-top: 32px; }

/* Other universities */
.us-related { background: #fff; padding: 64px 0; }
.us-h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: 0 0 28px; padding-bottom: 12px; position: relative; }
.us-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px; border-radius: 3px; background: var(--teal); }
.us-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.us-rel-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(52,44,135,0.08); border: 1px solid rgba(52,44,135,0.06);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.us-rel-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(52,44,135,0.14); }
.us-rel-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--purple); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.us-rel-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.us-rel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.us-rel-text strong { font-size: var(--fs-body); font-weight: 700; color: var(--purple-dark); line-height: 1.3; }
.us-rel-loc { display: flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--gray); }
.us-rel-loc svg { width: 14px; height: 14px; color: var(--teal); }
.us-rel-arrow { color: var(--purple); flex-shrink: 0; }
.us-more { text-align: center; margin-top: 24px; }
.us-more a { display: inline-flex; align-items: center; gap: 4px; color: var(--purple); font-weight: 600; font-size: var(--fs-btn); text-decoration: none; }
.us-more a:hover { color: #b37a00; }

/* CTA */
.us-cta { background: var(--purple); padding: 56px 0; }
.us-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.us-cta h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-h3); font-weight: 700; color: #fff; margin: 0 0 8px; }
.us-cta p { color: rgba(255,255,255,0.8); font-size: var(--fs-body); margin: 0; max-width: 620px; }
.us-cta .btn-teal { flex-shrink: 0; }

/* Tablet */
@media (max-width: 960px) {
  .us-wrap { padding: 0 24px; }
  .us-head-grid { grid-template-columns: 1fr; gap: 24px; }
  .us-gallery { margin-top: 0; grid-auto-columns: 42%; }
  .us-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* Phone: logo and name side by side, compact spacing */
@media (max-width: 600px) {
  .us-wrap { padding: 0 16px; }
  .us-banner { height: 210px; padding-top: 76px; }
  .us-crumbs { font-size: var(--fs-tiny); gap: 2px 6px; }
  .us-id { margin-top: -48px; display: flex; align-items: flex-start; gap: 14px; }
  .us-logo { width: 92px; height: 92px; padding: 10px; border-radius: 14px; flex-shrink: 0; }
  .us-id-text { margin-top: 0; min-width: 0; padding-top: 58px; }   /* starts below the banner edge */
  .us-id h1 { font-size: var(--fs-h4); }
  .us-zh { font-size: var(--fs-small); margin-top: 2px; }
  .us-loc { font-size: var(--fs-small); margin-top: 4px; }
  .us-loc svg { width: 14px; height: 14px; margin-top: 2px; }
  .us-gallery { grid-auto-columns: 70%; gap: 10px; }
  .us-body { padding: 28px 0 40px; }
  .us-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -16px 20px; padding: 0 16px 4px; }
  .us-tab { flex-shrink: 0; padding: 8px 16px; }
  .us-content { line-height: 1.65; }
  .us-content p { margin-bottom: 12px; }
  .us-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .us-fact { padding: 10px 12px; }
  .us-ask { width: 100%; justify-content: center; margin-top: 24px; }
  .us-related { padding: 40px 0; }
  .us-rel-grid { grid-template-columns: 1fr; gap: 10px; }
  .us-rel-card { padding: 12px 14px; }
  .us-rel-logo { width: 52px; height: 52px; }
  .us-cta { padding: 40px 0; }
  .us-cta .btn-teal { width: 100%; justify-content: center; }
}

/* ============================================================
   FOOTER — same dark footer on every page, all text plain white
   ============================================================ */
#footer { background: #07101F; }
#footer .footer-desc,
#footer .footer-col-label,
#footer .footer-links a,
#footer .footer-contact-item,
#footer .footer-contact-item a,
#footer .footer-bottom,
#footer .footer-legal a,
#footer .footer-legal > span { color: #fff; }
#footer .footer-links a:hover,
#footer .footer-contact-item a:hover,
#footer .footer-legal a:hover { color: var(--teal); }
#footer .footer-logo img { opacity: 1 !important; }

/* Interactive university map on the Studi di China page */
.studi-map-section {
  padding: 64px 0 72px;
  background: #fff;
}
.studi-map-heading {
  max-width: 680px;
  margin-bottom: 28px;
}
.studi-map-heading .eyebrow { color: var(--purple); }
.studi-map-heading h2 { margin: 9px 0 10px; }
.studi-map-heading p {
  margin: 0;
  color: var(--gray);
  line-height: 1.75;
}
.studi-map-frame-wrap { width: 100%; }
.studi-map-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: transparent;
}
@media (max-width: 720px) {
  .studi-map-section { padding: 48px 0 56px; }
  .studi-map-heading { margin-bottom: 22px; }
  .studi-map-frame { height: 1120px; }
}

/* ============================================================
   STUDI PAGE — universities first
   Short banner → Universitas Unggulan → full list → map.
   ============================================================ */
/* Shorter title banner (just clears the 76px nav) */
.studi-hero { padding: 104px 24px 32px; }
.studi-hero .sh-chars { top: 50%; transform: translateY(-50%); margin-top: 38px; font-size: 20px; letter-spacing: 3px; gap: 12px; flex-direction: row; }
.studi-hero .sh-chars .aw-col { writing-mode: horizontal-tb; }
.studi-hero .sh-gate { height: 130%; bottom: -30%; }
@media (max-width: 960px) {
  .studi-hero { padding: 92px 20px 26px; }
  .studi-hero .sh-chars { display: none; }
}

/* Cari Universitas / Peta Kota switch */
.studi-switch-wrap { background: var(--bg-cream); padding: 28px 24px 0; display: flex; justify-content: center; }
.studi-switch { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid rgba(52,44,135,0.12); border-radius: 100px; box-shadow: 0 4px 16px rgba(52,44,135,0.06); }
.studi-switch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-size: var(--fs-btn); font-weight: 600;
  padding: 11px 24px; border-radius: 100px; color: var(--purple);
  transition: background .2s ease, color .2s ease;
}
.studi-switch-btn:hover { background: rgba(52,44,135,0.06); }
.studi-switch-btn.active { background: var(--purple); color: #fff; }
.studi-map-section[hidden], #universitas[hidden] { display: none !important; }
#peta-universitas { background: var(--bg-cream); }
@media (max-width: 600px) {
  .studi-switch-wrap { padding: 20px 16px 0; }
  .studi-switch { width: 100%; }
  .studi-switch-btn { flex: 1; justify-content: center; padding: 10px 12px; }
}

/* Full list: less space above the search */
#universitas { padding-top: 24px !important; }

/* Shorter university cards: details on one line, tighter spacing */
.uni-card { padding: 18px; }
.uni-card-head { padding-bottom: 12px; }
.uni-card-body { gap: 8px; padding: 12px 0; }
.uni-detail { gap: 0; line-height: 1.4; }
.uni-detail-tags { gap: 4px; }
.uni-head-text .uni-name { line-height: 1.2; }
.uni-tag-more { background: rgba(252,177,3,0.18); color: #8a5d00; }
.uni-card-foot { padding-top: 12px; }
#peta-universitas { padding-top: 28px; }

/* ----- Tentang Kami: Mengapa BLCI + Studi / Kelas Bahasa Lainnya ----- */
.about-more { padding: 80px 0; background: var(--white); }
.about-more-h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--text); text-align: center; margin-bottom: 40px; line-height: 1.25; }
.about-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.about-reason {
  background: var(--cream); border-radius: 16px; padding: 26px 24px;
  border-top: 4px solid var(--teal);
  display: flex; flex-direction: column; gap: 8px;
}
.about-reason-num   { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 1px; color: var(--purple-light); }
.about-reason-title { margin: 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.3; color: var(--purple); }
.about-reason-desc  { margin: 0; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.7; color: var(--gray); }
.about-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.about-panel { border-radius: 16px; padding: 32px; }
.about-panel p { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.8; margin-bottom: 14px; }
.about-panel p:last-child { margin-bottom: 0; }
.about-panel-h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.about-panel--studi { background: var(--purple); color: rgba(255,255,255,0.88); }
.about-panel--studi .about-panel-h3 { color: #fff; }
.about-panel--lang { background: var(--offwhite); color: var(--gray); }
.about-panel--lang .about-panel-h3 { color: var(--purple); }
@media (max-width: 960px) {
  .about-reasons { grid-template-columns: repeat(2, 1fr); }
  .about-panels  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .about-more { padding: 56px 0; }
  .about-reasons { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .about-panel { padding: 24px 20px; }
}

/* University page: "Pilihan Program Studi" moved into the Program & Jurusan tab */
.us-programs { margin-top: 28px; }
.us-programs > :first-child { margin-top: 0; }

/* Studi page: title banner removed — the list/map switch now sits right under the nav */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.studi-switch-wrap { padding-top: 104px; }                /* 76px fixed nav + 28px */
@media (max-width: 600px) { .studi-switch-wrap { padding-top: 92px; } }

/* ============================================================
   PELAYANAN — grouped service list
   ============================================================ */
.svc-section { padding: 80px 0 96px; background: var(--bg-cream); }

.svc-intro {
  max-width: 680px; margin: 0 auto 44px; text-align: center;
  font-size: var(--fs-lead); line-height: 1.7; color: var(--gray);
}

.svc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; align-items: start;
}

.svc-card {
  position: relative; background: #fff; border-radius: 18px;
  padding: 32px 30px 30px; box-shadow: 0 2px 14px rgba(52,44,135,0.06);
  border-top: 3px solid var(--teal);
}

.svc-num {
  display: block; font-size: var(--fs-num); font-weight: 700;
  line-height: 1; color: var(--teal); margin-bottom: 10px;
}

.svc-title {
  margin: 0 0 18px; font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: var(--fs-h4); line-height: 1.3; color: var(--purple-dark);
}

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-body); line-height: 1.55; color: var(--gray);
  padding: 7px 0; border-bottom: 1px solid rgba(38,32,106,0.06);
}
.svc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-check { flex: 0 0 16px; margin-top: 3px; color: var(--teal); }

.svc-mark {
  font-size: 0.7em; font-weight: 700; color: var(--teal);
  margin-left: 2px; vertical-align: super; line-height: 0;
}

.svc-notes {
  max-width: 760px; margin: 36px auto 0; padding: 20px 24px;
  background: rgba(252,177,3,0.08); border-left: 3px solid var(--teal);
  border-radius: 12px;
}
.svc-note, .svc-excl {
  margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--gray);
}
.svc-note + .svc-note { margin-top: 4px; }
.svc-excl { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(38,32,106,0.08); }

.svc-cta { text-align: center; margin-top: 44px; }

@media (max-width: 600px) {
  .svc-section { padding: 56px 0 72px; }
  .svc-intro { margin-bottom: 32px; }
  .svc-grid { grid-template-columns: 1fr; gap: 18px; }
  .svc-card { padding: 26px 22px 24px; border-radius: 16px; }
  .svc-title { margin-bottom: 14px; }
  .svc-notes { padding: 18px 20px; margin-top: 28px; }
}

/* Studi filter on narrow screens: "Filter" + result count share one line;
   the dropdowns open full-width below and take NO space when closed
   (they used to stay 170px tall while invisible, leaving a big gap). */
@media (max-width: 700px) {
  .filter-row { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 0; }
  .filter-row .filter-controls { display: contents; }
  .filter-row .filter-toggle { grid-column: 1; grid-row: 1; }
  .filter-row .filter-count { grid-column: 2; grid-row: 1; text-align: right; margin: 0; }
  .filter-row .filter-panel {
    grid-column: 1 / -1; grid-row: 2;
    flex-direction: column; align-items: stretch; gap: 10px;
    max-width: none; transform: none;
    transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  }
  .filter-row .filter-controls.collapsed .filter-panel { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; pointer-events: none; }
  .filter-row .filter-controls:not(.collapsed) .filter-panel { max-height: 400px; opacity: 1; margin-top: 12px; overflow: visible; }
  .filter-row .ms { width: 100%; }
}

/* Page title banner (Pelayanan, Achievement, legal pages): compact —
   just clears the 76px nav, heading on one line where it fits. */
.page-hero { padding: 104px 24px 36px; }
.page-hero-inner { max-width: 960px; }
.page-hero h1 { margin-bottom: 8px; }
.page-hero p { max-width: 640px; line-height: 1.6; }
.page-hero .eyebrow { margin-bottom: 8px; }
@media (max-width: 600px) { .page-hero { padding: 92px 16px 28px; } }

/* ============================================================
   PELAYANAN — redesign: rounded hero card + 4 service cards
   with a header panel (photo or line icon) and a checklist.
   ============================================================ */
.svc-hero-wrap { background: var(--bg-cream); padding: 100px 24px 0; }
.svc-hero {
  position: relative; overflow: hidden;
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 32px;
  background: var(--purple); border-radius: 28px;
  padding: 56px 64px;
}
.svc-hero::after {                                   /* soft light in the corner, no busy pattern */
  content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%); pointer-events: none;
}
.svc-hero-text { position: relative; z-index: 1; }
.svc-hero-eyebrow {
  display: inline-block; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px;
}
.svc-hero h1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; color: #fff; margin: 0 0 16px; }
.svc-hero p { font-size: var(--fs-lead); line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; max-width: 560px; }
/* Match the Pelayanan card height to the Universitas and Kursus banners. */
.svc-hero--service { height: 340px; }
.svc-hero--service .svc-hero-text { max-width: 550px; }
.svc-hero--service .svc-hero-photo { width: 52%; max-width: 680px; }

/* Section + intro */
.svc-section { padding: 48px 0 88px; }
.svc-intro { margin-bottom: 36px; }

/* 4 cards in one row on laptops */
.svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.svc-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden; border-top: 0; border-radius: 20px;
  border: 1px solid rgba(52,44,135,0.08);
  box-shadow: 0 6px 24px rgba(52,44,135,0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(52,44,135,0.13); }

/* Header panel: gradient + icon by default, photo with a dark fade when uploaded */
.svc-head {
  position: relative; min-height: 168px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(140deg, var(--purple) 0%, #4A42AA 100%) center / cover no-repeat;
  color: #fff;
}
.svc-head.has-img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,12,70,0.88) 0%, rgba(20,12,70,0.35) 60%, rgba(20,12,70,0.10) 100%);
}
.svc-head > * { position: relative; }
.svc-icon { position: absolute; top: 20px; right: 20px; width: 56px; height: 56px; color: rgba(255,255,255,0.55); }
.svc-icon svg { width: 100%; height: 100%; display: block; }
.svc-card .svc-num { font-size: var(--fs-small); font-weight: 700; letter-spacing: 1px; color: var(--teal); margin: 0 0 6px; }
.svc-card .svc-title { color: #fff; font-size: var(--fs-h5); line-height: 1.3; margin: 0; }

.svc-card .svc-list { padding: 18px 22px 22px; }
.svc-card .svc-list li { font-size: var(--fs-small); padding: 8px 0; }

/* Notes + CTA: one calm panel */
.svc-notes { max-width: 900px; margin: 40px auto 0; background: #fff; border-left: 0; border: 1px solid rgba(52,44,135,0.08); border-radius: 16px; }

@media (max-width: 960px) {
  .svc-hero { grid-template-columns: 1fr; padding: 40px 32px; }
  .svc-hero--service { height: auto; }
  .svc-hero--service .svc-hero-text { max-width: none; }
  .svc-hero--service .svc-hero-photo { width: 100%; max-width: none; margin: 20px 0 0; }
}
@media (max-width: 600px) {
  .svc-hero-wrap { padding: 88px 16px 0; }
  .svc-hero { padding: 32px 24px; border-radius: 22px; }
  .svc-hero--service .svc-hero-photo { margin-top: 12px; }
  .svc-section { padding: 36px 0 64px; }
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card { padding: 0; }
  .svc-head { min-height: 132px; }
}

/* ============================================================
   KURSUS — class cards v2 (image on top, title, text, button)
   Inspired by clean program-card layouts; graphic area left
   ready for artwork via "Gambar Kartu".
   ============================================================ */
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; }
@media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .course-grid { grid-template-columns: 1fr; gap: 20px; } }

.course-card--v2 {
  max-width: none; padding: 18px; gap: 0;
  border-radius: 22px; border: 1px solid rgba(52,44,135,0.06);
  box-shadow: 0 10px 34px rgba(52,44,135,0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.course-card--v2:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(52,44,135,0.12); }

/* Graphic area */
.cc-media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 16px;
  background: linear-gradient(135deg, #EEEAF9 0%, #DCD4F3 55%, #C9BEEC 100%);
}
.cc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-media-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); }
.cc-media-shape--a { width: 70%; aspect-ratio: 1; right: -12%; top: -30%; }
.cc-media-shape--b { width: 46%; aspect-ratio: 1; left: -10%; bottom: -26%; background: rgba(52,44,135,0.08); }
.cc-media-tags { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.course-card--v2 .cc-level { box-shadow: 0 2px 8px rgba(20,12,70,0.15); }
.course-card--v2 .cc-quota { padding: 5px 12px; border-radius: 20px; }

/* Text */
.cc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 6px 4px; }
.course-card--v2 .cc-title { font-size: var(--fs-h4); color: var(--purple-dark); }
.course-card--v2 .cc-desc { font-size: var(--fs-body); line-height: 1.65; }

.cc-meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cc-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text); }
.cc-meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--purple); }

/* Price + button pinned to the bottom so buttons line up across cards */
.cc-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.course-card--v2 .cc-price { margin: 0; padding: 0; border: 0; }
.course-card--v2 .cc-price-amt { font-size: var(--fs-h4); }
.course-card--v2 .cc-cta {
  margin: 0; background: var(--purple); padding: 12px 22px;
}
.course-card--v2 .cc-cta:hover { box-shadow: 0 8px 20px rgba(52,44,135,0.3); }
@media (max-width: 680px) {
  .course-card--v2 { padding: 14px; border-radius: 18px; }
  .cc-body { padding: 16px 4px 2px; }
}

/* Kursus cards v2 — compact (closer to the reference): wider image,
   2-line description, one info line, price + yellow button on one row */
.course-card--v2 { padding: 14px; border-radius: 20px; }
.course-card--v2 .cc-media { aspect-ratio: 16 / 9; border-radius: 14px; }
.course-card--v2 .cc-body { gap: 6px; padding: 14px 4px 2px; }
.course-card--v2 .cc-title { font-size: var(--fs-h5); line-height: 1.3; }
.course-card--v2 .cc-desc {
  font-size: var(--fs-small); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-meta-line {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--fs-small); color: var(--text);
  white-space: nowrap; overflow: hidden;
}
.cc-meta-line span { overflow: hidden; text-overflow: ellipsis; }
.cc-meta-line svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--purple); }
.course-card--v2 .cc-foot { padding-top: 12px; flex-wrap: nowrap; }
.course-card--v2 .cc-price { flex-direction: column; gap: 0; align-items: flex-start; }
.course-card--v2 .cc-price-amt { font-size: var(--fs-h5); }
.course-card--v2 .cc-price-unit { font-size: var(--fs-tiny); }
.course-card--v2 .cc-cta {                      /* yellow, like the rest of the site's main buttons */
  background: var(--teal); color: var(--purple-dark);
  padding: 10px 18px; white-space: nowrap; flex-shrink: 0;
}
.course-card--v2 .cc-cta:hover { box-shadow: 0 8px 20px rgba(252,177,3,0.35); }

/* Studi page: rounded hero card is back on top (clears the nav itself),
   so the list/map switch only needs normal spacing below it */
.studi-switch-wrap { padding-top: 32px; }
@media (max-width: 600px) { .studi-switch-wrap { padding-top: 24px; } }

/* Studi list: "Tampilkan lebih banyak" button under the first 8 universities */
.uni-more { display: flex; justify-content: center; margin-top: 32px; }
.uni-more[hidden] { display: none; }
.uni-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-size: var(--fs-btn); font-weight: 600;
  padding: 13px 28px; border-radius: 100px;
  background: #fff; color: var(--purple);
  border: 1.5px solid rgba(52,44,135,0.25);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.uni-more-btn:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

/* Studi banner with the student illustration (transparent WebP):
   text on the left, artwork anchored bottom-right inside the card. */
.svc-hero--photo { display: block; min-height: 340px; padding-bottom: 56px; }
.svc-hero--photo .svc-hero-text { max-width: 46%; }
.svc-hero-photo {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 64%; max-width: 900px; height: auto;
  pointer-events: none; user-select: none;
}
@media (max-width: 960px) {
  .svc-hero--photo { min-height: 0; padding-bottom: 0; }
  .svc-hero--photo .svc-hero-text { max-width: none; }
  .svc-hero-photo {                        /* sits under the text; left empty strip cropped off */
    position: relative; display: block;
    width: 125%; max-width: none; margin: 20px 0 0 -25%;
  }
}
@media (max-width: 600px) {
  .svc-hero--photo { padding-bottom: 0; }
  .svc-hero-photo { width: 135%; margin-left: -30%; margin-top: 12px; }
}

/* 印尼北京学院 watermark in the Study in China banner (behind the text, clear of the artwork) */
.svc-hero-wm {
  position: absolute; left: 64px; bottom: 26px; z-index: 0;
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  font-weight: 700; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: 8px;
  color: rgba(255,255,255,0.08); white-space: nowrap;
  pointer-events: none; user-select: none;
}
/* Keep the wide Kursus artwork fully visible inside the shared banner size. */
.kursus-hero .svc-hero-text { max-width: 40%; }
.kursus-hero .svc-hero-photo { width: 53%; max-width: 700px; }
@media (max-width: 960px) {
  .svc-hero-wm { left: auto; right: 24px; top: 26px; bottom: auto; font-size: 30px; letter-spacing: 4px; }
  .kursus-hero .svc-hero-text { max-width: none; }
  .kursus-hero .svc-hero-photo { width: 100%; max-width: none; margin: 20px 0 0; }
}
@media (max-width: 600px) {
  .svc-hero-wm { right: 18px; top: 22px; font-size: 22px; letter-spacing: 3px; color: rgba(255,255,255,0.10); }
  .kursus-hero .svc-hero-photo { margin-top: 12px; }
}

/* ============================================================
   TENTANG — "Mengapa Belajar Mandarin di BLCI?" feature cards
   Centred heading with a purple accent bar; white cards with a
   duotone icon on the left and title + text on the right.
   ============================================================ */
.why-h2 {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: var(--fs-h2); line-height: 1.2;
  color: var(--purple-dark); text-align: center; margin: 0 0 44px;
}
.why-h2::before { content: ""; flex: 0 0 6px; height: 1.3em; border-radius: 6px; background: #C9BEEC; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.why-card {
  display: flex; align-items: flex-start; gap: 22px;
  background: #fff; border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 12px 36px rgba(52,44,135,0.07);
  border: 1px solid rgba(52,44,135,0.05);
}
.why-icon { flex: 0 0 72px; width: 72px; height: 72px; }
.why-icon svg { width: 100%; height: 100%; display: block; }
.why-title { margin: 4px 0 8px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; color: var(--purple-dark); }
.why-desc { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--gray); }
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-card { padding: 22px 20px; gap: 16px; }
  .why-icon { flex-basis: 56px; width: 56px; height: 56px; }
  .why-h2 { margin-bottom: 28px; gap: 12px; }
}
@media (max-width: 760px) { .why-h2::before { display: none; } }

/* Kursus tabs: four tabs scroll horizontally on phones. */
#mandarin, #corporate, #csca, #inggris { scroll-margin-top: 130px; }
@media (max-width: 600px) {
  #langTabs { overflow-x: auto; scrollbar-width: none; }
  #langTabs::-webkit-scrollbar { display: none; }
  #langTabs .lang-tab { padding: 14px 12px !important; white-space: nowrap; font-size: 13px !important; flex-shrink: 0; }
}
@media (max-width: 600px) {
  #langTabs { justify-content: safe center !important; }
  #langTabs .lang-tab { padding: 14px 8px !important; font-size: 12px !important; }
}

/* Homepage hero: no 印尼北京学院 / gate watermark on the full-bleed phone & tablet layout */
@media (max-width: 960px) {
  .hero-watermark { display: none !important; }
}

/* Homepage: learning paths directly below the hero */
.home-pathways {
  position: relative;
  z-index: 4;
  margin-top: -24px;
  border-radius: 40px 40px 0 0;
  background: #fafaf7;
  padding: 40px;
}
/* Keep carousel controls clear of the rounded section overlap. */
.hero-slideshow .hero-slide-dots { bottom: 48px; }
.home-pathways-inner { max-width: 1320px; margin: 0 auto; }
.home-pathways-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 24px;
}
.home-pathways-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.home-pathways-heading h2,
.student-journeys-heading h2 {
  color: #171239;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.13;
  letter-spacing: -.045em;
}
.home-pathways-heading > p {
  flex: 0 0 290px;
  margin-bottom: 4px;
  color: #706f80;
  font-size: 15px;
  line-height: 1.65;
}
.home-pathways-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.home-pathway-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e6e3ee;
  border-radius: 22px;
  background: white;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-pathway-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(33, 23, 66, .1);
}
.home-pathway-card:focus-visible { outline: 3px solid #2cc6ff; outline-offset: 4px; }
.home-pathway-art {
  position: relative;
  height: clamp(160px, 14vw, 190px);
  overflow: hidden;
}
.home-pathway-art-study { background: #eeecf8; }
.home-pathway-art-course { background: #fff1d5; }
.home-pathway-art-corporate { background: #e5f0ee; }
.home-pathway-art > img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  object-fit: contain;
  object-position: center bottom;
}
.home-pathway-art-study > img {
  right: -8%;
  width: 132%;
  max-width: none;
}
.home-pathway-art-course > img {
  width: 110%;
  max-width: none;
  right: -5%;
}
.home-pathway-art-corporate > img {
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.home-pathway-number {
  position: absolute;
  z-index: 1;
  top: 21px;
  left: 24px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.home-pathway-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px;
}
.home-pathway-body h3 {
  margin-bottom: 10px;
  color: #171239;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.045em;
}
.home-pathway-body p {
  margin-bottom: 18px;
  color: #706f80;
  font-size: 14px;
  line-height: 1.7;
}
.home-pathway-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e6e3ee;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.home-pathway-link span { font-size: 28px; font-weight: 400; line-height: 1; }
@media (max-width: 1100px) {
  .home-pathways-heading { display: block; }
  .home-pathways-heading > p { max-width: 520px; margin-top: 16px; }
  .home-pathways-grid { gap: 18px; }
  .home-pathway-art { height: 150px; }
  .home-pathway-number { left: 18px; top: 18px; font-size: 11px; }
  .home-pathway-body { padding: 18px 20px; }
  .home-pathway-body h3 { font-size: 22px; }
  .home-pathway-link { font-size: 12px; }
}
@media (max-width: 799px) {
  .home-pathways { padding: 32px 20px; margin-top: -16px; border-radius: 28px 28px 0 0; }
  .home-pathways-heading { display: block; margin-bottom: 20px; }
  .home-pathways-heading > p { margin-top: 16px; font-size: 14px; }
  .home-pathways-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-pathway-art { height: clamp(170px, 44vw, 220px); }
  .home-pathway-body { padding: 20px; }
  .home-pathway-body h3 { font-size: 25px; }
  .home-pathway-link { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-pathway-card { transition: none; }
}

/* Seven student memories in a seamless, four-photo-wide loop. */
.student-journeys { margin: 36px 0 0; }
.student-journeys-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.student-journeys-heading h2 { margin: 0; }
.student-journeys-window { width: 100%; overflow: hidden; }
.student-journeys-track { display: flex; width: calc(100% * var(--journey-count, 14) / 4); animation: studentJourneyLoop 42s linear infinite; }
.student-journeys-photo { flex: 0 0 calc(100% / var(--journey-count, 14)); min-width: 0; padding-right: 0; box-sizing: border-box; }
.student-journeys-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.student-journeys:hover .student-journeys-track, .student-journeys:focus-within .student-journeys-track { animation-play-state: paused; }
@keyframes studentJourneyLoop { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .student-journeys { margin-top: 28px; }
  .home-pathways-heading h2, .student-journeys-heading h2 { font-size: clamp(20px, 5vw, 24px); }
  .student-journeys-heading { align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .student-journeys-track { animation: none; }
}

.student-journeys-photo { display: block; cursor: zoom-in; }
.student-journeys-photo:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; }
.scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.scroll-reveal.is-revealed { opacity: 1; transform: translateY(0); }
.home-process { margin-top: 52px; }
.home-process-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 36px; }
.home-process h2 { color: #171239; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.home-process-heading h2 { max-width: 520px; }
.home-process p { color: #706f80; font-size: 14px; line-height: 1.7; margin: 0; }
.home-process-heading > p { max-width: 320px; }
.home-process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
.home-process-steps li { border-top: 1px solid #d9d3ed; padding-top: 24px; }
.home-process-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #eee9f8; color: var(--purple); font-weight: 700; margin-bottom: 22px; }
.home-process h3 { font-size: 21px; color: #171239; margin: 0 0 14px; letter-spacing: -.035em; }
.home-process-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 40px; padding: 40px; border-radius: 28px; background: #ffedbb; }
.home-process-cta p { margin-top: 14px; color: #6d5a3d; }
.home-process-cta a { display: inline-flex; align-items: center; gap: 24px; flex-shrink: 0; padding: 18px 28px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 16px; font-weight: 700; }
.home-process-cta a:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
@media (max-width: 960px) {
  .home-process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .home-process-cta { padding: 28px; }
}
@media (max-width: 600px) {
  .home-process-heading, .home-process-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
  .home-process { margin-top: 36px; }
  .home-process h2 { font-size: 24px; }
  .home-process h3 { font-size: 19px; }
  .home-process-steps { gap: 24px 18px; }
  .home-process-cta { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}

/* Corporate training clients and example session. */
.corporate-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 32px; }
.corporate-showcase-copy h3 { color: #171239; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; margin: 0 0 18px; }
.corporate-showcase-copy > p { font-size: 15px; line-height: 1.7; color: #706f80; margin: 0; }
.corporate-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.corporate-client { position: relative; aspect-ratio: 2.5 / 1; overflow: hidden; background: white; }
.corporate-client img { position: absolute; width: 100%; height: auto; left: 0; top: 50%; transform: translateY(-50%); }
.corporate-client-mono img { filter: contrast(10); }
.corporate-example { margin: 0; }
.corporate-example > img { display: block; width: 100%; height: auto; border-radius: 18px; }
.corporate-example figcaption { margin-top: 8px; font-size: 12px; color: #706f80; }
#corporate .course-grid:empty { display: none; }
@media (max-width: 760px) {
  .corporate-showcase { grid-template-columns: 1fr; gap: 24px; }
  .corporate-clients { gap: 12px; margin-top: 20px; }
}

/* Uploaded client logos retain their original colors and proportions. */
.corporate-client-custom img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; filter: none; }

.uni-more-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
#uniPrev { margin-right: 12px; }

/* Give the two numeric stats the same scale as the hero headline. */
.hero-statbar .hcard-txt strong:has([data-count]) { white-space: nowrap; }
.hero-statbar .hcard-txt strong [data-count],
.hero-statbar .hcard-txt strong:has([data-count]) > em { font-size: var(--fs-h1); line-height: 1.1; }

/* Keep all three stat headlines at the hero title scale. */
.hero-statbar .hcard-txt strong { font-size: var(--fs-h1); line-height: 1.1; }
.hero-statbar .hcard-txt strong:has([data-count]) { white-space: normal; }
.hero-statbar .hcard-txt { flex: 1; }


/* Hero photos: right-sized image per screen (set as CSS variables in front-page.php) */
.hero-bg-slide { background-image: var(--hero-bg); }
@media (max-width: 768px) { .hero-bg-slide { background-image: var(--hero-bg-sm, var(--hero-bg)); } }

/* Tentang Kami: the section heading is the page's main heading (H1) but keeps the H2 look */
h1.about-h2 { font-size: var(--fs-h2); letter-spacing: -1.5px; line-height: 1.08; }


/* Floating WhatsApp button — every page (footer.php). Sits above content,
   below the phone menu (999) and the photo lightbox (9999). */
.wa-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .2s, box-shadow .2s;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(37,211,102,.45); }
.wa-float:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
@media (max-width: 600px) {
  .wa-float { width: 54px; height: 54px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .wa-float svg { width: 28px; height: 28px; }
}
@media print { .wa-float { display: none; } }
/* Desktop: the header already shows "Konsultasi Langsung via WhatsApp",
   so the floating button only appears once the header collapses (≤960px). */
@media (min-width: 961px) { .wa-float { display: none; } }