/* ============================================
   MIDNIGHT THEME - main.css (moban-55)
   Starry Night Sky Theme with Crescent Moon
   Colors: #0A0A2A→#151540, #E8E8F0, #FFD700
   ============================================ */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #0A0A2A;
    color: #E8E8F0;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: #FFD700;
    transition: all 0.3s ease;
}

a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.gold-text {
    color: #FFD700;
}

/* === KEYFRAME ANIMATIONS === */
@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes starTwinkle2 {
    0%, 100% { opacity: 0.8; }
    33% { opacity: 0.2; }
    66% { opacity: 0.9; }
}

@keyframes moonGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(232, 232, 240, 0.3), 0 0 40px rgba(232, 232, 240, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(232, 232, 240, 0.5), 0 0 60px rgba(232, 232, 240, 0.2);
    }
}

@keyframes constellationDraw {
    0% { border-color: transparent; }
    50% { border-color: rgba(255, 215, 0, 0.6); }
    100% { border-color: rgba(255, 215, 0, 0.3); }
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(300px) translateY(300px) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.2); }
}

@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes countUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes notificationScroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* === STAR FIELD (box-shadow technique) === */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.star-field-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.star-layer-1 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        50px 30px #fff, 120px 80px #fff, 200px 45px #fff, 280px 120px #fff,
        350px 20px #fff, 420px 95px #fff, 510px 60px #fff, 580px 140px #fff,
        650px 35px #fff, 720px 110px #fff, 790px 55px #fff, 860px 130px #fff,
        930px 25px #fff, 1000px 90px #fff, 1070px 50px #fff, 1140px 120px #fff,
        45px 180px #fff, 135px 220px #fff, 225px 195px #fff, 315px 250px #fff,
        405px 175px #fff, 495px 235px #fff, 585px 190px #fff, 675px 245px #fff,
        765px 170px #fff, 855px 230px #fff, 945px 185px #fff, 1035px 240px #fff,
        1125px 180px #fff, 60px 300px #fff, 150px 340px #fff, 240px 310px #fff,
        330px 360px #fff, 420px 295px #fff, 510px 350px #fff, 600px 305px #fff,
        690px 355px #fff, 780px 290px #fff, 870px 345px #fff, 960px 300px #fff,
        1050px 350px #fff, 1140px 295px #fff, 75px 400px #fff, 165px 440px #fff,
        255px 410px #fff, 345px 460px #fff, 435px 395px #fff, 525px 450px #fff,
        615px 405px #fff, 705px 455px #fff, 795px 390px #fff, 885px 445px #fff,
        975px 400px #fff, 1065px 450px #fff, 1155px 395px #fff, 90px 500px #fff,
        180px 540px #fff, 270px 510px #fff, 360px 560px #fff, 450px 495px #fff,
        540px 550px #fff, 630px 505px #fff, 720px 555px #fff, 810px 490px #fff,
        900px 545px #fff, 990px 500px #fff, 1080px 550px #fff;
    animation: starTwinkle 4s ease-in-out infinite;
}

.star-layer-2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        80px 50px rgba(255,255,255,0.8), 180px 120px rgba(255,255,255,0.8),
        300px 70px rgba(255,255,255,0.8), 430px 150px rgba(255,255,255,0.8),
        560px 40px rgba(255,255,255,0.8), 680px 130px rgba(255,255,255,0.8),
        800px 60px rgba(255,255,255,0.8), 920px 140px rgba(255,255,255,0.8),
        1050px 80px rgba(255,255,255,0.8), 1150px 160px rgba(255,255,255,0.8),
        100px 200px rgba(255,255,255,0.8), 230px 270px rgba(255,255,255,0.8),
        370px 210px rgba(255,255,255,0.8), 500px 280px rgba(255,255,255,0.8),
        640px 190px rgba(255,255,255,0.8), 770px 260px rgba(255,255,255,0.8),
        900px 205px rgba(255,255,255,0.8), 1030px 275px rgba(255,255,255,0.8),
        1150px 215px rgba(255,255,255,0.8), 140px 350px rgba(255,255,255,0.8),
        270px 390px rgba(255,255,255,0.8), 410px 340px rgba(255,255,255,0.8),
        550px 400px rgba(255,255,255,0.8), 680px 330px rgba(255,255,255,0.8),
        810px 380px rgba(255,255,255,0.8), 940px 345px rgba(255,255,255,0.8),
        1070px 395px rgba(255,255,255,0.8), 160px 480px rgba(255,255,255,0.8),
        310px 520px rgba(255,255,255,0.8), 460px 470px rgba(255,255,255,0.8),
        610px 530px rgba(255,255,255,0.8), 750px 460px rgba(255,255,255,0.8),
        890px 510px rgba(255,255,255,0.8), 1020px 475px rgba(255,255,255,0.8);
    animation: starTwinkle2 6s ease-in-out infinite;
}

