/*==================================================
BAZAR RT16
STYLE.CSS
==================================================*/

:root{

--bazar-primary:#C8102E;
--bazar-secondary:#8B001C;
--bazar-gold:#FFD54A;
--bazar-dark:#1F2937;
--bazar-text:#64748B;
--bazar-bg:#F8FAFC;
--bazar-white:#FFFFFF;

--bazar-radius:24px;

--bazar-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(--bazar-bg);

color:var(--bazar-dark);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

section{

padding:90px 0;

}

.bazar-container{

width:min(1180px,92%);

margin:auto;

}

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

#bazarLoader{

position:fixed;

inset:0;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.bazar-loader-box{

text-align:center;

}

.bazar-loader-icon{

font-size:72px;

margin-bottom:20px;

animation:bazarBounce 1.3s infinite;

}

.bazar-loader-spinner{

width:60px;

height:60px;

margin:20px auto;

border-radius:50%;

border:5px solid #eee;

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

animation:bazarSpin 1s linear infinite;

}

@keyframes bazarSpin{

100%{

transform:rotate(360deg);

}

}

@keyframes bazarBounce{

50%{

transform:translateY(-8px);

}

}

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

.bazar-header{

position:fixed;

top:0;

left:0;

right:0;

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

backdrop-filter:blur(12px);

padding:16px 0;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.bazar-header .bazar-container{

display:flex;

justify-content:space-between;

align-items:center;

}

.bazar-back{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--bazar-primary);

}

.bazar-header nav{

display:flex;

gap:28px;

align-items:center;

}

.bazar-header nav a{

color:var(--bazar-dark);

font-weight:600;

transition:.3s;

}

.bazar-header nav a:hover{

color:var(--bazar-primary);

}

.bazar-nav-btn{

padding:12px 24px;

border-radius:40px;

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

color:white !important;

}

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

.bazar-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:

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

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

background-size:cover;

background-position:center;

}

.bazar-overlay{

position:absolute;

inset:0;

background:linear-gradient(

90deg,

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

rgba(0,0,0,.10)

);

}

.bazar-hero-grid{

position:relative;

z-index:2;

display:grid;

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

gap:70px;

align-items:center;

}

.bazar-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;

}

.bazar-left h1{

font-size:64px;

font-weight:800;

line-height:1.1;

color:white;

margin-bottom:25px;

}

.bazar-left p{

font-size:18px;

color:white;

margin-bottom:35px;

max-width:700px;

}

.bazar-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.bazar-btn-primary{

padding:18px 34px;

border-radius:50px;

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

color:white;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}

.bazar-btn-primary:hover{

transform:translateY(-4px);

}

.bazar-btn-outline{

padding:18px 34px;

border-radius:50px;

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

color:white;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}

.bazar-btn-outline:hover{

background:white;

color:var(--bazar-primary);

}

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

.bazar-info-card{

background:white;

padding:35px;

border-radius:30px;

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

}

.bazar-info-item{

display:flex;

gap:18px;

padding:18px 0;

align-items:center;

border-bottom:1px solid #eee;

}

.bazar-info-item:last-child{

border-bottom:none;

}

.bazar-info-item i{

font-size:30px;

color:var(--bazar-primary);

width:40px;

text-align:center;

}

.bazar-info-item h4{

margin-bottom:5px;

}

.bazar-info-item p{

font-size:15px;

color:var(--bazar-text);

}

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

.bazar-title{

text-align:center;

margin-bottom:60px;

}

.bazar-title span{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#FFECEF;

color:var(--bazar-primary);

font-weight:700;

margin-bottom:18px;

}

.bazar-title h2{

font-size:42px;

font-weight:800;

margin-bottom:20px;

}

.bazar-title p{

max-width:850px;

margin:auto;

color:var(--bazar-text);

font-size:17px;

}

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

.bazar-countdown-section{

background:white;

padding-top:40px;

}

.bazar-countdown-card{

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

color:white;

padding:60px;

border-radius:30px;

text-align:center;

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

}

.bazar-countdown{

display:grid;

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

gap:20px;

margin-top:40px;

}

.bazar-countdown div{

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

padding:28px;

border-radius:20px;

}

.bazar-countdown h1{

font-size:52px;

font-weight:800;

}

