/* ========================================
   LEXA COURSE — Design System v8
   Font: Poppins + Noto Serif SC
   Primary: #820000
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Noto+Serif+SC:wght@400;700&display=swap');

/* ── TOKENS ── */
:root {
  --blue:        #820000;
  --blue-dark:   #5c0000;
  --blue-deep:   #3d0000;
  --blue-soft:   #FFF0F0;
  --blue-mid:    #FFBDBD;
  --gold:        #F5C431;
  --ink:         #0F172A;
  --ink-2:       #334155;
  --ink-3:       #64748B;
  --ink-4:       #94A3B8;
  --line:        #E2E8F0;
  --surface:     #F8FAFC;
  --white:       #FFFFFF;
  --font:        'Poppins', sans-serif;
  --font-cn:     'Noto Serif SC', serif;
  --r-sm:        8px;
  --r:           12px;
  --r-lg:        20px;
  --r-xl:        28px;
  --sh-sm:       0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --sh-md:       0 4px 20px rgba(130,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --sh-lg:       0 12px 40px rgba(130,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06);
  --sh-xl:       0 24px 64px rgba(130,0,0,0.18), 0 8px 24px rgba(0,0,0,0.07);
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --t1:          0.15s;
  --t2:          0.25s;
  --t3:          0.4s;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:var(--font)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}

/* ── LAYOUT ── */
.container {
  max-width: 1200px;   /* batas lebar */
  margin: 0 auto;      /* CENTER seluruh isi */
  padding: 0 24px;     /* jarak kiri kanan biar ga nempel */
}
.sec{padding:70px 0}
.sec-soft{background:var(--surface)}

/* ── TYPOGRAPHY SCALE ──
   h1 (page) : 700, 48–56px
   h2 (sec)  : 700, 36–44px
   h3 (card) : 600, 20–22px
   body      : 400, 16px
   small     : 300, 14px
   label     : 600, 11px uppercase
*/

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.tag::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  flex-shrink: 0;
}
.tag-center { justify-content: center; }
.tag-center::before { display: none; }
.tag-white { color: rgba(255,255,255,0.55); }
.tag-white::before { background: rgba(255,255,255,0.4); }

.heading-xl {
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.heading-xl span { color: var(--blue); }

.heading-lg {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.heading-lg span { color: var(--blue); }
.heading-lg-white { color: var(--white); }
.heading-lg-white span { color: var(--gold); }

.heading-md {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
}

.body-sm {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-3);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: all var(--t2) var(--ease);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn-blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(130,0,0,0.35);
}
.btn-blue:hover { background: var(--blue-dark); box-shadow: 0 8px 28px rgba(130,0,0,0.45); }

.btn-white {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.18); }

.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-ghost {
  background: none;
  border: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color var(--t1);
}
.btn-ghost:hover { color: var(--blue); transform: none; }
.btn-ghost .arr { transition: transform var(--t2); display: inline-block; }
.btn-ghost:hover .arr { transform: translateX(4px); }

/* ── NAVBAR ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--t3), box-shadow var(--t3), padding var(--t2);
}
.navbar.transparent { background: transparent; }
.navbar.solid {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(0,0,0,0.05);
}
.nav-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height var(--t2);
}
.navbar.solid .nav-wrap { height: 60px; }

.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
  /* Agar logo tetap terlihat di atas foto (navbar transparan) */
  filter: brightness(0) invert(1);
  transition: filter var(--t2);
}
/* Saat scroll (navbar putih), logo kembali ke warna aslinya */
.navbar.solid .nav-logo img {
  filter: none;
}
.nav-brand { display: flex; flex-direction: column; line-height: 1.1; }
.nav-name {
  
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  transition: color var(--t1);
}
.navbar.solid .nav-name { color: var(--blue); }
.nav-sub {
  font-family: var(--font-cn);
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  transition: color var(--t1);
}
.navbar.solid .nav-sub { color: var(--ink-4); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-a {
  padding: 8px 15px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: all var(--t1);
}
.nav-a:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.nav-a.active { color: var(--white); background: rgba(255,255,255,0.15); font-weight: 600; }
.navbar.solid .nav-a { color: var(--ink-2); }
.navbar.solid .nav-a:hover { color: var(--blue); background: var(--blue-soft); }
.navbar.solid .nav-a.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }

.nav-cta {
  margin-left: 10px;
  padding: 9px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: var(--white);
  transition: all var(--t2);
}
.nav-cta:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.7); transform: translateY(-1px); }
.navbar.solid .nav-cta { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 3px 12px rgba(130,0,0,0.3); }
.navbar.solid .nav-cta:hover { background: var(--blue-dark); box-shadow: 0 6px 20px rgba(130,0,0,0.4); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  border-radius: var(--r-sm);
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 1px; transition: all var(--t2); }
.navbar.solid .hamburger span { background: var(--ink); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mob-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 24px 40px;
  transform: translateY(-100%);
  transition: transform var(--t3) var(--ease);
}
.mob-menu.open { display: flex; transform: translateY(0); }
.mob-a {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  padding: 10px 32px;
  border-radius: var(--r);
  transition: all var(--t1);
  width: 100%;
  text-align: center;
}
.mob-a:hover, .mob-a.active { color: var(--blue); background: var(--blue-soft); }

/* ── HERO PHOTO ── */
.hero-wrap {
  position: relative;
  width: 100%;
  height: clamp(480px, 70vh, 780px);
  overflow: hidden;
  background: var(--blue-deep);
}
.hero-img {
  width: 100%; height: 110%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  animation: kb 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kb {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.07) translateY(-2%); }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(130,0,0,0.65) 0%, rgba(130,0,0,0.35) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 30%);
}
.hero-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 62%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.04) 20%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.90) 70%,
    var(--white) 100%);
  pointer-events: none;
}

/* ── HERO CONTENT ── */
.hero-sec { background: var(--white); padding: 0 0 90px; }
.hero-up { margin-top: -100px; position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 20px; align-items: start; }

@keyframes fy { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none} }
@keyframes fi { from{opacity:0}to{opacity:1} }
.au{animation:fy 0.8s var(--ease-out) both}
.af{animation:fi 1s var(--ease-out) both}
.d1{animation-delay:0.05s}.d2{animation-delay:0.18s}.d3{animation-delay:0.30s}
.d4{animation-delay:0.42s}.d5{animation-delay:0.55s}.d6{animation-delay:0.68s}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.hero-kicker-bar { width: 20px; height: 2px; background: var(--blue); border-radius: 1px; }

.hero-h1 {
  font-size: clamp(1.8rem, 3.9vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0;
}
.hero-h1 span { display: block; color: var(--blue); }

.hero-price {
  display: block;
  color: #820000; /* kuning soft, biar ga norak */
  font-size: clamp(1.5rem, 2.4vw, 1.5rem);
  font-weight: 800;
  margin-top: 12px;
  margin-bottom: 12px;
  
}

.price-wrapper {
  position: relative;
  display: inline-block;
}

.hero-line {
  position: absolute;
  left: 0;
  bottom: -5px; /* jarak dari teks */
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-dark), var(--white));
  border-radius: 2px;
  margin-bottom: 9px;
}

.hero-p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 350px;
  margin-bottom: 34px;
}

.hero-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 48px; }