.star-layer-3 {
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        150px 80px rgba(255,215,0,0.6), 400px 50px rgba(255,215,0,0.6),
        650px 120px rgba(255,215,0,0.6), 900px 60px rgba(255,215,0,0.6),
        1100px 100px rgba(255,215,0,0.6), 250px 200px rgba(255,215,0,0.6),
        500px 250px rgba(255,215,0,0.6), 750px 180px rgba(255,215,0,0.6),
        1000px 230px rgba(255,215,0,0.6), 350px 350px rgba(255,215,0,0.6),
        600px 380px rgba(255,215,0,0.6), 850px 320px rgba(255,215,0,0.6),
        1050px 370px rgba(255,215,0,0.6), 200px 470px rgba(255,215,0,0.6),
        450px 500px rgba(255,215,0,0.6), 700px 440px rgba(255,215,0,0.6),
        950px 490px rgba(255,215,0,0.6);
    animation: starTwinkle 8s ease-in-out infinite;
}

/* === CRESCENT MOON CSS === */
.crescent-moon {
    position: absolute;
    top: 40px;
    right: 80px;
    z-index: 1;
    animation: moonGlow 4s ease-in-out infinite;
}

.moon-outer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #E8E8F0;
    box-shadow: 0 0 20px rgba(232, 232, 240, 0.4), 0 0 60px rgba(232, 232, 240, 0.15);
    position: relative;
}

.moon-inner {
    position: absolute;
    top: -5px;
    left: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #0A0A2A;
    box-shadow: inset 0 0 10px rgba(10, 10, 42, 0.8);
}

/* === SHOOTING STAR === */
.shooting-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    z-index: 1;
}

.shooting-star-1 {
    top: 15%;
    left: 10%;
    animation: shootingStar 3s ease-in-out infinite;
    animation-delay: 2s;
}

.shooting-star-2 {
    top: 35%;
    left: 60%;
    animation: shootingStar 4s ease-in-out infinite;
    animation-delay: 5s;
}

/* === HEADER === */
.site-header {
    background: linear-gradient(180deg, #0A0A2A 0%, #0D0D35 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.logo img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.header-time {
    color: #E8E8F0;
    font-size: 14px;
    opacity: 0.7;
}

.header-btn-group {
    display: flex;
    gap: 10px;
}

.btn-login {
    padding: 8px 20px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 4px;
    color: #FFD700;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s;
}

.btn-login:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
    color: #FFD700;
}

.btn-register {
    padding: 8px 20px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 4px;
    color: #0A0A2A;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s;
}

.btn-register:hover {
    background: linear-gradient(135deg, #FFA500, #FFD700);
    color: #0A0A2A;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-demo {
    padding: 8px 20px;
    border: 1px solid rgba(232, 232, 240, 0.3);
    border-radius: 4px;
    color: #E8E8F0;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s;
}

.btn-demo:hover {
    border-color: #E8E8F0;
    color: #fff;
    background: rgba(232, 232, 240, 0.05);
}

/* === NAVIGATION === */
.main-navigation {
    background: rgba(10, 10, 42, 0.95);
    border-top: 1px solid rgba(255, 215, 0, 0.08);
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
}

.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 12px 18px;
    color: #E8E8F0;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.nav-link:hover {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.05);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.nav-link i {
    margin-right: 5px;
    color: #FFD700;
    font-size: 12px;
}

.has-dropdown .nav-link::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 5px;
    font-size: 10px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFD700;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

/* === NOTIFICATION BAR === */
.notification-bar {
    background: linear-gradient(90deg, #0D0D35, #151540, #0D0D35);
    padding: 8px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 215, 0, 0.05);
}

