/*==================================================
FESTIVAL RT16 2026
STYLE.CSS
==================================================*/

:root{

--festival-primary:#C8102E;
--festival-secondary:#8B001C;
--festival-gold:#FFD54A;
--festival-dark:#1F2937;
--festival-text:#475569;
--festival-bg:#F8FAFC;
--festival-white:#FFFFFF;

--festival-radius:24px;

--festival-shadow:0 15px 40px rgba(0,0,0,.08);

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--festival-bg);

color:var(--festival-dark);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.festival-container{

width:min(1180px,92%);

margin:auto;

}

section{

padding:90px 0;

}

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

#festivalLoader{

position:fixed;

inset:0;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.festival-loader-box{

text-align:center;

}

.festival-loader-icon{

font-size:70px;

margin-bottom:20px;

animation:festivalBounce 1.4s infinite;

}

.festival-loader-spinner{

width:60px;

height:60px;

margin:25px auto;

border-radius:50%;

border:5px solid #eee;

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

animation:festivalSpin 1s linear infinite;

}

@keyframes festivalSpin{

100%{

transform:rotate(360deg);

}

}

@keyframes festivalBounce{

50%{

transform:translateY(-10px);

}

}

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

.festival-header{

position:fixed;

top:0;

left:0;

right:0;

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

backdrop-filter:blur(12px);

box-shadow:0 3px 15px rgba(0,0,0,.05);

z-index:999;

padding:16px 0;

}

.festival-header .festival-container{

display:flex;

justify-content:space-between;

align-items:center;

}

.festival-back{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--festival-primary);

}

.festival-header nav{

display:flex;

gap:28px;

align-items:center;

}

.festival-header nav a{

font-weight:600;

color:var(--festival-dark);

transition:.3s;

}

.festival-header nav a:hover{

color:var(--festival-primary);

}

.festival-nav-btn{

padding:12px 24px;

background:linear-gradient(135deg,var(--festival-primary),var(--festival-secondary));

border-radius:40px;

color:white !important;

}

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

.festival-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.45)),

url("../images/hero-festival.jpg");

background-size:cover;

background-position:center;

}

.festival-overlay{

position:absolute;

inset:0;

background:linear-gradient(90deg,

rgba(0,0,0,.45),

rgba(0,0,0,.15));

}

.festival-hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.3fr .7fr;

gap:70px;

align-items:center;

}

.festival-badge{

display:inline-block;

padding:10px 18px;

border-radius:40px;

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

backdrop-filter:blur(8px);

color:white;

font-weight:700;

margin-bottom:25px;

}

.festival-left h1{

font-size:64px;

font-weight:800;

line-height:1.1;

color:white;

margin-bottom:25px;

}

.festival-left p{

font-size:18px;

color:white;

opacity:.95;

max-width:720px;

margin-bottom:35px;

}

.festival-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.festival-btn-primary{

padding:18px 34px;

border-radius:50px;

background:linear-gradient(135deg,var(--festival-primary),var(--festival-secondary));

color:white;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.3s;

}

.festival-btn-primary:hover{

transform:translateY(-4px);

}

.festival-btn-outline{

padding:18px 34px;

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

border-radius:50px;

color:white;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

transition:.3s;

}

.festival-btn-outline:hover{

background:white;

color:var(--festival-primary);

}

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

.festival-info-card{

background:white;

padding:35px;

border-radius:30px;

box-shadow:var(--festival-shadow);

}

.festival-info-item{

display:flex;

gap:18px;

align-items:center;

padding:18px 0;

border-bottom:1px solid #eee;

}

.festival-info-item:last-child{

border-bottom:none;

}

.festival-info-item i{

font-size:30px;

color:var(--festival-primary);

width:40px;

text-align:center;

}

.festival-info-item h4{

font-size:17px;

margin-bottom:4px;

}

.festival-info-item p{

color:var(--festival-text);

font-size:15px;

}

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

.festival-title{

text-align:center;

margin-bottom:60px;

}

.festival-title span{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#FFECEF;

color:var(--festival-primary);

font-weight:700;

margin-bottom:18px;

}

.festival-title h2{

font-size:42px;

font-weight:800;

margin-bottom:20px;

}

.festival-title p{

max-width:850px;

margin:auto;

color:var(--festival-text);

font-size:17px;

}

/*==================================================
COUNTDOWN
==================================================*/

.festival-countdown-section{

background:#fff;

padding-top:40px;

}