.hero-stats { display: flex; border-top: 1px solid var(--line); padding-top: 28px; }
.hs-item { flex: 1; padding-right: 24px; border-right: 1px solid var(--line); }
.hs-item:nth-child(2) { padding: 0 24px; }
.hs-item:last-child { border-right: none; padding-right: 0; padding-left: 24px; }
.hs-n {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.hs-l {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── 3D CARD SLIDER ── */
.sl-wrap  { width:100%; display:flex; justify-content:center; padding-top:0px ; margin-top:0px ; }
.sl-root  { width:100%; max-width:440px; padding:20px 0 28px }
.sl-stage { height:320px; display:flex; align-items:center; justify-content:center; perspective:1000px; overflow:visible; position:relative }
.sl-track { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center }

.s-card {
  position: absolute;
  width: 210px; height: 275px;
  border-radius: var(--r-lg);
  background: var(--blue-soft);
  border: 1.5px solid var(--blue-mid);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  will-change: transform, opacity;
  transition: transform 0.65s var(--ease), opacity 0.65s var(--ease), box-shadow 0.65s var(--ease);
  user-select: none; overflow: hidden;
}
.s-card-top { position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:opacity 0.35s; }
.s-center .s-card-top { opacity:1 }

.s-label { font-size:9px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); opacity:0.6; margin-bottom:14px }
.s-emoji { font-size:38px; line-height:1; margin-bottom:14px; filter:drop-shadow(0 2px 6px rgba(130,0,0,0.2)) }
.s-char  { font-family:var(--font-cn); font-size:52px; font-weight:700; line-height:1; margin-bottom:10px }
.s-line  { width:28px; height:2px; margin-bottom:10px; border-radius:1px; opacity:0.5 }
.s-pin   { font-size:14px; font-weight:600; letter-spacing:0.04em; margin-bottom:4px }
.s-mean  { font-size:12px; font-weight:400; color:var(--ink-3) }

.s-center { z-index:10; transform:translateX(0) scale(1) translateZ(0) }
.s-left   { z-index:5;  transform:translateX(-215px) scale(0.78) translateZ(-70px); opacity:0.38 }
.s-right  { z-index:5;  transform:translateX(215px)  scale(0.78) translateZ(-70px); opacity:0.38 }
.s-fl     { z-index:1;  transform:translateX(-350px) scale(0.60) translateZ(-140px); opacity:0; pointer-events:none }
.s-fr     { z-index:1;  transform:translateX(350px)  scale(0.60) translateZ(-140px); opacity:0; pointer-events:none }

.sl-dots { display:flex; gap:6px; justify-content:center; margin-top:18px }
.sl-dot  { width:5px; height:5px; border-radius:50%; background:var(--line); transition:all 0.4s var(--ease); border:none; padding:0; cursor:pointer }
.sl-dot.on { width:20px; border-radius:3px; background:var(--blue) }

/* ── ONLINE LEARNING BADGE ── */
.online-badge {
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--sh-sm);
}
.ob-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
  text-align: center;
}
.ob-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ob-platform {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--t2), box-shadow var(--t2);
  cursor: default;
}
.ob-platform:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.ob-platform svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ob-tagline {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── NUMBERS BAND ── */
.band {
  background: var(--blue);
  padding: 64px 0;
  position: relative; overflow: hidden;
}
.band::after {
  content:'数字';
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-cn); font-size:20rem;
  color:rgba(255,255,255,0.03); line-height:1; pointer-events:none;
}
.band-grid { display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1 }
.band-col { text-align:center; padding:0 32px; border-right:1px solid rgba(255,255,255,0.1) }
.band-col:last-child { border-right:none }
.band-n { font-size:3.2rem; font-weight:700; color:var(--white); line-height:1; margin-bottom:6px; letter-spacing:-0.02em }
.band-l { font-size:11px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4) }

/* ── WHY ── */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.why-list { margin-top:40px }
.why-row {
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--t2);
}
.why-row:first-child { border-top:1px solid var(--line) }
.why-row:hover { padding-left:6px }
.why-n { font-size:1.1rem; font-weight:700; color:var(--blue-dark); line-height:1; width:28px; flex-shrink:0; transition:color var(--t2) }
.why-t { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px }
.why-d { font-size:14px; font-weight:300; line-height:1.72; color:var(--ink-3) }

.why-card {
  background: var(--blue-soft);
  border: 1.5px solid var(--blue-mid);
  border-radius: var(--r-xl);
  padding: 32px;
  position: relative; overflow: hidden;
}
.why-card::before {
  content: '优';
  position: absolute; right: -16px; bottom: -20px;
  font-family: var(--font-cn); font-size: 12rem;
  color: rgba(130,0,0,0.06); line-height: 1; pointer-events: none;
}

/* Highlight row */
.wc-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.wc-hl-icon {
  width: 40px; height: 40px;
  background: var(--blue-soft);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wc-hl-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px; line-height: 1.3;
}
.wc-hl-sub {
  font-size: 12px; font-weight: 400; color: var(--ink-3);
}

/* 2×2 stat grid */
.wc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.wc-stat {
  background: var(--white);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r);
  padding: 16px 18px;
  text-align: center;
}
.wc-stat-n {
  font-size: 1.9rem; font-weight: 700;
  color: var(--blue); line-height: 1; margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.wc-stat-n span { font-size: 1.1rem; }
.wc-stat-l {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-4);
  text-transform: uppercase;
}

/* Feature chip pills */
.wc-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  position: relative; z-index: 1;
}
.wc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
  font-size: 12px; font-weight: 600;
  padding: 7px 12px;
  border-radius: 100px;
}
.wc-chip svg { flex-shrink: 0; stroke: var(--blue); }

/* Keep old wc- classes for compatibility */
.wc-tag { display:none }
.wc-char{ display:none }
.wc-pin { display:none }
.wc-m   { display:none }

/* ── PROGRAM CARDS ── */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pc {
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Default (Silver & Platinum): subtle border */
.pc-s, .pc-p, .pc-b {
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.pc-s:hover, .pc-p:hover, .pc-b:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--blue-mid);
}

/* Gold: featured — full blue, elevated */
.pc-g {
  border: none;
  box-shadow: 0 20px 60px rgba(130,0,0,0.22), 0 8px 24px rgba(130,0,0,0.14);
  transform: translateY(-8px);
  z-index: 2;
}
.pc-g:hover {
  transform: translateY(-14px);
  box-shadow: 0 28px 80px rgba(130,0,0,0.28), 0 10px 32px rgba(130,0,0,0.18);
}

/* "Terpopuler" badge on Gold */
.pc-g::before {
  display: none;
}

/* ── Card header ── */
.pc-head {
  padding: 36px 32px 28px;
  position: relative;
  overflow: hidden;
}

/* Decorative large character in bg */
.pc-head::before {
  content: attr(data-char);
  position: absolute;
  right: -8px; bottom: -16px;
  font-family: var(--font-cn);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: transform var(--t3);
}
.pc:hover .pc-head::before { transform: scale(1.08) rotate(-3deg); }

/* Subtle shimmer overlay */
.pc-head::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%);
  pointer-events: none;
}