.notification-content {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: notificationScroll 30s linear infinite;
    color: #E8E8F0;
    font-size: 13px;
    opacity: 0.8;
}

.notification-content span {
    color: #FFD700;
}

/* === ANNOUNCEMENT MODAL === */
.announcement-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.announcement-modal.active {
    display: flex;
}

.announcement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 42, 0.9);
}

.announcement-content {
    position: relative;
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.1);
}

.announcement-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #E8E8F0;
    font-size: 28px;
    cursor: pointer;
    z-index: 1;
}

.announcement-close:hover {
    color: #FFD700;
}

.announcement-header-icon {
    text-align: center;
    margin-bottom: 15px;
}

.announcement-header-icon i {
    font-size: 48px;
    color: #FFD700;
    animation: floatUp 3s ease-in-out infinite;
}

.announcement-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'Cinzel', serif;
}

.announcement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.announcement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(10, 10, 42, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    transition: all 0.3s;
}

.announcement-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.3);
}

.announcement-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.announcement-badge.hot {
    background: #ff4444;
    color: #fff;
}

.announcement-badge.new {
    background: #00cc66;
    color: #fff;
}

.announcement-badge.info {
    background: #3399ff;
    color: #fff;
}

.announcement-text {
    flex: 1;
    color: #E8E8F0;
    font-size: 13px;
}

.announcement-item i {
    color: #FFD700;
    font-size: 12px;
}

.announcement-footer {
    text-align: center;
}

.announcement-cta {
    display: inline-block;
    padding: 12px 40px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #0A0A2A;
    font-weight: 700;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s;
}

.announcement-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    color: #0A0A2A;
}

/* === BUTTONS === */
.btn-gold-primary {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #0A0A2A;
    font-weight: 700;
    font-size: 16px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-gold-primary:hover {
    background: linear-gradient(135deg, #FFA500, #FFD700);
    color: #0A0A2A;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    text-shadow: none;
}

.btn-outline-gold {
    display: inline-block;
    padding: 14px 40px;
    border: 2px solid #FFD700;
    color: #FFD700;
    font-weight: 700;
    font-size: 16px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    background: transparent;
}

.btn-outline-gold:hover {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

/* === SECTION COMMON === */
.section-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
}

.section-title i {
    margin-right: 10px;
}

.section-subtitle {
    text-align: center;
    color: #E8E8F0;
    opacity: 0.7;
    font-size: 15px;
    margin-bottom: 40px;
}

/* === 1. MIDNIGHT HERO === */
.midnight-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #0A0A2A 0%, #0D0D35 40%, #151540 100%);
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
}

.hero-inner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 20px;
    max-width: 800px;
}

.hero-main-title {
    margin-bottom: 25px;
}

.hero-brand {
    display: block;
    font-size: 56px;
    font-weight: 700;
    color: #FFD700;
    letter-spacing: 8px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    font-family: 'Cinzel', serif;
}

.hero-divider-line {
    display: block;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    margin: 15px auto;
}

.hero-tagline {
    display: block;
    font-size: 22px;
    color: #E8E8F0;
    letter-spacing: 4px;
    font-weight: 400;
}

.hero-description {
    font-size: 16px;
    color: #E8E8F0;
    opacity: 0.85;
    margin-bottom: 30px;
    line-height: 1.8;
}

.hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 35px;
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #FFD700;
    font-family: 'Cinzel', serif;
}

.hero-stat-label {
    display: block;
    font-size: 12px;
    color: #E8E8F0;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* === 2. STAR GAMES === */
.star-games {
    padding: 60px 0;
}

.star-games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.star-game-card {
    position: relative;
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s;
    overflow: hidden;
    display: block;
}

.star-game-card:hover {
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.1);
}

.star-game-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.star-game-card:hover .star-game-glow {
    opacity: 1;
}

.star-game-icon {
    margin-bottom: 15px;
}

.star-game-icon i {
    font-size: 40px;
    color: #FFD700;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.star-game-rating {
    margin-bottom: 12px;
}

.star-game-rating i {
    color: #FFD700;
    font-size: 12px;
    margin: 0 1px;
}

.star-game-card h3 {
    font-size: 18px;
    color: #E8E8F0;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
}

.star-game-card p {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 15px;
}

