@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap');

:root {
    --sports-blue: #0A192F;
    --sports-blue-light: #172A45;
    --gold: #FFD700;
    --gold-hover: #E6C200;
    --dark-grey: #333333;
    --black-matte: #020C1B;
    --white-clean: #F8F9FA;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --transition-speed: 0.4s;
}

body {
    background-color: var(--sports-blue);
    color: var(--white-clean);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

/* Typography Helpers */
.fw-black { font-weight: 900; }
.text-gold { color: var(--gold) !important; }
.bg-gold { background-color: var(--gold) !important; }
.tracking-wide { letter-spacing: 2px; }
.tracking-tight { letter-spacing: -1px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-400 { max-width: 400px; }
.font-xs { font-size: 0.75rem; }
.font-sm { font-size: 0.9rem; }
.lead-sm { font-size: 1.1rem; line-height: 1.7; }
.text-light-muted { color: #CCD6F6; }
.text-secondary-muted { color: #8892B0; }

.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-6 { margin-bottom: 5rem; }

/* Sticky Navbar */
.basic-navbar {
    background-color: rgba(10, 25, 47, 0.95) !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all var(--transition-speed);
}
.basic-navbar .nav-link {
    color: var(--white-clean) !important;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 0.5rem 1.2rem !important;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
.basic-navbar .nav-link:hover, 
.basic-navbar .nav-link.active {
    color: var(--gold) !important;
    border-bottom: 2px solid var(--gold);
}

.page-section { min-height: calc(100vh - 70px); display: block; }

/* Hero Graphics Base */
.hero-section {
    min-height: 80vh;
    background: url('https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&q=80&w=1600') no-repeat center center/cover;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(2, 12, 27, 0.85) 0%, rgba(10, 25, 47, 0.95) 100%);
    z-index: 1;
}

.section-title { font-size: 2.25rem; font-weight: 700; text-transform: uppercase; color: var(--white-clean); }
.title-line { width: 60px; height: 4px; background-color: var(--gold); border-radius: 2px; margin-top: 0.5rem; }
.section-title-center { font-size: 2.25rem; font-weight: 700; text-transform: uppercase; color: var(--white-clean); }
.title-line-center { width: 60px; height: 4px; background-color: var(--gold); border-radius: 2px; margin: 0.5rem auto 0 auto; }

/* Global Theme Card Components */
.bg-dark-card { background-color: var(--sports-blue-light) !important; border: 1px solid rgba(255, 215, 0, 0.05); }
.border-top-gold { border-top: 4px solid var(--gold) !important; }
.border-left-gold { border-left: 4px solid var(--gold) !important; }
.border-gold-sm { border: 2px solid rgba(255, 215, 0, 0.2); }
.border-gold-md { border: 4px solid rgba(255, 215, 0, 0.3); }

.btn-gold {
    background-color: var(--gold); color: var(--sports-blue);
    transition: all 0.3s ease-in-out; border: 1px solid var(--gold);
}
.btn-gold:hover {
    background-color: var(--gold-hover); color: var(--sports-blue);
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}
.btn-outline-gold {
    background-color: transparent; color: var(--gold);
    border: 2px solid var(--gold); transition: all 0.3s;
}
.btn-outline-gold:hover { background-color: var(--gold); color: var(--sports-blue); }

/* FLOATING CUSTOM ARROWS FOR TEAM MEMBER SLIDERS */
.swiper-outer-wrapper { width: 100%; position: relative; }
.team-swiper { width: 100%; padding-bottom: 2.5rem; }
.team-card { transition: transform var(--transition-speed) ease; overflow: hidden; border-radius: 8px; }
.team-card:hover { transform: translateY(-8px); }
.card-img-wrapper img { height: 230px; object-fit: cover; }
.swiper-pagination-bullet-active { background: var(--gold) !important; }

.custom-arrow-prev, .custom-arrow-next {
    position: absolute; top: 45%; transform: translateY(-50%);
    width: 50px; height: 50px; background-color: var(--sports-blue-light);
    border: 2px solid var(--gold); border-radius: 50%; color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 50; transition: all 0.3s ease;
    font-size: 2rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.custom-arrow-prev:hover, .custom-arrow-next:hover {
    background-color: var(--gold); color: var(--sports-blue);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.custom-arrow-prev { left: -15px; }
.custom-arrow-next { right: -15px; }

@media (max-width: 768px) {
    .custom-arrow-prev, .custom-arrow-next { display: none !important; }
}

/* ==========================================================================
   BIODATA UI - REVERTED TO ORIGINAL DARK BOX CONCEPT (FIXED INTERNET CONCEPT)
   ========================================================================== */
/* ROW 1: Box Atas Memanjang */
.biodata-top-header-box {
    border-left: 5px solid var(--gold);
    background-color: var(--sports-blue-light) !important;
}
.sketch-image-container {
    width: 140px; height: 140px; border-radius: 6px;
    border: 2px solid rgba(255, 215, 0, 0.3); padding: 4px;
    background-color: var(--sports-blue); overflow: hidden;
}
.sketch-avatar-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
}

/* ROW 2: Box Bawah Memanjang Semuanya Ke Bawah */
.biodata-bottom-content-box {
    background-color: var(--sports-blue-light) !important;
}
.biodata-text-section h4 {
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.biodata-text-section .row div {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- PAGE 3: VIDEO THEATER CONTROLS --- */
.theater-mode { background-color: var(--black-matte); }
.video-container { border-radius: 12px; overflow: hidden; max-width: 900px; }

/* --- PAGE 4: CANVA CONTAINER --- */
.canva-embed-wrapper { max-width: 900px; background-color: var(--sports-blue-light); }

/* ==========================================================================
   [FIXED TOTAL] PREMIUM ACHIEVEMENT DATA TABLE PER THEME CODE STYLE
   ========================================================================== */
.table-horizontal-scroll-container {
    overflow-x: auto;
    background-color: var(--sports-blue-light) !important;
}
.premium-achievement-table {
    width: 100%; min-width: 950px; border-collapse: collapse; background: var(--sports-blue-light) !important;
}

/* Kepala jadual mengekalkan warna hitam gelap asalnya */
.premium-achievement-table thead tr {
    background-color: var(--black-matte) !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}
.premium-achievement-table th {
    color: rgba(255, 255, 255, 0.9) !important; font-weight: 700; padding: 1.2rem 1rem;
}

/* Memastikan warna teks di dalam baris jadual kontras cerah atas background gelap */
.table-text-main {
    color: #FFFFFF !important;
}
.table-text-sub {
    color: #CCD6F6 !important; /* Warna teks kelabu cerah */
}
.table-text-gold {
    color: var(--gold) !important; /* Kekal warna gold premium */
}
.premium-achievement-table td {
    padding: 1.2rem 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}
.premium-achievement-table tbody tr {
    background-color: var(--sports-blue-light) !important;
    transition: background-color 0.2s ease;
}
.premium-achievement-table tbody tr:hover {
    background-color: rgba(2, 12, 27, 0.4) !important;
}

/* Medal Badges Custom */
.medal-badge-custom {
    display: inline-flex; align-items: center; padding: 0.45rem 0.9rem;
    font-size: 0.75rem; font-weight: 700; text-uppercase; letter-spacing: 0.5px; border-radius: 4px;
}
.badge-gold-premium { background-color: rgba(255, 215, 0, 0.15); color: var(--gold); border: 1px solid var(--gold); }
.badge-silver { background-color: rgba(192, 192, 192, 0.15); color: #E1E1E1; border: 1px solid var(--silver); }

/* Custom Scrollbar for table track */
.table-horizontal-scroll-container::-webkit-scrollbar { height: 8px; }
.table-horizontal-scroll-container::-webkit-scrollbar-track { background: var(--sports-blue-light); }
.table-horizontal-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.7) 100%);
    border-radius: 10px;
}
.table-horizontal-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--gold-hover); }

/* --- PAGE 6: QUIZ INTERACTIVE CODES --- */
.quiz-wrapper { max-width: 650px; }
.quiz-option {
    border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 4px; padding: 1rem; 
    color: var(--white-clean); background-color: rgba(2, 12, 27, 0.2); cursor: pointer;
    transition: all 0.2s ease; font-weight: 500;
}
.quiz-option:hover { background-color: rgba(255, 215, 0, 0.1); }
.quiz-option.correct { background-color: rgba(25, 135, 84, 0.2) !important; border-color: #198754 !important; color: #20c997 !important; }
.quiz-option.incorrect { background-color: rgba(220, 53, 69, 0.2) !important; border-color: #dc3545 !important; color: #ea868f !important; }
.score-circle-wrapper { width: 120px; height: 120px; border: 4px solid var(--gold); }

/* Footer Design Elements */
.main-footer { background-color: var(--black-matte); position: relative; z-index: 10; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: #8892B0; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--gold); }

/* Audio Controls */
.audio-control-widget { position: fixed; bottom: 30px; right: 30px; z-index: 9999; }
.audio-control-widget button { width: 55px; height: 55px; border: 2px solid var(--gold) !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
.audio-control-widget button.playing { animation: pulseGlow 2s infinite; }

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.d-none { display: none !important; }