:root, :before, :after{
  --bg-2:#FFFFFF;  
  --border-color:0 0 0;
  --border-opacity:5%;
  --color-1:#A2A2A6; 
  --color-2:#35343E;
  --color-4:#5a5a5f;
  --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-2);}
html{background-color:#2F2F2F;}
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-2);}



.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{background-color:var(--bg-1);}
.header-logo .color-1{fill:var(--color-3);}
.header-logo:hover{opacity:55%; filter:grayscale(100%);}
.header-logo-name{color:var(--color-3);}



menu{--menu-position:calc(var(--header-height) + var(--size-3)); max-height:calc(100vh - var(--menu-position)); max-height:calc(100svh - var(--menu-position));
top:var(--menu-position); width:100%; background-color:var(--bg-1); overflow-x:hidden; overflow-y:auto;
box-shadow:rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
menu::-webkit-scrollbar{width:var(--size-1);}
menu::-webkit-scrollbar-track, menu::-webkit-scrollbar-thumb{background:0;}
menu:hover::-webkit-scrollbar-thumb{background:rgb(var(--border-color) / 21%);}
menu::-webkit-scrollbar-thumb:hover{background:rgb(var(--border-color) / 34%);}
.main-menu-container{padding:var(--size-4); display:grid; grid-gap:var(--size-4) var(--size-6);}
.mmc-title{display:grid; grid-gap:var(--size-2); grid-template-columns:3px 1fr; font-weight:bold; margin-bottom:var(--size-2);}
.mmc-title:before{content:''; display:block; width:100%; height:100%; border-radius:var(--rounded-2); background-color:var(--color-3);}
.mmc-list{display:grid; grid-gap:0 var(--size-3); grid-template-columns:repeat(auto-fill, minmax(120px,1fr));}
.mmc-link{display:block; font-weight:normal; line-height:140%; padding:var(--size-1) 0;}

.contact-us{ display:grid; grid-gap:var(--size-2); grid-auto-rows:min-content;}
.contact-us-title{font-size:calc(var(--fontsize) + 2px); line-height:130%; font-weight:bold; text-wrap:balance;}
.contact-us-title svg{width:auto; height:var(--size-4);}
.contact-us-title svg path{fill:var(--bg-2);}
.contact-us-desc{font-size:calc(var(--fontsize) - 2px); line-height:150%; color:var(--bg-1);}
.contact-us-button{display:block; padding:var(--size-2) var(--size-3); border:1px solid var(--bg-2); color:var(--bg-2); text-align:center;}
.contact-us-button:hover{background-color:var(--color-2); border-color:var(--color-2); color:var(--bg-2);}

menu .contact-us{background-color:var(--color-3); color:var(--bg-2); padding:var(--size-4); border-radius:var(--rounded-3);}




nav{background-color:var(--bg-1);}
.nav-link{color:var(--color-2); border-radius:var(--rounded-2);}
.nav-curr{background-color:var(--color-3) !important; color:var(--bg-2) !important;}
.nav-close{--close-color:#C80C2C;}
.nav-close-button{border-radius:var(--rounded-2); background-color:var(--bg-1); color:var(--close-color); border-color:var(--close-color);}
.nav-close-button:hover{background-color:var(--close-color) !important;}



.rancak-container{}
.rancak-section-title{color:var(--color-3);}



.content-box{background-color:var(--bg-2); border-color:rgb(var(--border-color) / var(--border-opacity)); border-radius:var(--size-3);}

.article-box .article-thumb{background-color:var(--color-2);}
.article-box .article-thumb img{transition:var(--transition-default);}
.article-box:hover .article-thumb img{filter:grayscale(55%); opacity:55%;}
.article-desc{color:var(--color-2);}
.article-misc{color:var(--color-4);}
.article-misc-ad{background-color:rgb(var(--border-color) / var(--border-opacity)); border-radius:var(--size-1);}



.content-popular-title{color:var(--color-3);}
.content-popular-list::-webkit-scrollbar-track, .content-popular-list::-webkit-scrollbar-thumb{background:0;}
.content-popular-list:hover::-webkit-scrollbar-thumb{background:rgb(var(--border-color) / 21%);}
.content-popular-list::-webkit-scrollbar-thumb:hover{background:rgb(var(--border-color) / 34%);}
.content-popular-box{border-color:rgb(var(--border-color) / 8%);}



.content-detail{border-color:rgb(var(--border-color) / 21%);}

.cdt-container{background-color:var(--color-3); border-radius:var(--rounded-3);}
.cdt-link{color:var(--bg-2); border-color:rgb(255 255 255 / 55%);}
.cdt-link:hover{color:rgb(255 255 255 / 21%);}

.hero-image-frame{border-radius:var(--rounded-3);}
.hero-image-info{border-color:var(--color-3);}
.hero-image-label{color:var(--color-3);}
.hero-image-data{color:var(--color-1);}

.cdt-info-right .share-link{border-radius:var(--share-size); border-color:rgb(var(--border-color) / 21%); fill:var(--color-3);}
.cdt-info-right .share-link:hover{fill:var(--bg-2);}
.cdt-info-right .share-facebook:hover{background-color:var(--color-fb); border-color:var(--color-fb);}
.cdt-info-right .share-whatsapp:hover{background-color:var(--color-wa); border-color:var(--color-wa);}
.cdt-info-right .share-twitter:hover{background-color:var(--color-tw); border-color:var(--color-tw);}
.cdt-info-right .share-other:hover{background-color:var(--color-3); border-color:var(--color-3);}

.content-main a{color:var(--color-3);}
.content-main a:hover{color:var(--color-2);}

.content-disclaimer{color:var(--color-3); position:relative;}
.content-disclaimer:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--color-3); opacity:8%; border-radius:var(--rounded-3);}