.star-game-players {
    font-size: 12px;
    color: #FFD700;
    opacity: 0.8;
}

.star-game-players i {
    margin-right: 4px;
}

/* === 3. CONSTELLATION GRID === */
.constellation-grid {
    padding: 60px 0;
    background: linear-gradient(180deg, rgba(13, 13, 53, 0.5), rgba(21, 21, 64, 0.5));
    border-radius: 12px;
    margin: 20px 0;
}

.constellation-map {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.constellation-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.constellation-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    transition: all 0.3s;
}

.constellation-node:hover {
    transform: scale(1.1);
}

.node-star {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #151540, #1A1A50);
    border: 2px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    animation: pulseGlow 3s ease-in-out infinite;
}

.constellation-node:hover .node-star {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.node-star i {
    color: #FFD700;
    font-size: 18px;
}

.node-label {
    font-size: 12px;
    color: #E8E8F0;
    text-align: center;
    font-weight: 500;
}

.constellation-line {
    flex: 1;
    max-width: 80px;
    height: 0;
    border-bottom: 2px dotted rgba(255, 215, 0, 0.3);
    animation: constellationDraw 3s ease-in-out infinite;
}

/* === 4. MOON FEATURES === */
.moon-features {
    padding: 60px 0;
}

.moon-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.moon-feature-card {
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(232, 232, 240, 0.08);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s;
}

.moon-feature-card:hover {
    border-color: rgba(232, 232, 240, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(232, 232, 240, 0.05);
}

.moon-feature-icon {
    margin-bottom: 20px;
}

/* Crescent Moon Icon CSS */
.crescent-moon-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E8E8F0;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(232, 232, 240, 0.3);
}

.crescent-moon-icon::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 12px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #0D0D35;
}

.moon-feature-card h3 {
    font-size: 16px;
    color: #E8E8F0;
    margin-bottom: 12px;
    font-family: 'Cinzel', serif;
}

.moon-feature-card p {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.7;
    line-height: 1.7;
}

/* === 5. NIGHT STATS === */
.night-stats {
    position: relative;
    padding: 60px 0;
    background: linear-gradient(180deg, #0A0A2A, #0D0D35);
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
}

.night-stats-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.star-layer-stats {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        30px 20px #fff, 90px 60px #fff, 150px 30px #fff, 210px 80px #fff,
        270px 15px #fff, 330px 70px #fff, 390px 40px #fff, 450px 90px #fff,
        510px 25px #fff, 570px 75px #fff, 630px 35px #fff, 690px 85px #fff,
        750px 20px #fff, 810px 70px #fff, 870px 45px #fff, 930px 95px #fff,
        40px 130px #fff, 100px 170px #fff, 160px 140px #fff, 220px 180px #fff,
        280px 125px #fff, 340px 165px #fff, 400px 135px #fff, 460px 175px #fff,
        520px 120px #fff, 580px 160px #fff, 640px 130px #fff, 700px 170px #fff,
        760px 125px #fff, 820px 165px #fff, 880px 135px #fff, 940px 175px #fff;
    animation: starTwinkle 5s ease-in-out infinite;
}

.night-stats .section-title,
.night-stats .section-subtitle {
    position: relative;
    z-index: 1;
}

.night-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    position: relative;
    z-index: 1;
}

.night-stat-card {
    background: rgba(13, 13, 53, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
}

.night-stat-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-3px);
}

.stat-star-decoration {
    margin-bottom: 10px;
}

.stat-star-decoration i {
    color: #FFD700;
    font-size: 14px;
    animation: starTwinkle 2s ease-in-out infinite;
}

.stat-star-decoration.bottom {
    margin-top: 10px;
    margin-bottom: 0;
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #E8E8F0;
    font-family: 'Cinzel', serif;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(232, 232, 240, 0.3);
}

.stat-label {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === 6. NIGHT PROMOTIONS === */
.night-promos {
    padding: 60px 0;
}

.night-promos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.night-promo-card {
    position: relative;
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s;
}

.night-promo-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.1);
}

