:root, :before, :after{
  --bg-2:#FFFFFF; 
  --bg-3:#F0F0F0;
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-text-1:#757575; 
  --color-text-2:#212121; 
  --color-text-3:#CA000E;
  --color-text-4:#000000;
  --color-text-5:#EB1D25;
  --color-text-6:#616161;
  --color-fb:#1877f2;
  --color-ig:#C13584;
  --color-tw:#00acec;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --color-tk:#FF0050;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-3);
  --hover-opacity:0.55;
  --transition-default:all 0.34s;
  --shadow-default:0 8px 21px 0 rgba(0,0,0,.08);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset 1px 1px 5px rgba(0,0,0,.8);
}



body, html{color:var(--color-text-1);}
html{background-color:var(--bg-3);}
body.freeze-scroll{overflow:hidden;}
a, .btn, button, #btt{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-text-2); fill:var(--color-text-2);}
a:hover, button:hover{color:var(--color-text-5); fill:var(--color-text-5);}
.btn, a.btn, button.btn{background-color:var(--color-text-3); color:var(--bg-2); fill:var(--bg-2);}
.btn:hover, a.btn:hover, button.btn:hover{background-color:var(--color-text-2);}
#btt{position:fixed; bottom:calc(var(--size-7) + var(--size-6)); right:var(--size-4); cursor:pointer; z-index:calc(var(--max-zindex) - 10000); fill:var(--color-text-1);}
#btt .svgicon{width:48px; height:auto;}
#btt:hover, #btt:focus{fill:var(--color-text-5);}
.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-text-2);}
@-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(--bg-2); box-shadow:var(--shadow-default);}
.header-logo:hover{opacity:var(--hover-opacity);}



.menu-link:hover{color:var(--color-text-5); fill:var(--color-text-5);}
.menu-curr{color:var(--color-text-3) !important; fill:var(--color-text-3) !important;}



.section-title{color:var(--color-text-1);}



.content-box, .tag-box{border-radius:var(--rounded-2); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.content-box:hover, .tag-box:hover{background-color:var(--bg-1);}
.content-thumb-frame{border-radius:var(--rounded-2);}
.content-info div{color:var(--color-text-1);}
.content-info-channel{border-color:rgb(var(--color-border-dark) / 21%);}



.article-title{color:var(--color-text-2);}

.detail-content{color:var(--color-text-6); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.detail-content a{color:var(--color-text-3);}
.detail-content a:hover, .detail-content b, .detail-content strong{color:var(--color-text-2);}
.detail-content-image{border-radius:var(--rounded-1); overflow:hidden;}



.hero-image{box-shadow:var(--shadow-default);}
.hero-info{background-color:rgb(var(--color-border-dark) / 100%); color:var(--bg-1);}
.hero-info .author-name{color:var(--bg-2);}
.hero-nav{fill:var(--bg-2);}
.hero-nav .svgicon{filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.34));}

.hero-image-nav-link{border-color:rgb(var(--color-border-dark) / 13%); border-radius:var(--rounded-2);}
.hero-image-nav-link:hover{border-color:var(--color-text-2); opacity:var(--hover-opacity);}
.hero-image-nav-curr{border-color:var(--color-text-3) !important; opacity:1 !important;}



.share-box{background-color:var(--bg-2); box-shadow:var(--shadow-default);}
.share-fb{fill:var(--color-fb);}
.share-tw{fill:var(--color-tw);}
.share-wa{fill:var(--color-wa);}
.share-lk{fill:var(--color-text-3);}
.share-button:hover{fill:var(--color-text-2);}



.pagination{display:flex; justify-content:flex-end; flex-wrap:wrap;}
.pagination-link{margin:var(--size-1); padding:var(--size-2) var(--size-3); background-color:var(--color-text-3); color:var(--bg-2); 
border:1px solid var(--color-text-3); border-radius:var(--rounded-1);}
.pagination-link:last-child{margin-right:0;}
a.pagination-link{background-color:transparent; color:var(--color-text-2); border-color:rgb(var(--color-border-dark) / 13%);}
a.pagination-link:hover{background-color:var(--color-text-2); color:var(--bg-2); border-color:var(--color-text-2);}



.next-page{display:grid; grid-gap:var(--size-1); padding:var(--size-4); color:var(--bg-2);
background-color:var(--color-text-3); border-radius:var(--size-3); box-shadow:var(--shadow-default);}
.next-page:hover{background-color:var(--color-text-2); color:var(--bg-2);}
.next-label{font-weight:normal; color:rgb(var(--color-border-light) / 89%);}
.next-title{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}



.tag-hash{border-color:rgb(var(--color-border-dark) / 8%);}
.tag-info{color:var(--color-text-1);}
.tag-info-view{border-color:rgb(var(--color-border-dark) / 13%);}