/* Silver header */
.pc-b .pc-head {
  background: linear-gradient(145deg, #341c15 0%, #4f2a1f 50%, #7f4c3d 100%);
}
.pc-b .pc-head::before { color: rgba(255,255,255,0.08); }

.pc-s .pc-head {
  background: linear-gradient(145deg, #475569 0%, #64748b 50%, #94a3b8 100%);
}
.pc-s .pc-head::before { color: rgba(255,255,255,0.08); }

/* Gold header */
.pc-g .pc-head {
  background: linear-gradient(145deg, #171616 0%, #1a1715 40%, #585149 80%, #b4b0aa 100%);
}
.pc-g .pc-head::before { color: rgba(255,255,255,0.09); }

/* Platinum header */
.pc-p .pc-head {
  background: linear-gradient(145deg, #8a6d0d 0%, #b18e02 40%, #f2c309 80%, #d6be5d 100%);
}
.pc-p .pc-head::before { color: rgba(255,255,255,0.08); }

/* Tier badge pill */
.pc-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  width: fit-content;
  backdrop-filter: blur(4px);
}

.pc-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.pc-tag {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  position: relative;
  z-index: 1;
}

/* ── Stats row below header ── */
.pc-stats {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.pc-g .pc-stats { border-color: rgba(130,0,0,0.12); }

.pc-stat {
  flex: 1;
  padding: 18px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.pc-stat:last-child { border-right: none; }
.pc-g .pc-stat { border-color: rgba(130,0,0,0.12); }

.pc-stat-n {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.pc-stat-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── Card body ── */
.pc-body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; }

.pc-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 28px;
  flex: 1;
}

.pc-li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}

.pc-ck {
  width: 18px; height: 18px;
  background: var(--blue-soft);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0px;
}
.pc-ck svg { width: 8px; height: 8px; }

/* Featured Gold check — blue bg */
.pc-g .pc-ck {
  background: var(--blue-soft);
}
.pc-g .pc-ck svg { stroke: var(--blue-deep); }

.pc-btn {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--r);
  transition: all var(--t2);
  letter-spacing: 0.01em;
  margin-top: auto;
}

.pc-blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(130,0,0,0.35);
}
.pc-blue:hover {
  background: var(--blue-dark);
  box-shadow: 0 8px 24px rgba(130,0,0,0.45);
  transform: translateY(-1px);
}

.pc-ol {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
.pc-ol:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
}

/* Deprecated - keep for backwards compat */
.pc-meta { display:none }
.pc-mv   { display:none }
.pc-ml   { display:none }
.pc-div  { display:none }

/* Gold card body accent */
.pc-g .pc-body {
  background: linear-gradient(180deg, #fff0f0 0%, var(--white) 60%);
}
.pc-g .pc-stat-n { color: var(--ink); }
.pc-g .pc-li { color: var(--ink); }

/* prog-grid wrapper: extra padding-top to accommodate Gold's upward shift + badge */
.prog-grid-wrap { padding-top: 24px; }

@media (max-width: 1024px) {
  .pc-g { transform: none; }
  .pc-g:hover { transform: translateY(-8px); }
  .pc-g::before { border-radius: 0 12px 12px 0; top: 16px; left: -1px; transform: none; padding: 4px 14px 4px 10px; }
}

/* PRICE */

.pc-price{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  position:relative;
  z-index:1;
}

.pc-price-val{
  font-size:1.8rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:-0.02em;
  line-height:1;
}

.pc-price-per{
  font-size:12px;
  font-weight:500;
  color:rgb(251, 255, 0);
  margin-bottom:3px;
}

/* ── HOW IT WORKS ── */
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:56px }
.how-step { position:relative }
.how-num {
  font-size:3rem; font-weight:800; color:var(--blue-deep);
  line-height:1; margin-bottom:16px; transition:color var(--t2);
}

.how-line { position:absolute; top:20px; right:-16px; width:32px; height:1px; background:var(--line) }
.how-step:last-child .how-line { display:none }
.how-icon { width:44px; height:44px; background:var(--blue-soft); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px }
.how-t { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:8px }
.how-d { font-size:14px; font-weight:300; line-height:1.72; color:var(--ink-3) }

/* ── TESTIMONIALS ── */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
.tc {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px 28px; transition:all var(--t3) var(--ease);
}
.tc:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--blue-mid) }
.tc-q { font-size:3rem; font-weight:800; color:var(--blue-mid); line-height:0.75; margin-bottom:14px }
.tc-t { font-size:14px; font-weight:300; line-height:1.78; color:var(--ink-2); margin-bottom:22px }
.tc-auth { display:flex; align-items:center; gap:12px }
.tc-av { width:42px; height:42px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }
.tc-name { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px }
.tc-role { font-size:12px; font-weight:300; color:var(--ink-4) }
.tc-stars{ color:#F59E0B; font-size:11px; letter-spacing:1px; margin-top:2px }

/* ── TEACHERS ── */
.teacher-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
.tcard {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; transition:all var(--t3) var(--ease);
}
.tcard:hover { transform:translateY(-5px); box-shadow:var(--sh-xl); border-color:var(--blue-mid) }
.tcard-img { height:190px; background:linear-gradient(135deg,var(--blue-soft),#ffd5d5); display:flex; align-items:center; justify-content:center; font-size:4.5rem; position:relative; overflow:hidden }
.tcard-img::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(130,0,0,0.07),transparent 55%) }
.tcard-body { padding:24px }
.tcard-name { font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:3px }
.tcard-role { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); margin-bottom:12px }
.tcard-bio  { font-size:14px; font-weight:300; line-height:1.72; color:var(--ink-3); margin-bottom:16px }
.tcard-tags { display:flex; gap:6px; flex-wrap:wrap }
.tcard-tag  { font-size:11px; font-weight:600; padding:3px 10px; background:var(--blue-soft); color:var(--blue); border-radius:100px }

/* ── FAQ ── */
.faq-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:42px;
}
.faq-side-body{ font-size:15px; font-weight:300; line-height:1.75; color:var(--ink-2); margin-top:14px; max-width:500px; align-items: center; }
.faq-wa {
  display:inline-flex; align-items:center; gap:6px; margin-top:22px;
  font-size:14px; font-weight:600; color:var(--blue);
  border-bottom:1px solid rgba(130,0,0,0.3); padding-bottom:2px;
  transition:border-color var(--t1);
}
.faq-wa:hover { border-color:var(--blue) }
.faq-item { border-bottom:1px solid var(--line) }
.faq-btn {
  width:100%; background:none; border:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; text-align:left;
  font-size:15px; font-weight:500; color:var(--ink);
  transition:color var(--t1);
}
.faq-btn:hover,.faq-btn.on { color:var(--blue) }
.faq-ico { width:18px; height:18px; flex-shrink:0; transition:transform var(--t3) var(--ease); color:var(--ink-4) }
.faq-btn.on .faq-ico { transform:rotate(45deg); color:var(--blue) }
.faq-ans {
  font-size:14px; font-weight:300; line-height:1.78; color:var(--ink-3);
  max-height:0; overflow:hidden;
  transition:max-height 0.45s var(--ease), padding var(--t2);
}
.faq-ans.on { max-height:300px; padding-bottom:20px }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: var(--blue);
  padding: 130px 0 60px;
  text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: attr(data-cn);
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-cn); font-size: 22rem;
  color: rgba(255,255,255,0.04); line-height: 1; pointer-events: none;
}
.ph-tag { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); display:block; margin-bottom:14px }
.ph-h1 { font-size:clamp(2rem,3.5vw,2.8rem); font-weight:700; letter-spacing:-0.015em; color:var(--white); line-height:1.2; margin-bottom:14px }
.ph-p  { font-size:1rem; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.65); max-width:520px; margin:0 auto }

/* ── CTA SECTION ── */
.cta-sec {
  background: var(--blue);
  padding: 80px 0; text-align: center;
  position: relative; overflow: hidden;
}
.cta-sec::before {
  content:'语'; font-family:var(--font-cn); font-size:34rem;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:rgba(255,255,255,0.03); line-height:1; pointer-events:none;
}
.cta-inner { position:relative; z-index:1; max-width:580px; margin:0 auto }
.cta-tag  { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.42); display:block; margin-bottom:14px }
.cta-h2   { font-size:clamp(2rem,3.8vw,3.2rem); font-weight:700; letter-spacing:-0.02em; color:var(--white); line-height:1.15; margin-bottom:16px }
.cta-h2 span { color:var(--gold) }
.cta-p    { font-size:1rem; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.65); margin-bottom:36px }

/* ── VISI MISI (tentang) ── */
.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px }
.vm-card {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:36px 32px; position:relative; overflow:hidden; transition:all var(--t3);
}
.vm-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg) }
.vm-lbl { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px }
.vm-h   { font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:12px }
.vm-p   { font-size:14px; font-weight:300; line-height:1.75; color:var(--ink-3) }
.vm-num {
  position:absolute; bottom:-12px; right:16px;
  font-size:5rem; font-weight:800; color:var(--surface);
  line-height:1; user-select:none; pointer-events:none;
}

/* ── STAT ROW (tentang) ── */
.stat-row { display:flex; gap:40px; margin-top:36px; padding-top:36px; border-top:1px solid var(--line) }
.stat-item-n { font-size:2.4rem; font-weight:700; color:var(--blue); letter-spacing:-0.02em; line-height:1; margin-bottom:4px }
.stat-item-l { font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-4) }

/* ── VISION GRID (tentang) ── */
.vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.vision-right {
  background:linear-gradient(135deg,var(--blue-soft),#fff);
  border:1px solid var(--blue-mid);
  border-radius:var(--r-xl);
  height:420px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.vision-cn { font-family:var(--font-cn); font-size:10rem; color:var(--blue); opacity:0.35; line-height:1; position:relative; z-index:1 }
.vision-cn2{ position:absolute; bottom:20px; right:24px; font-family:var(--font-cn); font-size:3rem; color:var(--blue); opacity:0.15 }

/* ── GALLERY (media) ── */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; margin-top:40px }
.gallery-item {
  border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3;
  background:var(--blue-soft); cursor:pointer; transition:all var(--t3);
  position:relative;
}
.gallery-item:hover { transform:scale(1.02) }
.gallery-item:hover .gallery-ov { opacity:1 }
.gallery-img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s var(--ease) }
.gallery-item:hover .gallery-img { transform:scale(1.08) }
.gallery-ph {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--blue); font-size:2.5rem; background:linear-gradient(135deg,var(--blue-soft),#fff);
}
.gallery-ph span { font-size:13px; font-weight:400; color:var(--ink-4) }
.gallery-ov {
  position:absolute; inset:0;
  background:rgba(130,0,0,0.65); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.3s; font-size:2rem; color:var(--white);
}

