:root, :before, :after{
  --bg-2:#130D0F;  
  --border-color:255 255 255;
  --border-opacity:8%;
  --color-1:#BFBFC2; 
  --color-2:#FFFFFF;
  --color-3:#EABD5E; 
  --color-4:#c78957;
  --color-fb:#1877f2;
  --color-tw:#FFFFFF;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-2);
  --rounded-3:var(--size-3);
  --hover-opacity:55%;
  --transition-default:all 0.34s;
  --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);
}



body, html{color:var(--color-1);}
html{background-color:var(--bg-2);}
a, .btn, button{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-2); fill:var(--color-2);}
a:hover, button:hover{color:var(--color-3); fill:var(--color-3);}
.btn, a.btn, button.btn{background-color:var(--color-3); color:var(--bg-1); fill:var(--bg-1); border-radius:var(--rounded-3);}
.btn:hover, a.btn:hover, button.btn:hover, #btt:hover, #btt:focus{filter:grayscale(1); color:var(--bg-2); fill:var(--bg-2);}
#btt{position:fixed; bottom:calc(var(--size-6) * 2); right:0; cursor:pointer; z-index:calc(var(--max-zindex) - 10000); 
width:var(--size-5); height:var(--size-5); background-color:var(--color-3); fill:var(--bg-2);
border-top-left-radius:var(--rounded-2); border-bottom-left-radius:var(--rounded-2);}



a.flex_ori:hover{opacity:var(--hover-opacity);}
.flex_ori > img{transition:all 300ms;}
.flex_ori > img.lazyloaded, .flex_ori > iframe.lazyloaded{opacity:1;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-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);}



.nav-box{border-color:rgb(var(--border-color) / var(--border-opacity)) !important;}
.nav-link{color:var(--color-2); fill:var(--color-2);}
.nav-link a, .nav-link button{color:inherit; fill:inherit;}
.nav-curr{color:var(--color-4); fill:var(--color-4);}
.nav-link-toggle svg{transition:var(--transition-default);}



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



.article-box{border-color:rgb(var(--border-color) / 13%);}
.article-misc > *{border-radius:var(--rounded-1);}
.article-cate{border-color:rgb(var(--border-color) / 13%);}
.article-cate:hover{border-color:var(--color-3);}
.article-time, .article-date{border-color:transparent;}
.article-thumb{border-radius:var(--rounded-2);}
.article-thumb-icon{fill:rgb(var(--border-color) / 55%);}



.trending-link{border-color:rgb(var(--border-color) / 13%);}



.detail-title, .detail-content, .detail-content a:hover{color:var(--color-2);}
.detail-content a{color:var(--color-3);}



.hero-image-info{color:var(--color-1);}
.hero-image-info:before{background-color:var(--color-1); border-radius:var(--size-3);}
.hero-image-frame img{opacity:1;}



.video-playlist, .instagram-media, .tiktok-embed iframe{border-radius:var(--rounded-2) !important; overflow:hidden;}



.search-field{background-color:transparent; border-color:rgb(var(--border-color) / 21%); color:var(--color-2); border-radius:var(--size-7);}
.search-button{background-color:var(--color-3); border-radius:0 var(--size-7) var(--size-7) 0; color:var(--bg-2) !important;}
.search-button:hover{background-color:var(--color-4);}



.share-box{background-color:rgb(var(--border-color) / 5%); border-color:rgb(var(--border-color) / var(--border-opacity)); border-radius:var(--rounded-2);}
.share-facebook{fill:var(--color-fb);}
.share-twitter{fill:var(--color-tw);}
.share-whatsapp{fill:var(--color-wa);}
.share-telegram{fill:var(--color-tg);}
.share-other{fill:var(--color-3);}
.share-link:hover{background-color:var(--color-3); fill:var(--bg-2);}



footer{background-color:var(--bg-2);}
.footer-container{width:100%; padding:var(--size-4);}
.footer-copyright{text-align:center; font-size:calc(var(--fontsize) - 2px);}



.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 1000);}



.iklan-frame{position:relative; z-index:1; background-color:rgb(var(--border-color) / var(--border-opacity));}
.iklan-frame:before{position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0; margin:auto; padding:var(--size-3); box-sizing:border-box;
display:flex; justify-content:center; align-items:center; content:'Iklan'; line-height:150%; text-align:center; color:var(--color-1);}







@media screen and (min-width:0px) and (max-width:1023px){
  .header-nav-mobile{grid-column:1/3; background-color:var(--bg-2); max-height:calc(100vh - var(--header-height)); max-height:calc(100svh - var(--header-height)); overflow-y:auto;}
  .nav-link-label, .nav-link-toggle{padding:0 var(--size-4);}
  .nav-sub .nav-link-label:before{content:'-'; margin-right:var(--size-2);}
  .sub-opennav svg{transform:rotate(-180deg);}
  
  
  
  .detail-content .hero-image-frame{border-radius:var(--rounded-2);}
}







@media screen and (min-width:1024px){
  .nav-box{position:relative; z-index:1;}
  .nav-box:hover .nav-sub{display:block;}
  .nav-box:hover .nav-link-toggle svg{transform:rotate(-180deg);}
  .nav-link{position:relative; z-index:2000;}
  .nav-link:hover .nav-link-label, .nav-link:hover .nav-link-toggle{color:var(--color-3) !important; fill:var(--color-3) !important;}
  
  .nav-sub{position:absolute; z-index:1000; top:var(--header-height); right:0; background-color:var(--bg-2);}
  .nav-sub > .nav-box{border-bottom:rgb(var(--border-color) / 5%);}
  .nav-sub .nav-link{}
  .nav-sub .nav-link-label{width:180px; justify-content:flex-end;}
  
  
  
  .hero-image-frame{border-radius:var(--rounded-2);}
}