/* Fontlar */
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Playfair+Display:wght@700&family=Roboto:wght@300;400;500;700&family=ZCOOL+XiaoWei&display=swap');
        @media (min-width: 769px) {
            body { cursor: block; }
        }

        #fixed-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -10;
            background-image: url('./img/background.png');
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            filter: brightness(0.4);
        }

        #language-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0c0c0c;
            z-index: 10001;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: opacity 0.8s ease;
            overflow: hidden;
        }
        
        #language-selection-box {
            text-align: center;
            position: relative;
            z-index: 2;
            width: 90%;
            max-width: 800px;
            padding-top: 50px; 
        }

        .language-flags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 40px; 
        }
        .lang-option img {
            width: 70px;
            border: 2px solid transparent;
            border-radius: 5px;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .lang-option:hover img {
            transform: scale(1.1);
            border-color: #e4d59f;
        }
        
        .page-language-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: none;
        }
        .current-lang-btn {
            background: rgba(0,0,0,0.5);
            border: 1px solid #e4d59f;
            border-radius: 5px;
            padding: 5px;
            cursor: pointer;
            display: block;
        }
        .current-lang-btn img {
            width: 40px;
            height: auto;
            display: block;
        }
        .lang-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(12, 12, 12, 0.9);
            border: 1px solid #e4d59f;
            border-radius: 5px;
            margin-top: 5px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease;
        }
        .lang-dropdown.visible {
            max-height: 700px; 
        }
        .lang-dropdown .lang-option img {
            width: 40px;
            padding: 8px;
            display: block;
            transition: background-color 0.2s ease;
        }
        .lang-dropdown .lang-option:hover {
            background-color: rgba(228, 213, 159, 0.2);
        }

        .video-container {
            position: relative;
            width: 100%;
            min-height: 400px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: transparent;
            padding: 50px 0;
        }

        .header-background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            filter: brightness(0.6);
        }

        .header-content {
            position: relative;
            z-index: 1;
            width: 90%;
            max-width: 550px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .header-content img {
            width: 100%;
            height: auto;
        }
        
        .background-wrapper {
            position: relative;
            overflow: hidden;
        }

        .background-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            z-index: 0;
            filter: brightness(0.5) contrast(1.1);
            pointer-events: none;
        }
        
        .particles-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .content-section {
            padding: 80px 40px;
            max-width: 1200px;
            margin: auto;
            text-align: center;
            position: relative; 
            z-index: 2;
        }

        .section-title {
            font-family: 'ZCOOL XiaoWei', serif;
            font-size: 4rem; 
            font-weight: 700;
            margin-bottom: 80px; 
            text-transform: uppercase;
            letter-spacing: 3px;
            background: linear-gradient(
                to bottom,
                #fff9c4 0%,
                #ffecb3 30%,
                #e4d59f 50%,
                #d4a017 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 
                0 0 10px rgba(228, 213, 159, 0.5),
                0 0 20px rgba(212, 160, 23, 0.3);
            position: relative;
            display: inline-block;
        }
        
        .section-title::before {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.8) 50%, transparent 55%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: shineText 4s infinite linear;
            opacity: 0.5;
            z-index: 1;
        }

        @keyframes shineText {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .about-text {
            font-size: 1.25rem;
            line-height: 1.8;
            color: #fff8e1;
            max-width: 800px;
            margin: 0 auto 40px auto;
            text-shadow: 0 2px 4px rgba(0,0,0, 0.9);
            font-weight: 500;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 100px;
        }
        .info-card {
            background-color: rgba(42, 33, 28, 0.85); 
            border: 1px solid #4a3a2a;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .info-card-icon {
            height: 40px;
            width: 40px;
            margin-bottom: 20px;
            fill: #e4d59f; 
        }
        .info-card-title {
            font-family: 'Cinzel', serif;
            font-size: 1.3rem;
            color: #e4d59f;
            margin: 0 0 15px 0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        .info-card-text {
            color: #ffffff; 
            font-size: 1.05rem;
            line-height: 1.6;
            text-shadow: 1px 1px 2px #000000; 
            font-weight: 400;
        }

        .features-container {
            display: flex;
            flex-direction: column; 
            gap: 80px; 
        }

        .feature-row {
            display: flex;
            align-items: flex-start; 
            gap: 50px;
        }

        .feature-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .feature-text-block {
            flex: 1; 
            text-align: left;
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .feature-image-block {
            flex: 1; 
        }

        .feature-image-block img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            border: 2px solid #333; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-image-block img:hover {
            transform: scale(1.03); 
            box-shadow: 0 0 25px #e4d59f; 
        }

        .feature-title {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 2.8rem; 
            color: #e4d59f;
            margin-top: 0;
            margin-bottom: 20px;
            padding-bottom: 20px;
            position: relative; 
            border-bottom: none; 
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .feature-title::after {
            content: '';
            position: absolute;
            bottom: 10px; 
            left: 0;
            width: 0; 
            height: 1px;
            background-color: #555;
            transition: width 4s cubic-bezier(0.25, 1, 0.5, 1); 
        }

        .feature-title.visible::after {
            width: 100%; 
        }

        .feature-description {
            font-size: 1.15rem; 
            line-height: 1.7;
            color: #ffffff; 
            text-shadow: 2px 2px 5px #000000; 
            font-weight: 500; 
        }
        
        .footer {
            text-align: center;
            padding: 40px 20px;
            background-color: #080808;
            position: relative; 
            z-index: 1;
        }

        .footer p {
            margin: 0;
            color: #999;
        }

        .action-buttons {
            margin-top: 40px;
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        .action-btn {
            font-family: 'ZCOOL XiaoWei', serif;
            text-decoration: none;
            color: #e4d59f;
            background-color: rgba(12, 12, 12, 0.9);
            border: 2px solid #e4d59f;
            padding: 12px 25px; 
            border-radius: 4px;
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem; 
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(228, 213, 159, 0.2);
        }
        
        .action-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

        .action-btn:hover {
            color: #fff;
            background-color: rgba(228, 213, 159, 0.1);
            box-shadow: 
                0 0 20px rgba(228, 213, 159, 0.6),
                inset 0 0 10px rgba(228, 213, 159, 0.3);
            border-color: #fff;
            text-shadow: 0 0 5px #e4d59f;
        }

        .action-btn:hover::before {
            left: 100%;
        }

        .action-btn svg {
            width: 20px; 
            height: 20px; 
            fill: currentColor;
            filter: drop-shadow(0 0 2px rgba(228, 213, 159, 0.5));
        }

        @media (max-width: 768px) {
            .background-video {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }
            .video-container {
                height: auto;
                min-height: 300px;
                padding: 30px 0;
            }
            .section-title {
                font-size: 2.8rem;
            }
            .content-section {
                padding: 60px 20px;
            }
            .feature-row, .feature-row:nth-child(even) {
                flex-direction: column;
            }
            .feature-text-block {
                text-align: center; 
                background: rgba(0,0,0,0.6); 
            }
            body {
                cursor: auto; 
            }
            .language-flags {
                justify-content: center;
                gap: 10px;
                padding: 0 10px;
            }
            .lang-option img {
                width: 50px;
            }
            .action-buttons {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                width: 100%;
                max-width: 400px;
                margin-left: auto;
                margin-right: auto;
            }
            .action-btn {
                justify-content: center;
                padding: 12px 5px;
                font-size: 1rem;
                white-space: nowrap;
            }
        }
.stream-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.stream-card {
    width: 100%;
    max-width: 1000px;
    background: rgba(20, 20, 20, 0.85);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
}

.stream-header {
    padding: 12px 18px;
    background: linear-gradient(90deg, #9146FF, #5c2db8);
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.stream-iframe iframe {
    width: 100%;
    border: none;
    display: block;
}

.stream-footer {
    padding: 12px 18px;
    text-align: right;
    background: rgba(0,0,0,0.4);
}

.stream-footer a {
    color: #9146FF;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.stream-footer a:hover {
    color: white;
}