/*==================================================
PENTAS SENI RT16
style.css
Version 1.0
==================================================*/

:root{

--primary:#C8102E;
--primary-dark:#8B001C;
--secondary:#FFD54A;

--white:#ffffff;
--black:#1E293B;

--gray:#64748B;
--light:#F8FAFC;

--border:#E5E7EB;

--shadow:0 18px 45px rgba(0,0,0,.10);

--radius:22px;

--transition:.35s;

--container:1200px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--light);

color:var(--black);

overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

.container{

width:90%;
max-width:var(--container);
margin:auto;

}

section{

padding:90px 0;

}

/*==================================================
LOADER
==================================================*/

#loader{

position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;

background:linear-gradient(135deg,#C8102E,#730018);

z-index:99999;

}

.loader-content{

text-align:center;

color:#fff;

}

.loader-logo{

font-size:70px;

margin-bottom:20px;

animation:mic 1.5s infinite;

}

.loader-spinner{

width:60px;
height:60px;

border-radius:50%;

border:5px solid rgba(255,255,255,.2);

border-top:5px solid white;

margin:auto;
margin-top:20px;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes mic{

50%{

transform:translateY(-10px);

}

}

/*==================================================
HEADER
==================================================*/

header{

position:fixed;

top:0;
left:0;

width:100%;

padding:20px 0;

background:rgba(0,0,0,.35);

backdrop-filter:blur(12px);

z-index:999;

}

.back-home{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 25px;

border-radius:50px;

background:rgba(255,255,255,.15);

color:white;

font-weight:600;

transition:.3s;

}

.back-home:hover{

background:white;

color:var(--primary);

}

/*==================================================
HERO
==================================================*/

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

}

.hero-bg img{

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.65));

}

.hero-content{

position:relative;

z-index:5;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:center;

color:white;

}

.badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(15px);

margin-bottom:20px;

font-weight:600;

}

.hero-text h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero-text p{

font-size:19px;

line-height:1.9;

max-width:700px;

margin-bottom:35px;

}

/*==============================
INFO KHUSUS
==============================*/

.info-banner{

display:flex;

gap:15px;

padding:22px;

margin-bottom:30px;

border-radius:18px;

background:rgba(255,213,74,.18);

border-left:6px solid var(--secondary);

backdrop-filter:blur(12px);

}

.info-banner i{

font-size:32px;

color:var(--secondary);

margin-top:5px;

}

.info-banner h3{

margin-bottom:8px;

font-size:22px;

}

.info-banner p{

margin:0;

font-size:16px;

line-height:1.8;

}

/*==============================
BUTTON
==============================*/

