*,html,:before,:after{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;text-align:left}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}a img{border:0}a{text-decoration:none}b,strong{font-weight:700}i,em{font-style:italic}img{max-width:100%}.btn,input[type=button],select,button{-webkit-appearance:none;cursor:pointer;background-color:transparent}.content_center{display:flex;justify-content:center;align-items:center}.hide{display:none}



:root, :before, :after{
  --site-container:1024px;
  --size-1:5px;
  --size-2:8px;
  --size-3:13px;
  --size-4:21px;
  --size-5:34px;
  --size-6:55px;
  --size-7:89px;
  --max-zindex:2147483648;
  --default-fontsize:14px;
  --title-fontsize:16px;
  --menu-width:210px;
  --bg-1:#FDFDFD;
  --image-frame:80px;
  --bg-color:#FFFFFF;
  --border-color:#E0E0E0;
  --font-link-primary:#DB2017;
  --font-link-secondary:#212B33;
  --font-link-quaternary: #EC1C4C;
}



body, html{font-family:'Plus Jakarta Sans',sans-serif;  font-size:var(--default-fontsize); font-weight:500; letter-spacing:0.5px; font-feature-settings:'lnum' 1; 
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; text-rendering:optimizeSpeed;}
html{scroll-behavior:smooth; min-height:100vh;}
body{background-color:var(--bg-1); padding-top: 134px; overflow-x:hidden;}
.btn, a.btn, button.btn, .button-more-link{padding:var(--size-3) var(--size-4); font-weight:normal; -webkit-appearance:none; text-transform:capitalize; 
display:flex; text-align:center; align-items:center; justify-content:center;}
.rancak-popup{display:none;}
.width-max{position:relative; width:100%; max-width:var(--site-container); margin:0 auto;}

.thumb-background-container{position: absolute; left: 0; top: 0; width: 100%;}
.thumb-background-container img{width: 100%;}


.button-more{margin-top:var(--size-3);}
.button-more-link{flex-wrap:wrap; border:1px solid; text-transform:uppercase;}
.button-more-link .svgicon{width:auto; height:var(--default-fontsize); margin-left:var(--size-2);}


.flex_ori{display:block; overflow:hidden; position:relative; line-height:0;}
.flex_ori:before{content:''; display:block;}
.flex_ori img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.flex_ori img:not([src]){visibility:hidden;}

