/* ================================================================
   STENY AGUSTAF — SHARED DESIGN SYSTEM
   Dipakai oleh: /index.html, /program/<slug>/index.html
   Ubah di sini agar konsisten di semua halaman.
================================================================ */
:root {
  --navy-950: #000810;
  --navy-900: #000f20;
  --navy-800: #001428;
  --navy-700: #001c3a;
  --navy-600: #002550;
  --navy-500: #003069;

  --blue-600: #0c4290;
  --blue-500: #1458b8;
  --blue-400: #1e6fd4;
  --blue-300: #4090e8;
  --blue-100: #c8dff8;

  --gold-500: #d08800;
  --gold-400: #f0a500;
  --gold-300: #f8bc30;
  --gold-200: #fcd870;
  --gold-100: #feefc8;

  --white:     #ffffff;
  --off-white: #f5f7fc;
  --light-100: #edf0f7;
  --light-200: #dce2ee;
  --grey-200:  #c0c8d8;
  --grey-300:  #9aa8bc;
  --grey-400:  #6e7e94;
  --grey-500:  #4a5568;
  --grey-700:  #2d3748;
  --dark:      #0c1520;

  --bg:       var(--off-white);
  --text:     var(--dark);
  --text-2:   var(--grey-500);
  --border:   var(--light-200);

  --font-d: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-b: 'Barlow', system-ui, sans-serif;

  --h1: clamp(2.75rem, 7vw, 5.5rem);
  --h2: clamp(2rem, 4.5vw, 3.25rem);
  --h3: clamp(1.375rem, 2.6vw, 1.875rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tf: 150ms; --tb: 280ms; --ts: 500ms;

  --sy: clamp(3.5rem, 8vw, 7rem);
  --sx: clamp(1.25rem, 5.5vw, 5rem);
  --mw: 1200px;

  --sh-gold: 0 6px 32px rgba(240,165,0,.28);
  --sh-card: 0 4px 20px rgba(0,12,28,.10);
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-b);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;}
.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;}
[hidden]{display:none!important;}
.skip-link{position:absolute;top:-48px;left:0;z-index:1000;background:var(--gold-400);color:var(--navy-900);padding:.75rem 1.25rem;font-family:var(--font-d);font-weight:800;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;transition:top var(--tb);}
.skip-link:focus{top:0;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

.wrap{max-width:var(--mw);margin:0 auto;padding:0 var(--sx);}
.eb{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-500);line-height:1.2;}
.eb--light{color:var(--gold-300);}
.gold-bar{display:block;width:40px;height:3px;background:var(--gold-400);margin-bottom:1rem;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;font-family:var(--font-d);font-size:.875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:2px solid transparent;cursor:pointer;text-decoration:none;padding:.875rem 2rem;transition:all var(--tb) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-400);color:var(--navy-900);border-color:var(--gold-400);}
.btn-gold:hover{background:var(--gold-300);border-color:var(--gold-300);box-shadow:var(--sh-gold);transform:translateY(-2px);}
.btn-ow{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4);}
.btn-ow:hover{background:rgba(255,255,255,.1);border-color:var(--white);}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--navy-700);}
.btn-outline:hover{background:var(--navy-700);color:var(--white);transform:translateY(-2px);}
.btn-lg{padding:1.125rem 2.75rem;font-size:1rem;}
.btn-sm{padding:.625rem 1.375rem;font-size:.75rem;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;background:rgba(0,28,58,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07);transition:background var(--tb);}
/* Offset anchor-jump targets so the fixed nav doesn't cover the top of the section */
.hero,.sec,.cta{scroll-margin-top:68px;}
.nav__in{max-width:var(--mw);margin:0 auto;padding:0 var(--sx);height:100%;display:flex;align-items:center;justify-content:space-between;}
.nav__logo{display:flex;align-items:center;gap:.625rem;}
.nav__logo-ic{width:34px;height:34px;flex-shrink:0;display:block;}
.nav__logo-txt{line-height:1;}
.nav__logo-txt b{display:block;font-family:var(--font-d);font-size:1rem;font-weight:900;color:white;letter-spacing:.03em;text-transform:uppercase;}
.nav__logo-txt span{display:block;font-family:var(--font-d);font-size:.5625rem;color:var(--gold-300);letter-spacing:.14em;text-transform:uppercase;margin-top:1px;font-weight:600;}
.nav__links{display:flex;align-items:center;gap:1.75rem;}
.nav__link{font-family:var(--font-d);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:color var(--tb);position:relative;}
.nav__link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gold-400);transition:width var(--tb) var(--ease);}
.nav__link:hover{color:white;}
.nav__link:hover::after{width:100%;}
.nav__tog{display:none;flex-direction:column;gap:5px;width:36px;height:36px;padding:6px;background:rgba(255,255,255,.08);border-radius:2px;}
.nav__tog span{display:block;height:2px;background:white;transition:all var(--tb) var(--ease);}
.nav__tog span:nth-child(2){width:70%;}
.nav__tog span:nth-child(3){width:85%;}
.nav__tog.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav__tog.open span:nth-child(2){opacity:0;}
.nav__tog.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);width:100%;}
@media(max-width:860px){.nav__links{display:none;}.nav__tog{display:flex;}}
.nav__mob{display:none;position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);z-index:199;background:var(--navy-800);flex-direction:column;padding:2rem var(--sx);gap:0;overflow-y:auto;}
.nav__mob.open{display:flex;}
.nav__mob a{font-family:var(--font-d);font-size:1.75rem;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:white;padding:.875rem 0;border-bottom:1px solid rgba(255,255,255,.07);transition:color var(--tb);}
.nav__mob a:hover{color:var(--gold-400);}

