.headerSpace{height: 65px;}
#header{height: 65px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 55; background: var(--bg_pink);}
#header.headerBg:before{content: ''; opacity: 0.3; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('../../../images/background/navbar.png'); background-size: cover;}
#header > div{max-width: 1200px; z-index: 1; position: relative;}
#header .h_logo{width: 135px; height: 65px; float: left;}
#header .h_logo > div{width: 170px; height: 49px; margin-top: 7px; cursor: pointer;}
#header .h_menu{height: 65px; float: right; white-space: nowrap;}
#header .h_menu > a{display: inline-block;}
#header .h_menu > a .hmTxt{padding: 21px 20px 23px 20px; font-weight: bold; color: var(--text_white); transition: var(--transition);}
#header .h_menu > a .hmTxt > div{width: 100%; position: relative;}
#header .h_menu > a .hmTxt > div:before{content: ''; position: absolute; bottom: -10px; width: 100%; height: 2px; background: var(--bg_white); opacity: 0;}
#header .h_menu > a .hmTxt.active > div:before{opacity: 1;}
#header .h_menu > a .hmBtn{padding: 5px 15px; border-radius: 50px; background: var(--bg_white); color: var(--text_pink);}

#footer{position: relative;}
#footer .fWave > div{padding-bottom: 3%; background-image: url('../../../images/background/footer_wave.png');}
#footer .fBody{background: var(--bg_yellow); min-height: 300px;}
#footer .fBody .fbTop{grid-template-columns: 1fr 300px; padding-top: 35px; padding: 20px 15px; max-width: 1000px;}
#footer .fBody .fbTop .ftLogo{width: 150px; display: inline-block;}
#footer .fBody .fbTop .ftLogo > div{padding-bottom: 23%;}
#footer .fBody .fbTop .ftBox > div:first-child{margin-bottom: 15px; font-size: 25px; font-family: 'bold'; text-transform: uppercase;}
#footer .fBody .fbBottom{margin-top: 25px; border-top: 1px solid var(--bg_black); padding-top: 25px;}
#footer .fBody .fbBottom .fbbMenu{width: min-content; white-space: nowrap;}
#footer .fBody .fbBottom .fbbMenu > a{display: inline-block;}
#footer .fBody .fbBottom .fbbMenu > a > div{padding: 5px 15px; font-family: 'semibold'; color: var(--text_black);}

section{max-width: 1100px;}
section .distance{padding: 0px 20px;}
.contentHeight{min-height: 500px;}

.mobileMenuSign{position: fixed; z-index: 55; top: 0px; left: 0px; height: 0px; width: 100%; display: none;}
.mobileMenuSign > div{top: 12px; cursor: pointer; position: absolute;}
.mobileMenuSign .mmLeft{left: 19px;}
.mobileMenuSign .mmRight{right: 19px;}
.mobileMenuSign > div > div:first-child{width: 25px; height: 25px;}
.mobileMenuSign > div > div:nth-child(2){margin-top: 2px; font-size: 11px; color: var(--text_white);}

.headTitle{padding: 45px 10px; font-size: 25px; font-family: 'semibold'; text-align: center;}
.content{padding: 0px 25px 25px 25px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden;}

.popup_login{padding: 20px;}
.popup_login > div:first-child{font-size: 17px; font-family: 'bold';}