.promo-star-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        20px 15px rgba(255,255,255,0.3), 60px 40px rgba(255,255,255,0.3),
        100px 25px rgba(255,255,255,0.3), 140px 55px rgba(255,255,255,0.3),
        180px 10px rgba(255,255,255,0.3), 220px 45px rgba(255,255,255,0.3),
        30px 80px rgba(255,255,255,0.3), 70px 100px rgba(255,255,255,0.3),
        110px 75px rgba(255,255,255,0.3), 150px 95px rgba(255,255,255,0.3),
        190px 70px rgba(255,255,255,0.3), 230px 90px rgba(255,255,255,0.3);
    opacity: 0.5;
}

.night-promo-inner {
    position: relative;
    z-index: 1;
    padding: 30px;
    text-align: center;
}

.night-promo-inner .promo-icon {
    margin-bottom: 15px;
}

.night-promo-inner .promo-icon i {
    font-size: 40px;
    color: #FFD700;
}

.night-promo-inner h3 {
    font-size: 18px;
    color: #FFD700;
    margin-bottom: 12px;
    font-family: 'Cinzel', serif;
}

.night-promo-inner p {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.7;
    line-height: 1.7;
    margin-bottom: 15px;
}

.promo-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #E8E8F0;
    opacity: 0.6;
}

.promo-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.promo-badge.hot {
    background: #ff4444;
    color: #fff;
}

.promo-badge.new {
    background: #00cc66;
    color: #fff;
}

.promo-badge.vip {
    background: #FFD700;
    color: #0A0A2A;
}

