:root, :before, :after{
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-3:#757575;
  --color-4:#231F20;
  --color-5:#9A1D21;
  --color-6:#FFFFFF;
  --color-7:#000000;
  --color-8:#EC1C4C;
  --color-9:#E0E0E0;
  --color-fb:#1877f2;
  --color-ig:#C13584;
  --color-tw:#00acec;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --color-tk:#FF0050;
  --color-yt:#FF0000;
  --color-ml:#FE8425;
  --default-transition:all 0.34s;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-3);
  --rounded-3:var(--size-5);
  --hover-opacity:0.34;
  --shadow-default:5px 5px 10px rgb(0 0 0 / 25%);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset -2px -2px 4px rgba(255,255,255,.2), inset 2px 2px 12px rgba(0,0,0,.2);
}



body, html{color:var(--color-3);}
a, .btn, button{transition:var(--default-transition); cursor:pointer}
a, button{color:var(--color-1); fill:var(--color-1);}
a:hover, button:hover{color:var(--color-4); fill:var(--color-4);}
.btn, a.btn, button.btn, input.btn{background-color:var(--color-4); color:var(--color-6); fill:var(--color-6); border-radius:var(--rounded-3);}
.btn:hover, a.btn:hover, button.btn:hover, input.btn:hover{background-color:var(--color-5); color:var(--color-6); fill:var(--color-6);}
#btt{position:fixed; bottom:var(--size-6); right:var(--size-2); cursor:pointer; transition:var(--default-transition);
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:var(--color-4); fill:var(--color-6); border-radius:var(--rounded-2);}
#btt:hover, #btt:focus{background-color:var(--color-5); border-radius:50%;}



.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.flex_ori-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-4);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



header{background-color:var(--color-6); box-shadow:var(--shadow-default); transition:var(--default-transition);}
.header-link:hover{color:var(--color-5); fill:var(--color-5);}
.header-curr{color:#FF9900 !important; fill:#FF9900 !important; cursor:default !important;}
.header-curr span:after{content:inherit !important;}
.header-logo:hover{opacity:var(--hover-opacity);}
.live-blink{background-color:var(--color-8); border-radius:50%; animation:blinking 1s linear infinite alternate;}
.live-blink + span{color:var(--color-8);}
@-webkit-keyframes blinking{0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;}}
@keyframes blinking{0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;}}

.header-transparent header{--color-5:var(--color-8); background-color:transparent; box-shadow:0 0 0;}
.header-transparent .header-link{color:var(--color-6); fill:var(--color-6);}
.header-transparent .header-link:hover{color:var(--color-8); fill:var(--color-8);}
.header-transparent .header-logo .logo-black{fill:var(--color-6);}



.section-container{background-color:var(--color-2);}
.section-container b{color:var(--color-4); font-weight:900;}
.section-container .tns-outer button[aria-controls]{background-color:rgb(var(--color-border-dark) / 34%); border-radius:var(--size-3);}
.section-container .tns-outer button[aria-controls]:hover{background-color:var(--color-8);}
.section-container .tns-outer button.tns-nav-active{background-color:var(--color-4);}



.section-title-label, .section-title-tag{color:var(--color-4);}
.section-title-label span{color:var(--color-5);}
.section-title-tag:hover{color:var(--color-5);}



.section-dark, .section-dark .section-title-label, .section-dark .section-title-tag{color:var(--color-9);}
.section-dark .section-title-label span{color:var(--color-8);}
.section-dark .rancak-bg{background-color:var(--color-4);}

.section-dark b{color:var(--color-6);}
.section-dark .tns-outer button[aria-controls]{background-color:rgb(var(--color-border-light) / 34%);}
.section-dark .tns-outer button.tns-nav-active{background-color:var(--color-6);}



.ribbon-bg{background-image:url("../img/program-phone-bg.png"); background-repeat:no-repeat;}






.section-welcome{padding-bottom:0;}
.section-welcome .tns-outer{padding-bottom:0 !important;}
.section-welcome .tns-nav{display:flex; justify-content:center; bottom:var(--size-5);}
.welcome-slide{position:relative; z-index:2000;}
.welcome-content{display:grid !important; grid-gap:var(--size-5) !important;}
.welcome-info{display:grid; grid-gap:var(--size-3); grid-auto-rows:min-content; padding-bottom:var(--size-7); color:var(--color-6);}
.welcome-title, .welcome-director{font-weight:900;}
.welcome-title{font-size:30px; line-height:120%;}
.welcome-frame{background:url("../img/welcome-profile-bg.svg") no-repeat; background-size:100% auto;}
.welcome-frame:before{padding-top:100%;}
.welcome-desc{line-height:150%;}
.welcome-frame{width:100%; max-width:500px; margin:0 auto;}



