@import url('https://fonts.cdnfonts.com/css/plateia');
@import url('https://fonts.googleapis.com/css2?family=Cause:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
	background-color: #000;
}

@media (min-width: 1200px){
	.container{
		max-width: 81vw;
	}
}
.slick-slider .slick-list, .slick-slider .slick-track{
	-webkit-transform: unset;
	-moz-transform: unset;
	-ms-transform: unset;
	-o-transform: unset;
	transform: unset;
}

/* Shrink */
.seal-hov-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.seal-hov-shrink:hover,
.seal-hov-shrink:focus,
.seal-hov-shrink:active {
	-webkit-transform: scale(0.97);
	transform: scale(0.97);
}

/* Shrink*/
/*==========================================================================================================*/
/*============================================= SECTION 1 ==================================================*/
/*==========================================================================================================*/
.section1{
	background: url(../images/layout/section1/bg2.jpg) no-repeat center top;
	background-size: 100%;
	height: 55vw;
	position: relative;
}
.logo-epic{
	width: 20vw;
    left: 5vw;
    position: absolute;
    top: 3vw;
    filter: drop-shadow(2px 2px 2px black);
}
.img-btn-play{
	width: 5vw;
	margin-top: 1vw;
}
.img-btn-play:hover {
    filter: hue-rotate(45deg);
    transition: 0.5s;
	animation-play-state: paused;
}
.animate__animated:hover {
	animation-play-state: paused;
	transition: 0.5s;
}
.section1 .btn-content{
	width: 23vw;
    /* position: absolute;
    right: 36vw;
    top: 43vw; */
	margin-top: 1.5vw;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.section1 .btn-content ul.btn-list{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.section1 .btn-content ul.btn-list li{
	margin-bottom: 10px;
}
.section1 .btn-content ul.btn-list li a i{
	text-align: center;
	margin-right: 20px;
	font-size: 2.5vw;
}
.section1 .btn-content ul.btn-list li a span{
	text-align: left;
	font-size: 1.4vw;
	text-transform: uppercase;
}
.section1 .btn-content ul.btn-list li a.btn_download img{
	width: 18.584vw;
}
.section1 .btn-content ul.btn-list li a.btn_download img:hover {
    /* width: 18.584vw; */
    filter: grayscale(1);
    transition: 0.5s;
}
.section1 h1.cbt-date{
	color: #000000;
	font-family: 'Plateia';
	font-size: 6.2vw;
	line-height: 1;
	position: absolute;
	transform: rotate(-90deg);
	top: 25vw;
	left: -15vw;
}
.section1 .btn-yellow{
	font-family: 'Gotham';
	font-weight: 300;
	font-style: normal;
	background-color: #ffd200;
	border: 1px solid #ffd200;
	color: #000;
	border-radius: 0;
}
.section1 .btn-yellow:hover{
	background-color: #000;
	border: 1px solid #000;
	color: #ffd200;
}
.section1 .btn-black{
	font-family: 'Gotham';
	font-weight: 300;
	font-style: normal;
	background-color: #000;
	border: 1px solid #ffd200;
	color: #ffd200;
	border-radius: 0;
}
.section1 .btn-black:hover{
	background-color: #ffd200;
	border: 1px solid #ffd200;
	color: #000;
}
.section1 .lv70{
	position: absolute;
	top: 17vw;
    right: 8vw;
}
.section1 .lv70 img.imglv70{
	width: 11vw;
}
.title-prereg {
    width: 25vw;
    margin-top: 1vw;
    animation: gentleGrow 4s ease-in-out infinite;
}

@keyframes gentleGrow {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}
.hero-logo{
    position:relative;
    width: 28vw;
    margin: auto;
    padding-top: 8vw;
    display:flex;
    justify-content:center;
    align-items:center;
	overflow:hidden;
}
.logo-main{
    width:100%;
    z-index:10;
    position:relative;
    animation:
    floating 4s ease-in-out infinite;
    filter:
    drop-shadow(0 0 5px #d5f070)
    drop-shadow(0 0 5px #4dd8ff79)
    drop-shadow(0 0 6px #ffd24a);
}
.logo-light{
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,212,255,.45),
    rgba(255,190,0,.15),
    transparent 70%);
    filter:blur(50px);
}
/* .logo-shine{
    position:absolute;
    width: 30vw;
    height: 25vw;
    top: 14vw;
    background:
    linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.8) 50%,
    transparent 80%);
    transform:translateX(-120%) skewX(-25deg);
    animation:shineMove 4s infinite;
    z-index:20;
    pointer-events:none;

} */
@keyframes floating{
	0%{
	transform:translateY(0px);
	}
	50%{
	transform:translateY(-12px);
	}
	100%{
	transform:translateY(0);
	}
}
@keyframes shineMove{
	0%{
	transform:translateX(-130%) skewX(-25deg);
	}
	100%{
	transform:translateX(130%) skewX(-25deg);
	}
}


@media(max-width: 768px){
	.section1{
		background: url(../images/layout/section1/mobile/bg2.jpg) no-repeat center top;
		background-size: 100%;
		height: 177.7vw;
		position: relative;
	}
	.logo-epic {
		width: 45vw;
	}
	.section1 h1.cbt-date {
		color: #b50000;
		font-size: 7vw;
		position: absolute;
		transform: rotate(0);
		top: 149vw;
		left: 0;
		width: 100%;
		text-align: center;
		letter-spacing: 5px;
		font-style: italic;
	}
	.img-btn-play {
		width: 18vw;
		margin-top: 3.5vw;
	}
	.section1 .btn-content{
		width: 100%;
		position: relative;
		right: 0;
		top: 5vw;
		margin: 0 auto;
		text-align: center;
		display: block;
	}
	.section1 .btn-content ul.btn-list li{
		margin-bottom: 3px;
	}
	.section1 .btn-content ul.btn-list li a i{
		text-align: center;
		margin-right: 15px;
		font-size: 3.5vw;
	}
	.section1 .btn-content ul.btn-list li a span{
		text-align: left;
		font-size: 2.7vw;
		text-transform: uppercase;
	}
	.section1 .btn-content ul.btn-list li a{
		/* padding: 2vw 4vw; */
	}
	.section1 .btn-content ul.btn-list li a img.btn-signup{
		width: 35vw;
	}
	.section1 .btn-content ul.btn-list li a.btn_download img{
		width: 65vw;
	}
	.hero-logo {
		width: 70vw;
        padding-top: 30vw;
	}
	.logo-light {
		width: 2vw;
		height: 2vw;
	}
    .title-prereg {
        width: 70vw;
        margin-top: 4vw;
    }
}
/*==========================================================================================================*/
/*=========================================== END SECTION 1 ================================================*/

/*==========================================================================================================*/

/*==========================================================================================================*/
/*============================================= SECTION 2 ==================================================*/
/*==========================================================================================================*/
.section2{
	background: url(../images/layout/section2/bg2.jpg) no-repeat center top;
	background-size: 100%;
	height: 62.5vw;
	position: relative;
}
.img-prereg{
	width: 100%;
    padding: 15vw 0vw 0vw 0vw;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #d1892b, 0 0 0px #d1892b, 0 0 18px #533260, 0 0 15px #533260, 0 0 15px #533260, 0 0 10px #533260, 0 0 15px #533260;
  }
  to {
    text-shadow: 0 0 0px #d1892b, 0 0 18px #533260, 0 0 15px #533260, 0 0 15px #533260, 0 0 10px #533260, 0 0 15px #533260, 0 0 20px #533260;
  }
}
.number-prereg{
	font-size: 5vw;
    font-family: 'Cause', cursive;
    font-weight: 900;
    color: #e9bc61;
    margin-top: 6vw;
    /* font-style: italic; */
    -webkit-text-stroke: 4px #844bac;
    text-stroke: 4px navy;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    letter-spacing: 5px;
}
.btn-prereg{
	width: 20vw;
    position: absolute;
    right: 39.5vw;
    top: 54.5vw;
    background: transparent;
    border: unset;
	cursor: unset !important;
}
.btn-prereg img {
	width: 18.584vw;
}
/* .btn-prereg img:hover{
    filter: grayscale(1);
    transition: 0.5s;
} */
.section2 .fa-solid, .fas {
    font-weight: 900;
    color: #f5d9b5;
}
.form-control::placeholder {
  color: #533260 !important;
  font-weight: bold !important;
}
.section2 .modal-dialog {
	background: url(../images/layout/section2/bg-modal-new.png) no-repeat center top;
	
}
.section2 .modal-content{
	/* background: url(../images/layout/section2/bg-modal.png) no-repeat center top; */
	background: transparent;
	max-width: 500px;
	border: unset;
}
.section2 .modal-header{
	border: unset;
}
.section2 .modal-dialog{
	max-width: 1800px;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 135px 20px;
}
/* .section2 .modal-dialog {
	background: url(../images/layout/section2/bg-modal.png) no-repeat center top;
	margin-top: 5vw;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 8vw 35vw;
    max-width: 2000px;
    height: auto;
    padding: 210px 690px;
}
.section2 .modal-content{
	background: transparent;
	border: unset;
}
.section2 .modal-body {
    min-height: 15vw;
    height: auto;
}
.section2 .modal-footer{
	border-top: unset;
	margin-top: 4vw;
} */
.section2 .btn-close {
    margin-top: -112px;
    font-size: 35px;
    margin-right: -175px;
    font-weight: bold;
}
.section2 .form-group{
	padding: 15px 0px;
}
#form-register-btnSubmit {
	margin-top: 40px;
}
#form-register-btnSubmit img{
	width: 100%;
}
#form-register-btnSubmit img:hover{
	width: 100%;
	filter: grayscale(1);
    transition: 0.7s;
}
#form-register .form-control{
	background-color: #f5d9b5;
    color: #533260;
    border: 2px #533260 solid;
}
#form-register ::placeholder {
  color: #d7d7d7;
}
#form-register .input-group-text {
	background-color: #533260;
    border: 2px #533260 solid;
	color: #f5d9b5;
}
.section2 .invalid-feedback {
    /* margin-top: -0.05rem; */
	margin-top: 2.5rem;
    color: #533260;
    position: absolute;
    text-align: left;
}

