:root, :before, :after{
  --bg-2:#FFFFFF;  
  --bg-footer:#2F2F2F;
  --border-color:0 0 0;
  --border-opacity:8%;
  --color-1:#5F788A; 
  --color-2:#2F4858;
  --color-3:#75B11E; 
  --color-4:#128799;
  --color-fb:#1877f2;
  --color-tw:#000000;
  --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-footer);}
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{filter:grayscale(1);}
#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);}
#btt:hover, #btt:focus{background-color:var(--color-4);}



a.flex_ori:hover{opacity:var(--hover-opacity);}
.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-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, nav, .search-button{background-color:var(--bg-1);}
.logo:hover{opacity:var(--hover-opacity);}
.search-field{border-color:rgb(var(--border-color) / var(--border-opacity)); background-color:transparent;}
.search-field::placeholder{color:rgb(var(--border-color) / 34%);}
.search-button{fill:var(--color-3);}
.search-button:hover{fill:var(--color-4);}



nav{border-color:rgb(var(--border-color) / var(--border-opacity));}
.nav-link{border-color:transparent; color:var(--color-2);}
.nav-link:hover{color:var(--color-4); fill:var(--color-4);}
.nav-curr{color:var(--color-3) !important; fill:var(--color-3) !important; border-color:var(--color-3) !important;}



.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-kanal, .article-ad{border-color:var(--color-2);}
.article-kanal:hover{border-color:var(--color-3);}
.article-time, .article-date{border-color:transparent;}
.article-ad{background-color:var(--color-2); color:var(--bg-2);}
.article-thumb{border-radius:var(--rounded-2);}



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



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



.hero-image-info{color:var(--color-1);}
.hero-image-frame img{opacity:1;}



.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.footer-all{background-color:var(--bg-footer); padding:var(--size-4);}



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







@media screen and (min-width:0px) and (max-width:1023px){
  .nav-link{border-color:rgb(var(--border-color) / var(--border-opacity));}
  
  
  
  .detail-content .hero-image-frame{border-radius:var(--rounded-2);}
}







@media screen and (min-width:1024px){
  .nav-link{border-color:transparent;}
  
  
  
  .hero-image-frame{border-radius:var(--rounded-2);}
}