:root, :before, :after{
  --bg-2:#FFFFFF;  
  --bg-3:#EEE;  
  --bg-4:#f7f4ed;  
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-default-1:#AE8D4B; 
  --color-default-2:#212121;
  --color-default-3:#AE8D4B;
  --color-default-4:#375D52; 
  --color-default-5:#E6EBE9; 
  --color-default-6:#58786E; 
  --color-default-7:#9A1E23; 
  --color-fb:#1877f2;
  --color-tw:#00acec;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-2);
  --rounded-3:var(--size-4);
  --rounded-4:28px;
  --hover-opacity:0.34;
  --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-default-4);}
html{background-color:#2F2F2F;}
body.freeze-scroll{overflow:hidden;}
a, .btn, button{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-default-2); fill:var(--color-default-2);}
a:hover, button:hover{color:var(--color-default-4); fill:var(--color-default-4);}
.btn, a.btn, button.btn{background-color:var(--color-default-3); color:var(--bg-1); fill:var(--bg-1); border-radius:var(--size-2); font-style: italic;}
.btn:hover, a.btn:hover, button.btn:hover{background-color:var(--color-default-4);}
#btt{position:fixed; bottom:calc(var(--size-6) + var(--size-4)); right:0; cursor:pointer;
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:var(--color-default-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-default-4);}
.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; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; background-size: 650px auto;}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



.button-more-link{border-color:var(--color-default-7); background-color: var(--color-default-7); color:var(--color-default-3); fill:var(--color-default-3); border-radius:var(--rounded-3);}
.button-more-link:hover{background-color:var(--color-default-4); border-color:var(--color-default-4) !important; 
color:var(--bg-1) !important; fill:var(--bg-1) !important;}