/* ── VIDEO (media) ── */
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:40px }
.video-card {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; transition:all var(--t3);
}
.video-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.video-embed { position:relative; padding-bottom:56.25%; height:0; overflow:hidden }
.video-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none }
.video-info { padding:18px 22px }
.video-title{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px }
.video-desc { font-size:13px; font-weight:300; color:var(--ink-4) }

/* ── TABS (media) ── */
.tab-group {
  display:flex; gap:6px; background:var(--surface);
  padding:5px; border-radius:100px; width:fit-content; margin:0 auto 48px;
}
.tab-btn {
  padding:9px 24px; border-radius:100px; border:none;
  font-family:var(--font); font-size:14px; font-weight:500;
  color:var(--ink-3); cursor:pointer; transition:all var(--t2); background:transparent;
}
.tab-btn.on { background:var(--white); color:var(--blue); font-weight:600; box-shadow:var(--sh-sm) }
.tab-content { display:none }
.tab-content.on { display:block; animation:fy 0.4s var(--ease) }

/* ── BOOKING (jadwal) ── */
.booking-wrap { max-width:1100px; margin:0 auto }
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Hide scrollbar visually but keep scrollable */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.steps-bar::-webkit-scrollbar { display: none; }

.step-item { display:flex; align-items:center; flex-shrink:0 }
.step-dot {
  width:40px; height:40px; border-radius:50%;
  background:var(--line); color:var(--ink-4); font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t2); flex-shrink:0;
}
.step-item.cur .step-dot,.step-item.done .step-dot {
  background:var(--blue); color:var(--white); box-shadow:0 3px 12px rgba(130,0,0,0.35);
}
.step-lbl { font-size:12px; font-weight:500; color:var(--ink-4); white-space:nowrap; margin:0 10px; transition:color var(--t1) }
.step-item.cur .step-lbl { color:var(--blue); font-weight:600 }
.step-conn { width:32px; height:1px; background:var(--line); flex-shrink:0; transition:background var(--t2) }
.step-conn.done { background:var(--blue) }

/* ── STEPS BAR MOBILE ── */
@media (max-width: 768px) {
  .steps-bar {
    justify-content: flex-start;
    gap: 0;
    padding: 12px 16px 16px;
    margin-bottom: 28px;
    /* Smooth scroll snap */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Subtle fade edges to indicate scrollability */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  .step-item {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    scroll-snap-align: center;
    padding: 0 4px;
  }

  /* Dot lebih kecil di mobile */
  .step-dot {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  /* Label vertikal di bawah dot */
  .step-lbl {
    font-size: 10px;
    margin: 0;
    text-align: center;
    line-height: 1.3;
  }

  /* Connector lebih tipis, pendek */
  .step-conn {
    width: 20px;
    height: 1.5px;
    align-self: flex-start;
    margin-top: 17px; /* sejajar tengah dot */
  }

  /* Step aktif: sedikit lebih besar */
  .step-item.cur .step-dot {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

.booking-panel {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:44px;
  box-shadow:var(--sh-md);
}
.panel-h { font-size:1.5rem; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:-0.01em }
.panel-sub{ font-size:14px; font-weight:300; color:var(--ink-3); margin-bottom:32px }

.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px }
.pkg-opt {
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 16px;
  text-align:center; cursor:pointer; transition:all var(--t2);
}
.pkg-opt:hover { border-color:var(--blue); transform:translateY(-3px) }
.pkg-opt.on { border-color:var(--blue); background:var(--blue-soft) }
.pkg-ico  { font-size:1.6rem; margin-bottom:8px }
.pkg-name { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:3px }
.pkg-detail{ font-size:12px; font-weight:300; color:var(--ink-4) }

.form-group { margin-bottom:20px }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px }
.form-label span { font-weight:300; color:var(--ink-4) }
.form-control {
  width:100%; padding:12px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font); font-size:15px; font-weight:400; color:var(--ink);
  background:var(--white); transition:all var(--t1); appearance:none; -webkit-appearance:none;
}
.form-control:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(130,0,0,0.10) }
.schedule-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }

.teacher-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px }
.teacher-opt {
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:18px 14px;
  text-align:center; cursor:pointer; transition:all var(--t2);
}
.teacher-opt:hover { border-color:var(--blue); transform:translateY(-2px) }
.teacher-opt.on { border-color:var(--blue); background:var(--blue-soft) }
.teacher-av { font-size:2.2rem; margin-bottom:8px }
.teacher-nm { font-size:14px; font-weight:600; color:var(--ink) }
.teacher-sp { font-size:12px; font-weight:300; color:var(--ink-4); margin-top:2px }

.panel-nav { display:flex; justify-content:space-between; align-items:center; margin-top:32px; padding-top:24px; border-top:1px solid var(--line) }

.step-panel { display:none }
.step-panel.on { display:block; animation:fy 0.35s var(--ease) }

.summary-box { background:var(--surface); border-radius:var(--r-lg); padding:24px; margin-bottom:24px }
.sum-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px }
.sum-row:last-child { border-bottom:none }
.sum-k { font-weight:400; color:var(--ink-3) }
.sum-v { font-weight:600; color:var(--ink) }

.alert-box { padding:14px 18px; border-radius:var(--r-sm); font-size:14px; margin-bottom:18px; display:none }
.alert-err { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA }

/* ── FOOTER ── */
.footer { background:var(--blue-deep); padding:72px 0 0 }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 60px;
}

.footer-grid > div:first-child {
  max-width: 320px;
}

.footer-logo {
  display: block;
}

.footer-logo img {
  height: 62px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}
/* Saat scroll (navbar putih), logo kembali ke warna aslinya */
.navbar.solid .footer-logo img {
  filter: none;
}
.f-logo-cn { font-family:var(--font-cn); font-size:1.6rem; color:rgba(255,255,255,0.4) }
.f-logo-name { font-size:1.05rem; font-weight:700; color:var(--white) }
.f-desc { font-size:14px; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.4); max-width:260px; margin-bottom:20px ; text-align: justify;}
.f-socials { display:flex; gap:8px }
.f-soc {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  color:var(--white); transition:all var(--t2);
}
.f-soc:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px) }
.f-col-h { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:14px }
.f-links { display:flex; flex-direction:column; gap:8px }
.f-link  { font-size:14px; font-weight:300; color:rgba(255,255,255,0.45); transition:color var(--t1) }
.f-link:hover { color:var(--white) }
.f-contact { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:300; color:rgba(255,255,255,0.45); margin-bottom:10px; transition:color var(--t1); text-align: justify;}
.f-contact:hover { color:rgba(255,255,255,0.8) }
.f-bottom {
  border-top:1px solid rgba(255,255,255,0.07);
  padding:20px 0; display:flex; justify-content:space-between; align-items:center;
  font-size:12px; font-weight:300; color:rgba(255,255,255,0.22);
}
.f-cn { font-family:var(--font-cn); font-size:12px; color:rgba(255,255,255,0.14) }

/* ── WHATSAPP FLOAT ── */
.wa-float { position:fixed; bottom:14px; right:18px; z-index:600 }
.wa-btn {
  width:54px; height:54px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 6px 20px rgba(37,211,102,0.42);
  animation:waf 3.2s ease-in-out infinite; position:relative;
}
.wa-btn::before,.wa-btn::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,0.4);
  animation:war 3.2s ease-in-out infinite;
}
.wa-btn::after { animation-delay:0.55s }
@keyframes waf { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 70%{transform:translateY(-4px)} }
@keyframes war { 0%{transform:scale(1);opacity:0.7} 100%{transform:scale(1.72);opacity:0} }
.wa-btn:hover { transform:translateY(-5px) scale(1.06) !important; animation:none; box-shadow:0 12px 30px rgba(37,211,102,0.52) !important }
.wa-ico { width:27px; height:27px; fill:var(--white); position:relative; z-index:1 }
.wa-tip {
  position:absolute; right:64px; top:50%;
  transform:translateY(-50%) translateX(6px);
  background:#075E54; color:var(--white);
  font-size:12px; font-weight:600; padding:6px 14px; border-radius:100px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:all var(--t2);
}
.wa-tip::after { content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%); border:5px solid transparent; border-right:none; border-left-color:#075E54 }
.wa-float:hover .wa-tip { opacity:1; transform:translateY(-50%) translateX(0) }

