/* =========================================================
   SPMB Al Madinah — gaya halaman
   Warna diambil dari logo: hijau, biru teal, oranye.
   Satu keluarga huruf: Plus Jakarta Sans.
   ========================================================= */

:root{
  --green:#11643F;
  --green-800:#093A25;
  --green-700:#0C4C31;
  --green-500:#178553;
  --green-300:#2F9E63;
  --mint:#5BE3A4;
  --mint-soft:#E3F7EC;
  --teal:#15707F;
  --orange:#EF7622;
  --orange-700:#D4600F;
  --orange-soft:#FFF1E5;
  --sun:#FFC36B;

  --ink:#0F1C16;
  --body:#3A4842;
  --muted:#66766E;
  --line:#E3EAE5;
  --line-soft:#EEF3EF;
  --bg:#FFFFFF;
  --tint:#F6FAF7;
  --tint-2:#ECF5EF;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,28,22,.05), 0 4px 14px rgba(15,28,22,.05);
  --sh:0 2px 6px rgba(15,28,22,.04), 0 18px 40px -12px rgba(15,28,22,.14);
  --sh-lg:0 30px 70px -20px rgba(9,58,37,.35);
  --sh-glow:0 10px 30px -6px rgba(239,118,34,.5);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dur:300ms;
  --ease:cubic-bezier(.22,.7,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 16.5px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--mint); color:var(--green-800)}
img{max-width:100%; height:auto; display:block}
a{color:var(--green); text-decoration-thickness:1.5px; text-underline-offset:3px}
h1,h2,h3,h4{text-wrap:balance; color:var(--ink); margin:0; font-family:var(--sans); font-weight:800; line-height:1.15; letter-spacing:-.025em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0}
table{border-collapse:collapse; width:100%}
button{font-family:inherit}

