*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter', 'Segoe UI', system-ui, sans-serif;
}

body{

background:
linear-gradient(
135deg,
#0f0f0f,
#1a0000,
#330000
);

min-height:100vh;

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

color:white;
}

.container{
width:100%;
padding:20px;
}

.card{

max-width:500px;
margin:auto;

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.1);

backdrop-filter:blur(10px);

padding:30px;

border-radius:20px;

box-shadow:
0 15px 35px rgba(0,0,0,0.6);
}

.logo{
display:block;
margin:0 auto 20px auto;
max-width:130px;
height:auto;
filter:drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

h1{

text-align:center;

margin-bottom:10px;

color:#FFD700;

letter-spacing:1px;
}

.subtitle{

text-align:center;

margin-bottom:30px;

color:#aaa;

font-size:0.95rem;
}

/* Gaya Live Counter */
.counter-container{
display:flex;
justify-content:space-between;
gap:15px;
margin-bottom:25px;
}

.counter-box{
flex:1;
background:rgba(0,0,0,0.4);
border:1px solid rgba(255,215,0,0.2);
border-radius:12px;
padding:15px 10px;
text-align:center;
}

.counter-box h3{
color:#FFD700;
font-size:1.8rem;
margin-bottom:5px;
}

.counter-box p{
color:#e0e0e0;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
}

/* Gaya Senarai Pendaftaran Terbaru */
.latest-registrations{
background:rgba(255,215,0,0.1);
border:1px solid rgba(255,215,0,0.3);
border-radius:12px;
padding:15px;
margin-bottom:25px;
}

.latest-registrations h4{
color:#FFD700;
font-size:0.9rem;
margin-bottom:10px;
text-transform:uppercase;
letter-spacing:1px;
}

.latest-registrations ul{
list-style:none;
padding:0;
}

.latest-registrations li{
color:#e0e0e0;
font-size:0.85rem;
padding:5px 0;
border-bottom:1px dashed rgba(255,255,255,0.1);
}

.latest-registrations li:last-child{
border-bottom:none;
}

label{

display:block;

margin-top:18px;

margin-bottom:8px;

font-size:0.9rem;

color:#e0e0e0;

font-weight:600;
}

input,
textarea{

width:100%;

padding:14px;

border:1px solid rgba(255,255,255,0.1);

border-radius:12px;

background:#111;

color:white;

transition:all 0.3s ease;
}

input[type="text"],
textarea{
text-transform:uppercase;
}

input:focus,
textarea:focus{

outline:none;

border-color:#FFD700;

box-shadow:0 0 0 3px rgba(255,215,0,0.2);

background:#1a1a1a;
}

input:disabled,
textarea:disabled{
opacity:0.6;
cursor:not-allowed;
}

textarea{
min-height:100px;
resize:vertical;
}

button{

width:100%;

margin-top:25px;

padding:15px;

border:none;

border-radius:12px;

background:#FFD700;

color:black;

font-weight:bold;

cursor:pointer;

transition:all 0.3s ease;

box-shadow:0 4px 15px rgba(255,215,0,0.2);
}

button:hover{

transform:translateY(-3px);

box-shadow:0 6px 20px rgba(255,215,0,0.4);
}

button:disabled{
cursor:not-allowed;
transform:none;
}

#status{

margin-top:20px;

text-align:center;

font-weight:600;
}

/* Gaya Butang Share WhatsApp */
.share-btn{
display:block;
width:100%;
margin-top:15px;
padding:15px;
border-radius:12px;
background:#25D366;
color:white;
text-align:center;
text-decoration:none;
font-weight:bold;
transition:all 0.3s ease;
box-shadow:0 4px 15px rgba(37,211,102,0.2);
}

.share-btn:hover{
transform:translateY(-3px);
box-shadow:0 6px 20px rgba(37,211,102,0.4);
}

/* Gaya Notifikasi Toast */
.toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%) translateY(100px);
background:#4CAF50;
color:white;
padding:15px 25px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
font-weight:600;
opacity:0;
visibility:hidden;
transition:all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index:1000;
text-align:center;
width:max-content;
}

.toast.show{
transform:translateX(-50%) translateY(0);
opacity:1;
visibility:visible;
}

/* Animasi Loading Spinner */
.spinner{
display:inline-block;
width:18px;
height:18px;
border:3px solid rgba(0,0,0,0.3);
border-radius:50%;
border-top-color:#000;
animation:spin 1s linear infinite;
vertical-align:middle;
margin-right:8px;
margin-top:-2px;
}

@keyframes spin{
to{transform:rotate(360deg);}
}

/* Gaya Kotak Ringkasan (Summary) */
.summary-box{
background:rgba(0,0,0,0.4);
border:1px solid rgba(255,215,0,0.3);
border-radius:12px;
padding:25px 20px;
margin-top:10px;
}

.summary-box h2{
color:#FFD700;
text-align:center;
margin-bottom:20px;
font-size:1.3rem;
}

.summary-box p{
margin-bottom:12px;
font-size:0.95rem;
color:#e0e0e0;
line-height:1.5;
}

.summary-box p strong{
color:#FFD700;
}

button.btn-secondary{
background:#333;
color:white;
margin-top:25px;
box-shadow:none;
}

button.btn-secondary:hover{
background:#444;
box-shadow:0 6px 20px rgba(0,0,0,0.4);
}