/* ── BACK TO TOP ── */
.back-top {
  position:fixed; bottom:94px; right:28px;
  width:42px; height:42px; background:var(--blue); color:var(--white);
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:0 4px 14px rgba(130,0,0,0.3);
  opacity:0; transform:translateY(14px);
  transition:all var(--t2); z-index:500;
}
.back-top.show { opacity:1; transform:translateY(0) }
.back-top:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(130,0,0,0.45) }

/* ── SCROLL ANIMATIONS ── */
.fi      { opacity:0; transform:translateY(24px); transition:opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out) }
.fi-l    { opacity:0; transform:translateX(-28px); transition:opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out) }
.fi-r    { opacity:0; transform:translateX(28px);  transition:opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out) }
.fi.vis,.fi-l.vis,.fi-r.vis { opacity:1; transform:none }
[data-d="1"]{ transition-delay:0.08s }[data-d="2"]{ transition-delay:0.16s }
[data-d="3"]{ transition-delay:0.24s }[data-d="4"]{ transition-delay:0.32s }
[data-d="5"]{ transition-delay:0.40s }

/* ── TEXT ALIGN ── */
.tc-text { text-align:center }
.tc-text .tag { justify-content:center }
.tc-text .tag::before { display:none }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; gap:40px }
  .hero-up { margin-top:-75px }
  .hero-stats { flex-wrap:wrap; gap:0 }
  .hs-item { flex:none; width:33.33%; padding:0 !important; border-right:none !important; border-bottom:1px solid var(--line); padding-bottom:14px !important }
  .why-grid,.vision-grid { grid-template-columns:1fr; gap:44px }
    .vision-grid {
    display: flex;
    flex-direction: column;
  }
  .fi-r {
    order: -1; /* gambar naik ke atas */
    margin-bottom: 20px;
  }
  .band-grid { grid-template-columns:repeat(2,1fr) }
  .band-col { padding:28px 20px; border-right:none; border-bottom:1px solid rgba(255,255,255,0.08) }
  .band-col:nth-child(2n) { border-left:1px solid rgba(255,255,255,0.08) }
  .band-col:nth-child(3),.band-col:last-child { border-bottom:none }
  .prog-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto }
  .how-grid { grid-template-columns:repeat(4,1fr) }
  .how-line { display:none }
  .testi-grid { grid-template-columns:1fr }
  .teacher-grid { grid-template-columns:1fr; max-width:380px; margin:56px auto 0 }
  .faq-layout { grid-template-columns:1fr; gap:36px }
  .vm-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px }
}
@media (max-width:768px) {
  .hero-wrap { height:clamp(320px,52vw,480px) }
  .hero-up { margin-top:-60px }
  .hero-h1 { font-size:2rem }
  .hero-stats { flex-direction:column; border-top:none; padding-top:16px }
  .hs-item { width:100%; padding:10px 0 !important; border-bottom:1px solid var(--line) !important }
  .hs-item:last-child { border-bottom:none !important }
  .sl-wrap { display:block !important }
  .sl-stage { height:365px }
  .s-card { width:285px; height:348px }
  .s-left  { transform:translateX(-155px) scale(0.77) translateZ(-70px) }
  .s-right { transform:translateX(155px)  scale(0.77) translateZ(-70px) }
  .s-char { font-size:44px }
  .how-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px }
  .how-step { padding:16px; background:var(--surface); border-radius:var(--r); }
  .how-num { font-size:1.8rem; margin-bottom:10px }
  .how-icon { width:36px; height:36px; font-size:1rem; margin-bottom:10px }
  .how-t { font-size:13px }
  .how-d { font-size:12px; line-height:1.6 }
  .footer-grid { grid-template-columns:1fr; gap:32px }
  .f-bottom { flex-direction:column; gap:6px; text-align:center }
  .booking-panel { padding:28px 20px }
  .pkg-grid { grid-template-columns:1fr }
  .schedule-row { grid-template-columns:1fr }
  .wa-float { bottom:14px; right:20px }
  .back-top { bottom:84px; right:20px }
  .nav-links { display:none }
  .hamburger { display:flex }
}
@media (max-width:480px) {
  .container { padding:0 16px; margin-bottom: -10px; }
  .hero-btns { flex-direction:column; align-items:stretch }
  .hero-btns .btn,.hero-btns .btn-ghost { width:100%; justify-content:center }
  .how-grid { gap:12px }
  .how-step { padding:12px }
  .how-num { font-size:1.5rem; margin-bottom:8px }
  .how-icon { width:30px; height:30px; font-size:0.85rem; margin-bottom:8px }
  .how-t { font-size:12px; margin-bottom:4px }
  .how-d { font-size:11px }
}

/* ── MISC ── */
.spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,0.3);
  border-top-color:var(--white); border-radius:50%;
  animation:spin 0.6s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.btn-loading { opacity:0.7; pointer-events:none }

/* ── TEACHER LOADING / EMPTY STATES ── */
.teacher-loading {
  padding: 32px 20px;
  text-align: center;
}
.teacher-empty {
  padding: 40px 20px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

/* ── GURU PHOTO GRID ── */
/* Grid foto-only untuk 40 guru, rasio portrait 9:16 */
.gp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.gp-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid var(--blue-mid);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  cursor: default;
}

.gp-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--sh-xl);
  z-index: 2;
}

/* Foto */
.gp-img {
  min-height: 100%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--t3) var(--ease);
}
.gp-card:hover .gp-img {
  transform: scale(1.04);
}

/* Placeholder jika foto belum ada / error */
.gp-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--blue-soft) 0%, #ffd5d5 100%);
  opacity: 0;
  pointer-events: none;
}
/* Tampilkan placeholder jika img gagal load */
.gp-empty .gp-placeholder {
  opacity: 1;
}
.gp-empty .gp-img {
  display: none;
}
.gp-ph-icon {
  font-size: 2.4rem;
  line-height: 1;
}
.gp-ph-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  padding: 0 8px;
}

/* Responsive */
@media (max-width: 1200px) {
  .gp-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .gp-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
  .gp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

}
@media (max-width: 480px) {
  .gp-grid { grid-template-columns: repeat(1, 1fr); gap: 10px; }
}

@media (max-width:768px) {
  .fi, .fi-l, .fi-r {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DROPDOWN NAVIGATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-item { position: relative; }

.nav-a-drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: all var(--t1);
  cursor: pointer;
  user-select: none;
}
.nav-a-drop:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.nav-a-drop.active { color: var(--white); background: rgba(255,255,255,0.15); font-weight: 600; }
.navbar.solid .nav-a-drop { color: var(--ink-2); }
.navbar.solid .nav-a-drop:hover { color: var(--blue); background: var(--blue-soft); }
.navbar.solid .nav-a-drop.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }


.nav-item.open .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-item.open .drop-arrow { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t2), transform var(--t2);
  z-index: 200;
}

.nav-item.open .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Arrow tip */
.dropdown::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}

.drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  transition: background var(--t1);
  text-decoration: none;
}
.drop-item:hover { background: var(--blue-soft); }
.drop-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.drop-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.drop-sub   { font-size: 11px; font-weight: 400; color: var(--ink-4); margin-top: 1px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROGRAM TYPE TABS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prog-tabs {
  display: flex;
  gap: 8px;
  background: var(--surface);
  padding: 6px;
  border-radius: 100px;
  width: fit-content;
  margin: 0 auto 0px;
  border: 1px solid var(--line);
}
.prog-tab {
  padding: 10px 28px;
  border-radius: 100px;
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--t2);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prog-tab.on {
  background: var(--white);
  color: var(--blue);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.prog-tab:hover:not(.on) { color: var(--ink); background: rgba(255,255,255,0.6); }

.prog-tab-content { display: none; }
.prog-tab-content.on { display: block; animation: fy 0.35s var(--ease); }

@media (max-width: 768px) {
  #price {
    font-size: 21px; /* sesuaikan, coba 22px–28px */
  }

  .hero-price {
    font-size: 21px;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRICE DISPLAY IN CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pc-price-wrap {
  padding: 18px 28px 0;
  border-top: 1px solid var(--line);
}
.pc-g .pc-price-wrap { border-color: rgba(130,0,0,0.12); }

.pc-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pc-price-curr {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
.pc-price-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.pc-g .pc-price-num { color: var(--ink-2); }
.pc-price-per {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-4);
}
.pc-price-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-4);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOOKING STEP 1 — IMPROVED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pkg-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.pkg-type-btn {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t2);
  background: var(--white);
}
.pkg-type-btn:hover { border-color: var(--blue); transform: translateY(-2px); }
.pkg-type-btn.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 4px 16px rgba(130,0,0,0.12);
}
.pkg-type-icon {
  width: 44px; height: 44px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 10px;
}
.pkg-type-name  { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pkg-type-desc  { font-size: 11px; font-weight: 400; color: var(--ink-4); line-height: 1.4; }
.pkg-type-btn.on .pkg-type-name { color: var(--blue); }

.pkg-divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  margin: 4px 0 16px;
  position: relative;
}
.pkg-divider::before, .pkg-divider::after {
  content: '';
  position: absolute;
  top: 50%; width: 38%;
  height: 1px;
  background: var(--line);
}
.pkg-divider::before { left: 0; }
.pkg-divider::after  { right: 0; }

/* Revamped package option cards */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pkg-opt {
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t2);
  background: var(--white);
  position: relative;
}
.pkg-opt:hover { border-color: var(--blue-mid); transform: translateY(-3px); box-shadow: var(--sh-md); }
.pkg-opt.on    { border-color: var(--blue); box-shadow: 0 4px 20px rgba(130,0,0,0.18); }