.popup_chat{position: fixed; bottom: 25px; right: 25px; width: 55px; height: 55px; box-shadow: 0px 0px 10px #282828; background: var(--bg_blue); border-radius: 50%; z-index: 55;}
.popup_chat > div{position: relative; top: 12px; width: 30px; height: 30px;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.mp1{background-image: url('../../../images/mediapartner/1.png');}
.mp2{background-image: url('../../../images/mediapartner/2.png');}
.mp3{background-image: url('../../../images/mediapartner/3.png');}
.mp4{background-image: url('../../../images/mediapartner/4.png');}
.mp5{background-image: url('../../../images/mediapartner/5.png');}
.mp6{background-image: url('../../../images/mediapartner/6.png');}
.mp7{background-image: url('../../../images/mediapartner/7.png');}
.mp8{background-image: url('../../../images/mediapartner/8.png');}
.mp9{background-image: url('../../../images/mediapartner/9.png');}
.mp10{background-image: url('../../../images/mediapartner/10.png');}
.mp11{background-image: url('../../../images/mediapartner/11.png');}
.mp12{background-image: url('../../../images/mediapartner/12.png');}
.mp13{background-image: url('../../../images/mediapartner/13.png');}
.mp14{background-image: url('../../../images/mediapartner/14.png');}
.mp15{background-image: url('../../../images/mediapartner/15.png');}

/**FRONT**/
.frontBanner > div{padding-bottom: 39%; background-image: url('../../../images/background/banner.png');}

.frontAbout{grid-template-columns: 230px 1fr; max-width: 800px; margin: 100px auto;}
.frontAbout > div:first-child{font-size: 40px; font-family: 'bold'; color: var(--text_pink);}
.frontAbout > div:nth-child(2){font-size: 20px;}

.frontTimeline{padding: 35px 15px; background: var(--bg_blue); color: var(--text_white);}
.frontTimeline .ftHead{text-align: center;}
.frontTimeline .ftHead > div:first-child{font-size: 35px; font-family: 'bold'; color: var(--text_yellow);}
.frontTimeline .ftHead > div:nth-child(2){font-family: 'semibold'; font-size: 17px;}
.frontTimeline .ftBody{max-width: 1000px; margin-top: 35px; grid-template-columns: 1fr 1fr 1fr;}
.frontTimeline .ftBody > div{height: 100%;}
.frontTimeline .ftBody .fbItem > div:first-child{font-size: 20px; font-family: 'semibold'; color: var(--text_yellow);}
.frontTimeline .ftBody .fbItem > div:nth-child(2){font-size: 17px; font-family: 'semibold'; padding: 10px 0px;}

.frontSubmit{padding-top: 50px; padding-bottom: 45px; text-align: center; border-bottom: 1px solid var(--bg_pink);}
.frontSubmit > div:first-child{font-size: 20px; margin-bottom: 20px; font-family: 'semibold';}
.frontSubmit button{font-size: 25px;}

.frontStep{padding: 15px 15px 55px 15px;}
.frontStep .fsHead{text-align: center; font-size: 35px; font-family: 'bold'; color: var(--text_pink);}
.frontStep .fsBody{margin-top: 35px; max-width: 1000px;}

 /* Banner full-width */
    .live-banner {
      width: 100%;
      background: var(--bg_blue); /* merah */
      color: #ffffff;
      box-sizing: border-box;
      padding: 35px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* Kontainer link/tombol */
    .live-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      font-weight: 600;
      font-size: 18px;
      background: rgba(255,255,255,0.3);
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.12);
      transition: background 150ms ease, transform 120ms ease;
    }

    .live-link:focus,
    .live-link:hover {
      background: rgba(255,255,255,0.12);
      transform: translateY(-2px);
      outline: none;
    }

    /* Ikon play sederhana */
    .play-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: #ffffff;
      color: var(--bg_blue);
      border-radius: 50%;
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
    }