.wrap{width:min(100% - 32px, var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 32px, 780px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}

/* ---------- tombol ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:700 15.5px/1 var(--sans); padding:14px 24px; min-height:50px; letter-spacing:-.005em;
  border-radius:var(--r-pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform var(--dur) var(--spring), background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn::after{ /* kilau saat disorot */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform 700ms var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--primary{background:linear-gradient(135deg,#F78A3A,var(--orange) 55%,var(--orange-700)); color:#fff; box-shadow:var(--sh-glow)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(239,118,34,.6)}
.btn--ghost{background:#fff; color:var(--green); border-color:#D3E1D8}
.btn--ghost:hover{border-color:var(--green); background:var(--tint); transform:translateY(-2px)}
.btn--glass{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); transform:translateY(-2px)}
.btn--lg{padding:17px 30px; min-height:58px; font-size:16.5px}
.btn--sm{padding:10px 18px; min-height:42px; font-size:14.5px}
.btn--block{width:100%}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.78); backdrop-filter:saturate(1.8) blur(16px); -webkit-backdrop-filter:saturate(1.8) blur(16px);
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topbar.is-stuck{border-bottom-color:var(--line); box-shadow:var(--sh-sm)}
.progress{position:absolute; left:0; bottom:-1px; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--green-300),var(--mint),var(--orange)); border-radius:0 3px 3px 0}
.topbar__in{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand img{border-radius:50%; transition:transform 600ms var(--spring)}
.brand:hover img{transform:rotate(-12deg) scale(1.06)}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__txt strong{font:800 17px/1 var(--sans); letter-spacing:-.02em}
.brand__txt small{font-size:11px; color:var(--muted); font-weight:700; margin-top:4px; letter-spacing:.08em}
.topnav{display:none; gap:4px; margin-left:auto; padding:5px; background:var(--tint); border:1px solid var(--line-soft); border-radius:var(--r-pill)}
.topnav a{color:var(--body); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 15px; border-radius:var(--r-pill);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.topnav a:hover{color:var(--green)}
.topnav a.is-active{background:#fff; color:var(--green); box-shadow:var(--sh-sm)}
.topbar__cta{display:none; margin-left:auto}
.topnav__cta{display:none}

/* tombol menu (ponsel/tablet) */
.burger{margin-left:auto; display:grid; place-content:center; gap:5px; width:46px; height:46px; padding:0; cursor:pointer;
  background:var(--tint); border:1px solid var(--line); border-radius:14px; color:var(--ink)}
.burger span{display:block; width:20px; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease)}
.topbar.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar.is-open .burger span:nth-child(2){opacity:0}
.topbar.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1079.98px){
  .topbar.is-open{background:#fff}
  .topbar.is-open .topnav{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0; margin:0; padding:12px 16px 20px;
    max-height:calc(100dvh - 70px); overflow-y:auto;
    background:#fff; border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh);
  }
  .topbar.is-open .topnav a{font-size:16.5px; padding:14px 16px; border-radius:var(--r-sm)}
  .topbar.is-open .topnav a:not(.btn):hover{background:var(--tint)}
  .topbar.is-open .topnav__cta{display:flex; margin-top:10px; color:#fff}
}
@media(min-width:1080px){
  .topnav{display:flex}
  .topbar__cta{display:inline-flex; margin-left:0}
  .burger{display:none}
}

/* ---------- video profil ---------- */
.video{padding-bottom:64px}
.vid{position:relative; max-width:960px; margin-inline:auto; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;
  background:var(--green-800, #0B3F28); box-shadow:var(--sh-lg)}
.vid iframe,.vid__play{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid__play{padding:0; cursor:pointer; background:none; display:grid; place-items:center}
.vid__play img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease)}
.vid__play::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,58,37,.05),rgba(9,58,37,.55))}
.vid__play:hover img{transform:scale(1.04)}
.vid__btn{position:relative; z-index:1; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; color:#fff; padding-left:4px;
  background:linear-gradient(135deg,#F78A3A,var(--orange) 55%,var(--orange-700)); box-shadow:var(--sh-glow);
  transition:transform var(--dur) var(--spring)}
.vid__play:hover .vid__btn{transform:scale(1.1)}
.vid__cap{position:absolute; z-index:1; left:22px; bottom:18px; color:#fff; font:700 15px/1 var(--sans)}
.vid__note{text-align:center; margin-top:16px}
@media(max-width:560px){.vid{border-radius:var(--r)}.vid__btn{width:64px; height:64px}}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:radial-gradient(120% 80% at 0% 0%, #157A50 0%, transparent 55%),
             radial-gradient(90% 70% at 100% 100%, #0E5C6A 0%, transparent 60%),
             linear-gradient(160deg,#0A452C 0%, #0D5537 50%, #0B4A33 100%)}
.hero__bg{position:absolute; inset:0; z-index:-1; color:rgba(255,255,255,.16); pointer-events:none}
.hero__pattern{position:absolute; inset:0; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%)}
.orb{position:absolute; border-radius:50%; filter:blur(50px); opacity:.85; will-change:transform}
.orb--1{width:520px;height:520px; right:-140px; top:-180px; background:radial-gradient(circle, rgba(91,227,164,.45), transparent 65%); animation:float1 16s ease-in-out infinite}
.orb--2{width:440px;height:440px; left:-160px; bottom:-200px; background:radial-gradient(circle, rgba(239,118,34,.42), transparent 65%); animation:float2 19s ease-in-out infinite}
.orb--3{width:300px;height:300px; left:45%; top:30%; background:radial-gradient(circle, rgba(21,112,127,.55), transparent 65%); animation:float1 22s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,40px)}}
@keyframes float2{0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-30px)}}

.hero__in{padding:56px 0 96px; display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center}
@media(min-width:980px){.hero__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:56px; padding:88px 0 120px}}
.hero__main{max-width:680px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font:700 12.5px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin:0 0 16px}
.hero .eyebrow{color:#FFE2C8; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:7px 14px 7px 10px; border-radius:var(--r-pill); backdrop-filter:blur(6px); letter-spacing:.06em; font-size:12.5px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(91,227,164,.7); animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(91,227,164,.6)} 80%,100%{box-shadow:0 0 0 10px rgba(91,227,164,0)}}
.eyebrow--light{color:var(--mint)}
.hero__h1{font-size:clamp(36px,6.2vw,64px); color:#fff; letter-spacing:-.04em; line-height:1.04; margin-bottom:22px; font-weight:800}
.grad{background:linear-gradient(90deg,#FFA45C,#FFCF8A 30%,#7EF0BE 65%,#FFA45C); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 8s linear infinite}
@keyframes shine{to{background-position:200% center}}
.hero__sub{font-size:clamp(16.5px,2vw,19px); color:#CFE6D9; max-width:580px; margin-bottom:32px; line-height:1.65}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px}
.hero__note{font-size:14.5px; color:#B5D8C4; margin:0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.hero__note strong{color:#fff}
.hero__units{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.hero__units span{font:600 13px/1 var(--sans); padding:8px 13px; border-radius:var(--r-pill); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#E3F2EA}

/* kartu hitung mundur */
.hcard{position:relative; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-xl); padding:26px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--sh-lg);
  transform-style:preserve-3d; transition:transform 400ms var(--ease)}
.hcard__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px}
.hcard__top h2{font-size:16px; color:#fff; letter-spacing:-.01em}
.hcard__badge{font:700 11.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; background:var(--mint); color:var(--green-800); padding:7px 10px; border-radius:var(--r-pill)}
.cd{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px}
.cd div{background:rgba(9,58,37,.45); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px 4px 10px; text-align:center}
.cd b{display:block; font:800 clamp(24px,3.4vw,32px)/1 var(--sans); color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.cd small{display:block; margin-top:6px; font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#A7CDB8}
.hcard__list{list-style:none; display:grid; gap:2px; margin-bottom:20px}
.hcard__list li{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:14.5px; color:#CFE6D9}
.hcard__list li:last-child{border-bottom:0}
.hcard__list b{color:#fff; font-weight:700; text-align:right}
@media(max-width:480px){.hcard{padding:20px}.hcard__list li{font-size:13.5px}.cd{gap:6px}.hero .eyebrow{font-size:11px; letter-spacing:.03em}}
.hero__scroll{position:absolute; left:50%; bottom:58px; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.35); border-radius:14px; display:none}
.hero__scroll::after{content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; background:#fff; border-radius:2px; animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(12px)}}
@media(min-width:980px){.hero__scroll{display:block}}

/* ---------- pemilih unit ---------- */
.picker{position:relative; margin-top:-48px; z-index:5; padding-bottom:8px}
.picker__card{background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:20px 22px;
  display:grid; gap:14px}
@media(min-width:900px){.picker__card{grid-template-columns:auto auto 1fr; align-items:center; gap:22px}}
.picker__row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.picker__label{font:700 11.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.picker__hint{margin:0; font-size:14px; color:var(--muted); line-height:1.5}
.picker__hint strong{color:var(--ink)}
@media(min-width:900px){.picker__hint{border-left:1px solid var(--line); padding-left:22px}}
.seg{position:relative; display:inline-flex; gap:2px; padding:4px; background:var(--tint-2); border-radius:var(--r-pill); border:1px solid var(--line-soft)}
.seg__pill{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--green-500),var(--green)); box-shadow:0 6px 16px -4px rgba(17,100,63,.55);
  transition:transform 450ms var(--spring), width 450ms var(--spring)}
.seg button{
  position:relative; z-index:1; font:700 14.5px/1 var(--sans); padding:11px 18px; min-height:42px; cursor:pointer;
  border-radius:var(--r-pill); border:0; background:transparent; color:var(--body);
  transition:color var(--dur) var(--ease);
}
.seg button:hover{color:var(--green)}
.seg button[aria-selected="true"]{color:#fff}
.seg--sm button{padding:10px 16px; min-height:40px; font-size:14px}
.chips{display:flex; gap:8px; overflow-x:auto; padding:16px 2px 6px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; background:#fff; border:1px solid var(--line); color:var(--body); border-radius:var(--r-pill);
  padding:9px 16px; font:600 14px/1 var(--sans); text-decoration:none; transition:all var(--dur) var(--ease)}
.chip:hover,.chip.is-active{background:var(--green); border-color:var(--green); color:#fff; transform:translateY(-1px)}

/* ---------- bukti kepercayaan ---------- */
.trust{padding:28px 0 8px}
.trust__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:760px){.trust__grid{grid-template-columns:repeat(4,1fr); gap:16px}}
.tcard{position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 18px; text-align:left;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.tcard::before{content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--green-300),var(--mint)); transform:scaleX(.25); transform-origin:0 50%; transition:transform 500ms var(--ease)}
.tcard:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:#D3E2D9}
.tcard:hover::before{transform:scaleX(1)}
.tcard b{display:block; font:800 clamp(30px,4.4vw,42px)/1 var(--sans); letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--green),var(--green-300)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tcard span{display:block; margin-top:9px; font-size:14px; color:var(--muted); line-height:1.45; font-weight:500}

/* sorotan kursor */
.spot{--mx:50%; --my:50%}
.spot::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(47,158,99,.1), transparent 45%);
  transition:opacity var(--dur) var(--ease)}
.spot:hover::after{opacity:1}

/* ---------- bagian umum ---------- */
.sec{padding:84px 0; position:relative}
.sec--tint{background:var(--tint)}
.sec__head{max-width:660px; margin-bottom:40px}
.sec__head--center{margin-inline:auto; text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__head h2{font-size:clamp(28px,4.2vw,44px); margin-bottom:14px}
.sec__head .eyebrow::before{content:""; width:18px; height:2px; border-radius:2px; background:currentColor}
.sec__lead{font-size:17.5px; color:var(--muted); margin:0}
.sec__lead--light{color:#C6E2D2}
.h-sm{font:800 12px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; display:flex; align-items:center; gap:10px}
.h-sm::after{content:""; flex:1; height:1px; background:var(--line)}
.h-sm--light{color:var(--mint)}
.h-sm--light::after{background:rgba(255,255,255,.16)}
.mt{margin-top:30px}
.note{font-size:14.5px; color:var(--muted); margin:16px 0 0}

.cols{display:grid; gap:30px}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr; gap:28px}}
.col{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.sec--tint .col{border-color:var(--line)}
.cols--wide{margin-top:34px}

/* ---------- kekhawatiran ---------- */
.worry{display:grid; gap:14px; align-items:start}
@media(min-width:800px){.worry{grid-template-columns:1fr 1fr; gap:16px}}
.wcard{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.wcard:hover{box-shadow:var(--sh); border-color:#CFE0D6; transform:translateY(-2px)}
.wcard[open]{border-color:var(--green-300); box-shadow:var(--sh)}
.wcard summary{list-style:none; cursor:pointer; padding:22px; display:flex; gap:16px; align-items:center}
.wcard summary::-webkit-details-marker{display:none}
.wcard__ico{flex:0 0 auto; width:48px; height:48px; border-radius:15px; background:var(--mint-soft); color:var(--green);
  display:grid; place-items:center; transition:transform 500ms var(--spring), background-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.wcard:hover .wcard__ico,.wcard[open] .wcard__ico{transform:rotate(-8deg) scale(1.06); background:var(--green); color:#fff}
.wcard__ico svg{width:23px; height:23px}
.wcard__q{font:700 17px/1.4 var(--sans); color:var(--ink); flex:1; letter-spacing:-.01em}
.wcard__chev{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--tint); color:var(--muted);
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.wcard[open] .wcard__chev{transform:rotate(180deg); background:var(--orange-soft); color:var(--orange)}
.wcard__body{padding:0 22px 22px 86px; animation:drop 380ms var(--ease)}
.wcard__body p{margin:0 0 12px}
.wcard__bukti{background:var(--tint); border-left:3px solid var(--green-300); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:12px 15px; font-size:14.5px; color:var(--body); margin:0}
.wcard__bukti b{color:var(--green); font-weight:700}
@media(max-width:560px){.wcard__body{padding-left:22px}}
@keyframes drop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------- garis waktu ---------- */
.tl{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-sm); overflow:hidden}
.tl__rail{position:relative}
.tl__track{position:relative; display:flex; gap:6px; overflow-x:auto; padding:4px 2px 18px; scrollbar-width:none; scroll-behavior:smooth}
.tl__track::-webkit-scrollbar{display:none}
.tl__track button{
  position:relative; flex:1 0 auto; cursor:pointer; background:transparent; border:0; color:var(--muted);
  padding:10px 14px 18px; min-height:44px; font:700 15px/1 var(--sans); font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease);
}
.tl__track button::before{content:""; position:absolute; left:50%; bottom:4px; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:#fff; border:2.5px solid #C9D8CF; transition:all var(--dur) var(--spring); z-index:1}
.tl__track button::after{content:""; position:absolute; left:0; right:-6px; bottom:9px; height:2px; background:var(--line)}
.tl__track button:hover{color:var(--green)}
.tl__track button.is-past::before{border-color:var(--green-300); background:var(--green-300)}
.tl__track button.is-past::after{background:var(--green-300)}
.tl__track button[aria-selected="true"]{color:var(--green)}
.tl__track button[aria-selected="true"]::before{transform:scale(1.5); border-color:var(--orange); background:#fff; box-shadow:0 0 0 5px rgba(239,118,34,.15)}
.tl__panel{display:grid; gap:18px; align-items:center; padding-top:20px; border-top:1px solid var(--line-soft); min-height:150px}
@media(min-width:700px){.tl__panel{grid-template-columns:auto 1fr auto}}
.tl__big{font:800 clamp(44px,7vw,72px)/1 var(--sans); letter-spacing:-.05em; color:var(--green); font-variant-numeric:tabular-nums}
.tl__big small{font-size:.28em; letter-spacing:.04em; color:var(--muted); margin-left:6px; font-weight:700}
.tl__txt{animation:drop 420ms var(--ease)}
.tl__panel h3{font-size:22px; margin-bottom:6px}
.tl__panel p{margin:0; color:var(--muted)}
.tl__jam{display:none}
.tl__nav{display:flex; gap:8px}
.tl__nav button{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:all var(--dur) var(--ease)}
.tl__nav button:hover{background:var(--green); color:#fff; border-color:var(--green)}
.tl__nav button[data-play]{width:auto; padding:0 16px; border-radius:var(--r-pill); font:700 13.5px/1 var(--sans); gap:6px; display:inline-flex; align-items:center}
.tl__bar{height:3px; background:var(--line-soft); border-radius:3px; margin-top:20px; overflow:hidden}
.tl__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green-300),var(--orange))}

/* ---------- daftar ---------- */
.ticks{list-style:none}
.ticks li{position:relative; padding:0 0 12px 32px; line-height:1.55}
.ticks li::before{content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311643F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks--muted li{color:var(--muted); font-size:15.5px}
.ticks--muted li::before{background-color:var(--tint)}

.prest{list-style:none}
.prest li{display:flex; gap:12px; align-items:flex-start; padding:12px 10px; margin:0 -10px; border-radius:var(--r-sm); border-bottom:1px solid var(--line-soft); transition:background-color var(--dur) var(--ease)}
.prest li:hover{background:var(--tint)}
.prest li:last-child{border-bottom:0}
.badge{flex:0 0 auto; font:800 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 9px; border-radius:8px; background:var(--tint-2); color:var(--green); margin-top:3px}
.badge--int{background:var(--orange-soft); color:var(--orange-700)}
.badge--nas{background:var(--mint-soft); color:var(--green)}

.tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.tags li{background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 15px; font-size:14.5px; font-weight:500;
  transition:all var(--dur) var(--ease)}
.tags li:hover{border-color:var(--green-300); color:var(--green); transform:translateY(-2px)}
.tags--light li{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#EAF4EE}
.tags--light li:hover{background:var(--mint); color:var(--green-800); border-color:var(--mint)}
.facil{margin-top:28px; background:var(--tint); border-radius:var(--r-lg); padding:26px}

/* ---------- untuk ananda ---------- */
.kid{overflow:hidden; isolation:isolate; color:#EAF4EE;
  background:radial-gradient(70% 60% at 100% 0%, rgba(91,227,164,.22), transparent 60%),
             radial-gradient(60% 60% at 0% 100%, rgba(239,118,34,.2), transparent 60%),
             linear-gradient(165deg,#0A452C,#0E5C40)}
.kid::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%)}
.kid h2{color:#fff; font-size:clamp(30px,4.6vw,46px)}
.kid__grid{display:grid; gap:14px; margin-bottom:36px}
@media(min-width:680px){.kid__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kid__grid{grid-template-columns:repeat(4,1fr)}}
.kcard{position:relative; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  padding:26px 22px; backdrop-filter:blur(6px);
  transition:transform 450ms var(--spring), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.kcard:hover{transform:translateY(-6px) rotate(-.6deg); background:rgba(255,255,255,.11); border-color:rgba(91,227,164,.5)}
.kcard.spot::after{background:radial-gradient(300px circle at var(--mx) var(--my), rgba(91,227,164,.16), transparent 50%)}
.kcard__ico{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--orange),#FFB061);display:grid;place-items:center;margin-bottom:16px;color:#fff;
  box-shadow:0 10px 24px -8px rgba(239,118,34,.6); transition:transform 500ms var(--spring)}
.kcard:hover .kcard__ico{transform:scale(1.1) rotate(8deg)}
.kcard__ico svg{width:25px;height:25px}
.kcard h3{color:#fff; font-size:18.5px; margin-bottom:8px}
.kcard p{margin:0; font-size:14.5px; color:#C2DFCE; line-height:1.6}
.kid__ekskul{border-top:1px solid rgba(255,255,255,.14); padding-top:28px}

/* ---------- biaya ---------- */
.cost{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh); overflow:hidden}
.cost__head{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:26px 28px; color:#fff; overflow:hidden;
  background:radial-gradient(80% 140% at 100% 0%, rgba(91,227,164,.35), transparent 60%), linear-gradient(135deg,var(--green-700),var(--green-500))}
.cost__unit{font:800 22px/1.25 var(--sans); color:#fff; margin:0; letter-spacing:-.02em}
.cost__for{margin:6px 0 0; font-size:14px; color:#C6E2D2}
.cost__head .btn--ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3)}
.cost__head .btn--ghost:hover{background:#fff; color:var(--green)}
.cost__tbl{font-size:16px}
.cost__tbl th,.cost__tbl td{padding:18px 28px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.cost__tbl tbody tr{transition:background-color var(--dur) var(--ease)}
.cost__tbl tbody tr:hover{background:var(--tint)}
.cost__tbl th{font-weight:600; color:var(--ink); width:36%}
.cost__tbl td:nth-child(2){font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink); white-space:nowrap; font-size:17.5px; letter-spacing:-.01em}
.cost__ket{color:var(--muted); font-size:14px}
.cost__tbl tfoot tr{background:linear-gradient(90deg,var(--mint-soft),var(--tint))}
.cost__tbl tfoot th,.cost__tbl tfoot td{border-bottom:0; font-size:17px; padding-top:22px; padding-bottom:22px}
.cost__tbl tfoot td:nth-child(2){color:var(--green); font-weight:800; font-size:clamp(22px,3vw,28px); letter-spacing:-.03em}
.cost__pay{padding:20px 28px; border-top:1px solid var(--line-soft); background:#fff}
.cost__pay p{margin:0 0 12px; font-size:15px}
.cost__pay p:last-child{margin-bottom:0}
.rek{display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; font-weight:500; background:var(--tint); border:1.5px dashed #BFD3C6; border-radius:var(--r); padding:8px 8px 8px 16px; font-variant-numeric:tabular-nums}
.rek b{font-size:17px; letter-spacing:.02em; color:var(--ink)}
.copy{display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; background:var(--green); color:#fff; font:700 13px/1 var(--sans);
  padding:9px 13px; border-radius:var(--r-pill); transition:all var(--dur) var(--ease)}
.copy:hover{background:var(--green-700); transform:translateY(-1px)}
.copy.is-done{background:var(--mint); color:var(--green-800)}
.cost__free{margin:0; padding:16px 28px; background:var(--orange-soft); border-top:1px solid #F7E2CC; color:#8A4B10; font-size:15px; display:flex; gap:10px; align-items:flex-start}
.cost__free::before{content:"★"; color:var(--orange); font-size:16px; line-height:1.5}
.cost__cta{display:flex; flex-wrap:wrap; gap:12px; padding:22px 28px; border-top:1px solid var(--line-soft)}
@media(max-width:560px){
  .cost__tbl th,.cost__tbl td{padding:14px 18px}
  .cost__ket{display:none}
  .cost__tbl th{width:52%}
  .cost__head,.cost__pay,.cost__cta,.cost__free{padding-left:18px; padding-right:18px}
}
.flash{animation:flash 700ms var(--ease)}
@keyframes flash{0%{background-color:rgba(91,227,164,.35)} 100%{background-color:transparent}}
.cmp{margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:0; overflow:hidden}
.cmp summary{cursor:pointer; padding:20px 24px; font-weight:700; color:var(--green); list-style:none; display:flex; align-items:center; gap:10px}
.cmp summary::-webkit-details-marker{display:none}
.cmp summary::before{content:"+"; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mint-soft); font-weight:800; transition:transform var(--dur) var(--ease)}
.cmp[open] summary::before{transform:rotate(45deg)}
.cmp__scroll{overflow-x:auto; padding:0 24px 6px}
.cmp__tbl{min-width:560px; font-size:15px}
.cmp__tbl th,.cmp__tbl td{padding:13px 14px; border-bottom:1px solid var(--line-soft); text-align:left}
.cmp__tbl thead th{background:var(--tint); font-weight:700; color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.05em}
.cmp__tbl thead th:first-child{border-radius:10px 0 0 10px}
.cmp__tbl thead th:last-child{border-radius:0 10px 10px 0}
.cmp__tbl td{font-variant-numeric:tabular-nums}
.cmp__tbl tr.is-cur{background:var(--mint-soft)}
.cmp__tbl tr.is-cur th{color:var(--green)}
.cmp .note{padding:0 24px 20px}

/* ---------- jadwal ---------- */
.sched{display:grid; gap:12px; margin-bottom:12px; counter-reset:j}
@media(min-width:700px){.sched{grid-template-columns:repeat(4,1fr)}}
.scard{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:#fff; counter-increment:j;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.scard:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.scard::after{content:"0" counter(j); position:absolute; right:18px; top:16px; font:800 30px/1 var(--sans); color:var(--line); letter-spacing:-.04em}
.scard--hi{background:linear-gradient(150deg,var(--green-500),var(--green-700)); border-color:transparent; color:#fff; box-shadow:var(--sh-lg)}
.scard--hi::after{color:rgba(255,255,255,.18)}
.scard h4{font:800 11.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.scard--hi h4{color:var(--mint)}
.scard p{margin:0; font:800 17.5px/1.35 var(--sans); color:var(--ink); letter-spacing:-.015em}
.scard--hi p{color:#fff}
.scard small{display:block; margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.45}
.scard--hi small{color:#C6E2D2}

.steps{list-style:none; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding:4px 0 18px 50px; line-height:1.55}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:12px;
  background:var(--mint-soft); color:var(--green); font:800 14px/34px var(--sans); text-align:center;
  transition:all var(--dur) var(--spring);
}
.steps li:hover::before{background:var(--green); color:#fff; transform:scale(1.1) rotate(-6deg)}
.steps li:not(:last-child)::after{content:""; position:absolute; left:16.5px; top:38px; bottom:2px; width:1.5px; background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 8px)}

.tes{display:grid; gap:12px}
@media(min-width:520px){.tes{grid-template-columns:1fr 1fr}}
.tes__box{background:var(--tint); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 18px}
.tes__box h4{font:800 11.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--green); margin:0 0 10px}
.tes__box ol{padding-left:18px; margin:0; font-size:15px}
.tes__box li{padding:2px 0}

.cta-band{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:44px; padding:34px; border-radius:var(--r-xl); color:#fff;
  background:radial-gradient(60% 120% at 100% 50%, rgba(239,118,34,.45), transparent 60%), linear-gradient(135deg,var(--green-700),var(--green-500))}
.cta-band::before{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:40px solid rgba(255,255,255,.06); z-index:-1}
.cta-band h3{font-size:clamp(20px,2.6vw,26px); margin-bottom:6px; color:#fff}
.cta-band p{margin:0; color:#C6E2D2; font-size:15px}

.brosur{margin-top:44px}
.brosur__grid{display:grid; gap:16px}
@media(min-width:680px){.brosur__grid{grid-template-columns:1fr 1fr}}
.brosur__grid a{position:relative; display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.brosur__grid a::after{content:"Perbesar ⤢"; position:absolute; right:14px; bottom:14px; background:rgba(15,28,22,.75); color:#fff; font:700 12.5px/1 var(--sans);
  padding:9px 13px; border-radius:var(--r-pill); opacity:0; transform:translateY(6px); transition:all var(--dur) var(--ease)}
.brosur__grid a:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.brosur__grid a:hover::after{opacity:1; transform:none}
.brosur__grid img{width:100%; transition:transform 600ms var(--ease)}
.brosur__grid a:hover img{transform:scale(1.03)}

/* lightbox */
.lb{border:0; padding:0; background:transparent; max-width:min(96vw,1100px); max-height:94vh; overflow:visible}
.lb::backdrop{background:rgba(6,20,13,.82); backdrop-filter:blur(6px)}
.lb[open]{animation:pop 320ms var(--spring)}
.lb img{max-height:88vh; width:auto; margin:auto; border-radius:var(--r); box-shadow:var(--sh-lg)}
.lb__x{position:absolute; right:-6px; top:-52px; width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:24px; cursor:pointer}
@keyframes pop{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}

/* ---------- testimoni ---------- */
.quotes{display:grid; gap:16px}
@media(min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; margin:0}
.quote::before{content:"\201C"; position:absolute; right:22px; top:6px; font:800 80px/1 var(--sans); color:var(--mint-soft)}
.quote blockquote{position:relative; margin:0 0 16px; font:600 17.5px/1.6 var(--sans); color:var(--ink)}
.quote figcaption{font-size:14.5px; color:var(--muted)}
.quote figcaption b{display:block; color:var(--ink); font-weight:700}

/* ---------- faq ---------- */
.faq__search{position:relative; margin-bottom:18px}
.faq__search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.faq__search input{width:100%; font:500 16px/1.4 var(--sans); color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:15px 18px 15px 50px; min-height:54px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.faq__search input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 5px rgba(17,100,63,.1)}
.faq{display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.faq details:hover{border-color:#CFE0D6}
.faq details[open]{border-color:var(--green-300); box-shadow:var(--sh-sm)}
.faq details[hidden]{display:none}
.faq summary{list-style:none; cursor:pointer; padding:19px 60px 19px 22px; position:relative;
  font:700 16.5px/1.45 var(--sans); color:var(--ink); letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:16px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%;
  display:grid; place-items:center; background:var(--tint); color:var(--green); font:600 20px/1 var(--sans); transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg); background:var(--orange-soft); color:var(--orange)}
.faq .faq__a{padding:0 22px 20px; margin:0; color:var(--body); animation:drop 360ms var(--ease)}
.faq mark{background:#FFE7A8; color:inherit; border-radius:3px; padding:0 2px}
.faq__empty{text-align:center; color:var(--muted); padding:20px; margin:0}

/* ---------- formulir ---------- */
.ask{background:var(--bg)}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh); padding:30px}
.field{position:relative; margin-bottom:18px}
.field label{display:block; font:700 14.5px/1 var(--sans); color:var(--ink); margin-bottom:9px}
.field input,.field textarea{
  width:100%; font:500 16px/1.5 var(--sans); color:var(--ink); background:var(--tint);
  border:1.5px solid var(--line); border-radius:var(--r); padding:14px 16px; min-height:54px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9AACA2}
.field input:focus,.field textarea:focus{outline:none; background:#fff; border-color:var(--green); box-shadow:0 0 0 5px rgba(17,100,63,.1)}
.field.is-ok input,.field.is-ok textarea{border-color:var(--green-300)}
.field.is-bad input,.field.is-bad textarea{border-color:#C0392B; animation:shake 360ms}
.field__count{position:absolute; right:12px; bottom:10px; font-size:12px; color:var(--muted); pointer-events:none}
@keyframes shake{20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)}}
.err{margin:7px 0 0; font-size:14px; color:#C0392B; font-weight:500}
.form__note{margin:14px 0 0; font-size:14px; color:var(--muted); text-align:center}
.ask__alt{margin-top:28px; text-align:center}
.ask__alt p{font-size:15px; color:var(--muted); margin-bottom:12px}
.ask__nums{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.numlink{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:9px 16px 9px 10px; font-size:14px; text-decoration:none; color:var(--body);
  transition:all var(--dur) var(--ease)}
.numlink::before{content:""; width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:#25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3zm4.6 12.6c-.2.5-1.1 1-1.6 1-.4.1-.9.1-1.5-.1-.3-.1-.8-.3-1.4-.5-2.4-1-4-3.5-4.1-3.6-.1-.2-1-1.3-1-2.5s.6-1.8.9-2c.2-.2.5-.3.6-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.4.3.1.4.1.6-.1l.8-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.4.2.5.3.1.2.1.7-.2 1.3z'/%3E%3C/svg%3E") center/14px no-repeat}
.numlink:hover{background:var(--green); border-color:var(--green); color:#fff; transform:translateY(-2px)}
.numlink b{font-weight:700}

/* ---------- footer ---------- */
.foot{position:relative; background:linear-gradient(180deg,#0B4A31,#072F1F); color:#C2DFCE; padding:60px 0 0; overflow:hidden}
.foot::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(91,227,164,.5),transparent)}
.foot h4{color:#fff; font:800 11.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; margin:0 0 16px}
.foot__in{display:grid; gap:34px; padding-bottom:44px}
@media(min-width:800px){.foot__in{grid-template-columns:1.4fr 1fr 1fr .8fr; gap:40px}}
.foot__brand img{background:#fff; border-radius:var(--r); padding:12px 16px; margin-bottom:18px}
.foot p{font-size:14.5px; line-height:1.65; margin:0 0 14px}
.foot strong{color:#fff; font-weight:700}
.foot__links{list-style:none}
.foot__links li{padding:0 0 10px}
.foot__links a{color:#C2DFCE; text-decoration:none; font-size:14.5px; transition:color var(--dur) var(--ease), padding var(--dur) var(--ease)}
.foot__links a:hover{color:var(--mint); padding-left:4px}
.foot__nums{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.foot__nums a{color:#fff; text-decoration:none; font-size:14.5px}
.foot__nums a:hover{color:var(--mint)}
.foot__hours{font-size:13.5px; color:#8DB6A0}
.foot__bar{border-top:1px solid rgba(255,255,255,.1); padding:20px 0 28px; display:flex;
  justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot__bar p{font-size:13px; margin:0; color:#8DB6A0}

/* ---------- bilah tetap & tombol ke atas ---------- */
.dock{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:95; display:flex; gap:8px; align-items:center;
  padding:8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); box-shadow:var(--sh-lg);
  transform:translateY(160%); transition:transform 450ms var(--spring);
}
.dock.is-on{transform:none}
.dock__btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:48px; border-radius:var(--r-pill); font:700 15px/1 var(--sans); text-decoration:none}
.dock__btn--primary{background:linear-gradient(135deg,#F78A3A,var(--orange-700)); color:#fff; box-shadow:var(--sh-glow)}
.dock__btn--ghost{background:var(--tint); color:var(--green); border:1.5px solid #CFDDD4}
.dock__x{flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0;
  background:var(--tint); color:var(--muted); font-size:22px; line-height:1; cursor:pointer}
@media(min-width:900px){.dock{display:none}}
body.has-dock{padding-bottom:84px}
@media(min-width:900px){body.has-dock{padding-bottom:0}}

.totop{position:fixed; right:22px; bottom:22px; z-index:94; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:var(--green); color:#fff; display:none; place-items:center; box-shadow:var(--sh-lg);
  opacity:0; transform:translateY(20px) scale(.8); transition:all 400ms var(--spring)}
.totop svg{position:relative; z-index:1}
.totop::before{content:""; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(var(--orange) calc(var(--p,0) * 1%), transparent 0); -webkit-mask:radial-gradient(circle,transparent 27px,#000 28px); mask:radial-gradient(circle,transparent 27px,#000 28px)}
.totop.is-on{opacity:1; transform:none}
.totop:hover{background:var(--green-700); transform:translateY(-3px)}
@media(min-width:900px){.totop{display:grid}}

.toast{position:fixed; left:50%; bottom:110px; z-index:120; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ink); color:#fff; font:600 14.5px/1 var(--sans); padding:14px 20px; border-radius:var(--r-pill); box-shadow:var(--sh-lg);
  transition:all 400ms var(--spring)}
.toast.is-on{opacity:1; transform:translate(-50%,0)}
@media(min-width:900px){.toast{bottom:36px}}

/* ---------- animasi ---------- */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity 650ms var(--ease), transform 650ms var(--ease); transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1; transform:none}
.swap{animation:swap 520ms var(--ease)}
@keyframes swap{0%{opacity:.25; transform:translateY(8px)} 100%{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
  .dock{transition:none}
}

@media print{
  .topbar,.dock,.chips,.hero__bg,.cost__cta,.cta-band,.totop,.hcard,.faq__search{display:none !important}
  .hero{background:#fff; color:#000}
  .hero__h1,.hero__sub,.hero__note,.eyebrow,.grad{color:#000; -webkit-text-fill-color:#000}
  body{font-size:12pt}
}