/* Colour strip at top */
.pkg-opt-head {
  height: 6px;
  background: var(--line);
}
.pkg-opt[data-pkg="silver"] .pkg-opt-head { background: linear-gradient(90deg, #64748b, #94a3b8); }
.pkg-opt[data-pkg="gold"]   .pkg-opt-head { background: linear-gradient(90deg, #b45309, #f59e0b); }
.pkg-opt[data-pkg="platinum"] .pkg-opt-head { background: linear-gradient(90deg, #820000, #c04040); }

/* Private variants */
.pkg-opt[data-pkg="silver-private"]   .pkg-opt-head { background: linear-gradient(90deg, #64748b, #94a3b8); }
.pkg-opt[data-pkg="gold-private"]     .pkg-opt-head { background: linear-gradient(90deg, #b45309, #f59e0b); }
.pkg-opt[data-pkg="platinum-private"] .pkg-opt-head { background: linear-gradient(90deg, #820000, #c04040); }
.pkg-opt[data-pkg="silver-sg"]   .pkg-opt-head { background: linear-gradient(90deg, #64748b, #94a3b8); }
.pkg-opt[data-pkg="gold-sg"]     .pkg-opt-head { background: linear-gradient(90deg, #b45309, #f59e0b); }
.pkg-opt[data-pkg="platinum-sg"] .pkg-opt-head { background: linear-gradient(90deg, #820000, #c04040); }

.pkg-opt-body { padding: 16px 16px 18px; }
.pkg-opt-tier { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.pkg-opt-name { font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 6px; }
.pkg-opt.on .pkg-opt-name { color: var(--blue); }
.pkg-opt-freq { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; }
.pkg-opt-price { font-size: 1.3rem; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; line-height: 1; }
.pkg-opt-price-per { font-size: 10px; font-weight: 400; color: var(--ink-4); margin-top: 2px; }

/* Selected checkmark */
.pkg-opt::after {
  content: '✓';
  position: absolute;
  top: 14px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--t2);
}
.pkg-opt.on::after { opacity: 1; }

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

/* ── PROGRAM TYPE SECTION ── */
.prog-type-section { margin-bottom: 0; }
.prog-type-header  { margin-bottom: 0px; }

/* Gold "Terpopuler" ribbon — reposition since we removed ::before */
.pc { position: relative; }
.pc-g-badge {
  position: absolute;
  top: 22px;
  right: -30px;
  width: 130px;
  text-align: center;
  background: var(--gold);
  color: #7c5a00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 0;
  transform: rotate(45deg);
  z-index: 5;
  border-radius: 0;
  white-space: nowrap;
}

/* Price wrap sits between stats and body */
.pc-price-wrap {
  padding: 16px 24px 14px;
  border-top: 1px solid var(--line);
}
.pc-g .pc-price-wrap { border-color: rgba(130,0,0,0.12); }
.pc-price {
  display: flex; align-items: baseline; gap: 3px; margin-bottom: 3px;
}
.pc-price-curr { font-size: 14px; font-weight: 600; color: #475a747e; }
.pc-price-num  {
  font-size: 2rem; font-weight: 800; color: #475a747e;
  letter-spacing: -0.03em; line-height: 1;
}
.pc-g .pc-price-num { color: #475a747e; }
.pc-price-note { font-size: 11px; font-weight: 400; color: var(--ink-4); line-height: 1.5; }

/* ── PROG TABS ── */
.prog-tabs {
  display: flex; gap: 6px;
  background: var(--surface);
  padding: 5px; border-radius: 100px;
  border: 1px solid var(--line);
}
.prog-tab {
  padding: 10px 24px; border-radius: 100px; border: none;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
  transition: all var(--t2); background: transparent;
  display: flex; align-items: center; gap: 7px;
}
.prog-tab.on { background: var(--white); color: var(--blue); font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.prog-tab:hover:not(.on) { color: var(--ink); background: rgba(255,255,255,0.6); }
.prog-tab-content { display: none; }
.prog-tab-content.on { display: block; animation: fy 0.35s var(--ease); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOOKING STEP 1 — REVAMPED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Jenis kelas row */
.bk-type-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px;
}
.bk-type-btn {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 10px;
  text-align: center; cursor: pointer;
  transition: all var(--t2); background: var(--white);
}
.bk-type-btn:hover { border-color: var(--blue-mid); transform: translateY(-2px); }
.bk-type-btn.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 4px 14px rgba(130,0,0,0.12); }
.bk-type-icon  {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin: 0 auto 8px; background: var(--surface);
}
.bk-type-btn.on .bk-type-icon { background: var(--white); }
.bk-type-name  { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.bk-type-btn.on .bk-type-name { color: var(--blue); }
.bk-type-siswa { font-size: 11px; font-weight: 400; color: var(--ink-4); }

.bk-divider {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  text-align: center; margin: 16px 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.bk-divider::before,.bk-divider::after { content:''; flex:1; height:1px; background:var(--line); }

/* Revamped pkg-opt cards */
.pkg-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pkg-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

@media (max-width: 860px) {
  .pkg-grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .pkg-grid-4 { grid-template-columns: 1fr; }
}
.pkg-opt {
  border: 2px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; transition: all var(--t2);
  background: var(--white); position: relative;
}
.pkg-opt:hover { border-color: var(--blue-mid); transform: translateY(-3px); box-shadow: var(--sh-md); }
.pkg-opt.on    { border-color: var(--blue); box-shadow: 0 4px 18px rgba(130,0,0,0.18); }

.pkg-opt-strip { height: 5px; }
.pkg-opt[data-pkg*="silver"] .pkg-opt-strip { background: linear-gradient(90deg,#64748b,#94a3b8); }
.pkg-opt[data-pkg*="gold"]   .pkg-opt-strip { background: linear-gradient(90deg,#ffe602,#ffd500); }
.pkg-opt[data-pkg*="platinum"] .pkg-opt-strip { background: linear-gradient(90deg,#434141,#544f4f); }

.pkg-opt-body { padding: 14px 14px 16px; }
.pkg-opt-tier  { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.pkg-opt-name  { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 5px; }
.pkg-opt.on .pkg-opt-name { color: var(--blue); }

.pkg-opt-features {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
}
.pkg-opt-feat {
  font-size: 11px; font-weight: 400; color: var(--ink-3);
  display: flex; align-items: center; gap: 5px;
}
.pkg-opt-feat::before { content: '·'; color: var(--blue); font-weight: 700; font-size: 14px; line-height: 1; }

.pkg-opt-price { font-size: 1.15rem; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; line-height: 1; }
.pkg-opt-per   { font-size: 10px; font-weight: 400; color: var(--ink-4); margin-top: 2px; }

/* Checkmark badge when selected */
.pkg-opt::after {
  content: '✓'; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--t2);
}
.pkg-opt.on::after { opacity: 1; }

@media (max-width: 600px) {
  .bk-type-row { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid    { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .bk-type-row { grid-template-columns: 1fr; }
}

.teacher-opts.horizontal {
  display: flex;
  gap: 16px;
  overflow-x: auto;
}

.teacher-img-lg {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
}

/* MOBILE DROPDOWN */
.mob-item {
  display: flex;
  flex-direction: column;
}

.mob-drop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.mob-arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* submenu */
.mob-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 12px;
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease;
}

.mob-sub-a {
  display: block;
  padding: 10px 0;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.8;
}

/* aktif */
.mob-item.active .mob-sub {
  max-height: 300px;
  display: flex;
}

.mob-item.active .mob-arrow {
  transform: rotate(180deg);
}

/* FIX MOBILE OVERFLOW */
html, body {
  overflow-x: visible;
}


@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .s-left,
  .s-right,
  .s-fl,
  .s-fr {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  .s-center {
    transform: scale(1);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEACHER OPTS — ukuran card konsisten
   Card selalu 140px, tidak melar/mengecil
   berapa pun jumlah guru yang tersedia
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Override grid lama */
.teacher-opts {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center; /* tengah jika guru sedikit */
}

.teacher-opt {
  width: 280px;
  flex: 0 0 280px;
  box-sizing: border-box;
}

.teacher-img {
  width: 240px;
  height: 390px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  display: block;
  margin: 0 auto 12px;
  border: 2px solid var(--line);
  transition: border-color var(--t2);
  background: var(--surface);
}

.teacher-opt:hover .teacher-img,
.teacher-opt.on    .teacher-img {
  border-color: var(--blue);
}

/* Tablet */
@media (max-width: 1024px) {
  .teacher-opt {
    width: 200px;
    flex: 0 0 200px;
  }
  .teacher-img {
    width: 170px;
    height: 275px;
  }
}

/* Mobile landscape / tablet kecil */
@media (max-width: 768px) {
  .teacher-opts {
    gap: 10px;
  }
  .teacher-opt {
    width: 160px;
    flex: 0 0 160px;
  }
  .teacher-img {
    width: 136px;
    height: 220px;
    border-radius: 10px;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .teacher-opts {
    gap: 8px;
  }
  .teacher-opt {
    width: calc(50% - 8px); /* 2 kolom pas di layar kecil */
    flex: 0 0 calc(50% - 8px);
  }
  .teacher-img {
    width: 100%;
    height: 180px;
    border-radius: 8px;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIX: Slider bocor ke kanan
   Hanya sl-wrap yang perlu dikunci —
   kartu tetap visible, tidak terpotong
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-wrap { overflow: hidden; }
body     { overflow-x: hidden; }

/* ── VISION PHOTO ── */
.vision-right {
  padding: 0;
  overflow: hidden;
}

.vision-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: var(--r-xl);
  transition: transform var(--t3) var(--ease);
}

.vision-right:hover .vision-img {
  transform: scale(1.03);
}

/* Teks CN hanya muncul jika foto gagal load (fallback) */
.vision-fallback-only {
  display: none;
}

.vision-right.vision-fallback .vision-fallback-only {
  display: block;
}

@media (max-width: 768px) {
  .why-n {
    color: var(--blue);
  }
  .how-num {
    color: var(--blue-mid);
  }
}

.pc-head::before {
  font-size: 4rem;
  bottom: unset;
  top: 12px;
  right: 16px;
}
 .tujuan-opt {
      border: 1.5px solid var(--line);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
      cursor: pointer;
      transition: all var(--t2);
      background: var(--white);
      text-align: center;
      line-height: 1.4;
    }
    .tujuan-opt:hover {
      border-color: var(--blue);
      color: var(--blue);
      transform: translateY(-2px);
    }
    .tujuan-opt.on {
      border-color: var(--blue);
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 600;
    }

    .why-card {
  border-radius: 20px;
  overflow: hidden;
}

.why-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-bottom: 0px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   YT VIDEO CARDS — Profesional Grid
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.yt-section {
  margin-top: 48px;
  margin-bottom: 16px;
}

.yt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.yt-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  min-width: 500px;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  display: flex;
  flex-direction: column;
}

.yt-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

/* Aspect ratio 16:9 untuk iframe */
.yt-thumb-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #0F172A;
  overflow: hidden;
}

.yt-thumb-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 2;
  pointer-events: auto;
}

/* Garis aksen merah di atas card */
.yt-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #c04040);
  flex-shrink: 0;
}

.yt-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.yt-card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.yt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

.yt-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}

.yt-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  padding: 9px 16px;
  border: 1.5px solid var(--blue-mid);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  transition: all var(--t2) var(--ease);
  align-self: flex-start;
  margin-top: auto;
  white-space: nowrap;
}

.yt-watch-btn:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(130,0,0,0.28);
}

/* Tablet */
/* Tablet: 2 per baris, tetap centered */
@media (max-width: 900px) {
  .yt-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: 260px;
  }
}

/* Mobile: 1 per baris, full width, centered */
@media (max-width: 580px) {
  .yt-grid {
    gap: 16px;
  }
  .yt-card {
    flex: 0 0 100%;
    max-width: 480px;
    min-width: unset;
    width: 100%;
  }
}

/* ─ legacy yt-frame (jika masih dipakai halaman lain) ─ */
.yt-frame {
  position: relative;
  z-index: 1;
}

.yt-frame iframe {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STEP 3 — Tujuan Belajar
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Section label */
.tj-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tj-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Skill Cards (4 pilihan dasar) ── */
.tj-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tj-skill-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 18px 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t2) var(--ease);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
}
.tj-skill-card:hover {
  border-color: var(--blue-mid);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}
.tj-skill-card.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 4px 16px rgba(130,0,0,0.12);
}
.tj-skill-card.on::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tj-skill-icon { font-size: 1.75rem; line-height: 1; }
.tj-skill-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.tj-skill-card.on .tj-skill-name { color: var(--blue); }
.tj-skill-desc { font-size: 11px; color: var(--ink-4); line-height: 1.4; }

/* ── Cert list: accordion vertikal ── */
.tj-cert-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.tj-cert-row {
  border-bottom: 1px solid var(--line);
}
.tj-cert-row:last-child { border-bottom: none; }

.tj-cert-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--t1);
  gap: 12px;
}
.tj-cert-btn:hover { background: var(--surface); }
.tj-cert-row.open > .tj-cert-btn { background: var(--blue-soft); }

.tj-cert-left {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  min-width: 0;
}

/* Badges */
.tj-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tj-badge-hsk  { background: #EFF6FF; color: #1d4ed8; }
.tj-badge-hskk { background: #F5F3FF; color: #6d28d9; }
.tj-badge-bct  { background: #FFF7ED; color: #b45309; }
.tj-badge-yct  { background: #F0FDF4; color: #15803d; }

.tj-cert-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.tj-cert-row.open .tj-cert-name { color: var(--blue); }
.tj-cert-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-4);
}
.tj-cert-selected {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 2px;
}
.tj-cert-selected-active {
  color: var(--blue) !important;
  font-weight: 600;
}

.tj-arr {
  width: 16px; height: 16px;
  color: var(--ink-4);
  flex-shrink: 0;
  transition: transform var(--t2) var(--ease), color var(--t1);
}
.tj-cert-row.open .tj-arr { transform: rotate(180deg); color: var(--blue); }

/* Panel level — expand in-place, tidak floating */
.tj-cert-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), padding 0.3s;
  padding: 0 18px;
  background: var(--surface);
  border-top: 0px solid var(--line);
}
.tj-cert-row.open .tj-cert-panel {
  max-height: 400px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}

/* Level grid */
.tj-level-grid {
  display: grid;
  gap: 8px;
}
.tj-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tj-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tj-grid-4 { grid-template-columns: repeat(4, 1fr); }

.tj-lvl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t2) var(--ease);
  font-family: var(--font);
}
.tj-lvl:hover {
  border-color: var(--blue-mid);
  background: var(--blue-soft);
  color: var(--blue);
}
.tj-lvl.on {
  border-color: var(--blue);
  background: var(--blue);
}
.tj-lvl-main {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.tj-lvl.on .tj-lvl-main { color: #fff; }
.tj-lvl-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-4);
  margin-left: auto;
  white-space: nowrap;
}
.tj-lvl.on .tj-lvl-sub { color: rgba(255,255,255,0.7); }

/* Dots warna level */
.tj-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tj-dot-green { background: #22c55e; }
.tj-dot-blue  { background: #3b82f6; }
.tj-dot-red   { background: var(--blue); }
.tj-lvl.on .tj-dot { opacity: 0.7; }

/* Lainnya */
.tj-other-wrap { margin-top: 16px; display: flex; }
.tj-other-card { width: 140px; }

/* Responsive */
@media (max-width: 680px) {
  .tj-skill-grid { grid-template-columns: repeat(2, 1fr); }
  .tj-grid-3, .tj-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tj-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .tj-grid-3, .tj-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GURU CARD FULL — card pengajar dengan foto + level
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Grid wrapper */
/* ══════════════════════════════════════════════════
   GRID GURU
   • Mobile  (< 640px)   → 1 kolom
   • Laptop  (640–1099px) → 2 kolom  
   • PC besar (≥ 1100px)  → 3 kolom
   Card lebar FIXED 300px — tidak pernah gepeng,
   kalau tidak muat geser ke baris berikutnya.
══════════════════════════════════════════════════ */
.teacher-opts {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;
  justify-content: start;
}

@media (max-width: 1099px) {
  .teacher-opts {
    grid-template-columns: repeat(2, 300px);
  }
}

@media (max-width: 639px) {
  .teacher-opts {
    grid-template-columns: 300px;
    justify-content: center;
  }
}

/* Card utama — lebar FIXED 300px, tidak pernah gepeng */
.teacher-opt.guru-card-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 300px;
  min-width: 300px;
  max-width: 300px;
  box-sizing: border-box;

  padding: 18px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t2);
}

.teacher-opt.guru-card-full:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.teacher-opt.guru-card-full.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 4px 16px rgba(130,0,0,0.12);
}

/* Foto dalam card: tinggi FIXED, tidak pernah gepeng */
.guru-card-foto-wrap {
  width: 100%;
  height: 450px;
  flex-shrink: 0;        /* ← KUNCI: tidak pernah ikut menyempit */
  margin-bottom: 12px;

  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--line);
}

.guru-card-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1; /* ⬅️ ini bikin dia penuh */
}

.guru-card-foto-wrap .teacher-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
  border: none;
  margin: 0;
}
.teacher-opt.guru-card-full.on .guru-card-foto-wrap {
  border-color: var(--blue);
}

/* Info teks */
.guru-card-info { flex: 1; min-width: 0; }

.guru-card-nama {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.guru-card-status {
  margin-top: 6px;
}
.teacher-opt.guru-card-full.on .guru-card-nama { color: var(--blue); }

/* Badge level */
.guru-card-levels {
  display: flex;
  flex-direction: column; /* ⬅️ penting */
  gap: 6px;
  margin-bottom: 7px;
}
.guru-level-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center; /* ⬅️ biar center */
}

.guru-level-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid var(--blue-mid);
  white-space: nowrap;
  line-height: 1.5;
}

.teacher-opt.guru-card-full.on .guru-level-badge {
  background: rgba(130,0,0,0.1);
  border-color: rgba(130,0,0,0.2);
}

.guru-card-bio {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 6px;
}

.guru-card-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  margin-top: auto;
}

/* ── Admin suggest banner (compact, below teacher grid) ── */
.admin-suggest-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t2);
}
.admin-suggest-banner:hover {
  border-color: var(--blue-mid);
  background: var(--blue-soft);
}
.admin-suggest-banner.on {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.admin-suggest-banner.on span:last-child { color: var(--blue-dark); }

/* media query guru-card mobile dihapus — grid auto-fill handle otomatis */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TUJUAN BELAJAR — Desain Profesional
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.tj-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
  margin-top: 20px;
}

/* ── Tujuan Umum ── */
.tj-general-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.tj-general-btn {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t2);
  background: var(--white);
}
.tj-general-btn:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-2px);
}
.tj-general-btn.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 3px rgba(130,0,0,0.08);
}
.tj-gen-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.tj-general-btn.on .tj-gen-title { color: var(--blue); }
.tj-gen-sub {
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-4);
  line-height: 1.4;
}

/* ── Sertifikasi Grid (dropdown card) ── */
.tj-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow: visible;
}
.tj-cert-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t2);
  background: var(--white);
  position: relative;
}
.tj-cert-card.open { border-color: var(--blue); }
.tj-cert-card.selected { border-color: var(--blue); background: var(--blue-soft); }

.tj-cert-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background var(--t1);
}
.tj-cert-card-header:hover { background: var(--surface); }
.tj-cert-card.open .tj-cert-card-header { background: var(--blue-soft); }

.tj-cert-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.tj-cert-card.open .tj-cert-card-title,
.tj-cert-card.selected .tj-cert-card-title { color: var(--blue); }
.tj-cert-card-sub {
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-4);
  margin-top: 2px;
}
.tj-cert-card-selected {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: all var(--t1);
}
.tj-cert-card.selected .tj-cert-card-selected {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.tj-cert-card-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-4);
  transition: transform var(--t2);
}
.tj-cert-card.open .tj-cert-card-arrow { transform: rotate(180deg); color: var(--blue); }

.tj-cert-card {
  position: relative; /* sudah ada, aman */
  overflow: visible;  /* ⬅️ TAMBAH INI */
}

.tj-cert-card-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;

  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);

  box-shadow: 0 12px 30px rgba(0,0,0,0.08);

  padding: 12px 14px;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: all 0.25s ease;
  z-index: 20;
}

