/* Global & Font */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Arial', sans-serif;
}

/* KUNCI: Menampilkan/Menyembunyikan Konten */
.mobile-only {
    display: none; /* Default: Sembunyikan di Desktop */
}

.desktop-only {
    display: block; /* Default: Tampilkan di Desktop */
}

/* === SECTION: BASE === */
img {
    max-width: 100%; 
    height: auto;    
    display: block;
}


body {
    background-color: #03030f;
    background-image: url('../img/background-main.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: scroll; 
    color: #fff;
    overflow-x: hidden;
    transition: background-color 0.5s ease;
}

/* Overlay untuk background smoothing */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(2px);
    z-index: -1;
}

/* === SECTION: COVER === */
#cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    background-image: url('../img/background.webp'); 
    background-size: cover; 
    background-repeat: no-repeat; /* Pastikan tidak berulang */
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}
#cover.hidden {
    opacity: 0;
    visibility: hidden;
}
#cover img {
    width: 500px; 
    max-width: 90%; 
    margin-bottom: 50px; 
}
#guest-name {
    font-size: 1.8rem; 
    color: #ddd;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); 
    font-weight: 300;
    text-transform: capitalize;
}
#open-button {
    padding: 15px 40px; 
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    background-color: #00c8ff;
    border: none;
    border-radius: 8px; 
    cursor: pointer;
    box-shadow: 0 0 20px #00c8ff, 0 0 8px #00c8ff inset; 
    transition: background-color 0.3s, box-shadow 0.3s, opacity 0.3s;
    text-transform: uppercase;
}

/* === SECTION: HEADER === */
header {
    height: 100vh;
    background: url('../img/background-main.webp') center/cover no-repeat; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: fadeIn 2s ease-in-out;
    position: relative;
}
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 0;
}
header img {
    position: relative;
    z-index: 1;
    width: 500px;
    max-width: 80%; /* Pastikan logo header responsif */
    margin-bottom: 20px;
}
header h2 { 
    position: relative;
    z-index: 1;
    font-size: 2.5rem; 
    color: #ffffff;
    text-shadow: 0 0 20px rgba(0, 200, 255, 0.7);
    margin-top: 20px;
    margin-bottom: 20px;
}

#countdown {
    position: relative;
    z-index: 1;
    font-size: 2.8rem;
    color: #ffaa00;
    font-weight: bold;
    margin-top: 30px;
    padding: 15px 30px; 
    background: rgba(20, 20, 40, 0.8); 
    border-radius: 50px;
    border: 2px solid #ffaa00;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.8); 
    white-space: nowrap; /* Mencegah countdown pecah */
}

.section {
    min-height: 100vh;
    padding: 80px 10%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}
.section.visible {
    opacity: 1;
    transform: translateY(0);
}
.section-content {
    max-width: 900px;
    width: 100%; /* Pastikan konten section mengisi lebar */
}
h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: #00c8ff;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}
iframe {
    border: 3px solid #00c8ff;
    border-radius: 15px;
    margin-top: 30px;
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.7);
    width: 100%; /* Wajib: Buat iframe selebar kontainer */
    max-width: 700px;
    height: 400px;
}

/* === SECTION: COMMITTEES === */
.committee-grid {
    display: grid;
    /* Membuat kolom otomatis, minimum 200px lebar per kartu */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 30px 20px; /* Jarak baris dan kolom */
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}

.committee-member.member-card {
    /* Menghapus padding dan background default dari .committee-member sebelumnya */
    padding: 0;
    background: none; 
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    overflow: hidden; /* Penting untuk gambar yang akan menutupi kartu */
    position: relative;
}

.member-card .avatar {
    /* Gambar menutupi sebagian besar kartu */
    width: 100%;
    height: 280px; /* Tinggi tetap agar tampilan seragam */
    object-fit: cover;
    object-position: top center; /* Fokus di wajah */
    border-radius: 8px; /* Sudut sedikit melengkung */
    border: none; /* Hilangkan border lingkaran */
    margin: 0;
    display: block;
    filter: brightness(0.9); /* Sedikit redup agar teks lebih menonjol */
    transition: filter 0.3s ease;
}

