/* ═══════════════════════════════════════════════════════
   POPÜLER OYUNLAR — 3D COVERFLOW SLIDER  (KBS Style)
   ═══════════════════════════════════════════════════════ */

.kbs-section {
    position: relative;
    background: #050505;
    padding: 60px 0 70px;
    overflow: hidden;
}

.kbs-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,200,83,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */
.kbs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 30px;
}

.kbs-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kbs-icon-wrap {
    width: 40px;
    height: 40px;
    background: rgba(0,200,83,0.12);
    border: 1px solid rgba(0,200,83,0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00c853;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.kbs-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.kbs-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin: 2px 0 0;
}

.kbs-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kbs-nav-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbs-nav-btn:hover {
    background: rgba(0,200,83,0.12);
    border-color: rgba(0,200,83,0.4);
    color: #00c853;
    transform: scale(1.05);
}

.kbs-see-all {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: all 0.25s;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.kbs-see-all:hover {
    color: #00c853;
    border-color: rgba(0,200,83,0.35);
    background: rgba(0,200,83,0.07);
}

/* Stage and 3D Track */
.kbs-stage {
    position: relative;
    width: 100%;
    height: 340px;
    perspective: 1400px;
    overflow: hidden;
}

.kbs-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Cards */
.kbs-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 280px;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.kbs-card.kbs-active {
    border-color: rgba(0, 230, 118, 0.65);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 200, 83, 0.4);
}

.kbs-card:hover {
    border-color: rgba(0, 230, 118, 0.5);
}

.kbs-card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s;
}

.kbs-card:hover .kbs-card-img {
    transform: scale(1.06);
}

.kbs-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kbs-card-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbs-card-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: #00c853;
    letter-spacing: 0.5px;
}

/* Dots */
.kbs-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.kbs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    padding: 0;
}

