/* =====================================================================
   TOP CAMP — UI LAYER v2 (publik)
   Dimuat SETELAH public.css di semua halaman publik. Menyelaraskan
   seluruh situs dengan desain referensi TopCamp Muaythai:
   navy · biru elektrik · putih, display Anton, aksen brush.
   Theme-aware (terang/gelap), responsif 360 → 1440+, dan menghormati
   prefers-reduced-motion.
   ===================================================================== */
/* Permanent Marker + Material Symbols Rounded datang dari assets/fonts lewat
   public.css, yang selalu dimuat lebih dulu di semua halaman publik. */

/* ikon Material (dipakai lintas halaman) */
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;vertical-align:middle}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}

/* KULIT SITUS — --skin-* dipasang oleh assets/js/skin.js hanya saat kulit
   event aktif. Selama tidak aktif, nilai di belakang koma tetap dipakai,
   jadi tampilan harian identik dengan sebelumnya. */
:root{
  --tc-navy:var(--skin-n900,#0a1730); --tc-navy-2:var(--skin-n800,#0f2350); --tc-navy-3:var(--skin-n700,#123a7a);
  --tc-blue:var(--skin-600,#2563eb); --tc-blue-2:var(--skin-500,#3b82f6); --tc-sky:var(--skin-400,#60a5fa);
  --tc-ease:cubic-bezier(.22,1,.36,1);
  --tc-spring:cubic-bezier(.34,1.56,.64,1);

  /* --- BRAND RAMP: satu tangga biru (50→900) dipakai semua halaman --- */
  --tc-50:var(--skin-50,#f0f6ff); --tc-100:var(--skin-100,#dce9ff); --tc-200:var(--skin-200,#bcd5ff); --tc-300:var(--skin-300,#90bdff);
  --tc-400:var(--skin-400,#5f9cfb); --tc-500:var(--skin-500,#3b82f6); --tc-600:var(--skin-600,#2563eb); --tc-700:var(--skin-700,#1d4ed8);
  --tc-800:var(--skin-800,#1b3f9e); --tc-900:var(--skin-900,#122c6e);

  /* --- NIGHT RAMP: semua band gelap memakai satu keluarga navy --- */
  --nt-600:var(--skin-n600,#16356a); --nt-700:var(--skin-n700,#12305c); --nt-800:var(--skin-n800,#0d1f42); --nt-900:var(--skin-n900,#0a1730); --nt-1000:var(--skin-n1000,#050d1f);
  --nt-txt:var(--skin-txt,#d7e4ff); --nt-txt-2:var(--skin-txt-2,#a9bfe2);

  /* --- GRADIENT BRAND: satu sumber untuk hero, tombol, tiles --- */
  --g-hero:linear-gradient(158deg,var(--skin-400,#3f86ff) 0%,var(--skin-600,#2563eb) 44%,var(--skin-800,#1a4bc0) 78%,var(--skin-n700,#163f9e) 100%);
  --g-btn:linear-gradient(135deg,var(--tc-600) 0%,var(--tc-500) 100%);
  --g-night:linear-gradient(122deg,var(--nt-900) 0%,var(--nt-800) 52%,var(--nt-700) 100%);
  --g-tile:linear-gradient(135deg,var(--tc-700) 0%,var(--nt-900) 100%);

  /* --- SATU BAHASA GERAK: cepat (mikro) · sedang (hover) · lambat (masuk) --- */
  --t-fast:.16s; --t-med:.28s; --t-slow:.7s;
}

/* Anton dan Permanent Marker hanya punya satu berat (400). Bila sebuah elemen
   mewarisi font-weight:700/800, browser akan menebalkan secara sintetis —
   hasilnya display type terlihat kasar dan kontrasnya berlebihan.
   font-synthesis-weight mematikan penebalan itu tanpa mematikan style:miring
   sintetis yang memang dipakai pada brand lockup dan aksen .skew. */
body{font-synthesis-weight:none}

/* ---------- progress bar baca-halaman ---------- */
#tc-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--tc-blue),var(--tc-sky));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- masuk halaman (satu momen orkestrasi) ---------- */
@keyframes tcFade{from{opacity:0}to{opacity:1}}
main{animation:tcFade .5s var(--tc-ease) both}

/* ---------- reveal bertahap (stagger dari public.js) ---------- */
.reveal{transition-delay:var(--rv-d,0ms)!important}

/* =====================================================================
   HEADER
   ===================================================================== */
#site-head{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
/* Lockup merek: emblem + wordmark. .bt mengikat TOP/CAMP pada satu garis dasar,
   lalu seluruh blok teks dipusatkan ke tinggi emblem (bukan baseline, yang
   membuat teks menggantung di separuh atas logo). */
.brand{gap:10px;align-items:center}
.brand img{height:38px;width:auto;transition:height .2s var(--tc-ease)}
.brand .bt{display:flex;align-items:baseline;gap:5px;line-height:1}
.brand .b1{font-family:'Anton',Impact,sans-serif!important;font-weight:400!important;font-size:23px!important;
  letter-spacing:.02em!important;line-height:1!important;color:var(--ink)!important;font-style:italic}
.brand .b2{font-size:11px!important;font-weight:900!important;letter-spacing:.26em!important;
  margin-right:-.26em!important;color:var(--tc-blue)!important;text-transform:uppercase;line-height:1}
@media (max-width:640px){
  .brand img{height:34px}
  .brand .b1{font-size:20px!important}
  .brand .b2{font-size:10px!important}
}

/* nav: barbers atas-kapital ala UFC — garis bawah keras (tanpa radius),
   snap cepat, bukan pil lembut. Warna tetap biru merek. */
.head-nav{gap:0;background:transparent!important;border:0!important;padding:0!important;border-radius:0!important}
.head-nav a{background:transparent!important;box-shadow:none!important;border-radius:0!important;
  padding:12px 12px!important;font-size:11.5px!important;font-weight:800!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--ink-2)!important;
  transition:color var(--t-fast) linear,transform var(--t-fast) var(--tc-ease)}
.head-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:0;
  background:var(--tc-blue);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .2s cubic-bezier(.2,.75,.25,1)}
.head-nav a:hover{color:var(--ink)!important}
.head-nav a:hover::after{transform:scaleX(1)}
.head-nav a.active{color:var(--tc-blue)!important}
.head-nav a.active::after{transform:scaleX(1)}
.head-nav a:active{transform:translateY(1px)}

/* tombol header: kotak tegas, kapital, sweep cepat saat hover */
.head-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:8px;
  background:var(--tc-blue);color:#fff!important;font-weight:800;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;
  box-shadow:0 8px 18px -12px rgb(var(--skin-rgb,37 99 235)/.9);position:relative;overflow:hidden;
  transition:transform .16s var(--tc-ease),background .16s linear,box-shadow .16s linear}
.head-cta:hover{background:var(--tc-700);transform:translateY(-1px);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--tc-600) 95%,transparent)}
.head-cta:active{transform:translateY(1px) scale(.98)}
.head-cta i{font-size:15px}
.head-cta::before{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .7s var(--tc-ease)}
.head-cta:hover::before{transform:translateX(120%) skewX(-20deg)}
.head-ic .ic-acc{display:none}

/* breakpoint menu: 10 item + CTA butuh ruang */
@media (max-width:1180px){
  .head-in .brand{margin-right:auto}
  .head-in .head-nav{display:none!important}
  .burger{display:grid!important;place-items:center}
  .mnav{display:flex!important}
  .head-cta{display:none}
  .head-ic .ic-acc{display:grid}
}
.mnav a.active{color:var(--tc-blue)!important;font-weight:800}
.mnav .mnav-cta{display:flex!important;align-items:center;justify-content:center;gap:8px}

/* =====================================================================
   TEMA TAMPILAN — bukan ikon lepas di cluster kanan, tapi baris dropdown
   paling akhir di navbar (layar lebar) / blok di dalam laci (layar kecil).
   ===================================================================== */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-btn{background:transparent;border:0;cursor:pointer;font-family:inherit;position:relative;
  padding:11px 12px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--t-fast) linear,transform var(--t-fast) var(--tc-ease)}
.nav-dd-btn>i:last-child{font-size:9px;opacity:.55;transition:transform .2s var(--tc-ease)}
.nav-dd-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:0;
  background:var(--tc-blue);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .2s cubic-bezier(.2,.75,.25,1)}
.nav-dd-btn:hover{color:var(--ink)}
.nav-dd-btn:hover::after,.nav-dd.open .nav-dd-btn::after{transform:scaleX(1)}
.nav-dd-btn:active{transform:translateY(1px)}
.nav-dd.open .nav-dd-btn{color:var(--tc-blue)}
.nav-dd.open .nav-dd-btn>i:last-child{transform:rotate(180deg);opacity:1}

.nav-dd-pop{position:absolute;top:calc(100% + 12px);right:-8px;z-index:70;min-width:196px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 44px -24px rgba(11,21,36,.45),0 2px 8px -4px rgba(11,21,36,.12);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:100% 0;
  transition:opacity .15s linear,transform .22s var(--tc-ease),visibility .22s}
.nav-dd.open .nav-dd-pop{opacity:1;visibility:visible;transform:none}

.th-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;text-align:left;
  border:0;background:none;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--body);
  transition:background .14s linear,color .14s linear}