/* HERO */
.hero{min-height:100vh;background:var(--navy-800);display:flex;align-items:center;padding-top:68px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);background-size:32px 32px;}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 90% 15%, rgba(240,165,0,.10) 0%, transparent 55%);}
.hero__in{position:relative;z-index:1;width:100%;min-width:0;max-width:820px;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem);}
.hero__ew{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;}
.hero__eline{display:block;width:30px;height:2px;background:var(--gold-400);}
.hero__h1{font-family:var(--font-d);font-weight:900;font-size:var(--h1);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;color:white;overflow-wrap:break-word;word-break:break-word;}
.hero__h1 .g{color:var(--gold-400);}
.hero__tag{font-family:var(--font-d);font-size:clamp(1.125rem,2vw,1.5rem);font-weight:700;color:var(--gold-200);letter-spacing:.01em;margin-top:1rem;}
.hero__sub{font-size:clamp(1rem,1.5vw,1.0625rem);font-weight:300;color:var(--blue-100);line-height:1.75;max-width:62ch;margin-top:1.5rem;}
.hero__sub strong{color:white;font-weight:600;}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem;}

/* HERO — VARIAN SPLIT, khusus homepage (id="top" di index.html) supaya
   hero-nya terasa beda dari hero halaman program: dua kolom (teks + rail
   kredensial) plus monogram raksasa transparan di latar belakang. */