.hero-button{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

gap:12px;

padding:17px 34px;

background:var(--primary);

color:white;

border-radius:50px;

font-weight:700;

transition:.35s;

box-shadow:0 15px 35px rgba(200,16,46,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

background:var(--primary-dark);

}

.btn-secondary{

display:inline-flex;

align-items:center;

gap:12px;

padding:17px 34px;

border-radius:50px;

border:2px solid rgba(255,255,255,.25);

background:rgba(255,255,255,.08);

color:white;

backdrop-filter:blur(10px);

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

/*==============================
INFO CARD
==============================*/

.hero-card{

background:rgba(255,255,255,.12);

backdrop-filter:blur(20px);

padding:35px;

border-radius:25px;

border:1px solid rgba(255,255,255,.15);

}

.info-item{

display:flex;

gap:18px;

align-items:center;

padding:18px 0;

border-bottom:1px solid rgba(255,255,255,.15);

}

.info-item:last-child{

border:none;

}

.info-item i{

font-size:28px;

width:55px;
height:55px;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

background:rgba(255,255,255,.18);

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

text-align:center;

max-width:850px;

margin:0 auto 60px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

background:#FFE7EB;

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:18px;

}

.section-title h2{

font-size:42px;

font-weight:800;

margin-bottom:18px;

}

.section-title p{

font-size:18px;

line-height:1.8;

color:var(--gray);

}

/*==================================================
ABOUT
==================================================*/

.about{

background:#ffffff;

}

.about-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.about-card{

background:#fff;

padding:35px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border-top:5px solid var(--primary);

}

.about-card:hover{

transform:translateY(-10px);

}

.about-card i{

font-size:55px;

color:var(--primary);

margin-bottom:20px;

}

.about-card h3{

margin-bottom:15px;

font-size:24px;

}

.about-card p{

color:var(--gray);

line-height:1.8;

}

/*==================================================
KATEGORI
==================================================*/

.kategori{

background:#F9FAFB;

}

.kategori-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.kategori-card{

background:white;

padding:35px 25px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

cursor:pointer;

}

.kategori-card:hover{

transform:translateY(-10px) scale(1.03);

}

.kategori-card{

font-size:55px;

}

.kategori-card h3{

margin-top:18px;

font-size:20px;

}

/*==================================================
PENUTUPAN PENDAFTARAN
==================================================*/

.closing-section{

background:linear-gradient(135deg,#C8102E,#8B001C);

color:white;

}

.closing-card{

text-align:center;

max-width:950px;

margin:auto;

}

.closing-badge{

display:inline-block;

padding:12px 22px;

background:#FFD54A;

color:#8B001C;

border-radius:40px;

font-weight:700;

margin-bottom:25px;

}

.closing-card h2{

font-size:48px;

margin-bottom:20px;

font-weight:800;

}

.closing-card h2 span{

display:block;

margin-top:12px;

font-size:64px;

color:#FFD54A;

}

.closing-card p{

font-size:18px;

line-height:1.8;

max-width:750px;

margin:auto;

margin-bottom:40px;

}

.closing-countdown{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.closing-countdown div{

background:rgba(255,255,255,.15);

padding:30px;

border-radius:18px;

backdrop-filter:blur(10px);

}

.closing-countdown h1{

font-size:56px;

font-weight:800;

margin-bottom:8px;

}

.closing-countdown small{

font-size:16px;

}

/*==================================================
ALUR
==================================================*/

.alur{

background:#fff;

}

.alur-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.alur-card{

padding:35px;

text-align:center;

background:#fff;

border-radius:20px;

box-shadow:var(--shadow);

position:relative;

transition:.35s;

}

.alur-card:hover{

transform:translateY(-10px);

}

.number{

width:70px;

height:70px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

font-weight:bold;

}

.alur-card h3{

margin-bottom:15px;

}

.alur-card p{

color:var(--gray);

line-height:1.8;

}

/*==================================================
KETENTUAN
==================================================*/

.ketentuan{

background:#F8FAFC;

}

.ketentuan-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.rule-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

font-size:17px;

font-weight:500;

transition:.35s;

}

.rule-card:hover{

transform:translateX(8px);

border-left:6px solid var(--primary);

}

/*==================================================
STATISTIK
==================================================*/

.statistik{

background:#ffffff;

}

.stat-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:30px;

}

.stat-card{

background:#fff;

padding:40px 25px;

border-radius:22px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

border-top:5px solid var(--primary);

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card i{

font-size:50px;

color:var(--primary);

margin-bottom:20px;

}

.stat-card h1{

font-size:46px;

font-weight:800;

margin-bottom:10px;

}

.stat-card p{

color:var(--gray);

}



/*==================================================
FORM
==================================================*/

.form-section{

background:#F8FAFC;

}

form{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:var(--shadow);

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:10px;

font-weight:600;

}

.form-group input,
.form-group select,
.form-group textarea{

width:100%;

padding:16px 18px;

border:1px solid #d9d9d9;

border-radius:14px;

font-size:16px;

font-family:inherit;

transition:.3s;

background:#fff;

}

.form-group textarea{

resize:vertical;

min-height:140px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(200,16,46,.10);

}

.check-area{

margin:30px 0;

padding:20px;

background:#FFF7F8;

border-radius:15px;

}

.check-area label{

display:flex;

gap:12px;

align-items:flex-start;

cursor:pointer;

line-height:1.8;

}

.submit-btn{

width:100%;

padding:20px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,#C8102E,#8B001C);

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.submit-btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 35px rgba(200,16,46,.35);

}



/*==================================================
SUCCESS
==================================================*/

.success-box{

display:none;

background:#F8FAFC;

}

.success-card{

max-width:700px;

margin:auto;

background:#fff;

padding:60px;

text-align:center;

border-radius:25px;

box-shadow:var(--shadow);

}

.success-icon{

font-size:80px;

margin-bottom:20px;

}

.success-card h2{

font-size:42px;

margin-bottom:20px;

}

.success-card p{

line-height:1.9;

margin-bottom:15px;

color:var(--gray);

}



/*==================================================
CONTACT
==================================================*/

.contact{

background:#ffffff;

}

.contact-card{

max-width:550px;

margin:auto;

background:white;

padding:45px;

text-align:center;

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

}

.contact-card:hover{

transform:translateY(-8px);

}

.contact-card i{

font-size:60px;

color:var(--primary);

margin-bottom:20px;

}

.contact-card h2{

margin:20px 0;

font-size:30px;

}



/*==================================================
FOOTER
==================================================*/

footer{

background:#760018;

padding:70px 0;

color:white;

text-align:center;

}

footer h2{

font-size:34px;

margin-bottom:15px;

}

footer p{

opacity:.9;

}

footer hr{

margin:30px auto;

max-width:400px;

border:none;

height:1px;

background:rgba(255,255,255,.20);

}



/*==================================================
LOADING SUBMIT
==================================================*/

.loading-submit{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.loading-card{

background:white;

padding:40px;

border-radius:22px;

text-align:center;

width:340px;

}

.loading-spinner{

width:60px;

height:60px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

border:5px solid #ececec;

border-top:5px solid var(--primary);

animation:spin 1s linear infinite;

}



/*==================================================
LIGHT EFFECT
==================================================*/

.hero::before{

content:"";

position:absolute;

top:-250px;

left:-150px;

width:450px;

height:450px;

background:radial-gradient(circle,rgba(255,213,74,.18),transparent 70%);

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:500px;

height:500px;

background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);

pointer-events:none;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.hero-content,
.about-grid,
.form-grid,
.ketentuan-grid{

grid-template-columns:1fr;

}

.alur-grid{

grid-template-columns:1fr;

}

.hero{

height:auto;

padding:170px 0 100px;

}

.hero-text h1{

font-size:54px;

}

.hero-card{

margin-top:40px;

}

}



@media(max-width:768px){

section{

padding:70px 0;

}

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:16px;

}

.section-title h2{

font-size:32px;

}

.closing-card h2{

font-size:34px;

}

.closing-card h2 span{

font-size:46px;

}

.closing-countdown{

grid-template-columns:repeat(2,1fr);

}

form{

padding:30px 20px;

}

.hero-button{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

justify-content:center;

width:100%;

}

header{

padding:15px 0;

}

}



@media(max-width:480px){

.hero-text h1{

font-size:34px;

}

.badge{

font-size:14px;

}

.closing-countdown h1{

font-size:34px;

}

.stat-card h1{

font-size:34px;

}

.success-card{

padding:35px 25px;

}

.contact-card{

padding:35px 25px;

}

}