.festival-countdown-card{

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

color:white;

padding:60px;

border-radius:32px;

text-align:center;

box-shadow:var(--festival-shadow);

}

.festival-countdown-card span{

display:inline-block;

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

padding:8px 20px;

border-radius:30px;

margin-bottom:18px;

font-weight:700;

}

.festival-countdown-card h2{

font-size:42px;

margin-bottom:18px;

font-weight:800;

}

.festival-countdown-card p{

max-width:760px;

margin:auto;

opacity:.95;

margin-bottom:45px;

}

.festival-countdown{

display:grid;

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

gap:20px;

max-width:720px;

margin:auto;

}

.festival-countdown div{

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

border-radius:24px;

padding:30px 15px;

backdrop-filter:blur(10px);

}

.festival-countdown h1{

font-size:54px;

font-weight:800;

}

.festival-countdown small{

font-size:16px;

}

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

.festival-about{

background:#F8FAFC;

}

.festival-card-grid{

display:grid;

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

gap:30px;

}

.festival-card{

background:white;

border-radius:28px;

padding:40px 35px;

text-align:center;

box-shadow:var(--festival-shadow);

transition:.35s;

display:flex;

flex-direction:column;

justify-content:flex-start;

height:100%;

}

.festival-card:hover{

transform:translateY(-8px);

}

.festival-card i{

font-size:55px;

color:var(--festival-primary);

margin-bottom:25px;

}

.festival-card h3{

font-size:24px;

margin-bottom:15px;

}

.festival-card p{

color:var(--festival-text);

}

/*==================================================
PETUNJUK
==================================================*/

.festival-teknis{

background:white;

}

.festival-step-grid{

display:grid;

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

gap:30px;

}

.festival-step-card{

background:#fff;

padding:40px;

border-radius:28px;

box-shadow:var(--festival-shadow);

position:relative;

}

.festival-step-number{

width:65px;

height:65px;

border-radius:50%;

background:var(--festival-primary);

color:white;

font-size:28px;

font-weight:800;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.festival-step-card h3{

font-size:24px;

margin-bottom:15px;

}

.festival-step-card p{

color:var(--festival-text);

}

/*==================================================
RUTE
==================================================*/

.festival-route{

background:#F8FAFC;

}

.festival-route-image{

margin:50px auto;

max-width:1000px;

border-radius:30px;

overflow:hidden;

background:white;

padding:20px;

box-shadow:var(--festival-shadow);

}

.festival-route-image img{

width:100%;

height:auto;

display:block;

}

.festival-route-note{

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--festival-shadow);

}

.festival-route-note h3{

margin-bottom:20px;

font-size:28px;

}

.festival-route-note ul{

padding-left:20px;

list-style:disc;

}

.festival-route-note li{

margin-bottom:12px;

color:var(--festival-text);

}

/*==================================================
PERFORMANCE
==================================================*/

.festival-performance{

background:white;

}

.festival-performance-grid{

display:grid;

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

gap:35px;

}

.festival-performance-card{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--festival-shadow);

height:100%;

}

.festival-performance-icon{

width:80px;

height:80px;

border-radius:20px;

background:#FFECEF;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

margin-bottom:25px;

}

.festival-performance-card h3{

font-size:28px;

margin-bottom:18px;

}

.festival-performance-card p{

color:var(--festival-text);

margin-bottom:20px;

}

.festival-performance-card ul{

padding-left:20px;

list-style:disc;

}

.festival-performance-card li{

margin-bottom:10px;

color:var(--festival-text);

}

/*==================================================
INFO PENTING
==================================================*/

.festival-important{

background:#FFF8F8;

}

.festival-important-box{

max-width:900px;

margin:auto;

background:white;

padding:50px;

border-radius:30px;

text-align:center;

box-shadow:var(--festival-shadow);

border-top:8px solid var(--festival-primary);

}

.festival-important-box h2{

font-size:36px;

margin-bottom:20px;

color:var(--festival-primary);

}

.festival-important-box p{

font-size:18px;

color:var(--festival-text);

line-height:1.8;

}

/*==================================================
ROADMAP
==================================================*/

.festival-roadmap{

background:#F8FAFC;

}

.festival-roadmap-grid{

display:grid;

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

gap:30px;

}

.festival-roadmap-card{

background:white;

padding:35px;

border-radius:28px;

box-shadow:var(--festival-shadow);

border-top:6px solid var(--festival-primary);

height:100%;

}