header::before{content: ''; display: block; height: 4px; background: linear-gradient(90deg, #AE8D4B 0%, #375D52 100%);}
header .width-max{padding: var(--size-3) var(--size-4); max-width:var(--site-container); margin:0 auto;}
.header-left, .header-right{display:flex; position:relative; width: 100%; justify-content: center; margin-top: 13px;}
.header-right menu{justify-content: space-between; width: 100%; max-width: 970px;}
header{position:fixed; z-index:calc(var(--max-zindex) - 3000); top:0; left:0; width:100%;}
.header-link{height:var(--size-6); padding:0 var(--size-3);}
.header-link .svgicon{width:auto; height:var(--size-4);}
.header-logo{padding-left:var(--size-4);}
.header-logo img{width:auto; height:30px;}
.header-logo svg{width:auto; height:30px;}
.header-share{padding-right:var(--size-4);}

.frame-icon-left{position: absolute; top: 0; left: 0;}
.frame-icon-right{position: absolute; top: 0; right: 0;}

menu{display:grid; gap: var(--size-3); grid-auto-flow:column; overflow-x:auto; padding: 0 21px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none; }
.menu-link{padding:0 var(--size-2); height:100%; font-size:var(--title-fontsize); text-transform:capitalize;}
.menu-link:first-child{padding-left:var(--size-4);}
.menu-link span{white-space:nowrap;}

.rancak-container{position:relative;}
.section-container{margin: var(--size-4) 0;}
.section-container > .width-max{padding:var(--size-4); max-width:var(--site-container); margin:0 auto;}

.section-title { font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; display: flex; align-items: center; gap: var(--size-2); position: relative; padding-left: 16px; margin-bottom: 15px; }
.section-title:before { content: ''; display: block; position: absolute; height: 29px; width: 5px; transform: skew(-15deg) translate(-12px, 0px); }
.section-title > * { word-wrap: break-word; word-break: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-right: var(--size-1);}
.section-title .subtitle{ padding: 2px 13px; border-radius: 13px 4px 13px 4px; background: var(--color-default-1); color: var(--bg-color);}



.section-artikel-content, .section-video-content{display:flex; flex-direction: column; gap: 13px;}
.container-content-article{display: grid;}
.section-info-main{color: var(--color-default-2); font-weight: 700; margin-top: var(--size-2); text-transform: uppercase;}
.article-content-container{gap: var(--size-3); display: flex; flex-direction: column;}
.article-link{position:relative; z-index:1; display:grid; color:var(--bg-2); overflow:hidden; --article-thumb-size: 95px; grid-template-columns: var(--article-thumb-size) 1fr; grid-gap: 10px; padding-bottom: 10px;}
.article-list-thumb{position: relative; border-radius: 13px; overflow: hidden;}
.article-list-thumb:before { overflow: hidden; border-radius: 10px; padding-top: 100%;}
.article-list-thumb:before, .article-thumb {
  width: 100%;}
.article-list-thumb:before, .article-thumb:before { padding-top: 100%; }
.article-thumb{border-radius: 10px;}
.article-link:hover img{opacity: .6; transition: .3s;}
.article-link:hover h3, .article-link:hover .article-date{color: var(--color-default-4);}
.article-info{ padding:4px 13px 13px; z-index:3000;  display:grid; grid-gap:var(--size-1);}
.article-info span{position: relative; z-index: 4;}
.article-title{font-size:var(--title-fontsize); line-height:140%; margin-bottom:var(--size-1);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-weight: 700; overflow:hidden; color: var(--color-default-4)}
.article-misc{display: flex; flex-wrap: wrap; justify-content: left; align-items: center; gap: var(--size-3);}
.article-cate{border-right: 1px solid #BDBDBD; margin-right: 7px; padding-right: 7px;}
.article-cate h3, .article-list-cate h3{font-size: 12px; font-weight: 700; color: var(--color-default-4); text-transform: capitalize;}
.article-list-cate { background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.05) !important; border-radius: calc(10px / 2); border: 1px solid; padding: 3px 5px;}
.article-date{color:var(--color-default-4); font-size: 11px;}
.section-artikel .button-more-link, .section-video .button-more-link, .section-data-pemilu .button-more-link{border-color:var(--bg-2); color:var(--bg-2); fill:var(--bg-2);}
.btn-more-container{width: 100%; display: flex; justify-content: center;}
.btn-more{background: var(--color-default-1); color: var(--bg-color); font-weight: 700 !important; font-size: 20px; width: 70%; border-radius: 8px !important; text-transform: uppercase !important; font-style: italic;}

.article-main-link{position:relative; display: grid; z-index:1; display:block; color:var(--bg-2);}
.article-thumb:hover img{opacity: .6 !important; transition: .3s !important;}
.article-main-title:hover, .article-title:hover {color: var(--color-default-3) !important;}
.article-main-link .article-thumb:before{position: relative; z-index: 10; padding-top:56.25%; background: none;}
.article-main-title{font-size: 21px;}
.article-main-info{padding:4px 21px 13px 0; z-index:3000;  display:grid; grid-gap:var(--size-1);}
.article-summary{line-height: 150%; display: grid; grid-row-gap: 15px; margin-top: 15px; word-wrap: break-word; word-break: break-word; hyphens: auto; }
.article-main-link .article-thumb{border-radius: var(--rounded-4) 0 var(--rounded-4) 0; overflow: hidden;}

.select-area-container{display: flex;}
.select-wrapper{position: relative; display: flex; padding: 8px 21px; max-width: 200px; background: #B2C0BC; width: fit-content;  border-radius: var(--rounded-4);}
.icon-area-container{position: absolute; top: 10px; left: 21px;}
.icon-area-container .svgicon{fill:var(--color-default-4);}
.select-wrapper select{position: relative; width:100% ; padding-left: var(--size-5); text-align-last: left; font-size: 18px; text-transform: uppercase; font-weight: 700; font-style: italic;}
/* .select-wrapper select option{direction: rtl;} */

.container-content-jadwal-ibadah{ display: grid; row-gap: var(--size-3);}
.widget-wrapper{position: relative; background: linear-gradient(90deg, #053023 0%, #375D52 100%); display: grid; gap: var(--size-4); border-radius: var(--size-4) var(--size-1) var(--size-4) var(--size-1); padding: 21px;}
.thumb-pattern-widget{position: absolute; top: 0; left: 0;}
.btn-arrow-date{background: none !important; padding: 0 !important;}
.btn-arrow-date .svgicon{fill: #AE8D4B;}
.date-today-container{display: grid; justify-content: center; row-gap: var(--size-3);}
.date-today-container p{color: var(--color-default-3); text-transform: uppercase; text-align: center; font-size: 16px; font-weight: 700;}
.date-today-container .date-today-wilayah{color: #F7F4ED; text-align: center; font-size: 16px;}
.schedule-slide-date{display: flex; justify-content: space-between; align-items: center; background: var(--bg-color); padding: var(--size-2) var(--size-3); border-radius: var(--size-3);}
.date-shedule-container{overflow-x: scroll; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: var(--size-2);}
.card-schedule-list{display: flex; gap: var(--size-3);}
.card-schedule-item{width: 120px; display: grid; gap: var(--size-2); justify-items: center; padding: var(--size-3); border-radius: var(--size-2);}
.card-schedule-item .azan, .card-schedule-item .time{color: var(--bg-color); font-size: 16px; width: 700;}
.card-schedule-item.active{background: var(--color-default-3);}
.info-download-imsakiyah{display: flex; justify-content: center; gap: var(--size-3); align-items: center;}
.info-download-imsakiyah p{color: var(--color-default-4); font-weight: 800 !important; font-size: 13px; text-align: center;}
.info-download-imsakiyah .btn-to-imsakiyah{font-size: 13px; white-space: nowrap; font-weight: 800; text-transform: uppercase;}




@media screen and (min-width:0px) and (max-width:1023px){
  .desktop-only, .share-box-static{display:none !important; visibility:hidden; content-visibility:hidden;}
  .desktop-only iframe[loading=lazy]{content-visibility:hidden !important;}
  
  menu{position:-webkit-sticky; position:sticky; z-index:calc(var(--max-zindex) - 4000); top:var(--size-6); width:100%;}
  .menu-link:first-child{border-left:0;}

  nav{display: none; gap: var(--size-3); padding: var(--size-4);}
  nav button{padding: var(--size-3) var(--size-2) !important;}
  .menu-link{justify-content:flex-start;}
  .menu-curr:after{width:var(--size-1); height:100%;}
  .menu-nav-toggle{margin-right:var(--size-4); background: var(--color-default-7); padding: var(--size-1) var(--size-2); border-radius: var(--rounded-1);}
  .menu-nav-toggle .svgicon{width:auto; height:32px; fill: var(--bg-1);}

  .header-left{padding-bottom: var(--size-3);}
  
  .section-title{font-size:21px;}

  .select-area-container{ justify-content: center; margin-bottom: var(--size-4);}

}

.display-none{display: none;}



@media screen and (min-width:1024px){
  .section-title-main{font-size:36px;}

  .mobile-only{display: none;}

  
  .section-summary{display: flex; justify-content: center;}
  .section-summary-main{width: 65%; font-size: var(--size-4);}
  
  .section-article-main{position: relative; max-width: var(--site-container); margin: 0 auto; width: 100%;}

  .container-content-article{grid-template-columns: 40% 60%; gap: var(--size-3);}
  .section-title-container{display: flex; justify-content: space-between; margin-bottom: var(--size-3); align-items: center;}
  .widget-wrapper{grid-template-columns: 40% 1fr;}
  .date-today-container{align-items: center; gap: 0;}
  .date-today-container p, .schedule-slide-date span{font-size: 20px;}
}