/* ==========================================================
   Gaya terinspirasi "Editorial" (HTML5 UP): putih bersih, Source Sans,
   garis merah di bawah header, tombol uppercase dengan outline tipis.
   Semua CSS ada di file ini, tidak butuh main.css.
   ========================================================== */
:root{
  --ink:#3d4449; --accent:#f56a6a; --accent-strong:#d9494a;
  --text:#6a737a; --bg:#fff; --soft:#f5f6f7; --line:#e5e5e5; --edge:rgba(210,215,217,.75);
  --font:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:400 17px/1.65 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;animation:fadein .6s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
a{color:inherit;text-decoration:none}
.link{display:inline-block;color:var(--accent-strong);border-bottom:dotted 1px;transition:transform .2s}
.link:hover{border-bottom-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 3em}
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.25}
h2{font-size:1.8rem}
h3{font-size:1.3rem}

/* ---------- tombol ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:2.9em;padding:.55em 1.6em;border:0;border-radius:.375em;font:600 .8rem/1.2 var(--font);letter-spacing:.22em;text-transform:uppercase;text-align:center;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 2px var(--edge);cursor:pointer;transition:color .2s,background-color .2s,box-shadow .2s,transform .2s,filter .2s}
.button:hover{color:var(--accent-strong);box-shadow:inset 0 0 0 2px var(--accent)}
.button.primary{background:var(--accent-strong);color:#fff;box-shadow:none}
.button.primary:hover{background:#e05557;color:#fff}
.button.big{font-size:.92rem;min-height:3.2em;padding:.6em 2.2em}

/* ---------- header ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:2.4em 0 1.2em;border-bottom:solid 4px var(--accent)}
.logo{font-size:1.35rem;color:var(--ink);letter-spacing:-.005em;transition:transform .2s}
.logo strong{font-weight:600}

/* ---------- banner: teks di kiri, gambar di kanan ---------- */
#banner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3em;align-items:stretch;padding:4em 0 4.2em}
#banner .content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#banner h1{font-size:clamp(2rem,3.4vw + .6rem,3.3rem);line-height:1.1;letter-spacing:-.012em;margin-bottom:.35em}
#banner .lead{font-size:1.3rem;color:var(--ink);margin-bottom:1em}
#banner .copy{max-width:36em;margin-bottom:1.8em}
.object{position:relative;min-height:340px;background:var(--soft);border-radius:.375em;overflow:hidden}
.object img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- section ---------- */
section.block{padding:3.5em 0 1.5em;border-top:solid 2px var(--line)}
section.block.first{border-top:0;padding-top:3em}
.major{margin-bottom:1.4em}
.major h2{display:inline-block;border-bottom:solid 3px var(--ink);padding:0 1.5em .12em 0}
.sub{max-width:40em;margin-bottom:2em}