.festival-roadmap-card h3{

font-size:24px;

margin-bottom:20px;

color:var(--festival-primary);

}

.festival-roadmap-card ul{

padding-left:20px;

list-style:disc;

}

.festival-roadmap-card li{

margin-bottom:12px;

color:var(--festival-text);

}


/*==================================================
FAQ
==================================================*/

.festival-faq{

background:white;

}

.festival-faq-list{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.festival-faq-item{

background:white;

padding:30px;

border-radius:22px;

box-shadow:var(--festival-shadow);

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

}

.festival-faq-item h3{

font-size:22px;

margin-bottom:12px;

}

.festival-faq-item p{

color:var(--festival-text);

}


/*==================================================
REGISTER
==================================================*/

.festival-register{

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

color:white;

}

.festival-register-box{

max-width:850px;

margin:auto;

text-align:center;

}

.festival-register-box h2{

font-size:42px;

margin-bottom:20px;

font-weight:800;

}

.festival-register-box p{

font-size:18px;

opacity:.95;

margin-bottom:18px;

}

.festival-warning{

font-size:22px !important;

font-weight:700;

color:#FFD54A;

margin-bottom:35px !important;

}

.festival-register-button{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 38px;

background:white;

color:var(--festival-primary);

border-radius:50px;

font-weight:700;

font-size:18px;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.festival-register-button:hover{

transform:translateY(-5px);

}


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

.festival-contact{

background:#F8FAFC;

}

.festival-contact-grid{

display:grid;

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

gap:30px;

}

.festival-contact-card{

background:white;

padding:40px;

border-radius:28px;

text-align:center;

box-shadow:var(--festival-shadow);

}

.festival-contact-card i{

font-size:60px;

color:var(--festival-primary);

margin-bottom:20px;

}

.festival-contact-card h3{

font-size:18px;

color:var(--festival-text);

margin-bottom:10px;

}

.festival-contact-card h2{

font-size:28px;

margin-bottom:18px;

}

.festival-contact-card a{

display:inline-block;

padding:12px 24px;

border-radius:40px;

background:#25D366;

color:white;

font-weight:700;

}


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

.festival-footer{

background:#730015;

color:white;

padding:70px 20px;

text-align:center;

}

.festival-footer h2{

font-size:30px;

margin-bottom:10px;

}

.festival-footer p{

opacity:.9;

}

.festival-footer hr{

margin:30px auto;

max-width:450px;

border:none;

border-top:1px solid rgba(255,255,255,.25);

}


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

.festival-loading{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

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

z-index:999999;

}

.festival-loading-box{

background:white;

padding:40px;

border-radius:25px;

text-align:center;

min-width:280px;

}

.festival-spinner{

width:60px;

height:60px;

margin:0 auto 20px;

border-radius:50%;

border:5px solid #eee;

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

animation:festivalSpin 1s linear infinite;

}


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

@media(max-width:991px){

.festival-hero{

padding:150px 0 80px;

min-height:auto;

}

.festival-hero-grid,

.festival-card-grid,

.festival-step-grid,

.festival-performance-grid,

.festival-roadmap-grid,

.festival-contact-grid{

grid-template-columns:1fr;

gap:25px;

}

.festival-left h1{

font-size:46px;

}

.festival-title h2{

font-size:34px;

}

.festival-countdown{

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

}

}


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

@media(max-width:576px){

section{

padding:70px 0;

}

.festival-header .festival-container{

flex-direction:column;

gap:15px;

}

.festival-header nav{

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

.festival-left h1{

font-size:34px;

}

.festival-left p{

font-size:16px;

}

.festival-buttons{

flex-direction:column;

}

.festival-btn-primary,

.festival-btn-outline,

.festival-register-button{

width:100%;

justify-content:center;

}

.festival-title h2{

font-size:28px;

}

.festival-countdown{

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

gap:15px;

}

.festival-countdown h1{

font-size:34px;

}

.festival-countdown-card{

padding:35px 20px;

}

.festival-card,

.festival-step-card,

.festival-performance-card,

.festival-roadmap-card,

.festival-contact-card,

.festival-route-note,

.festival-important-box{

padding:25px;

}

.festival-route-image{

padding:10px;

}

/* Active Navigation */
.festival-header nav a.festival-active{
    color: var(--festival-primary);
    font-weight: 700;
    position: relative;
}

.festival-header nav a.festival-active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:3px;
    border-radius:3px;
    background:var(--festival-primary);
}

}