*,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:#0E0E0F;
  --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:'Space Grotesk',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; scroll-padding-top:55px;}
body{background-color:var(--bg-1); padding-top:var(--size-6); 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;}


.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);}

.btn-login-container{display: flex; gap: var(--size-2); align-items: center;}
.btn-login-container button{padding: var(--size-2) var(--size-4) !important;  height: 70%; color: var(--color-default-4) !important; font-weight: 700;}
.btn-login-container .btn-login{background: var(--bg-1) !important; color: var(--color-default-7) !important;}
.btn-login-container .btn-register{background: var(--color-default-7) !important; color: var(--bg-3) !important;}



.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 .width-max, .header-left, .header-right, .header-center{display:flex; position:relative;}
/* header span.header-pildun{max-width: 1280px; display: grid; grid-template-columns: repeat(3, 1fr);} */
header{position:fixed; z-index:calc(var(--max-zindex) - 3000); top:0; left:0; width:100%;}
header .width-max{justify-content:space-between; max-width:var(--site-container); margin:0 auto;}
.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); --size-logo:20px;}
.header-logo img{width:auto; height:var(--size-logo);}
.header-logo svg{width:auto; height:var(--size-logo);}
.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; grid-auto-flow:column; overflow-x:auto;}
.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);}

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

.section-title{--line-width:89px; --line-height:5px; position:relative; margin-bottom:var(--size-6);}
.section-title *{text-align:center;}
.section-title-main{position:relative; font-weight:bold; text-transform:uppercase; line-height:100%;}
.section-summary-main{line-height:140%; margin-top:var(--size-1);}
.section-summary-main{text-align: center;}
.section-summary-main b{display:inline-block;}



.section-artikel-content{display:grid; grid-gap:var(--size-4); grid-template-columns:repeat(auto-fit, minmax(210px,1fr));}
.section-info-main{color: var(--color-default-2); font-weight: 700; margin-top: var(--size-2); text-transform: uppercase;}

.headline-container {display: grid; justify-content: center; align-items: center;  background: linear-gradient(124.2deg, rgba(227, 32, 39, 0.2) 0%, rgba(0, 238, 252, 0.05) 100%), linear-gradient(0deg, #0E0E0F 0%, rgba(14, 14, 15, 0) 50%, rgba(14, 14, 15, 0) 100%), url('../img/background-pbd.png'); background-size: cover; background-position: center; background-size: cover; background-position: center; }
.headline-title{padding: 0 5px; font-size: 40px; text-align: center; color: var(--bg-color); line-height: 100%; font-weight: 700;}
.headline-title span{color: var(--color-default-5);}
.headline-subtitle{padding: 0 21px; text-align: center; color: var(--color-default-1); font-size: 14px;}


.article-link{position:relative; z-index:1; display:block; background: #201F21;
  color:var(--bg-2); border-radius:var(--rounded-2); overflow:hidden;}
.article-link:hover img{opacity: .6; transition: .3s;}
.article-link:hover h3, .article-link:hover .article-date{color: var(--color-default-4);}
.article-thumb:before{position: relative; z-index: 10; padding-top:56.25%;}
.article-info{ padding:13px; z-index:3000; }
.article-info span{position: relative; z-index: 4; display:grid; grid-gap:var(--size-3);}
.article-title{font-size:20px; line-height:120%; margin-bottom:var(--size-1);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-weight: 700; overflow:hidden; color: #FFFFFF;}
.article-misc{display: flex; flex-wrap: wrap; justify-content: left;}
.article-cate{border-right: 1px solid #BDBDBD; margin-right: 7px; padding-right: 7px;}
.article-cate h3{font-size: 11px; font-weight: 700; color: var(--color-default-4); text-transform: capitalize;}
.article-date{color:var(--color-default-4); font-size: 11px;}
.article-summary{color: var(--color-default-1); font-weight: 400;}
.btn-view-article-container{margin-top: var(--size-2); width: fit-content; display: grid; gap: var(--size-1);}
.btn-view-article{color: var(--bg-color); text-transform: uppercase;}
.btn-view-article-container .line-title{background: var(--color-default-3); width: 100%; height: 2px;}
.section-artikel .button-more-link, .section-video .button-more-link{border-color:var(--bg-2); color:var(--bg-2); fill:var(--bg-2);}

.title-section-container{display: flex; gap: var(--size-2); align-items: center; margin-bottom: var(--size-5);}
.title-section-container .title-section{font-size: 24px; color: var(--bg-color); font-weight: 700; text-transform: uppercase;}
.line-title-section{width: 15px; height:60px; background: linear-gradient(180deg,#9c0202 0%,#EC1C4C  90%);}

@media screen and (min-width:0px) and (max-width:1023px){
  html{scroll-padding-top:114px;}
  body {padding-top: 114px;}

  .desktop-only, .share-box-static{display:none !important; visibility:hidden; content-visibility:hidden;}
  .desktop-only iframe[loading=lazy]{content-visibility:hidden !important;}
  
  header .width-max{display: grid; justify-content: center; row-gap: 13px; padding: var(--size-3) 0;}
  .header-left{justify-content: center;}
  .header-right{overflow: auto; scrollbar-width: none;  -ms-overflow-style: none; /* IE/Edge lama */}
  .header-right::-webkit-scrollbar { display: none; }
  
  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;}

  @media screen and (max-width:420px){
    .menu-link:first-child{padding-left: 2px;}
    .menu-link{padding: 0 4px;}
  }


  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);}

  .headline-container{height: calc(100vh - 114px);}


}

.display-none{display: none;}



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

  .mobile-only{display: none;}

  header span.header-pildun{max-width: 1280px; display: grid; grid-template-columns: repeat(2, 1fr);}
  header span.header-pildun .header-right{display: flex; justify-content: flex-end;}
  menu{gap: var(--size-3);}
  /* .header-right .menu-link:not(:first-child){border-left: 1px solid var(--bg-3);} */

  .rancak-container .section-container{margin-bottom: var(--size-6);}

  .section-summary{display: flex; justify-content: center;}
  .section-summary-main{width: 65%; font-size: var(--size-4);}
  
  .section-article-main{position: relative; padding: var(--size-4); max-width: var(--site-container); margin: 0 auto; width: 100%;}
  .article-main-link{display: grid; grid-template-columns: 50% 50%;}
  .article-main-link .article-thumb{border-radius: var(--rounded-2); overflow: hidden;}

  .top-section-bg{margin-top: -260px;}
  .section-artikel-content{grid-template-columns: repeat(3, 1fr); gap:var(--size-5);}

  .headline-container{min-height: 500px;}
  .headline-title{font-size: 96px;}
  .headline-subtitle{font-size: 18px;}
}