.hero__in--split{max-width:1100px;display:grid;grid-template-columns:1fr auto;gap:clamp(2.5rem,6vw,5rem);align-items:center;}
.hero__monogram{position:absolute;top:50%;right:clamp(-1.5rem,3vw,3rem);transform:translateY(-50%);z-index:0;font-family:var(--font-d);font-weight:900;font-size:clamp(12rem,30vw,24rem);line-height:1;color:rgba(240,165,0,.05);-webkit-text-stroke:1.5px rgba(240,165,0,.18);-webkit-text-fill-color:transparent;pointer-events:none;user-select:none;}
.hero__rail{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.75rem;padding-left:1.75rem;border-left:2px solid rgba(240,165,0,.35);animation:hIn .7s var(--ease) .6s both;}
.hero__rail-item{font-family:var(--font-d);font-size:.9375rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.01em;line-height:1.3;position:relative;white-space:nowrap;}
.hero__rail-item::before{content:'';position:absolute;left:-1.94rem;top:.3em;width:9px;height:9px;border-radius:50%;background:var(--gold-400);}
.hero__rail-n{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.14em;color:var(--gold-400);margin-bottom:.25rem;}
@media(max-width:860px){
  .hero__in--split{grid-template-columns:1fr;}
  .hero__rail{flex-direction:row;flex-wrap:wrap;gap:1.25rem 2rem;border-left:none;border-top:2px solid rgba(240,165,0,.35);padding-left:0;padding-top:1.5rem;margin-top:.5rem;}
  .hero__rail-item{white-space:normal;}
  .hero__rail-item::before{left:0;top:-1.3rem;}
  .hero__monogram{display:none;}
}

/* SECTION HEADS */
.sec{padding:var(--sy) var(--sx);}
.sec--dark{background:var(--navy-700);}
.sec--navy2{background:var(--navy-800);}
.sec--white{background:var(--white);}
.sec--off{background:var(--off-white);}
.sec__in{max-width:var(--mw);margin:0 auto;position:relative;}
.sec__hd{margin-bottom:2.75rem;max-width:70ch;}
.sec__h2{font-family:var(--font-d);font-size:var(--h2);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;margin-top:.75rem;color:var(--navy-700);overflow-wrap:break-word;word-break:break-word;}
.sec__h2 .g{color:var(--gold-500);}
.sec--dark .sec__h2,.sec--navy2 .sec__h2{color:white;}
.sec--dark .sec__h2 .g,.sec--navy2 .sec__h2 .g{color:var(--gold-400);}
.sec__body{font-size:1rem;color:var(--grey-500);line-height:1.8;margin-top:1.25rem;}
.sec--dark .sec__body,.sec--navy2 .sec__body{color:rgba(255,255,255,.82);}
.sec__body strong{color:var(--navy-700);font-weight:600;}

/* Ikon kecil sebaris pengganti emoji (kalender, telepon, dsb.), mewarisi warna teks di sekitarnya */
.icon-inline{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;flex-shrink:0;}
.sec--dark .sec__body strong,.sec--navy2 .sec__body strong{color:white;}

/* Hook / intro */
.hook{padding:var(--sy) var(--sx);background:var(--white);}
.hook__in{max-width:900px;margin:0 auto;text-align:center;}
.hook__lead{font-family:var(--font-d);font-size:clamp(1.375rem,3vw,2rem);font-weight:700;color:var(--navy-700);line-height:1.35;letter-spacing:-.01em;overflow-wrap:break-word;word-break:break-word;}
.hook__lead .g{color:var(--gold-500);}
.hook__p{font-size:1rem;color:var(--grey-500);line-height:1.8;margin-top:1.5rem;}
.hook__list{display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem 1.5rem;text-align:left;margin-top:2.25rem;list-style:none;}
.hook__list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;color:var(--grey-700);line-height:1.5;font-weight:500;}
.hook__list li::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--gold-400);flex-shrink:0;margin-top:.5rem;}
@media(max-width:640px){.hook__list{grid-template-columns:1fr;}}

/* Split (30/70) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:2.5rem;}
.split__ratio{display:flex;gap:1rem;}
.rbar{flex:1;padding:1.75rem 1.25rem;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}
.rbar b{display:block;font-family:var(--font-d);font-size:2.5rem;font-weight:900;color:var(--gold-400);line-height:1;}
.rbar span{display:block;font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:.5rem;}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:2rem;}}

/* Audience list */
.list-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 1.25rem;}
@media(max-width:560px){.list-2col{grid-template-columns:1fr;}}
.list-2col li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.5;}
.list-2col li::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--gold-400);flex-shrink:0;margin-top:.5rem;}
.sec--dark .list-2col li,.sec--navy2 .list-2col li{color:rgba(255,255,255,.85);}
.sec--white .list-2col li,.sec--off .list-2col li{color:var(--grey-700);}