.btn-promo {
    display: inline-block;
    padding: 10px 30px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #0A0A2A;
    font-weight: 700;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-promo:hover {
    background: linear-gradient(135deg, #FFA500, #FFD700);
    color: #0A0A2A;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    text-shadow: none;
}

/* === 7. FOOTER CTA === */
.footer-cta-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg, #0A0A2A, #0D0D35, #151540);
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
    text-align: center;
}

.footer-cta-starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.star-layer-cta {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        25px 15px #fff, 75px 45px #fff, 125px 25px #fff, 175px 65px #fff,
        225px 10px #fff, 275px 55px #fff, 325px 35px #fff, 375px 75px #fff,
        425px 20px #fff, 475px 60px #fff, 525px 30px #fff, 575px 70px #fff,
        625px 15px #fff, 675px 55px #fff, 725px 40px #fff, 775px 80px #fff,
        35px 110px #fff, 85px 140px #fff, 135px 120px #fff, 185px 150px #fff,
        235px 105px #fff, 285px 135px #fff, 335px 115px #fff, 385px 145px #fff,
        435px 100px #fff, 485px 130px #fff, 535px 110px #fff, 585px 140px #fff,
        635px 105px #fff, 685px 135px #fff, 735px 115px #fff, 785px 145px #fff;
    animation: starTwinkle2 5s ease-in-out infinite;
}

.footer-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-moon-decoration {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.cta-moon-outer {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #E8E8F0;
    position: relative;
    box-shadow: 0 0 20px rgba(232, 232, 240, 0.3);
}

.cta-moon-inner {
    position: absolute;
    top: -3px;
    left: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #0D0D35;
}

.footer-cta-inner h2 {
    font-size: 36px;
    color: #FFD700;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.footer-cta-inner p {
    font-size: 16px;
    color: #E8E8F0;
    opacity: 0.85;
    margin-bottom: 25px;
    line-height: 1.7;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.cta-feature {
    font-size: 14px;
    color: #E8E8F0;
    opacity: 0.8;
}

.cta-feature i {
    color: #FFD700;
    margin-right: 6px;
}

.cta-main-btn {
    font-size: 18px;
    padding: 16px 50px;
}

/* === NEWS SECTION === */
.home-news-section {
    padding: 60px 0;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.home-news-placeholder {
    display: contents;
}

.article-card {
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    display: block;
}

.article-card:hover {
    border-color: rgba(255, 215, 0, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.article-card-thumb {
    height: 200px;
    overflow: hidden;
}

.article-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.article-card:hover .article-card-thumb img {
    transform: scale(1.05);
}

.article-card-title {
    padding: 15px 15px 8px;
    font-size: 15px;
    font-weight: 600;
    color: #E8E8F0;
    line-height: 1.4;
    min-height: 55px;
}

.article-card-title span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-meta {
    padding: 0 15px;
    font-size: 12px;
    color: #E8E8F0;
    opacity: 0.5;
    display: flex;
    gap: 15px;
}

.article-card-meta i {
    margin-right: 4px;
    color: #FFD700;
}

.article-card-excerpt {
    padding: 10px 15px 15px;
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.65;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-more {
    display: block;
    padding: 12px 15px;
    border-top: 1px solid rgba(255, 215, 0, 0.08);
    color: #FFD700;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s;
}

.article-card-more:hover {
    background: rgba(255, 215, 0, 0.05);
}

.article-card-more i {
    margin-left: 5px;
    transition: transform 0.3s;
}

.article-card:hover .article-card-more i {
    transform: translateX(3px);
}

.view-more-btn {
    display: block;
    text-align: center;
    padding: 12px 30px;
    border: 2px solid #FFD700;
    border-radius: 8px;
    color: #FFD700;
    font-weight: 600;
    font-size: 14px;
    max-width: 200px;
    margin: 0 auto;
    transition: all 0.3s;
}

.view-more-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    transform: translateY(-2px);
}

.view-more-btn i {
    margin-left: 5px;
}

/* === FOOTER === */
.site-footer {
    background: linear-gradient(180deg, #0A0A2A 0%, #080820 100%);
    border-top: 2px solid rgba(255, 215, 0, 0.1);
    padding: 50px 0 20px;
    margin-top: 40px;
}

.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: #FFD700;
    font-size: 15px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #E8E8F0;
    opacity: 0.6;
    font-size: 13px;
    transition: all 0.3s;
}

.footer-col ul li a:hover {
    opacity: 1;
    color: #FFD700;
    padding-left: 5px;
}

.footer-brand-logo img {
    height: 40px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
}

.footer-brand-text {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.6;
    line-height: 1.7;
    margin-bottom: 12px;
}

.footer-18plus {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid #ff4444;
    border-radius: 4px;
    color: #ff4444;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
}

.footer-social-links {
    display: flex;
    gap: 10px;
}

.footer-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E8E8F0;
    transition: all 0.3s;
}

.footer-social-links a:hover {
    border-color: #FFD700;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
}

/* Footer License */
.footer-license-bar {
    border-top: 1px solid rgba(255, 215, 0, 0.08);
    padding-top: 25px;
    margin-bottom: 20px;
    text-align: center;
}

.footer-license-bar h4 {
    color: #FFD700;
    font-size: 14px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.license-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.license-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.license-item i {
    font-size: 24px;
    color: #FFD700;
    opacity: 0.6;
}

.license-item span {
    font-size: 11px;
    color: #E8E8F0;
    opacity: 0.5;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 215, 0, 0.05);
    padding-top: 15px;
    text-align: center;
}

.footer-copyright {
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.5;
    margin-bottom: 5px;
}

.footer-disclaimer {
    font-size: 12px;
    color: #E8E8F0;
    opacity: 0.35;
}

/* === SIDEBAR FLOATING === */
.floating-sidebar {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    font-size: 18px;
    transition: all 0.3s;
    position: relative;
}

.sidebar-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
    transform: scale(1.1);
    color: #FFD700;
}

.sidebar-btn-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.sidebar-btn-telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
}

.sidebar-label {
    display: none;
    position: absolute;
    right: 55px;
    background: #0D0D35;
    color: #FFD700;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.sidebar-btn:hover .sidebar-label {
    display: block;
}

/* === BREADCRUMB === */
.breadcrumb {
    padding: 15px 0;
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: #FFD700;
    opacity: 0.8;
}

.breadcrumb a:hover {
    opacity: 1;
}

/* === CONTENT AREA === */
.content-area {
    display: flex;
    gap: 25px;
    padding: 20px 0;
}

.main-content {
    flex: 1;
    min-width: 0;
}

/* === CATEGORY HEADER === */
.category-header {
    text-align: center;
    padding: 30px 0;
}

.category-title {
    font-size: 28px;
    margin-bottom: 10px;
}

.category-desc {
    font-size: 14px;
    color: #E8E8F0;
    opacity: 0.7;
}

/* === PROVIDER TABS === */
.provider-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 0 15px;
}

.provider-tab {
    padding: 8px 18px;
    background: rgba(13, 13, 53, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 20px;
    color: #E8E8F0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.provider-tab:hover,
.provider-tab.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
    color: #FFD700;
}

/* === ARTICLE GRID === */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #E8E8F0;
    opacity: 0.5;
}

/* === PAGINATION === */
.pagination {
    margin-top: 30px;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(13, 13, 53, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.12);
    color: #E8E8F0;
    font-size: 14px;
    transition: all 0.3s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #FFD700;
    color: #FFD700;
}

/* === SINGLE ARTICLE === */
.single-article {
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.article-header {
    margin-bottom: 25px;
}

.article-title {
    font-size: 28px;
    color: #E8E8F0;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #E8E8F0;
    opacity: 0.6;
}

.article-meta i {
    color: #FFD700;
    margin-right: 4px;
}

.article-meta a {
    color: #FFD700;
    opacity: 1;
}

.article-featured-img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
}

.article-featured-img img {
    width: 100%;
    border-radius: 8px;
}

.article-content {
    font-size: 15px;
    color: #E8E8F0;
    line-height: 1.8;
}

.article-content h2,
.article-content h3 {
    color: #FFD700;
    margin: 25px 0 12px;
}

.article-content p {
    margin-bottom: 15px;
}

.article-content a {
    color: #FFD700;
    text-decoration: underline;
}

.article-content img {
    border-radius: 8px;
    margin: 15px 0;
}

.article-content blockquote {
    border-left: 3px solid #FFD700;
    padding: 15px 20px;
    margin: 20px 0;
    background: rgba(255, 215, 0, 0.03);
    border-radius: 0 8px 8px 0;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.08);
    margin-top: 25px;
}

.article-tags i {
    color: #FFD700;
    margin-right: 5px;
}

.article-tags span {
    padding: 4px 12px;
    background: rgba(255, 215, 0, 0.08);
    border-radius: 15px;
    font-size: 12px;
    color: #FFD700;
}

.article-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.08);
}