.video-frame{width:100%; background-color:var(--color-4); border-radius:var(--rounded-2); overflow:hidden;}
.video-frame:before{padding-top:56.25%;}
.video-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%;}



.section-event .event-bg{opacity:0.55; filter:blur(3px);}
.section-event .section-title-desc{color:var(--color-4);}
.event-list{display:grid; grid-gap:var(--size-4); grid-template-columns:repeat(auto-fill, minmax(210px,1fr));}
.event-box{position:relative; padding:var(--size-4); padding-bottom:var(--size-7); border-radius:var(--rounded-2); background-color:var(--color-6); box-shadow:var(--shadow-default);}
.event-box *{text-align:center;}
.event-frame{width:90%; max-width:144px; border-radius:50%;}
.event-frame:before{padding-top:100%;}
.event-title{margin:var(--size-4) 0 var(--size-3); font-size:var(--title-fontsize); font-weight:900;}
.event-desc{line-height:140%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; color:var(--color-3);}
.event-more{position:absolute; bottom:0; left:0; width:100%; padding:var(--size-4);}
.event-button{background-color:var(--color-5);}

.event-box:nth-child(odd){background-color:var(--color-5); color:var(--color-2);}
.event-box:nth-child(odd) .event-desc{color:rgb(var(--color-border-light) / 77%);}
.event-box:nth-child(odd) .event-button{background-color:var(--color-6); color:var(--color-4);}



.section-countdown{padding:0;}
.section-countdown .rancak-bg{background-color:var(--color-7);}

.live-streaming{position:relative; z-index:1000;}
.live-streaming:before{content:''; display:block; padding-top:56.25%;}
.live-streaming iframe{position:absolute; top:0; left:0; width:100%; height:100%;}

.countdown-overlay{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2000;
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background-color:rgb(var(--color-border-dark) / 64%);}
.countdown-intro, .countdown-label{text-align:center; color:var(--color-2); font-size:var(--title-fontsize);}
.countdown-intro{margin-bottom:var(--size-4); font-weight:900;}
.countdown-container{display:grid; grid-gap:var(--size-3); grid-template-columns:repeat(4,1fr); max-width:640px; margin:0 auto;}
.countdown-number{position:relative;}
.countdown-number b{font-weight:900; font-size:var(--size-6); letter-spacing:2px;}
.countdown-number-frame{color:var(--color-6);}
.countdown-label{margin-bottom:var(--size-2);}



.video-note{display:flex; align-items:center; justify-content:flex-end;}
.video-frame{z-index:2000;}
.video-note-label{padding-bottom:3px;}
.video-note-icon{fill:var(--color-3);}
.video-note-icon .svgicon-clickhere{width:auto; height:16px; margin-left:var(--size-2); position:relative; top:var(--size-2);}



.section-program{overflow:hidden;}
.program-content{--img-width:233px; --box-space:var(--size-5);}
.program-content .section-title *{text-align:left;}
.program-content .flex_ori{width:100%; max-width:var(--img-width);}
.program-preview{position:relative;}
.program-ribbon{position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; opacity:0.55;}
.program-ribbon img{max-width:none; height:100%;}
.program-frame{position:relative; z-index:2000;}
.program-frame:before{padding-top:200.95%;}
.program-info{padding:var(--size-3) 0; display:flex; flex-wrap:wrap; align-items:center; position:relative; z-index:3000;}
.pib-title{font-weight:900; margin-bottom:var(--size-3); color:var(--color-4);}
.pib-title span{color:var(--color-8);}
.pib-desc{line-height:140%;}
.pib-desc p{margin-bottom:var(--size-3);}
.pib-desc ul, .pib-desc ol{padding-left:var(--size-4); display:grid; grid-gap:var(--size-2);}
.pib-desc ul{list-style:disc;}
.pib-desc ol{list-style:decimal;}
.program-prize img{position:static;}
.program-gateway{display:flex; margin-top:var(--size-4); width:100%;}
a.program-gateway-button{margin:var(--size-2); margin-left:0; background-color:var(--color-8);}

.section-dark .pib-title{color:var(--color-6);}

