/*
  Final section-flow refinement.
  One continuous crossfade system replaces stacked transition runways so each
  page remains visually soft without paying for the effect with empty space.
*/

:root{
  --flow-overlap:180px;
  --flow-overlap-negative:-180px;
  --flow-content-gap:clamp(42px,4vw,58px);
  --flow-section-bottom:clamp(86px,7vw,112px);
  /* A single continuous alpha curve is deliberately used here. Safari can
     show a one-pixel band where two separately sized mask layers meet. */
  --flow-mask:linear-gradient(180deg,
    transparent 0,
    transparent 22px,
    rgba(0,0,0,.006) 42px,
    rgba(0,0,0,.015) 62px,
    rgba(0,0,0,.035) 82px,
    rgba(0,0,0,.08) 104px,
    rgba(0,0,0,.17) 124px,
    rgba(0,0,0,.34) 144px,
    rgba(0,0,0,.58) 160px,
    rgba(0,0,0,.82) 172px,
    rgba(0,0,0,.96) 178px,
    #000 var(--flow-overlap),
    #000 100%);
}

body{background:#11133E;}

/* Keep real content above every decorative transition veil. */
section{isolation:isolate;}
section > .wrap{position:relative;z-index:2;}

/* Content determines section height. The hero alone retains viewport presence. */
html.scroll-lock-enabled :is(.layanan,.proses,.kelas,.testi,.cta-final,.brevet-features,.brevet-cta),
html:not(.scroll-lock-enabled) section{
  min-height:auto!important;
}

/* Shared incoming-section fade. Dense padding keeps the first content row out
   of the overlap while avoiding a large content-free transition runway. */
:is(
  .layanan,.proses,.kelas,.testi,
  .brevet-features,.brevet-cta,
  .harga-cta,
  .jadwal-content,.jadwal-cta,
  .page-ebook .ebook-catalog,
  .page-ebook .ebook-bundles,
  .page-ebook .ebook-guide,
  .page-ebook .ebook-cta
){
  margin-top:var(--flow-overlap-negative)!important;
  padding-top:calc(var(--flow-overlap) + var(--flow-content-gap))!important;
  -webkit-mask-image:var(--flow-mask)!important;
  mask-image:var(--flow-mask)!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-position:top!important;
  mask-position:top!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Homepage: all six moments flow continuously, with no empty transition-only
   viewport between the cards, proof, and final conversion panel. */
.hero{padding-bottom:clamp(122px,10vw,156px)!important;}
.hero::after{
  height:clamp(238px,25vh,330px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 36%,rgba(54,59,132,.025) 49%,
    rgba(91,99,153,.1) 62%,rgba(145,155,188,.32) 76%,
    rgba(205,211,226,.72) 91%,#F4F6FA 100%)!important;
}

:is(.layanan,.proses,.kelas,.testi){padding-bottom:var(--flow-section-bottom)!important;}

.kelas::after{
  height:clamp(218px,23vh,300px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 38%,rgba(113,117,157,.025) 50%,
    rgba(164,167,187,.15) 64%,rgba(210,209,207,.52) 79%,
    rgba(239,236,228,.88) 93%,#F7F5EF 100%)!important;
}

.cta-footer-connect{
  margin-top:var(--flow-overlap-negative)!important;
  padding-top:var(--flow-overlap)!important;
  -webkit-mask-image:var(--flow-mask)!important;
  mask-image:var(--flow-mask)!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-position:top!important;
  mask-position:top!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.cta-footer-connect .cta-final{
  min-height:auto!important;
  padding:clamp(64px,7vw,88px) 0 clamp(54px,6vw,72px)!important;
}

/* Brevet page: the feature section can grow naturally while the closing CTA
   stays substantial rather than occupying an otherwise empty viewport. */
.brevet-hero{padding-bottom:clamp(150px,13vw,190px)!important;}
.brevet-features{padding-bottom:clamp(132px,10vw,166px)!important;}
.brevet-cta{
  min-height:clamp(500px,66svh,660px)!important;
  padding-bottom:clamp(82px,7vw,108px)!important;
}

/* Pricing and schedule pages. Their lower overlays now use fewer, longer
   colour steps so Safari cannot reveal a hard horizontal band. */
.harga-content{
  min-height:auto!important;
  padding-top:clamp(76px,7vw,94px)!important;
  padding-bottom:clamp(146px,12vw,184px)!important;
}

.harga-content::after,
.jadwal-content::after{
  height:clamp(270px,28vh,360px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 38%,rgba(228,223,211,.02) 48%,
    rgba(202,198,197,.09) 59%,rgba(164,164,179,.25) 70%,
    rgba(116,119,157,.5) 81%,rgba(65,68,124,.78) 90%,
    rgba(35,38,92,.96) 97%,#17194D 100%)!important;
}

.harga-cta,
.jadwal-cta{
  min-height:auto!important;
  padding-bottom:clamp(76px,6vw,98px)!important;
}

.jadwal-hero{
  min-height:clamp(620px,82svh,820px)!important;
  padding-bottom:clamp(146px,12vw,184px)!important;
}

.jadwal-hero::after{
  height:clamp(250px,26vh,340px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 37%,rgba(66,71,136,.02) 48%,
    rgba(103,112,156,.09) 59%,rgba(151,163,194,.3) 71%,
    rgba(196,205,225,.64) 83%,rgba(232,236,245,.92) 95%,#F5F7FB 100%)!important;
}

.jadwal-content{padding-bottom:clamp(146px,12vw,184px)!important;}

/* Tax calculator page: hero keeps viewport presence like the jadwal hero,
   the multi-calculator form below flows by content height. Light content
   (no big card grid inside the hero) means it needs the min-height floor to
   actually win — ".kalk-hero.kalk-hero" out-specifies the blanket
   "html:not(.scroll-lock-enabled) section{min-height:auto!important}" rule
   above (0,2,0 beats 0,1,2) since a single ".kalk-hero" class alone would lose. */
.kalk-hero.kalk-hero{
  min-height:clamp(620px,82svh,820px)!important;
  padding-bottom:clamp(146px,12vw,184px)!important;
}

.kalk-hero::after{
  height:clamp(250px,26vh,340px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 37%,rgba(66,71,136,.02) 48%,
    rgba(103,112,156,.09) 59%,rgba(151,163,194,.3) 71%,
    rgba(196,205,225,.64) 83%,rgba(232,236,245,.92) 95%,#F5F7FB 100%)!important;
}

/* Article hub page: same full-viewport hero treatment as the tax calculator
   page above — ".artikel-hero.artikel-hero" out-specifies the blanket
   "html:not(.scroll-lock-enabled) section{min-height:auto!important}" rule. */
.artikel-hero.artikel-hero{
  min-height:clamp(620px,82svh,820px)!important;
  padding-bottom:clamp(146px,12vw,184px)!important;
}

.artikel-hero::after{
  height:clamp(250px,26vh,340px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 37%,rgba(66,71,136,.02) 48%,
    rgba(103,112,156,.09) 59%,rgba(151,163,194,.3) 71%,
    rgba(196,205,225,.64) 83%,rgba(232,236,245,.92) 95%,#F5F7FB 100%)!important;
}

/* Registration, information, and policy pages use a short footer runway.
   The content cards remain untouched; only surplus blank space is removed. */
.reg-page{
  min-height:auto!important;
  padding-top:clamp(72px,7vw,92px)!important;
  padding-bottom:clamp(142px,11vw,178px)!important;
}

.reg-page::after,
.lokasi-page::after,
.faq-page::after,
.policy-page::after{
  height:clamp(210px,22vh,290px)!important;
  background:linear-gradient(180deg,
    transparent 0%,transparent 38%,rgba(205,203,205,.025) 49%,
    rgba(170,171,188,.1) 60%,rgba(126,128,165,.29) 72%,
    rgba(78,80,133,.58) 84%,rgba(36,38,91,.9) 95%,#11133E 100%)!important;
}

:is(.lokasi-page,.faq-page,.policy-page){
  min-height:auto!important;
  padding-top:clamp(70px,7vw,94px)!important;
  padding-bottom:clamp(144px,11vw,182px)!important;
}

/* Compact one-screen utility pages while preserving an intentional canvas. */
:is(.comingsoon-page,.err-page){
  min-height:clamp(540px,calc(100svh - 83px),740px)!important;
  padding-top:clamp(66px,7vw,92px)!important;
  padding-bottom:clamp(86px,8vw,116px)!important;
}

:is(.comingsoon-page,.err-page)::after{
  height:clamp(180px,20vh,250px)!important;
  background:linear-gradient(180deg,
    transparent 0%,rgba(17,19,62,.06) 18%,rgba(17,19,62,.2) 38%,
    rgba(17,19,62,.46) 61%,rgba(17,19,62,.76) 82%,#11133E 100%)!important;
}

/* e-Book uses a shorter, denser hand-off than the editorial pages. Its cards
   are already visually substantial, so a 210px runway felt empty here. */
.page-ebook{
  --flow-overlap:126px;
  --flow-overlap-negative:-126px;
  --flow-content-gap:30px;
  --flow-section-bottom:84px;
  --flow-mask:linear-gradient(180deg,
    transparent 0,
    transparent 18px,
    rgba(0,0,0,.008) 34px,
    rgba(0,0,0,.02) 50px,
    rgba(0,0,0,.055) 66px,
    rgba(0,0,0,.13) 80px,
    rgba(0,0,0,.27) 94px,
    rgba(0,0,0,.49) 106px,
    rgba(0,0,0,.72) 115px,
    rgba(0,0,0,.91) 122px,
    #000 126px,
    #000 100%);
}

.page-ebook :is(.ebook-catalog,.ebook-bundles,.ebook-guide,.ebook-cta){
  min-height:auto!important;
  padding-bottom:var(--flow-section-bottom)!important;
}

.page-ebook .ebook-hero{
  min-height:auto!important;
  padding-top:clamp(66px,6vw,84px)!important;
  padding-bottom:64px!important;
  background-color:var(--ebook-deep)!important;
  background-image:
    linear-gradient(180deg,rgba(11,16,45,.01) 0%,rgba(27,33,91,.08) 68%,rgba(40,46,112,.3) 100%),
    radial-gradient(circle at 83% 22%,rgba(85,211,175,.22),transparent 31%),
    radial-gradient(circle at 12% 16%,rgba(224,174,66,.14),transparent 26%),
    linear-gradient(118deg,rgba(8,12,42,.98) 0%,rgba(34,39,116,.94) 58%,rgba(8,68,67,.9) 100%),
    url('ebook-learning-bg-ai.jpg')!important;
}

/* The hero's original `gap` controlled both axes. On wide screens that left a
   second, unnecessary runway between the proof points and the value bar. Keep
   the generous horizontal composition while making the vertical rhythm dense. */
@media(min-width:821px){
  .page-ebook .ebook-hero-grid{
    column-gap:clamp(42px,6vw,82px)!important;
    row-gap:clamp(14px,1.35vw,22px)!important;
  }

  .page-ebook .ebook-value-bar{
    margin-top:0!important;
  }
}

.page-ebook .ebook-catalog{
  padding-bottom:90px!important;
  background-color:var(--ebook-paper)!important;
  background-image:
    linear-gradient(180deg,rgba(247,245,239,.98) 0%,rgba(248,248,247,.96) 55%,rgba(240,238,232,.98) 100%),
    radial-gradient(circle at 10% 24%,rgba(43,46,131,.1),transparent 28%),
    radial-gradient(circle at 92% 70%,rgba(224,174,66,.13),transparent 31%),
    url('ebook-learning-bg-ai.jpg')!important;
}

.page-ebook .ebook-bundles{
  padding-bottom:84px!important;
  background-color:#111747!important;
  background-image:
    linear-gradient(180deg,rgba(37,42,120,.94) 0%,rgba(13,18,52,.88) 24%,rgba(10,15,43,.94) 74%,rgba(22,27,77,.97) 100%),
    radial-gradient(circle at 12% 24%,rgba(224,174,66,.14),transparent 25%),
    radial-gradient(circle at 90% 62%,rgba(85,211,175,.13),transparent 28%),
    url('ebook-bundle-bg-v1.jpg')!important;
}

.page-ebook .ebook-guide{
  padding-bottom:86px!important;
  background-color:var(--ebook-paper-2)!important;
  background-image:
    linear-gradient(180deg,rgba(239,242,247,.99) 0%,rgba(249,248,244,.98) 28%,rgba(247,245,239,.98) 100%),
    radial-gradient(circle at 8% 24%,rgba(43,46,131,.12),transparent 27%),
    radial-gradient(circle at 91% 62%,rgba(85,211,175,.13),transparent 25%),
    url('spiral-rings.svg')!important;
}

.page-ebook .ebook-cta{
  padding-bottom:72px!important;
  background-color:#1B1D56!important;
  background-image:
    linear-gradient(180deg,#1B1D56 0%,rgba(14,18,52,.82) 22%,rgba(11,15,43,.9) 68%,#11133E 100%),
    radial-gradient(circle at 18% 80%,rgba(224,174,66,.2),transparent 31%),
    radial-gradient(circle at 88% 18%,rgba(85,211,175,.2),transparent 31%),
    url('ebook-cta-bg-v1.jpg')!important;
}

.page-ebook .ebook-guide-assist{margin-top:34px!important;}

/* Matching final colours mean the last visual frame and footer are one surface. */
section + footer,
.cta-footer-connect footer,
.page-ebook .ebook-cta + footer{
  margin-top:-1px!important;
  border-top:0!important;
}

@media(max-width:700px){
  :root{
    --flow-overlap:116px;
    --flow-overlap-negative:-116px;
    --flow-content-gap:42px;
    --flow-section-bottom:82px;
    --flow-mask:linear-gradient(180deg,
      transparent 0,
      transparent 14px,
      rgba(0,0,0,.01) 28px,
      rgba(0,0,0,.035) 44px,
      rgba(0,0,0,.09) 60px,
      rgba(0,0,0,.2) 75px,
      rgba(0,0,0,.39) 89px,
      rgba(0,0,0,.62) 101px,
      rgba(0,0,0,.83) 110px,
      rgba(0,0,0,.96) 115px,
      #000 116px,
      #000 100%);
  }

  .hero{padding-bottom:108px!important;}
  .hero::after{height:190px!important;}
  .kelas::after{height:178px!important;}

  .cta-footer-connect .cta-final{padding:48px 0 42px!important;}

  .brevet-hero{padding-bottom:112px!important;}
  .brevet-features{padding-bottom:92px!important;}
  .brevet-cta{min-height:auto!important;padding-bottom:66px!important;}

  .harga-content,
  .jadwal-content{padding-bottom:112px!important;}
  .harga-content::after,
  .jadwal-content::after{height:218px!important;}
  .jadwal-hero{min-height:auto!important;padding-bottom:112px!important;}
  .jadwal-hero::after{height:206px!important;}
  .kalk-hero.kalk-hero{min-height:auto!important;padding-bottom:112px!important;}
  .kalk-hero::after{height:206px!important;}
  .artikel-hero.artikel-hero{min-height:auto!important;padding-bottom:112px!important;}
  .artikel-hero::after{height:206px!important;}

  .reg-page,
  :is(.lokasi-page,.faq-page,.policy-page){
    padding-top:58px!important;
    padding-bottom:136px!important;
  }

  .reg-page::after,
  .lokasi-page::after,
  .faq-page::after,
  .policy-page::after{height:176px!important;}

  :is(.comingsoon-page,.err-page){
    min-height:calc(100svh - 68px)!important;
    padding:54px 0 72px!important;
  }

  .page-ebook{
    --flow-overlap:96px;
    --flow-overlap-negative:-96px;
    --flow-content-gap:24px;
    --flow-section-bottom:68px;
    --flow-mask:linear-gradient(180deg,
      transparent 0,
      transparent 12px,
      rgba(0,0,0,.01) 25px,
      rgba(0,0,0,.035) 39px,
      rgba(0,0,0,.09) 53px,
      rgba(0,0,0,.2) 66px,
      rgba(0,0,0,.4) 78px,
      rgba(0,0,0,.65) 88px,
      rgba(0,0,0,.89) 94px,
      #000 96px,
      #000 100%);
  }
  .page-ebook .ebook-hero{min-height:auto!important;padding-top:54px!important;padding-bottom:68px!important;}
  .page-ebook :is(.ebook-catalog,.ebook-bundles,.ebook-guide){padding-bottom:68px!important;}
  .page-ebook .ebook-cta{padding-bottom:56px!important;}
  .page-ebook .ebook-guide-assist{margin-top:28px!important;}
}

@media(prefers-reduced-motion:reduce){
  :is(
    .layanan,.proses,.kelas,.testi,
    .brevet-features,.brevet-cta,
    .harga-cta,.jadwal-content,.jadwal-cta,
    .page-ebook .ebook-catalog,.page-ebook .ebook-bundles,
    .page-ebook .ebook-guide,.page-ebook .ebook-cta
  ){background-attachment:scroll!important;}
}