.tj-cert-card.open .tj-cert-card-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tj-level-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tj-lvl-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t1);
}
.tj-lvl-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}
.tj-lvl-btn.on {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* ── Lainnya ── */
.tj-other-row {
  margin-top: 10px;
}
.tj-other-btn{
  width:100%;
  min-height:88px;
  padding:18px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  cursor:pointer;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .tj-general-row { grid-template-columns: repeat(2, 1fr); }
  .tj-cert-grid   { grid-template-columns: 1fr; }
  .tj-other-btn   { max-width: 100%; }
}
@media (max-width: 380px) {
  .tj-general-row { grid-template-columns: 1fr 1fr; }
}

/* ================================================
   LIGHTBOX GALERI GURU
   ================================================ */
.gp-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.gp-lb.active { display: flex; }

.gp-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,15,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.gp-lb-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gp-lb-card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 82vh;
  animation: lbPop .28s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes lbPop {
  from { opacity:0; transform:scale(.82); }
  to   { opacity:1; transform:scale(1); }
}
.gp-lb-card.slide-left  { animation: lbSlideL .22s ease both; }
.gp-lb-card.slide-right { animation: lbSlideR .22s ease both; }

@keyframes lbSlideL {
  from { opacity:0; transform:translateX(60px) scale(.95); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes lbSlideR {
  from { opacity:0; transform:translateX(-60px) scale(.95); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}

#gpLbImg {
  display: block;
  max-height: 72vh;
  max-width: min(340px, 80vw);
  width: auto;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  object-fit: cover;
}

.gp-lb-name {
  margin-top: 16px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.gp-lb-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.13);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, transform .18s;
  backdrop-filter: blur(4px);
}
.gp-lb-arrow:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-50%) scale(1.08);
}
.gp-lb-prev { left: clamp(10px, 3vw, 40px); }
.gp-lb-next { right: clamp(10px, 3vw, 40px); }

.gp-lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  background: rgba(255,255,255,.13);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s;
  backdrop-filter: blur(4px);
}
.gp-lb-close:hover { background: rgba(255,255,255,.28); }

.gp-lb-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 80vw;
}
.gp-lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, transform .2s;
  border: none;
  padding: 0;
}
.gp-lb-dot.active {
  background: #fff;
  transform: scale(1.35);
}


@media (max-width: 600px) {
  #gpLbImg { max-height: 62vh; max-width: 78vw; }
  .gp-lb-arrow { width: 40px; height: 40px; }
  .gp-lb-prev { left: 8px; }
  .gp-lb-next { right: 8px; }
}
/* ================================================
   END LIGHTBOX GALERI GURU
   ================================================ */