.svgicon-related-article{width:auto; height:24px;}
.svgicon-related-article .color-1{fill:rgb(var(--border-color) / 8%);}
.svgicon-related-article .color-2{fill:var(--color-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-link:hover{fill:var(--color-2);}
  
  
  
footer{background-color:var(--color-3); color:var(--bg-1);}
.footer-container{padding:var(--size-5) var(--size-4); display:grid; grid-gap:var(--size-5) var(--size-6);}
.footer-link{padding:var(--size-3) 0; color:var(--bg-2); font-weight:normal; display:inline-flex;}
.footer-link:hover{color:var(--color-2);}

.footer-logo svg{width:auto; height:var(--size-5);}
.footer-logo svg path{fill:var(--bg-2);}

.footer-socmed-list{display:flex; flex-wrap:wrap;}
.footer-socmed-link{line-height:0; padding-right:var(--size-4); fill:var(--bg-2);}
.footer-socmed-link:hover{fill:var(--color-2);}
.footer-socmed-link svg{width:auto; height:24px;}

.footer-viva-list{display:grid; grid-template-columns:repeat(2,1fr); grid-gap:0 var(--size-4);}
.footer-viva-list .footer-link{text-transform:uppercase;}

.footer-info{display:grid; grid-gap:var(--size-5);}

.footer-menu-list{display:flex; flex-wrap:wrap;}
.footer-menu-list .footer-link{padding:var(--size-1) 0; margin-right:var(--size-5);}

.footer-copyright{font-size:12px; line-height:150%; margin-top:var(--size-2);}
.footer-copyright .footer-link{font-weight:bold; padding:0;}



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







@media screen and (min-width:0px) and (max-width:1023px){
  .hero-image-frame{border-radius:0;}
  .content-main .hero-image-frame{border-radius:var(--rounded-3);}
}





@media screen and (min-width:768px){
  .main-menu-container{grid-template-columns:repeat(2,1fr);}
  .mmc-our-partner{grid-column:2/3; grid-row:1/4;}
  
  
  
  .footer-container{grid-template-columns:300px 1fr;}
  .footer-socmed-list{justify-content:flex-end; height:100%; align-items:center;}
  .footer-socmed-link{padding-right:0; padding-left:var(--size-4);}
  .footer-menu, .footer-copyright{grid-column:1/3;}
}





@media screen and (min-width:1024px){
  .nav-link:hover{background-color:var(--color-2); color:var(--bg-2);}
}