.member-card:hover .avatar {
    filter: brightness(1);
}

.member-card .info-box {
    /* Kotak Info di Bawah Gambar */
    position: relative;
    padding: 15px 10px;
    background-color: rgba(30, 30, 50, 0.8); /* Background gelap */
    text-align: left;
    /* Border top sebagai garis pemisah */
    border-top: 3px solid #00c8ff; 
    z-index: 5;
    margin-top: -10px; /* Sedikit tumpang tindih dengan gambar */
}

.member-card h3 {
    font-size: 1.2rem;
    color: #fff;
    margin: 0;
}

.member-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #ccc;
    font-weight: 300;
    margin: 0; /* Hilangkan margin p global */
}

/* === SECTION: RULES === */
.section-subtitle {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 50px; /* Jarak lebih besar dari judul ke kotak aturan */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.rules-container {
    display: flex; 
    gap: 40px; /* Jarak antar kolom diperbesar */
    justify-content: center;
    width: 100%;
    max-width: 1000px; /* Lebar maksimum section diperbesar */
    margin-top: 30px;
}

.rules-column {
    flex: 1;
    padding: 30px;
    border-radius: 12px; /* Sudut lebih melengkung */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent; /* Border default transparan */
}

/* Hover Effect */
.rules-column:hover {
    transform: translateY(-5px);
}

.rules-column h3 {
    font-size: 1.6rem; /* Ukuran judul lebih besar */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid; /* Garis pemisah lebih tebal */
    text-align: center;
}

/* Styling Khusus untuk Do's (Hijau Positif) */
.do-list {
    background-color: rgba(0, 150, 0, 0.1);
    border-color: #00c853; 
    box-shadow: 0 0 15px rgba(0, 200, 83, 0.4); /* Shadow hijau */
}
.do-list h3 {
    color: #00c853;
    border-color: #00c853;
}
.do-list:hover {
    box-shadow: 0 0 25px rgba(0, 200, 83, 0.7);
}

/* Styling Khusus untuk Don'ts (Merah Peringatan) */
.dont-list {
    background-color: rgba(150, 0, 0, 0.1);
    border-color: #d50000;
    box-shadow: 0 0 15px rgba(213, 0, 0, 0.4); /* Shadow merah */
}
.dont-list h3 {
    color: #d50000;
    border-color: #d50000;
}
.dont-list:hover {
    box-shadow: 0 0 25px rgba(213, 0, 0, 0.7);
}

.rules-column ul {
    list-style: none;
    padding: 0;
}

.rules-column li {
    font-size: 1.15rem; /* Ukuran teks sedikit diperbesar */
    line-height: 1.6;
    margin-bottom: 20px; /* Jarak antar item diperbesar */
    text-align: left;
    display: flex;
    align-items: flex-start; /* Alignment di bagian atas ikon */
}

.rules-column li span {
    font-size: 1.8rem; /* Ukuran ikon lebih besar */
    margin-right: 18px;
    line-height: 1;
    flex-shrink: 0; /* Pastikan ikon tidak menyusut */
}

/* === SECTION: PRIZE === */
.section-content h2.prizes-title { /* Jika Anda memberi class pada h2 di HTML, jika tidak, gunakan h2 di konteks #prizes */
    margin-bottom: 20px;
}

.section-subtitle {
    margin-bottom: 40px;
}

.prizes-rules-list {
    max-width: 900px;
    margin: 30px auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Jarak antar blok aturan */
}

/* KOTAK ATURAN UMUM */
.prizes-rules-list h3 {
    font-size: 1.5rem;
    color: #ffaa00; 
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffaa00;
}

.prizes-rules-list .mechanism,
.prizes-rules-list .tiers,
.prizes-rules-list .restrictions {
    list-style: none;
    padding: 0;
    background-color: rgba(30, 30, 50, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* LI elemen di dalam UL */
.prizes-rules-list li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
    color: #f0f0ff;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.prizes-rules-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Custom Bullet Point Ikon */
.prizes-rules-list li::before {
    font-family: 'Poppins', sans-serif;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    top: 0;
    line-height: 1.6;
    font-weight: bold;
}

/* --- TIER MEKANISME (Warna Biru) --- */
.mechanism li::before {
    content: '🏷️'; 
    color: #00c8ff;
}

/* --- TIER HADIAH & DISTRIBUSI (Warna Emas) --- */
.tiers {
    /* Background kartu tier berbeda agar menonjol */
    background-color: rgba(50, 40, 20, 0.9);
    border: 1px solid #ffaa00;
}
.tiers h3 {
    color: #ffaa00;
    border-bottom: 2px solid #ffaa00;
}
.tiers li::before {
    content: '✨'; 
    color: #ffaa00;
}

/* --- TIER BATASAN (Warna Merah Peringatan) --- */
.restrictions {
    /* Background kartu batasan berbeda */
    background-color: rgba(40, 20, 20, 0.9);
    border: 1px solid #ff1744;
}
.restrictions h3 {
    color: #ff1744;
    border-bottom: 2px solid #ff1744;
}
.restrictions li::before {
    content: '🛑';
    color: #ff1744;
}


.final-note {
    background-color: rgba(255, 170, 0, 0.1);
    border: 2px solid #ffaa00; /* Border lebih tebal */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.5); /* Efek glow peringatan */
}

.final-note p {
    font-weight: bold;
    color: #ffaa00;
    font-size: 1.2rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === SECTION: AWARDING === */
.awards-grid {
    display: grid;
    /* Atur agar ada 3 kolom di desktop, minimum 250px per kolom */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
    margin: 50px auto;
    padding: 0 5%;
}

.award-card {
    background-color: rgba(30, 40, 60, 0.95);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #00c8ff; /* Border Biru Neon */
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.4); /* Glow Biru */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 200, 255, 0.7);
}

.award-card .icon {
    font-size: 3rem;
    margin-bottom: 10px;
    line-height: 1;
}

.award-card h3 {
    font-size: 1.6rem;
    color: #ffaa00; /* Kuning Emas untuk judul kategori */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ffaa00;
}

.award-card p {
    font-size: 1.05rem;
    color: #ccc;
    margin: 5px 0;
    line-height: 1.4;
    font-weight: 300;
}

.voting-info {
    margin-top: 50px;
    font-style: italic;
    font-size: 1.1rem;
    color: #00c8ff;
    text-shadow: 0 0 5px rgba(0, 200, 255, 0.3);
}

/* === SECTION: OOTD === */
.dresscode-carousel-container {
    position: relative;
    max-width: 600px; 
    margin: 50px auto 30px auto;
    overflow: hidden; 
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    background: #ffffff;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(219, 219, 219, 1) 47%, rgba(171, 171, 171, 1) 100%);

}

.dresscode-carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    width: 100%; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
}

.carousel-img {
    width: 100%;
    height: auto;
    max-height: 50vh; 
    object-fit: contain; 
    display: block;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.slide-caption {
    color: rgba(40, 40, 65, 0.8);
    font-size: 0.95rem;
    padding: 15px 10px;
    margin: 0;
    text-align: center;
}

/* --- KONTROL DAN DOTS CAROUSEL --- */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: background 0.3s;
}

.carousel-control:hover { background: rgba(0, 200, 255, 0.7); opacity: 1; }
.carousel-control.prev { left: 0; border-radius: 0 5px 5px 0; }
.carousel-control.next { right: 0; border-radius: 5px 0 0 5px; }

.carousel-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active-dot { background-color: #00c8ff; }


/* === SECTION: RUNDOWN === */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Garis Vertikal Utama Timeline */
.timeline::before {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #00c8ff; /* Warna garis timeline */
    top: 0;
    bottom: 0;
    left: 50%; /* Posisikan di tengah layar besar */
    margin-left: -1.5px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%; /* Setiap item mengambil setengah lebar timeline */
}

/* Item di Kiri */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

/* Item di Kanan */
.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

/* Titik (Circle) di Garis Tengah */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    right: -7.5px;
    background-color: #0d0d1a;
    border: 3px solid #ffaa00; /* Warna titik */
    top: 15px;
    border-radius: 50%;
    z-index: 10;
}

/* Titik untuk Item di Kanan */
.timeline-item:nth-child(even)::after {
    left: -7.5px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: rgba(30, 30, 50, 0.7);
    position: relative;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: scale(1.03);
    box-shadow: 0 8px 15px rgba(0, 200, 255, 0.5);
}

.timeline-content h3 {
    font-size: 1.2rem;
    margin-top: 0;
    color: #00c8ff;
}

.timeline-content p {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 0;
}

.timeline-time {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffaa00;
    margin-bottom: 5px;
}

/* Styling Khusus Item Break (Istirahat) */
.break-item .timeline-content {
    background-color: rgba(100, 50, 0, 0.7); /* Warna berbeda untuk break */
    border: 1px solid #ffaa00;
}
.break-item::after {
    border-color: #fff; /* Titik putih */
}

/* === SECTION: GAMES === */
.focus-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.focus-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    width: 300px;
    padding: 30px 20px;
    border-radius: 15px;
    
    background: rgba(40, 40, 65, 0.9);
    border: 1px solid rgba(0, 200, 255, 0.3);
    
    /* Efek hover untuk membangun antisipasi */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.focus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 200, 255, 0.4);
    background: rgba(50, 50, 75, 1);
}