.th-opt>i:first-child{width:15px;text-align:center;font-size:13px;color:var(--muted);transition:color .14s linear}
.th-opt .tk{margin-left:auto;font-size:11px;color:var(--tc-blue);opacity:0;transition:opacity .14s linear}
.th-opt:hover{background:var(--blue-50);color:var(--ink)}
.th-opt.on{color:var(--tc-blue)}
.th-opt.on>i:first-child,.th-opt.on .tk{color:var(--tc-blue);opacity:1}

/* laci: penanda tema jadi blok kecil di antara daftar tautan dan tombol member */
.mnav.open{max-height:760px}
.mnav-theme{padding:15px 8px 16px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
.mnav-theme-lab{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mnav-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mnav-opts .th-opt{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:12px}
.mnav-opts .th-opt.on{border-color:var(--tc-blue);background:var(--blue-50)}
.mnav-opts .th-opt .tk{margin-left:auto}

/* =====================================================================
   HERO SUBHALAMAN — band navy ala referensi
   ===================================================================== */
.hero-sub, header.arena{
  background:
    radial-gradient(115% 85% at 86% 0%, rgb(var(--skin-rgb,59 130 246)/.42), transparent 56%),
    var(--g-night)!important;
  color:var(--nt-txt)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);
  padding-bottom:clamp(64px,9vh,104px)!important;
  position:relative;overflow:hidden;isolation:isolate}
.hero-sub::before{opacity:.18!important;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px)!important}
.hero-sub::after, header.arena::after{
  content:"TRAIN\A FIGHT\A GROW";white-space:pre;position:absolute;right:4%;top:50%;
  transform:translateY(-50%) rotate(-8deg);z-index:0;pointer-events:none;
  font-family:'Permanent Marker',cursive;font-size:clamp(34px,6vw,86px);line-height:.92;text-align:right;
  color:rgb(var(--skin-rgb,96 165 250)/.16)}
.hero-sub .eyebrow, header.arena .eyebrow{color:var(--skin-300,#8fb2ff)!important}
.hero-sub h1, header.arena h1{color:#fff!important;text-shadow:0 6px 28px rgba(0,0,0,.35)}
.hero-sub p, header.arena p{color:var(--nt-txt-2)!important;max-width:620px}
.hero-sub a:not(.btn), header.arena a:not(.btn){color:var(--tc-200)}
@media (max-width:760px){.hero-sub::after, header.arena::after{display:none}}

/* entrance hero (hanya sekali saat load) */
@keyframes tcUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.tc-ready .hero-sub .fade-up, html.tc-ready header.arena .wrap > *{animation:tcUp .7s var(--tc-ease) both}
html.tc-ready .hero-sub .fade-up:nth-child(2), html.tc-ready header.arena .wrap > *:nth-child(2){animation-delay:.08s}
html.tc-ready .hero-sub .fade-up:nth-child(3), html.tc-ready header.arena .wrap > *:nth-child(3){animation-delay:.16s}
html.tc-ready .hero-sub .fade-up:nth-child(4){animation-delay:.24s}

/* =====================================================================
   KOMPONEN UMUM
   ===================================================================== */
.btn{transition:transform .18s var(--tc-ease),box-shadow .2s,background .2s,color .2s!important}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-blue{position:relative;overflow:hidden}
.btn-blue::before{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:transform .7s var(--tc-ease)}
.btn-blue:hover::before{transform:translateX(120%) skewX(-20deg)}

.card{transition:transform .3s var(--tc-ease),box-shadow .3s,border-color .3s}
a.card:hover, .card.hoverable:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(15,30,61,.35)}

img{height:auto}
table{max-width:100%}
.table-wrap, .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* input yang nyaman di mobile (hindari auto-zoom iOS) */
@media (max-width:640px){ input, select, textarea{font-size:16px!important} }

/* form dua kolom di careers dll. → satu kolom di mobile */
@media (max-width:620px){
  #form-card [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* =====================================================================
   FOOTER — mega footer navy (struktur UFC: kolom rambut + statement besar)
   ===================================================================== */
#site-foot{background:linear-gradient(180deg,var(--nt-900) 0%,var(--nt-1000) 100%)!important;color:var(--skin-mut-1,#b9c8e6)!important;
  position:relative;overflow:hidden;padding:46px 0 22px!important}
#site-foot::before{content:"";position:absolute;right:-60px;bottom:-40px;width:320px;height:320px;
  background:linear-gradient(135deg,rgb(var(--skin-rgb,37 99 235)/.35),transparent 60%);
  clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.5;pointer-events:none}
/* watermark raksasa — tanda merek, bukan konten */
#site-foot::after{content:"TOP CAMP";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(88px,17vw,240px);line-height:.8;
  letter-spacing:.02em;color:rgba(255,255,255,.028);white-space:nowrap;pointer-events:none}
.foot-inner,#site-foot .foot-bar{position:relative;z-index:1}
.foot-inner,#site-foot .foot-bar{position:relative;z-index:1}
#site-foot .brand .b1{color:#fff!important;font-size:30px!important}
#site-foot .brand .b2{color:var(--tc-sky)!important;font-size:13px!important}
#site-foot .brand img{height:66px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
#site-foot .foot-h{color:#fff!important;letter-spacing:.14em;font-size:11px!important;text-transform:uppercase;
  position:relative;padding-bottom:9px;margin-bottom:14px}
#site-foot .foot-h::after{width:16px;height:2px;border-radius:0;background:var(--tc-blue)}
#site-foot a{color:var(--skin-mut-1,#b9c8e6)!important;transition:color var(--t-fast) linear,transform var(--t-fast) var(--tc-ease)}
#site-foot a:hover{color:#fff!important}
#site-foot p, #site-foot .tagline{color:var(--skin-mut-2,#8ea3c8)!important}
#site-foot .foot-hash{color:var(--tc-sky)!important;font-weight:800}

/* grid: 1 kolom merek + 4 kolom tautan, dipisah garis rambut */
.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important;gap:0 clamp(18px,2.4vw,34px)!important}
.foot-col{border-left:1px solid rgba(255,255,255,.07);padding-left:clamp(18px,2.2vw,30px)}
.foot-grid ul{gap:9px!important}
.foot-grid li{font-size:13px}
.foot-grid li a{font-size:13px}
.foot-grid li a::before{width:0;height:2px;border-radius:0;background:var(--tc-blue);transition:width .18s linear}
.foot-grid li a:hover{padding-left:14px}

/* statement + sosial di kolom merek */
.foot-soc{margin-top:20px}
.foot-soc .foot-h{margin-bottom:12px}
#site-foot .soc{margin-bottom:10px}
#site-foot .foot-note{position:relative;z-index:1;margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#e6eeff!important;white-space:pre-line;font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(20px,3.2vw,42px);line-height:1.04;letter-spacing:.015em}
#site-foot .foot-bar{border-top:1px solid rgba(255,255,255,.08)!important;color:var(--skin-mut-2,#7f93b8)!important}
#site-foot .foot-bar a{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
#site-foot .soc a{transition:transform .18s var(--tc-ease),background .18s linear}
#site-foot .soc a:hover{transform:translateY(-2px)}

@media (max-width:1024px){
  .foot-grid{grid-template-columns:repeat(4,1fr)!important}
  .foot-grid > :nth-child(1){grid-column:1/-1}
}
@media (max-width:880px){
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:24px 18px!important}
  .foot-grid > :nth-child(4){grid-column:auto}
  .foot-col{border-left:0;padding-left:0}
}
@media (max-width:460px){
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:22px 14px!important}
  #site-foot::after{display:none}
}

/* =====================================================================
   AKSESIBILITAS & MOTION
   ===================================================================== */
:focus-visible{outline:3px solid var(--tc-sky)!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #tc-progress{display:none}
}

/* footer: kontak & sosial berbentuk kaca di atas navy (kontras AA) */
#site-foot .foot-contact a{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;color:var(--nt-txt)!important;box-shadow:none!important}
#site-foot .foot-contact a:hover{background:rgba(255,255,255,.12)!important}
#site-foot .foot-contact .fi{background:rgba(255,255,255,.1)!important}
#site-foot .soc a{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:var(--nt-txt)!important;box-shadow:none!important}
#site-foot .soc a:hover{background:var(--tc-600)!important;color:#fff!important}
#site-foot .soc a i, #site-foot .foot-contact a i{color:inherit!important}
/* pill alamat: teks panjang, ikon ditahan di atas supaya sejajar baris pertama */
#site-foot .foot-contact a.map{align-items:flex-start}
#site-foot .foot-contact a.map .fi{margin-top:1px}
#site-foot .foot-contact a.map span{line-height:1.5}

/* =====================================================================
   FX LAYER — animasi modern lintas sub-halaman (selaras beranda)
   ===================================================================== */
