
:root{
  --g:#B8FF3C;--g2:#d4ff7a;--g-dim:rgba(184,255,60,0.12);
  --dk:#070a06;--dk2:#0d120b;--dk3:#121a0f;--mid:#1e2b1a;
  --gray:#5a7052;--lt:#c8dcc0;--white:#f0f8ea;
  --red:#ff3c3c;--amber:#ffb83c;
  --font-head:'Archivo Black',sans-serif;
  --font-ui:'Syne',sans-serif;
  --font-mono:'DM Mono',monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);background:var(--dk);color:var(--lt);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,select{font-family:inherit}

/* PARTICLES */
#ptc{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}

/* NAVBAR */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 48px;display:flex;align-items:center;gap:48px;transition:all .4s var(--ease)}
.nav.solid{background:rgba(7,10,6,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(184,255,60,.08);padding:14px 48px}
.logo{font-family:var(--font-head);font-size:1.5rem;letter-spacing:-.02em;color:var(--white)}
.logo em{color:var(--g);font-style:normal}
.nav-links{display:flex;gap:36px;list-style:none;margin-left:auto}
.nav-links a{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,220,192,.65);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--g);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--g)}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--g);color:var(--dk);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:11px 26px;border-radius:100px;border:none;transition:all .2s}
.nav-cta:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(184,255,60,.35)}

/* HERO */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:120px 48px 80px;position:relative;overflow:hidden;gap:40px}
.h-mesh{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 90% at 80% 50%,rgba(30,70,20,.7) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(184,255,60,.04) 0%,transparent 60%)}
.h-scan{position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);pointer-events:none}
.h-court{position:absolute;right:-5%;top:50%;transform:translateY(-50%) perspective(1000px) rotateY(-15deg) rotateX(5deg);width:580px;height:370px;border:1px solid rgba(184,255,60,.1);border-radius:6px;z-index:0;animation:cpulse 6s ease-in-out infinite}
.h-court::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(184,255,60,.08)}
.h-court::after{content:'';position:absolute;inset:48px;border:1px solid rgba(184,255,60,.06);border-radius:4px}
.h-net{position:absolute;left:50%;top:0;bottom:0;width:3px;background:rgba(184,255,60,.15);transform:translateX(-50%)}
.h-circle{position:absolute;left:50%;top:50%;width:76px;height:76px;border:1px solid rgba(184,255,60,.08);border-radius:50%;transform:translate(-50%,-50%)}
@keyframes cpulse{0%,100%{box-shadow:0 0 40px rgba(184,255,60,.04)}50%{box-shadow:0 0 80px rgba(184,255,60,.12)}}
.h-ball{position:absolute;width:13px;height:13px;background:var(--g);border-radius:50%;box-shadow:0 0 20px var(--g),0 0 50px rgba(184,255,60,.4);z-index:1;animation:btraject 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes btraject{0%{left:20%;top:30%;opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1)}30%{left:45%;top:60%}50%{left:75%;top:25%}70%{left:55%;top:70%}90%{left:25%;top:45%;opacity:1}100%{left:20%;top:30%;opacity:0;transform:scale(.5)}}
.h-content{position:relative;z-index:2}
.h-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(184,255,60,.08);border:1px solid rgba(184,255,60,.2);padding:7px 16px;border-radius:100px;margin-bottom:28px}
.h-dot{width:7px;height:7px;background:var(--g);border-radius:50%;animation:blink 1.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.h-badge span{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--g)}
.h-title{font-family:var(--font-head);font-size:clamp(3.5rem,8vw,7.5rem);line-height:.9;letter-spacing:-.03em;color:var(--white);margin-bottom:28px;overflow:hidden}
.h-line{display:block;animation:slideUp .9s var(--ease) both}
.h-line:nth-child(2){color:var(--g);animation-delay:.15s}
.h-line:nth-child(3){animation-delay:.25s}
@keyframes slideUp{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.h-sub{font-size:1.05rem;line-height:1.7;color:rgba(200,220,192,.6);max-width:440px;margin-bottom:40px;animation:fadeUp .8s .4s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.h-acts{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;animation:fadeUp .8s .5s var(--ease) both}
.btn-p{background:var(--g);color:var(--dk);font-weight:800;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;padding:16px 36px;border-radius:100px;border:none;transition:all .2s;position:relative;overflow:hidden}
.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-100%);transition:transform .5s}
.btn-p:hover::after{transform:translateX(100%)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(184,255,60,.45)}
.btn-o{background:transparent;color:var(--lt);font-weight:700;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;padding:15px 32px;border-radius:100px;border:1.5px solid rgba(200,220,192,.2);transition:all .2s}
.btn-o:hover{border-color:var(--g);color:var(--g);transform:translateY(-3px)}
.h-stats{display:flex;align-items:center;gap:28px;animation:fadeUp .8s .6s var(--ease) both}
.stat-val{font-family:var(--font-head);font-size:2.8rem;line-height:1;color:var(--g);letter-spacing:-.03em}
.stat-lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.stat-div{width:1px;height:48px;background:linear-gradient(to bottom,transparent,rgba(184,255,60,.2),transparent)}