.audience-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:1.75rem 2rem;margin-top:2.5rem;}
.audience-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem 1.5rem;}
.audience-list li{display:flex;align-items:flex-start;gap:.75rem;color:rgba(255,255,255,.85);font-size:.9375rem;line-height:1.5;}
.audience-list li::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--gold-400);flex-shrink:0;margin-top:.5rem;}
@media(max-width:800px){.audience-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.audience-list{grid-template-columns:1fr;}}

/* Card grids */
.grid{display:grid;gap:1.25rem;margin-top:1rem;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){.grid--2{grid-template-columns:1fr;}.grid--3{grid-template-columns:repeat(2,1fr);}.grid--5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.grid--3{grid-template-columns:1fr;}.grid--5{grid-template-columns:repeat(2,1fr);}}

/* Wrapping grid: centers a leftover last row instead of leaving a gap (e.g. 5 cards) */
.grid--wrap{display:flex;flex-wrap:wrap;justify-content:center;}
.grid--wrap > *{flex:1 1 320px;max-width:380px;}

.icard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:2rem 1.5rem;position:relative;overflow:hidden;transition:all var(--tb) var(--ease);}
.icard::before{content:'';position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(to right,var(--gold-400),var(--blue-400));transition:width var(--ts) var(--ease);}
.icard:hover::before{width:100%;}
.icard:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);}
.icard__ic{width:44px;height:44px;border-radius:10px;background:var(--gold-400);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;}
.icard__ic svg{width:20px;height:20px;fill:var(--navy-900);}
.icard__n{font-family:var(--font-d);font-size:1.5rem;font-weight:900;color:rgba(240,165,0,.35);line-height:1;margin-bottom:.75rem;}
.icard__t{font-family:var(--font-d);font-size:1.0625rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:white;line-height:1.25;}
.icard__d{font-size:.875rem;color:rgba(255,255,255,.68);line-height:1.6;margin-top:.625rem;}

.lcard{background:var(--white);border:1px solid var(--light-200);padding:1.75rem 1.5rem;text-align:center;transition:all var(--tb) var(--ease);}
.lcard:hover{box-shadow:var(--sh-card);transform:translateY(-3px);border-color:var(--gold-300);}
.lcard__ic{width:48px;height:48px;border-radius:50%;background:var(--gold-100);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.lcard__ic svg{width:22px;height:22px;fill:var(--gold-500);}
.lcard__t{font-family:var(--font-d);font-size:.9375rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--navy-700);line-height:1.3;}
.lcard__d{font-size:.8438rem;color:var(--grey-500);line-height:1.6;margin-top:.625rem;}
.lcard__tag{display:inline-block;font-family:var(--font-d);font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.875rem;}
.lcard__tag--wa{color:var(--blue-500);}
.lcard__tag--program{color:var(--gold-500);}

/* Link kecil dengan panah, dipakai di kartu layanan (arah WA vs arah section Program) dan info lokasi */
.card-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:var(--font-d);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);transition:gap var(--tb),color var(--tb);}
.card-link::after{content:'→';}
.card-link:hover{gap:.875rem;color:var(--gold-500);}

/* Jadwal */
.info3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"tanggal waktu lokasi";gap:1.25rem;margin-top:2rem;align-items:start;}
.info3__card{background:var(--white);border:1px solid var(--light-200);border-top:3px solid var(--gold-400);padding:2rem 1.75rem;}
.info3__lbl{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);margin-bottom:.75rem;}
.info3__v{font-family:var(--font-d);font-size:1.5rem;font-weight:900;color:var(--navy-700);line-height:1.2;}
.info3__v small{display:block;font-family:var(--font-b);font-size:.875rem;font-weight:500;color:var(--grey-500);margin-top:.375rem;}
#tanggalCard{grid-area:tanggal;}
#waktuCard{grid-area:waktu;}
#lokasiCard{grid-area:lokasi;}
@media(max-width:800px){.info3{grid-template-columns:1fr;grid-template-areas:"tanggal" "waktu" "lokasi";}}

