/* V6 / original supplied marketplace UI foundations; UI elements reused, not backend code. */

        :root {
            /* Itemsatis Dark Theme Colors */
            --bg-primary: #0f0f1a;
            --bg-secondary: #1a1a2e;
            --bg-tertiary: #252540;
            --bg-card: #1e1e32;
            --bg-hover: #2a2a45;
            --bg-input: #151525;
            
            --text-primary: #ffffff;
            --text-secondary: #a0a0b8;
            --text-muted: #6b6b8a;
            
            --accent-indigo: #6366f1;
            --accent-purple: #8b5cf6;
            --accent-pink: #ec4899;
            --accent-blue: #3b82f6;
            --accent-cyan: #06b6d4;
            --accent-green: #10b981;
            --accent-amber: #f59e0b;
            --accent-red: #ef4444;
            --accent-gold: #fbbf24;
            
            --border-color: #2a2a45;
            --border-hover: #3a3a5a;
            
            --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
            
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
            
            --radius-sm: 6px;
            --radius: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;
            
            --header-height: 70px;
            --top-bar-height: 36px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            font-size: 14px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        
        /* ===== LAYOUT SYSTEMS ===== */
        .main-layout {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px 20px;
            display: grid;
            grid-template-columns: 240px 1fr 280px;
            gap: 24px;
            align-items: start;
        }
        
        .content-layout {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px 20px;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 24px;
            align-items: start;
        }
        
        @media (max-width: 1200px) {
            .main-layout {
                grid-template-columns: 200px 1fr;
            }
            .right-sidebar {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .main-layout, .content-layout {
                grid-template-columns: 1fr;
                padding: 16px;
            }
            .left-sidebar, .right-sidebar {
                display: none;
            }
        }
        
        /* ===== SIDEBARS ===== */
        .left-sidebar, .right-sidebar {
            position: sticky;
            top: calc(var(--header-height) + 20px);
        }
        
        .sidebar-section, .widget {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .sidebar-header, .widget-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-primary);
        }
        
        .sidebar-header i, .widget-header i {
            color: var(--accent-indigo);
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 8px;
        }
        
        .sidebar-menu li {
            margin-bottom: 4px;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: var(--radius);
            transition: all 0.2s;
            font-size: 13px;
        }
        
        .sidebar-menu a:hover, .sidebar-menu a.active {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        .sidebar-menu a i {
            width: 20px;
            text-align: center;
        }
        
        /* ===== CARDS ===== */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .card-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            color: var(--accent-indigo);
        }
        
        .card-body {
            padding: 24px;
        }
        
        /* ===== FORMS ===== */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            color: var(--text-secondary);
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .form-input, .form-select {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-input);
            border: 2px solid var(--border-color);
            border-radius: var(--radius);
            color: var(--text-primary);
            font-size: 14px;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--accent-indigo);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }
        
        .form-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b8a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px;
        }
        
        /* ===== BUTTONS ===== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
        }
        
        .btn-primary {
            background: var(--gradient-primary);
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
        }
        
        .btn-secondary {
            background: var(--bg-hover);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: var(--border-hover);
            border-color: var(--accent-indigo);
        }
        
        .btn-red {
            background: rgba(239, 68, 68, 0.1);
            color: var(--accent-red);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        .btn-red:hover {
            background: rgba(239, 68, 68, 0.2);
        }
        
        .btn-full {
            width: 100%;
        }
        
        .btn-lg {
            padding: 16px 32px;
            font-size: 15px;
        }
        
        .btn-outline {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--border-color);
        }
        
        .btn-outline:hover {
            border-color: var(--accent-indigo);
            background: rgba(99, 102, 241, 0.1);
        }
        
        /* ===== ALERTS ===== */
        .alert {
            padding: 16px 20px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .alert-success {
            background: rgba(16, 185, 129, 0.1);
            color: var(--accent-green);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .alert-error {
            background: rgba(239, 68, 68, 0.1);
            color: var(--accent-red);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        /* ===== BADGES ===== */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: var(--radius);
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-success {
            background: rgba(16, 185, 129, 0.15);
            color: var(--accent-green);
        }
        
        .badge-warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--accent-amber);
        }
        
        .badge-danger {
            background: rgba(239, 68, 68, 0.15);
            color: var(--accent-red);
        }
        
        .badge-info {
            background: rgba(59, 130, 246, 0.15);
            color: var(--accent-blue);
        }
        
        /* ===== TABLES ===== */
        .table-container {
            overflow-x: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th, .data-table td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .data-table th {
            color: var(--text-muted);
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .data-table tr:hover {
            background: var(--bg-hover);
        }
        
        /* ===== PAGE HEADER ===== */
        .page-header {
            margin-bottom: 24px;
        }
        
        .page-title {
            font-size: 24px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .page-title i {
            color: var(--accent-indigo);
        }
        
        /* ===== PRODUCT GRID ===== */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        
        .product-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-4px);
            border-color: var(--accent-indigo);
            box-shadow: var(--shadow-lg);
        }
        
        .product-image {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-badges {
            position: absolute;
            top: 12px;
            left: 12px;
            display: flex;
            gap: 8px;
        }
        
        .product-badge {
            padding: 6px 12px;
            border-radius: var(--radius);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        .badge-yeni {
            background: var(--accent-green);
            color: white;
        }
        
        .product-fav {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            border: none;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .product-fav:hover {
            background: var(--accent-red);
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-category {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--accent-indigo);
            margin-bottom: 8px;
            text-transform: uppercase;
            font-weight: 600;
        }
        
        .product-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .product-seller {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .seller-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border-color);
        }
        
        .seller-name {
            font-size: 13px;
            color: var(--text-secondary);
            flex: 1;
        }
        
        .product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
        }
        
        .product-price {
            font-size: 20px;
            font-weight: 800;
            color: var(--accent-indigo);
        }
        
        .product-price span {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
        }
        
        .btn-buy {
            padding: 8px 20px;
            background: var(--bg-hover);
            color: var(--text-primary);
            border: none;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-buy:hover {
            background: var(--accent-indigo);
            color: white;
        }
        
        /* ===== CATEGORY TAGS ===== */
        .category-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-full);
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .category-tag:hover {
            background: var(--bg-hover);
            border-color: var(--accent-indigo);
            color: var(--text-primary);
        }
        
        .category-tag.active {
            background: var(--gradient-primary);
            border-color: transparent;
            color: white;
        }
        
        /* ===== STAT ROWS ===== */
        .stat-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .stat-row:last-child {
            border-bottom: none;
        }
        
        .stat-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .stat-value {
            font-size: 15px;
            font-weight: 700;
        }
        
        /* ===== PAGINATION ===== */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 40px;
        }
        
        /* ===== GRID UTILITIES ===== */
        .grid {
            display: grid;
            gap: 20px;
        }
        
        .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 768px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
        }
        
        /* ===== TOP BAR ===== */
        .top-bar {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            height: var(--top-bar-height);
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1001;
        }
        
        .top-bar-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .top-bar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .social-links {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .social-link {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius);
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s;
            font-size: 13px;
        }
        
        .social-link:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        
        .top-bar-text {
            color: var(--text-secondary);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .top-bar-text i {
            color: var(--accent-indigo);
        }
        
        .top-bar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .top-bar-menu {
            display: flex;
            align-items: center;
            gap: 16px;
            list-style: none;
        }

        .quick-view-btn:hover {
            transform: scale(1.1);
            background: var(--accent-indigo) !important;
        }
        
        .top-bar-menu a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .top-bar-menu a:hover {
            color: var(--text-primary);
        }
        
        .top-bar-menu a i {
            font-size: 10px;
        }
        
        /* ===== MAIN HEADER ===== */
        .main-header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            height: var(--header-height);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        
        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            flex-shrink: 0;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            box-shadow: var(--shadow-glow);
        }
        
        .logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .logo-text h1 {
            font-size: 20px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-indigo) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
            position: relative;
            display: inline-block;
        }

        .logo-text h1::before,
        .logo-text h1::after {
            content: 'METİN2 MARKET';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-indigo) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-text h1::before {
            animation: glitch-1 2s infinite linear alternate-reverse;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
            transform: translate(-2px, -2px);
            opacity: 0.8;
        }

        .logo-text h1::after {
            animation: glitch-2 3s infinite linear alternate-reverse;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
            transform: translate(2px, 2px);
            opacity: 0.8;
        }

        @keyframes glitch-1 {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
        }

        @keyframes glitch-2 {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(2px, -2px); }
            40% { transform: translate(2px, 2px); }
            60% { transform: translate(-2px, -2px); }
            80% { transform: translate(-2px, 2px); }
        }
        
        .logo-text span {
            font-size: 10px;
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Search Box */
        .header-search {
            flex: 1;
            max-width: 500px;
            position: relative;
        }
        
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .search-box input {
            width: 100%;
            padding: 12px 16px 12px 44px;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-full);
            background: var(--bg-input);
            color: var(--text-primary);
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .search-box input:focus {
            outline: none;
            border-color: var(--accent-indigo);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }
        
        .search-box input::placeholder {
            color: var(--text-muted);
        }
        
        .search-icon {
            position: absolute;
            left: 16px;
            color: var(--text-muted);
            font-size: 16px;
        }
        
        /* Header Actions */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .lang-selector {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            
            .nav-container {
                overflow-x: auto;
                scrollbar-width: none;
            }
            
            .nav-container::-webkit-scrollbar {
                display: none;
            }
        }
    

    /* ===== PARTICLE.JS ARKA PLAN ===== */
    #particles-js {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        pointer-events: none;
    }
    
    /* ===== SKELETON LOADING ===== */
    .skeleton {
        background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: var(--radius);
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    .skeleton-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .skeleton-image {
        width: 100%;
        aspect-ratio: 4/3;
    }
    
    .skeleton-text {
        height: 16px;
        margin: 12px;
    }
    
    .skeleton-text.short {
        width: 60%;
    }
    
    .skeleton-text.long {
        width: 90%;
    }
    
    /* ===== NEON GLOW BORDERS ===== */
    .neon-glow {
        position: relative;
        border: 2px solid transparent;
        background-clip: padding-box;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .neon-glow::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
        background-size: 400% 400%;
        border-radius: var(--radius-lg);
        z-index: -1;
        animation: neon-glow 3s ease infinite;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .neon-glow:hover::before {
        opacity: 1;
    }
    
    @keyframes neon-glow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    .neon-glow-vitrin {
        border: 2px solid var(--accent-indigo);
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), inset 0 0 20px rgba(99, 102, 241, 0.1);
        animation: neon-pulse 2s ease-in-out infinite;
    }
    
    @keyframes neon-pulse {
        0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), inset 0 0 20px rgba(99, 102, 241, 0.1); }
        50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), inset 0 0 30px rgba(99, 102, 241, 0.2); }
    }
    
    /* ===== LIVE ACTIVITY FEED ===== */
    .live-activity {
        position: fixed;
        right: 24px;
        top: 200px;
        width: 280px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        z-index: 996;
        overflow: hidden;
    }
    
    .live-activity-header {
        padding: 16px 20px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .live-activity-header i {
        color: var(--accent-indigo);
        animation: live-pulse 1.5s ease-in-out infinite;
    }
    
    @keyframes live-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.2); }
    }
    
    .live-activity-header h4 {
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .live-badge {
        padding: 2px 8px;
        background: var(--accent-red);
        color: white;
        font-size: 10px;
        font-weight: 700;
        border-radius: var(--radius-full);
        animation: live-blink 1s ease-in-out infinite;
    }
    
    @keyframes live-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }
    
    .live-activity-list {
        max-height: 300px;
        overflow-y: auto;
        padding: 12px;
    }
    
    .activity-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        margin-bottom: 8px;
        transition: all 0.3s;
        border-left: 3px solid transparent;
        animation: slideInRight 0.5s ease;
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .activity-item:hover {
        background: var(--bg-hover);
        border-left-color: var(--accent-indigo);
        transform: translateX(4px);
    }
    
    .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }
    
    .activity-icon.satis { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); }
    .activity-icon.ilan { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
    .activity-icon.yorum { background: rgba(245, 158, 11, 0.2); color: var(--accent-amber); }
    
    .activity-content {
        flex: 1;
        min-width: 0;
    }
    
    .activity-text {
        font-size: 12px;
        color: var(--text-primary);
        line-height: 1.4;
        margin-bottom: 2px;
    }
    
    .activity-text strong {
        color: var(--accent-indigo);
    }
    
    .activity-time {
        font-size: 11px;
        color: var(--text-muted);
    }
    
    .activity-price {
        font-size: 12px;
        font-weight: 700;
        color: var(--accent-green);
    }
    
    /* ===== LIVE STATS TICKER ===== */
    .stats-ticker {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        padding: 12px 0;
        z-index: 995;
        overflow: hidden;
    }
    
    .stats-ticker-content {
        display: flex;
        animation: ticker-scroll 30s linear infinite;
        white-space: nowrap;
    }
    
    @keyframes ticker-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    .stats-ticker:hover .stats-ticker-content {
        animation-play-state: paused;
    }
    
    .ticker-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 30px;
        border-right: 1px solid var(--border-color);
    }
    
    .ticker-item i {
        color: var(--accent-indigo);
        font-size: 14px;
    }
    
    .ticker-label {
        font-size: 12px;
        color: var(--text-muted);
    }
    
    .ticker-value {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
    }
    
    .ticker-value.up {
        color: var(--accent-green);
    }
    
    .ticker-value.down {
        color: var(--accent-red);
    }
    
    /* ===== SCROLL PROGRESS BAR ===== */
    .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--accent-indigo), var(--accent-purple), var(--accent-pink));
        z-index: 9999;
        width: 0%;
        transition: width 0.1s;
    }
    
    /* ===== HERO SECTION ===== */
    .hero-section {
        margin-bottom: 32px;
        position: relative;
    }
    
    .hero-slider {
        position: relative;
        border-radius: var(--radius-xl);
        overflow: hidden;
        height: 380px;
        background: var(--bg-secondary);
    }
    
    .hero-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: 48px;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
    
    .hero-slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('https://images.alphacoders.com/132/1322438.jpg') center/cover;
        opacity: 0.4;
    }
    
    .hero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(15, 15, 26, 0.95) 0%, rgba(15, 15, 26, 0.7) 50%, transparent 100%);
    }
    
    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 500px;
    }
    
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: rgba(99, 102, 241, 0.2);
        border: 1px solid var(--accent-indigo);
        border-radius: var(--radius-full);
        color: var(--accent-indigo);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    
    .hero-title {
        font-size: 48px;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 16px;
        text-transform: uppercase;
    }
    
    .hero-title span {
        background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-pink) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .hero-desc {
        color: var(--text-secondary);
        font-size: 16px;
        margin-bottom: 28px;
        line-height: 1.6;
    }
    
    .hero-buttons {
        display: flex;
        gap: 12px;
    }
    
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-lg {
        padding: 16px 32px;
        font-size: 15px;
    }
    
    .btn-primary {
        background: var(--gradient-primary);
        color: white;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    }
    
    .btn-outline {
        background: transparent;
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }
    
    .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    /* Hero Cards (Right Side) */
    .hero-cards {
        position: absolute;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 16px;
        z-index: 2;
    }
    
    .hero-card {
        width: 200px;
        height: 100px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transition: all 0.3s;
        border: 2px solid transparent;
    }
    
    .hero-card:hover {
        transform: translateX(-8px);
        border-color: var(--accent-indigo);
    }
    
    .hero-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .hero-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 12px;
    }
    
    .hero-card-title {
        font-weight: 700;
        font-size: 14px;
        color: white;
    }
    
    .hero-card-subtitle {
        font-size: 11px;
        color: var(--text-muted);
    }
    
    /* ===== GAME CATEGORIES ===== */
    .game-categories {
        margin-bottom: 32px;
    }
    
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .section-title i {
        color: var(--accent-indigo);
    }
    
    .view-all {
        color: var(--accent-indigo);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: gap 0.2s;
    }
    
    .view-all:hover {
        gap: 10px;
    }
    
    .game-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 16px;
    }
    
    .game-card {
        position: relative;
        aspect-ratio: 1;
        border-radius: var(--radius-xl);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s;
        border: 2px solid transparent;
        background: var(--bg-card);
    }
    
    .game-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-indigo);
        box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
    }
    
    .game-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .game-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 16px;
    }
    
    .game-card-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 20px;
    }
    
    .game-card-title {
        font-weight: 700;
        font-size: 14px;
        color: white;
    }
    
    .game-card-count {
        font-size: 12px;
        color: var(--text-muted);
    }
    
    /* ===== SUB CATEGORIES ===== */
    .sub-categories {
        margin-bottom: 32px;
    }
    
    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .tag:hover {
        background: var(--bg-hover);
        border-color: var(--accent-indigo);
        color: var(--text-primary);
    }
    
    .tag.active {
        background: var(--gradient-primary);
        border-color: transparent;
        color: white;
    }
    
    .tag img {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        object-fit: cover;
    }
    
    .tag i {
        font-size: 14px;
    }
    
    /* ===== VITRIN BANNER ===== */
    .vitrin-banner {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: var(--radius-xl);
        padding: 20px 24px;
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .vitrin-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: white;
        flex-shrink: 0;
    }
    
    .vitrin-content {
        flex: 1;
    }
    
    .vitrin-content h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 4px;
    }
    
    .vitrin-content p {
        font-size: 13px;
        color: var(--text-secondary);
    }
    
    .vitrin-btn {
        padding: 12px 24px;
        background: rgba(59, 130, 246, 0.2);
        border: 1px solid rgba(59, 130, 246, 0.4);
        border-radius: var(--radius);
        color: #3b82f6;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
    }
    
    .vitrin-btn:hover {
        background: rgba(59, 130, 246, 0.3);
    }
    
    /* ===== PRODUCT GRID (6 COLUMNS) ===== */
    .product-section {
        margin-bottom: 48px;
    }
    
    .product-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    
    @media (max-width: 1400px) {
        .product-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    @media (max-width: 1024px) {
        .product-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .live-activity {
            display: none;
        }
    }
    
    @media (max-width: 768px) {
        .product-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .stats-ticker {
            display: none;
        }
    }
    
    .product-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: all 0.3s;
        position: relative;
    }
    
    .product-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-indigo);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    
    .product-badge-vitrin {
        position: absolute;
        top: 12px;
        left: 12px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 6px 12px;
        border-radius: var(--radius);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .product-image {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
    }
    
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
    }
    
    .product-card:hover .product-image img {
        transform: scale(1.05);
    }
    
    .product-fav {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        z-index: 2;
    }
    
    .product-fav:hover {
        background: var(--accent-red);
    }
    
    .product-info {
        padding: 16px;
    }
    
    .product-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 40px;
    }
    
    .product-seller {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .seller-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--border-color);
    }
    
    .seller-name {
        font-size: 12px;
        color: var(--text-secondary);
        flex: 1;
    }
    
    .seller-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: var(--accent-amber);
        font-weight: 600;
    }
    
    .product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
    }
    
    .product-price {
        font-size: 18px;
        font-weight: 800;
        color: var(--accent-indigo);
    }
    
    .product-price span {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 500;
    }
    
    .btn-buy {
        padding: 8px 16px;
        background: var(--bg-hover);
        color: var(--text-primary);
        border: none;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-buy:hover {
        background: var(--accent-indigo);
        color: white;
    }
    
    /* ===== PLATFORM SECTION ===== */
    .platform-section {
        margin-bottom: 32px;
    }
    
    .platform-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    
    .platform-grid::-webkit-scrollbar {
        display: none;
    }
    
    .platform-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        transition: all 0.2s;
    }
    
    .platform-item:hover {
        background: var(--bg-hover);
        border-color: var(--accent-indigo);
        color: var(--text-primary);
    }
    
    .platform-item i {
        font-size: 18px;
    }
    
    /* ===== HERO SLIDER NAVIGATION ===== */
    .hero-nav {
        position: absolute;
        bottom: 24px;
        left: 48px;
        display: flex;
        gap: 8px;
        z-index: 3;
    }
    
    .hero-dot {
        width: 32px;
        height: 4px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .hero-dot.active {
        background: var(--accent-indigo);
        width: 48px;
    }
    
    /* ===== FLOATING SIDEBAR ===== */
    .floating-sidebar {
        position: fixed;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 998;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .floating-btn {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-full);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: var(--shadow-lg);
        position: relative;
    }
    
    .floating-btn:hover {
        background: var(--accent-indigo);
        color: white;
        border-color: var(--accent-indigo);
        transform: scale(1.1);
    }
    
    .floating-btn .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 20px;
        height: 20px;
        background: var(--accent-red);
        color: white;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        border: 2px solid var(--bg-primary);
    }
    
    .floating-btn.active {
        background: var(--accent-indigo);
        color: white;
        border-color: var(--accent-indigo);
    }
    
    /* Panel */
    .floating-panel {
        position: fixed;
        right: 90px;
        top: 50%;
        transform: translateY(-50%) translateX(20px);
        width: 360px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        z-index: 997;
        max-height: 80vh;
        overflow: hidden;
    }
    
    .floating-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
    
    .floating-panel-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-secondary);
    }
    
    .floating-panel-header h3 {
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .floating-panel-header h3 i {
        color: var(--accent-indigo);
    }
    
    .floating-panel-close {
        width: 32px;
        height: 32px;
        border-radius: var(--radius);
        background: var(--bg-hover);
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    
    .floating-panel-close:hover {
        background: var(--accent-red);
        color: white;
    }
    
    .floating-panel-content {
        padding: 20px;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* Quick Menu Items */
    .quick-menu-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        margin-bottom: 12px;
        text-decoration: none;
        color: var(--text-primary);
        transition: all 0.2s;
        border: 1px solid transparent;
    }
    
    .quick-menu-item:hover {
        background: var(--bg-hover);
        border-color: var(--border-color);
    }
    
    .quick-menu-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }
    
    .quick-menu-icon.purple { background: rgba(99, 102, 241, 0.15); color: var(--accent-indigo); }
    .quick-menu-icon.green { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
    .quick-menu-icon.amber { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
    .quick-menu-icon.blue { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
    .quick-menu-icon.pink { background: rgba(236, 72, 153, 0.15); color: var(--accent-pink); }
    
    .quick-menu-info {
        flex: 1;
    }
    
    .quick-menu-info h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    
    .quick-menu-info p {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    .quick-menu-arrow {
        color: var(--text-muted);
    }
    
    /* Stats Widget */
    .stats-widget {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }
    
    .stat-box {
        padding: 16px;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        text-align: center;
    }
    
    .stat-box h4 {
        font-size: 24px;
        font-weight: 800;
        color: var(--accent-indigo);
        margin-bottom: 4px;
    }
    
    .stat-box p {
        font-size: 12px;
        color: var(--text-secondary);
    }


/* Metin2Sistem: layout faithful to the source while keeping new platform modules. */
:root{--ms-bg:#0f0f1a;--ms-panel:#1e1e32;--ms-panel2:#2a2a45;--ms-line:#30304d;--ms-muted:#a0a0b8;--ms-gold:#8b5cf6;--ms-cyan:#9293ff}
body{background:#0f0f1a;color:#f9f9ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}
.ms-wrap{max-width:1200px;width:min(100% - 40px,1200px);margin-inline:auto}.ms-top{display:none}
.main-header{min-height:65px}.main-header .header-container{max-width:1200px;width:min(100% - 40px,1200px);margin-inline:auto;min-height:64px;padding:5px 0;display:flex;align-items:center;gap:20px}
.main-header .logo{text-decoration:none;display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#fff}.main-header .logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px #6366f155}.main-header .logo-text h1{font-size:18px;line-height:1;letter-spacing:-.5px;margin:0;color:#fff;white-space:nowrap}.main-header .logo-text h1::before,.main-header .logo-text h1::after{display:none}.main-header .logo-text h1 span{color:#9389ff}.main-header .logo-text small{font-size:9px;color:#a0a0b8;letter-spacing:.3px}
.header-search{flex:1;max-width:410px;margin-left:8px}.header-search .search-box{border:1px solid var(--border-color);border-radius:23px;background:#191929;display:flex;align-items:center;gap:9px;padding:0 14px;height:38px}.search-box input{border:0;outline:0;background:transparent;color:#fff;min-width:0;width:100%;font-size:12px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.header-actions .nav-item{font-size:12px;color:#c7c7d7;text-decoration:none}.header-actions .btn-primary{padding:9px 14px;border-radius:7px;color:#fff}.header-actions .lang-selector{display:flex;align-items:center;gap:6px;border:1px solid var(--border-color);border-radius:9px;padding:8px;color:#c5c5d6;font-size:12px}.header-actions .header-icon-btn{color:#c5c5d6}
.main-nav{border-top:1px solid #2c2c42;border-bottom:1px solid #2c2c42;background:#171729}.main-nav .nav-container{max-width:1200px;width:min(100% - 40px,1200px);margin-inline:auto;display:flex;align-items:center;gap:0;flex-wrap:wrap}.main-nav .nav-item{display:inline-flex;align-items:center;gap:7px;color:#b8b8cc;font-size:12px;font-weight:650;padding:13px 15px;text-decoration:none;white-space:nowrap}.main-nav .nav-item:hover,.main-nav .nav-item.active{color:#fff;background:#242440}.main-nav .nav-item i{font-size:12px}.ms-header-mobile{display:none}
#icerik{min-height:50vh}#icerik>.ms-wrap{width:min(100% - 40px,1200px)}
#icerik .market-home{padding-top:20px}.market-home .hero-slider{height:315px;border-radius:16px}.market-home .hero-slide{padding:38px 40px}.market-home .hero-slide::before{background:radial-gradient(circle at 88% 40%,#30365f 0%,transparent 45%),linear-gradient(105deg,#121525,#191c3c 55%,#263161);opacity:1}.market-home .hero-slide::after{background:linear-gradient(90deg,#101222eb 0%,#101222b3 42%,transparent 95%)}
.market-home .hero-content{max-width:590px}.market-home .hero-title{font-size:clamp(29px,4vw,47px)}.market-home .hero-desc{max-width:555px}.market-home .hero-cards{right:38px;gap:11px}.market-home .hero-card{width:170px;height:77px;border-radius:10px;background:linear-gradient(110deg,#2a2e56,#383568);display:flex;align-items:end}.market-home .hero-card:nth-child(2){background:linear-gradient(110deg,#25264e,#503245)}.market-home .hero-card:nth-child(3){background:linear-gradient(110deg,#2a2d55,#354957)}.market-home .hero-card .card-art{position:absolute;right:9px;top:3px;font-size:43px;opacity:.48;color:#b1a3ff}.market-home .hero-card-overlay{z-index:1}.market-home .hero-card-title{font-size:12px}.market-home .hero-card-subtitle{font-size:10px}.market-home .hero-badge{color:#a19aff}
.market-home .platform-section{margin:18px 0 30px}.market-home .platform-grid{display:flex;gap:7px;overflow-x:auto;padding:3px 0 10px}.market-home .platform-item{flex:0 0 auto;padding:11px 16px;border-radius:999px;font-size:11px}
.market-home .game-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px}.market-home .game-card{height:98px;display:flex;flex-direction:column;justify-content:end;border-width:1px;border-style:solid;min-width:0}.market-home .game-card::before{content:'M2';position:absolute;inset:5px 0 13px;display:grid;place-items:center;font-weight:900;font-size:36px;color:#d8ceff;opacity:.25;transform:rotate(-15deg)}.market-home .game-card-overlay{inset:0;background:linear-gradient(0deg,#080814f7 0%,transparent 90%)}.market-home .game-card-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;font-size:16px}.market-home .game-card-title{font-size:12px}.market-home .game-card-count{font-size:10px}.market-home .game-categories{margin-bottom:20px}
.market-home .tag-list{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 26px}.market-home .tag{font-size:11px;padding:8px 13px}.market-home .section-title{font-size:17px;margin:0}.market-home .section-header{margin:10px 0 18px}.market-home .market-feature{padding:23px;border:1px solid #353967;border-radius:14px;background:linear-gradient(110deg,#151e3c,#181b3d);display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0}.market-home .market-feature h3{font-size:15px;margin:0 0 7px}.market-home .market-feature p{font-size:12px;margin:0;color:#a5a5c0}
.ms-hero{padding-top:60px}.ms-card{background:#1b1b2f;border-color:#323250}.ms-card:hover{border-color:#6366f1}.ms-cta{border-color:#7d71fb;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.ms-cta:hover{color:#fff}.ms-ghost{background:#191929;border-color:#343455;color:#f2f2fb}.ms-form-card,.ms-article{background:#191929;border-color:#353553}.ms-field input,.ms-field textarea,.ms-field select{background:#131323;border-color:#3d3d60}.ms-tag,.ms-filter .active{background:#30305a;color:#b6a8ff}.ms-price,.ms-mini-link,.ms-eyebrow,h1 em,h2 em{color:#a39bff}.ms-visual{background:#19192f}.ms-footer{border-color:#2b2b45;margin-top:45px}.ms-logo-mark{background:linear-gradient(140deg,#6366f1,#8b5cf6)!important;color:#fff}.ms-logo b{color:#ac99ff}.ms-page-title{padding:38px 0 25px}.ms-article h2{margin-top:21px}.ms-alert{color:#e5f1ec}.ms-alert-error{color:#ffe1e1}.ms-footer-flex{align-items:start}
body.ms-navigating #icerik{opacity:.6;transition:opacity .12s ease}.ms-route-progress{position:fixed;top:0;left:0;z-index:99998;height:3px;width:0;background:linear-gradient(90deg,#6366f1,#ec4899);transition:width .18s ease;pointer-events:none}
.ms-toast-stack{position:fixed;bottom:20px;right:20px;width:min(390px,calc(100vw - 40px));z-index:100000;display:grid;gap:9px;pointer-events:none}.ms-toast{pointer-events:auto;border:1px solid #474771;border-radius:12px;box-shadow:0 15px 55px #0009;color:#fff;background:#23233c;padding:15px 18px;display:flex;gap:12px;align-items:start;animation:ms-toast-in .18s ease}.ms-toast.error{border-color:#b85567;background:#43242f}.ms-toast.success{border-color:#497d69;background:#233d36}.ms-toast button{margin-left:auto;background:transparent;color:#fff;border:0;cursor:pointer;font-size:18px}
@keyframes ms-toast-in{from{transform:translateX(14px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(max-width:1050px){.market-home .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.market-home .hero-cards{right:18px}.market-home .hero-content{max-width:70%}}
@media(max-width:760px){.ms-header-mobile{display:inline-grid;place-items:center;background:#24243c;color:#fff;border:1px solid #3b3b5c;border-radius:8px;width:38px;height:38px}.header-search{max-width:none;order:3;flex:1 1 100%;margin-left:0}.main-header .header-container{flex-wrap:wrap;gap:9px;padding:11px 0}.header-actions{margin-left:auto}.main-nav .nav-container{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.main-nav .nav-container::-webkit-scrollbar{display:none}.main-nav .nav-item{padding:13px 12px}.market-home .hero-slider{height:330px}.market-home .hero-slide{padding:24px}.market-home .hero-content{max-width:100%}.market-home .hero-cards{display:none}.market-home .hero-desc{max-width:100%}.market-home .hero-title{font-size:37px}.market-home .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.market-home .market-feature{flex-wrap:wrap}.ms-footer nav a{margin-left:0}}
@media(max-width:420px){.market-home .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main-header .logo-text h1{font-size:16px}.header-actions .lang-selector{display:none}.market-home .hero-title{font-size:30px}.market-home .hero-slider{height:330px}.market-home .hero-slide{padding:20px}.market-home .hero-buttons{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.ms-toast,.market-home .neon-glow{animation:none!important}html{scroll-behavior:auto!important}}

/* Inline layout bridge for original hero tiles */
.market-home .hero-card{flex-direction:column;justify-content:end;padding:11px;isolation:isolate}.market-home .hero-card-overlay{z-index:-1}.market-home .hero-card-title,.market-home .hero-card-subtitle{z-index:2;position:relative;line-height:1.2}.market-home .hero-card-title{margin-top:auto}.market-home .game-card::before{z-index:0}.market-home .game-card-overlay{z-index:1}.ms-visually-hidden{position:absolute!important;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.market-home .hero-slider{isolation:isolate}.market-home .game-card{aspect-ratio:auto}.market-home .platform-item{text-decoration:none}

.main-header .logo-text strong{display:block;font-size:18px;line-height:1;letter-spacing:-.5px;white-space:nowrap;color:#fff;font-weight:900}.main-header .logo-text strong span{color:#a092ff}@media(max-width:420px){.main-header .logo-text strong{font-size:16px}}

/* Source-site constellation motif as static CSS; avoids a costly animation library. */
.market-home{position:relative;isolation:isolate}.market-home::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle at 8% 16%,#7168e6 0 1px,transparent 2px),radial-gradient(circle at 84% 8%,#6a61e0 0 1.5px,transparent 2.5px),radial-gradient(circle at 32% 48%,#7168e6 0 1px,transparent 2px),radial-gradient(circle at 62% 65%,#6a61e0 0 1.5px,transparent 3px),radial-gradient(circle at 15% 91%,#665aca 0 1px,transparent 2px);background-size:530px 360px,420px 470px,760px 330px,650px 410px,340px 260px}.market-home>*{position:relative}