@media(max-width: 768px){
	.btn-prereg{
	width: 100%;
    position: absolute;
    right: 0px;
    left: 0px;
    top: 275vw;
    padding: 0vw 25vw;
	}
	.btn-prereg img {
		width: 100%;
	}
	.number-prereg {
		font-size: 12vw;
        margin-top: 9vw;
        letter-spacing: 2px;
	}
	.section2 .modal-dialog {
        background: url(../images/layout/section2/mobile/bg-modal.png) no-repeat center top;
        background-size: contain; /* atau 100% auto */
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 80px 20px 40px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
	#form-register-btnSubmit {
		margin-top: 15px;
	}
	.section2 .form-group {
		padding: 10px 0px;
	}
    .section2 .modal-content {
        background: transparent;
        width: 100%;
        max-width: 320px; /* sesuaikan dengan area isi pada background */
        border: 0;
        box-shadow: none;
    }
    .section2 .modal-body {
        padding: 15px 0px;
    }
    .section2 .btn-close {
        position: absolute;
        top: 15px;
        right: 15px;
        margin: 0;
        font-size: 20px;
        filter: invert(1);
    }
	.img-prereg{
		margin-top: 0vw;
        width: 100%;
        padding: 30vw 13vw 0vw 13vw;
	}
	.section2{
		background: url(../images/layout/section2/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 292vw;
		position: relative;
	}
	.section2-slider{
		background: url(../images/layout/section2/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 177.7vw;
		position: relative;
	}
	.section2 .btn-close {
		margin-top: -60px;
        font-size: 20px;
        margin-right: -40px;
        color: #000;
        filter: unset;
	}
}
/*==========================================================================================================*/
/*=========================================== END SECTION 2 ================================================*/
/*==========================================================================================================*/

/*==========================================================================================================*/
/*============================================= SECTION 3 ==================================================*/
/*==========================================================================================================*/
.section3-slider .slick-prev{
	/* top: 55%;
	left: 60px !important; */
	top: 90%;
    left: 40vw;
	z-index: 9999;
	position: absolute;
	width: 3.5vw;
	height: 5vw;
}
.section3-slider .slick-next{
	/* top: 55%;
	right: 60px !important; */
	top: 90%;
    right: 40vw;
	z-index: 9999;
	position: absolute;
	width: 3.5vw;
	height: 5vw;
}
.section3-slider .slick-prev:before{
	content: "" !important;
	background: url(../images/layout/section3/prev.png) no-repeat left top;
	background-size: 100%;
	width: 3.5vw;
	height: 5vw;
	float: left;
	position: relative;
	opacity: 1 !important;
}
.section3-slider .slick-next:before{
	content: "" !important;
	background: url(../images/layout/section3/next.png) no-repeat right top;
	background-size: 100%;
	width: 3.5vw;
	height: 5vw;
	float: right;
	position: relative;
	opacity: 1 !important;
}
.section3-slider.slick-dotted.slick-slider{
	margin-bottom: 0;
}
.section3-slider.slick-dotted.slick-slider{
    margin-bottom:0;
}

.section3-slider .slick-dots{
    position:absolute;
    bottom:5vw;
    left:50%;
    transform:translateX(-50%);
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:2.5vw;
    z-index:999;
}

.section3-slider .slick-dots li{
    width:18px;
    height:18px;
    margin:0;
}

.section3-slider .slick-dots li button{
    width:18px;
    height:18px;
    padding:0;
}

.section3-slider .slick-dots li button:before{
    content:"";
    width:1.5vw;
    height:1.5vw;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);

    background:#666;
    border:2px solid #888;
    opacity:1;
    box-sizing:border-box;
}

.section3-slider .slick-dots li.slick-active button:before{
    background:#7b2cff;
    border:2px solid #ffbf38;
    box-shadow:0 0 8px rgba(255,191,56,.7);
}

.section3-slider .slick-dots li button:before{
    opacity:1 !important;
}

.section3-slider .slick-dots li.slick-active button:before{
    opacity:1 !important;
}

.section3-slider .slick-dots li button{
    width:1.5vw;
    height:1.5vw;
    padding:0;

    background:#555;
    border:1px solid #777;

    transform:rotate(45deg);
}

.section3-slider .slick-dots li button:before{
    display:none;
}

.section3-slider .slick-dots li.slick-active button{
    background:#8d46ff;
    border-color:#ffd55a;
}
.section3-slider .slick-prev:hover:before,
.section3-slider .slick-next:hover:before{
    filter:
        brightness(1.2)
        drop-shadow(0 0 5px #b54cff)
        drop-shadow(0 0 10px #b54cff)
        drop-shadow(0 0 3px #ffd45c);
}


@media(max-width: 768px){
	.section3-slider .slick-prev{
		top: 3%;
		left: 5px !important;
		z-index: 999;
		width: 25px;
		height: 53px;
	}
	.section3-slider .slick-next{
		top: 3%;
		right: 5px !important;
		z-index: 999;
		width: 25px;
		height: 53px;
	}
	.section3-slider .slick-prev:before{
		content: "" !important;
		background: url(../images/layout/section3/prev.png) no-repeat left top;
		background-size: 100%;
		width: 25px;
		height: 53px;
		float: left;
		position: relative;
		opacity: 1 !important;
	}
	.section3-slider .slick-next:before{
		content: "" !important;
		background: url(../images/layout/section3/next.png) no-repeat right top;
		background-size: 100%;
		width: 25px;
		height: 53px;
		float: right;
		position: relative;
		opacity: 1 !important;
	}
	.section3-slider.slick-dotted.slick-slider{
		margin-bottom: 0;
	}
	.section3-slider .slick-dots{
		bottom: unset;
		position: absolute;
		z-index: 9999;
		top: 110vw;
	}
	.section3-slider .slick-dots li{
		position: relative;
		display: inline-block;
		width: 15px;
		height: 15px;
		margin: 0 7px;
		padding: 0;
		cursor: pointer;
	}
	.section3-slider .slick-dots li button{
		width: 15px;
		height: 15px;
	}
	.section3-slider .slick-dots li button:before{
		background-color: transparent;
		border: 1px solid #533260;
		border-radius: 50%;
		opacity: 1;
		content: '';
/*		transform: rotate(45deg);*/
		width: 15px;
		height: 15px;
	}
	.section3-slider .slick-dots li.slick-active button:before{
		background-color: #533260;
		opacity: 1;
		color: unset;
		border-radius: 50%;
/*		transform: rotate(45deg);*/
	}
	.section3-slider .slick-dots{
        top:auto;
        bottom:12vw;
        left:50%;
        transform:translateX(-50%);
        gap:12px;
    }

    .section3-slider .slick-dots li{
        width:14px;
        height:14px;
    }

    .section3-slider .slick-dots li button{
        width:14px;
        height:14px;
    }

    .section3-slider .slick-dots li button:before{
        width:10px;
        height:10px;
    }
}
/*==========================================================================================================*/
/*=========================================== END SECTION 3 ================================================*/

/*==========================================================================================================*/

/*================================================================= SOSMED ICON ==========================================================================*/
#sosmed-icon{
    position: fixed;
    /* bottom: 30px; */
    top: 150px;
    right: 15px;
    width: 155px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:2;
}
#sosmed-icon .sosmed-bg{
    position: absolute;
    right: 0px;
    width: 100%;
}
#sosmed-icon .list-group-item {
    background-color: unset;
    text-align: center;
}
#sosmed-icon .list-group {
    padding-left: 0;
    margin-bottom: 0;
}
#sosmed-icon .list-group-item{
    /* padding: 10px 15px; */
    padding: 20px 10px;
    border: unset;
}