.kbs-dot.active {
    background: #00c853;
    box-shadow: 0 0 8px rgba(0,200,83,0.6);
    width: 22px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE BUTTON (Navbar)
   ═══════════════════════════════════════════════════════ */

.theme-toggle-btn {
    width: 38px;
    height: 38px;
    background: rgba(18, 22, 30, 0.85);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    border-color: #10b981;
    color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.theme-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s;
}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME  (body.light-theme)
   ═══════════════════════════════════════════════════════ */

body.light-theme {
    background: #f0f2f5 !important;
    color: #111 !important;
}

/* Header / Nav */
body.light-theme .header {
    background: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
}

body.light-theme .header .logo h1 { color: #111 !important; }
body.light-theme .header .logo .highlight { color: #00a846 !important; }
body.light-theme .nav-menu ul {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .nav-link { 
    color: #475569 !important; 
}
body.light-theme .nav-link:hover,
body.light-theme .nav-link.active { 
    color: #0f172a !important; 
    background: #ffffff !important;
    border-color: rgba(0, 168, 70, 0.45) !important;
    box-shadow: 0 3px 12px rgba(0, 168, 70, 0.15) !important;
}
body.light-theme .nav-link.active i,
body.light-theme .nav-link:hover i {
    color: #00a846 !important;
}

body.light-theme .btn-cart-icon {
    background: #fff !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #333 !important;
}
body.light-theme .btn-cart-icon:hover { border-color: #00a846 !important; color: #00a846 !important; }

body.light-theme .btn-login,
body.light-theme .profile-btn {
    background: linear-gradient(180deg, #00c853 0%, #00963e 100%) !important;
    border-color: #00963e !important;
    color: #fff !important;
}
body.light-theme .btn-login:hover,
body.light-theme .profile-btn:hover {
    background: #008035 !important;
    color: #fff !important;
    border-color: #008035 !important;
}

body.light-theme .theme-toggle-btn {
    background: #fff !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #e69500 !important;
}

/* Top bar */
body.light-theme .top-bar {
    background: #dde0dd !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
body.light-theme .marquee-content span { color: #444 !important; }

/* Hero */
body.light-theme .hero-apex {
    background: linear-gradient(135deg, #e8f5e9 0%, #f0f4f0 50%, #e3f2fd 100%) !important;
}
body.light-theme .apex-overlay {
    background: linear-gradient(90deg, rgba(232,245,233,0.92) 40%, transparent 70%) !important;
}
body.light-theme .apex-h-1 { color: #111 !important; text-shadow: none !important; }
body.light-theme .apex-tag-text { color: #00a846 !important; }
body.light-theme .apex-description { color: rgba(0,0,0,0.65) !important; border-left-color: #00a846 !important; }
body.light-theme .btn-apex-main { background: #111 !important; color: #fff !important; }
body.light-theme .btn-apex-main:hover { background: #00a846 !important; }
body.light-theme .apex-ring-icon { background: rgba(255,255,255,0.7) !important; }

/* Popular games section */
body.light-theme .vg-popular-section { background: #f5f7f5 !important; }
body.light-theme .vg-title-text { color: #111 !important; }
body.light-theme .vg-header-badge { background: rgba(0,0,0,0.06) !important; color: #333 !important; }

/* Chat section */
body.light-theme .floki-chat-section { background: #eff1ef !important; }
body.light-theme .floki-chat-heading h2 { color: #111 !important; }
body.light-theme .floki-chat-heading p { color: #555 !important; }
body.light-theme .floki-chat-glow-wrap {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .fchat-sidebar {
    background: #f5f7f5 !important;
    border-right-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .fchat-server-name { color: #111 !important; }
body.light-theme .fchat-channel { color: #555 !important; }
body.light-theme .fchat-channel:hover { background: rgba(0,0,0,0.05) !important; color: #00a846 !important; }
body.light-theme .fchat-main { background: #fff !important; }
body.light-theme .fchat-topbar {
    background: rgba(255,255,255,0.95) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .fchat-topbar-name { color: #111 !important; }
body.light-theme .fchat-topbar-desc { color: #666 !important; }
body.light-theme #chatMessagesArea { background: #fafafa !important; }
body.light-theme .fchat-input-bar {
    background: #f5f7f5 !important;
    border-top-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .fchat-text-input {
    background: #fff !important;
    color: #111 !important;
    border-color: rgba(0,0,0,0.12) !important;
}
body.light-theme .fchat-text-input::placeholder { color: #aaa !important; }
body.light-theme .fchat-members {
    background: #f0f2f0 !important;
    border-left-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .fchat-members-header { color: #555 !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
body.light-theme .fchat-member-name { color: #333 !important; }
body.light-theme .fchat-user-panel {
    background: rgba(0,0,0,0.04) !important;
    border-top-color: rgba(0,0,0,0.07) !important;
}
body.light-theme .uname { color: #111 !important; }
body.light-theme .ustatus { color: #555 !important; }

/* KBS Slider in light */
body.light-theme .kbs-section { background: #e8ebe8 !important; }
body.light-theme .kbs-title { color: #111 !important; }
body.light-theme .kbs-subtitle { color: #666 !important; }
body.light-theme .kbs-nav-btn {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #444 !important;
}
body.light-theme .kbs-nav-btn:hover {
    background: rgba(0,168,70,0.1) !important;
    border-color: rgba(0,168,70,0.4) !important;
    color: #00a846 !important;
}
body.light-theme .kbs-see-all { color: #555 !important; border-color: rgba(0,0,0,0.12) !important; }
body.light-theme .kbs-see-all:hover { color: #00a846 !important; border-color: rgba(0,168,70,0.35) !important; }
body.light-theme .kbs-icon-wrap {
    background: rgba(0,168,70,0.1) !important;
    border-color: rgba(0,168,70,0.3) !important;
    color: #00a846 !important;
}
body.light-theme .kbs-dot { background: rgba(0,0,0,0.15) !important; }
body.light-theme .kbs-dot.active { background: #00a846 !important; }

/* Value cards */
body.light-theme .value-card .card-inner {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .value-card h3 { color: #111 !important; }
body.light-theme .value-card p { color: #555 !important; }

/* Welcome banner */
body.light-theme .welcome-banner {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .welcome-banner h3 { color: #111 !important; }
body.light-theme .welcome-banner p { color: #555 !important; }

/* Footer */
body.light-theme footer,
body.light-theme .footer {
    background: #e2e5e2 !important;
    color: #333 !important;
}
body.light-theme .footer-bottom { background: #d8dbd8 !important; color: #555 !important; }
body.light-theme .footer h4 { color: #111 !important; }
body.light-theme .footer p, body.light-theme .footer a { color: #555 !important; }
body.light-theme .footer a:hover { color: #00a846 !important; }

/* Sun icon in light mode */
body.light-theme #themeIconSun { color: #e69500 !important; }

/* Video bg wrapper */
body.light-theme .video-background-wrapper { background: #f0f2f0 !important; }
body.light-theme .bg-video { opacity: 0.15 !important; }
body.light-theme .nexus-values { background: transparent !important; }
body.light-theme .home-products-slider { background: #f5f7f5 !important; }
body.light-theme .section-title { color: #111 !important; }
body.light-theme .section-subtitle { color: #00a846 !important; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE KBS SLIDER (TV / Desktop / Tablet / Phone)
   ═══════════════════════════════════════════════════════ */

/* TV / 4K / Ultra-wide (1920px+) */
@media (min-width: 1920px) {
    .kbs-section { padding: 80px 0 90px; }
    .kbs-stage { height: 430px; }
    .kbs-card { width: 280px; height: 360px; border-radius: 20px; }
    .kbs-card-name { font-size: 1.15rem; }
    .kbs-card-tag { font-size: 0.82rem; }
    .kbs-title { font-size: 1.6rem; }
}

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    .kbs-section { padding: 50px 0 60px; }
    .kbs-stage { height: 320px; }
    .kbs-card { width: 200px; height: 260px; border-radius: 14px; }
    .kbs-header { padding: 0 20px; margin-bottom: 25px; }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .kbs-section { padding: 40px 0 50px; }
    .kbs-stage { height: 270px; }
    .kbs-card { width: 170px; height: 225px; border-radius: 12px; }
    .kbs-header { padding: 0 16px; margin-bottom: 20px; }
    .kbs-title { font-size: 1.1rem; }
    .kbs-subtitle { font-size: 0.72rem; }
    .kbs-icon-wrap { width: 34px; height: 34px; font-size: 0.95rem; }
    .kbs-card-name { font-size: 0.85rem; }
    .kbs-card-tag { font-size: 0.65rem; }
    .kbs-dots { margin-top: 20px; }
}

/* Small Phone (max 480px) */
@media (max-width: 480px) {
    .kbs-section { padding: 30px 0 45px; }
    .kbs-stage { height: 235px; }
    .kbs-card { width: 145px; height: 195px; border-radius: 10px; }
    .kbs-header { padding: 0 12px; margin-bottom: 16px; }
    .kbs-header-right { gap: 6px; }
    .kbs-nav-btn { width: 30px; height: 30px; font-size: 0.75rem; border-radius: 6px; }
    .kbs-see-all { font-size: 0.75rem; padding: 6px 10px; }
    .kbs-card-name { font-size: 0.78rem; }
    .kbs-card-tag { font-size: 0.6rem; }
}