.focus-card i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ffaa00; /* Warna fokus */
}

.focus-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.2rem;
}

.focus-card p {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.game-card {
    /* Gunakan A tag sebagai card, hilangkan dekorasi */
    text-decoration: none;
    color: inherit; 
    display: block; 
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
    transform: translateY(-8px);
    /* Shadow Biru Neon saat di hover */
    box-shadow: 0 10px 30px rgba(0, 200, 255, 0.7); 
}

.game-card img {
    width: 100%;
    height: 300px; /* Tinggi seragam untuk semua card */
    object-fit: cover;
    filter: brightness(0.7); /* Redupkan gambar agar overlay menonjol */
    transition: filter 0.3s ease;
}

.game-card:hover img {
    filter: brightness(1);
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)); 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    padding: 20px;
    color: #fff;
    text-align: center;
    transition: opacity 0.3s ease;
    border: 3px solid #ffaa00;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.lock-icon {
    font-size: 3.5rem;
    margin-bottom: 10px;
    color: #ffaa00; 
    /* Animasi denyut (pulse) ringan */
    animation: pulse 1.5s infinite; 
}

.lock-overlay h4 {
    font-size: 1.5rem;
    margin: 5px 0;
    color: #ffaa00;
}

.lock-overlay p {
    font-size: 0.95rem; 
    color: #ddd;
    margin: 10px 0; 
    max-width: 250px; 
    line-height: 1.4;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

.mobile-focus-image-container {
    width: 100%;
    max-width: 450px; /* Batasan lebar agar gambar tidak terlalu besar di mobile */
    margin: 30px auto;
    text-align: center;
}

.mobile-challenge-graphic {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    filter: drop-shadow(0 0 10px rgba(0, 150, 255, 0.4));
}


/* === SECTION: INTERACTIVE LINKS === */
.link-icon-img {
    /* Set ukuran tetap yang sama dengan ikon Font Awesome sebelumnya */
    width: 70px;
    height: 70px;
    
    /* Agar terlihat seperti ikon yang lama, kita beri border-radius 50% */
    border-radius: 50%; 
    
    /* Margin bawah agar ada jarak dengan judul (h3) */
    margin-bottom: 15px;
    
    /* Pastikan gambar mengisi kotak dengan baik jika ukurannya berbeda */
    object-fit: cover; 
}

/* Kita tetap bisa menambahkan latar belakang di sekitar gambar (jika logo tidak transparan) */
.photobooth-link .link-icon-img {
    /* Ini hanya jika Anda ingin latar belakang di sekitar logo (opsional) */
    background: rgba(255, 235, 59, 0.1); 
    padding: 5px; /* Sedikit padding opsional */
}

.twibbon-link .link-icon-img {
    background: rgba(233, 30, 99, 0.1); 
    padding: 5px; /* Sedikit padding opsional */
}

.link-grid {
    display: flex;
    justify-content: center;
    gap: 30px; /* Jarak antara dua kartu */
    margin-top: 40px;
    flex-wrap: wrap;
}

.interactive-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    width: 280px;
    padding: 30px 20px;
    border-radius: 15px;
    
    background: rgba(30, 30, 50, 0.9);
    color: #fff;
    text-decoration: none;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interactive-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 200, 255, 0.5);
    background: rgba(30, 30, 50, 1);
}