@media(max-width: 768px){
    #sosmed-icon {
        width: 25vw;
        height: 60vw;
        right: 0vw;
        /* bottom: 55vw; */
        top: 5vw;
        z-index: 12;
    }
    #sosmed-icon .list-group-item {
        padding: 3.5vw 0vw;
        border: unset;
    }
    #sosmed-icon .list-group-item img{
        width: 6vw;
        height: 6vw;
        object-fit: contain;
    }
}

/* ================================
   SOSMED MODERN EFFECT
   ================================ */

#sosmed-icon {
    /* Kedut-kedut halus */
    animation: sosmedWiggle 3.5s ease-in-out infinite;

    /* Glow halus */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}

/* Shine lebih kecil dan soft */
#sosmed-icon::after {
    content: "";
    position: absolute;

    /* Shine dibuat sejajar dengan background */
    top: 8%;
    left: 35%;

    width: 30%;
    height: 84%;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.10) 20%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0.10) 80%,
        transparent 100%
    );

    transform: skewX(-15deg);
    opacity: 0;
    pointer-events: none;

    /* animation: sosmedShine 4s ease-in-out infinite; */

    z-index: 10;
}

/* Background juga ikut berdenyut */
#sosmed-icon .sosmed-bg {
    animation:
        sosmedPulse 2.2s ease-in-out infinite,
        sosmedGlow 3s ease-in-out infinite;
}