/* entrance berjenjang untuk grid async (.stagger diisi via JS) */
@keyframes tcPop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.stagger > *{opacity:0;animation:tcPop .6s var(--tc-ease) forwards}
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.09s}
.stagger > *:nth-child(3){animation-delay:.16s}.stagger > *:nth-child(4){animation-delay:.23s}
.stagger > *:nth-child(5){animation-delay:.30s}.stagger > *:nth-child(6){animation-delay:.37s}
.stagger > *:nth-child(7){animation-delay:.44s}.stagger > *:nth-child(8){animation-delay:.51s}
.stagger > *:nth-child(n+9){animation-delay:.58s}

/* tilt 3D untuk kartu (transform dipasang oleh JS) */
.card.tilt,.pcard.tilt,.pcard2.tilt,.acard2.tilt,.evcard2.tilt,.ccard.tilt,.price.tilt,.evcard.tilt{transition:transform .35s var(--tc-ease),box-shadow var(--t-med);will-change:transform;transform-style:preserve-3d}

/* tombol magnetik (offset dipasang oleh JS) */
.magnetic{will-change:transform}

/* sapuan cahaya halus pada band hero sub-halaman */
html.tc-ready .hero-sub::before{animation:heroDots 16s ease-in-out infinite alternate}
@keyframes heroDots{from{background-position:0 0}to{background-position:44px 30px}}

@media (prefers-reduced-motion:reduce){
  .stagger > *{opacity:1!important;animation:none!important}
  .card.tilt,.pcard.tilt,.ccard.tilt,.price.tilt{transition:none!important;transform:none!important}
  html.tc-ready .hero-sub::before{animation:none!important}
}

/* =====================================================================
   FX++ WOW LAYER — intro, aurora, parallax, scramble, kartu sorot,
   grain, reveal++. Idempotent (JS menandai dgn dataset) + menghormati
   prefers-reduced-motion. Menambah kesan premium tanpa mengorbankan
   keterbacaan (sorot kartu selalu DI BAWAH konten).
   ===================================================================== */

/* --- Aurora bergerak di belakang hero (JS menyisipkan .hp-aurora) --- */
.hp-aurora{position:absolute;left:-10%;right:-10%;top:-14%;height:74%;z-index:0;pointer-events:none;
  filter:blur(30px);opacity:.55;mix-blend-mode:screen}
.hp-aurora i{position:absolute;border-radius:50%;display:block;animation:auroraDrift 18s ease-in-out infinite}
.hp-aurora i:nth-child(1){left:4%;top:8%;width:42%;padding-top:42%;background:radial-gradient(circle,#4f9dff,transparent 62%)}
.hp-aurora i:nth-child(2){left:44%;top:-8%;width:44%;padding-top:44%;background:radial-gradient(circle,var(--tc-600),transparent 62%);animation-delay:-6s}
.hp-aurora i:nth-child(3){left:68%;top:14%;width:34%;padding-top:34%;background:radial-gradient(circle,var(--tc-400),transparent 62%);animation-delay:-11s}
@keyframes auroraDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,10%) scale(1.14)}}
.hp-hero .hp-photo{will-change:transform}

/* --- Reveal++ : blur-in sinematik (menimpa .reveal dari public.css) --- */
.reveal{transform:translateY(34px) scale(.992);filter:blur(7px);opacity:0;
  transition:opacity .8s var(--ease-out),transform .9s var(--ease-out),filter .7s var(--ease-out)}
.reveal.in{filter:blur(0)}

/* --- Sorot kursor pada kartu: DI BAWAH konten, hanya menambah cahaya --- */
.card,.pcard,.pcard2,.acard2,.evcard2,.tcard,.mcard,.price,.ccard,.evcard,.hp-stats{position:relative}
.tc-spot{position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .35s;mix-blend-mode:plus-lighter;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgb(var(--skin-rgb,59 130 246)/.55),transparent 62%)}
.tc-on .tc-spot{opacity:.5}
.tc-spot-host>*{position:relative}
.tc-spot-host>*:not(.tc-spot){z-index:2}

/* --- Tekstur grain halus di seluruh halaman --- */
html.tc-ready body::after{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- Garis bawah judul menyapu saat section ter-reveal --- */
.sec-head .h-sec,.section-head h2,.rhead h2{background-image:linear-gradient(var(--tc-blue),var(--tc-blue));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 3px;
  transition:background-size .6s var(--tc-ease) .15s}
.sec-head.in .h-sec,.section-head.in h2,.rhead.in h2{background-size:100% 3px}

@media (prefers-reduced-motion:reduce){
  .hp-aurora,.tc-spot{display:none!important}
  html.tc-ready body::after{display:none!important}
  .reveal{filter:none!important;transform:none!important;opacity:1!important}
  .sec-head .h-sec,.section-head h2{background-size:0 3px!important}
}

/* =====================================================================
   WOW v2 — judul gradien, sorot hero, kilau kartu, aurora seksi gelap,
   cincin progres "back to top", pop ikon statistik.
   ===================================================================== */

/* --- Judul hero: gradien cahaya menyapu (selalu terang → kontras aman) --- */
.hp-title{background:linear-gradient(100deg,#fff 20%,#bcd3ff 42%,#7fb0ff 52%,#fff 72%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;animation:titleSheen 6s var(--tc-ease) infinite}
@keyframes titleSheen{0%{background-position:120% 0}50%{background-position:-20% 0}100%{background-position:120% 0}}
/* fallback bila background-clip tak didukung: tetap teks putih */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hp-title{-webkit-text-fill-color:#fff;color:#fff}}

/* --- Sorot cahaya mengikuti kursor di hero (JS menyisipkan .hero-glow) --- */
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,38%),rgb(var(--skin-rgb,150 190 255)/.22),transparent 60%);mix-blend-mode:screen}
.hp-hero:hover .hero-glow{opacity:1}

/* --- Kilau menyapu di atas kartu saat hover (cahaya, bukan menutup teks) --- */
.card,.pcard,.pcard2,.acard2,.evcard2,.tcard,.mcard,.price,.ccard,.evcard{overflow:hidden}
.card::after,.pcard::after,.pcard2::after,.acard2::after,.evcard2::after,.tcard::after,.mcard::after,.price::after,.ccard::after,.evcard::after{content:"";position:absolute;top:0;left:0;
  width:60%;height:120%;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:plus-lighter;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%) skewX(-18deg);transition:transform .8s var(--tc-ease),opacity .3s}
.card:hover::after,.pcard:hover::after,.pcard2:hover::after,.acard2:hover::after,.evcard2:hover::after,.tcard:hover::after,.mcard:hover::after,.price:hover::after,.ccard:hover::after,.evcard:hover::after{opacity:.55;transform:translateX(320%) skewX(-18deg)}

/* --- Aurora kinetik di balik seksi gelap (Jadwal, Find Near & CTA band) --- */
.jadwal::before,.findn::before,.ctaband::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:.32;
  background:conic-gradient(from 210deg at 30% 30%,rgb(var(--skin-rgb,59 130 246)/.55),transparent 28%,rgb(var(--skin-rgb,37 99 235)/.5) 52%,transparent 72%,rgb(var(--skin-rgb,96 165 250)/.45));
  filter:blur(70px);animation:secSpin 30s linear infinite}
.jadwal,.findn,.ctaband{isolation:isolate}
@keyframes secSpin{to{transform:rotate(360deg)}}
/* pastikan konten tetap di atas */
.jadwal > .wrapx,.findn > .wrapx,.ctaband > .wrapx{position:relative;z-index:2}

/* --- Cincin progres scroll pada tombol back-to-top --- */
.back-top{--p:0;isolation:isolate}
.back-top::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;
  background:conic-gradient(var(--tc-sky) calc(var(--p)*1turn),rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 80%);
          mask:radial-gradient(closest-side,transparent 78%,#000 80%);
  transition:background .1s linear}

/* --- Pop ikon & angka statistik saat ter-reveal --- */
@keyframes statPop{from{transform:translateY(10px) scale(.86);opacity:0}to{transform:none;opacity:1}}
.hp-stats.in .hp-stat{animation:statPop .5s var(--tc-spring) both}
.hp-stat:nth-child(2){animation-delay:.08s}.hp-stat:nth-child(3){animation-delay:.16s}.hp-stat:nth-child(4){animation-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .hp-title{animation:none;background:none;-webkit-text-fill-color:#fff;color:#fff}
  .card::after,.pcard::after,.price::after,.ccard::after,.evcard::after{display:none}
  .jadwal::before,.findn::before{display:none}
  .back-top::before,.hero-glow{display:none}
  .hp-stats.in .hp-stat{animation:none}
}

/* =====================================================================
   PREMIUM v3 — navbar kapsul kaca mengambang, kedalaman kartu berlapis,
   ritme bersih, dan motion yang ditahan agar terasa mahal & tenang.
   Diletakkan paling akhir supaya menang atas warisan public.css.
   ===================================================================== */

/* --- anchor jump tak tertutup header --- */
html{scroll-padding-top:92px}

/* --- Navbar: kapsul kaca mengambang, merapat saat scroll --- */
#site-head{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:12px var(--gutter) 0;backdrop-filter:none;-webkit-backdrop-filter:none}
.head-in{width:fit-content;max-width:calc(100vw - 28px);height:60px;margin:0 auto;padding:0 10px 0 20px;position:relative;
  display:flex;align-items:center;gap:0;
  background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--r-pill);
  box-shadow:0 12px 32px -20px rgba(11,21,36,.4), 0 2px 8px -4px rgba(11,21,36,.12);
  backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);
  transition:height .2s var(--tc-ease),background .2s linear,box-shadow .2s linear,border-color .2s linear,padding .2s var(--tc-ease)}