.section-goyang .rancak-bg, .section-greetings .rancak-bg{background-color:var(--color-5);}
.section-goyang{padding-bottom:0;}
.section-goyang .program-prize{align-items:flex-end;}



.section-spesial{padding:var(--size-5) 0 0;}
.section-spesial .width-max{max-width:1920px;}
.section-spesial .spl-box:before{padding-top:43.29%;}

.section-spesial .tns-outer{padding-bottom:0 !important;}
.section-spesial .tns-controls button{z-index:1000; width:var(--size-5) !important; height:100% !important; background-color:transparent !important; 
margin:0 !important; background-size:55%;}
.section-spesial .tns-controls button[data-controls="prev"]{left:0; background-image:url("../img/icon/left-square.svg");}
.section-spesial .tns-controls button[data-controls="next"]{right:0; background-image:url("../img/icon/right-square.svg");}



.srg-container{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); grid-gap:var(--size-3);}
.srg-box .instagram-media, .srg-box .tiktok-embed{min-width:300px !important; margin:0 !important; width:100%;}
.srg-more{margin-top:var(--size-4);}
.srg-more-button{margin:var(--size-1);}



.swc-container{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); grid-gap:var(--size-3);}
.swc-box{position:relative;}
.swc-box:hover{color:var(--color-8);}
.swc-number{position:absolute; right:var(--size-1); top:var(--size-1); z-index:1000; width:55px; height:55px; display:flex; justify-content:center; align-items:center; overflow:unset;}
.swc-number > span{position:relative; z-index:2000; color:var(--color-4); font-weight:900;}
.swc-number img{filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.4));}
.swc-ss{border-radius:var(--rounded-2); overflow:hidden;}
.swc-ss:before{padding-top:177.77%;}
.swc-info{padding:var(--size-4); padding-top:var(--size-2); font-size:12px;}
.swc-info *{text-align:center;}
.swc-account{color:var(--color-3); margin-top:3px;}



.app-market img{position:static;}



.rancak-popup, .rancak-popup > *{top:0; right:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 2000);}
.rancak-popup > *{position:absolute;}
.rancak-popup > .rancak-popup-overlay{z-index:1; background-color:rgb(var(--color-border-dark) / 55%);}
.rancak-popup > .rancak-popup-close{z-index:1000; width:var(--size-6); height:var(--size-6); top:0; right:0; padding:var(--size-3); fill:var(--color-6);}
.rancak-popup > .rancak-popup-close:hover{fill:var(--color-5);}
.rancak-popup > .rancak-popup-close .svgicon{width:100%; height:auto;}
.rancak-popup > .rancak-popup-container{padding:var(--size-5);}
.rancak-popup-box{position:relative; z-index:2000; padding:var(--size-4); max-width:610px;
background-color:var(--color-6); border-radius:var(--rounded-2);}

.popup-share-box{max-width:377px;}
.popup-share-list{--share-button:34px; display:flex; margin:var(--size-4) 0;}
.popup-share-link{margin-right:var(--size-3);}
.popup-share-link:hover{fill:var(--color-5);}
.popup-share-link .svgicon{width:auto; height:var(--share-button);}
.popup-share-facebook{fill:var(--color-fb);}
.popup-share-twitter{fill:var(--color-tw);}
.popup-share-whatsapp{fill:var(--color-wa);}
.popup-share-telegram{fill:var(--color-tg);}
.popup-share-copyurl{--button-width:96px; position:relative; border-radius:var(--rounded-2); overflow:hidden;}
.psc-field{width:100%; padding:var(--size-3) var(--size-4); padding-right:calc(var(--button-width) + var(--size-2)); 
border:1px solid rgb(var(--color-border-dark) / 8%); border-radius:var(--rounded-2);
background-color:transparent; color:var(--color-4); overflow:hidden;}
.psc-button{position:absolute; z-index:1000; top:0; right:0; width:var(--button-width); height:100%; background-color:var(--color-5); color:var(--color-6);
display:flex; justify-content:center; align-items:center;}
.psc-button:hover{background-color:var(--color-4); color:var(--color-6);}
.popup-share-note{margin-top:var(--size-2); font-size:12px;}





@media screen and (min-width:0px) and (max-width:567px){
  .countdown-content .section-title{margin-bottom:var(--size-4);}
  .countdown-content .section-title-label{font-size:var(--title-fontsize);}
  .countdown-content .countdown-intro, .countdown-content .countdown-label{font-size:var(--title-default);}
  .countdown-content .countdown-intro{margin-bottom:var(--size-1);}
  .countdown-content .countdown-number b{font-size:var(--size-5);}
}