.bazar-countdown small{

font-size:15px;

}

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

.bazar-about{

background:#F8FAFC;

}

.bazar-card-grid{

display:grid;

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

gap:30px;

}

.bazar-card{

background:white;

padding:40px 35px;

border-radius:28px;

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

text-align:center;

transition:.35s;

height:100%;

}

.bazar-card:hover{

transform:translateY(-8px);

}

.bazar-card i{

font-size:55px;

color:var(--bazar-primary);

margin-bottom:25px;

}

.bazar-card h3{

font-size:24px;

margin-bottom:15px;

}

.bazar-card p{

color:var(--bazar-text);

}


/*==================================================
BIAYA REGISTRASI
==================================================*/

.bazar-rules{

background:white;

}

.bazar-price-grid{

display:grid;

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

gap:25px;

}

.bazar-price-card{

background:white;

padding:40px 30px;

border-radius:28px;

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

text-align:center;

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

transition:.3s;

height:100%;

}

.bazar-price-card:hover{

transform:translateY(-8px);

}

.bazar-price-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

background:#FFECEF;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

}

.bazar-price-card h3{

font-size:22px;

margin-bottom:15px;

}

.bazar-price-card h1{

font-size:38px;

color:var(--bazar-primary);

margin-bottom:18px;

font-weight:800;

}

.bazar-price-card p{

color:var(--bazar-text);

}


/*==================================================
PERALATAN
==================================================*/

.bazar-equipment{

background:#F8FAFC;

}

.bazar-equipment-grid{

display:grid;

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

gap:30px;

}

.bazar-equipment-card{

background:white;

padding:35px;

border-radius:28px;

text-align:center;

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

transition:.3s;

height:100%;

}

.bazar-equipment-card:hover{

transform:translateY(-6px);

}

.bazar-equipment-card i{

font-size:50px;

color:var(--bazar-primary);

margin-bottom:22px;

}

.bazar-equipment-card h3{

font-size:22px;

margin-bottom:15px;

}

.bazar-equipment-card p{

color:var(--bazar-text);

}


/*==================================================
LAYOUT STAND
==================================================*/

.bazar-layout{

background:white;

}

.bazar-layout-image{

max-width:1050px;

margin:45px auto;

padding:18px;

background:white;

border-radius:30px;

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

}

.bazar-layout-image img{

width:100%;

height:auto;

display:block;

}

.bazar-layout-note{

background:#FFF8F8;

padding:40px;

border-radius:25px;

border-left:8px solid var(--bazar-primary);

}

.bazar-layout-note h3{

font-size:28px;

margin-bottom:18px;

}

.bazar-layout-note ul{

list-style:disc;

padding-left:22px;

}

.bazar-layout-note li{

margin-bottom:12px;

color:var(--bazar-text);

}


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

.bazar-flow{

background:#F8FAFC;

}

.bazar-flow-grid{

display:grid;

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

gap:30px;

}

.bazar-flow-card{

background:white;

padding:35px;

text-align:center;

border-radius:28px;

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

height:100%;

transition:.3s;

}

.bazar-flow-card:hover{

transform:translateY(-8px);

}

.bazar-flow-card div{

width:70px;

height:70px;

margin:auto auto 20px;

border-radius:50%;

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

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:700;

}

.bazar-flow-card h3{

font-size:22px;

}


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

.bazar-important{

background:white;

}