/**INTRO**/
.intro_bg{padding-bottom: 59%; width: 100%; background-image: url('../../../images/background/header.png'); background-size: cover; opacity: 0.6; position: absolute; top: 0px; left: 0px; z-index: 0;}
.intro_header{height: 450px; position: relative; z-index: 1; margin-top: 45px;}
.intro_header .ihLogo{width: 500px;}
.intro_header .ihLogo > div{padding-bottom: 38%; background-image: url('../../../images/logo_500.png'); background-repeat: no-repeat; background-size: 100%;}
.intro_header .ihSlogan{margin-top: 45px; text-align: center; font-size: 20px; color: var(--text_white);}
.intro_header .lhBtn{margin-top: 30px; text-align: center;}
.intro_header .lhBtn button{padding: 13px 30px; font-size: 15px;}
.intro_about{position: relative;}
.intro_about > div{max-width: 750px; padding: 25px; background: #E8E8E8; border-radius: 20px; color: #404040;}
.intro_about .iaJuri{display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.intro_about .iaJuri > div{width: 100%;}
.intro_about .iaJuri > div > div:first-child{padding-bottom: 100%; background-size: cover;}
.intro_about .iaJuri > div > div:nth-child(2){margin-top: 10px; text-align: center;}
.intro_about .iaJuri .ij1{background-image: url('../../../images/background/j1.png');}
.intro_about .iaJuri .ij2{background-image: url('../../../images/background/j2.png');}
.intro_about .iaJuri .ij3{background-image: url('../../../images/background/j3.png');}
.intro_about .iaJuri .ij4{background-image: url('../../../images/background/j4.png');}
.intro_about .iaJuri .ij5{background-image: url('../../../images/background/j5.png');}
.intro_about .iaTitle{font-size: 30px; font-family: 'semibold';}
.intro_about .iaSpace{height: 45px;}

.intro_more{padding: 50px 0px; background: #404040; margin-top: 50px;}
.intro_more > div{display: grid; max-width: 800px; box-sizing: border-box; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
.intro_more > div > a{width: 100%;}
.intro_more .imBox{display: grid; grid-template-columns: 25px 1fr; align-items: center; border-radius: 10px; grid-gap: 15px; padding: 10px 15px; background: var(--bg_orange); box-sizing: border-box;}
.intro_more .imBox > div{width: 100%; color: var(--text_white);}
.intro_more .imBox > div:first-child > div{width: 25px; height: 25px;}

/**REGISTER**/
.register_layout{max-width: 500px; padding: 25px 0px; min-height: calc(100vh - 200px);}
.register_layout > div:first-child{font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.register_layout > div:nth-child(2){margin-bottom: 10px;}
.register_layout > div:nth-child(3){margin-bottom: 20px;}
.register_layout > div:nth-child(4){margin-bottom: 22px;}

/**COMING**/
.coming{width: 90%; max-width: 500px; margin-top: 50px; margin-bottom: 65px;}
.coming > div:first-child{margin-top: 30px;}
.coming > div:first-child img{width: 100%;}
.coming > div:nth-child(2){padding: 25px 10px; background: var(--bg_white); text-align: center;}
.coming > div:nth-child(2) > div:first-child{font-size: 17px; font-family: 'bold';}
.coming > div:nth-child(2) > div:nth-child(2){margin-top: 5px;}
.coming > div:nth-child(2) > div:nth-child(3){margin-top: 10px;}
.coming > div:nth-child(2) > div:nth-child(4){margin-top: 20px; color: var(--text_silver);}

.coming_logo{margin-bottom: 45px;}
.coming_logo > div{width: 180px; height: 42px;}

/**WINNERS**/
.winners_layout .wlHead{background: var(--bg_blue); height: 300px;}
.winners_layout .wlHead .whLogo{width: 220px; padding-top: 25px;}
.winners_layout .wlHead .whLogo > div{padding-bottom: 75%;}
.winners_layout .wlHead .whTitle{font-size: 25px; text-align: center; margin-top: 25px; font-weight: bold; color: var(--text_white);}
.winners_page{display: grid; margin-top: 25px; max-width: 700px; grid-template-columns: 1fr 1fr; grid-gap: 15px; padding: 15px; box-sizing: border-box;}
.winners_page > div{width: 100%;}
.winners_page .wpContent > a > div{padding: 10px 15px; background: var(--bg_white); transition: var(--transition); border: 1px solid var(--bg_silver); border-radius: 10px; display: grid; grid-template-columns: 45px 1fr; grid-gap: 15px; align-items: center;}
.winners_page .wpContent > a > div:hover{background: var(--bg_silvercalm);}
.winners_page .wpContent > a:not(:last-child) > div{margin-bottom: 15px;}
.winners_page .wpContent > a > div > div{width: 100%;}
.winners_page .wpContent > a > div > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silver); border-radius: 5px;}
.winners_page .wpContent > a > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.winners_page .wpContent > a > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}

/**LOGIN**/
.login_box{padding: 25px; border: 2px solid var(--bg_silvercalm); border-radius: 10px; max-width: 550px; margin-top: 25px; margin-bottom: 35px;}
.login_box > div > div:first-child{font-size: 17px; font-family: 'bold';}

/**HOME**/
.home_spillyourstories{padding: 13px 15px; margin-bottom: 20px; border-radius: 10px; background: #3c586c; color: var(--text_white); border: 2px solid #ed7f56;}
.home_spillyourstories > div:first-child{font-size: 17px; font-weight: bold; margin-bottom: 10px;}

.home_header{padding: 15px 0px;}
.home_header > div:first-child{font-size: 17px;}
.home_header > div:nth-child(2){margin-top: 10px; color: var(--text_silver);}

.home_user{margin-bottom: 15px;}

.home_info{background: #eeeeff; border-top: 2px solid var(--bg_blue); padding: 15px;}

.home_work_count{margin-top: 35px; margin-bottom: 30px;}
.home_work_count > div:first-child{font-family: 'bold';}
.home_work_count > div:nth-child(2){margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;}
.home_work_count > div:nth-child(2) > div{width: 100%; text-align: center; background: var(--bg_silvercalm); border-radius: 10px;}
.home_work_count > div:nth-child(2) > div.hwcNot{opacity: 0.2;}
.home_work_count > div:nth-child(2) > div > div:first-child{margin-top: 15px;}
.home_work_count > div:nth-child(2) > div > div:first-child > div{width: 40px; height: 40px;}
.home_work_count > div:nth-child(2) > div > div:nth-child(2){font-family: 'bold'; padding: 10px 0px; border-bottom: 1px solid var(--bg_silver);}
.home_work_count > div:nth-child(2) > div > div:nth-child(3){padding: 15px 0px 17px 0px; font-size: 25px; height: 37px;}
.home_work_count > div:nth-child(2) > div > div:nth-child(4){margin-top: 15px; margin-bottom: 25px;}

.home_work_submit{padding: 10px 15px; background: var(--bg_orange); border-radius: 10px; margin-top: 20px; color: var(--text_white);}
.home_work_submit > div:first-child{font-weight: bold; margin-bottom: 10px;}
.home_work_submit .hwsCount{padding: 10px 15px; margin-top: 10px; background: var(--bg_white); border-radius: 10px; color: var(--text_black);}
.home_work_submit .hwsCount span{padding: 2px 5px; border-radius: 10px; background: var(--bg_blue); color: var(--text_white); font-family: 'bold';}

/**WORKS**/
.works_head{margin-top: 20px;}
.works_head > div:first-child{font-size: 17px; font-family: 'bold';}
.works_head > div:nth-child(2){margin-top: 10px;}

.works_info{padding: 10px 15px; margin-top: 25px; background: var(--bg_orange); border-radius: 10px; color: var(--text_white);}
.works_info span{padding: 2px 5px; border-radius: 10px; background: var(--bg_blue); font-family: 'bold';}

.works_write{display: grid; grid-template-columns: 1fr 200px;}
.works_write > div{width: 100%;}
.works_write > div:first-child{font-size: 15px;}
.works_write > div:nth-child(2){text-align: right;}

.works_empty{margin-top: 50px; margin-bottom: 50px; min-height: 150px; text-align: center;}
.works_empty > div:first-child{font-size: 17px; font-family: 'bold';}

/**SUBMIT**/
.submit_layout{max-width: 500px; margin-top: 20px;}

.submit_head{margin-bottom: 15px; padding: 15px; border: 1.5px solid var(--bg_black); border-radius: 10px; display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px; box-sizing: border-box;}
.submit_head > div{width: 100%;}
.submit_head > div:first-child > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.submit_head .shType > span{padding: 3px 5px; border-radius: 5px; color: var(--text_white); font-size: 11px;}
.submit_head .shTitle{margin-top: 5px; font-size: 17px; font-weight: bold;}

.submit_detail{margin-top: 25px;}
.submit_detail .sdDesc{padding: 5px 10px; border-radius: 5px; margin-bottom: 15px; background: var(--bg_silvercalm);}
.submit_detail .sdJoined{padding: 15px 10px; border-radius: 5px; color: var(--text_white); margin-bottom: 15px; background: var(--bg_green);}
.submit_detail .sdInput > div:not(:last-child){margin-bottom: 15px;}
.submit_detail .sdInput textarea{min-height: 210px;}
.submit_detail .sdInput .sdiInfo{color: var(--text_silver);}

.submit_detail{margin-top: 25px; margin-bottom: 30px;}
.submit_detail .sdPart{margin-bottom: 25px;}
.submit_detail .sdPart > div:first-child{font-family: 'bold'; font-size: 15px;}
.submit_detail .sdPart > div:nth-child(2){}
.submit_detail .sdPart > div:nth-child(3){margin-top: 15px;}
.submit_detail .sdPart > div:nth-child(3) > div{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; align-items: center; padding: 10px 7px; border-radius: 5px; border: 1px solid var(--bg_silver);}
.submit_detail .sdPart > div:nth-child(3) > div:not(.publish){opacity: 0.5;}
.submit_detail .sdPart > div:nth-child(3) > div:not(:last-child){margin-bottom: 10px;}
.submit_detail .sdPart > div:nth-child(3) > div > div{width: 100%;}
.submit_detail .sdPart > div:nth-child(3) > div > div:first-child{text-align: center;}
.submit_detail .sdPart > div:nth-child(3) > div:not(.publish) > div:nth-child(2){color: var(--text_silver);}
.submit_detail .sdPart > div:nth-child(3) > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.submit_detail .sdPart > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(2){margin-top: 1px; font-size: 11px; color: var(--text_green);}
.submit_detail .sdPart > div:nth-child(3) > div:not(.publish) > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}
.submit_detail .sdTerms{color: var(--text_black); font-weight: bold;}
.submit_detail .sdBtn{margin-top: 10px;}
.submit_detail .sdBtn button{width: 200px;}

/**CLASS**/
.class_header{margin-top: 20px; margin-bottom: 15px;}
.class_header > div:first-child{font-size: 20px; font-weight: bold;}

.class_layout{max-width: 600px; margin-top: 25px;}
.class_layout > div:first-child{display: grid; grid-template-columns: 200px 1fr; grid-gap: 15px;}
.class_layout > div:first-child > div{width: 100%;}
.class_layout > div:first-child > div:first-child > div{padding-bottom: 100%; background-color: var(--bg_silvercalm); border-radius: 10px;}
.class_layout .clTitle{font-weight: bold; font-size: 17px; margin-bottom: 3px;}
.class_layout .clSpeaker{color: var(--text_silver);}
.class_layout .clDesc{margin-top: 10px;}

.class_content{margin-top: 15px; margin-bottom: 25px;}
.class_content > div:first-child{font-family: 'bold'; margin-bottom: 15px;}

/**CHAT**/
.chat_layout{max-width: 500px; margin-top: 25px; margin-bottom: 25px;}
.chat_layout .clInfo{padding: 10px 15px; background: var(--bg_silvercalm); border-radius: 5px;}
.chat_layout .clHead{margin-top: 15px;}
.chat_layout .clContent{margin-top: 15px; min-height: 200px;}
.chat_layout .clContent > div:not(:last-child){margin-bottom: 10px;}
.chat_layout .clContent .ccBox{padding: 10px;}
.chat_layout .clContent .ccBox > div:first-child{font-weight: bold;}
.chat_layout .clContent .ccBox.me{text-align: right; border-radius: 10px 0px 10px 10px; box-shadow: inset 0px 0px 0px 1.5px var(--bg_silvercalm);}
.chat_layout .clContent .ccBox.you{border-radius: 10px 10px 10px 0px; background: var(--bg_silvercalm);}

/**INFO**/
.info_faq{border-top: 1px solid var(--bg_black); margin-bottom: 25px;}
.info_faq > div{padding: 15px 0px; cursor: pointer;}
.info_faq > div:not(:first-child){border-top: 1px solid var(--bg_black);}
.info_faq > div > div:first-child{font-family: 'bold'; display: grid; grid-template-columns: 1fr 20px; grid-gap: 15px;}
.info_faq > div > div:first-child > div{width: 100%;}
.info_faq > div:hover > div:first-child > div:first-child{color: var(--text_blue);}
.info_faq > div > div:first-child > div:nth-child(2) > div{width: 20px; height: 20px;}
.info_faq > div > div:nth-child(2){margin-top: 5px; display: none;}

.info_prize{max-width: 500px;}
.info_prize > div{font-size: 18px;}
.info_prize > div b{text-decoration: underline;}

/**ERROR**/
.error_page{max-width: 500px; background: var(--bg_silvercalm); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; background: var(--bg_orangecalm); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}