/* Mode saat lokasi_maps terisi: 2 kolom - kiri (Tanggal+Waktu ditumpuk), kanan (peta penuh 1 tinggi kolom) */
.info3--map-mode{grid-template-columns:minmax(240px,320px) 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"tanggal lokasi" "waktu lokasi";align-items:stretch;}
.info3--map-mode #lokasiCard{display:flex;flex-direction:column;}
.info3--map-mode #tanggalCard,.info3--map-mode #waktuCard{display:flex;flex-direction:column;justify-content:center;}
.info3--map-mode .info3__map-wrap{flex:1;display:flex;flex-direction:column;margin-top:1rem;min-height:0;}
.info3--map-mode .info3__map{flex:1;width:100%;height:100%;min-height:160px;}
@media(max-width:800px){
  .info3--map-mode{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"tanggal" "waktu" "lokasi";align-items:start;}
  .info3--map-mode #lokasiCard{display:block;}
  .info3--map-mode #tanggalCard,.info3--map-mode #waktuCard{display:block;}
  .info3--map-mode .info3__map-wrap{flex:none;}
  .info3--map-mode .info3__map{flex:none;height:auto;aspect-ratio:16/10;}
}

.info3__map-wrap{margin-top:1.25rem;}
.info3__map{width:100%;aspect-ratio:16/10;border:1px solid var(--light-200);border-radius:8px;filter:grayscale(.15);}
.info3__maplink{display:inline-flex;align-items:center;gap:.5rem;margin-top:.875rem;font-family:var(--font-d);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);transition:gap var(--tb);}
.info3__maplink::after{content:'→';}
.info3__maplink:hover{gap:.875rem;}

/* SHEET LOADING SHIMMER — dipasang langsung di elemen yang datanya diambil dari CSV */
.shimmer{color:transparent!important;border-radius:4px;background:linear-gradient(90deg,rgba(0,20,45,.09) 25%,rgba(0,20,45,.18) 37%,rgba(0,20,45,.09) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media(prefers-reduced-motion:reduce){.shimmer{animation:none;background-position:50% 50%;}}

/* Pricing */
.price{display:grid;grid-template-columns:1fr minmax(320px,380px);gap:3rem;align-items:center;margin-top:2.5rem;}
.price__list{display:flex;flex-direction:column;gap:.875rem;}
.price__list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;color:rgba(255,255,255,.85);line-height:1.5;}
.price__list li::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--gold-400);flex-shrink:0;margin-top:.55rem;}
.pcard{background:var(--gold-400);border:1px solid var(--gold-400);padding:2.25rem 2.5rem;position:relative;text-align:center;max-width:420px;width:100%;margin:0 auto;}
.pcard__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--font-d);font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--navy-900);color:var(--gold-300);padding:.375rem .875rem;white-space:nowrap;}
.pcard__lbl{font-family:var(--font-d);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,15,32,.65);}
.pcard__compare{display:flex;align-items:center;justify-content:center;gap:.625rem;margin-top:1rem;}
.pcard__old-lbl{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,15,32,.55);}
.pcard__old{font-family:var(--font-d);font-size:1.25rem;font-weight:700;color:rgba(0,15,32,.55);text-decoration:line-through;text-decoration-thickness:2px;}
.pcard__price-lbl{font-family:var(--font-d);font-size:.875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-900);margin-top:1.25rem;}
.pcard__price{font-family:var(--font-d);font-size:clamp(2.25rem,4vw,3rem);font-weight:900;color:var(--navy-900);margin-top:.25rem;letter-spacing:-.01em;}
.pcard__note{font-size:.875rem;color:rgba(0,15,32,.75);margin-top:1.25rem;line-height:1.5;}
.pcard__note b{color:var(--navy-900);}
@media(max-width:800px){.price{grid-template-columns:1fr;gap:2.25rem;margin-top:2.5rem;}}