.head-in::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:0;
  background:linear-gradient(90deg,transparent,var(--tc-blue),var(--tc-sky),transparent);
  opacity:0;transition:opacity .3s linear;pointer-events:none}
#site-head.scrolled .head-in::before{opacity:1}
.head-in .brand{flex-shrink:0;margin-right:14px}
.head-in .head-nav{gap:0}
.head-in .head-ic{flex-shrink:0;gap:5px;margin-left:8px}
/* scroll: bar lebih tipis + hairline bawah — gerakan patah ala UFC, bukan melayang */
#site-head.scrolled .head-in{height:52px;
  box-shadow:0 14px 34px -22px rgba(11,21,36,.5), 0 0 0 1px rgba(11,21,36,.06);
  border-color:var(--line)}
#site-head.scrolled .brand img{height:32px}
@media (max-width:1180px){
  .head-in{width:auto;max-width:none;padding:0 8px 0 18px}
  .head-in .brand{margin-right:auto}
  .head-in .head-ic{margin-left:0}
}
.head-nav a{padding:11px 12px!important}
.head-cta{padding:10px 17px;border-radius:8px;background:var(--g-btn);
  box-shadow:0 8px 18px -10px rgb(var(--skin-rgb,37 99 235)/.8)}
.head-cta:hover{background:linear-gradient(135deg,var(--tc-700),var(--tc-600))}
@media (max-width:640px){
  #site-head{padding:8px 10px 0}
  .head-in{height:54px;padding:0 6px 0 14px;gap:8px}
  #site-head.scrolled .head-in{height:48px}
}

/* --- Kartu: radius kecil, garis rambut, angkat tipis (struktur UFC, warna biru) --- */
.card,.pcard,.price,.ccard,.evcard{border-radius:12px;
  box-shadow:0 1px 2px rgba(11,21,36,.05), 0 8px 20px -16px rgba(11,21,36,.2)}
a.card:hover,.card.hoverable:hover,.pcard:hover,.price:hover,.ccard:hover,.evcard:hover{
  transform:translateY(-2px);border-color:var(--tc-300);
  box-shadow:0 1px 2px rgba(11,21,36,.06), 0 16px 30px -20px rgba(15,30,61,.32)}

/* --- Tombol: kotak, kapital, sapuan cepat --- */
.btn{border-radius:9px;padding:13px 22px;font-size:12.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:10px 16px;font-size:11.5px}
.soc a:hover{transform:translateY(-2px)}

/* --- Motion ditahan: grain & blur reveal lebih tipis (kesan bersih) --- */
html.tc-ready body::after{opacity:.026}
/* reveal patah & cepat ala UFC: 14px naik, blur tipis, tanpa scale */
.reveal{transform:translateY(14px);filter:blur(2px);
  transition:opacity .34s linear,transform .3s cubic-bezier(.2,.75,.25,1),filter .26s linear}