.read-alternative:before{background-color:var(--color-text-6); border-radius:var(--size-3);}

.widget-vlix{--rounded-normal:var(--size-1);}

.content-more{margin-top:var(--size-3);}
.content-more-button{border-radius:var(--size-5);}



.media-gallery{display:grid; grid-gap:var(--size-1); background-color:rgb(var(--color-border-dark) / 100%); 
border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow:hidden;}
.media-gallery-box{position:relative; color:var(--bg-2);}
.media-gallery-box:hover{color:var(--bg-1); opacity:var(--hover-opacity);}
.media-gallery-thumb{position:relative;}
.media-gallery-frame:before{padding-top:56.25%;}
.media-gallery-icon{position:absolute; z-index:3000; top:var(--size-3); left:var(--size-3); width:var(--size-5); height:var(--size-5); 
background-color:var(--bg-2); fill:var(--color-text-3); border-radius:50%; box-shadow:var(--shadow-inset); overflow:hidden;}
.media-gallery-icon .svgicon{width:auto; height:47%; position:relative; left:1px;}
.media-gallery-info, .media-gallery-info:before{position:absolute; bottom:0; left:0; width:100%;}
.media-gallery-info{z-index:1000; padding:var(--size-4); padding-top:var(--size-6); text-shadow:2px 2px 8px var(--color-text-2); display:none;}
.media-gallery-info:before{content:''; display:block; z-index:1; height:100%; 
background:linear-gradient(to bottom,rgb(var(--color-border-dark) / 0%) 0%,rgb(var(--color-border-dark) / 100%) 100%)}
.media-gallery-info-show{display:grid;}
.media-gallery-title{font-size:var(--default-fontsize); line-height:140%; position:relative; z-index:2000;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}



.footer-all{padding:var(--size-4); margin-top:var(--size-5);}



.sticky-bottom-close{background-color:var(--color-text-2); fill:var(--bg-2);}



.show-sticky{fill:#FF8469 !important;}
.rancak-popup, .rancak-popup > *{top:0; right:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:var(--max-zindex);}
.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); fill:var(--bg-2);}
.rancak-popup > .rancak-popup-close:hover{fill:var(--color-text-5);}
.rancak-popup > .rancak-popup-close .svgicon{width:auto; height:var(--size-5);}
.rancak-popup > .rancak-popup-container{padding:var(--size-6);}
.rancak-popup-box{position:relative; z-index:2000; padding:var(--size-4); max-width:610px;
background-color:var(--bg-4); border-radius:var(--rounded-1);}

.popup-copied{position:fixed; z-index:var(--max-zindex); top:calc(var(--size-6) + var(--size-2)); left:0; width:100%; text-align:center;}
.popup-copied-alert{display:inline-flex; margin:0 auto; padding:var(--size-3) var(--size-4); background-color:var(--color-text-3); color:var(--bg-2);
border-radius:var(--rounded-1); box-shadow:var(--shadow-default); font-size:16px;}

.rancak-popup .search-box{border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow:hidden;}



.popup-search, .popup-search .search-box{height:auto;}
.popup-search{position:-webkit-sticky; position:sticky; padding:var(--size-4); top:var(--size-6);}
.popup-search .search-box{position:relative; max-width:var(--site-container); margin-left:auto; margin-right:auto;}
.popup-search .search-field{width:100%;}





@media screen and (min-width:0px) and (max-width:1023px){
  .menu-main{position:-webkit-sticky; position:sticky; z-index:calc(var(--max-zindex) - 6000); top:var(--size-6);
  background-color:var(--bg-2); box-shadow:var(--shadow-default);}
  .menu-main .width-max{position:static;}
  .menu-link{justify-content:flex-start; padding:var(--size-4);}
  .menu-link:not(:last-child){border-bottom:1px dashed rgb(var(--color-border-dark) / 8%);}
  
  
  
  .content-more-button{width:100%;}
  
  
  
  .section-main-below .share-box{border-radius:var(--rounded-2);}
  
  
  
  .footer-all{padding-bottom:calc(var(--size-4) + 100px);}
  
  
  
  .iklan-giantbanner{background-color:#000;}
  .iklan-giantbanner-close{background-color:var(--color-text-5); fill:var(--bg-2);}
}





@media screen and (min-width:1024px){
  .hero-image, .detail-content{border-radius:var(--rounded-2); overflow:hidden;}
  
  
  
  .content-full-button{width:100%;}
  
  
  
  .media-gallery{grid-template-columns:repeat(2,1fr);}
  .media-gallery-box:first-child{grid-column:1/3;}
  
  
  
  .share-box{border-radius:var(--rounded-2);}
  
  
  
  .footer-all{padding-bottom:calc(var(--size-4) + 90px);}
  
  
  
  .popup-search{padding-bottom:0;}
}