:root{
  --rounded-small:8px;
  --rounded-normal:16px;
  --background-secondary:#b3175b;
  --background-footer:#2a3344;   
  --color-link-1:#FFFFFF; 
  --color-link-2:#f1ca34;
  --color-link-3:#f08b0a;
  --color-link-4:#b3175b;
  --color-link-5:#84217a;
  --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.freeze-scroll{overflow:hidden;}
a, .btn, #btt{transition:all 0.25s;}
a, .btn, #btt{cursor:pointer}
a{color:var(--color-link-1); fill:var(--color-link-1);}
a:hover{color:var(--color-link-2); fill:var(--color-link-2);}
a:focus{opacity:0.6;}
.btn, a.btn, #btt{background:linear-gradient(to bottom, var(--color-link-2) 0%, var(--color-link-3) 100%);}
.btn, a.btn{border-radius:calc(var(--rounded-normal) * 2); color:var(--background-primary); fill:var(--background-primary);}
.btn:hover, a.btn:hover, #btt:hover, #btt:focus{filter:grayscale(100%);}
#btt{position:fixed; bottom:calc(var(--body-padding) * 2); right:0; 
z-index:calc(var(--max-zindex) - 4000); width:36px; height:36px; fill:var(--background-primary);
border-top-left-radius:var(--rounded-small); border-bottom-left-radius:var(--rounded-small);}
.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.share-list-fb{fill:#4867aa;}
.share-list-tw{fill:#00acec;}
.share-list-wa{fill:#2bb240;}
.share-list-li{fill:#41c106;}
.share-list-ml{fill:#CD9654;}

header{background-color:var(--background-primary); box-shadow:var(--shadow-default);}
.header-logo:hover, .header-antv:hover{opacity:0.5;}

.site-container{color:var(--color-link-1);}

.section-title{margin-bottom:var(--space-5);}
.section-title > *{text-align:center; line-height:150%;}
.section-title-main{font-size:24px; color:var(--color-link-1); font-weight:bold; text-transform:uppercase;}
.section-title-sub{font-size:16px; margin-top:var(--space-2);}

.cover{background:linear-gradient(to bottom, var(--background-primary) 50%, var(--background-secondary) 100%);}

.mekanisme{background-color:var(--background-secondary);}
.mekanisme-content{display:grid; grid-gap:var(--space-5); line-height:150%;}
.mekanisme-list{display:grid; grid-gap:var(--space-2); padding-left:18px; list-style:decimal;}

.hadiah{background:linear-gradient(to top, var(--background-primary) 50%, var(--background-secondary) 100%);}
.hadiah-content{display:flex; flex-wrap:wrap; justify-content:center;}
.hadiah-content-box{position:relative; width:100%; max-width:230px; margin:var(--space-5); margin-top:120px; border-radius:var(--rounded-normal);
background:linear-gradient(to bottom, var(--color-link-2) 0%, var(--color-link-3) 100%);}
.hadiah-content-box:before{content:''; display:block; padding-top:75%;}
.hcb-frame{position:absolute; top:0; left:0; width:100%; height:100%; display:grid; grid-template-rows:1fr 56px;}
.hcb-frame > *{width:100%;}
.hcb-image{position:relative;}
.hcb-image-frame{overflow:visible; position:absolute; bottom:0; left:0; width:100%; display:flex;}
.hcb-image-frame img{object-fit:contain; max-height:240px; position:relative;}
.hcb-label{padding:var(--space-2) var(--space-2) var(--space-4); text-align:center; font-weight:bold;}

.timeline-row{--indicator-size:40px; display:grid; grid-gap:var(--space-4);}
.timeline-step{position:relative;}
.timeline-line{position:absolute; z-index:1; width:100%; height:100%;}
.timeline-line:after{content:''; display:block; height:100%; width:4px; background-color:var(--color-link-4);}
.timeline-circle{position:relative; z-index:2; width:var(--indicator-size); height:var(--indicator-size); border-radius:50%;
background-color:var(--color-link-4); border:4px solid var(--color-link-2);}
.timeline-data{padding:var(--space-4) 0; justify-content:flex-start;}
.timeline-box{padding:var(--space-4); border-radius:var(--rounded-normal); width:100%; max-width:300px; line-height:150%;
background:linear-gradient(to bottom, var(--color-link-4) 50%, var(--color-link-5) 100%);}
.timeline-date{margin-bottom:var(--space-3); font-weight:bold; font-size:12px;}

.vote-logo-image{max-width:207px;}
.vote-logo-image:before{padding-top:115.94%;}
.vote-info{align-content:center;}

.bottom-info, footer{font-size:16px !important;}
.bottom-info > span > *, footer > span > *{padding:0 var(--space-4);}
.bottom-info{padding:var(--space-6) 0; background-color:var(--background-footer);}
.bottom-address{display:grid; grid-gap:var(--space-2);}
.bottom-address b{color:var(--color-link-1); font-weight:bold; font-size:18px;}
.bottom-list{display:flex; flex-wrap:wrap;}
.bottom-link{padding:var(--space-1); font-weight:normal;}
.bottom-group img{width:auto; height:22px; object-fit:contain; position:relative;}
.bottom-group-title{display:flex; align-items:center; justify-content:center;}
.bottom-group-title img{margin-left:var(--space-2);}
.bottom-group-list{display:flex;}
.bottom-group-link{padding:var(--space-3);}

footer{padding:var(--space-4) 0;}
.footer-copyright{line-height:150%;}
.footer-copyright b{color:var(--color-link-1);}
.footer-socmed{--icon-size:36px; display:flex;}
.footer-socmed-button{margin-left:var(--space-2); width:var(--icon-size); height:var(--icon-size); border:2px solid rgba(255,255,255,0.5);}
.footer-socmed-button .svgicon{width:auto; height:calc(var(--icon-size) - var(--space-4));}
.footer-fb-button:hover{border-color:#4867aa; fill:#4867aa;}
.footer-tw-button:hover{border-color:#00acec; fill:#00acec;}
.footer-ln-button:hover{border-color:#0a66c2; fill:#0a66c2;}
.footer-ig-button:hover{border-color:#C13584; fill:#C13584;}
.footer-yt-button:hover{border-color:#ff0000; fill:#ff0000;}

.popoup-share{display:flex; position:fixed; z-index:var(--max-zindex); top:100vh; left:0; width:100%; height:100vh; padding:var(--space-5);
background:linear-gradient(45deg, hsl(219deg 71% 13% / 98%) 0%, hsl(334deg 77% 40% / 98%) 100%); transition:all 0.25s;}
.popoup-share-open{top:0;}
.popup-share-close{position:absolute; z-index:1; top:0; right:0; fill:var(--color-link-1); padding:var(--space-3); transition:all 0.25s;}
.popup-share-close:hover{fill:var(--color-link-2);}
.psb-label{text-align:center; font-weight:bold;}
.psb-share{display:flex; margin-top:var(--space-2);}
.psb-share .share-list-link{margin:var(--space-2);}
.psb-share .svgicon{width:36px; height:auto;}

.result-form{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:calc(var(--max-zindex) - 100);top: 0; padding:var(--space-4);}
.result-form-close{position:fixed; width:100%; height:100%; top:0; right:0;} 
.result-form > span{max-width: 900px; width: 100%;}
.result-popup{background:#fff; border-radius:var(--rounded-normal); position:relative; max-width:800px; display:grid; overflow:hidden;}
.result-cover:before{padding-top:75%;}
.result-cover {background: var(--background-primary); }
.result-info{display:grid; grid-gap:var(--space-3); padding:var(--space-4); grid-auto-rows:min-content; align-content:center;}
.result-title{color:var(--background-primary); font-size:30px; font-weight:bold; text-transform:uppercase;}
.result-wording{line-height:140%;color: var(--background-primary);}
.result-close{margin-top:var(--space-3);}
.result-close.btn{justify-content: center;text-align: center; }
.form-input-wide {margin: 10px 0; }


@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
  .result-form{background:rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
}

@media screen and (orientation:landscape){
  .result-popup{grid-template-columns:48% 1fr;}
}

@media screen and (min-width:640px){
  .result-popup{grid-template-columns:48% 1fr;}
}




@media screen and (min-width:0px) and (max-width:767px){
  .timeline-row{grid-template-columns:var(--indicator-size) 1fr;}

  .bottom-address{margin-bottom:var(--space-5);} 
  .bottom-address *{text-align:center;}
  .bottom-list{justify-content:center;}
  .bottom-group-list{justify-content:center;}
  
  .footer-copyright{text-align:center; margin-bottom:var(--space-3);}
  .footer-socmed{justify-content:center;}
}

@media screen and (min-width:768px){
  .section-title-main{font-size:36px;}
  .section-title-sub{font-size:24px;}
  
  .hadiah-content{grid-template-columns:repeat(3,1fr);}
  
  .timeline-row{grid-template-columns:1fr var(--indicator-size) 1fr; grid-gap:var(--space-5);}
  .timeline-left .timeline-data{justify-content:flex-end; grid-column:1/2; grid-row:1/2;}
  .timeline-left .timeline-step{grid-column:2/3; grid-row:1/2;}
  .timeline-date{font-size:16px;}

  .bottom-info > span{display:flex; justify-content:space-between;}
  .bottom-link{padding-left:0; padding-right:var(--space-3);}
  .bottom-group-link:last-child{padding-right:0;}
  footer > span{display:flex; justify-content:space-between; align-items:center;}
  
  .psb-share .svgicon{width:48px;}
}

@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
  .popoup-share{-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  background:linear-gradient(45deg, hsl(219deg 71% 13% / 88%) 0%, hsl(334deg 77% 40% / 88%) 100%);}
}