/* --- Footer: beri ruang agar teks bawah tak tertutup tombol WhatsApp --- */
#site-foot{padding-bottom:78px!important}
@media (min-width:641px){#site-foot{padding-bottom:24px!important}}

/* =====================================================================
   MOTION v4 — layar buka sinematik, perpindahan halaman, reveal per
   kata, umpan-tekan klik, kursor kustom, parallax berkecepatan.
   Bahasa gerak: sapuan tegas + kurva cepat; tidak ada momen yang
   melambat lebih dari .7s. Semuanya patuh prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. LAYAR BUKA ---------- */
#tc-boot{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  overflow:hidden;pointer-events:none;color:#fff}
/* dua panel navy yang bertemu di tengah → jahitannya tak terlihat */
.tc-b-half{position:absolute;left:0;right:0;height:50.4%;display:none;
  transform:translateZ(0);transition:transform .62s cubic-bezier(.68,0,.18,1)}
.tc-b-half.t{top:0;background:linear-gradient(178deg,var(--skin-700,#1b56d6) 0%,var(--skin-n700,#0d2a63) 64%,var(--skin-n800,#0a1d42) 100%)}
.tc-b-half.b{bottom:0;background:linear-gradient(178deg,var(--skin-n800,#0a1d42) 0%,var(--skin-n900,#071432) 52%,var(--skin-n1000,#050d1f) 100%)}
#tc-boot .tc-b-half,#tc-x.in-mode .tc-b-half{display:block}
#tc-boot.out .tc-b-half.t,#tc-x.in-mode.out .tc-b-half.t{transform:translateY(-101%)}
#tc-boot.out .tc-b-half.b,#tc-x.in-mode.out .tc-b-half.b{transform:translateY(101%)}
.tc-b-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgb(var(--skin-rgb,158 203 255)/.07) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--skin-rgb,158 203 255)/.07) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(74% 64% at 50% 46%,#000 18%,transparent 100%);
          mask-image:radial-gradient(74% 64% at 50% 46%,#000 18%,transparent 100%)}
.tc-b-scan{position:absolute;top:0;bottom:0;left:-34%;width:34%;
  background:linear-gradient(90deg,transparent,rgb(var(--skin-rgb,158 203 255)/.08),transparent);
  animation:none}
@keyframes tcBScan{from{left:-34%}to{left:100%}}
.tc-b-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:15px;
  transition:opacity .26s linear,transform .5s var(--tc-ease)}
#tc-boot.out .tc-b-in,#tc-x.in-mode.out .tc-b-in{opacity:0;transform:translateY(-16px) scale(.98)}
.tc-b-wm{display:flex;gap:.3em;overflow:hidden;font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(32px,9vw,66px);line-height:1;letter-spacing:.06em}
.tc-b-wm em{display:inline-block;font-style:normal;transform:translateY(122%);
  animation:tcBLet .6s var(--tc-ease) forwards}
.tc-b-wm .c2 em{color:var(--tc-200)}
@keyframes tcBLet{to{transform:none}}
.tc-b-kick{font-size:10px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:rgb(var(--skin-rgb,214 232 255)/.6)}
.tc-b-rail{position:relative;width:min(226px,54vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,.18);overflow:hidden}
.tc-b-rail i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--tc-500),var(--skin-200,#cfe3ff));box-shadow:0 0 14px rgb(var(--skin-rgb,158 203 255)/.8)}
.tc-b-num{font-family:'Anton',Impact,sans-serif;font-size:11.5px;letter-spacing:.22em;color:var(--skin-200,#cfe3ff)}

/* ---------- 2. PERPINDAHAN HALAMAN ---------- */
/* gerbang dipasang <script> inline di head; public.js membukanya */
html[data-tcx]>body{opacity:0}
#tc-x{position:fixed;inset:0;z-index:9998;overflow:hidden;pointer-events:none;color:#fff}
/* keluar: tinta menyebar dari titik klik */
.tc-x-panel{position:absolute;inset:0;background:linear-gradient(200deg,var(--skin-800,#12409f),var(--skin-n800,#0a1d42) 50%,var(--skin-n1000,#050d1f));
  clip-path:circle(0px at var(--tx,50%) var(--ty,50%));
  transition:clip-path .5s cubic-bezier(.66,0,.18,1)}
#tc-x.go .tc-x-panel{clip-path:circle(152% at var(--tx,50%) var(--ty,50%))}
#tc-x.in-mode .tc-x-panel{display:none}
.tc-x-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;
  transition:opacity .3s linear .16s}
#tc-x.go .tc-x-mark,#tc-x.in-mode .tc-x-mark{opacity:1}
#tc-x.out .tc-x-mark{opacity:0;transition-delay:0s}
.tc-x-wm{font-family:'Anton',Impact,sans-serif;font-size:clamp(22px,5.4vw,38px);
  letter-spacing:.16em;text-transform:uppercase;color:#fff}
.tc-x-wm b{font-weight:400;color:var(--tc-200)}
.tc-x-spin{width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 52%,var(--skin-200,#cfe3ff) 94%,transparent);
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 68%);
          mask:radial-gradient(closest-side,transparent 66%,#000 68%);
  animation:tcXSpin .85s linear infinite}
@keyframes tcXSpin{to{transform:rotate(360deg)}}
/* konten halaman baru masuk mengikuti arah navigasi */
body.tcx-in-fwd{animation:tcxRise .48s var(--tc-ease) both}
body.tcx-in-back{animation:tcxDrop .48s var(--tc-ease) both}
@keyframes tcxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tcxDrop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* ---------- 3. JUDUL TERBUKA PER KATA (mask geser) ---------- */
.tc-split{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .08em}
.tc-split>i{display:inline-block;font-style:normal;transform:translateY(116%) rotate(1.6deg);opacity:0;
  transition:transform .58s var(--tc-ease),opacity .3s linear;transition-delay:var(--wd,0ms)}
.in .tc-split>i,.tc-split-host.in>.tc-split>i{transform:none;opacity:1}

/* ---------- 4. VARIAN REVEAL ---------- */
.reveal[data-rv="l"]{transform:translateX(-22px)}
.reveal[data-rv="r"]{transform:translateX(22px)}
.reveal[data-rv="z"]{transform:translateY(16px) scale(.972)}
.reveal[data-rv="w"]{transform:none;clip-path:inset(0 0 100% 0);filter:blur(0);opacity:0}
.reveal[data-rv="w"].in{clip-path:inset(0 0 0 0)}
.reveal[data-rv]{transition:opacity .42s linear,transform .46s cubic-bezier(.2,.78,.22,1),
  clip-path .6s cubic-bezier(.2,.78,.22,1),filter .32s linear}
/* gambar di dalam kartu membuka seperti diafragma */
.tc-iris{clip-path:inset(14% 14% 14% 14%);opacity:0;transition:clip-path .7s var(--tc-ease),opacity .4s linear}
.tc-iris.in{clip-path:inset(0 0 0 0);opacity:1}

/* ---------- 5. UMPAN-TEKAN KLIK ---------- */
.tc-rip{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.tc-rip-d{position:absolute;z-index:4;border-radius:50%;pointer-events:none;opacity:.5;transform:scale(0);
  background:radial-gradient(circle,var(--rip,rgba(255,255,255,.6)) 0%,transparent 72%);
  animation:tcRip .58s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes tcRip{to{transform:scale(1);opacity:0}}
a.btnx:active,.h3-btn:active,.rpill:active,.jtab:active,.g-cta:active,.lk:active,
.head-cta:active,.btn:active,.mnav a:active,.mnav-cta:active{
  transform:translateY(1px) scale(.972);transition:transform .09s var(--tc-ease)}
.jtab.on{box-shadow:inset 0 0 0 1px rgb(var(--skin-rgb,158 203 255)/.35)}

/* ---------- 6. KURSOR KUSTOM (hanya pointer halus) ---------- */
@media (hover:hover) and (pointer:fine){
  html.tc-curs body{cursor:none}
  html.tc-curs input,html.tc-curs textarea,html.tc-curs select,html.tc-curs [contenteditable]{cursor:auto}
  .tc-cur{position:fixed;top:0;left:0;z-index:9990;pointer-events:none;border-radius:50%;opacity:0;
    transition:opacity .25s linear,width .26s var(--tc-ease),height .26s var(--tc-ease),
      margin .26s var(--tc-ease),background .2s linear,border-color .2s linear}
  .tc-cur.on{opacity:1}
  .tc-cur-dot{width:6px;height:6px;margin:-3px;background:var(--tc-500)}
  .tc-cur-ring{width:34px;height:34px;margin:-17px;border:1.5px solid rgb(var(--skin-rgb,59 130 246)/.5)}
  .tc-cur-ring.hot{width:56px;height:56px;margin:-28px;border-color:rgb(var(--skin-rgb,158 203 255)/.85);
    background:rgb(var(--skin-rgb,59 130 246)/.1)}
  .tc-cur-ring.tap{width:20px;height:20px;margin:-10px;background:rgb(var(--skin-rgb,59 130 246)/.28)}
}

/* ---------- 7. BILAH PROGRES BACA (diperkuat) ---------- */
#tc-progress{height:3px;background:linear-gradient(90deg,var(--tc-700),var(--tc-500) 52%,var(--skin-200,#a9cdff));
  box-shadow:0 0 14px rgb(var(--skin-rgb,59 130 246)/.45)}
#tc-progress::after{content:"";position:absolute;right:0;top:-1px;width:2px;height:5px;border-radius:2px;
  background:#eaf3ff;box-shadow:0 0 10px 3px rgb(var(--skin-rgb,158 203 255)/.8)}

/* ---------- 8. PARALLAX & NAFAS HERO ---------- */
[data-tcp]{will-change:transform}
html.tc-ready .h3-img{animation:tcKen 24s ease-in-out infinite alternate}
@keyframes tcKen{from{transform:scale(1.045)}to{transform:scale(1.11) translate3d(-1.4%,-1%,0)}}
/* drawer mobile masuk bertingkat */
.mnav.open>a{animation:tcMnav .4s var(--tc-ease) both}
.mnav.open>a:nth-child(2){animation-delay:.04s}.mnav.open>a:nth-child(3){animation-delay:.08s}
.mnav.open>a:nth-child(4){animation-delay:.12s}.mnav.open>a:nth-child(5){animation-delay:.16s}
.mnav.open>a:nth-child(6){animation-delay:.2s}.mnav.open>a:nth-child(7){animation-delay:.24s}
@keyframes tcMnav{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* ---------- 9. SCROLL-DRIVEN ASLI (browser pendukung) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes tcViewIn{from{opacity:0;transform:translateY(20px);filter:blur(2px)}
      to{opacity:1;transform:none;filter:blur(0)}}
    @keyframes tcViewL{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
    @keyframes tcViewR{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
    @keyframes tcViewZ{from{opacity:0;transform:translateY(16px) scale(.972)}to{opacity:1;transform:none}}
    @keyframes tcViewW{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
    .reveal{opacity:1;transform:none;filter:none;transition:none;
      animation:tcViewIn linear both;animation-timeline:view();animation-range:entry 4% entry 44%}
    .reveal[data-rv="l"]{animation-name:tcViewL}
    .reveal[data-rv="r"]{animation-name:tcViewR}
    .reveal[data-rv="z"]{animation-name:tcViewZ}
    .reveal[data-rv="w"]{animation-name:tcViewW}
  }
}

/* ---------- 10. GRID ASYNC: tahan animasi sampai barisnya masuk layar ----------
   .stagger dipakai grid yang dirender async (program, coach, artikel, acara).
   Tanpa penahan ini animasinya selesai jauh sebelum pembaca sampai ke sana. */
html.tc-stag .stagger > *{animation-play-state:paused}
html.tc-stag .stagger.in > *{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  #tc-boot,#tc-x,.tc-b-scan,.tc-x-spin{display:none!important}
  html[data-tcx]>body{opacity:1!important}
  body.tcx-in-fwd,body.tcx-in-back{animation:none!important}
  .tc-split>i{transform:none!important;opacity:1!important}
  .tc-rip-d,.tc-cur{display:none!important}
  html.tc-curs body{cursor:auto}
  .tc-iris{clip-path:none!important;opacity:1!important}
  html.tc-ready .h3-img{animation:none!important}
  .mnav.open>a{animation:none!important}
  #tc-progress::after{display:none}
}

/* =====================================================================
   SPECTACLE v5 — MOMEN PERTAMA BUKA
   Masalah yang dipecahkan: korografi hero selama ini dimulai saat markup
   disisipkan, yaitu KETIKA TIRAI MASIH TURUN — jadi gerakan terbaiknya
   justru tidak pernah dilihat. Tirai kini memegang semua animasi masuk
   (html.tc-armed), lalu melepaskannya serentak saat naik (html.tc-open),
   disusul satu benturan (html.tc-hit) tepat saat baris judul mendarat.
   Kelas-kelas ini hanya dipasang public.js; tanpa JS semuanya tetap terlihat.
   ===================================================================== */

/* ---------- 1. TIRAI: huruf membentur, jahitan menyala, loncere berbunyi ---------- */
.tc-b-wm em{--fy:118%;transform:translateY(118%) scale(1.22);opacity:0;
  animation:tcBSlam .58s cubic-bezier(.2,1.06,.3,1) both}
.tc-b-wm .c2 em{--fy:-118%;transform:translateY(-118%) scale(1.22);color:var(--tc-200)}
@keyframes tcBSlam{
  0%{opacity:0;transform:translateY(var(--fy,118%)) scale(1.22)}
  42%{opacity:1}
  66%{transform:translateY(-6%) scale(.955);
    text-shadow:0 0 26px rgba(255,255,255,.9),-2px 0 rgba(255,90,120,.55),2px 0 rgb(var(--skin-rgb,90 170 255)/.55)}
  84%{transform:translateY(2%) scale(1.018);text-shadow:0 0 12px rgba(255,255,255,.35)}
  100%{opacity:1;transform:none;text-shadow:none}
}
/* Angka progres tetap stabil; animasi opacity berulang terasa seperti flicker. */
.tc-b-num{animation:none;opacity:1}
/* label ronde: penanda "opening night", kecil dan senyap */
.tc-b-round{display:inline-flex;align-items:center;gap:9px;
  font-size:9px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;
  color:rgb(var(--skin-rgb,207 227 255)/.5)}
.tc-b-round b{font-family:'Anton',Impact,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.12em;color:var(--skin-200,#cfe3ff)}
/* jahitan tengah menyala sesaat sebelum panel terbelah */
.tc-b-seam{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-1px;z-index:4;
  pointer-events:none;opacity:0;transform:scaleX(.06);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent)}
#tc-boot.hit .tc-b-seam,#tc-x.hit .tc-b-seam{animation:tcSeam .44s cubic-bezier(.2,.8,.2,1) both}
@keyframes tcSeam{0%{opacity:0;transform:scaleX(.06)}26%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
/* dua gelombang loncere yang melebar */
.tc-b-wave{position:absolute;left:50%;top:46%;width:150px;height:150px;margin:-75px 0 0 -75px;
  z-index:4;border-radius:50%;pointer-events:none;opacity:0;
  border:1.5px solid rgb(var(--skin-rgb,207 227 255)/.6)}
#tc-boot.hit .tc-b-wave,#tc-x.hit .tc-b-wave{animation:tcWave .82s cubic-bezier(.16,.74,.24,1) both}
#tc-boot.hit .tc-b-wave.w2,#tc-x.hit .tc-b-wave.w2{animation-delay:.12s;border-color:rgb(var(--skin-rgb,158 203 255)/.42)}
@keyframes tcWave{0%{opacity:.95;transform:scale(.24)}100%{opacity:0;transform:scale(3.4)}}
/* percikan: dibuat public.js di dalam #tc-boot */
.tc-spk{position:absolute;left:50%;top:48%;z-index:5;width:3px;height:3px;border-radius:50%;
  pointer-events:none;background:#eaf3ff;box-shadow:0 0 12px 2px rgb(var(--skin-rgb,158 203 255)/.85);
  animation:tcSpk .84s cubic-bezier(.12,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes tcSpk{0%{opacity:1;transform:translate(0,0) scale(1.15)}
  100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.12)}}
/* panel terbelah dengan sedikit puntir — terasa kena pukulan, bukan tergeser */
.tc-b-half{transition:transform .54s cubic-bezier(.72,0,.2,1)}
#tc-boot.out .tc-b-half.t,#tc-x.in-mode.out .tc-b-half.t{transform:translateY(-103%) rotate(-1.1deg)}
#tc-boot.out .tc-b-half.b,#tc-x.in-mode.out .tc-b-half.b{transform:translateY(103%) rotate(1.1deg)}

/* ---------- 2. SEMUA ANIMASI MASUK HERO DIPEGANG SAMPAI TIRAI NAIK ---------- */
html.tc-js.tc-armed .h3-eyebrow,html.tc-js.tc-armed .h3-title,html.tc-js.tc-armed .h3-lede,
html.tc-js.tc-armed .h3-btns,html.tc-js.tc-armed .h3-foot,html.tc-js.tc-armed .h3-shot,
html.tc-js.tc-armed .h3-glass,html.tc-js.tc-armed .h3-tag,
html.tc-js.tc-armed .hero-sub .wrap > *,html.tc-js.tc-armed header.arena .wrap > *,
html.tc-js.tc-armed .hero-sub::after,html.tc-js.tc-armed header.arena::after,
html.tc-js.tc-armed .err-content,html.tc-js.tc-armed .err-actions .btn{
  animation:none!important;opacity:0}
/* band sub-halaman ikut padam: saat tirai naik lampunya menyala serentak */
html.tc-js.tc-armed .hero-sub,html.tc-js.tc-armed header.arena,
html.tc-js.tc-armed .err-page{opacity:0}

/* ---------- 3. KOROGRAFI HERO SAAT TIRAI NAIK ---------- */
@keyframes spIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes spFade{from{opacity:0}to{opacity:1}}
@keyframes spWipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes spBtn{0%{opacity:0;transform:translateY(16px) scale(.94)}
  66%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:none}}
/* gambar dibuka seperti tirai ring (clip-path) TANPA menyentuh transform —
   transform .h3-shot dipunya oleh tilt 3D, tidak boleh dirampas animasi. */
@keyframes spFig{from{opacity:0;clip-path:inset(26% 0 0 0);translate:0 44px;scale:.965}
  to{opacity:1;clip-path:inset(0 0 0 0);translate:0 0;scale:1}}
@keyframes spGlass{from{opacity:0;translate:0 30px;filter:blur(5px)}
  to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes spTag{0%{opacity:0;scale:.7}70%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
html.tc-open .h3-eyebrow{animation:spWipe .46s cubic-bezier(.2,.8,.2,1) both}
html.tc-open .h3-title{animation:spFade .3s linear both}
html.tc-open .h3-lede{animation:spIn .56s var(--tc-ease) both .3s}
html.tc-open .h3-btns{animation:spBtn .54s var(--tc-spring) both .42s}
html.tc-open .h3-foot{animation:spIn .56s var(--tc-ease) both .56s}
html.tc-open .h3-shot{animation:spFig .72s var(--tc-ease) both .14s}
html.tc-open .h3-glass{animation:spGlass .66s var(--tc-ease) both .6s}
/* .h3-tag: mendarat lalu melanjutkan ayunan aslinya (scale vs translate = terpisah) */
html.tc-open .h3-tag{animation:spTag .46s var(--tc-spring) both .9s,h3float 5.5s 1.5s ease-in-out infinite}
/* ---------- 3b. SUB-HALAMAN MEMAKAI BAHASA GERANG YANG SAMA ---------- */
/* band menyala, eyebrow disapu, judul membentur per kata, tombol memantul */
@keyframes spBand{from{opacity:0;translate:0 -12px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes spMark{from{opacity:0;letter-spacing:.42em;translate:22px 0}to{opacity:1;letter-spacing:normal;translate:0 0}}
html.tc-open .hero-sub,html.tc-open header.arena{animation:spBand .7s var(--tc-ease) both}
html.tc-open .hero-sub .wrap > *,html.tc-open header.arena .wrap > *{animation:spIn .62s var(--tc-ease) both}
html.tc-open .hero-sub .eyebrow,html.tc-open header.arena .eyebrow{animation:spWipe .5s cubic-bezier(.2,.8,.2,1) both}
/* judul yang sudah dipecah jadi masker hanya perlu ikut terlihat, bukan naik dua kali */
html.tc-open .hero-sub h1.tc-jabbed,html.tc-open header.arena h1.tc-jabbed{animation:spFade .26s linear both}
html.tc-open .hero-sub .btn,html.tc-open header.arena .btn{animation:spBtn .54s var(--tc-spring) both .48s}
html.tc-open .hero-sub::after,html.tc-open header.arena::after{animation:spMark .9s var(--tc-ease) both .3s}
/* layar 404/500 ikut korografi yang sama */
html.tc-open .err-page{animation:spBand .7s var(--tc-ease) both}
html.tc-open .err-content{animation:spIn .66s var(--tc-ease) both}
html.tc-open .err-code{animation:spWipe .5s cubic-bezier(.2,.8,.2,1) both}
html.tc-open .err-desc{animation:spIn .6s var(--tc-ease) both .34s}
html.tc-open .err-actions .btn{animation:spBtn .54s var(--tc-spring) both .46s}

/* ---------- 4. JUDUL MEMBENTUR PER BARIS / PER KATA ---------- */
.tc-jl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.tc-jl > i{display:block;font-style:normal}
/* masker per kata untuk judul sub-halaman yang cuma satu baris */
.tc-jw{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.tc-jw > i{display:inline-block;font-style:normal}
/* masker perlu overflow:hidden saat naik; setelah baris terakhir mendarat
   kelas .tc-free dilepas supaya text-shadow judul tidak terpotong */
.tc-free .tc-jl,.tc-free .tc-jw{overflow:visible;padding-bottom:0;margin-bottom:0}
@keyframes spWord{0%{opacity:0;transform:translateY(114%) rotate(1.6deg)}
  52%{opacity:1}78%{transform:translateY(-3.2%) scale(1.026)}100%{opacity:1;transform:none}}
html.tc-js.tc-armed .h3-title .tc-jl > i,html.tc-js.tc-armed .tc-jw > i,html.tc-js.tc-armed .tc-jl > i{animation:none!important;opacity:0}
html.tc-open .tc-jl > i,html.tc-open .tc-jw > i{
  animation:spWord .58s cubic-bezier(.18,.9,.24,1) both;animation-delay:var(--wd,0ms)}
/* kilat cahaya saat baris terakhir mendarat — dipakai hero index & band sub-halaman */
.tc-flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(58% 42% at 50% 42%,rgba(255,255,255,.6),rgb(var(--skin-rgb,158 203 255)/.2) 44%,transparent 72%)}
html.tc-hit .tc-flash{animation:spFlash .52s ease-out both}
@keyframes spFlash{0%{opacity:0}16%{opacity:.55}100%{opacity:0}}
@keyframes spHit{0%{transform:none}14%{transform:translate3d(-7px,3px,0) scale(1.006)}
  32%{transform:translate3d(6px,-2px,0)}50%{transform:translate3d(-4px,1px,0)}
  70%{transform:translate3d(2px,-1px,0)}100%{transform:none}}
html.tc-hit .h3-top,html.tc-hit .hero-sub .wrap,html.tc-hit header.arena .wrap,
html.tc-hit .err-title{animation:spHit .44s cubic-bezier(.36,.07,.19,.97) both}

/* ---------- 5. DEBU ARENA DI BALIK HERO ---------- */
.tc-dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.42}
.hero-sub .tc-dust,header.arena .tc-dust,.err-page .tc-dust{z-index:0;opacity:.5}
.tc-dust i{position:absolute;bottom:-4%;width:3px;height:3px;border-radius:50%;opacity:0;
  background:rgba(255,255,255,.95);box-shadow:0 0 7px 1px rgb(var(--skin-rgb,158 203 255)/.7);
  animation:spDust var(--du,9s) linear infinite;animation-delay:var(--dd,0s)}
@keyframes spDust{0%{opacity:0;transform:translateY(0) translateX(0) scale(.55)}
  14%{opacity:.9}84%{opacity:.45}
  100%{opacity:0;transform:translateY(var(--dt,-86vh)) translateX(var(--ddx,24px)) scale(1.1)}}
.hero-sub .tc-dust i,header.arena .tc-dust i{--dt:-300px;--du:8s}

/* ---------- 6. MODE GERAK MINIM: semuanya langsung tampil ---------- */
@media (prefers-reduced-motion:reduce){
  .tc-b-wm em{animation:none!important;transform:none!important;opacity:1!important}
  .tc-b-num{animation:none!important;opacity:1!important}
  .tc-b-seam,.tc-b-wave,.tc-spk,.tc-flash,.tc-dust{display:none!important}
  #tc-boot.out .tc-b-half.t,#tc-boot.out .tc-b-half.b,
  #tc-x.in-mode.out .tc-b-half.t,#tc-x.in-mode.out .tc-b-half.b{transform:none!important}
  html.tc-js.tc-armed .hero-sub,html.tc-js.tc-armed header.arena,html.tc-js.tc-armed .err-page,
  html.tc-js.tc-armed .hero-sub .wrap > *,html.tc-js.tc-armed header.arena .wrap > *,
  html.tc-js.tc-armed .hero-sub::after,html.tc-js.tc-armed header.arena::after,
  html.tc-js.tc-armed .err-content,html.tc-js.tc-armed .err-actions .btn,
  html.tc-js.tc-armed .tc-jl > i,html.tc-js.tc-armed .tc-jw > i,
  html.tc-js.tc-armed .h3-eyebrow,html.tc-js.tc-armed .h3-title,html.tc-js.tc-armed .h3-lede,
  html.tc-js.tc-armed .h3-btns,html.tc-js.tc-armed .h3-foot,html.tc-js.tc-armed .h3-shot,
  html.tc-js.tc-armed .h3-glass,html.tc-js.tc-armed .h3-tag{
    animation:none!important;opacity:1!important;filter:none!important}
  html.tc-open .hero-sub,html.tc-open .hero-sub .wrap > *,html.tc-open .hero-sub .eyebrow,
  html.tc-open .hero-sub .btn,html.tc-open .hero-sub::after,
  html.tc-open header.arena,html.tc-open header.arena .wrap > *,html.tc-open header.arena .eyebrow,
  html.tc-open header.arena .btn,html.tc-open header.arena::after,
  html.tc-open .err-page,html.tc-open .err-content,html.tc-open .err-code,
  html.tc-open .err-desc,html.tc-open .err-actions .btn,
  html.tc-open .tc-jl > i,html.tc-open .tc-jw > i,
  html.tc-open .h3-eyebrow,html.tc-open .h3-title,html.tc-open .h3-lede,html.tc-open .h3-btns,
  html.tc-open .h3-foot,html.tc-open .h3-shot,html.tc-open .h3-glass,html.tc-open .h3-tag,
  html.tc-ready .hero-sub .fade-up{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  html.tc-hit .h3-top,html.tc-hit .hero-sub .wrap,html.tc-hit header.arena .wrap,
  html.tc-hit .err-title{animation:none!important}
}

/* =====================================================================
   PENYELARASAN v6 — SATU SISTEM SECTION UNTUK SEMUA HALAMAN
   Beranda (index.html) punya ritme, token dan struktur judul sendiri.
   Layer ini mempromosikannya ke seluruh halaman publik supaya sub-halaman
   otomatis berdiri di tangga yang sama: jarak vertikal, hairline band,
   judul .h-sec/.sec-head, kartu CTA, dan band malam ala .ctaband.
   Tidak ada animasi baru di sini — murni struktur & token.
   ===================================================================== */
:root{
  /* ritme vertikal — identik dengan --sec-pad/--head-gap beranda */
  --tc-sec-pad:clamp(78px,7.6vw,122px);
  --tc-sec-pad-sm:clamp(56px,13vw,78px);
  --tc-head-gap:clamp(28px,3.2vw,44px);
  --tc-gap:clamp(14px,1.5vw,20px);
  /* bayangan — satu pasang untuk terang & gelap */
  --tc-sh:0 1px 2px rgba(16,29,54,.05),0 10px 22px -18px rgba(16,29,54,.22);
  --tc-sh-hover:0 1px 2px rgba(16,29,54,.06),0 18px 34px -22px rgba(16,29,54,.34);
  --tc-sh-night:0 30px 60px -34px rgba(0,0,0,.7);
  /* hairline & glass untuk band malam */
  --tc-night-line:rgba(255,255,255,.18);
  --tc-night-glass:rgba(10,23,48,.34);
}

/* ---------- 1. RITME SECTION ---------- */
section.block{padding:var(--tc-sec-pad) 0}
@media (max-width:760px){section.block{padding:var(--tc-sec-pad-sm) 0}}

/* band soft: satu warna + hairline di atas, sama seperti .band di beranda,
   supaya dua band yang berdempetan tetap terbaca sebagai dua bagian */
section.block.band{background:var(--bg-soft);border-top:1px solid var(--line)}
/* rapat ke hero: band pertama setelah .hero-sub tidak needing full pad */
section.block.top-sm{padding-top:clamp(40px,5vw,68px)}
section.block .grid{gap:var(--tc-gap)}

/* ---------- 2. STRUKTUR JUDUL (dipromosikan dari index) ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-head > div{min-width:0;flex:1 1 320px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center;
  border-bottom:0;padding-bottom:0}
.sec-head.center .eyebrow{justify-content:center}
.sec-head + .grid,.sec-head + .stagger,.sec-head + [id]{margin-top:var(--tc-head-gap)}
.head-center{text-align:center;margin-bottom:var(--tc-head-gap)}

/* .h-sec = .sec-title (public.css) — satu skala untuk judul section,
   baik ditulis lewat markup beranda maupun sub-halaman */
.h-sec{font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(28px,4.2vw,44px);line-height:1;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink);margin:14px 0 0}
.sec-lead{color:var(--muted);font-size:15px;line-height:1.65;max-width:560px;margin:12px 0 0}
.sec-head.center .sec-lead{margin-inline:auto}
.eyebrow.center{justify-content:center}

/* tautan "lihat semua" ala beranda */
.lk{color:var(--tc-600);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.lk .ms{font-size:18px;transition:transform var(--t-fast) var(--tc-ease)}
.lk:hover .ms{transform:translateX(5px)}

/* baris tombol */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btns.center,.center .btns{justify-content:center}

/* tumpukan kartu satu kolom — dipakai daftar yang tidak perlu grid 3 kolom */
.stack{display:flex;flex-direction:column;gap:var(--tc-gap);margin-top:var(--tc-head-gap)}

/* judul level kartu + teks pengantarnya */
.h-sub{font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(22px,2.6vw,30px);line-height:1.05;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink);margin:0}
.card-lead{color:var(--muted);font-size:14px;line-height:1.6;margin:6px 0 18px}

/* kartu besar berbingkai (form, ringkasan) */
.apply-card{padding:clamp(24px,3vw,32px);max-width:640px;margin-top:var(--tc-head-gap);
  border-radius:var(--r,14px);box-shadow:var(--tc-sh)}

/* ---------- FORM PUBLIK — kontrol dasar situs.
   public.css tidak punya gaya input sama sekali, jadi form tanpa lapisan ini
   menggambar kotak seukuran placeholder-nya. */
.frm{display:grid;gap:15px}
.frm-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fld{display:block;min-width:0}
.fld-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:7px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.fld-t small{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.inp{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:15px;line-height:1.5;
  color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:12px;
  padding:12px 14px;transition:border-color var(--t-fast) var(--tc-ease),box-shadow var(--t-fast) var(--tc-ease),background var(--t-fast) var(--tc-ease)}
.inp::placeholder{color:var(--ink-mute)}
.inp:hover{border-color:var(--blue-300)}
.inp:focus{outline:none;border-color:var(--blue);background:var(--surface);
  box-shadow:0 0 0 4px rgb(var(--skin-rgb,37 99 235)/.14)}
textarea.inp{min-height:116px;resize:vertical;line-height:1.65}
.fld-row{display:flex;gap:10px;align-items:stretch}
.fld-row .inp{flex:1 1 auto;min-width:0}
.fld-row .btn{flex:none}
.fld-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.frm-msg{display:none;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5}
.frm-msg.on{display:block}
.frm-msg.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.frm-msg.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
[data-theme="dark"] .frm-msg.ok{background:rgba(16,185,129,.12);color:#6ee7b7;border-color:rgba(16,185,129,.35)}
[data-theme="dark"] .frm-msg.err{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.35)}
.frm-send{justify-content:center;width:100%;margin-top:3px}
@media(max-width:640px){.frm-2{grid-template-columns:1fr}}

/* ---------- 3. BAND MALAM — CTA sub-halaman bicara dengan bahasa hero ---------- */
section.block.night{
  background:
    radial-gradient(115% 90% at 85% 0%,rgb(var(--skin-rgb,59 130 246)/.4),transparent 58%),
    var(--g-night);
  color:var(--nt-txt);border-top:0;position:relative;overflow:hidden;isolation:isolate}
section.block.night::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);background-size:26px 26px}
section.block.night > .wrap{position:relative;z-index:1}
section.block.night h1,section.block.night h2,section.block.night h3,
section.block.night .h-sec,section.block.night .sec-title,section.block.night .impact{color:#fff}
section.block.night .eyebrow{color:var(--tc-300)}
section.block.night .eyebrow::before{background:currentColor}
section.block.night p{color:var(--nt-txt-2)}
section.block.night a:not(.btn):not(.lk){color:var(--tc-200)}
section.block.night .card{
  background:var(--tc-night-glass);border:1px solid var(--tc-night-line);
  box-shadow:var(--tc-sh-night);color:var(--nt-txt);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
section.block.night .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
section.block.night .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;box-shadow:none}
section.block.night .lk{color:var(--tc-200)}

/* kartu CTA terpusat — pengganti blok inline style yang berulang di tiap halaman */
.ctacard{padding:clamp(32px,5vw,56px);text-align:center;border-radius:20px}
.ctacard p{max-width:520px;margin:0 auto}
.ctacard .btns{justify-content:center;margin-top:26px}
.ctacard .h-sec,.ctacard .sec-title{margin-top:14px;letter-spacing:.01em}
@media (max-width:640px){.ctacard{padding:30px 20px}}

/* ============ KULIT ACARA ============
   Pita pengumuman hanya dibuat oleh public.js ketika kulit event aktif dan
   admin mengisi label. Semua warnanya turun dari satu aksen (assets/js/skin.js). */
#tc-skin-ribbon{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;padding:8px var(--gutter,24px);text-align:center;
  font:800 11px/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,var(--skin-700,#1d4ed8),var(--skin-600,#2563eb) 48%,var(--skin-800,#1e40af));
  box-shadow:0 10px 24px -16px rgb(var(--skin-rgb,37 99 235)/.95)}
#tc-skin-ribbon::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.22)}
@media (max-width:640px){#tc-skin-ribbon{letter-spacing:.1em;font-size:10px}}

/* ============ POP-UP ACARA ============
   Gambar promosi yang melayang di halaman publik (pengaturan admin:
   content.popup). Hanya dibuat public.js bila pop-up aktif dan ada gambar yang
   jatuh dalam rentang tanggalnya, jadi tidak ada biaya bagi halaman yang tidak
   memakainya; beberapa gambar aktif tampil bergantian dengan tombol navigasi.
   Warna turun dari kulit acara yang sedang terpasang (assets/js/skin.js);
   tokennya (--surface/--ink/--body) disediakan public.css di semua halaman publik. */
@keyframes tcPopFade{from{opacity:0}to{opacity:1}}
@keyframes tcPopRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
#tc-popup{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px}
.tc-popup-bd{position:absolute;inset:0;background:rgba(8,14,28,.68);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:tcPopFade .24s ease both}
.tc-popup-card{position:relative;width:min(460px,100%);max-height:88vh;overflow-y:auto;
  border-radius:20px;background:var(--surface,#fff);border:1px solid rgba(15,29,51,.1);
  box-shadow:0 40px 80px -32px rgba(3,10,24,.7);animation:tcPopRise .32s cubic-bezier(.2,.8,.25,1) both}
.tc-popup-x{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;
  background:rgba(8,14,28,.55);border:1px solid rgba(255,255,255,.3);transition:background var(--t-fast) ease}
.tc-popup-x:hover{background:rgba(8,14,28,.8)}
.tc-popup-x .ms{font-size:20px}
.tc-popup-stage{display:block;line-height:0;background:var(--tc-50,#eff6ff)}
.tc-popup-link{display:block;line-height:0;cursor:pointer}
.tc-popup-img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;background:var(--tc-50,#eff6ff)}
.tc-popup-cap{padding:15px 20px 4px;text-align:center;
  font:800 clamp(15px,2.2vw,18px)/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink,#0b1524)}
.tc-popup-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px 16px}
.tc-popup-prev,.tc-popup-next{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  padding:0;cursor:pointer;color:var(--ink,#0b1524);background:transparent;
  border:1px solid rgba(15,29,51,.16);transition:background var(--t-fast) ease}
.tc-popup-prev:hover,.tc-popup-next:hover{background:rgba(15,29,51,.07)}
.tc-popup-dots{display:flex;align-items:center;gap:7px}
.tc-popup-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(15,29,51,.22);transition:transform var(--t-fast) ease,background var(--t-fast) ease}
.tc-popup-dot.on{background:var(--skin-600,#2563eb);transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.tc-popup-bd,.tc-popup-card{animation:none}}
@media (max-width:640px){#tc-popup{padding:14px}
  .tc-popup-card{max-height:86vh}
  .tc-popup-cap{padding:14px 16px 2px;font-size:15px}
  .tc-popup-nav{padding:10px 14px 14px}}

/* =====================================================================
   DINDING SPONSOR — dipakai halaman /event dan /events. Nilai kerja sama
   tidak pernah ikut ke permukaan publik; yang tampil hanya nama, logo,
   dan level kerja sama yang diisi admin.
   ===================================================================== */
.sp-wall{margin-top:var(--tc-head-gap);display:flex;flex-direction:column;gap:22px}
.sp-tier{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sp-tier > b{flex:none;min-width:132px;font-size:10.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-top:13px}
.sp-row{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 320px}
.sp{display:inline-flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--tc-sh);
  font-size:14px;font-weight:800;color:var(--ink);text-decoration:none;
  transition:transform .25s var(--tc-ease),border-color .25s}
.sp:hover{transform:translateY(-2px);border-color:var(--blue-300)}
.sp img{height:26px;width:auto;max-width:130px;object-fit:contain;display:block}
.sp .mk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue);font-size:11px}
/* Level kerja sama tidak lagi duduk di samping kartunya kalau ruang tidak
   cukup — ia jadi baris judul sendiri. */
@media (max-width:820px){
  .sp-tier > b{padding-top:0;min-width:0;flex:1 1 100%}
}

/* =====================================================================
   RESPONSIVE SAFETY NET — shared by all public pages
   ===================================================================== */
html,body{width:100%;max-width:100%;min-width:0}
html{overflow-x:clip}
body{overflow-x:hidden}
main,main section,#site-head,#site-foot{min-width:0;max-width:100%}
main img,main video,main iframe,main canvas,main svg{max-width:100%}
main :where(.grid,.g2,.g3,[class*="-grid"],[class*="-layout"])> *{min-width:0}
main :where(p,li,h1,h2,h3,h4,button,a,label,td,th){overflow-wrap:anywhere}
main table{max-width:100%;border-collapse:collapse}
main :where(.table-wrap,.tbl-wrap){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea,button{max-width:100%}

@media(max-width:760px){
  .wrap,.wrapx{width:100%;max-width:100%;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
  .hero-sub .wrap,.hero-sub .wrapx{position:relative;z-index:1}
  .hero-sub h1{font-size:clamp(34px,8.5vw,58px);overflow-wrap:anywhere}
  .grid,.g2,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .articles-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
  .btns{flex-wrap:wrap;gap:10px}
  .btns .btn{max-width:100%;white-space:normal}
  .sec-head,.rhead{min-width:0;flex-wrap:wrap}
  .sec-head>*,.rhead>*{min-width:0;max-width:100%}
  .frm-2{grid-template-columns:minmax(0,1fr)}
  .cal-main{padding:clamp(12px,3vw,20px)}
  .foot-grid>*{min-width:0}
  #site-foot .foot-bar{flex-wrap:wrap;gap:10px}
}

@media(max-width:560px){
  .grid,.g2,.g3{grid-template-columns:minmax(0,1fr)}
  .wrap,.wrapx{padding-left:16px;padding-right:16px}
  .hero-sub h1{font-size:clamp(32px,9.5vw,48px);line-height:1.02}
  .hero-sub{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}
  .card{max-width:100%}
  .cal-main{padding:12px 8px}
  .cal-row{min-width:0}
  .cal-act{flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr!important}
  .foot-grid>:nth-child(1){grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}