/* HERO SIDE */
.h-side{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;animation:fadeUp .9s .3s var(--ease) both}
.live-panel{background:rgba(13,18,11,.85);backdrop-filter:blur(20px);border:1px solid rgba(184,255,60,.12);border-radius:20px;padding:24px;position:relative;overflow:hidden}
.live-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,255,60,.4),transparent)}
.panel-ttl{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gray)}
.live-dot{width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 8px var(--red);animation:blink 1s infinite}
.cslots{display:flex;flex-direction:column;gap:8px}
.cslot{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);transition:all .2s;cursor:pointer}
.cslot:hover{border-color:rgba(184,255,60,.25);background:rgba(184,255,60,.04)}
.cs-name{font-size:.78rem;font-weight:700;flex:1;color:var(--lt)}
.cs-type{font-size:.68rem;color:var(--gray);font-family:var(--font-mono)}
.cs-price{font-family:var(--font-mono);font-size:.78rem;color:var(--lt);margin-left:auto;margin-right:12px}
.cs-badge{font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.05em}
.b-ok{background:rgba(184,255,60,.12);color:var(--g)}
.b-busy{background:rgba(255,60,60,.1);color:var(--red)}
.b-maint{background:rgba(255,184,60,.1);color:var(--amber)}
.time-w{background:rgba(13,18,11,.85);backdrop-filter:blur(20px);border:1px solid rgba(184,255,60,.08);border-radius:16px;padding:18px 24px;display:flex;align-items:center;gap:16px}
.tw-clock{font-family:var(--font-head);font-size:2.2rem;letter-spacing:-.03em;color:var(--white)}
.tw-info{flex:1}
.tw-date{font-size:.72rem;color:var(--gray);letter-spacing:.08em}
.tw-status{font-size:.72rem;font-weight:700;color:var(--g);letter-spacing:.1em;text-transform:uppercase}

/* MARQUEE */
.mq-wrap{background:var(--g);padding:12px 0;overflow:hidden;position:relative;z-index:2}
.mq-track{display:flex;animation:mqs 22s linear infinite;white-space:nowrap}
.mq-item{display:flex;align-items:center;gap:20px;padding:0 32px;font-family:var(--font-head);font-size:.85rem;letter-spacing:.1em;color:var(--dk);flex-shrink:0}
.mq-sep{font-size:.6rem;opacity:.4}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:110px 48px;position:relative}
.container{max-width:1240px;margin:0 auto}
.sec-eye{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:14px;position:relative;padding-left:20px}
.sec-eye::before{content:'';position:absolute;left:0;top:50%;width:12px;height:1.5px;background:var(--g);transform:translateY(-50%)}
.sec-title{font-family:var(--font-head);font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.03em;line-height:.95;color:var(--white);margin-bottom:16px}
.sec-sub{font-size:1rem;color:rgba(200,220,192,.55);line-height:1.7;max-width:500px}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}