header, menu{transition:var(--transition-default);}
header .width-max, .header-left:after, .header-logo{background:0;}
header{ background: linear-gradient(180deg, #FDFDFD 0%, rgba(253, 253, 253, 0) 100%); border-bottom-color:var(--color-default-4);}
header.white-background{background: var(--bg-1);}
.header-link, .menu-link{color:var(--color-default-3); padding:8px 21px; fill:var(--color-default-3); font-weight: 700; text-transform: uppercase;}
.menu-link.active, .header-link:hover, .menu-link:hover{background: var(--color-default-4);  color:var(--color-default-5); fill:var(--color-default-5); border-radius: 21px;}

.section-title { color: var(--color-default-6); }
.section-title:before { background-color: var(--color-default-4); background: linear-gradient(180deg, #375D52 0%, #04261C 100%); border-radius: 10px; }

.show-sticky{color:var(--color-default-3) !important; fill:var(--color-default-3) !important;}

.rancak-popup, .rancak-popup-overlay, .rancak-popup-container{bottom:0; left:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 2000);}
.rancak-popup-overlay, .rancak-popup-container, .rancak-popup-close{position:absolute;}
.rancak-popup-container, .rancak-popup-box{padding:var(--size-4);}
.rancak-popup-overlay{z-index:1;}
.rancak-popup-box{position:relative; z-index:2000; width:100%; max-width:987px; max-height:calc(100vh - var(--size-7)); background-color:var(--bg-2);
border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow-y:auto;}
.rancak-popup-head{display:flex; justify-content:space-between;}
.rancak-popup-head > *{display:flex; align-items:center;}
.rancak-popup-title{font-weight:bold; color:var(--color-default-2);}
.rancak-popup-close{z-index:1000; top:0; right:0; padding:var(--size-3); fill:var(--color-default-4);}
.rancak-popup-close:hover{fill:var(--color-default-3);}
.rancak-popup-close .svgicon{width:auto; height:var(--size-4);}

.hadish-summary, .ayat-summary{display: grid; justify-items: center; gap: var(--size-3); align-content: center;}
.thumb-logo-hadish, .thumb-logo-ayat{width: 186px;}
.thumb-logo-hadish::before{padding-top: calc(44/101*100%);}
.thumb-logo-ayat::before{padding-top: calc(43/93*100%);}
.hadish-summary p, .ayat-summary p{color: var(--bg-2); text-align: center; font-weight: 700; font-size: 13px;}
.wrapper-ayat{position: relative; background: #E6EBE9; border-radius: var(--size-4) var(--size-1) var(--size-4) var(--size-1); padding: var(--size-4); min-height: 265px;}
.content-ayat-container{position: relative;}
.content-ayat{position: relative; max-height: 100px; padding-bottom: 40px; overflow-y: scroll; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none; padding-right: var(--size-2);}
.content-ayat p{font-size: 13px;}
.overlay-ayat{position: absolute; height: 45px; width: 100%; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(230, 235, 233, 0) 0%, #E6EBE9 100%);}
.info-ayat{position: relative; height: 90px;}
.wrapper-info-ayat{position: absolute; bottom: 0; left: 50px; padding: var(--size-2); border-radius: 0 var(--size-1) var(--size-3) 0; background: var(--color-default-3); color: var(--bg-2);}
.wrapper-info-ayat-player{position: relative; padding: var(--size-2); text-align: center; font-weight: 800; border-radius: 0 var(--size-1) var(--size-3) 0; background: var(--color-default-3); color: var(--bg-2);}
.thumb-masjid{position: absolute; bottom: 0; left: 0; width: 97px;}
.thumb-masjid::before{padding-top: calc(88/85*100%);}
a.btn-ayat-more{font-size: 13px; padding: var(--size-1) var(--size-5) !important; white-space: nowrap; font-weight: 800 !important; text-transform: uppercase;}
.ayat-content-container{position: relative; display: grid; row-gap: var(--size-3);}
.ayat-content-container > *{text-align: center; color: var(--color-default-4); font-weight: 700; font-size: 21px;}
.ayat-content-container .ayat-translate{font-size: 13px; font-weight: 500;} 
.ayat-translate-container{max-height: 100px; padding-bottom: 40px; overflow-y: scroll; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none;}
.ayat-player-container{margin-top: var(--size-4);}
.ayat-player-control{display: flex; justify-content: center; gap: var(--size-4); align-items: center;}
.ayat-player-control .toggle-next .wrapper-toggle-player{transform: rotate(180deg);}
.wrapper-toggle-player{width: 24px; height: 24px; border-radius: var(--size-1); background: #B2C0BC; display: flex; justify-content: center; align-items: center;}
.ayat-player-control .toggle-play .svgicon{fill: var(--color-default-1);}
.wrapper-toggle-player:hover{background: var(--color-default-4);}
.thumb-quran-icon{position: absolute; bottom: 0; left: 0;}
.ayat-quran .wrapper-ayat{min-height: 0; overflow: hidden;}
.toggle-play.alquranPlay-toggle[title="Pause"]{display:none;}
.btn-refresh-hadish-container{display: flex; justify-content: center; margin-bottom: var(--size-2);}
.btn-refresh-hadish{display: flex; justify-content: center; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-4) !important; background: var(--color-default-4) !important; border-radius: var(--size-2) !important;}
.btn-refresh-hadish p{color: #FFF; font-weight: 700; font-style: normal !important;}


.container-smartmap{margin-top: var(--size-5);}
.menu-smartmap-container{overflow-x: auto;}
.menu-smartmap-list{display: flex; gap: var(--size-4);}
.card-menu-row{display: flex; align-items: center; min-width: 180px; justify-content: center; gap: var(--size-2); border-radius: var(--size-2); padding: var(--size-1) var(--size-4); background: #E6EBE9;}
.icon-menu-sm .svgicon{stroke: var(--color-default-3);}
.card-menu-row p{font-size: 20px; color: var(--color-default-4); font-weight: 800;}
.card-menu-row.active, .card-menu-row:hover{background: var(--color-default-4);}
.card-menu-row.active p, .card-menu-row:hover p{color: #E6EBE9;}
.card-menu-row.active .icon-menu-sm .svgicon, .card-menu-row:hover .icon-menu-sm .svgicon{stroke: #E6EBE9;}
.sm-split-content{margin-top: var(--size-5);}
.frame-maps-container{border: 2px solid var(--color-default-1); border-radius: var(--size-4); overflow: hidden;}
.frame-maps-container::before{padding-top: calc(5/4*100%);}
.frame-maps-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.sm-split-content{display: grid; row-gap: var(--size-4);}
.sm-notice-wrapper{background: #E6EBE9; padding: var(--size-2) var(--size-4); margin-top: var(--size-3); border-radius: var(--size-3); display: grid; grid-template-columns: 20% 1fr; }
.sm-notice-icon{display: flex; align-items: center;}
.sm-notice-content{display: grid; row-gap: var(--size-2);}
.sm-notice-content .title{font-size: 13px; color: var(--color-default-4); font-weight: 800;}
.sm-notice-content .summary{font-size: 10px;}
.notice-place-wrapper{padding: var(--size-3); background: #F7F4ED; border-radius: var(--size-3); font-size: var(--size-3); color: var(--color-default-3); font-weight: 500;}
.sm-content-right{position: relative;}
.place-recommended-container{margin-top: var(--size-3); max-height: 491px; overflow-y: scroll; padding-bottom: 20px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none; padding-right: var(--size-2);}
.place-recommended-list{display: grid; row-gap: var(--size-3);}
.card-place-list{width: 100%; background: #F7F4ED; border-radius: var(--size-3); display: grid; grid-template-columns: 10% 1fr; gap: var(--size-2); padding: var(--size-3);}
.icon-place-container .svgicon{stroke: var(--color-default-1);}
.card-place-list .title-container{display: flex; gap: var(--size-2);}
.card-place-content .info-indikator{--indikator-size: var(--size-4); display: inline-block; width:var(--indikator-size); height: var(--indikator-size); border-radius: 50%; background-color: var(--color-default-1);}
.card-place-content p{font-size: 18px; font-weight: 800; color: var(--color-default-4);}
.card-place-content .summary{font-size: 10px; margin-top: var(--size-3); color:#7C6435;}
.place-info-container{display: flex; justify-content: space-between; margin-top: var(--size-3); align-items: center;}
.place-info-container .place-info{display: flex; gap: var(--size-3);}
.place-info-container .place-info > *{font-size: 10px; font-weight: 700; background: var(--color-default-1); color: var(--bg-2); border-radius: 2px 8px 2px 8px; padding: var(--size-2);}
button.btn-to-place{padding: 5px var(--size-2) !important; border-radius: var(--size-1) !important; text-transform: uppercase; font-weight: 700; background: var(--color-default-4) !important; font-style: normal !important;}
.overlay-place-scroll{position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, #FDFDFD 100%); z-index: 2;}

.card-place-list.blue-card .icon-place-container .svgicon{stroke: #4B7DAE;} 
.card-place-list.blue-card .info-indikator{background: #4B7DAE;} 
.card-place-list.red-card .icon-place-container .svgicon{stroke: #AE4B4B;} 
.card-place-list.red-card .info-indikator{background: #AE4B4B;} 
.card-place-list.green-card .icon-place-container .svgicon{stroke: #4BAE50;} 
.card-place-list.green-card .info-indikator{background: #4BAE50;} 

@media screen and (min-width:0px) and (max-width:1023px){
  body.header-white menu{background:#E0E0E0; box-shadow:0 0 0 !important;}


  .hadish-wrapper{padding-top: var(--size-5);}

  .footer-all{padding-bottom:70px;}
  
  .ayat-player-control{margin-top: var(--size-4);}
  .thumb-quran-icon{bottom: 30px;}
  .wrapper-info-ayat{padding-left: 30px;}

}


@media screen and (min-width:1024px){
  menu{background:0;}
  
  
  
  .profil-link{max-width:180px;}
  
  
  .rancak-popup-box::-webkit-scrollbar{width:7px;}
  .rancak-popup-box::-webkit-scrollbar-track, .rancak-popup-box::-webkit-scrollbar-thumb{background:0;}
  .rancak-popup-box:hover::-webkit-scrollbar-thumb{background:rgb(var(--color-border-dark) / 13%);}
  .rancak-popup-box::-webkit-scrollbar-thumb:hover{background:rgb(var(--color-border-dark) / 34%);}

  

  .btn-popup-close{width: 80%;}

  .hadish-wrapper{grid-template-columns: 50% 1fr;}
  .wrapper-info-ayat{padding: var(--size-2) var(--size-5); }
  .ayat-wrapper{grid-template-columns: 1fr 50%;}
  .ayat-player-container{display: flex; justify-content: space-between;}
  .wrapper-info-ayat-player{padding-left: 60px; padding-right: var(--size-5);}
  .thumb-quran-icon{bottom: -15px;}

  .menu-smartmap-container{display: flex; justify-content: center;}
  .frame-maps-container::before{padding-top: calc(4/5*100%);}
  .sm-split-content{grid-template-columns: 60% 1fr; gap: var(--size-3);}
}
  
  
  
@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){

  .rancak-popup{-webkit-backdrop-filter:blur(var(--size-3)); backdrop-filter:blur(var(--size-3)); background-color:rgb(var(--color-border-dark) / 13%);}
}