.article-nav-prev a,
.article-nav-next a {
    color: #FFD700;
    font-size: 14px;
}

/* === RELATED POSTS === */
.related-posts {
    margin-bottom: 30px;
}

.related-posts-title {
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'Cinzel', serif;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.related-item {
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    display: block;
}

.related-item:hover {
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.related-item-thumb {
    height: 120px;
    overflow: hidden;
}

.related-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-item-title {
    padding: 10px;
    font-size: 13px;
    color: #E8E8F0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === PAGE ARTICLE === */
.page-article {
    background: linear-gradient(135deg, #0D0D35, #151540);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 12px;
    padding: 30px;
}

.page-title {
    font-size: 28px;
    color: #E8E8F0;
    margin-bottom: 20px;
    font-family: 'Cinzel', serif;
}

.page-featured-img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.page-featured-img img {
    width: 100%;
    border-radius: 8px;
}

.page-content {
    font-size: 15px;
    color: #E8E8F0;
    line-height: 1.8;
}

.page-content h2,
.page-content h3 {
    color: #FFD700;
    margin: 25px 0 12px;
}

.page-content p {
    margin-bottom: 15px;
}

/* === 404 ERROR PAGE === */
.error-page {
    text-align: center;
    padding: 80px 20px;
}

.error-moon {
    margin: 0 auto 30px;
    position: relative;
    width: 100px;
    height: 100px;
}

.error-moon-outer {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #E8E8F0;
    box-shadow: 0 0 30px rgba(232, 232, 240, 0.3);
    animation: moonGlow 4s ease-in-out infinite;
}

.error-moon-inner {
    position: absolute;
    top: -5px;
    left: 25px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #0A0A2A;
}

.error-code {
    font-size: 80px;
    color: #FFD700;
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    margin-bottom: 10px;
}

.error-title {
    font-size: 24px;
    color: #E8E8F0;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.error-desc {
    font-size: 15px;
    color: #E8E8F0;
    opacity: 0.7;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* === SWIPER CUSTOMIZATION === */
.swiper-pagination-bullet {
    background: #E8E8F0;
    opacity: 0.4;
}

.swiper-pagination-bullet-active {
    background: #FFD700;
    opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
    color: #FFD700;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #fff;
}

/* === UTILITY CLASSES === */
.text-center { text-align: center; }
.text-gold { color: #FFD700; }
.text-moonlight { color: #E8E8F0; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0A0A2A;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.4);
}

/* === SELECTION === */
::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #fff;
}