/* Icon satu-satu sedikit "kedut" */
#sosmed-icon .list-group-item {
    transition: transform 0.25s ease, filter 0.25s ease;
}

#sosmed-icon .list-group-item img {
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* Hover */
#sosmed-icon .list-group-item:hover img {
    transform: scale(1.18);
    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 12px rgba(255, 215, 80, 0.7));
}

/* ================================
   ANIMATION
   ================================ */

/* Efek kedut / goyang kecil */
@keyframes sosmedWiggle {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    10% {
        transform: translate3d(-2px, 0, 0) rotate(-0.7deg);
    }

    20% {
        transform: translate3d(2px, 0, 0) rotate(0.7deg);
    }

    30% {
        transform: translate3d(-2px, 0, 0) rotate(-0.5deg);
    }

    40% {
        transform: translate3d(1px, 0, 0) rotate(0.4deg);
    }

    50%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* Shine berjalan dari kiri ke kanan */
@keyframes sosmedShine {
    0% {
        transform: translateX(-35px) skewX(-15deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    30% {
        transform: translateX(35px) skewX(-15deg);
        opacity: 0.8;
    }

    40%,
    100% {
        transform: translateX(35px) skewX(-15deg);
        opacity: 0;
    }
}

/* Denyut background */
@keyframes sosmedPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

/* Glow */
@keyframes sosmedGlow {
    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.15));
    }

    50% {
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.55))
            drop-shadow(0 0 15px rgba(255, 210, 80, 0.25));
    }
}


