:root, :before, :after{
  --rounded-small:8px;
  --rounded-normal:13px;
  --color-sticky:#FFFFFF; 
  --color-border:#E0E0E0;
  --color-default:#616161; 
  --color-link-primary:219deg 24% 22%; 
  --color-link-secondary:350deg 86% 41%;
  --color-link-tertiary:42deg 77% 48%;
  --color-primary-box:#FFFFFF;
  --color-secondary-box:#EBEBEB;
  --shadow-default:0 2px 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);
}

.rancak-dark, .rancak-dark :before, .rancak-dark :after{
  --color-background:#2A3344;
  --color-sticky:#323b4c; 
  --color-border:#4E576A;
  --color-default:#9EA7BC; 
  --color-link-primary:0deg 0% 100%; 
  --color-primary-box:#323b4c;
  --color-secondary-box:#212121;
}

body.freeze-scroll{overflow:hidden;}
a, .btn, #btt, .article-list-thumb-frame{transition:all 0.25s;}
a, .btn, #btt{cursor:pointer}
a{color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}
a:hover{color:hsl(var(--color-link-tertiary) / 100%); fill:hsl(var(--color-link-tertiary) / 100%);}
a:focus, .article-list-row:hover .article-list-thumb-frame, .video-list-box:hover{opacity:0.6;}
.article-list-row:hover .flex_ori > img, .video-list-box:hover > img{transform:scale(1.1);}
.btn, a.btn{border-radius:var(--rounded-small); color:#FFFFFF; fill:#FFFFFF;
background-color:hsl(var(--color-link-secondary) / 100%);}
.btn:hover, a.btn:hover{background-color:hsl(var(--color-link-tertiary) / 100%);}
#btt{position:fixed; bottom:calc(var(--body-padding) + var(--body-padding) + var(--space-4)); right:0; 
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:hsl(var(--color-link-secondary) / 100%); fill:var(--color-background);
border-top-left-radius:var(--rounded-small); border-bottom-left-radius:var(--rounded-small);}
#btt:hover, #btt:focus{background-color:hsl(var(--color-link-tertiary) / 100%);}
.header-logo:hover{opacity:0.5;}
.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.muat-lainnya-button{align-items:center; background-color:transparent; background-color:var(--color-secondary-box);
color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}
.muat-lainnya-button .svgicon{width:auto; height:16px; margin-right:var(--space-2);}
.search-field{border-color:var(--color-border); border-radius:var(--rounded-small);}
header .search-field{border-color:var(--color-border);}
.search-button{border-radius:calc(var(--rounded-small) - 2px);}
.section-title-frame{border-radius:50%; overflow:hidden;}
.share-box{background-color:var(--color-background); border-radius:var(--rounded-normal); box-shadow:var(--shadow-inset);}
.share-list-fb{fill:#1877f2;}
.share-list-tw{fill:#00acec;}
.share-list-wa{fill:#2bb240;}
.share-list-li{fill:#41c106;}
.share-list-ml{fill:#CD9654;}
.share-list-ot, .svgicon-share-ellipsis{fill:hsl(var(--color-link-primary) / 100%);}
.svgicon-share-ellipsis{filter:invert(1);}
.share-list-link:hover{color:var(--color-link-primary);}
.sticky-curr{color:hsl(var(--color-link-secondary) / 100%) !important; fill:hsl(var(--color-link-secondary) / 100%) !important;}
.rancak-dark .sticky-curr{color:hsl(var(--color-link-tertiary) / 100%) !important; fill:hsl(var(--color-link-tertiary) / 100%) !important;}
.sticky-share-fb{fill:#1877f2 !important;}
.sticky-share-tw{fill:#00acec !important;}
.sticky-share-wa{fill:#2bb240 !important;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:hsl(var(--color-link-primary) / 100%);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}

.section-title{fill:hsl(var(--color-link-secondary) / 100%);}

header{background-color:var(--color-sticky); box-shadow:var(--shadow-default);}
header .header-live{fill:hsl(var(--color-link-secondary) / 100%);}
header .header-live:hover{fill:hsl(var(--color-link-tertiary) / 100%);}

.menu-link{color:hsl(var(--color-link-primary) / 100%);}
.menu-box:hover > .menu-link{color:hsl(var(--color-link-tertiary) / 100%);}

.menu-kanal{background-color:var(--color-secondary-box);}
.menu-kanal .menu-link{color:hsl(var(--color-link-primary) / 100%) !important; border-color:var(--color-border);}
.menu-kanal .menu-link:hover{color:hsl(var(--color-link-tertiary) / 100%) !important;}

.article-list-row{color:hsl(var(--color-link-primary) / 100%);}
.article-list-row:hover{color:hsl(var(--color-link-tertiary) / 100%);}
.article-list-thumb-frame{border-radius:var(--rounded-normal);}
.article-list-kanal, .article-list-date{color:var(--color-default);}
.article-list-kanal{border-color:var(--color-border);}
.article-list-thumb-frame .video-icon .svgicon{fill:hsl(var(--color-link-secondary) / 100%);}
.article-author{fill:hsl(var(--color-link-primary) / 100%);}

.pagination{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3);}
.pagination-button{border-radius:var(--space-2) !important; padding:4px 16px !important;}
a.pagination-button{color:var(--color-background) !important;}
div.pagination-button{background-color:var(--color-background) !important; color:var(--color-default); border:1px solid var(--color-border); 
cursor:default !important;}

.popular-tag .article-list-row{--thumb-size:auto;}
.popular-tag .tag-title{justify-content:flex-start;}
.popular-tag .tag-number{color:hsl(var(--color-link-primary) / 34%); font-size:calc(var(--title-fontsize) + 8px);}

.video-list-box{border-radius:var(--rounded-normal); border-color:var(--color-border); overflow:hidden;}

.widget-sidebar-container{background-color:var(--color-secondary-box); border-radius:var(--rounded-normal); overflow:hidden;}
.widget-sidebar-more{display:flex; justify-content:space-between; align-items:center; font-size:18px; padding:var(--space-3);}
.widget-note{margin-top:var(--space-2); font-size:12px;}

.wac-thumb:before{padding-top:56.25%;}
.wac-info{padding:0 var(--space-3); margin-top:var(--space-3); line-height:140%; font-size:16px; color:hsl(var(--color-link-primary) / 100%);
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}

.widget-program-container{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); grid-gap:var(--space-1); padding:var(--space-1);}
.widget-program-container .widget-sidebar-more{grid-column:1/3;}

.schedule-label, .schedule-header{background-color:var(--color-border); 
color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}
.schedule-label{border-color:hsl(var(--color-link-primary) / 10%);}
.schedule-link{border-color:var(--color-border); color:hsl(var(--color-link-primary) / 100%);}
.schedule-time{color:hsl(var(--color-link-primary) / 70%);}
.schedule-curr{color:hsl(var(--color-link-secondary) / 100%);}
.rancak-dark .schedule-curr{color:hsl(var(--color-link-tertiary) / 100%);}
.rancak-dark .schedule-curr:hover{color:hsl(var(--color-link-primary) / 100%);}
.schedule-curr .schedule-time{color:inherit;}

.watch-video{background-color:var(--color-primary-box);}
.watch-video-info{color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}
.watch-video-share{transition:all 0.25s;}
.watch-video-share:hover{fill:hsl(var(--color-link-tertiary) / 100%);}

.popup-play-video, .ppv-container, .ppv-overlay{top:0; left:0; width:100%; height:100%;}
.popup-play-video{position:fixed; z-index:calc(var(--max-zindex) - 3500); background-color:rgba(0,0,0,0.89);}
.ppv-overlay{position:absolute; z-index:1;}
.ppv-container{position:absolute;}
.ppv-container > span{width:100%; max-width:720px; position:relative; z-index:2;}
.ppv-box{position:relative;}
.ppv-box:before{content:''; display:block; padding-top:56.25%;}
.ppv-box iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.ppv-close{margin-top:var(--space-3);}

.rancak-dark .widget-schedule-container{background-color:var(--color-primary-box);}

.breadcrumb, .breadcrumb-link:not(:first-child){border-color:var(--color-border);}
.breadcrumb-curr{color:hsl(var(--color-link-secondary) / 100%);}
.rancak-dark .breadcrumb-curr{color:hsl(var(--color-link-tertiary) / 100%);}
.rancak-dark .breadcrumb-curr:hover{color:hsl(var(--color-link-primary) / 100%);}

.article-title{color:hsl(var(--color-link-primary) / 100%);}
.content-article-detail{color:hsl(var(--color-link-primary) / 100%);}
.content-article-detail a{color:hsl(var(--color-link-secondary) / 100%);}
.content-article-detail a:hover{color:hsl(var(--color-link-primary) / 100%) !important;}
.rancak-dark .content-article-detail a{color:hsl(var(--color-link-tertiary) / 100%);}
.content-article-summary{font-weight:bold; font-style:italic;}

.embedsocmed-nonvideo{display:flex; justify-content:center;}
.embedsocmed-nonvideo > *{width:100%; max-width:377px;}
.embedsocmed-video{position:relative;}
.embedsocmed-video:before{content:''; display:block; padding-top:56.25%;}
.embedsocmed-video > *{position:absolute; top:0; left:0; width:100%; height:100%;}

.article-related{background-color:hsl(var(--color-link-secondary) / 5%); padding:var(--space-4); border-radius:var(--rounded-normal); overflow:hidden;}
.article-related-label{color:hsl(var(--color-link-primary) / 100%); font-weight:bold; font-size:18px; margin-bottom:var(--space-1);}
.article-related-link{--icon-size:13px; display:grid; grid-gap:var(--space-3); grid-template-columns:var(--icon-size) 1fr; line-height:150%;
color:hsl(var(--color-link-secondary) / 100%); fill:hsl(var(--color-link-secondary) / 100%); padding:var(--space-1) 0; font-weight:normal;}
.article-related-link .svgicon{width:var(--icon-size); height:auto; position:relative; top:3px;}
.rancak-dark .article-related{background-color:hsl(var(--color-link-tertiary) / 10%);}
.rancak-dark .article-related-link{color:hsl(var(--color-link-tertiary) / 100%); fill:hsl(var(--color-link-tertiary) / 100%);}
.rancak-dark .article-related-link:hover{color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}

.tag-related-container{display:flex; flex-wrap:wrap;}
a.tag-related-link{margin-top:var(--space-3); margin-right:var(--space-3); border-radius:var(--rounded-normal); 
background-color:var(--color-secondary-box); color:hsl(var(--color-link-primary) / 100%);}

.share-article{border-top:1px solid var(--color-border); margin-top:var(--space-1); padding-top:var(--space-1);}
.share-article-container{display:grid; grid-template-columns:1fr auto; align-items:center;}
.share-article-container .share-list-link{width:36px; height:auto; padding:var(--space-1) 0; justify-content:flex-end;}
.share-article-container .share-list-link:last-child{margin-right:0;}
.share-article-container .share-list-link .svgicon{width:auto; height:75%;}

.recommended-video-container{position:relative; overflow:hidden; background-color:#000000;}
.recommended-video-container:before{content:''; display:block; padding-top:56.25%;}
.rvc-video-dailymotion{position:absolute; top:0; left:0; width:100%; height:100%;}
#dailymotion-pip-large-viewport{bottom:140px !important;}
#dailymotion-pip-small-viewport{top:calc(var(--body-padding) + var(--topbar-height)) !important; position:absolute !important;}
 
.popup-copied{position:fixed; z-index:var(--max-zindex); top:calc(var(--body-padding) + var(--space-3)); left:0; width:100%; text-align:center;}
.popup-copied-alert{display:inline-flex; margin:0 auto; padding:var(--space-3) var(--space-4); background-color:var(--color-secondary-box);
border:1px solid var(--color-border); border-radius:var(--rounded-small); box-shadow:var(--shadow-default); font-size:16px;}
 
.slotiklan:before{content:'IKLAN'; position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0; margin:auto; background-color:#EEE;
display:flex; justify-content:center; align-items:center;}
.slotiklan-300x250:before{width:300px; height:250px;}
.slotiklan-320x50:before, .slotiklan-320x100:before{width:320px; height:50px;}
.slotiklan-728x90:before, .slotiklan-topdesktop:before{width:728px; height:90px;}
.slotiklan-970x200:before{width:970px; height:200px;}
.slotiklan-160x600:before{width:160px; height:600px;}

.sticky-bottom-close{fill:var(--color-background); background-color:#000;}

.footer-all{margin-top:var(--space-4);}

.datepicker{z-index:calc(var(--max-zindex) - 1000);}



@media screen and (min-width:0px) and (max-width:1023px){
  .menu-kanal{box-shadow:var(--shadow-default);}

  .menu-bottom, .float-menu{background-color:var(--color-sticky); box-shadow:var(--shadow-default);}
  .menu-bottom .sticky-link{color:hsl(var(--color-link-primary) / 100%); fill:hsl(var(--color-link-primary) / 100%);}
  .menu-bottom .bottom-button{border-radius:var(--rounded-normal);}
  .menu-bottom .sticky-curr .bottom-button,
  .menu-bottom .show-sticky .bottom-button{color:var(--color-sticky) !important; fill:var(--color-sticky) !important;}
  .menu-bottom .sticky-curr .bottom-button{background-color:hsl(var(--color-link-secondary) / 100%);}
  .menu-bottom .show-sticky .bottom-button{background-color:hsl(var(--color-link-tertiary) / 100%);}

  .float-bottom{position:fixed; top:var(--body-padding); width:100%;}

  .float-search{z-index:calc(var(--max-zindex) - 4000); padding:var(--space-3); top:auto; bottom:var(--body-padding);}
  .float-search:before{content:''; position:absolute; z-index:1; bottom:0; left:0; width:100%; height:100%; 
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
  .rancak-dark .float-search:before{background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}

  .float-menu{z-index:calc(var(--max-zindex) - 3000); height:calc(100vh - (var(--body-padding) * 2));
  overflow-y:auto;}
  .float-menu .menu-list{display:block; position:relative;}
  .float-menu .menu-box{border-bottom:1px solid var(--color-border);}
  .float-menu .menu-link{padding:var(--space-3); height:48px; display:inline-flex; justify-content:flex-start;}
  .float-menu .menu-full{width:100%;}
  .float-menu .menu-toggle{position:absolute; z-index:3; top:0; right:0; width:100%; justify-content:flex-end;}
  .float-menu .menu-toggle .svgicon{width:auto; height:16px; position:relative; transition:all 0.25s;}
  .float-menu .menu-toggle-open .svgicon{transform:rotate(-180deg);}
  .float-menu .menu-toggle-open > .menu-link,
  .float-menu .menu-sub .menu-link:before{color:hsl(var(--color-link-tertiary) / 100%);}
  .float-menu .menu-sub{margin-top:calc(var(--space-1) * -1);}
  .float-menu .menu-sub .menu-link{width:100%; justify-content:flex-start;}
  .float-menu .menu-sub .menu-link:before{content:'-'; display:inline-block; padding-right:var(--space-2);}
  
  .content-article-detail .media-article-frame{border-radius:var(--rounded-normal); overflow:hidden;}
  
  .video-recommended .section-title{margin-left:var(--space-3); margin-right:var(--space-3);}
  
  @media screen and (orientation:landscape){
    .popup-play-video{z-index:var(--max-zindex);}
	.ppv-close{display:none;}
  }
  
  .sticky-bottom{background-color:#000;}
}



@media screen and (min-width:1024px){
  header .menu-box:hover .menu-sub{display:block;}
  header .menu-sub{position:absolute; top:calc(var(--body-padding) - 1px); left:0; z-index:1; width:160px;
  background-color:var(--color-sticky); box-shadow:0 10px 10px rgb(0 0 0 / 25%);}
  header .menu-sub .menu-link{padding:0 var(--space-3); justify-content:flex-start; border-top:1px dashed var(--color-border);}
  header .menu-sub .menu-link:first-child{border-top:0;}
  
  .menu-kanal{border-radius:var(--rounded-normal);}
  
  .main-container .column-big .article-list-thumb-frame:before{}
  .main-container .column-big .article-list-big{color:#FFFFFF;}
  .main-container .column-big .article-list-big .article-list-kanal, 
  .main-container .column-big .article-list-big .article-list-date{color:#E0E0E0;}
  .main-container .column-big .article-list-big .article-list-thumb-frame:after{content:''; display:block;
  position:absolute; z-index:3; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom, hsl(0deg 0% 0% / 0%) 50%, hsl(0deg 0% 0% / 100%) 100%);}
  
  .popular-tag .tag-number{font-size:calc(var(--title-fontsize) + 14px);}
  
  .watch-video{border-radius:var(--rounded-normal); overflow:hidden;}
  .watch-video-info{position:relative;}
  .watch-video-sharelist{position:absolute; bottom:0; left:0; width:calc(100% - 62px); height:100%;
  display:none; background-color:var(--color-primary-box);}
  .wvs-open{fill:hsl(var(--color-link-secondary) / 100%);}
  .wvs-show{display:flex !important;}
  .wvs-label{margin-right:var(--space-1);}
  
  .media-article-frame{border-radius:var(--rounded-normal); overflow:hidden;}
  
  .recommended-video-container{border-radius:var(--rounded-normal);}

  .footer-iklanbottomdesktop{padding-bottom:110px;}
  
  @supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
    .popup-play-video{-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); background-color:rgba(0,0,0,0.55);}
  }
}