/* GALERI */
.gcard{display:block;width:100%;padding:0;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--navy-800);cursor:zoom-in;}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform var(--ts) var(--ease);}
.gcard:hover img{transform:scale(1.06);}
.gcard::before{content:'';position:absolute;top:10px;right:10px;width:22px;height:22px;border-top:2px solid var(--gold-400);border-right:2px solid var(--gold-400);z-index:2;opacity:0;transition:opacity var(--tb);}
.gcard::after{content:'';position:absolute;bottom:10px;left:10px;width:22px;height:22px;border-bottom:2px solid var(--gold-400);border-left:2px solid var(--gold-400);z-index:2;opacity:0;transition:opacity var(--tb);}
.gcard:hover::before,.gcard:hover::after{opacity:1;}
.gcard__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,12,28,.55) 0%,transparent 45%);opacity:0;transition:opacity var(--tb);z-index:1;}
.gcard:hover .gcard__scrim{opacity:1;}

/* TESTIMONI */
.testi-grid{display:flex;flex-direction:column;gap:2rem;margin-top:1rem;}
.testi-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.5rem;}
.testi-card{flex:1 1 220px;max-width:280px;}
.testi-card__frame{position:relative;width:100%;aspect-ratio:9/16;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);overflow:hidden;border-radius:12px;}
.testi-card__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.testi-card--16x9{flex:1 1 320px;max-width:420px;}
.testi-card--16x9 .testi-card__frame{aspect-ratio:16/9;}

.lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,8,16,.92);display:none;align-items:center;justify-content:center;padding:5vh 5vw;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:90vh;width:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox__close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem;line-height:1;transition:background var(--tb);}
.lightbox__close:hover{background:rgba(255,255,255,.2);}

/* CTA / contact */
.cta{background:var(--off-white);padding:var(--sy) var(--sx);}
.cta__in{max-width:var(--mw);margin:0 auto;background:var(--navy-800);border-radius:16px;padding:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden;text-align:center;}
.cta__in::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 85% 15%, rgba(240,165,0,.14) 0%, transparent 55%);}
.cta__h2{position:relative;font-family:var(--font-d);font-size:var(--h2);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:white;margin-top:.75rem;overflow-wrap:break-word;word-break:break-word;}
.cta__h2 .g{color:var(--gold-400);}
.cta__body{position:relative;font-size:1rem;color:rgba(255,255,255,.82);line-height:1.7;max-width:58ch;margin:1.25rem auto 0;}
.cta__actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.25rem;}
.cta__contact{position:relative;margin-top:2rem;font-family:var(--font-d);font-size:.875rem;color:rgba(255,255,255,.6);letter-spacing:.03em;}
.cta__contact b{color:var(--gold-300);}

/* FORM DAFTAR */
.form{position:relative;text-align:left;max-width:640px;margin:2.25rem auto 0;display:flex;flex-direction:column;gap:1.25rem;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
@media(max-width:640px){.form__row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field label{font-family:var(--font-d);font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.field__req{color:var(--gold-400);}
.field__opt{color:rgba(255,255,255,.45);text-transform:none;font-weight:500;letter-spacing:0;}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="number"]{font-family:var(--font-b);font-size:.9375rem;color:var(--dark);background:var(--white);border:1px solid transparent;border-radius:6px;padding:.8125rem 1rem;width:100%;transition:border-color var(--tb),box-shadow var(--tb);}
.field input::placeholder{color:var(--grey-400);}
.field input:focus-visible{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(240,165,0,.25);}
.field__check{display:flex;align-items:flex-start;gap:.75rem;font-size:.8438rem;color:rgba(255,255,255,.72);line-height:1.55;cursor:pointer;}
.field__check input{margin-top:.2rem;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold-400);cursor:pointer;}
.field__group-lbl{grid-column:1 / -1;font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-300);margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);}
.form__msg{display:none;font-family:var(--font-b);font-size:.875rem;font-weight:600;padding:.875rem 1.125rem;border-radius:6px;line-height:1.5;}
.form__msg.show{display:block;}
.form__msg--ok{background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);color:#8ff0b5;}
.form__msg--err{background:rgba(224,82,82,.14);border:1px solid rgba(224,82,82,.4);color:#ff9a9a;}
#formSubmitBtn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none;}

/* REKENING */
.rekening{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:1.5rem 1.75rem;margin:2rem auto 0;max-width:640px;text-align:left;}
.rekening__lbl{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.75rem;}
.rekening__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9375rem;color:rgba(255,255,255,.85);}
.rekening__row:last-child{border-bottom:none;}
.rekening__row b{color:white;font-weight:700;text-align:right;}
.rekening__note{margin-top:1rem;font-size:.8438rem;color:rgba(255,255,255,.6);line-height:1.5;}
@media(max-width:480px){
  .rekening__row{flex-direction:column;align-items:flex-start;gap:.25rem;}
  .rekening__row b{text-align:left;}
}