/*=============================================================== END SOSMED ICON ========================================================================*/

/*==========================================================================================================*/
/* .footer-download p{
	font-family: 'Gotham';
    color: #fff;
    font-size: 0.9vw;
    margin: -2vw 0 0;
    text-align: center;
    z-index: 1;
    position: relative;
} */
.footer-download{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    width: 100%;
    padding: 1vw 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #000000 0%, #1e272f 45%, #213b63 100%);
}
.footer-download img{
    width: 2vw;
    height: auto;
}
.footer-download p{
    font-family: 'Gotham', sans-serif;
    color: #fff;
    font-size: 0.9vw;
    margin: 0;
    line-height: 1;
}
.float-wrap{
	position: fixed;
	right: 12vw;
	top: 14vw;
	z-index: 2;
}
.float-wrap .float-content{}
.float-wrap .float-content img{
	width: 9.896vw;
}
@media(max-width: 768px){
	.float-wrap{
		position: fixed;
		right: 8vw;
		top: 78vw;
		z-index: 2;
	}
	.float-wrap .float-content img{
		width: 28vw;
	}
	.footer-download{
        gap: 2vw;
        padding: 3vw 0;
    }
    .footer-download img{
        width: 8vw;
    }
    .footer-download p{
        font-size: 3vw;
        line-height: 1.3;
    }
}