/* ---------- kartu paket ---------- */
.cards{display:grid;gap:1.8em;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:solid 2px var(--line);border-radius:.375em;overflow:hidden;transition:transform .35s,box-shadow .35s}
.card.pop{border-color:var(--accent)}
.thumb{position:relative;display:block;width:100%;aspect-ratio:var(--thumb-ratio,1200/1600);overflow:hidden;background:var(--soft);cursor:pointer;border:0;padding:0}
.thumb iframe{position:absolute;left:0;top:0;width:var(--thumb-w,1200px);height:var(--thumb-h,1600px);border:0;transform-origin:0 0;pointer-events:none}
.thumb .lbl{position:absolute;right:10px;bottom:10px;background:var(--accent-strong);color:#fff;padding:.35em 1em;border-radius:99px;font-size:.85rem;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.thumb:hover .lbl,.thumb:focus-visible .lbl{opacity:1;transform:none}
.card .body{padding:1.3em 1.4em 1.5em;display:flex;flex-direction:column;gap:.7em;flex:1}
.ttl{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.badge{background:var(--accent-strong);color:#fff;padding:.1em .8em;border-radius:99px;font-size:.8rem;font-weight:600}
.amt{font-size:2.3rem;font-weight:600;color:var(--ink);line-height:1.1}
.amt small{font-size:.95rem;font-weight:400;color:var(--text)}
.tag{font-size:.95rem}
ul.ticks{list-style:none;padding:0;display:grid;gap:.5em;font-size:.95rem}
ul.ticks li{padding-left:1.8em;position:relative}
ul.ticks li::before{content:"";position:absolute;left:.15em;top:.45em;width:.9em;height:.5em;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
.card .row{margin-top:auto;padding-top:.6em;display:flex;flex-direction:column;gap:.7em}

/* ---------- tabel ---------- */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
.tbl table{min-width:540px}
th,td{padding:.75em 1em;border-top:solid 1px var(--edge);text-align:left;font-weight:400;vertical-align:top}
thead th{border-top:0;border-bottom:solid 2px var(--edge);color:var(--ink);font-weight:600;text-align:center}
thead th small{display:block;font-weight:400;color:var(--text)}
tbody tr:nth-child(odd){background:rgba(230,235,237,.25)}
tbody th{color:var(--ink)}
.matrix td{text-align:center}
.addons td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
td small{display:block;color:var(--text);font-weight:400;font-size:.9rem}

ol.steps{display:grid;gap:.8em;padding-left:1.5em;max-width:44em}
ol.steps li::marker{color:var(--accent-strong);font-weight:600}

footer{border-top:solid 2px var(--line);background:var(--soft);padding:3em 0;text-align:center;margin-top:3.5em}
footer p{margin-bottom:1.2em}
footer p:last-child{margin-bottom:0}

/* ---------- modal preview + tombol perangkat ---------- */
#modal{position:fixed;inset:0;background:rgba(61,68,73,.95);display:none;flex-direction:column;z-index:20;padding:14px}
#modal.on{display:flex;animation:fadein .2s}
.bar{display:flex;flex-wrap:wrap;gap:.8em 1em;align-items:center;justify-content:space-between;margin-bottom:12px;color:#fff}
.bar strong{font-size:1.15rem;font-weight:600}
.bar .grp{display:flex;flex-wrap:wrap;gap:.6em;align-items:center}
.bar .button{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.bar .button:hover{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px #fff}
.frame{flex:1;display:flex;justify-content:center;min-height:0}
.frame iframe{border:0;background:#fff;border-radius:.375em;width:100%;max-width:100%;height:100%;transition:width .25s}

/* ---------- animasi (diambil dari file lama, disesuaikan dengan banner baru) ---------- */
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(217,73,74,.5)}60%{box-shadow:0 0 0 14px rgba(217,73,74,0)}}

/* banner: teks muncul berurutan, gambar pop-in, tombol utama berdenyut */
#banner h1,#banner .lead,#banner .copy{animation:up .8s backwards}
#banner h1{animation-delay:.12s}
#banner .lead{animation-delay:.24s}
#banner .copy{animation-delay:.36s}
#banner .button.big{animation:up .8s .48s backwards}
#banner .object{animation:pop .9s .2s backwards}

/* muncul saat di-scroll */
.rv{opacity:0}
.rv.in{opacity:1;animation:up .7s backwards}

/* jendela preview */
.frame iframe{animation:pop .4s}

/* popup saat disorot: kartu & tombol terangkat (thumbnail tidak di-zoom, sama seperti file asli) */
@media (hover:hover){
  .card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(61,68,73,.18)}
  .button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--accent),0 10px 22px rgba(61,68,73,.22);filter:brightness(1.05)}
  .button.primary:hover,.button.primary:focus-visible{box-shadow:0 10px 22px rgba(61,68,73,.25)}
  .bar .button:hover,.bar .button:focus-visible{box-shadow:inset 0 0 0 2px #fff,0 10px 22px rgba(0,0,0,.3)}
  .logo:hover,.logo:focus-visible,.link:hover,.link:focus-visible{transform:translateY(-3px)}
}
.card:has(:focus-visible){transform:translateY(-8px);box-shadow:0 20px 40px rgba(61,68,73,.18)}

/* ---------- responsif ---------- */
/* Tablet (portrait) 737px - 980px: banner tetap berdampingan, kartu 2 kolom */
@media (max-width:980px){
  .wrap{padding:0 2em}
  #banner{gap:2em;padding:3em 0 3.4em}
  .object{min-height:300px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards>.card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .cards>.card:last-child:nth-child(odd) .thumb{height:100%;aspect-ratio:auto;min-height:260px;grid-column:1;grid-row:1}
  .cards>.card:last-child:nth-child(odd) .pick{grid-column:1;grid-row:2}
  .cards>.card:last-child:nth-child(odd) .body{grid-column:2;grid-row:1/3}
}
/* Mobile: semua menumpuk, gambar di atas */
@media (max-width:736px){
  body{font-size:16px}
  .wrap{padding:0 1.4em}
  .top{padding:1.6em 0 1em}
  #banner{grid-template-columns:1fr;gap:1.6em;padding:1.8em 0 2.6em}
  #banner .object{order:-1;min-height:0;height:210px}
  #banner .lead{font-size:1.15rem}
  #banner .button.big{width:100%}
  .cards{grid-template-columns:1fr}
  .cards>.card:last-child:nth-child(odd){display:flex}
  .cards>.card:last-child:nth-child(odd) .thumb{height:auto;aspect-ratio:var(--thumb-ratio,1200/1600);min-height:0}
  section.block{padding-top:2.6em}
  h2{font-size:1.5rem}
}
@media (max-width:480px){
  .logo{font-size:1.15rem}
  .top .button{padding:.5em 1em;letter-spacing:.14em}
  .bar .button{padding:.5em 1em;letter-spacing:.14em}
}
@media (hover:none){.thumb .lbl{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1}}

.object{background:linear-gradient(135deg,#f5f6f7,#e3e7ea)}
.pick{display:flex;align-items:center;gap:.5em;padding:.6em 1em;border-top:solid 2px var(--line);background:var(--soft)}
.pname{flex:1;text-align:center;font-size:.9rem;color:var(--ink);font-weight:600}
.mini{min-width:2.4em;min-height:2.4em;border:0;border-radius:.375em;background:#fff;color:var(--ink);font:600 1.1rem var(--font);box-shadow:inset 0 0 0 2px var(--edge);cursor:pointer}
.mini:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-strong)}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4em;align-items:start}
.about .lead2{font-size:1.25rem;color:var(--ink)}
.about .button{margin:.4em .6em .4em 0}
@media (max-width:736px){.about{grid-template-columns:1fr}}

/* ==========================================================
   Tambahan tampilan profesional: nav, trust strip, langkah, FAQ, testimoni, chat
   ========================================================== */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:1.2rem}
.nav{display:flex;align-items:center;gap:1.7em}
.nav a:not(.button){display:inline-block;color:var(--ink);font-weight:600;font-size:.95rem;transition:transform .2s,color .2s}
.nav a:not(.button):hover{color:var(--accent-strong)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8em}
#banner .button.big{animation:up .8s .48s backwards}
#banner .button.primary.big{animation:up .8s .48s backwards}
#banner .button.big:not(.primary){animation-delay:.58s}

.trust{list-style:none;padding:1.8em 0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6em;border-top:solid 2px var(--line);border-bottom:solid 2px var(--line)}
.trust li{display:flex;gap:.9em;align-items:flex-start}
.trust svg{flex:none;color:var(--accent-strong);margin-top:.1em}
.trust strong{display:block;color:var(--ink);font-weight:600;line-height:1.3}
.trust span{display:block;font-size:.92rem;line-height:1.4}
.fine{font-size:.88rem;margin-top:1.2em}

ol.steps3{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8em;counter-reset:st}
.step{counter-increment:st;border:solid 2px var(--line);border-radius:.375em;padding:1.5em 1.5em 1.7em}
.step::before{content:counter(st);display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--accent-strong);color:#fff;font-weight:600;margin-bottom:.9em}
.step h3{margin-bottom:.3em}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8em}
.quote{border-left:solid 4px var(--accent);padding:.3em 0 .3em 1.2em}
.quote p{font-size:1.1rem;color:var(--ink)}
.quote cite{display:block;margin-top:.7em;font-style:normal;font-size:.92rem}

.faq{max-width:52em}
.faq details{border-top:solid 1px var(--edge)}
.faq details:last-child{border-bottom:solid 1px var(--edge)}
.faq summary{cursor:pointer;list-style:none;padding:1em 2.6em 1em 0;color:var(--ink);font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4em;top:.7em;font-size:1.5rem;line-height:1.2;color:var(--accent-strong);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.6em 1.2em 0}

footer h2{margin-bottom:.3em}
footer .cta-row{justify-content:center;margin-bottom:1.2em}

.chat{position:fixed;right:18px;bottom:18px;z-index:10;display:inline-flex;align-items:center;gap:.55em;padding:.75em 1.2em;border-radius:99px;background:var(--accent-strong);color:#fff;font-weight:600;font-size:.9rem;box-shadow:0 8px 22px rgba(61,68,73,.28);transition:transform .2s,box-shadow .2s}
.chat svg{flex:none}

@media (hover:hover){
  .nav a:not(.button):hover{transform:translateY(-3px)}
  .chat:hover,.chat:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px rgba(61,68,73,.32)}
}
@media (max-width:980px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:736px){ol.steps3{grid-template-columns:1fr} footer{padding-bottom:5.5em}}
@media (max-width:480px){.trust{grid-template-columns:1fr} .chat span{display:none} .chat{padding:.85em}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================
   Galeri desain, picks (maks. 3), bagian promise
   ========================================================== */
.perks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.3em 1.5em;margin-top:1.5em;font-size:.95rem;font-weight:600;color:var(--ink);animation:up .8s .7s backwards}
.perks li{position:relative;padding-left:1.6em}
.perks li::before{content:"";position:absolute;left:.1em;top:.5em;width:.8em;height:.45em;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}

.gtabs{display:flex;flex-wrap:wrap;gap:.4em;border-bottom:solid 2px var(--line);margin-bottom:1.4em}
.gtab{border:0;background:transparent;font:600 1rem var(--font);color:var(--text);padding:.7em 1.2em;cursor:pointer;border-bottom:solid 4px transparent;margin-bottom:-2px;transition:transform .2s,color .2s}
.gtab small{font-weight:400;margin-left:.4em}
.gtab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.gtab:hover{color:var(--accent-strong)}
.gplan{display:flex;flex-wrap:wrap;gap:1em 2em;align-items:center;justify-content:space-between;margin-bottom:1.2em}
.gplan h3{display:inline;margin-right:.3em}
.gplan p{margin-top:.2em;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:1.4em}
.chip{border:0;border-radius:99px;background:#fff;color:var(--ink);font:600 .85rem var(--font);padding:.45em 1.1em;box-shadow:inset 0 0 0 2px var(--edge);cursor:pointer;transition:transform .2s,box-shadow .2s}
.chip:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.more{display:flex;justify-content:center;margin-top:1.6em}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4em}
.dcard{display:flex;flex-direction:column;background:#fff;border:solid 2px var(--line);border-radius:.375em;overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .2s}
.dcard.picked{border-color:var(--accent-strong)}
.dcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dbody{padding:.9em 1.1em 1.1em;display:flex;flex-direction:column;gap:.45em;flex:1}
.dname{font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.3}
.dniche{font-size:.88rem}
.dbadges{display:flex;flex-wrap:wrap;gap:.35em}
.dbadges span{font-size:.78rem;background:var(--soft);color:var(--ink);padding:.05em .7em;border-radius:99px}
.dbody .button{margin-top:auto;width:100%}
.dcard.picked .pickbtn{background:var(--accent-strong);color:#fff;box-shadow:none}
.pickbtn[disabled],.bar .button[disabled]{opacity:.45;cursor:not-allowed}
.bar .button.on{background:var(--accent-strong);box-shadow:none}

.picks{position:fixed;left:14px;right:14px;bottom:18px;max-width:760px;margin:0 auto;z-index:12;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8em 1.2em;background:#fff;border:solid 2px var(--accent-strong);border-radius:.375em;padding:.8em 1em;box-shadow:0 14px 34px rgba(61,68,73,.28)}
.picks.on{display:flex;animation:up .3s}
.picks .txt{flex:1;min-width:200px;line-height:1.35}
.picks .txt strong{color:var(--ink);display:block}
.picks .txt small{display:block}
.picks .acts{display:flex;gap:.6em;flex-wrap:wrap}
body.has-picks .chat{bottom:calc(34px + var(--pk,0px))}

.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6em}
.pcard{border:solid 2px var(--line);border-radius:.375em;padding:1.4em}
.pcard svg{color:var(--accent-strong);margin-bottom:.6em}
.pcard h3{margin-bottom:.3em;font-size:1.2rem}
.pcard p{font-size:.95rem}
.promise-terms{margin-top:1.8em}
.faq details ul{padding:0 0 1.2em 1.4em;display:grid;gap:.5em}
.who{display:flex;gap:1.1em;align-items:center}
.who img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.alinks{display:flex;gap:1.2em;flex-wrap:wrap;margin-top:.8em}

@media (hover:hover){
  .dcard:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(61,68,73,.18)}
  .chip:hover,.gtab:hover{transform:translateY(-3px)}
}
@media (max-width:736px){
  .gtab{padding:.6em .8em}
  .picks .acts{width:100%}
  .picks .acts .button{flex:1}
  .who{align-items:flex-start}
}

/* ---------- promo launch offer ---------- */
.promo-bar{background:var(--accent-strong);color:#fff;text-align:center;font-size:.92rem;font-weight:600;line-height:1.4;padding:.65em 1em}
.promo-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:.5em;white-space:nowrap}
.offer{display:flex;flex-wrap:wrap;gap:1em 2em;align-items:center;justify-content:space-between;border:solid 2px var(--accent);border-radius:.375em;background:var(--soft);padding:1.3em 1.5em;margin-bottom:1.8em}
.offer h3{margin:.35em 0 .25em}
.offer p{font-size:.98rem;max-width:44em}
.spots{text-align:center;min-width:7.5em}
.spots strong{display:block;font-size:1.9rem;line-height:1.1;color:var(--accent-strong);font-weight:600}
.spots span{font-size:.9rem}
.was{font-size:1.1rem;font-weight:400;color:var(--text);margin:0 .1em}
thead th small s{margin-left:.3em}
.gplan strong s{font-weight:400;color:var(--text);margin-left:.4em}

/* ---------- byline, best-for, thumbnail statis, form kontak ---------- */
.byline{display:flex;align-items:center;gap:.8em;margin-top:1.3em;font-size:.95rem;animation:up .8s .85s backwards}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.best{font-size:.92rem}
.best strong{color:var(--ink);font-weight:600}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.qform{display:grid;gap:1.1em;max-width:44em;margin-bottom:1.2em}
.qform .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1em}
.qform label{display:block;font-size:.92rem;font-weight:600;color:var(--ink)}
.qform input,.qform select,.qform textarea{display:block;width:100%;margin-top:.35em;padding:.65em .8em;border:solid 2px var(--edge);border-radius:.375em;font:400 1rem var(--font);color:var(--ink);background:#fff}
.qform textarea{min-height:7em;resize:vertical}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--accent)}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qstat{min-height:1.5em;font-size:.95rem;margin:0}
.qstat.ok{color:#1f7a3d}
.qstat.err{color:#b3261e}
@media (max-width:736px){.qform .two{grid-template-columns:1fr}}

/* ---------- tata letak jendela preview (modal) ---------- */
.stage{flex:1;display:flex;gap:12px;min-height:0;position:relative}
.stage .frame{min-width:0}
.bar .button.hl{background:var(--accent-strong);box-shadow:none}


/* ==========================================================
   MULTIPAGE: menu tiap halaman, judul halaman, kartu ringkas, tautan antar halaman
   ========================================================== */
.top{position:relative}
.nav{gap:1.5em}
.nav a[aria-current="page"]:not(.button){color:var(--accent-strong);box-shadow:0 3px 0 var(--accent)}
.navtoggle{display:none;align-items:center;gap:.5em;border:0;border-radius:.375em;background:transparent;color:var(--ink);font:600 .8rem var(--font);letter-spacing:.2em;text-transform:uppercase;padding:.7em 1em;box-shadow:inset 0 0 0 2px var(--edge);cursor:pointer}
.navtoggle:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-strong)}
.navtoggle i{display:inline-block;width:1.1em;height:2px;background:currentColor;position:relative}
.navtoggle i::before,.navtoggle i::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor}
.navtoggle i::before{top:-5px}.navtoggle i::after{top:5px}
@media (max-width:980px){
  .nav{gap:1.1em}
  .nav a:not(.button){font-size:.9rem}
}
@media (max-width:860px){
  .navtoggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:15;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:solid 4px var(--accent);box-shadow:0 18px 30px rgba(61,68,73,.16);padding:.6em 0 1.1em}
  .nav.open{display:flex;animation:fadein .2s}
  .nav a:not(.button){display:block;padding:.85em .2em;border-bottom:solid 1px var(--line);box-shadow:none!important}
  .nav a[aria-current="page"]:not(.button){box-shadow:none;border-left:solid 4px var(--accent);padding-left:.8em}
  .nav .button{margin-top:1em}
}

