/* V10.6 Visual Final Hotfix
   Screenshot QA findings:
   - horizontal overflow on 390px mobile
   - story/Panggung still contained dark promotional blocks
   - Panggung still mentioned Liga Aksara
   - Jawara mobile hero clipped
*/
html{max-width:100%;overflow-x:hidden}
body.v106-visual-final{max-width:100%!important;overflow-x:hidden!important}
body.v106-visual-final *,body.v106-visual-final *:before,body.v106-visual-final *:after{box-sizing:border-box}
body.v106-visual-final img,body.v106-visual-final video,body.v106-visual-final canvas{max-width:100%;height:auto}
body.v106-visual-final main,
body.v106-visual-final section,
body.v106-visual-final .container,
body.v106-visual-final .header-inner,
body.v106-visual-final .footer-inner{min-width:0;max-width:100%}
body.v106-visual-final input,
body.v106-visual-final textarea,
body.v106-visual-final select,
body.v106-visual-final button{min-width:0;max-width:100%}

/* CERITA AKSARA: white base, blue primary, gold secondary. */
body.v106-story-visual{
  --vf-blue:#1256a0;
  --vf-blue-dark:#083b78;
  --vf-blue-soft:#eef6ff;
  --vf-gold:#d7a52b;
  --vf-gold-soft:#fff8e5;
  --vf-ink:#152238;
}
body.v106-story-visual main{background:#fff!important;color:var(--vf-ink)!important}

/* Remove the remaining black/brown HF9 promo treatment without removing its useful content. */
body.v106-story-visual .lg-promo-experience{
  background:linear-gradient(135deg,#fff 0%,#fff 62%,var(--vf-blue-soft) 100%)!important;
  color:var(--vf-ink)!important;
  border:2px solid var(--vf-blue)!important;
  border-top:7px solid var(--vf-gold)!important;
  box-shadow:0 18px 44px rgba(18,86,160,.10)!important;
}
body.v106-story-visual .lg-promo-experience:after{
  border-color:rgba(18,86,160,.16)!important;
  box-shadow:0 0 0 34px rgba(215,165,43,.06),0 0 0 68px rgba(18,86,160,.035)!important;
}
body.v106-story-visual .lg-promo-copy>small{color:var(--vf-blue)!important}
body.v106-story-visual .lg-promo-copy h2{color:var(--vf-blue-dark)!important}
body.v106-story-visual .lg-promo-copy p{color:#53677c!important}
body.v106-story-visual .lg-promo-chips span{
  color:var(--vf-blue-dark)!important;
  background:var(--vf-blue-soft)!important;
  border-color:#bcd5ef!important;
}
body.v106-story-visual .lg-promo-actions a.primary{
  background:var(--vf-blue)!important;
  color:#fff!important;
  box-shadow:inset 0 -4px 0 var(--vf-gold)!important;
}
body.v106-story-visual .lg-promo-actions a.secondary{
  background:#fff!important;
  color:var(--vf-blue)!important;
  border:1px solid var(--vf-blue)!important;
}
body.v106-story-visual .lg-promo-proof{
  background:#fff!important;
  border:1px solid #bcd5ef!important;
  box-shadow:inset 5px 0 0 var(--vf-gold)!important;
}
body.v106-story-visual .lg-promo-proof>strong{color:var(--vf-blue-dark)!important}
body.v106-story-visual .lg-promo-proof>div{border-color:#d7e5f4!important}
body.v106-story-visual .lg-promo-proof b{background:var(--vf-gold)!important;color:#493500!important}
body.v106-story-visual .lg-promo-proof span{color:#53677c!important}

/* Panggung belongs to Cerita Aksara, therefore it must never be a black section. */
body.v106-story-visual .panggung-hf12-hero{
  background:linear-gradient(118deg,#fff 0%,#fff 58%,var(--vf-blue-soft) 58%,var(--vf-blue-soft) 100%)!important;
  color:var(--vf-ink)!important;
  border-top:6px solid var(--vf-gold)!important;
  border-bottom:5px solid var(--vf-blue)!important;
}
body.v106-story-visual .panggung-hf12-hero small{color:var(--vf-blue)!important}
body.v106-story-visual .panggung-hf12-hero h1{color:var(--vf-blue-dark)!important}
body.v106-story-visual .panggung-hf12-hero p{color:#53677c!important}
body.v106-story-visual .panggung-proof{
  background:#fff!important;
  border:2px solid var(--vf-blue)!important;
  box-shadow:8px 8px 0 var(--vf-gold)!important;
}
body.v106-story-visual .panggung-proof strong{color:var(--vf-blue)!important}
body.v106-story-visual .panggung-proof span{color:#53677c!important}
body.v106-story-visual .panggung-rules{
  background:var(--vf-blue-soft)!important;
  border-bottom-color:#bdd4ec!important;
}
body.v106-story-visual .panggung-rule{
  background:#fff!important;
  border-left-color:var(--vf-gold)!important;
  border-top:3px solid var(--vf-blue)!important;
}
body.v106-story-visual .panggung-archive{background:#fff!important}
body.v106-story-visual .panggung-empty{
  background:#fff!important;
  border-color:var(--vf-gold)!important;
  box-shadow:inset 5px 0 0 var(--vf-blue)!important;
}
body.v106-story-visual .panggung-empty small,
body.v106-story-visual .panggung-empty a{color:var(--vf-blue)!important}

/* FESTIVAL AKSARA: preserve white + red + gold, remove possible dark legacy surfaces. */
body.v106-festival-visual{
  --vf-red:#a61f35;
  --vf-red-dark:#781326;
  --vf-red-soft:#fff1f3;
  --vf-gold:#d7a52b;
}
body.v106-festival-visual main{background:#fff!important}
body.v106-festival-visual .lg-promo-experience,
body.v106-festival-visual .liga-detail-hero{
  background:#fff!important;
  color:#2b181c!important;
  border-color:#e7bcc4!important;
}
body.v106-festival-visual .lg-promo-copy h2,
body.v106-festival-visual .liga-detail-hero h2{color:var(--vf-red-dark)!important}

/* Jawara: heritage hero must remain readable on a narrow viewport. */
body.v106-jawara-visual .jawara-hero-v106{overflow:hidden!important}
body.v106-jawara-visual .jawara-hero-v106 .container{min-width:0!important;max-width:100%!important}
body.v106-jawara-visual .jawara-hero-v106 h1{max-width:100%!important;overflow-wrap:anywhere}
body.v106-jawara-visual .jawara-pills-v106{max-width:100%!important}

/* Shared overflow safety for the publishing ecosystem. */
body.v106-visual-final .path-gateway-hero .container,
body.v106-visual-final .path-gateway-map .container,
body.v106-visual-final .path-gateway-cards,
body.v106-visual-final .gateway-card,
body.v106-visual-final .v105-promo-inner,
body.v106-visual-final .v105-benefit-strip,
body.v106-visual-final .v105-journey-nav,
body.v106-visual-final .v105-promo-mark,
body.v106-visual-final .cerita-cash-v106,
body.v106-visual-final .cerita-cash-inner-v106,
body.v106-visual-final .festival-hero-inner-v106,
body.v106-visual-final .festival-proof-v106,
body.v106-visual-final .festival-terms-v106,
body.v106-visual-final .festival-money-v106,
body.v106-visual-final .festival-actions-v106,
body.v106-visual-final .liga-status-page,
body.v106-visual-final .liga-panel,
body.v106-visual-final .liga-form,
body.v106-visual-final .jawara-summary-v106,
body.v106-visual-final .jawara-grid-v106,
body.v106-visual-final .jawara-card-v106,
body.v106-visual-final .panggung-hf12-hero .container,
body.v106-visual-final .panggung-rules .container,
body.v106-visual-final .panggung-archive .container,
body.v106-visual-final .lg-promo-experience,
body.v106-visual-final .lg-promo-copy,
body.v106-visual-final .lg-promo-proof{
  min-width:0!important;
}

/* Mobile: QA was captured at 390px. Keep every path truly inside that viewport. */
@media(max-width:700px){
  body.v106-visual-final .container{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.v106-visual-final .site-header,
  body.v106-visual-final .header-inner{
    max-width:100vw!important;
    overflow:hidden!important;
  }
  body.v106-visual-final .header-inner{
    width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
    gap:8px!important;
  }
  body.v106-visual-final .header-inner>*{min-width:0!important}
  body.v106-visual-final .brand{
    min-width:0!important;
    max-width:calc(100vw - 74px)!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  body.v106-visual-final .brand img{
    max-width:118px!important;
    width:auto!important;
    height:42px!important;
  }
  body.v106-visual-final .brand strong,
  body.v106-visual-final .brand small,
  body.v106-visual-final .brand span{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.v106-visual-final .nav-toggle{flex:0 0 42px!important}

  body.v106-visual-final h1,
  body.v106-visual-final h2,
  body.v106-visual-final h3,
  body.v106-visual-final p,
  body.v106-visual-final strong,
  body.v106-visual-final label{
    max-width:100%!important;
    overflow-wrap:anywhere;
  }

  body.v106-visual-final .path-gateway-copy h1{
    font-size:clamp(35px,10.2vw,45px)!important;
    line-height:1.02!important;
  }
  body.v106-visual-final .path-gateway-proof strong{
    font-size:28px!important;
    overflow-wrap:anywhere;
  }
  body.v106-visual-final .gateway-card{
    width:100%!important;
    padding:23px!important;
  }
  body.v106-visual-final .gateway-card h3{font-size:31px!important}

  body.v106-visual-final .v105-promo-inner{
    width:100%!important;
    max-width:100%!important;
    padding:48px 17px 30px!important;
    gap:24px!important;
  }
  body.v106-visual-final .v105-promo-copy h1{
    font-size:clamp(32px,9.3vw,40px)!important;
    line-height:1.02!important;
  }
  body.v106-visual-final .v105-promo-copy p{font-size:14px!important}
  body.v106-visual-final .v105-promo-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  body.v106-visual-final .v105-promo-actions a{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body.v106-visual-final .v105-promo-mark{width:100%!important}
  body.v106-visual-final .v105-benefit-strip,
  body.v106-visual-final .v105-journey-nav{
    width:100%!important;
    max-width:100%!important;
  }
  body.v106-visual-final .v105-journey-nav a{
    max-width:100%!important;
    flex:1 1 140px!important;
    text-align:center!important;
  }

  body.v106-visual-final .cerita-cash-v106{
    width:100%!important;
    max-width:100%!important;
    padding-left:17px!important;
    padding-right:17px!important;
  }
  body.v106-visual-final .cerita-cash-inner-v106{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  body.v106-visual-final .cerita-cash-money-v106 strong{
    font-size:clamp(42px,14vw,58px)!important;
  }

  body.v106-visual-final .festival-hero-inner-v106{
    width:100%!important;
    max-width:100%!important;
    padding:52px 17px 38px!important;
    gap:25px!important;
  }
  body.v106-visual-final .festival-copy-v106 h1{
    font-size:clamp(35px,10.2vw,44px)!important;
    line-height:1.01!important;
  }
  body.v106-visual-final .festival-actions-v106{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  body.v106-visual-final .festival-actions-v106 a{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body.v106-visual-final .festival-money-v106{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-shadow:6px 6px 0 var(--festival-gold)!important;
  }
  body.v106-visual-final .festival-proof-v106{
    width:100%!important;
    max-width:100%!important;
    padding-left:17px!important;
    padding-right:17px!important;
  }
  body.v106-visual-final .festival-terms-v106{
    width:auto!important;
    max-width:calc(100% - 34px)!important;
  }

  body.v106-visual-final .liga-status-page{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  body.v106-visual-final .liga-status-page h1,
  body.v106-visual-final .liga-section h1{
    font-size:clamp(31px,9vw,39px)!important;
    line-height:1.04!important;
  }
  body.v106-visual-final .liga-panel{width:100%!important;padding:21px!important}
  body.v106-visual-final .liga-form{width:100%!important}
  body.v106-visual-final .liga-form>*{min-width:0!important}
  body.v106-visual-final .liga-form input,
  body.v106-visual-final .liga-form textarea,
  body.v106-visual-final .liga-form select{width:100%!important;max-width:100%!important}

  body.v106-visual-final .jawara-hero-v106{padding:60px 0 42px!important}
  body.v106-visual-final .jawara-hero-v106 .container{
    width:calc(100% - 30px)!important;
    max-width:calc(100% - 30px)!important;
  }
  body.v106-visual-final .jawara-hero-v106 h1{
    font-size:clamp(39px,12vw,50px)!important;
    line-height:.98!important;
  }
  body.v106-visual-final .jawara-hero-v106 p{
    font-size:14px!important;
    line-height:1.62!important;
  }
  body.v106-visual-final .jawara-pills-v106{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  body.v106-visual-final .jawara-pills-v106 span{
    width:100%!important;
    min-width:0!important;
    text-align:center!important;
  }
  body.v106-visual-final .jawara-summary-v106,
  body.v106-visual-final .jawara-grid-v106{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.v106-visual-final .jawara-wayang-v106{opacity:.11!important}

  body.v106-story-visual .panggung-hf12-hero{padding:58px 0 38px!important}
  body.v106-story-visual .panggung-hf12-hero h1{
    font-size:clamp(40px,11vw,48px)!important;
    line-height:1!important;
  }
  body.v106-story-visual .panggung-proof{width:100%!important}
  body.v106-story-visual .panggung-rule{width:100%!important}
  body.v106-story-visual .panggung-story-main{padding:22px!important}
  body.v106-story-visual .ca-public-section-head{
    min-width:0!important;
    max-width:100%!important;
  }
  body.v106-story-visual .ca-public-section-head .btn{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
  }

  body.v106-story-visual .lg-promo-experience{
    width:100%!important;
    max-width:100%!important;
    padding:20px!important;
    border-radius:18px!important;
  }
  body.v106-story-visual .lg-promo-copy h2{
    font-size:clamp(29px,9vw,38px)!important;
    line-height:1.05!important;
  }
  body.v106-story-visual .lg-promo-proof{
    grid-template-columns:1fr!important;
    width:100%!important;
  }
}

/* At very narrow widths, prefer vertical CTAs over horizontal clipping. */
@media(max-width:430px){
  body.v106-visual-final .path-gateway-actions,
  body.v106-visual-final .path-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  body.v106-visual-final .path-gateway-actions a,
  body.v106-visual-final .path-actions a{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
  body.v106-visual-final .jawara-pills-v106{grid-template-columns:1fr!important}
}