.interactive-link h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #fff;
}

.interactive-link p {
    font-size: 0.9rem;
    color: #ccc;
}

/* === SECTION: SEATING === */
.seating-image-container {
    /* Tambahkan origin untuk transisi penskalaan */
    transform-origin: top center; 
    transition: transform 0.3s ease;
    
    /* Posisikan container di tengah halaman */
    display: flex;
    justify-content: center;
    align-items: center;
    
    max-width: 1200px; 
    margin: 30px auto 0 auto;
    padding: 0 10px;
}

.responsive-seating-map {
    width: 100%; 
    height: auto; 
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
    transition: transform 0.3s ease;
    /* Hapus min-width: 800px; */
}

.responsive-seating-map:hover {
    /* Efek sedikit zoom in saat di hover */
    transform: scale(1.01);
}

/* === SECTION: FOOTER === */
footer {
    background-color: #0d0d1a;
    padding: 20px 10%;
    text-align: center;
    border-top: 1px solid rgba(0, 200, 255, 0.2);
    font-size: 0.9rem;
    color: #888;
    margin-top: 50px; 
}
footer p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem; 
}
footer a {
    color: #00c8ff;
    text-decoration: none;
    transition: color 0.3s;
}
footer a:hover {
    color: #fff;
}

/* Responsive (Media Queries) */
@media (max-width: 1024px) {
    header h2 { font-size: 2rem; }
    #countdown { font-size: 2.2rem; }
    h2 { font-size: 2.5rem; }
    p, ul { font-size: 1.1rem; }
    #guest-name { font-size: 1.5rem; }
}