/* LAPANGAN */
.lap-sec{background:var(--dk2)}
.lap-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;gap:24px}
.filter-tabs{display:flex;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:100px;padding:5px}
.ftab{padding:8px 20px;border-radius:100px;border:none;background:transparent;color:var(--gray);font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;transition:all .2s}
.ftab.active{background:var(--g);color:var(--dk)}
.ftab:hover:not(.active){color:var(--lt)}
.lap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.cc{background:var(--dk3);border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;cursor:pointer;position:relative}
.cc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,255,60,.03) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.cc:hover{transform:translateY(-6px);border-color:rgba(184,255,60,.25);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(184,255,60,.08)}
.cc:hover::after{opacity:1}
.cc-vis{height:180px;background:linear-gradient(135deg,#0f1f0c 0%,#162512 50%,#0f1f0c 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cc-svg{width:160px;height:110px;position:relative;z-index:1}
.cc-glow{position:absolute;top:50%;left:50%;width:200px;height:200px;background:radial-gradient(circle,rgba(184,255,60,.08) 0%,transparent 70%);transform:translate(-50%,-50%)}
.cc-typebadge{position:absolute;top:14px;left:14px;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:100px;background:rgba(7,10,6,.7);border:1px solid rgba(255,255,255,.1);color:var(--lt)}
.cc-num{position:absolute;top:14px;right:14px;font-family:var(--font-head);font-size:2.5rem;color:rgba(184,255,60,.08);line-height:1;letter-spacing:-.05em}
.cc-body{padding:22px 24px 24px}
.cc-name{font-family:var(--font-head);font-size:1.5rem;letter-spacing:-.02em;color:var(--white);margin-bottom:6px}
.cc-desc{font-size:.82rem;color:var(--gray);line-height:1.5;margin-bottom:16px}
.cc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.ctag{font-size:.68rem;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--gray)}
.cc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.cc-price{font-family:var(--font-head);font-size:1.6rem;letter-spacing:-.03em;color:var(--g)}
.cc-price small{font-family:var(--font-ui);font-size:.72rem;color:var(--gray);font-weight:400;letter-spacing:0}
.cc-status{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px}
.s-ok{background:rgba(184,255,60,.12);color:var(--g)}
.s-maint{background:rgba(255,184,60,.1);color:var(--amber)}
.s-busy{background:rgba(255,60,60,.1);color:var(--red)}

/* SVG court lines */
.cl-h,.cl-v{stroke:rgba(184,255,60,.3);stroke-width:1;fill:none}
.cl-out{stroke:rgba(184,255,60,.5);stroke-width:1.5;fill:rgba(184,255,60,.03)}
.cl-net{stroke:rgba(255,255,255,.35);stroke-width:2;stroke-dasharray:3,3;fill:none}

/* BOOKING */
.bk-sec{background:var(--dk);border-top:1px solid rgba(255,255,255,.04)}
.bk-grid{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:start}

/* Progress */
.prog-track{display:flex;align-items:center;margin-bottom:48px}
.ps{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.ps::after{content:'';position:absolute;left:calc(50% + 20px);right:calc(-50% + 20px);top:18px;height:1px;background:rgba(255,255,255,.08);transition:background .4s}
.ps:last-child::after{display:none}
.ps.done::after{background:var(--g)}
.ps-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;border:1.5px solid rgba(255,255,255,.1);color:var(--gray);transition:all .4s var(--ease);position:relative;z-index:1;background:var(--dk2)}
.ps.active .ps-num{border-color:var(--g);color:var(--g);box-shadow:0 0 20px rgba(184,255,60,.3)}
.ps.done .ps-num{background:var(--g);border-color:var(--g);color:var(--dk)}
.ps-lbl{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);text-align:center;transition:color .3s}
.ps.active .ps-lbl{color:var(--g)}

/* Form panels */
.fp{display:none;animation:panelIn .4s var(--ease)}
.fp.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.fp-title{font-family:var(--font-head);font-size:1.8rem;letter-spacing:-.02em;color:var(--white);margin-bottom:28px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.frow.full{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.field input,.field select{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 18px;color:var(--white);font-size:.92rem;outline:none;transition:all .2s;appearance:none;-webkit-appearance:none}
.field input:focus,.field select:focus{border-color:rgba(184,255,60,.4);background:rgba(184,255,60,.03);box-shadow:0 0 0 4px rgba(184,255,60,.06)}
.field input::placeholder{color:rgba(200,220,192,.2)}
.field select option{background:var(--dk2)}
.field.err input,.field.err select{border-color:rgba(255,60,60,.5)}
.ferr{font-size:.72rem;color:var(--red);margin-top:4px;display:none}
.field.err .ferr{display:block}

/* Lap picker */
.lap-pk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.lopt{padding:14px 10px;border-radius:12px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);text-align:center;cursor:pointer;transition:all .2s var(--ease)}
.lopt:hover{border-color:rgba(184,255,60,.3);background:rgba(184,255,60,.04)}
.lopt.sel{border-color:var(--g);background:rgba(184,255,60,.08)}
.lo-name{font-size:.75rem;font-weight:800;color:var(--lt);margin-bottom:3px}
.lo-price{font-size:.65rem;color:var(--gray);font-family:var(--font-mono)}
.lo-type{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-top:4px}

/* Dur buttons */
.dur-btn{padding:10px 22px;border-radius:100px;border:1.5px solid rgba(255,255,255,.1);background:transparent;color:var(--gray);font-family:var(--font-ui);font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s}
.dur-btn.active{background:var(--g);border-color:var(--g);color:var(--dk)}
.dur-btn:hover:not(.active){border-color:rgba(184,255,60,.3);color:var(--lt)}

/* Time grid */
.tgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.tslot{padding:10px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);text-align:center;cursor:pointer;font-size:.75rem;font-weight:700;color:var(--gray);transition:all .2s;font-family:var(--font-mono)}
.tslot:hover:not(.taken){border-color:rgba(184,255,60,.3);color:var(--lt)}
.tslot.sel{background:var(--g);border-color:var(--g);color:var(--dk)}
.tslot.taken{opacity:.3;cursor:not-allowed;text-decoration:line-through}