.bazar-important-box{

background:linear-gradient(135deg,#FFF4F4,#FFF9F9);

padding:50px;

border-radius:30px;

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

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

}

.bazar-important-box h2{

text-align:center;

font-size:36px;

margin-bottom:30px;

color:var(--bazar-primary);

}

.bazar-important-box ul{

list-style:disc;

padding-left:25px;

}

.bazar-important-box li{

margin-bottom:16px;

font-size:18px;

color:var(--bazar-text);

line-height:1.8;

}

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

.bazar-faq{

background:#F8FAFC;

}

.bazar-faq-list{

max-width:950px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}

.bazar-faq-item{

background:white;

padding:30px;

border-radius:22px;

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

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

transition:.3s;

}

.bazar-faq-item:hover{

transform:translateX(8px);

}

.bazar-faq-item h3{

font-size:22px;

margin-bottom:12px;

}

.bazar-faq-item p{

color:var(--bazar-text);

line-height:1.8;

}


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

.bazar-register{

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

color:white;

}

.bazar-register-box{

max-width:850px;

margin:auto;

text-align:center;

}

.bazar-register-box h2{

font-size:42px;

font-weight:800;

margin-bottom:20px;

}

.bazar-register-box p{

font-size:18px;

margin-bottom:15px;

opacity:.95;

}

.bazar-warning{

font-size:24px !important;

font-weight:700;

color:#FFD54A;

margin-bottom:35px !important;

}

.bazar-register-button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:20px 42px;

border-radius:50px;

background:white;

color:var(--bazar-primary);

font-size:18px;

font-weight:700;

transition:.3s;

box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.bazar-register-button:hover{

transform:translateY(-5px);

}


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

.bazar-contact{

background:white;

}

.bazar-contact-grid{

display:grid;

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

gap:35px;

}

.bazar-contact-card{

background:white;

padding:40px;

border-radius:30px;

text-align:center;

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

height:100%;

}

.bazar-contact-card i{

font-size:60px;

color:var(--bazar-primary);

margin-bottom:20px;

}

.bazar-contact-card h3{

font-size:18px;

color:var(--bazar-text);

margin-bottom:10px;

}

.bazar-contact-card h2{

font-size:30px;

margin-bottom:18px;

}

.bazar-contact-card p{

color:var(--bazar-text);

margin-bottom:15px;

}

.bazar-contact-card a{

display:inline-block;

padding:14px 26px;

border-radius:40px;

background:#25D366;

color:white;

font-weight:700;

transition:.3s;

}

.bazar-contact-card a:hover{

transform:translateY(-4px);

}


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

.bazar-footer{

background:#730015;

color:white;

padding:70px 20px;

text-align:center;

}

.bazar-footer h2{

font-size:32px;

margin-bottom:10px;

}

.bazar-footer p{

opacity:.9;

}

.bazar-footer hr{

max-width:420px;

margin:30px auto;

border:none;

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

}


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

.bazar-loading{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

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

z-index:999999;

}

.bazar-loading-box{

background:white;

padding:40px;

border-radius:24px;

text-align:center;

min-width:280px;

}

.bazar-spinner{

width:60px;

height:60px;

margin:0 auto 20px;

border-radius:50%;

border:5px solid #eee;

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

animation:bazarSpin 1s linear infinite;

}


/*==================================================
ACTIVE MENU
==================================================*/

.bazar-header nav a.bazar-active{

color:var(--bazar-primary);

font-weight:700;

position:relative;

}

.bazar-header nav a.bazar-active::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:100%;

height:3px;

background:var(--bazar-primary);

border-radius:3px;

}


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

@media(max-width:991px){

.bazar-hero{

padding:150px 0 80px;

min-height:auto;

}

.bazar-hero-grid,

.bazar-card-grid,

.bazar-price-grid,

.bazar-equipment-grid,

.bazar-flow-grid,

.bazar-contact-grid{

grid-template-columns:1fr;

gap:25px;

}

.bazar-left h1{

font-size:46px;

}

.bazar-title h2{

font-size:34px;

}

.bazar-countdown{

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

}

}


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

@media(max-width:576px){

section{

padding:70px 0;

}

.bazar-header .bazar-container{

flex-direction:column;

gap:15px;

}

.bazar-header nav{

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

.bazar-left h1{

font-size:34px;

}

.bazar-left p{

font-size:16px;

}

.bazar-buttons{

flex-direction:column;

}

.bazar-btn-primary,

.bazar-btn-outline,

.bazar-register-button{

width:100%;

justify-content:center;

}

.bazar-title h2{

font-size:28px;

}

.bazar-countdown{

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

gap:15px;

}

.bazar-countdown h1{

font-size:34px;

}

.bazar-countdown-card{

padding:35px 20px;

}

.bazar-card,

.bazar-price-card,

.bazar-equipment-card,

.bazar-flow-card,

.bazar-contact-card,

.bazar-layout-note,

.bazar-important-box{

padding:25px;

}

.bazar-layout-image{

padding:10px;

}

}