@media (max-width: 900px) {
    /* Pada Mobile, Balikkan Tampilan */
    .mobile-only {
        display: block !important; /* Tampilkan Versi Mobile */
    }
    .desktop-only {
        display: none !important; /* Sembunyikan Versi Desktop */
    }

    /* Pada Mobile, berikan lebar penuh pada item tunggal */
    .ootd-card {
        width: calc(50% - 20px); 
    }
    
    .ootd-example-item.single-item-focus {
        width: 100%;
        max-width: none; 
    }

    .focus-card {
        width: calc(50% - 30px); /* Dua kartu per baris */
    }
}

@media (max-width: 768px) {
    /* Perbaikan global untuk mobile */
    .section { padding: 40px 5%; min-height: 80vh; }
    
    header h2 { font-size: 1.5rem; }
    h2 { font-size: 2rem; }
    p, ul { font-size: 1rem; }
    iframe { height: 250px; }
    #countdown { font-size: 1.8rem; padding: 10px 20px; }
    #guest-name { font-size: 1.2rem; }
    #cover img { width: 250px; margin-bottom: 30px; }
    header img { width: 80%; max-width: 400px; }
    ul { padding-left: 0; }
    .committee-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .member-card .avatar {
        height: 220px;
    }
    .member-card h3 {
        font-size: 1.1rem;
    }

    .rules-container {
        flex-direction: column; /* Ubah ke kolom tunggal */
        gap: 30px;
    }
    .rules-column {
        padding: 25px;
    }
    .rules-column h3 {
        font-size: 1.4rem;
    }
    .rules-column li {
        font-size: 1.05rem;
    }

    /* Timeline menjadi satu kolom vertikal di mobile */
    .timeline::before {
        left: 20px; /* Garis dipindah ke kiri */
    }
    
    .timeline-item {
        width: 100%; /* Setiap item mengambil seluruh lebar */
        padding-left: 50px; /* Ruang untuk garis dan titik */
        padding-right: 15px;
    }
    
    /* Posisikan semua item dan titik ke kiri */
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
        text-align: left;
    }
    
    /* Posisikan semua titik ke kiri */
    .timeline-item::after,
    .timeline-item:nth-child(even)::after {
        left: 13px;
        right: auto;
    }

    .timeline-content {
        margin-top: 15px;
    }
    
    .timeline-time {
        position: absolute;
        top: 0;
        left: 50px;
        font-size: 1rem;
    }

    .awards-grid {
        /* Di tablet/mobile, ubah menjadi 2 kolom atau 1 kolom */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
        gap: 20px;
    }

    /* Responsive untuk Section Games */
    .games-grid {
        grid-template-columns: 1fr; /* Satu kolom penuh di mobile */
    }
    .game-card img {
        height: 250px;
    }

    .interactive-link {
        width: 100%;
        max-width: 350px;
    }

    .seating-image-container {
        /* PENTING: Menonaktifkan overflow dan memaksa center */
        overflow-x: hidden; 
        justify-content: center;
        
        /* 1. Penskalaan: Sesuaikan nilai 0.65-0.75 ini hingga gambar pas */
        transform: scale(0.65); 
        
        /* 2. Kompensasi Layout: Lebarkan container dan geser ke kiri */
        /* Kompensasi 0.65 (35% dari 100%) -> width: 135% dan margin-left: -17.5% */
        width: 135%; 
        margin-left: -17.5%; 
        
        /* Pastikan padding kembali 0 agar ada lebih banyak ruang */
        padding: 0; 
    }
    
    .responsive-seating-map {
        /* Di sini tidak perlu min-width lagi */
        min-width: unset; 
    }
    
    .dresscode-carousel-container {
        max-width: 95%; 
        margin-top: 30px;
        /* Batasan tinggi total container di mobile (agresif) */
        max-height: 70vh; 
        overflow: hidden; 
        padding-bottom: 5px; 
    }
    
    .carousel-slide {
        /* Ditegaskan lagi di mobile */
        min-width: 100%;
        width: 100%; 
    }

    .carousel-img {
        /* Batasan tinggi yang dioptimalkan untuk gambar 1:1 */
        max-height: 40vh; 
    }
    
    .slide-caption {
        font-size: 0.8rem;
        padding: 10px 5px;
    }
    
    .carousel-control {
        top: 45%;
        padding: 8px;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .ootd-card {
        width: 100%;
    }

    .focus-card {
        width: 100%;
    }

    
}