/* Pay grid */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.popt{padding:16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s}
.popt:hover{border-color:rgba(184,255,60,.2)}
.popt.sel{border-color:var(--g);background:rgba(184,255,60,.06)}
.p-icon{font-size:1.4rem}
.p-name{font-size:.82rem;font-weight:700;color:var(--lt)}
.p-desc{font-size:.68rem;color:var(--gray)}

/* Form nav */
.fnav{display:flex;gap:12px;margin-top:28px;align-items:center}
.btn-next{background:var(--g);color:var(--dk);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 32px;border-radius:100px;border:none;transition:all .2s;display:flex;align-items:center;gap:8px}
.btn-next:hover{background:var(--g2);box-shadow:0 8px 28px rgba(184,255,60,.35);transform:translateY(-2px)}
.btn-back{background:transparent;color:var(--gray);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 24px;border-radius:100px;border:1px solid rgba(255,255,255,.08);transition:all .2s}
.btn-back:hover{color:var(--lt);border-color:rgba(255,255,255,.2)}
.btn-sub{flex:1;background:linear-gradient(135deg,#9ddb1e,var(--g),#c4ff50,var(--g));background-size:300%;animation:gs 3s linear infinite}
@keyframes gs{0%{background-position:0%}100%{background-position:300%}}

/* Summary card */
.sum-card{background:var(--dk2);border:1px solid rgba(255,255,255,.07);border-radius:24px;overflow:hidden;position:sticky;top:100px}
.sum-header{background:linear-gradient(135deg,rgba(184,255,60,.08),transparent);padding:24px;border-bottom:1px solid rgba(255,255,255,.05)}
.sum-header h3{font-family:var(--font-head);font-size:1.2rem;letter-spacing:-.01em;color:var(--white);margin-bottom:4px}
.sum-header p{font-size:.78rem;color:var(--gray)}
.sum-body{padding:24px}
.srow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.85rem}
.srow:last-child{border-bottom:none}
.sk{color:var(--gray)}
.sv{color:var(--lt);font-weight:700;font-family:var(--font-mono);font-size:.82rem;text-align:right}
.sv .emp{color:rgba(255,255,255,.2);font-weight:400}
.sum-tot{margin-top:16px;padding:20px 24px;border-top:1px solid rgba(184,255,60,.15);display:flex;justify-content:space-between;align-items:center}
.sum-tot .sk{font-weight:800;font-size:.9rem;color:var(--lt)}
.sum-tot .sv{font-family:var(--font-head);font-size:1.6rem;letter-spacing:-.02em;color:var(--g)}
.sum-foot{padding:16px 24px;border-top:1px solid rgba(255,255,255,.05);background:rgba(184,255,60,.03)}
.sum-foot p{font-size:.75rem;color:var(--gray);line-height:1.6}

/* Success */
.suc-state{display:none;text-align:center;padding:60px 20px}
.suc-state.show{display:block;animation:fadeUp .6s var(--ease)}
.suc-ring{width:100px;height:100px;border:2px solid var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:2.5rem;box-shadow:0 0 40px rgba(184,255,60,.2);animation:rp 2s ease-in-out infinite}
@keyframes rp{0%,100%{box-shadow:0 0 40px rgba(184,255,60,.2)}50%{box-shadow:0 0 80px rgba(184,255,60,.4)}}
.suc-state h2{font-family:var(--font-head);font-size:2.5rem;letter-spacing:-.03em;color:var(--g);margin-bottom:12px}
.suc-state p{color:var(--gray);font-size:.95rem;line-height:1.7;margin-bottom:8px}
.bk-code{display:inline-block;font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--white);background:rgba(184,255,60,.08);border:1px solid rgba(184,255,60,.2);padding:10px 24px;border-radius:12px;margin:16px 0 28px;letter-spacing:.1em}