@media screen and (min-width:0px) and (max-width:1023px){
  .htm-line{background-color:var(--color-1); border-radius:var(--rounded-2); transition:var(--default-transition);}
  .header-togglemenu.show-sticky .htm-line{--line-position:calc((var(--hamburger-size) - var(--hamburder-line-height)) / 2);}
  .header-togglemenu.show-sticky .htm-line-1{transform:rotate(45deg);}
  .header-togglemenu.show-sticky .htm-line-2{width:0; opacity:0;}
  .header-togglemenu.show-sticky .htm-line-3{transform:rotate(135deg);}
  
  .header-transparent .htm-line{background-color:var(--color-6);}
  .header-transparent .main-nav .header-link{color:var(--color-1); fill:var(--color-1);}

  .main-nav{top:calc(var(--size-6) + var(--size-1)); right:var(--size-1); max-width:210px; height:auto; max-height:calc(100vh - var(--size-7));
  background-color:var(--color-6); border-radius:var(--rounded-2); overflow-y:auto;}
  .main-nav .header-link{position:relative; padding:var(--size-4); border-top:1px solid rgb(var(--color-border-dark) / 8%); justify-content:flex-end;}
  
  
  
  .ribbon-bg{background-position:center bottom;}
  
  
  
  .countdown-content{padding:var(--size-4);}
  @media screen and (orientation:landscape){
    .live-streaming:before{padding-top:46%;}
  }
  
  
  
  .video-note{padding-right:80px;}
  .video-note-label{font-size:12px;}
  
  
  
  .program-frame{margin:0 auto;}
  .program-info{margin:var(--box-space) 0;}
  .pib-title{font-size:24px;}
  .pib-title sup{font-size:12px;}
  
  .section-goyang .program-info{margin-bottom:0;}
  
  
  
  .footer-all{padding-bottom:var(--size-4);}
}




@media screen and (min-width:574px) and (max-width:1023px){
  .video-note{padding-right:108px;}
}





@media screen and (min-width:1024px){
  .header-transparent .main-nav .header-link > span:after{background-color:var(--color-6);}
  .header-transparent .main-nav .header-link:hover > span:after{background-color:var(--color-8);}

  .main-nav, .main-nav .header-link{height:var(--size-6) !important;}
  .main-nav .header-link > span:after{border-radius:var(--rounded-3); background-color:var(--color-5); transition:var(--default-transition);}
  .main-nav .header-link:hover > span:after{opacity:1;}
  
  
  
  .ribbon-bg{background-position:right bottom;}
  
  
  
  .event-list{display:flex; justify-content:center;}
  .event-box{width:100%; max-width:233px;}
  .event-desc, .event-button{transition:var(--default-transition);}
  .event-box:hover{background-color:var(--color-4); color:var(--color-2); transform:scale(1.1); box-shadow:10px 10px 20px rgb(var(--color-border-dark) / 25%);}
  .event-box:hover .event-desc{color:rgb(var(--color-border-light) / 77%);}
  .event-box:hover .event-button{background-color:var(--color-8); color:var(--color-6);}
  .event-box .event-button:hover{border-radius:var(--rounded-1);}
  
  
  
  .live-streaming:before{padding-top:46%;}
  
  
  
  .video-note{padding-right:42px;}
  
  
  
  .program-content{display:grid; grid-gap:var(--box-space); grid-template-columns:var(--img-width) 1fr var(--img-width);}
  .program-info{overflow:hidden;}
  .pib-title{font-size:36px;}
  .pib-title sup{font-size:18px;}
  
  .section-goyang .program-content{--img-width:377px; grid-template-columns:233px 1fr var(--img-width);}
  .program-content .flex_ori{max-width:var(--img-width);}
  .srg-more{display:flex; justify-content:center;}
  
  
  .section-ekspresi .program-content > div{grid-row:1/2;}
  .section-ekspresi .program-preview{grid-column:3/4;}
  .section-ekspresi .program-prize{grid-column:1/2;}
  
  
  
  .section-spesial .tns-controls button{width:var(--size-7) !important;}
  .section-spesial .tns-controls button:hover{opacity:var(--hover-opacity);}
  
  
  
  .swc-container{grid-template-columns:repeat(5,1fr);}
  .swc-container:hover .swc-box{opacity:var(--hover-opacity);}
  .swc-container:hover .swc-box:hover, .swc-container .swc-box:hover{opacity:1;}
}