.phero{padding:2.6em 0 2.2em;border-bottom:solid 2px var(--line)}
.crumbs{font-size:.9rem;margin-bottom:.9em}
.crumbs a{color:var(--accent-strong);border-bottom:dotted 1px}
.crumbs a:hover{border-bottom-color:transparent}
.crumbs span[aria-hidden]{margin:0 .5em;color:var(--edge)}
.phero h1{font-size:clamp(1.9rem,2.6vw + .8rem,2.9rem);line-height:1.12;letter-spacing:-.012em;margin-bottom:.35em}
.phero p{max-width:40em;font-size:1.12rem}
.phero .cta-row{margin-top:1.4em}
main section.block:first-child{border-top:0;padding-top:2.6em}
.card.compact .body{gap:.6em}
.morelink{margin-top:1.2em}
.morelink .link{font-weight:600}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4em}
.next a{display:block;border:solid 2px var(--line);border-radius:.375em;padding:1.3em 1.4em;transition:transform .3s,box-shadow .3s,border-color .2s}
.next a strong{display:block;color:var(--ink);font-size:1.15rem;font-weight:600;margin-bottom:.25em}
.next a span{display:block;font-size:.95rem}
.next a em{display:inline-block;margin-top:.7em;font-style:normal;font-weight:600;color:var(--accent-strong);font-size:.9rem}
.next a:hover,.next a:focus-visible{border-color:var(--accent)}
@media (hover:hover){.next a:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(61,68,73,.16)}}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.6em;align-items:start}
.contact-grid .qform{margin-bottom:0}
.side{border:solid 2px var(--line);border-radius:.375em;padding:1.4em 1.5em;display:grid;gap:1em}
.side h3{font-size:1.15rem}
.side .button{width:100%}
.side ul.ticks{margin-top:.2em}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.fnav{display:flex;flex-wrap:wrap;gap:.4em 1.6em;justify-content:center;margin-bottom:1.6em;font-weight:600;font-size:.95rem}
.fnav a{color:var(--ink)}
.fnav a:hover{color:var(--accent-strong)}
.steps-wide{margin-bottom:.4em}
.pay{margin-top:1.6em;max-width:44em}
@media (max-width:736px){.phero{padding:1.8em 0 1.6em}}