/* SCHEDULE */
.sched-sec{background:var(--dk2);border-top:1px solid rgba(255,255,255,.04)}
.sched-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:20px}
.dpills{display:flex;gap:8px}
.dpill{padding:8px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);font-size:.78rem;font-weight:700;color:var(--gray);cursor:pointer;transition:all .2s}
.dpill.active{background:var(--g);border-color:var(--g);color:var(--dk)}
.dpill:hover:not(.active){color:var(--lt)}
.sw{overflow-x:auto;border-radius:16px;border:1px solid rgba(255,255,255,.05)}
.st{width:100%;border-collapse:collapse;min-width:700px}
.st th{background:rgba(255,255,255,.03);padding:14px 16px;text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);border-bottom:1px solid rgba(255,255,255,.05)}
.st th:first-child{text-align:left}
.st td{padding:10px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.03);transition:background .15s}
.st tr:last-child td{border-bottom:none}
.st td:first-child{font-family:var(--font-mono);font-size:.75rem;color:var(--gray);text-align:left}
.cf{cursor:pointer;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--g);border-radius:6px;padding:6px 0;transition:background .15s}
.cf:hover{background:rgba(184,255,60,.12)}
.cb{font-size:.72rem;font-weight:700;color:var(--red);opacity:.7}
.cm{font-size:.72rem;font-weight:700;color:var(--amber);opacity:.7}
.sl-legend{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--gray)}
.ldot{width:8px;height:8px;border-radius:50%}

/* TESTIMONIALS */
.testi-sec{background:var(--dk);border-top:1px solid rgba(255,255,255,.04)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.tcard{background:var(--dk2);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:28px;transition:transform .3s var(--ease),border-color .3s}
.tcard:hover{transform:translateY(-4px);border-color:rgba(184,255,60,.15)}
.tstars{color:var(--g);font-size:.85rem;margin-bottom:14px;letter-spacing:2px}
.ttext{font-size:.9rem;line-height:1.7;color:rgba(200,220,192,.7);margin-bottom:20px;font-style:italic}
.tauth{display:flex;align-items:center;gap:12px}
.tav{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--mid),rgba(184,255,60,.2));display:flex;align-items:center;justify-content:center;font-size:1rem;border:1.5px solid rgba(184,255,60,.15)}
.tan{font-size:.85rem;font-weight:700;color:var(--lt)}
.tar{font-size:.72rem;color:var(--gray)}

/* KONTAK */
.kt-sec{background:var(--dk2);border-top:1px solid rgba(255,255,255,.04)}
.kt-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.kt-items{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.kitem{display:flex;gap:16px;padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.kitem:hover{border-color:rgba(184,255,60,.15);background:rgba(184,255,60,.03)}
.ki-ico{font-size:1.5rem;width:44px;height:44px;border-radius:10px;background:rgba(184,255,60,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ki-lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:4px}
.ki-val{font-size:.92rem;color:var(--lt);font-weight:600}
.map-box{border-radius:20px;background:var(--dk3);border:1px solid rgba(255,255,255,.06);height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;position:relative}
.map-box::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(184,255,60,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,60,.02) 1px,transparent 1px);background-size:30px 30px}
.map-pin{font-size:3rem;position:relative;z-index:1}
.map-lbl{font-size:.85rem;color:var(--lt);position:relative;z-index:1;font-weight:700}
.map-addr{font-size:.78rem;color:rgba(200,220,192,.4);position:relative;z-index:1;text-align:center}

/* FOOTER */
.footer{background:var(--dk);border-top:1px solid rgba(255,255,255,.05);padding:40px 48px}
.fi{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.fcopy{font-size:.8rem;color:var(--gray)}
.flinks{display:flex;gap:28px}
.flinks a{font-size:.8rem;color:var(--gray);transition:color .2s}
.flinks a:hover{color:var(--g)}

/* RESPONSIVE */
@media(max-width:900px){
  .hero,.bk-grid,.kt-grid{grid-template-columns:1fr}
  .h-side,.bk-summary{display:none}
  .hero,.section,.bk-sec,.lap-sec,.sched-sec,.testi-sec,.kt-sec{padding:72px 24px}
  .nav{padding:16px 24px}.nav.solid{padding:12px 24px}
  .nav-links,.nav-cta{display:none}
  .lap-pk,.frow{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .tgrid{grid-template-columns:repeat(4,1fr)}
  .footer{padding:32px 24px}
  .h-title{font-size:3.5rem}
}