@media (max-width: 480px) {
    header h2 { font-size: 1.2rem; }
    #countdown { 
        font-size: 1rem; 
        padding: 8px 10px;
        white-space: normal; /* Izinkan teks countdown pecah jika sangat sempit */
    }
    h2 { font-size: 1.6rem; }
    p, ul { font-size: 0.9rem; }
    #guest-name { font-size: 1rem; }
    #open-button { padding: 10px 25px; font-size: 1.1rem; }

    .committee-grid {
        /* Kembali ke 2 kolom di ponsel */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 10px;
    }
    .member-card .avatar {
        height: 180px;
    }
    .member-card .info-box {
        padding: 10px 5px;
    }
    .member-card h3 {
        font-size: 0.9rem;
    }
    .member-card p {
        font-size: 0.75rem;
    }

     .rules-column li {
        font-size: 0.95rem;
    }
    .rules-column li span {
        font-size: 1.5rem;
        margin-right: 10px;
    }
    .rules-column h3 {
        font-size: 1.2rem;
    }
     .prizes-rules-list {
        gap: 20px;
    }
    .prizes-rules-list li {
        font-size: 0.95rem;
    }
    .prizes-rules-list h3 {
        font-size: 1.3rem;
    }
    .final-note p {
        font-size: 1.05rem;
    }
    .awards-grid {
        /* Di layar kecil, paksa 1 kolom penuh */
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .award-card {
        padding: 20px 15px;
        min-height: auto;
    }
    .award-card h3 {
        font-size: 1.4rem;
    }
    .award-card p {
        font-size: 0.95rem;
    }

    .seating-image-container {
        transform: scale(0.55); /* Skala lebih kecil */
        width: 180%; /* Lebar lebih besar (100% / 0.55 ≈ 1.8) */
        margin-left: -40%; /* Geser lebih jauh ke kiri */
    }

    .carousel-img {
        max-height: 35vh; 
    }
}