/* PROGCARD — kartu program di homepage (bagian #program), pusat funnel */
.progcard{background:var(--navy-800);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:all var(--tb) var(--ease);}
.progcard:hover{transform:translateY(-4px);border-color:var(--gold-300);box-shadow:var(--sh-card);}
.progcard__img{aspect-ratio:16/10;background:var(--navy-700) center/cover no-repeat;position:relative;}
.progcard__badge{position:absolute;top:1rem;left:1rem;font-family:var(--font-d);font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--gold-400);color:var(--navy-900);padding:.375rem .75rem;border-radius:4px;}
.progcard__body{padding:1.75rem;display:flex;flex-direction:column;gap:.875rem;flex:1;}
.progcard__title{font-family:var(--font-d);font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:white;line-height:1.1;}
.progcard__desc{font-size:.9375rem;color:rgba(255,255,255,.75);line-height:1.65;flex:1;}
.progcard__meta{font-family:var(--font-d);font-size:.8125rem;font-weight:700;letter-spacing:.03em;color:var(--gold-300);}
.progcard__cta{margin-top:.25rem;}

/* NUDGE — cross-sell kecil di tiap halaman program (balik ke profil / program lain) */
.nudge{max-width:var(--mw);margin:0 auto;padding:0 var(--sx) var(--sy);display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;text-align:center;}
.nudge a{font-family:var(--font-d);font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-500);transition:color var(--tb);}
.nudge a:hover{color:var(--gold-500);}

/* FOOTER */
footer{background:var(--navy-950);padding:3rem var(--sx) 2rem;}
.foot__in{max-width:var(--mw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.foot__brand{font-family:var(--font-d);font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:white;}
.foot__brand span{color:var(--gold-400);}
.foot__links{display:flex;flex-wrap:wrap;gap:1.25rem;}
.foot__links a{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color var(--tb);}
.foot__links a:hover{color:var(--gold-400);}
.foot__copy{font-size:.8125rem;color:rgba(255,255,255,.35);}

/* WA FLOAT */
.wa{position:fixed;bottom:1.75rem;right:1.75rem;z-index:300;width:52px;height:52px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(37,211,102,.45);transition:transform var(--tf) var(--ease),box-shadow var(--tb);}
.wa:hover{transform:scale(1.1);box-shadow:0 6px 32px rgba(37,211,102,.55);}
.wa svg{width:26px;height:26px;fill:white;}

/* REVEAL */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--ts) var(--ease),transform var(--ts) var(--ease);}
.rv.in{opacity:1;transform:none;}
@keyframes hIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.hero__ew{animation:hIn .7s var(--ease) .1s both;}
.hero__h1{animation:hIn .8s var(--ease) .2s both;}
.hero__tag{animation:hIn .7s var(--ease) .3s both;}
.hero__sub{animation:hIn .7s var(--ease) .4s both;}
.hero__actions{animation:hIn .6s var(--ease) .5s both;}
