:root {
            /* Color System */
            --primary-50: #eef2ff;
            --primary-100: #e0e7ff;
            --primary-200: #c7d2fe;
            --primary-300: #a5b4fc;
            --primary-400: #818cf8;
            --primary-500: #6366f1;
            --primary-600: #4f46e5;
            --primary-700: #4338ca;
            --primary-800: #3730a3;
            --primary-900: #312e81;

            --secondary-50: #fdf2f8;
            --secondary-100: #fce7f3;
            --secondary-200: #fbcfe8;
            --secondary-300: #f9a8d4;
            --secondary-400: #f472b6;
            --secondary-500: #ec4899;
            --secondary-600: #db2777;
            --secondary-700: #be185d;
            --secondary-800: #9d174d;
            --secondary-900: #831843;

            --neutral-50: #f8fafc;
            --neutral-100: #f1f5f9;
            --neutral-200: #e2e8f0;
            --neutral-300: #cbd5e1;
            --neutral-400: #94a3b8;
            --neutral-500: #64748b;
            --neutral-600: #475569;
            --neutral-700: #334155;
            --neutral-800: #1e293b;
            --neutral-900: #0f172a;

            /* Gradients */
            --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            --gradient-secondary: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
            --gradient-rainbow: linear-gradient(135deg, #3b82f6 0%, #6366f1 25%, #a855f7 50%, #ec4899 75%, #f43f5e 100%);

            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--neutral-50);
            color: var(--neutral-800);
            overflow-x: hidden;
            position: relative;
            min-height: 100vh;
            line-height: 1.6;
            font-weight: 400;
        }

        /* Remove blur and sharpen text */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        img,
        svg,
        video {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        /* Animated Background */
        .animated-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
            opacity: 0.5;
            pointer-events: none;
            background:
                radial-gradient(circle at 20% 80%, rgba(79, 70, 229, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(219, 39, 119, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
            animation: backgroundFloat 20s ease-in-out infinite;
        }

        @keyframes backgroundFloat {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.1) rotate(1deg);
            }

            50% {
                transform: scale(1.05) rotate(-1deg);
            }

            75% {
                transform: scale(1.15) rotate(1deg);
            }
        }

        /* Particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -5;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            animation: particleFloat 15s infinite ease-in-out;
        }

        @keyframes particleFloat {

            0%,
            100% {
                transform: translate(0, 0) scale(1) rotate(0deg);
            }

            25% {
                transform: translate(20px, -30px) scale(1.2) rotate(90deg);
            }

            50% {
                transform: translate(-10px, 20px) scale(0.8) rotate(180deg);
            }

            75% {
                transform: translate(30px, 10px) scale(1.1) rotate(270deg);
            }
        }

        /* ============================================
   NAVBAR - TAM DÜZELTİLMİŞ
   ============================================ */

        .navbar-custom {
            position: fixed;
            top: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 0.5rem 1.25rem;
            z-index: 1050;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            min-width: 900px;
            max-width: 95vw;
        }

        .navbar-custom.scrolled {
            top: 0.75rem;
            background: rgba(255, 255, 255, 0.95);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.15),
                0 8px 25px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transform: translateX(-50%) scale(0.98);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .navbar-custom.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(-120%);
        }

        .navbar-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            width: 100%;
        }

        /* ============================================
   LOGO
   ============================================ */

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .brand-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .brand-icon {
            width: 38px;
            height: 38px;
            background: var(--gradient-primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 800;
            font-size: 1rem;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
        }

        .brand-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.8s ease;
        }

        .brand-text {
            font-size: 1.2rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .navbar-brand:hover .brand-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 8px 30px rgba(79, 70, 229, 0.5);
        }

        .navbar-brand:hover .brand-icon::before {
            left: 100%;
        }

        /* ============================================
   NAV LINKS
   ============================================ */

        .navbar-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            list-style: none;
            margin: 0;
            padding: 0;
            background: rgba(248, 250, 252, 0.6);
            border-radius: 30px;
            padding: 0.3rem;
            border: 1px solid rgba(226, 232, 240, 0.4);
            backdrop-filter: blur(10px);
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.8rem;
            text-decoration: none;
            color: var(--neutral-600);
            font-weight: 500;
            font-size: 0.8rem;
            border-radius: 25px;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 25px;
            opacity: 0;
            transform: scale(0.7) rotate(5deg);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: -1;
        }

        .nav-link:hover::before,
        .nav-link.active::before {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .nav-link:hover,
        .nav-link.active {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
        }

        .nav-icon {
            font-size: 0.9rem;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.15) rotate(10deg);
        }

        /* ============================================
   SAĞ BÖLÜM - DİKEY STACK
   ============================================ */

        .navbar-actions-stack {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: flex-end;
        }

        /* ============================================
   KOMPAKT ARAMA + ARA BUTONU
   ============================================ */

        .navbar-search-compact {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: white;
            border: 1.5px solid var(--neutral-300);
            border-radius: 15px;
            padding: 0.45rem 0.75rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            min-width: 320px;
        }

        .navbar-search-compact:focus-within {
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1), 0 4px 12px rgba(79, 70, 229, 0.15);
            transform: translateY(-1px);
        }

        .search-icon-compact {
            color: var(--neutral-400);
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .navbar-search-compact:focus-within .search-icon-compact {
            color: var(--primary-500);
            animation: searchPulse 0.6s ease;
        }

        @keyframes searchPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }
        }

        .search-input-compact {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 0.85rem;
            color: var(--neutral-700);
            font-weight: 500;
        }

        .search-input-compact::placeholder {
            color: var(--neutral-400);
        }

        .search-kbd {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--neutral-100);
            border: 1px solid var(--neutral-300);
            border-radius: 6px;
            padding: 0.2rem 0.5rem;
            font-size: 0.7rem;
            font-family: 'Courier New', monospace;
            color: var(--neutral-600);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* ARA BUTONU */
        .search-btn-compact {
            background: var(--gradient-primary);
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
        }

        .search-btn-compact:hover {
            transform: scale(1.1) translateX(3px);
            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.5);
        }

        .search-btn-compact i {
            font-size: 0.85rem;
        }

        /* ============================================
   BUTON SATIRI
   ============================================ */

        .navbar-buttons-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* SHOP BUTONU */
        .navbar-shop-btn {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            text-decoration: none;
            padding: 0.5rem 1.25rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(245, 87, 108, 0.3);
            border: none;
        }

        .navbar-shop-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }

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

        .navbar-shop-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(245, 87, 108, 0.5);
            color: white;
            text-decoration: none;
        }

        .navbar-shop-btn i {
            font-size: 1rem;
            animation: shopIconBounce 2s ease-in-out infinite;
        }

        @keyframes shopIconBounce {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-3px) rotate(-5deg);
            }

            75% {
                transform: translateY(-2px) rotate(5deg);
            }
        }

        .shop-badge {
            background: rgba(255, 255, 255, 0.3);
            padding: 0.15rem 0.5rem;
            border-radius: 12px;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            animation: badgePulse 2s ease-in-out infinite;
        }

        @keyframes badgePulse {

            0%,
            100% {
                transform: scale(1);
                background: rgba(255, 255, 255, 0.3);
            }

            50% {
                transform: scale(1.1);
                background: rgba(255, 255, 255, 0.5);
            }
        }

        /* ============================================
   OYUNLAR BUTONU - GLİTCH EFEKTLİ
   ============================================ */
        .navbar-games-btn {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
            color: white;
            text-decoration: none;
            padding: 0.6rem 1.5rem;
            border-radius: 25px;
            font-weight: 800;
            font-size: 0.9rem;
            font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow:
                0 4px 20px rgba(249, 115, 22, 0.35),
                0 0 15px rgba(249, 115, 22, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.2);
            min-width: 280px;
            width: 100%;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .navbar-games-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.4),
                    transparent);
            animation: gamesShine 2s ease-in-out infinite;
        }

        @keyframes gamesShine {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        .navbar-games-btn i {
            font-size: 1rem;
            animation: gamepadShake 3s ease-in-out infinite;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        @keyframes gamepadShake {

            0%,
            100% {
                transform: rotate(0deg);
            }

            10% {
                transform: rotate(-10deg);
            }

            20% {
                transform: rotate(10deg);
            }

            30% {
                transform: rotate(-10deg);
            }

            40% {
                transform: rotate(10deg);
            }

            50%,
            100% {
                transform: rotate(0deg);
            }
        }

        /* Glitch Text Effect */
        .games-text {
            position: relative;
            display: inline-block;
            letter-spacing: 0.5px;
        }

        .games-text::before,
        .games-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .navbar-games-btn:hover .games-text::before {
            animation: glitchTop 0.3s linear infinite;
            clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
            color: #ff0000;
            opacity: 0.8;
        }

        .navbar-games-btn:hover .games-text::after {
            animation: glitchBottom 0.3s linear infinite;
            clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
            color: #00ffff;
            opacity: 0.8;
        }

        @keyframes glitchTop {
            0% {
                transform: translate(-2px, -2px);
            }

            25% {
                transform: translate(2px, 0);
            }

            50% {
                transform: translate(-1px, 2px);
            }

            75% {
                transform: translate(1px, -1px);
            }

            100% {
                transform: translate(-2px, -2px);
            }
        }

        @keyframes glitchBottom {
            0% {
                transform: translate(2px, 2px);
            }

            25% {
                transform: translate(-2px, 0);
            }

            50% {
                transform: translate(1px, -2px);
            }

            75% {
                transform: translate(-1px, 1px);
            }

            100% {
                transform: translate(2px, 2px);
            }
        }

        .games-badge {
            font-size: 1.1rem;
            animation: emojiPop 2s ease-in-out infinite;
        }

        @keyframes emojiPop {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.2) rotate(-10deg);
            }

            75% {
                transform: scale(1.1) rotate(10deg);
            }
        }

        .navbar-games-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow:
                0 8px 30px rgba(249, 115, 22, 0.5),
                0 0 25px rgba(249, 115, 22, 0.3),
                0 0 50px rgba(249, 115, 22, 0.15);
            text-decoration: none;
            color: white;
            border-color: rgba(255, 255, 255, 0.4);
        }

        /* ============================================
   PREMIUM AUTH (LOGIN/SIGNUP) BUTONU
   ============================================ */
        .navbar-auth-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.65rem 1.5rem;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
            border-radius: 30px;
            text-decoration: none;
            overflow: hidden;
            box-shadow:
                0 4px 20px rgba(99, 102, 241, 0.4),
                0 0 30px rgba(139, 92, 246, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.15);
            min-width: 240px;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .auth-btn-glow {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .navbar-auth-btn:hover .auth-btn-glow {
            opacity: 1;
        }

        .auth-btn-content {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .auth-btn-content i {
            font-size: 1.1rem;
            animation: authIconPulse 2s ease-in-out infinite;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        @keyframes authIconPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.15);
            }
        }

        .auth-text {
            letter-spacing: 0.5px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .auth-divider {
            opacity: 0.5;
            font-weight: 300;
        }

        .auth-btn-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.4),
                    transparent);
            animation: authShine 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes authShine {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        .navbar-auth-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow:
                0 10px 35px rgba(99, 102, 241, 0.5),
                0 0 40px rgba(139, 92, 246, 0.3),
                0 0 60px rgba(168, 85, 247, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
            text-decoration: none;
        }

        .navbar-auth-btn:hover .auth-btn-content i {
            animation: authIconBounce 0.5s ease;
        }

        @keyframes authIconBounce {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.2) rotate(-10deg);
            }

            50% {
                transform: scale(0.9) rotate(5deg);
            }

            75% {
                transform: scale(1.1) rotate(-5deg);
            }
        }

        .navbar-auth-btn:active {
            transform: translateY(-1px) scale(1.01);
        }

        /* İLETİŞİME GEÇ BUTONU */
        .navbar-cta {
            background: var(--gradient-primary);
            color: white;
            text-decoration: none;
            padding: 0.5rem 1.25rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
        }

        .navbar-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }

        .navbar-cta:hover::before {
            left: 100%;
        }

        .navbar-cta:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 35px rgba(79, 70, 229, 0.4);
            color: white;
            text-decoration: none;
        }

        /* ============================================
   RESPONSIVE
   ============================================ */

        @media (max-width: 1200px) {
            .navbar-custom {
                min-width: auto;
                width: calc(100% - 2rem);
            }

            .navbar-search-compact {
                min-width: 250px;
            }
        }

        @media (max-width: 992px) {
            .navbar-nav {
                gap: 0.3rem;
                padding: 0.25rem;
            }

            .nav-link {
                padding: 0.45rem 0.7rem;
                font-size: 0.75rem;
            }

            .navbar-search-compact {
                min-width: 220px;
            }
        }

        @media (max-width: 768px) {
            .navbar-custom {
                width: calc(100% - 1rem);
                padding: 0.4rem 0.8rem;
                top: 0.75rem;
                min-width: auto;
            }

            .brand-text {
                display: none;
            }

            .brand-icon {
                width: 34px;
                height: 34px;
                font-size: 0.9rem;
            }

            .navbar-nav {
                gap: 0.2rem;
                padding: 0.2rem;
            }

            .nav-link {
                padding: 0.4rem 0.6rem;
                font-size: 0.75rem;
            }

            .nav-text {
                display: none;
            }

            .navbar-actions-stack {
                gap: 0.4rem;
            }

            .navbar-search-compact {
                min-width: 180px;
                padding: 0.35rem 0.6rem;
            }

            .search-input-compact {
                font-size: 0.8rem;
            }

            .search-kbd {
                display: none;
            }

            .search-btn-compact {
                width: 28px;
                height: 28px;
            }

            .navbar-buttons-row {
                gap: 0.5rem;
            }

            .navbar-shop-btn,
            .navbar-cta {
                padding: 0.4rem 0.8rem;
                font-size: 0.75rem;
            }

            .navbar-shop-btn span:not(.shop-badge),
            .navbar-cta span {
                display: none;
            }

            .shop-badge {
                display: none;
            }
        }

        /* Navbar - THINNER & MORE ELEGANT with horizontal categories */
        .navbar-custom {
            position: fixed;
            top: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 0.5rem 1.25rem;
            /* Reduced padding */
            z-index: 1050;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            min-width: 600px;
        }

        .navbar-custom.scrolled {
            top: 0.75rem;
            /* Reduced top margin when scrolled */
            background: rgba(255, 255, 255, 0.95);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.15),
                0 8px 25px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transform: translateX(-50%) scale(0.98);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .navbar-custom.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(-120%);
        }

        .navbar-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            width: 100%;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .brand-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .brand-icon {
            width: 38px;
            /* Reduced size */
            height: 38px;
            /* Reduced size */
            background: var(--gradient-primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 800;
            font-size: 1rem;
            /* Smaller font */
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
        }

        .brand-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.8s ease;
        }

        .brand-text {
            font-size: 1.2rem;
            /* Smaller font */
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .navbar-brand:hover .brand-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 8px 30px rgba(79, 70, 229, 0.5);
        }

        .navbar-brand:hover .brand-icon::before {
            left: 100%;
        }

        /* Horizontal navbar - Adjusted for better spacing */
        .navbar-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            /* Increased gap for better spacing */
            list-style: none;
            margin: 0;
            padding: 0;
            background: rgba(248, 250, 252, 0.6);
            border-radius: 30px;
            padding: 0.3rem;
            /* Reduced padding */
            border: 1px solid rgba(226, 232, 240, 0.4);
            backdrop-filter: blur(10px);
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.8rem;
            /* Adjusted padding for better horizontal spacing */
            text-decoration: none;
            color: var(--neutral-600);
            font-weight: 500;
            font-size: 0.8rem;
            /* Smaller font */
            border-radius: 25px;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 25px;
            opacity: 0;
            transform: scale(0.7) rotate(5deg);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: -1;
        }

        .nav-link:hover::before,
        .nav-link.active::before {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .nav-link:hover,
        .nav-link.active {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
        }

        .nav-icon {
            font-size: 0.9rem;
            /* Smaller icon */
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.15) rotate(10deg);
        }

        .navbar-cta {
            background: var(--gradient-primary);
            color: white;
            text-decoration: none;
            padding: 0.5rem 1.25rem;
            /* Reduced padding */
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.8rem;
            /* Smaller font */
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
        }

        .navbar-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }

        .navbar-cta:hover::before {
            left: 100%;
        }

        .navbar-cta:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 35px rgba(79, 70, 229, 0.4);
            color: white;
            text-decoration: none;
        }

        /* Hero Section */
        .hero-section {
            padding: 8rem 0 4rem;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(79, 70, 229, 0.1);
            border: 1px solid rgba(79, 70, 229, 0.2);
            border-radius: 50px;
            padding: 0.6rem 1.2rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--primary-700);
            margin-bottom: 2rem;
            backdrop-filter: blur(10px);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--primary-500);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            background: var(--gradient-rainbow);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }

        .hero-title[data-text]::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            color: transparent;
            text-shadow: 2px 2px 10px rgba(79, 70, 229, 0.2);
        }

        .hero-subtitle {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--neutral-600);
            margin-bottom: 1rem;
        }

        .hero-description {
            font-size: 1.1rem;
            color: var(--neutral-500);
            line-height: 1.7;
            margin-bottom: 2.5rem;
            max-width: 600px;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primary-custom {
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 1rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: var(--shadow-lg);
        }

        .btn-primary-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

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

        .btn-primary-custom:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            color: white;
            text-decoration: none;
        }

        .btn-secondary-custom {
            background: transparent;
            color: var(--neutral-700);
            border: 2px solid var(--neutral-300);
            border-radius: 50px;
            padding: 1rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .btn-secondary-custom:hover {
            background: var(--neutral-100);
            border-color: var(--neutral-400);
            transform: translateY(-2px);
            color: var(--neutral-800);
            text-decoration: none;
        }

        /* Profile Container with Enhanced Animation */
        .profile-container {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 0 auto;
            transform-style: preserve-3d;
            perspective: 1000px;
            animation: profileFloat 6s ease-in-out infinite alternate;
        }

        @keyframes profileFloat {
            0% {
                transform: translateY(0px) rotateY(0deg) rotateX(0deg);
            }

            25% {
                transform: translateY(-10px) rotateY(3deg) rotateX(-2deg);
            }

            50% {
                transform: translateY(-5px) rotateY(-3deg) rotateX(2deg);
            }

            75% {
                transform: translateY(-15px) rotateY(2deg) rotateX(-1deg);
            }

            100% {
                transform: translateY(-10px) rotateY(-2deg) rotateX(3deg);
            }
        }

        .profile-glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--gradient-primary);
            filter: blur(40px);
            opacity: 0.4;
            z-index: -1;
            animation: glowPulse 6s ease-in-out infinite alternate;
        }

        @keyframes glowPulse {
            0% {
                transform: scale(0.8);
                opacity: 0.3;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.9);
                opacity: 0.4;
            }
        }

        .profile-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .profile-image-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--gradient-primary);
            z-index: -1;
            transform: translateZ(-20px);
            filter: blur(15px);
            opacity: 0.5;
            animation: rotateBg 10s linear infinite;
        }

        @keyframes rotateBg {
            from {
                transform: translateZ(-20px) rotate(0deg);
            }

            to {
                transform: translateZ(-20px) rotate(360deg);
            }
        }

        .profile-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            border: 5px solid rgba(255, 255, 255, 0.8);
            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.2),
                0 0 40px rgba(79, 70, 229, 0.3);
            animation: borderPulse 6s ease-in-out infinite alternate;
            transform-style: preserve-3d;
            transform: translateZ(10px);
        }

        @keyframes borderPulse {

            0%,
            100% {
                border-color: rgba(255, 255, 255, 0.8);
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 40px rgba(79, 70, 229, 0.3);
            }

            50% {
                border-color: rgba(255, 255, 255, 1);
                box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3), 0 0 60px rgba(79, 70, 229, 0.5);
            }
        }

        .profile-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            animation: imageZoom 10s ease-in-out infinite alternate;
        }

        @keyframes imageZoom {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        .profile-dots {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform-style: preserve-3d;
            transform: translateZ(30px);
        }

        .profile-dot {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 20px rgba(79, 70, 229, 0.7);
            animation: dotFloat 10s ease-in-out infinite;
        }

        .profile-dot:nth-child(1) {
            top: 20%;
            left: -10%;
            animation-delay: 0s;
            background: var(--primary-400);
        }

        .profile-dot:nth-child(2) {
            top: 10%;
            right: -5%;
            animation-delay: 2s;
            background: var(--primary-300);
        }

        .profile-dot:nth-child(3) {
            bottom: 15%;
            left: -5%;
            animation-delay: 4s;
            background: var(--secondary-400);
        }

        .profile-dot:nth-child(4) {
            bottom: 20%;
            right: -10%;
            animation-delay: 6s;
            background: var(--secondary-300);
        }

        @keyframes dotFloat {

            0%,
            100% {
                transform: translateY(0) translateX(0) scale(1);
            }

            25% {
                transform: translateY(20px) translateX(-15px) scale(1.1);
            }

            50% {
                transform: translateY(5px) translateX(15px) scale(0.9);
            }

            75% {
                transform: translateY(-20px) translateX(5px) scale(1.2);
            }
        }

        /* Tech Stack Floating Icons */
        .tech-stack {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: white;
            border-radius: 30px;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: var(--shadow-lg);
            z-index: 10;
            transform-style: preserve-3d;
            animation: techFloat 15s ease-in-out infinite;
            transform-origin: center center;
        }

        .tech-stack i {
            font-size: 1.2rem;
        }

        .tech-stack.react {
            top: 15%;
            left: -20%;
            color: #61DAFB;
            animation-delay: 0s;
        }

        .tech-stack.node {
            bottom: 20%;
            left: -15%;
            color: #68A063;
            animation-delay: 3s;
        }

        .tech-stack.figma {
            top: 15%;
            right: -25%;
            color: #F24E1E;
            animation-delay: 5s;
        }

        .tech-stack.python {
            bottom: 25%;
            right: -20%;
            color: #3776AB;
            animation-delay: 8s;
        }

        @keyframes techFloat {

            0%,
            100% {
                transform: translateZ(10px) rotate(0deg);
            }

            25% {
                transform: translate3d(10px, -15px, 30px) rotate(5deg);
            }

            50% {
                transform: translate3d(-5px, 10px, 50px) rotate(-3deg);
            }

            75% {
                transform: translate3d(-10px, -5px, 30px) rotate(2deg);
            }
        }

        /* Projects Section */
        .projects-section {
            padding: 6rem 0;
            position: relative;
            background: white;
        }

        .projects-container {
            position: relative;
            z-index: 2;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        /* Fix alignment of section badges */
        .section-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: rgba(79, 70, 229, 0.1);
            border: 1px solid rgba(79, 70, 229, 0.2);
            border-radius: 50px;
            padding: 0.6rem 1.2rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--primary-700);
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
            width: auto;
        }

        .section-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            color: var(--neutral-800);
            margin-bottom: 1rem;
        }

        .section-description {
            font-size: 1.1rem;
            color: var(--neutral-600);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .project-card {
            background: white;
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            height: 100%;
            position: relative;
            transform: translateZ(0);
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }

        .project-image-container {
            height: 240px;
            overflow: hidden;
            position: relative;
        }

        .project-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }

        .project-card:hover .project-image {
            transform: scale(1.05);
        }

        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .project-card:hover .project-overlay {
            background: rgba(0, 0, 0, 0.2);
        }

        .project-content {
            padding: 1.5rem 2rem 2rem;
        }

        .project-type {
            display: inline-block;
            background: var(--primary-100);
            color: var(--primary-700);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .project-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--neutral-800);
        }

        .project-description {
            color: var(--neutral-600);
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .project-tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .tech-badge {
            background: var(--neutral-100);
            color: var(--neutral-700);
            padding: 0.25rem 0.6rem;
            border-radius: 15px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .project-links {
            display: flex;
            gap: 0.75rem;
        }

        .project-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .link-live {
            background: var(--gradient-primary);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .link-live:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            color: white;
        }

        .link-code {
            background: var(--neutral-100);
            color: var(--neutral-700);
            border: 1px solid var(--neutral-200);
        }

        .link-code:hover {
            background: var(--neutral-200);
            transform: translateY(-2px);
            color: var(--neutral-800);
        }

        .featured-project {
            border: 2px solid var(--primary-300);
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
        }

        .featured-project::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
            animation: shineEffect 3s infinite;
        }

        @keyframes shineEffect {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .featured-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--gradient-primary);
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 2;
            box-shadow: var(--shadow-md);
        }

        /* Services Section */
        .services-section {
            padding: 6rem 0;
            position: relative;
            background: var(--neutral-50);
        }

        .service-card {
            background: white;
            border-radius: 20px;
            padding: 3rem 2rem;
            box-shadow: var(--shadow-lg);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-2xl);
        }

        .service-icon-container {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 2rem;
        }

        .service-icon-bg {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 100%;
            height: 100%;
            border-radius: 18px;
            background: var(--primary-200);
            transform: rotate(10deg);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 1;
        }

        .service-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-primary);
            border-radius: 20px;
            font-size: 2rem;
            color: white;
            box-shadow: var(--shadow-lg);
            z-index: 2;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .service-card:hover .service-icon {
            transform: translateY(-5px) scale(1.1) rotate(-5deg);
        }

        .service-card:hover .service-icon-bg {
            transform: translateY(5px) scale(0.9) rotate(20deg);
        }

        .service-icon.design {
            background: var(--gradient-secondary);
        }

        .service-icon.mobile {
            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        }

        .service-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--neutral-800);
            margin-bottom: 1rem;
        }

        .service-description {
            color: var(--neutral-600);
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .service-features {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem;
        }

        .service-feature {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            color: var(--neutral-700);
            font-size: 0.95rem;
        }

        .feature-icon {
            width: 24px;
            height: 24px;
            background: var(--primary-100);
            color: var(--primary-600);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }

        .service-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--gradient-primary);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            box-shadow: var(--shadow-md);
        }

        .service-cta:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: white;
            text-decoration: none;
        }

        /* Skills Section */
        .skills-section {
            padding: 6rem 0;
            position: relative;
            background: white;
        }

        .skill-categories {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 3rem;
        }

        .skill-category {
            background: var(--neutral-100);
            color: var(--neutral-700);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--neutral-200);
        }

        .skill-category:hover {
            background: var(--neutral-200);
            transform: translateY(-2px);
        }

        .skill-category.active {
            background: var(--gradient-primary);
            color: white;
            border-color: transparent;
            box-shadow: var(--shadow-md);
        }

        .skill-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .skill-item {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            border: 1px solid var(--neutral-200);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            opacity: 1;
            transform: translateY(0);
        }

        .skill-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-200);
        }

        .skill-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-100);
            color: var(--primary-600);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
        }

        .skill-item:hover .skill-icon {
            transform: scale(1.1) rotate(10deg);
            background: var(--primary-600);
            color: white;
        }

        .skill-name {
            font-weight: 600;
            color: var(--neutral-800);
            font-size: 1.1rem;
        }

        .skill-level {
            width: 100%;
            height: 8px;
            background: var(--neutral-200);
            border-radius: 4px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 4px;
        }

        .skill-percentage {
            color: var(--primary-600);
            font-weight: 700;
            font-size: 0.9rem;
            margin-top: -0.5rem;
            align-self: flex-end;
        }

        /* NEW CONTACT SECTION - Faster loading, sleeker design */
        .contact-section {
            padding: 6rem 0;
            position: relative;
            background: var(--gradient-primary);
            color: white;
            overflow: hidden;
        }

        .contact-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            z-index: 1;
            opacity: 0.5;
        }

        .contact-container {
            position: relative;
            z-index: 2;
        }

        /* Fast-appearing animation */
        @keyframes fastFadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .contact-platforms {
            display: flex;
            justify-content: center;
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .contact-platform {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 220px;
            animation: fastFadeIn 0.5s ease-out forwards;
        }

        .contact-platform:nth-child(1) {
            animation-delay: 0.1s;
        }

        .contact-platform:nth-child(2) {
            animation-delay: 0.2s;
        }

        .contact-platform:nth-child(3) {
            animation-delay: 0.3s;
        }

        .platform-icon-wrapper {
            width: 90px;
            height: 90px;
            position: relative;
            margin-bottom: 1.5rem;
        }

        .platform-icon-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(10deg);
            transition: all 0.3s ease;
        }

        .platform-icon {
            position: absolute;
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            z-index: 1;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .contact-platform:hover .platform-icon {
            transform: translateY(-10px);
            background: white;
            color: var(--primary-600);
        }

        .contact-platform:hover .platform-icon-bg {
            transform: rotate(25deg) scale(0.95) translateY(5px);
            background: rgba(255, 255, 255, 0.15);
        }

        .platform-name {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .platform-description {
            font-size: 0.95rem;
            opacity: 0.8;
            margin-bottom: 1.5rem;
        }

        .platform-action {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .platform-action:hover {
            background: white;
            color: var(--primary-600);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        /* Footer with Neon Effect */
        .footer {
            background: var(--neutral-900);
            color: rgba(255, 255, 255, 0.6);
            padding: 3rem 0;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: var(--gradient-rainbow);
            opacity: 0.6;
            filter: blur(2px);
            animation: neonPulse 3s ease-in-out infinite;
        }

        @keyframes neonPulse {

            0%,
            100% {
                opacity: 0.6;
                filter: blur(2px);
            }

            50% {
                opacity: 1;
                filter: blur(3px);
            }
        }

        .footer-content {
            position: relative;
            z-index: 1;
        }

        .footer-text {
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }

        .footer-developer {
            color: var(--primary-400);
            font-weight: 600;
            text-decoration: none;
            position: relative;
            transition: all 0.3s ease;
        }

        .footer-developer::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--primary-400);
            transition: width 0.3s ease;
        }

        .footer-developer:hover {
            color: var(--primary-300);
            text-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
        }

        .footer-developer:hover::after {
            width: 100%;
        }

        /* Advanced Scroll to Top Button - Repositioned for mobile */
        .scroll-to-top-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            /* Smaller button */
            height: 50px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: white;
            border: none;
            box-shadow:
                var(--shadow-lg),
                0 0 20px rgba(79, 70, 229, 0.3);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 998;
            /* Lower z-index than chat bot */
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.8);
            overflow: hidden;
        }

        .scroll-to-top-btn::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: var(--gradient-rainbow);
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .scroll-to-top-btn.show {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        .scroll-to-top-btn:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow:
                0 15px 40px rgba(79, 70, 229, 0.5),
                0 0 30px rgba(79, 70, 229, 0.3);
        }

        .scroll-to-top-btn:hover::after {
            opacity: 1;
            animation: rotate 2s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .scroll-to-top-btn:active {
            transform: translateY(-3px) scale(0.95);
            transition: transform 0.1s ease;
        }

        /* Scroll Progress Indicator */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(79, 70, 229, 0.1);
            z-index: 1051;
        }

        .scroll-progress-bar {
            height: 100%;
            background: var(--gradient-rainbow);
            background-size: 200% 200%;
            width: 0;
            transition: width 0.1s ease;
            animation: gradientMove 8s ease infinite;
        }

        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Advanced Loading Screen with Logo Animation */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--neutral-900);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 1;
        }

        .loading-content {
            text-align: center;
            position: relative;
        }

        .loading-logo {
            width: 100px;
            height: 100px;
            background: var(--gradient-rainbow);
            background-size: 200% 200%;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            color: white;
            font-weight: 800;
            font-size: 2rem;
            position: relative;
            animation: logoAnimation 2s ease-in-out infinite alternate, gradientMove 8s ease infinite;
            box-shadow:
                0 0 30px rgba(79, 70, 229, 0.4),
                0 0 60px rgba(126, 34, 206, 0.2);
        }

        @keyframes logoAnimation {
            0% {
                transform: scale(1) rotate(0deg);
                border-radius: 25px;
            }

            100% {
                transform: scale(1.1) rotate(10deg);
                border-radius: 35% 65% 65% 35% / 35% 35% 65% 65%;
            }
        }

        .loading-logo::after {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 30px;
            background: var(--gradient-rainbow);
            background-size: 200% 200%;
            z-index: -1;
            opacity: 0.4;
            filter: blur(20px);
            animation: pulseEffect 2s ease-in-out infinite alternate, gradientMove 8s ease infinite;
        }

        @keyframes pulseEffect {
            0% {
                opacity: 0.4;
                filter: blur(20px);
            }

            100% {
                opacity: 0.8;
                filter: blur(30px);
            }
        }

        .loading-text {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards 0.5s;
        }

        .loading-subtext {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards 0.8s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Project Modal */
        .project-modal .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: var(--shadow-2xl);
            overflow: hidden;
        }

        .project-modal .modal-header {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 1.5rem;
        }

        .project-modal .modal-title {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .project-modal .modal-body {
            padding: 2rem;
        }

        .project-modal .btn-close {
            filter: invert(1);
            opacity: 0.8;
        }

        .project-modal .btn-close:hover {
            opacity: 1;
        }

        /* Image Gallery in Modal */
        .project-gallery {
            margin-bottom: 1.5rem;
        }

        .gallery-main {
            margin-bottom: 1rem;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        .gallery-main img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .gallery-thumbs {
            display: flex;
            gap: 0.5rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }

        .gallery-thumbs::-webkit-scrollbar {
            height: 5px;
        }

        .gallery-thumbs::-webkit-scrollbar-track {
            background: var(--neutral-200);
            border-radius: 5px;
        }

        .gallery-thumbs::-webkit-scrollbar-thumb {
            background: var(--primary-500);
            border-radius: 5px;
        }

        .gallery-thumb {
            flex: 0 0 80px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid var(--neutral-200);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .gallery-thumb.active {
            border-color: var(--primary-600);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
            transform: scale(1.05);
        }

        .gallery-thumb:hover:not(.active) {
            transform: translateY(-2px);
        }

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

        /* Project Features List */
        .project-modal-description {
            color: var(--neutral-600);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        /* Chat Bot - Fixed position and mobile adjustment */
        .chat-bot-container {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .chat-bot-trigger {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: var(--shadow-lg);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            z-index: 1002;
        }

        .chat-bot-trigger:hover {
            transform: scale(1.1);
            box-shadow:
                0 15px 30px rgba(79, 70, 229, 0.4),
                0 0 20px rgba(79, 70, 229, 0.2);
        }

        .chat-bot-window {
            position: absolute;
            right: 0;
            bottom: 80px;
            /* Increased distance from bottom */
            width: 350px;
            height: 450px;
            background: white;
            border-radius: 20px;
            box-shadow: var(--shadow-2xl);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 0;
            visibility: hidden;
            transform: scale(0.9) translateY(20px);
            pointer-events: none;
            z-index: 1001;
            /* Ensure it's above other elements */
        }

        .chat-bot-window.open {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translateY(0);
            pointer-events: all;
        }

        .chat-header {
            background: var(--gradient-primary);
            color: white;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .chat-title {
            flex: 1;
            font-weight: 600;
            font-size: 1rem;
        }

        .chat-close {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .chat-close:hover {
            opacity: 1;
        }

        .chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .chat-message {
            max-width: 80%;
            padding: 0.75rem 1rem;
            border-radius: 15px;
            font-size: 0.9rem;
            line-height: 1.5;
            animation: fadeInMessage 0.3s ease;
        }

        @keyframes fadeInMessage {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bot-message {
            background: var(--neutral-100);
            color: var(--neutral-800);
            border-top-left-radius: 5px;
            align-self: flex-start;
        }

        .user-message {
            background: var(--primary-600);
            color: white;
            border-top-right-radius: 5px;
            align-self: flex-end;
        }

        .chat-timestamp {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 0.3rem;
            text-align: right;
        }

        .chat-footer {
            padding: 1rem;
            border-top: 1px solid var(--neutral-200);
            background: white;
        }

        .chat-form {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .chat-input {
            flex: 1;
            border: 1px solid var(--neutral-300);
            border-radius: 30px;
            padding: 0.75rem 1.25rem;
            font-size: 0.9rem;
            outline: none;
            transition: all 0.3s ease;
        }

        .chat-input:focus {
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
        }

        .chat-submit {
            background: var(--primary-600);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s ease;
        }

        .chat-submit:hover {
            background: var(--primary-700);
            transform: scale(1.05);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.5rem 1rem;
            background: var(--neutral-100);
            border-radius: 15px;
            max-width: fit-content;
            align-self: flex-start;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--primary-500);
            border-radius: 50%;
            animation: typingDot 1.4s infinite ease-in-out both;
        }

        .typing-dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typingDot {

            0%,
            80%,
            100% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .skill-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .contact-platforms {
                gap: 1.5rem;
            }
        }

        @media (max-width: 992px) {
            .navbar-custom {
                min-width: auto;
                width: calc(100% - 2rem);
            }

            .profile-container {
                width: 320px;
                height: 320px;
                margin-top: 2rem;
            }

            .tech-stack {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .tech-stack.react,
            .tech-stack.node {
                left: -15%;
            }

            .tech-stack.figma,
            .tech-stack.python {
                right: -15%;
            }

            .contact-platforms {
                flex-direction: column;
                align-items: center;
                gap: 3rem;
            }

            .contact-platform {
                width: 280px;
            }
        }

        @media (max-width: 768px) {
            .navbar-custom {
                padding: 0.4rem 0.8rem;
                /* Even thinner on mobile */
                top: 0.75rem;
            }

            .brand-text {
                display: none;
            }

            .brand-icon {
                width: 34px;
                height: 34px;
                font-size: 0.9rem;
            }

            .navbar-nav {
                gap: 0.1rem;
                padding: 0.25rem;
            }

            .nav-link {
                padding: 0.4rem 0.6rem;
                /* Smaller padding on mobile */
                font-size: 0.75rem;
            }

            .nav-text {
                display: none;
            }

            /* ============================================
   NAVBAR ACTIONS CONTAINER
   ============================================ */
            .navbar-actions {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            /* ============================================
   SHOP BUTONU
   ============================================ */
            .navbar-shop-btn {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                color: white;
                text-decoration: none;
                padding: 0.5rem 1.25rem;
                border-radius: 25px;
                font-weight: 600;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(245, 87, 108, 0.3);
            }

            /* Parlama efekti */
            .navbar-shop-btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.6s ease;
            }

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

            .navbar-shop-btn:hover {
                transform: translateY(-3px) scale(1.05);
                box-shadow: 0 12px 35px rgba(245, 87, 108, 0.5);
                color: white;
                text-decoration: none;
            }

            /* Shop ikonu animasyonu */
            .navbar-shop-btn i {
                font-size: 1rem;
                animation: shopIconBounce 2s ease-in-out infinite;
            }

            @keyframes shopIconBounce {

                0%,
                100% {
                    transform: translateY(0) rotate(0deg);
                }

                25% {
                    transform: translateY(-3px) rotate(-5deg);
                }

                75% {
                    transform: translateY(-2px) rotate(5deg);
                }
            }

            /* "Yeni" badge */
            .shop-badge {
                background: rgba(255, 255, 255, 0.3);
                padding: 0.15rem 0.5rem;
                border-radius: 12px;
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                animation: badgePulse 2s ease-in-out infinite;
            }

            @keyframes badgePulse {

                0%,
                100% {
                    transform: scale(1);
                    background: rgba(255, 255, 255, 0.3);
                }

                50% {
                    transform: scale(1.1);
                    background: rgba(255, 255, 255, 0.5);
                }
            }

            /* Mobil responsive */
            @media (max-width: 768px) {
                .navbar-actions {
                    gap: 0.5rem;
                }

                .navbar-shop-btn {
                    padding: 0.4rem 0.8rem;
                    font-size: 0.75rem;
                }

                .navbar-shop-btn span:not(.shop-badge) {
                    display: none;
                    /* "Shop" yazısını gizle, sadece ikon */
                }

                .shop-badge {
                    display: none;
                    /* "Yeni" badge'ini gizle */
                }

                .navbar-shop-btn i {
                    margin: 0;
                }
            }

            @media (max-width: 576px) {
                .navbar-actions {
                    flex-direction: column;
                    gap: 0.3rem;
                    align-items: stretch;
                }

                .navbar-shop-btn,
                .navbar-cta {
                    width: 100%;
                    justify-content: center;
                    font-size: 0.7rem;
                    padding: 0.4rem 0.6rem;
                }
            }

            .navbar-cta {
                padding: 0.4rem 0.8rem;
                /* Smaller padding on mobile */
                font-size: 0.75rem;
            }

            .hero-section {
                padding-top: 7rem;
                padding-bottom: 3rem;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.4rem;
            }

            .hero-description {
                font-size: 1rem;
            }

            .profile-container {
                width: 280px;
                height: 280px;
            }

            .project-image-container {
                height: 200px;
            }

            .skill-grid {
                grid-template-columns: 1fr;
            }

            .chat-bot-window {
                width: calc(100vw - 3rem);
                right: 0;
            }

            /* Fix for bot and scroll button overlap */
            .scroll-to-top-btn {
                bottom: 5.5rem;
                /* Move scroll button higher than the chat bot on mobile */
                right: 1.5rem;
                width: 45px;
                height: 45px;
            }
        }

        @media (max-width: 576px) {
            .hero-buttons {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-primary-custom,
            .btn-secondary-custom {
                width: 100%;
                justify-content: center;
            }

            .section-title {
                font-size: 2rem;
            }

            .profile-container {
                width: 240px;
                height: 240px;
            }

            .tech-stack {
                display: none;
            }

            .project-links {
                flex-direction: column;
            }

            .project-link-btn {
                width: 100%;
                justify-content: center;
            }

            .chat-bot-trigger {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
                bottom: 1.5rem;
                right: 1.5rem;
            }

            .chat-bot-window {
                bottom: 70px;
                height: 400px;
            }

            .contact-platform {
                width: 100%;
            }
        }

        /* Dijital Evren İletişim Bölümü CSS - TIKLANABİLİRLİK SORUNU DÜZELTİLDİ */
        .cosmic-contact-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 6rem 0;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            z-index: 1;
        }

        /* Kozmik Arka Plan */
        .cosmic-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
            /* Tıklanabilirlik için arka planı devre dışı bıraktık */
        }

        .stars-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            z-index: 0;
            opacity: 0;
            transform: scale(0);
            animation: twinkle var(--duration, 4s) infinite var(--delay, 0s);
            pointer-events: none;
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0;
                transform: scale(0);
            }

            50% {
                opacity: var(--brightness, 0.7);
                transform: scale(1);
            }
        }

        .nebula-cloud {
            position: absolute;
            top: -20%;
            right: -10%;
            width: 70%;
            height: 70%;
            background: radial-gradient(ellipse at center,
                    rgba(159, 89, 242, 0.2) 0%,
                    rgba(127, 79, 255, 0.1) 40%,
                    rgba(68, 21, 173, 0.05) 60%,
                    transparent 100%);
            border-radius: 50%;
            opacity: 0.6;
            filter: blur(30px);
            animation: nebulaFloat 30s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes nebulaFloat {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }

            100% {
                transform: translate(-5%, 10%) scale(1.2);
                opacity: 0.8;
            }
        }

        .cosmos-glow {
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 60%;
            height: 60%;
            background: radial-gradient(circle at center,
                    rgba(76, 201, 240, 0.2) 0%,
                    rgba(114, 9, 183, 0.1) 50%,
                    transparent 100%);
            border-radius: 50%;
            filter: blur(50px);
            animation: cosmosGlow 25s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes cosmosGlow {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }

            100% {
                transform: translate(5%, -5%) scale(1.3);
                opacity: 0.9;
            }
        }

        /* Merkezi Güneş/Ana Element */
        .central-sun {
            position: relative;
            width: 150px;
            height: 150px;
            margin-bottom: 60px;
            z-index: 5;
        }

        .sun-core {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(45deg, #ff4e50, #f9d423);
            box-shadow:
                0 0 60px rgba(255, 78, 80, 0.6),
                0 0 100px rgba(249, 212, 35, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: sunPulse 3s ease-in-out infinite alternate;
        }

        @keyframes sunPulse {
            0% {
                transform: scale(1);
                box-shadow:
                    0 0 60px rgba(255, 78, 80, 0.6),
                    0 0 100px rgba(249, 212, 35, 0.4);
            }

            100% {
                transform: scale(1.1);
                box-shadow:
                    0 0 80px rgba(255, 78, 80, 0.7),
                    0 0 120px rgba(249, 212, 35, 0.5);
            }
        }

        /* Çok Yakında Modal - Özel Tasarım (Sadece Muhasebe İçin) */
        .coming-soon-modal {
            position: relative;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
            border-radius: 20px;
            overflow: hidden;
        }

        .coming-soon-modal::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            animation: rotateGradient 10s linear infinite;
        }

        @keyframes rotateGradient {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .coming-soon-icon {
            font-size: 5rem;
            margin-bottom: 2rem;
            animation: floatIcon 3s ease-in-out infinite;
            position: relative;
            z-index: 2;
        }

        @keyframes floatIcon {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .coming-soon-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        .coming-soon-subtitle {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }

        .coming-soon-description {
            font-size: 1.1rem;
            opacity: 0.85;
            max-width: 600px;
            margin: 0 auto 2rem;
            position: relative;
            z-index: 2;
        }

        .coming-soon-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
            position: relative;
            z-index: 2;
        }

        .coming-soon-feature {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .coming-soon-feature:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .coming-soon-feature i {
            font-size: 2rem;
            margin-bottom: 1rem;
            display: block;
        }

        .coming-soon-feature h4 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .coming-soon-feature p {
            font-size: 0.9rem;
            opacity: 0.9;
            margin: 0;
        }

        .countdown-timer {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 3rem;
            position: relative;
            z-index: 2;
        }

        .countdown-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 1.5rem 2rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .countdown-number {
            font-size: 3rem;
            font-weight: 800;
            display: block;
            line-height: 1;
        }

        .countdown-label {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-top: 0.5rem;
            display: block;
        }

        .sparkles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            animation: sparkleFloat 3s infinite ease-in-out;
            opacity: 0;
        }

        @keyframes sparkleFloat {
            0% {
                transform: translateY(0) scale(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100px) scale(1);
                opacity: 0;
            }
        }

        /* Modal header özel renk */
        .project-modal .modal-header.coming-soon-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .sun-text {
            font-size: 1.2rem;
            font-weight: 700;
            text-align: center;
            color: white;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            line-height: 1.2;
            max-width: 90%;
            pointer-events: none;
        }

        .sun-rays {
            position: absolute;
            top: -25px;
            left: -25px;
            width: calc(100% + 50px);
            height: calc(100% + 50px);
            background-image: conic-gradient(from 0deg,
                    transparent 0deg,
                    rgba(255, 255, 255, 0.3) 10deg,
                    transparent 20deg,
                    transparent 30deg,
                    rgba(255, 255, 255, 0.3) 40deg,
                    transparent 50deg,
                    transparent 60deg,
                    rgba(255, 255, 255, 0.3) 70deg,
                    transparent 80deg,
                    transparent 90deg,
                    rgba(255, 255, 255, 0.3) 100deg,
                    transparent 110deg,
                    transparent 120deg,
                    rgba(255, 255, 255, 0.3) 130deg,
                    transparent 140deg,
                    transparent 150deg,
                    rgba(255, 255, 255, 0.3) 160deg,
                    transparent 170deg,
                    transparent 180deg,
                    rgba(255, 255, 255, 0.3) 190deg,
                    transparent 200deg,
                    transparent 210deg,
                    rgba(255, 255, 255, 0.3) 220deg,
                    transparent 230deg,
                    transparent 240deg,
                    rgba(255, 255, 255, 0.3) 250deg,
                    transparent 260deg,
                    transparent 270deg,
                    rgba(255, 255, 255, 0.3) 280deg,
                    transparent 290deg,
                    transparent 300deg,
                    rgba(255, 255, 255, 0.3) 310deg,
                    transparent 320deg,
                    transparent 330deg,
                    rgba(255, 255, 255, 0.3) 340deg,
                    transparent 350deg);
            border-radius: 50%;
            z-index: -1;
            animation: sunRaysRotate 20s linear infinite;
            pointer-events: none;
        }

        @keyframes sunRaysRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Gezegenler - TIKLANABİLİRLİK İÇİN YENİDEN YAPILANDIRILDI */
        .cosmic-planets {
            position: relative;
            width: 100%;
            height: 500px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .cosmic-planet {
            position: absolute;
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            perspective: 1000px;
            z-index: 10;
            /* Yüksek z-index ile tıklanabilirliği sağlayalım */
        }

        /* HITBOX - Tıklanabilir alanı büyüttük */
        .planet-hitbox {
            position: absolute;
            width: 150px;
            /* Daha büyük hit alanı */
            height: 150px;
            /* Daha büyük hit alanı */
            top: -25px;
            left: -25px;
            cursor: pointer;
            z-index: 15;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .instagram-planet {
            top: 50%;
            left: 15%;
            transform: translate(-50%, -50%);
        }

        .linkedin-planet {
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .bionluk-planet {
            top: 60%;
            left: 75%;
            transform: translate(-50%, -50%);
        }

        /* Gezegen yörüngeleri için ayrı sınıflar */
        .instagram-orbit {
            animation: planetOrbit1 20s linear infinite;
        }

        .linkedin-orbit {
            animation: planetOrbit2 25s linear infinite;
        }

        .bionluk-orbit {
            animation: planetOrbit3 30s linear infinite;
        }

        /* Yörünge animasyonları - hover edildiğinde duracak */
        @keyframes planetOrbit1 {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateX(180px) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateX(180px) rotate(-360deg);
            }
        }

        @keyframes planetOrbit2 {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateX(250px) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateX(250px) rotate(-360deg);
            }
        }

        @keyframes planetOrbit3 {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateX(320px) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateX(320px) rotate(-360deg);
            }
        }

        .planet-body {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.4);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 15;
        }

        .planet-body i {
            font-size: 2.5rem;
            color: white;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
            transition: all 0.5s ease;
            z-index: 16;
            pointer-events: none;
        }

        .planet-glow {
            position: absolute;
            top: -10px;
            left: -10px;
            width: calc(100% + 20px);
            height: calc(100% + 20px);
            border-radius: 50%;
            filter: blur(15px);
            opacity: 0;
            transition: all 0.5s ease;
            pointer-events: none;
        }

        .instagram-planet .planet-body {
            background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #FCAF45);
        }

        .instagram-planet .planet-glow {
            background: radial-gradient(circle at center, rgba(225, 48, 108, 0.8) 0%, rgba(193, 53, 132, 0.5) 50%, transparent 100%);
        }

        .linkedin-planet .planet-body {
            background: linear-gradient(45deg, #0077B5, #0A66C2);
        }

        .linkedin-planet .planet-glow {
            background: radial-gradient(circle at center, rgba(10, 102, 194, 0.8) 0%, rgba(0, 119, 181, 0.5) 50%, transparent 100%);
        }

        .bionluk-planet .planet-body {
            background: linear-gradient(45deg, #1DD75B, #0DC143);
        }

        .bionluk-planet .planet-glow {
            background: radial-gradient(circle at center, rgba(29, 215, 91, 0.8) 0%, rgba(13, 193, 67, 0.5) 50%, transparent 100%);
        }

        .planet-ring {
            position: absolute;
            width: 140px;
            height: 40px;
            left: -20px;
            top: calc(50% - 20px);
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.2);
            transform: rotateX(75deg);
            pointer-events: none;
        }

        .instagram-planet .planet-ring {
            border-color: rgba(193, 53, 132, 0.3);
        }

        .linkedin-planet .planet-ring {
            border-color: rgba(10, 102, 194, 0.3);
        }

        .bionluk-planet .planet-ring {
            border-color: rgba(13, 193, 67, 0.3);
        }

        /* Gezegen Bilgi Paneli - tıklanabilirlik için güncellenmiş */
        .planet-info {
            position: absolute;
            top: 120px;
            left: 50%;
            width: 200px;
            transform: translateX(-50%);
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            text-align: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 20;
            pointer-events: none;
        }

        .planet-hitbox:hover~.planet-info,
        .planet-info:hover {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .planet-info h3 {
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: white;
        }

        .planet-info p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 12px;
        }

        .cosmic-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 8px 15px;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .instagram-planet .cosmic-link {
            background: linear-gradient(45deg, #E1306C, #C13584);
        }

        .linkedin-planet .cosmic-link {
            background: linear-gradient(45deg, #0077B5, #0A66C2);
        }

        .bionluk-planet .cosmic-link {
            background: linear-gradient(45deg, #1DD75B, #0DC143);
        }

        .link-trail {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: linkTrail 2s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes linkTrail {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        /* Gezegen Hover Efektleri - Düzeltilmiş */
        .planet-hitbox:hover .planet-body {
            transform: scale(1.2);
            box-shadow:
                0 0 30px rgba(255, 255, 255, 0.3),
                inset -10px -10px 20px rgba(0, 0, 0, 0.4);
        }

        .planet-hitbox:hover .planet-glow {
            opacity: 1;
        }

        .planet-hitbox:hover~.planet-info {
            transform: translateX(-50%) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .planet-hitbox:hover .planet-ring {
            width: 160px;
            left: -30px;
        }

        /* Gezegenler İçin Yörüngeler */
        .cosmic-orbits {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            pointer-events: none;
        }

        .orbit {
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(255, 255, 255, 0.15);
            pointer-events: none;
        }

        .orbit-1 {
            width: 360px;
            height: 360px;
            top: -180px;
            left: -180px;
        }

        .orbit-2 {
            width: 500px;
            height: 500px;
            top: -250px;
            left: -250px;
        }

        .orbit-3 {
            width: 640px;
            height: 640px;
            top: -320px;
            left: -320px;
        }

        /* Kuyruklu Yıldızlar */
        .comet {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: white;
            border-radius: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 3;
            pointer-events: none;
        }

        .comet::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 50px;
            height: 1px;
            background: linear-gradient(90deg, white, transparent);
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* Alt Bilgi */
        .cosmic-footer {
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            opacity: 0.7;
            z-index: 5;
        }

        /* Responsive Düzenlemeler - TAM MOBİL UYUMLU VE TIKLANABİLİR */
        @media (max-width: 992px) {
            .cosmic-planets {
                height: 400px;
            }

            .orbit-1 {
                width: 260px;
                height: 260px;
                top: -130px;
                left: -130px;
            }

            .orbit-2 {
                width: 400px;
                height: 400px;
                top: -200px;
                left: -200px;
            }

            .orbit-3 {
                width: 540px;
                height: 540px;
                top: -270px;
                left: -270px;
            }
        }

        /* MOBİL İÇİN TAMAMEN YENİDEN TASARLANMIŞ DİKEY YERLEŞIM */
        @media (max-width: 768px) {
            .cosmic-planets {
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 150px;
                margin-top: 30px;
                margin-bottom: 100px;
            }

            .cosmic-planet {
                position: relative;
                top: unset !important;
                left: unset !important;
                transform: none !important;
                animation: none !important;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 280px;
            }

            .planet-hitbox {
                position: relative;
                top: 0;
                left: 0;
                margin: 0 auto;
            }

            .planet-info {
                position: relative;
                top: 20px;
                left: 50%;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .cosmic-orbits {
                display: none;
            }

            /* Mobilde gezegenlere animasyon ekleyelim */
            .instagram-planet,
            .linkedin-planet,
            .bionluk-planet {
                animation: planetPulseMobile 3s infinite alternate ease-in-out !important;
            }

            @keyframes planetPulseMobile {
                0% {
                    transform: translateY(0) !important;
                }

                100% {
                    transform: translateY(-10px) !important;
                }
            }

            /* Bilgi kartları için mobil tasarım */
            .planet-info {
                transform: translateX(-50%) scale(1);
                background: rgba(255, 255, 255, 0.15);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }

            .central-sun {
                margin-bottom: 40px;
            }

            .cosmic-footer {
                position: relative;
                bottom: auto;
                padding-top: 30px;
            }
        }

        /* Kayan "Çok Yakında" Yazısı - Sadece Muhasebe Kartı İçin */
        .coming-soon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 3;
        }

        .sliding-text-container {
            position: absolute;
            white-space: nowrap;
            animation: slideText 8s linear infinite;
        }

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

            100% {
                transform: translateX(100%);
            }
        }

        .sliding-text {
            font-size: 3rem;
            font-weight: 900;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5rem;
            text-shadow:
                0 0 10px rgba(255, 255, 255, 0.5),
                0 0 20px rgba(255, 255, 255, 0.3),
                0 0 30px rgba(255, 255, 255, 0.2),
                0 5px 15px rgba(0, 0, 0, 0.3);
            display: inline-block;
            padding: 0 2rem;
        }

        /* Parlama efekti */
        .sliding-text::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        /* Arka planda yıldız efektleri */
        .coming-soon-stars {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        .coming-soon-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkleStar 2s infinite ease-in-out;
        }

        @keyframes twinkleStar {

            0%,
            100% {
                opacity: 0;
                transform: scale(0);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Responsive - Mobilde daha küçük yazı */
        @media (max-width: 768px) {
            .sliding-text {
                font-size: 2rem;
                letter-spacing: 0.3rem;
            }
        }

        @media (max-width: 576px) {
            .sliding-text {
                font-size: 1.5rem;
                letter-spacing: 0.2rem;
            }
        }

        @media (max-width: 576px) {
            .central-sun {
                width: 120px;
                height: 120px;
            }

            .sun-text {
                font-size: 1rem;
            }

            .planet-body {
                width: 80px;
                height: 80px;
            }

            .planet-hitbox {
                width: 120px;
                height: 120px;
                top: -20px;
                left: -20px;
            }

            .planet-body i {
                font-size: 2rem;
            }

            .planet-info {
                width: 220px;
            }

            .cosmic-planets {
                gap: 120px;
            }

            .cosmic-contact-section {
                padding: 4rem 0;
            }
        }

        /* ============================================
   ODRA KERNEL GÜVENLİK SİSTEMİ - YAN YANA KART
   Developer: Ömer Berat (Karagan)
   ============================================ */

        .odra-security-banner-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            border-radius: 20px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            height: 100%;
            min-height: 400px;
            display: flex;
            align-items: center;
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(59, 130, 246, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .odra-security-banner-card:hover {
            transform: translateY(-5px);
            box-shadow:
                0 30px 70px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(59, 130, 246, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: rgba(59, 130, 246, 0.5);
        }

        /* Animasyonlu arka plan */
        .odra-animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.2;
            pointer-events: none;
        }

        .odra-circuit-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            animation: odraCircuitMove 4s linear infinite;
        }

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

            50% {
                opacity: 1;
            }

            100% {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .odra-floating-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #3b82f6;
            border-radius: 50%;
            box-shadow: 0 0 10px #3b82f6;
            animation: odraParticleFloat 6s ease-in-out infinite;
        }

        @keyframes odraParticleFloat {

            0%,
            100% {
                transform: translate(0, 0);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translate(50px, -50px);
                opacity: 0;
            }
        }

        /* İçerik wrapper */
        .odra-content-wrapper {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 2rem;
            align-items: center;
            width: 100%;
        }

        /* Logo bölümü */
        .odra-logo-section {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .odra-shield-wrapper {
            position: relative;
            width: 70px;
            height: 70px;
        }

        .odra-shield-glow-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
            animation: odraShieldGlow 2s ease-in-out infinite;
        }

        @keyframes odraShieldGlow {

            0%,
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }

            50% {
                transform: translate(-50%, -50%) scale(1.3);
                opacity: 1;
            }
        }

        .odra-shield-main {
            position: relative;
            font-size: 3.5rem;
            color: #3b82f6;
            filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
            animation: odraShieldPulse 2s ease-in-out infinite;
        }

        @keyframes odraShieldPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        .odra-brand-section {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .odra-logo-text {
            display: flex;
            gap: 0.3rem;
            font-size: 2.5rem;
            font-weight: 900;
            letter-spacing: 0.2rem;
        }

        .odra-letter-animated {
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: odraLetterPulse 2s ease-in-out infinite;
            animation-delay: calc(var(--i, 0) * 0.1s);
            display: inline-block;
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
        }

        .odra-letter-animated:nth-child(1) {
            --i: 0;
        }

        .odra-letter-animated:nth-child(2) {
            --i: 1;
        }

        .odra-letter-animated:nth-child(3) {
            --i: 2;
        }

        .odra-letter-animated:nth-child(4) {
            --i: 3;
        }

        @keyframes odraLetterPulse {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-3px) scale(1.05);
            }
        }

        .odra-brand-subtitle {
            font-size: 0.75rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 0.2rem;
        }

        .odra-version-badge {
            font-size: 0.65rem;
            color: #3b82f6;
            font-weight: 600;
            padding: 0.2rem 0.6rem;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 12px;
            display: inline-block;
            width: fit-content;
        }

        /* Bilgi bölümü */
        .odra-info-section {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .odra-main-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0;
        }

        .odra-lock-icon-animated {
            color: #3b82f6;
            animation: odraLockRotate 3s ease-in-out infinite;
        }

        @keyframes odraLockRotate {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-15deg);
            }

            75% {
                transform: rotate(15deg);
            }
        }

        .odra-main-description {
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
            font-size: 0.95rem;
            margin: 0;
        }

        .odra-main-description strong {
            color: #60a5fa;
            font-weight: 700;
        }

        .odra-features-compact {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .odra-feature-box {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: rgba(59, 130, 246, 0.1);
            padding: 0.6rem 0.8rem;
            border-radius: 10px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            transition: all 0.3s ease;
        }

        .odra-feature-box:hover {
            background: rgba(59, 130, 246, 0.2);
            transform: translateX(3px);
            border-color: rgba(59, 130, 246, 0.4);
        }

        .odra-feature-box i {
            color: #3b82f6;
            font-size: 1rem;
        }

        .odra-feature-box span {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
            font-size: 0.85rem;
        }

        /* İstatistik bölümü */
        .odra-stats-section {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: flex-end;
        }

        .odra-stat-box {
            text-align: center;
            background: rgba(59, 130, 246, 0.1);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, 0.3);
            min-width: 120px;
        }

        .odra-stat-number {
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }

        .odra-stat-label {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 600;
            margin-top: 0.3rem;
        }

        .odra-dev-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(59, 130, 246, 0.1);
            padding: 0.75rem 1rem;
            border-radius: 10px;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        .odra-dev-info i {
            font-size: 1.3rem;
            color: #3b82f6;
        }

        .odra-dev-label {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .odra-dev-name {
            font-size: 0.85rem;
            color: white;
            font-weight: 700;
        }

        .odra-status-active {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: rgba(34, 197, 94, 0.1);
            padding: 0.6rem 1rem;
            border-radius: 20px;
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #22c55e;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .odra-status-dot-pulse {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            box-shadow: 0 0 10px #22c55e;
            animation: odraStatusPulse 2s ease-in-out infinite;
        }

        @keyframes odraStatusPulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 10px #22c55e;
            }

            50% {
                transform: scale(1.3);
                box-shadow: 0 0 20px #22c55e;
            }
        }

        /* Scan line */
        .odra-scan-line-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            animation: odraScanMove 3s linear infinite;
            opacity: 0.5;
        }

        @keyframes odraScanMove {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(400px);
            }
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .odra-content-wrapper {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .odra-logo-section,
            .odra-stats-section {
                justify-self: center;
            }

            .odra-features-compact {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .odra-security-banner-card {
                padding: 1.5rem;
                min-height: 350px;
            }

            .odra-logo-text {
                font-size: 2rem;
            }

            .odra-main-title {
                font-size: 1.2rem;
            }

            .odra-features-compact {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ============================================
   ARAMA BİLDİRİMİ
   ============================================ */

        .search-notification {
            position: fixed;
            top: 6rem;
            right: 2rem;
            background: white;
            border-radius: 15px;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            opacity: 0;
            transform: translateX(400px);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .search-notification.show {
            opacity: 1;
            transform: translateX(0);
        }

        .search-notification i {
            font-size: 1.5rem;
        }

        .search-notification.success {
            border-left: 4px solid #10b981;
        }

        .search-notification.success i {
            color: #10b981;
        }

        .search-notification.warning {
            border-left: 4px solid #f59e0b;
        }

        .search-notification.warning i {
            color: #f59e0b;
        }

        .search-notification.error {
            border-left: 4px solid #ef4444;
        }

        .search-notification.error i {
            color: #ef4444;
        }

        .search-notification span {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--neutral-700);
        }

        @media (max-width: 768px) {
            .search-notification {
                top: 5rem;
                right: 1rem;
                left: 1rem;
                padding: 0.75rem 1rem;
            }
        }

        /* ============================================
   NAVBAR ODRA MİNİ BADGE
   ============================================ */

        .navbar-odra-mini {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 20px;
            padding: 0.4rem 0.75rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .navbar-odra-mini::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
            animation: odraShine 3s infinite;
        }

        @keyframes odraShine {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        .navbar-odra-mini:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .odra-mini-shield {
            width: 28px;
            height: 28px;
            background: rgba(59, 130, 246, 0.2);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            font-size: 0.9rem;
            animation: shieldPulseMini 2s ease-in-out infinite;
        }

        @keyframes shieldPulseMini {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
            }
        }

        .odra-mini-text {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }

        .odra-mini-label {
            font-size: 0.75rem;
            font-weight: 800;
            color: #60a5fa;
            letter-spacing: 1px;
        }

        .odra-mini-status {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.65rem;
            color: #22c55e;
            font-weight: 600;
        }

        .odra-mini-dot {
            width: 5px;
            height: 5px;
            background: #22c55e;
            border-radius: 50%;
            animation: dotPulseMini 2s ease-in-out infinite;
        }

        @keyframes dotPulseMini {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
            }

            50% {
                box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
            }
        }

        /* Responsive */
        @media (max-width: 992px) {
            .navbar-odra-mini {
                padding: 0.35rem 0.6rem;
            }

            .odra-mini-shield {
                width: 24px;
                height: 24px;
                font-size: 0.8rem;
            }

            .odra-mini-label {
                font-size: 0.7rem;
            }

            .odra-mini-status {
                font-size: 0.6rem;
            }
        }

        @media (max-width: 768px) {
            .navbar-odra-mini {
                display: none;
                /* Mobilde gizle */
            }
        }

        /* ============================================
   ULTRA PROFESYONEL SHOP MODAL
   Developer: Ömer Berat (Karagan)
   ============================================ */

        .ultra-shop-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            backdrop-filter: blur(0px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            pointer-events: none;
        }

        .ultra-shop-modal-overlay.active {
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(15px);
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        .ultra-shop-modal {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 30px;
            padding: 0;
            max-width: 650px;
            width: 90%;
            position: relative;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
            transform: scale(0.8) translateY(50px) rotateX(20deg);
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .ultra-shop-modal-overlay.active .ultra-shop-modal {
            transform: scale(1) translateY(0) rotateX(0deg);
            opacity: 1;
        }

        /* Arka plan particles */
        .modal-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .modal-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 5s infinite ease-in-out;
        }

        @keyframes particleFloat {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0);
            }

            50% {
                opacity: 1;
                transform: translateY(-100px) scale(1);
            }

            100% {
                opacity: 0;
                transform: translateY(-200px) scale(0);
            }
        }

        /* Işık huzmeleri */
        .modal-rays {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg,
                    transparent 0deg 10deg,
                    rgba(255, 255, 255, 0.1) 10deg 20deg,
                    transparent 20deg 30deg);
            animation: rotateRays 20s linear infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes rotateRays {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Kapat butonu */
        .ultra-modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .ultra-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg) scale(1.1);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        /* Ana içerik */
        .ultra-shop-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 3rem 2.5rem;
        }

        /* 3D Dönen İkon */
        .ultra-shop-icon-3d {
            width: 140px;
            height: 140px;
            margin: 0 auto 2rem;
            position: relative;
            perspective: 1000px;
        }

        .icon-3d-wrapper {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            animation: icon3DRotate 6s ease-in-out infinite;
            transform-style: preserve-3d;
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }

        @keyframes icon3DRotate {

            0%,
            100% {
                transform: rotateY(0deg) rotateX(0deg);
            }

            25% {
                transform: rotateY(180deg) rotateX(10deg);
            }

            50% {
                transform: rotateY(360deg) rotateX(0deg);
            }

            75% {
                transform: rotateY(180deg) rotateX(-10deg);
            }
        }

        .icon-glow-ring {
            position: absolute;
            top: -15px;
            left: -15px;
            width: calc(100% + 30px);
            height: calc(100% + 30px);
            border-radius: 30px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            animation: ringPulse 2s ease-in-out infinite;
        }

        @keyframes ringPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.15);
                opacity: 0.5;
            }
        }

        /* Başlık */
        .ultra-shop-title {
            font-size: 3rem;
            font-weight: 900;
            color: white;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .title-line {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            animation: titleSlideIn 0.8s ease-out forwards;
        }

        .title-line.delay-1 {
            animation-delay: 0.2s;
        }

        @keyframes titleSlideIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Alt başlık */
        .ultra-shop-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 2.5rem;
            animation: fadeIn 1s ease-out 0.5s backwards;
            line-height: 1.6;
        }

        /* Özellikler Grid */
        .ultra-shop-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .ultra-feature-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 1.5rem 1rem;
            transition: all 0.3s ease;
            animation: cardPop 0.6s ease-out backwards;
        }

        .ultra-feature-card:nth-child(1) {
            animation-delay: 0.6s;
        }

        .ultra-feature-card:nth-child(2) {
            animation-delay: 0.7s;
        }

        .ultra-feature-card:nth-child(3) {
            animation-delay: 0.8s;
        }

        @keyframes cardPop {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(30px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .ultra-feature-card:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.8rem;
            color: white;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .ultra-feature-card:hover .feature-icon {
            transform: rotateY(360deg) scale(1.1);
        }

        .ultra-feature-card h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.5rem;
        }

        .ultra-feature-card p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
            margin: 0;
        }

        /* Bilgi mesajı */
        .coming-soon-message {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 18px;
            padding: 1.5rem;
            margin-top: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            color: white;
            animation: fadeIn 1s ease-out 0.9s backwards;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .coming-soon-message i {
            font-size: 2rem;
            color: rgba(255, 255, 255, 0.9);
            animation: iconPulse 2s ease-in-out infinite;
        }

        @keyframes iconPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.15);
            }
        }

        .coming-soon-message p {
            margin: 0;
            font-size: 1.05rem;
            line-height: 1.5;
            font-weight: 500;
        }

        /* Yüzen elementler */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }

        .shape {
            position: absolute;
            font-size: 2.5rem;
            opacity: 0.7;
            animation: shapeFloat 8s infinite ease-in-out;
        }

        .shape-1 {
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape-2 {
            top: 20%;
            right: 15%;
            animation-delay: 1s;
        }

        .shape-3 {
            bottom: 20%;
            left: 15%;
            animation-delay: 2s;
        }

        .shape-4 {
            bottom: 15%;
            right: 20%;
            animation-delay: 3s;
        }

        @keyframes shapeFloat {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-30px) rotate(180deg);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .ultra-shop-modal {
                padding: 0;
                width: 95%;
            }

            .ultra-shop-content {
                padding: 2rem 1.5rem;
            }

            .ultra-shop-icon-3d {
                width: 100px;
                height: 100px;
            }

            .icon-3d-wrapper {
                font-size: 3rem;
            }

            .ultra-shop-title {
                font-size: 2rem;
            }

            .ultra-shop-subtitle {
                font-size: 1rem;
            }

            .ultra-shop-features {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .ultra-modal-close {
                top: 1rem;
                right: 1rem;
                width: 40px;
                height: 40px;
            }
        }

        @media (max-width: 576px) {
            .shape {
                font-size: 1.5rem;
            }
        }

        /* ════════════════════════════════════════════════
   🎨 ULTRA MODERN SERVICES SECTION
   ════════════════════════════════════════════════ */

        .ultra-services-section {
            padding: 6rem 0;
            position: relative;
            background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
            overflow: hidden;
        }

        .ultra-services-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(219, 39, 119, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        .ultra-services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
            position: relative;
            z-index: 2;
        }

        /* ════════════════════════════════════════════════
   3D FLIP CARD
   ════════════════════════════════════════════════ */

        .ultra-service-card {
            position: relative;
            height: 480px;
            perspective: 1500px;
            cursor: pointer;
        }

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 24px;
            padding: 2.5rem;
            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.5);
        }

        .card-front {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            transform: rotateY(0deg);
            z-index: 2;
        }

        .card-back {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            transform: rotateY(180deg);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .ultra-service-card:hover .card-front {
            transform: rotateY(-180deg);
        }

        .ultra-service-card:hover .card-back {
            transform: rotateY(0deg);
        }

        /* ════════════════════════════════════════════════
   ICON WRAPPER - 3D ANIMATED
   ════════════════════════════════════════════════ */

        .service-icon-wrapper {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: iconFloat 6s ease-in-out infinite;
        }

        @keyframes iconFloat {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-15px) rotate(5deg);
            }

            50% {
                transform: translateY(0) rotate(-5deg);
            }

            75% {
                transform: translateY(-10px) rotate(3deg);
            }
        }

        .icon-orbit {
            position: absolute;
            width: 130%;
            height: 130%;
            border: 2px dashed rgba(79, 70, 229, 0.2);
            border-radius: 50%;
            animation: orbitRotate 20s linear infinite;
        }

        @keyframes orbitRotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .icon-core {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            box-shadow:
                0 20px 40px rgba(79, 70, 229, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .ultra-service-card:hover .icon-core {
            transform: scale(1.1) rotate(10deg);
            box-shadow:
                0 30px 60px rgba(79, 70, 229, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }

        .service-icon-wrapper.design .icon-core {
            background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
            box-shadow:
                0 20px 40px rgba(219, 39, 119, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
        }

        .service-icon-wrapper.mobile .icon-core {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            box-shadow:
                0 20px 40px rgba(59, 130, 246, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
        }

        /* Particles Animation */
        .icon-particles {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .icon-particles .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--primary-500);
            border-radius: 50%;
            opacity: 0;
            animation: particleOrbit 4s infinite ease-in-out;
        }

        .icon-particles .particle:nth-child(1) {
            top: 0;
            left: 50%;
            animation-delay: 0s;
        }

        .icon-particles .particle:nth-child(2) {
            top: 50%;
            right: 0;
            animation-delay: 1s;
        }

        .icon-particles .particle:nth-child(3) {
            bottom: 0;
            left: 50%;
            animation-delay: 2s;
        }

        .icon-particles .particle:nth-child(4) {
            top: 50%;
            left: 0;
            animation-delay: 3s;
        }

        @keyframes particleOrbit {

            0%,
            100% {
                transform: translate(0, 0) scale(0);
                opacity: 0;
            }

            50% {
                transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(1);
                opacity: 1;
            }
        }

        /* ════════════════════════════════════════════════
   CARD CONTENT - FRONT
   ════════════════════════════════════════════════ */

        .service-title {
            font-size: 1.8rem;
            font-weight: 800;
            text-align: center;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .service-brief {
            text-align: center;
            color: var(--neutral-600);
            font-size: 1rem;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .service-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 2rem;
            padding: 1.5rem 0;
            border-top: 1px solid var(--neutral-200);
            border-bottom: 1px solid var(--neutral-200);
        }

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

        .stat-number {
            display: block;
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.3rem;
        }

        .stat-label {
            display: block;
            font-size: 0.85rem;
            color: var(--neutral-500);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .hover-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--primary-50);
            border-radius: 12px;
            color: var(--primary-600);
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .ultra-service-card:hover .hover-indicator {
            background: var(--primary-600);
            color: white;
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
        }

        /* ════════════════════════════════════════════════
   CARD CONTENT - BACK
   ════════════════════════════════════════════════ */

        .back-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .service-features-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .service-features-list li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .service-features-list li:last-child {
            border-bottom: none;
        }

        .service-features-list li:hover {
            padding-left: 0.5rem;
            background: rgba(255, 255, 255, 0.05);
        }

        .service-features-list i {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.1rem;
        }

        .service-features-list span {
            color: rgba(255, 255, 255, 0.95);
            font-weight: 500;
        }

        .back-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            color: white;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            backdrop-filter: blur(10px);
        }

        .back-cta:hover {
            background: white;
            color: var(--primary-600);
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            text-decoration: none;
        }

        .back-cta i {
            transition: transform 0.3s ease;
        }

        .back-cta:hover i {
            transform: translateX(5px);
        }

        /* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

        @media (max-width: 768px) {
            .ultra-services-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .ultra-service-card {
                height: 420px;
            }

            .card-front,
            .card-back {
                padding: 2rem;
            }

            .service-icon-wrapper {
                width: 100px;
                height: 100px;
            }

            .icon-core {
                font-size: 2.5rem;
            }

            .service-title {
                font-size: 1.5rem;
            }

            .stat-number {
                font-size: 1.75rem;
            }
        }

        /* ============================================
   YETENEKLERİM - DALGA ANİMASYONLU
   ============================================ */
        .skills-wave-section {
            padding: 6rem 0;
            background: linear-gradient(180deg, #0a0a15 0%, #0d0d1a 100%);
            position: relative;
            overflow: hidden;
        }

        .skills-wave-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        /* Skills Wave Container */
        .skills-wave-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 3rem;
        }

        /* Individual Skill Wave Card */
        .skill-wave-card {
            position: relative;
            width: 140px;
            height: 160px;
            border-radius: 20px;
            overflow: hidden;
            cursor: default;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .skill-wave-card:hover {
            transform: translateY(-10px) scale(1.05);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        }

        /* Wave Background */
        .skill-wave-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wave-fill {
            position: absolute;
            bottom: 0;
            left: -50%;
            width: 200%;
            height: var(--fill-percent, 50%);
            background: linear-gradient(180deg,
                    rgba(0, 0, 0, 0.9) 0%,
                    rgba(0, 0, 0, 0.95) 100%);
            border-radius: 40% 40% 0 0;
            animation: waveMotion 3s ease-in-out infinite;
        }

        .wave-fill::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg,
                    rgba(99, 102, 241, 0.3) 0%,
                    rgba(124, 58, 237, 0.2) 50%,
                    transparent 100%);
            border-radius: inherit;
        }

        .wave-fill::after {
            content: '';
            position: absolute;
            top: -10px;
            left: 25%;
            width: 150%;
            height: 30px;
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.1) 0%,
                    transparent 100%);
            border-radius: 50%;
            animation: waveShine 2s ease-in-out infinite;
        }

        @keyframes waveMotion {

            0%,
            100% {
                transform: translateX(-5%) translateY(0);
                border-radius: 40% 45% 0 0;
            }

            25% {
                transform: translateX(5%) translateY(-5px);
                border-radius: 45% 40% 0 0;
            }

            50% {
                transform: translateX(-5%) translateY(-10px);
                border-radius: 38% 42% 0 0;
            }

            75% {
                transform: translateX(5%) translateY(-5px);
                border-radius: 42% 38% 0 0;
            }
        }

        @keyframes waveShine {

            0%,
            100% {
                opacity: 0.3;
                transform: translateX(-10%);
            }

            50% {
                opacity: 0.5;
                transform: translateX(10%);
            }
        }

        /* Skill Content */
        .skill-wave-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 1rem;
            text-align: center;
        }

        .skill-wave-content i {
            font-size: 2.5rem;
            color: white;
            margin-bottom: 0.5rem;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
            transition: transform 0.3s ease;
        }

        .skill-wave-card:hover .skill-wave-content i {
            transform: scale(1.1);
        }

        .skill-name {
            font-size: 0.9rem;
            font-weight: 700;
            color: white;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
        }

        .skill-percent {
            font-size: 0.8rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.1);
            padding: 0.2rem 0.6rem;
            border-radius: 10px;
        }

        /* Language-specific colors */
        .skill-wave-card:nth-child(1) .skill-wave-content i {
            color: #e34c26;
        }

        /* HTML */
        .skill-wave-card:nth-child(2) .skill-wave-content i {
            color: #264de4;
        }

        /* CSS */
        .skill-wave-card:nth-child(3) .skill-wave-content i {
            color: #f0db4f;
        }

        /* JS */
        .skill-wave-card:nth-child(4) .skill-wave-content i {
            color: #68217a;
        }

        /* C# */
        .skill-wave-card:nth-child(5) .skill-wave-content i {
            color: #00599c;
        }

        /* C++ */
        .skill-wave-card:nth-child(6) .skill-wave-content i {
            color: #3776ab;
        }

        /* Python */
        .skill-wave-card:nth-child(7) .skill-wave-content i {
            color: #61dafb;
        }

        /* React */
        .skill-wave-card:nth-child(8) .skill-wave-content i {
            color: #777bb3;
        }

        /* PHP */
        .skill-wave-card:nth-child(9) .skill-wave-content i {
            color: #555555;
        }

        /* C */
        .skill-wave-card:nth-child(10) .skill-wave-content i {
            color: #00979d;
        }

        /* Arduino */
        .skill-wave-card:nth-child(11) .skill-wave-content i {
            color: #0175c2;
        }

        /* Dart */
        .skill-wave-card:nth-child(12) .skill-wave-content i {
            color: #ff4444;
        }

        /* Assembly */

        /* ============================================
   SOFTWARE KNOWLEDGE ACCORDION
   ============================================ */
        .software-knowledge-section {
            margin-top: 4rem;
        }

        .software-accordion {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .accordion-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.02);
        }

        .accordion-header:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .accordion-header i:first-child {
            font-size: 1.5rem;
            color: #6366f1;
        }

        .accordion-header span {
            flex: 1;
            font-size: 1.2rem;
            font-weight: 700;
            color: white;
            font-family: 'Poppins', sans-serif;
        }

        .accordion-arrow {
            color: rgba(255, 255, 255, 0.5);
            transition: transform 0.4s ease;
        }

        .accordion-header.active .accordion-arrow {
            transform: rotate(180deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .accordion-content.open {
            max-height: 600px;
        }

        .software-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
            padding: 1.5rem 2rem 2rem;
        }

        .software-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .software-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(5px);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .software-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }

        .software-icon.premiere {
            background: linear-gradient(135deg, #9999ff 0%, #5050ff 100%);
        }

        .software-icon.photoshop {
            background: linear-gradient(135deg, #31a8ff 0%, #001e36 100%);
        }

        .software-icon.aftereffects {
            background: linear-gradient(135deg, #9999ff 0%, #7b30d8 100%);
        }

        .software-icon.vscode {
            background: linear-gradient(135deg, #007acc 0%, #1f1f1f 100%);
        }

        .software-icon.visualstudio {
            background: linear-gradient(135deg, #68217a 0%, #5c2d91 100%);
        }

        .software-icon.figma {
            background: linear-gradient(135deg, #f24e1e 0%, #a259ff 100%);
        }

        .software-icon.git {
            background: linear-gradient(135deg, #f05032 0%, #333 100%);
        }

        .software-icon.sql {
            background: linear-gradient(135deg, #00758f 0%, #f29111 100%);
        }

        .software-icon.docker {
            background: linear-gradient(135deg, #2496ed 0%, #1d63ed 100%);
        }

        .software-icon.blender {
            background: linear-gradient(135deg, #f5792a 0%, #265787 100%);
        }

        .software-icon.arduino {
            background: linear-gradient(135deg, #00979d 0%, #005c5f 100%);
        }

        .software-icon.mediaencoder {
            background: linear-gradient(135deg, #cc8eff 0%, #9999ff 100%);
        }

        .software-icon.nodejs {
            background: linear-gradient(135deg, #68a063 0%, #3c873a 100%);
        }

        .software-icon.postman {
            background: linear-gradient(135deg, #ff6c37 0%, #ff4526 100%);
        }

        .software-icon.notion {
            background: linear-gradient(135deg, #ffffff 0%, #c4c4c4 100%);
            color: #000 !important;
        }

        .software-item span {
            font-size: 0.9rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .skill-wave-card {
                width: 100px;
                height: 120px;
            }

            .skill-wave-content i {
                font-size: 1.8rem;
            }

            .skill-name {
                font-size: 0.75rem;
            }

            .software-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
   ODRA PREMIUM SECURITY BADGE - BLUE/RED THEME
   ============================================ */
        .odra-premium-badge {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: linear-gradient(135deg,
                    rgba(10, 10, 20, 0.95) 0%,
                    rgba(20, 20, 40, 0.9) 50%,
                    rgba(15, 15, 30, 0.95) 100%);
            border-radius: 16px;
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(59, 130, 246, 0.15),
                0 0 15px rgba(239, 68, 68, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .odra-glow-ring {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg,
                    rgba(59, 130, 246, 0.6),
                    rgba(239, 68, 68, 0.4),
                    rgba(59, 130, 246, 0.6),
                    rgba(239, 68, 68, 0.4));
            border-radius: 18px;
            z-index: -1;
            animation: odraGlowRotate 10s linear infinite;
            background-size: 300% 300%;
        }

        @keyframes odraGlowRotate {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .odra-inner-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .odra-shield-container {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .odra-shield-glow {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
            border-radius: 50%;
            animation: shieldGlow 2s ease-in-out infinite;
        }

        @keyframes shieldGlow {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.3);
                opacity: 0.8;
            }
        }

        .odra-shield {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            box-shadow:
                0 4px 15px rgba(59, 130, 246, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
            animation: shieldFloat 3s ease-in-out infinite;
        }

        @keyframes shieldFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }
        }

        .odra-shield i {
            font-size: 1.1rem;
            color: white;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .odra-pulse-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(59, 130, 246, 0.6);
            border-radius: 50%;
            animation: pulseRing 2s ease-out infinite;
        }

        @keyframes pulseRing {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(1.8);
                opacity: 0;
            }
        }

        .odra-content {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .odra-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .odra-logo {
            font-size: 1.1rem;
            font-weight: 800;
            color: #3b82f6;
            letter-spacing: 2px;
            text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
            font-family: 'Poppins', sans-serif;
        }

        .odra-version {
            font-size: 0.6rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.6);
            background: rgba(59, 130, 246, 0.2);
            padding: 0.1rem 0.4rem;
            border-radius: 6px;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .odra-status-line {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .odra-status-dot {
            width: 6px;
            height: 6px;
            background: #3b82f6;
            border-radius: 50%;
            animation: statusBlink 1.5s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
        }

        @keyframes statusBlink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        .odra-status-text {
            font-size: 0.65rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 0.5px;
        }

        .odra-security-indicators {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }

        .odra-indicator {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.2rem 0.5rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .odra-indicator:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(34, 197, 94, 0.3);
        }

        .odra-indicator i {
            font-size: 0.55rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .odra-indicator span {
            font-size: 0.55rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .odra-indicator.active {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.4);
        }

        .odra-indicator.active i,
        .odra-indicator.active span {
            color: #ef4444;
        }

        /* ============================================
   BRAND CONTAINER ENHANCED
   ============================================ */
        .brand-container-enhanced {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.5rem 0;
        }

        .brand-top-line {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(59, 130, 246, 0.5),
                    rgba(239, 68, 68, 0.5),
                    transparent);
            border-radius: 1px;
            animation: brandLineGlow 3s ease-in-out infinite;
        }

        @keyframes brandLineGlow {

            0%,
            100% {
                opacity: 0.5;
            }

            50% {
                opacity: 1;
            }
        }

        .brand-main {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .brand-info {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }

        .brand-tagline {
            font-size: 0.65rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.5px;
        }

        /* ============================================
   CODE TYPING BAR - TERMINAL STYLE
   ============================================ */
        .code-typing-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            padding: 0.35rem 0.7rem;
            background: linear-gradient(135deg,
                    rgba(15, 15, 25, 0.9) 0%,
                    rgba(25, 25, 40, 0.85) 100%);
            border-radius: 8px;
            border: 1px solid rgba(99, 102, 241, 0.3);
            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
            font-size: 0.6rem;
            position: relative;
            overflow: hidden;
        }

        .code-typing-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(99, 102, 241, 0.1),
                    transparent);
            animation: codeShimmer 3s ease-in-out infinite;
        }

        @keyframes codeShimmer {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        .code-bracket {
            color: #f59e0b;
            font-weight: 700;
            font-size: 0.7rem;
        }

        .code-typing-text {
            display: flex;
            align-items: center;
            gap: 0.2rem;
        }

        .code-key {
            color: #a78bfa;
            font-weight: 600;
        }

        .code-colon {
            color: rgba(255, 255, 255, 0.5);
        }

        .code-value {
            color: #34d399;
            font-weight: 500;
            min-width: 50px;
        }

        .code-cursor {
            color: #6366f1;
            animation: cursorBlink 0.8s step-end infinite;
            font-weight: 700;
        }

        @keyframes cursorBlink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        /* ============================================
   EVIL EYES - BMW AGGRESSIVE STYLE
   ============================================ */
        .evil-eyes-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 0.4rem;
            perspective: 100px;
        }

        .evil-eye {
            position: relative;
            width: 28px;
            height: 12px;
        }

        /* BMW-Style Angular Eye Shape */
        .eye-outer {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0000 0%, #1a0000 50%, #2a0505 100%);
            clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
            position: relative;
            overflow: visible;
            box-shadow:
                0 0 15px rgba(255, 0, 0, 0.8),
                0 0 30px rgba(255, 30, 0, 0.5),
                0 0 45px rgba(255, 50, 0, 0.3),
                inset 0 0 10px rgba(255, 0, 0, 0.5);
            border: 1px solid rgba(255, 50, 0, 0.7);
            animation: eyePulse 1.5s ease-in-out infinite;
        }

        .right-eye .eye-outer {
            clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 15% 100%);
        }

        @keyframes eyePulse {

            0%,
            100% {
                box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 30, 0, 0.5);
            }

            50% {
                box-shadow: 0 0 25px rgba(255, 0, 0, 1), 0 0 50px rgba(255, 30, 0, 0.8), 0 0 70px rgba(255, 50, 0, 0.4);
            }
        }

        /* Glowing Red Iris */
        .eye-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle,
                    #ff0000 0%,
                    #ff3300 30%,
                    #cc0000 60%,
                    #990000 100%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.08s ease-out;
            box-shadow:
                0 0 10px rgba(255, 0, 0, 1),
                0 0 20px rgba(255, 50, 0, 0.8),
                0 0 30px rgba(255, 100, 0, 0.5);
            animation: irisGlow 0.8s ease-in-out infinite alternate;
        }

        @keyframes irisGlow {
            0% {
                filter: brightness(1);
            }

            100% {
                filter: brightness(1.3);
            }
        }

        /* Dark Vertical Pupil - Like a Demon */
        .eye-pupil {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 6px;
            background: linear-gradient(180deg, #000 0%, #1a0000 50%, #000 100%);
            border-radius: 40%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 3px rgba(0, 0, 0, 1);
        }

        /* Bright Glare Reflection */
        .eye-glare {
            position: absolute;
            top: 1px;
            right: 5px;
            width: 3px;
            height: 2px;
            background: rgba(255, 150, 100, 0.9);
            border-radius: 50%;
            filter: blur(0.5px);
        }

        /* Fire/Heat Effect Under Eyes */
        .eye-flames {
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 10px;
            background: linear-gradient(0deg,
                    transparent 0%,
                    rgba(255, 50, 0, 0.4) 30%,
                    rgba(255, 100, 0, 0.2) 60%,
                    transparent 100%);
            filter: blur(3px);
            animation: fireFlicker 0.15s ease-in-out infinite alternate;
        }

        @keyframes fireFlicker {
            0% {
                opacity: 0.6;
                transform: translateX(-50%) scaleY(0.9) scaleX(0.95);
            }

            100% {
                opacity: 0.9;
                transform: translateX(-50%) scaleY(1.1) scaleX(1.05);
            }
        }

        /* Outer Red Glow */
        .evil-eye::before {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            background: radial-gradient(ellipse, rgba(255, 0, 0, 0.4) 0%, transparent 70%);
            animation: outerGlow 2s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes outerGlow {

            0%,
            100% {
                opacity: 0.6;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.15);
            }
        }

        /* Eyes angled/crossed for scary intimidating look */
        .left-eye {
            transform: rotate(12deg);
        }

        .right-eye {
            transform: rotate(-12deg);
        }

        /* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
        .scroll-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg,
                    #3b82f6 0%,
                    #ef4444 50%,
                    #3b82f6 100%);
            background-size: 200% 100%;
            animation: progressGradient 3s linear infinite;
            z-index: 10001;
            box-shadow:
                0 0 10px rgba(59, 130, 246, 0.5),
                0 0 20px rgba(239, 68, 68, 0.3);
            transition: width 0.1s ease-out;
        }

        @keyframes progressGradient {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        /* ============================================
   NAVBAR BUTTONS ROW ALIGNMENT
   ============================================ */
        .navbar-buttons-row {
            display: flex;
            gap: 0.5rem;
            width: 100%;
        }

        .navbar-buttons-row .navbar-shop-btn,
        .navbar-buttons-row .navbar-cta {
            flex: 1;
            justify-content: center;
            min-width: 0;
        }

        .navbar-actions-stack {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 280px;
        }

        /* ============================================
   3D GALAXY CONTACT SECTION
   Three.js ile 3D uzay temalı iletişim bölümü
   © 2026 Ömer Berat Keser
   ============================================ */

        .galaxy-contact-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 6rem 0;
            background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0f0f2d 100%);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .galaxy-canvas-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .galaxy-canvas-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        .galaxy-header {
            position: relative;
            z-index: 10;
            text-align: center;
            margin-bottom: 2rem;
            pointer-events: none;
        }

        .galaxy-title {
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ff6030 0%, #f9d423 50%, #ff6030 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: galaxyTitleShine 4s ease-in-out infinite;
            margin-bottom: 1rem;
            text-shadow: 0 0 30px rgba(255, 96, 48, 0.3);
        }

        .title-icon {
            display: inline-block;
            font-size: 2.5rem;
            margin-right: 0.5rem;
            animation: floatIcon 3s ease-in-out infinite;
        }

        @keyframes floatIcon {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes galaxyTitleShine {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        .galaxy-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 400;
            letter-spacing: 0.5px;
        }

        .planet-info-cards {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            pointer-events: none;
        }

        .planet-info-card {
            position: absolute;
            transform: translate(-50%, -100%) scale(0.9);
            margin-top: -30px;
            width: 240px;
            background: rgba(10, 10, 30, 0.9);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 1.8rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            box-shadow:
                0 25px 60px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .planet-info-card.visible {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -100%) scale(1);
            pointer-events: auto;
        }

        .planet-info-card .card-glow {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, rgba(255, 96, 48, 0.3), rgba(79, 70, 229, 0.3));
            border-radius: 26px;
            z-index: -1;
            opacity: 0;
            filter: blur(15px);
            transition: opacity 0.4s ease;
        }

        .planet-info-card:hover .card-glow {
            opacity: 1;
        }

        .planet-info-card:hover {
            transform: translate(-50%, -100%) scale(1.05);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.6),
                0 0 50px rgba(var(--planet-color-rgb, 255, 96, 48), 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .planet-info-card .card-content {
            text-align: center;
        }

        .planet-info-card .card-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 1rem;
            background: var(--planet-color, linear-gradient(135deg, #ff6030, #f9d423));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .planet-info-card .card-icon i {
            font-size: 1.8rem;
            color: white;
        }

        .planet-info-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.5rem;
        }

        .planet-info-card p {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .planet-info-card .card-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: var(--planet-color, linear-gradient(135deg, #ff6030, #f9d423));
            border-radius: 25px;
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .planet-info-card .card-link:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .planet-info-card .card-link i {
            font-size: 0.75rem;
            transition: transform 0.3s ease;
        }

        .planet-info-card .card-link:hover i {
            transform: translateX(5px);
        }

        .galaxy-footer {
            position: relative;
            z-index: 10;
            margin-top: auto;
            padding-top: 3rem;
            text-align: center;
            pointer-events: none;
        }

        .galaxy-footer p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 400;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .galaxy-title {
                font-size: 2.5rem;
            }

            .planet-info-card {
                width: 200px;
                padding: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .galaxy-contact-section {
                padding: 4rem 0;
            }

            .galaxy-title {
                font-size: 2rem;
            }

            .title-icon {
                font-size: 1.8rem;
            }

            .galaxy-subtitle {
                font-size: 1rem;
                padding: 0 1rem;
            }

            .planet-info-card {
                width: 180px;
                padding: 1rem;
            }

            .planet-info-card .card-icon {
                width: 50px;
                height: 50px;
            }

            .planet-info-card .card-icon i {
                font-size: 1.5rem;
            }

            .planet-info-card h3 {
                font-size: 1.1rem;
            }

            .planet-info-card p {
                font-size: 0.8rem;
            }
        }

        @media (max-width: 576px) {
            .galaxy-title {
                font-size: 1.6rem;
            }

            .title-icon {
                font-size: 1.5rem;
            }

            .planet-info-card {
                width: 160px;
                padding: 0.8rem;
            }

            .planet-info-card .card-icon {
                width: 45px;
                height: 45px;
            }

            .planet-info-card h3 {
                font-size: 1rem;
            }

            .galaxy-footer p {
                font-size: 0.85rem;
                padding: 0 1rem;
            }
        }

        /* ============================================
   3D SPACE CONTACT SECTION - PREMIUM DESIGN
   © 2026 Ömer Berat Keser
   ============================================ */

        .space-contact-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 8rem 2rem;
            background: linear-gradient(180deg, #000814 0%, #001d3d 30%, #000814 70%, #000000 100%);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .space-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .space-canvas canvas {
            width: 100% !important;
            height: 100% !important;
        }

        .space-content {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4rem;
        }

        .space-header {
            text-align: center;
        }

        .space-badge {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            background: rgba(79, 70, 229, 0.15);
            border: 1px solid rgba(79, 70, 229, 0.3);
            border-radius: 50px;
            color: #a5b4fc;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 1.5rem;
            backdrop-filter: blur(10px);
        }

        .space-title {
            font-size: 3.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 50%, #818cf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .space-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .contact-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            width: 100%;
            max-width: 1000px;
        }

        .contact-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 2rem 2.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            backdrop-filter: blur(20px);
            text-decoration: none;
            color: white;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .contact-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 60px var(--card-glow, rgba(79, 70, 229, 0.2));
        }

        .card-bg-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .contact-card:hover .card-bg-effect {
            opacity: 1;
        }

        .contact-card .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-card .card-icon i {
            font-size: 1.8rem;
            color: white;
            transition: transform 0.4s ease;
        }

        .contact-card:hover .card-icon i {
            transform: scale(1.15);
        }

        .contact-card .card-info {
            flex: 1;
        }

        .contact-card .card-info h3 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
        }

        .contact-card .card-info p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.5);
            margin: 0;
        }

        .contact-card .card-arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

        .contact-card .card-arrow i {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.4s ease;
        }

        .contact-card:hover .card-arrow {
            background: rgba(255, 255, 255, 0.1);
        }

        .contact-card:hover .card-arrow i {
            color: white;
            transform: translateX(4px);
        }

        /* Platform Colors */
        .instagram-card {
            --card-glow: rgba(225, 48, 108, 0.3);
        }

        .instagram-card .card-icon {
            background: linear-gradient(135deg, #833AB4, #E1306C, #F56040);
        }

        .instagram-card .card-bg-effect {
            background: radial-gradient(circle at 30% 50%, rgba(225, 48, 108, 0.1) 0%, transparent 50%);
        }

        .linkedin-card {
            --card-glow: rgba(10, 102, 194, 0.3);
        }

        .linkedin-card .card-icon {
            background: linear-gradient(135deg, #0077B5, #0A66C2);
        }

        .linkedin-card .card-bg-effect {
            background: radial-gradient(circle at 30% 50%, rgba(10, 102, 194, 0.1) 0%, transparent 50%);
        }

        .bionluk-card {
            --card-glow: rgba(0, 200, 83, 0.3);
        }

        .bionluk-card .card-icon {
            background: linear-gradient(135deg, #00C853, #69F0AE);
        }

        .bionluk-card .card-bg-effect {
            background: radial-gradient(circle at 30% 50%, rgba(0, 200, 83, 0.1) 0%, transparent 50%);
        }

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

        .space-footer p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.4);
        }

        @media (max-width: 992px) {
            .contact-cards-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
            }

            .space-title {
                font-size: 2.8rem;
            }
        }

        @media (max-width: 768px) {
            .space-contact-section {
                padding: 6rem 1.5rem;
            }

            .space-title {
                font-size: 2.2rem;
            }

            .contact-card {
                padding: 1.5rem;
                gap: 1rem;
            }

            .contact-card .card-icon {
                width: 50px;
                height: 50px;
            }

            .contact-card .card-icon i {
                font-size: 1.5rem;
            }

            .contact-card .card-info h3 {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .space-title {
                font-size: 1.8rem;
            }

            .contact-card .card-arrow {
                display: none;
            }
        }

        /* Solar System Header & Legend */
        .solar-header {
            position: absolute;
            top: 2rem;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 100;
            pointer-events: none;
        }

        .solar-badge {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            color: #a5b4fc;
            font-size: 0.9rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
            margin-bottom: 1rem;
        }

        .solar-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 30px rgba(255, 150, 50, 0.3);
        }

        .solar-subtitle {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Planet Legend */
        .planet-legend {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            z-index: 100;
            padding: 1rem 1.2rem;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 16px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.85rem;
            font-weight: 500;
        }

        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .legend-dot.instagram {
            background: linear-gradient(135deg, #E1306C, #F56040);
        }

        .legend-dot.linkedin {
            background: linear-gradient(135deg, #0077B5, #0A66C2);
        }

        .legend-dot.bionluk {
            background: linear-gradient(135deg, #00C853, #69F0AE);
        }

        .space-copyright {
            position: absolute;
            bottom: 0.8rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            padding: 0.6rem 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 30px;
            backdrop-filter: blur(10px);
        }

        .space-copyright p {
            font-size: 0.8rem;
            background: linear-gradient(90deg, #a5b4fc, #818cf8, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
            font-weight: 600;
            letter-spacing: 0.5px;
        }


        .planet-tooltip {
            position: absolute;
            z-index: 1000;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .planet-tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .planet-tooltip .tooltip-content {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: rgba(10, 10, 20, 0.95);
            border: 1px solid var(--tooltip-color, rgba(255, 255, 255, 0.2));
            border-radius: 16px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--tooltip-color), 0.2);
        }

        .planet-tooltip .tooltip-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: var(--tooltip-color, #4f46e5);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .planet-tooltip .tooltip-icon i {
            font-size: 1.5rem;
            color: white;
        }

        .planet-tooltip .tooltip-text h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
            margin: 0 0 0.25rem 0;
        }

        .planet-tooltip .tooltip-text p {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
            margin: 0;
        }


        @media (max-width: 768px) {
            .solar-title {
                font-size: 1.8rem;
            }

            .solar-header {
                top: 1rem;
            }

            .planet-legend {
                gap: 1rem;
                padding: 0.8rem 1.2rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .legend-item {
                font-size: 0.75rem;
            }
        }

        /* 
   ════════════════════════════════════════════════
   
   Designer & Developer: Ömer Berat Keser (Karagan)
   Website: omerberatkeser.xyz | omerberatkeser.com
   Year: 2025
   
   ⚠️ COPYRIGHT NOTICE:
   This design is protected by copyright law.
   Unauthorized copying or distribution is prohibited.
   
   ════════════════════════════════════════════════
*/

        .cw-luxury {
            padding: 4rem 0;
            position: relative;
            z-index: 10;
            background: transparent
        }

        .cw-premium-card {
            position: relative;
            background: linear-gradient(165deg, #0d0d14 0%, #1a1a2e 50%, #0f0f1a 100%);
            border-radius: 20px;
            padding: 2.5rem 3rem;
            overflow: hidden;
            border: 2px solid rgba(251, 191, 36, 0.3);
            box-shadow: 0 0 60px rgba(251, 191, 36, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5)
        }

        #cwThreeCanvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.4
        }

        .cw-gold-particles {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
            pointer-events: none
        }

        .cw-grid-overlay {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(251, 191, 36, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 191, 36, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none
        }

        .cw-corner {
            position: absolute;
            width: 50px;
            height: 50px;
            pointer-events: none
        }

        .cw-corner-tl {
            top: 0;
            left: 0;
            border-top: 3px solid #fbbf24;
            border-left: 3px solid #fbbf24;
            border-radius: 24px 0 0 0
        }

        .cw-corner-tr {
            top: 0;
            right: 0;
            border-top: 3px solid #fbbf24;
            border-right: 3px solid #fbbf24;
            border-radius: 0 24px 0 0
        }

        .cw-corner-bl {
            bottom: 0;
            left: 0;
            border-bottom: 3px solid #fbbf24;
            border-left: 3px solid #fbbf24;
            border-radius: 0 0 0 24px
        }

        .cw-corner-br {
            bottom: 0;
            right: 0;
            border-bottom: 3px solid #fbbf24;
            border-right: 3px solid #fbbf24;
            border-radius: 0 0 24px 0
        }

        .cw-gold-border {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            padding: 2px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #fbbf24);
            background-size: 300% 300%;
            animation: cwGoldFlow 6s linear infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none
        }

        @keyframes cwGoldFlow {
            0% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }

            100% {
                background-position: 0% 50%
            }
        }

        .cw-header-section {
            position: relative;
            z-index: 5;
            text-align: center;
            margin-bottom: 2rem
        }

        .cw-luxury-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 24px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
            border: 1px solid rgba(251, 191, 36, 0.4);
            border-radius: 50px;
            margin-bottom: 1.5rem
        }

        .cw-luxury-badge i {
            color: #fbbf24;
            font-size: 14px;
            animation: cwCrownFloat 2s ease-in-out infinite
        }

        @keyframes cwCrownFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-3px)
            }
        }

        .cw-luxury-badge span {
            font-size: 0.75rem;
            font-weight: 800;
            color: #fbbf24;
            letter-spacing: 3px;
            text-transform: uppercase
        }

        .cw-main-headline {
            margin-bottom: 1rem
        }

        .cw-gold-text {
            display: block;
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 40px rgba(251, 191, 36, 0.3)
        }

        .cw-white-text {
            display: block;
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 900;
            color: #fff;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5)
        }

        .cw-gold-line {
            width: 120px;
            height: 3px;
            margin: 1.5rem auto;
            background: linear-gradient(90deg, transparent, #fbbf24, #f59e0b, #fbbf24, transparent);
            border-radius: 2px
        }

        .cw-subtitle {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.6);
            max-width: 500px;
            margin: 0 auto
        }

        .cw-content-grid {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2rem
        }

        .cw-3d-showcase {
            display: flex;
            justify-content: center;
            flex-shrink: 0
        }

        .cw-hexagon-wrap {
            position: relative;
            width: 120px;
            height: 120px
        }

        .cw-hexagon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
            border: 2px solid rgba(251, 191, 36, 0.5);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: cwHexRotate 20s linear infinite
        }

        @keyframes cwHexRotate {
            to {
                transform: translate(-50%, -50%) rotate(360deg)
            }
        }

        .cw-hexagon i {
            font-size: 2rem;
            color: #fbbf24;
            text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
            animation: cwHexRotate 20s linear infinite reverse
        }

        .cw-hex-glow {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 70%);
            filter: blur(20px);
            animation: cwGlowPulse 3s ease-in-out infinite
        }

        @keyframes cwGlowPulse {

            0%,
            100% {
                opacity: 0.5;
                transform: scale(1)
            }

            50% {
                opacity: 0.8;
                transform: scale(1.2)
            }
        }

        .cw-orbit-dots {
            position: absolute;
            inset: -15px;
            border: 1px dashed rgba(251, 191, 36, 0.3);
            border-radius: 50%;
            animation: cwOrbitSpin 15s linear infinite
        }

        @keyframes cwOrbitSpin {
            to {
                transform: rotate(360deg)
            }
        }

        .cw-orbit-dots span {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fbbf24;
            border-radius: 50%;
            box-shadow: 0 0 10px #fbbf24
        }

        .cw-orbit-dots span:nth-child(1) {
            top: -4px;
            left: 50%;
            transform: translateX(-50%)
        }

        .cw-orbit-dots span:nth-child(2) {
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%)
        }

        .cw-orbit-dots span:nth-child(3) {
            left: -4px;
            top: 50%;
            transform: translateY(-50%)
        }

        .cw-orbit-dots span:nth-child(4) {
            right: -4px;
            top: 50%;
            transform: translateY(-50%)
        }

        .cw-info-panel {
            position: relative;
            flex: 1
        }

        .cw-coming-banner {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 28px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 16px;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden
        }

        .cw-pulse-ring {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border: 2px solid rgba(251, 191, 36, 0.4);
            border-radius: 50%;
            animation: cwPulseRing 2s ease-out infinite
        }

        @keyframes cwPulseRing {
            0% {
                transform: translateY(-50%) scale(0.8);
                opacity: 1
            }

            100% {
                transform: translateY(-50%) scale(1.5);
                opacity: 0
            }
        }

        .cw-coming-banner>i {
            color: #fbbf24;
            font-size: 24px;
            position: relative;
            z-index: 2
        }

        .cw-banner-text {
            flex: 1
        }

        .cw-status-live {
            display: inline-block;
            padding: 4px 12px;
            background: #fbbf24;
            color: #0a0a0f;
            font-size: 0.7rem;
            font-weight: 800;
            border-radius: 4px;
            letter-spacing: 2px;
            margin-bottom: 6px
        }

        .cw-banner-text p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            margin: 0
        }

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

        .cw-feat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(251, 191, 36, 0.15);
            border-radius: 12px;
            transition: all 0.3s
        }

        .cw-feat-item i {
            color: #fbbf24;
            font-size: 18px
        }

        .cw-feat-item span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8rem;
            font-weight: 600
        }

        .cw-feat-item:hover {
            background: rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.4);
            transform: translateY(-3px)
        }

        .cw-stats-section {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: stretch;
            gap: 1rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(251, 191, 36, 0.15);
            flex-wrap: wrap
        }

        .cw-stat-box {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 150px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(251, 191, 36, 0.02));
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 12px;
            transition: all 0.3s
        }

        .cw-stat-box:hover {
            background: rgba(251, 191, 36, 0.08);
            border-color: rgba(251, 191, 36, 0.5);
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.15)
        }

        .cw-stat-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cw-stat-icon i {
            color: #0a0a0f;
            font-size: 18px
        }

        .cw-stat-data {
            display: flex;
            flex-direction: column
        }

        .cw-stat-num {
            font-size: 1.8rem;
            font-weight: 900;
            color: #fff
        }

        .cw-stat-label {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px
        }

        .cw-status-indicator {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 24px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
            border: 2px solid rgba(251, 191, 36, 0.4);
            border-radius: 20px;
            min-width: 140px;
            overflow: hidden
        }

        .cw-status-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(251, 191, 36, 0.2), transparent 70%);
            animation: cwStatusGlow 2s ease-out infinite
        }

        @keyframes cwStatusGlow {
            0% {
                transform: scale(0.8);
                opacity: 1
            }

            100% {
                transform: scale(1.5);
                opacity: 0
            }
        }

        .cw-status-indicator>i {
            position: relative;
            z-index: 2;
            font-size: 1.5rem;
            color: #fbbf24;
            animation: cwRocketUp 2s ease-in-out infinite
        }

        @keyframes cwRocketUp {

            0%,
            100% {
                transform: translateY(0) rotate(-15deg)
            }

            50% {
                transform: translateY(-8px) rotate(15deg)
            }
        }

        .cw-status-indicator>span {
            position: relative;
            z-index: 2;
            font-size: 0.7rem;
            font-weight: 700;
            color: #fbbf24;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center
        }

        @media(max-width:992px) {
            .cw-content-grid {
                grid-template-columns: 1fr;
                text-align: center
            }

            .cw-3d-showcase {
                justify-content: center
            }

            .cw-features-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .cw-stats-section {
                flex-wrap: wrap;
                justify-content: center
            }
        }

        @media(max-width:576px) {
            .cw-premium-card {
                padding: 2rem
            }

            .cw-gold-text {
                font-size: 1.8rem
            }

            .cw-white-text {
                font-size: 2.2rem
            }

            .cw-features-grid {
                grid-template-columns: 1fr 1fr
            }

            .cw-stats-section {
                flex-direction: column
            }

            .cw-stat-box {
                width: 100%;
                justify-content: center
            }
        }

        .mcw-card {
            position: relative;
            background: linear-gradient(165deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.15));
            border-radius: 32px;
            padding: 3rem 3.5rem;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(79, 70, 229, 0.25), 0 10px 30px rgba(139, 92, 246, 0.2), inset 0 0 100px rgba(99, 102, 241, 0.05);
            border: 2px solid rgba(99, 102, 241, 0.3);
            backdrop-filter: blur(10px)
        }

        .mcw-particles-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.4
        }

        .mcw-gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            pointer-events: none;
            opacity: 0.7
        }

        .mcw-orb-a {
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            top: -120px;
            left: -120px;
            animation: mcwOrbMove 10s ease-in-out infinite
        }

        .mcw-orb-b {
            width: 280px;
            height: 280px;
            background: linear-gradient(135deg, #22d3ee, #06b6d4);
            bottom: -100px;
            right: -80px;
            animation: mcwOrbMove 12s ease-in-out infinite reverse
        }

        .mcw-orb-c {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #f472b6, #ec4899);
            top: 40%;
            right: 15%;
            animation: mcwOrbMove 15s ease-in-out infinite 3s
        }

        @keyframes mcwOrbMove {

            0%,
            100% {
                transform: translate(0, 0) scale(1)
            }

            50% {
                transform: translate(40px, -30px) scale(1.15)
            }
        }

        .mcw-shimmer {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            animation: mcwShimmer 4s ease-in-out infinite
        }

        @keyframes mcwShimmer {
            0% {
                left: -100%
            }

            50%,
            100% {
                left: 100%
            }
        }

        .mcw-grid-pattern {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
            background-size: 30px 30px
        }

        .mcw-scan-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent, #6366f1, #a855f7, transparent);
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
            animation: mcwScanMove 5s ease-in-out infinite
        }

        @keyframes mcwScanMove {
            0% {
                top: 0;
                opacity: 0
            }

            5% {
                opacity: 1
            }

            95% {
                opacity: 1
            }

            100% {
                top: calc(100% - 4px);
                opacity: 0
            }
        }

        .mcw-neon-border {
            position: absolute;
            inset: 0;
            border-radius: 32px;
            padding: 3px;
            background: linear-gradient(135deg, #6366f1, #a855f7, #22d3ee, #f472b6, #6366f1);
            background-size: 400% 400%;
            animation: mcwNeonAnim 6s linear infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none
        }

        @keyframes mcwNeonAnim {
            0% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }

            100% {
                background-position: 0% 50%
            }
        }

        .mcw-header {
            position: relative;
            z-index: 5;
            text-align: center;
            margin-bottom: 2.5rem
        }

        .mcw-mega-title {
            position: relative
        }

        .mcw-title-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 150px;
            background: radial-gradient(ellipse, rgba(99, 102, 241, 0.2), transparent 70%);
            filter: blur(40px);
            animation: mcwTitleGlow 3s ease-in-out infinite alternate
        }

        @keyframes mcwTitleGlow {
            0% {
                opacity: 0.5;
                transform: translate(-50%, -50%) scale(1)
            }

            100% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1.2)
            }
        }

        .mcw-badge-row {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 1rem
        }

        .mcw-badge-new,
        .mcw-badge-premium {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            animation: mcwBadgeBounce 2s ease-in-out infinite
        }

        .mcw-badge-new {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
            box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4)
        }

        .mcw-badge-new i {
            animation: mcwFireFlicker 0.8s ease-in-out infinite
        }

        @keyframes mcwFireFlicker {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.3)
            }
        }

        .mcw-badge-premium {
            background: linear-gradient(135deg, #a855f7, #7c3aed);
            color: #fff;
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
            animation-delay: 0.5s
        }

        @keyframes mcwBadgeBounce {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-4px)
            }
        }

        .mcw-main-title {
            position: relative;
            z-index: 2
        }

        .mcw-title-small {
            display: block;
            font-size: 1.4rem;
            font-weight: 800;
            color: #4f46e5;
            text-transform: uppercase;
            letter-spacing: 6px;
            margin-bottom: 0.75rem;
            text-shadow: 0 2px 4px rgba(79, 70, 229, 0.2)
        }

        @keyframes mcwTextShine {
            0% {
                background-position: 0
            }

            100% {
                background-position: 200%
            }
        }

        .mcw-title-big {
            display: block;
            font-size: clamp(3rem, 7vw, 5rem);
            font-weight: 900;
            color: #1e293b;
            line-height: 1.1
        }

        .mcw-title-big em {
            font-style: normal;
            color: #6366f1;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        @keyframes mcwGradientFlow {
            0% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }

            100% {
                background-position: 0% 50%
            }
        }

        .mcw-title-underline {
            width: 200px;
            height: 4px;
            margin: 1.5rem auto 0;
            background: linear-gradient(90deg, transparent, #6366f1, #a855f7, #22d3ee, transparent);
            border-radius: 2px;
            animation: mcwUnderlineGlow 2s ease-in-out infinite alternate
        }

        @keyframes mcwUnderlineGlow {
            0% {
                box-shadow: 0 0 10px rgba(99, 102, 241, 0.3)
            }

            100% {
                box-shadow: 0 0 25px rgba(99, 102, 241, 0.6)
            }
        }

        .mcw-body {
            position: relative;
            z-index: 5;
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 3rem;
            align-items: center;
            margin-bottom: 2.5rem
        }

        .mcw-left-col {
            display: flex;
            justify-content: center
        }

        .mcw-floating-cube {
            position: relative;
            width: 160px;
            height: 160px;
            perspective: 600px
        }

        .mcw-cube-3d {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70px;
            height: 70px;
            transform-style: preserve-3d;
            transform: translate(-50%, -50%) rotateX(-15deg) rotateY(25deg);
            animation: mcwCubeRotate 15s linear infinite
        }

        @keyframes mcwCubeRotate {
            to {
                transform: translate(-50%, -50%) rotateX(345deg) rotateY(385deg)
            }
        }

        .mcw-face {
            position: absolute;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: rgba(99, 102, 241, 0.8);
            border: 2px solid rgba(99, 102, 241, 0.4);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
            backdrop-filter: blur(8px)
        }

        .mcw-front {
            transform: translateZ(35px)
        }

        .mcw-back {
            transform: rotateY(180deg) translateZ(35px)
        }

        .mcw-left {
            transform: rotateY(-90deg) translateZ(35px)
        }

        .mcw-right {
            transform: rotateY(90deg) translateZ(35px)
        }

        .mcw-top {
            transform: rotateX(90deg) translateZ(35px)
        }

        .mcw-bottom {
            transform: rotateX(-90deg) translateZ(35px)
        }

        .mcw-orbit-ring {
            position: absolute;
            inset: -25px;
            border: 2px dashed rgba(99, 102, 241, 0.25);
            border-radius: 50%;
            animation: mcwOrbit 10s linear infinite
        }

        @keyframes mcwOrbit {
            to {
                transform: rotate(360deg)
            }
        }

        .mcw-planet {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            box-shadow: 0 0 20px currentColor
        }

        .mcw-planet:nth-child(1) {
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            background: #22d3ee;
            color: #22d3ee
        }

        .mcw-planet:nth-child(2) {
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            background: #a855f7;
            color: #a855f7
        }

        .mcw-planet:nth-child(3) {
            top: 50%;
            right: -7px;
            transform: translateY(-50%);
            background: #f472b6;
            color: #f472b6
        }

        .mcw-right-col {
            position: relative;
            z-index: 2
        }

        .mcw-description {
            font-size: 1.15rem;
            color: #1e293b;
            line-height: 1.9;
            margin-bottom: 1.25rem;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5)
        }

        .mcw-description strong {
            color: #6366f1;
            font-weight: 700
        }

        .mcw-coming-box {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 24px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
            border: 2px solid rgba(99, 102, 241, 0.4);
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
            border-radius: 16px;
            margin-bottom: 1.5rem;
            overflow: hidden
        }

        .mcw-pulse-dot {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background: #22d3ee;
            border-radius: 50%;
            animation: mcwDotPulse 1.5s ease-out infinite
        }

        .mcw-pulse-dot::after {
            content: '';
            position: absolute;
            inset: -5px;
            border: 2px solid #22d3ee;
            border-radius: 50%;
            animation: mcwDotRing 1.5s ease-out infinite
        }

        @keyframes mcwDotPulse {

            0%,
            100% {
                opacity: 1;
                transform: translateY(-50%) scale(1)
            }

            50% {
                opacity: 0.6;
                transform: translateY(-50%) scale(0.8)
            }
        }

        @keyframes mcwDotRing {
            0% {
                transform: scale(1);
                opacity: 0.8
            }

            100% {
                transform: scale(2);
                opacity: 0
            }
        }

        .mcw-coming-box>i {
            color: #6366f1;
            font-size: 18px;
            margin-left: 20px;
            animation: mcwBoltZap 1.5s ease-in-out infinite
        }

        @keyframes mcwBoltZap {

            0%,
            100% {
                transform: scale(1);
                opacity: 1
            }

            50% {
                transform: scale(1.3);
                opacity: 0.7
            }
        }

        .mcw-coming-box>span {
            color: #475569;
            font-weight: 600;
            font-size: 0.95rem
        }

        .mcw-features-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .mcw-feature {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)
        }

        .mcw-feature i {
            color: #6366f1;
            font-size: 14px
        }

        .mcw-feature:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
            border-color: rgba(99, 102, 241, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15)
        }

        .mcw-footer {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(99, 102, 241, 0.1)
        }

        .mcw-stats-row {
            display: flex;
            gap: 1.5rem;
            flex: 1
        }

        .mcw-stat-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 16px;
            flex: 1;
            padding: 20px 24px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 20px;
            transition: all 0.4s;
            overflow: hidden
        }

        .mcw-stat-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(99, 102, 241, 0.08), transparent 70%);
            opacity: 0;
            transition: opacity 0.3s
        }

        .mcw-stat-item:hover .mcw-stat-glow {
            opacity: 1
        }

        .mcw-stat-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.2);
            border-color: rgba(99, 102, 241, 0.4)
        }

        .mcw-stat-icon-wrap {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3)
        }

        .mcw-stat-icon-wrap i {
            color: #fff;
            font-size: 20px
        }

        .mcw-stat-info {
            display: flex;
            flex-direction: column
        }

        .mcw-val {
            font-size: 1.8rem;
            font-weight: 900;
            background: linear-gradient(135deg, #1e293b, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .mcw-lbl {
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600
        }

        .mcw-status-badge {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 24px 32px;
            background: linear-gradient(145deg, rgba(34, 211, 238, 0.1), rgba(6, 182, 212, 0.05));
            border: 2px solid rgba(34, 211, 238, 0.4);
            border-radius: 24px;
            overflow: hidden;
            min-width: 150px
        }

        .mcw-status-anim {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(34, 211, 238, 0.15), transparent 70%);
            animation: mcwStatusPulse 2s ease-out infinite
        }

        @keyframes mcwStatusPulse {
            0% {
                transform: scale(0.8);
                opacity: 1
            }

            100% {
                transform: scale(1.8);
                opacity: 0
            }
        }

        .mcw-status-badge>i {
            position: relative;
            z-index: 2;
            font-size: 2rem;
            color: #06b6d4;
            animation: mcwRocketFly 2s ease-in-out infinite
        }

        @keyframes mcwRocketFly {

            0%,
            100% {
                transform: translateY(0) rotate(-15deg)
            }

            50% {
                transform: translateY(-10px) rotate(15deg)
            }
        }

        .mcw-status-badge>span {
            position: relative;
            z-index: 2;
            font-size: 0.8rem;
            font-weight: 700;
            color: #0891b2;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center
        }

        @media(max-width:992px) {
            .mcw-body {
                grid-template-columns: 1fr;
                text-align: center
            }

            .mcw-left-col {
                justify-content: center
            }

            .mcw-features-row {
                justify-content: center
            }

            .mcw-footer {
                flex-direction: column
            }

            .mcw-stats-row {
                flex-wrap: wrap;
                justify-content: center
            }
        }

        @media(max-width:576px) {
            .mcw-card {
                padding: 2rem 1.5rem
            }

            .mcw-title-big {
                font-size: 2rem
            }

            .mcw-floating-cube {
                width: 120px;
                height: 120px
            }

            .mcw-stats-row {
                flex-direction: column
            }

            .mcw-stat-item {
                justify-content: center
            }
        }

        .cw-compact {
            padding: 3rem 0;
            position: relative;
            z-index: 10
        }

        .cw-glass-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 2rem 2.5rem;
            border: 1px solid rgba(99, 102, 241, 0.15);
            box-shadow: 0 10px 40px rgba(79, 70, 229, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05);
            text-align: center
        }

        .cw-card-header {
            margin-bottom: 1.5rem
        }

        .cw-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 20px;
            letter-spacing: 1px;
            margin-bottom: 0.75rem
        }

        .cw-badge i {
            font-size: 10px
        }

        .cw-title {
            font-size: clamp(1.5rem, 4vw, 2.2rem);
            font-weight: 800;
            color: #1e293b;
            margin: 0 0 0.5rem
        }

        .cw-title span {
            background: linear-gradient(135deg, #6366f1, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-desc {
            color: #64748b;
            font-size: 0.95rem;
            margin: 0
        }

        .cw-coming-box {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.05));
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 12px;
            margin-bottom: 1.5rem;
            text-align: left
        }

        .cw-coming-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .cw-coming-icon i {
            color: #fff;
            font-size: 16px
        }

        .cw-coming-text {
            flex: 1
        }

        .cw-soon-badge {
            display: inline-block;
            padding: 3px 10px;
            background: #f59e0b;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            border-radius: 4px;
            letter-spacing: 1px;
            margin-bottom: 4px
        }

        .cw-coming-text p {
            color: #475569;
            font-size: 0.85rem;
            margin: 0
        }

        .cw-features {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap
        }

        .cw-feat {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: #fff;
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 8px;
            font-size: 0.8rem;
            color: #334155;
            font-weight: 600;
            transition: all 0.3s
        }

        .cw-feat i {
            color: #6366f1;
            font-size: 12px
        }

        .cw-feat:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15)
        }

        .cw-stats {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap
        }

        .cw-stat {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: #fff;
            border: 1px solid rgba(99, 102, 241, 0.1);
            border-radius: 12px;
            transition: all 0.3s
        }

        .cw-stat:hover {
            border-color: #6366f1;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.12)
        }

        .cw-stat-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cw-stat-icon i {
            color: #fff;
            font-size: 14px
        }

        .cw-stat-val {
            font-size: 1.3rem;
            font-weight: 800;
            color: #1e293b
        }

        .cw-stat-lbl {
            font-size: 0.7rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px
        }

        @media(max-width:768px) {
            .cw-glass-card {
                padding: 1.5rem
            }

            .cw-features {
                gap: 0.5rem
            }

            .cw-feat {
                padding: 6px 10px;
                font-size: 0.75rem
            }

            .cw-stats {
                flex-direction: column;
                align-items: center
            }

            .cw-stat {
                width: 100%;
                max-width: 250px;
                justify-content: center
            }
        }

        .cw-ultra {
            position: relative;
            padding: 4rem 0;
            overflow: hidden;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e0e7ff 50%, #f1f5f9 75%, #f8fafc 100%);
            isolation: isolate;
            z-index: 1
        }

        .cw-ultra canvas,
        .cw-ultra .particles-js-canvas-el,
        #clientwork canvas {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important
        }

        .cw-bg-effects {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: -1
        }

        .cw-ultra::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.08), transparent),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168, 85, 247, 0.06), transparent),
                radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34, 211, 238, 0.05), transparent);
            pointer-events: none;
            z-index: -1
        }

        .cw-orb {
            display: none
        }

        .cw-orb-1 {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            top: -150px;
            left: -100px;
            animation: cwOrbFloat 15s ease-in-out infinite
        }

        .cw-orb-2 {
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, #22d3ee, #06b6d4);
            bottom: -100px;
            right: -100px;
            animation: cwOrbFloat 18s ease-in-out infinite reverse
        }

        .cw-orb-3 {
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, #f472b6, #ec4899);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: cwOrbFloat 20s ease-in-out infinite 2s
        }

        @keyframes cwOrbFloat {

            0%,
            100% {
                transform: translate(0, 0) scale(1)
            }

            50% {
                transform: translate(30px, -30px) scale(1.1)
            }
        }

        #cwParticles {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%
        }

        .cw-hero-content {
            text-align: center;
            position: relative;
            z-index: 5;
            margin-bottom: 3rem
        }

        .cw-label-row {
            margin-bottom: 1rem
        }

        .cw-premium-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            color: #6366f1;
            letter-spacing: 2px
        }

        .cw-premium-label i {
            color: #f59e0b;
            animation: cwGemPulse 2s ease-in-out infinite
        }

        @keyframes cwGemPulse {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.2)
            }
        }

        .cw-mega-title {
            margin-bottom: 1.5rem
        }

        .cw-line {
            display: block;
            font-weight: 900;
            line-height: 1.1
        }

        .cw-line-1 {
            font-size: clamp(2.5rem, 8vw, 5rem);
            color: #1e293b
        }

        .cw-line-2 {
            font-size: clamp(3rem, 10vw, 6rem);
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-hero-desc {
            font-size: 1.1rem;
            color: #64748b;
            max-width: 500px;
            margin: 0 auto 2rem
        }

        .cw-countdown-wrapper {
            display: inline-block;
            padding: 1.5rem 3rem;
            background: #f8fafc;
            border-radius: 20px;
            border: 1px solid rgba(99, 102, 241, 0.15);
            box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1)
        }

        .cw-countdown-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            color: #6366f1;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .cw-countdown-label i {
            color: #f59e0b;
            animation: cwRocketBounce 2s ease-in-out infinite
        }

        @keyframes cwRocketBounce {

            0%,
            100% {
                transform: translateY(0) rotate(-10deg)
            }

            50% {
                transform: translateY(-5px) rotate(10deg)
            }
        }

        .cw-countdown {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem
        }

        .cw-time-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-width: 60px
        }

        .cw-num {
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, #1e293b, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-unit {
            font-size: 0.65rem;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600
        }

        .cw-time-sep {
            font-size: 2rem;
            font-weight: 700;
            color: #6366f1
        }

        .cw-cards-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
            position: relative;
            z-index: 5
        }

        .cw-feature-card {
            position: relative;
            padding: 2rem 1.5rem;
            background: #f8fafc;
            border-radius: 20px;
            border: 1px solid rgba(99, 102, 241, 0.1);
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden
        }

        .cw-card-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s
        }

        .cw-feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
            border-color: rgba(99, 102, 241, 0.3)
        }

        .cw-feature-card:hover .cw-card-glow {
            opacity: 1
        }

        .cw-card-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3)
        }

        .cw-card-icon i {
            color: #fff;
            font-size: 24px
        }

        .cw-feature-card h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 0.5rem
        }

        .cw-feature-card p {
            font-size: 0.85rem;
            color: #64748b;
            margin: 0
        }

        .cw-stats-strip {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            padding: 2rem;
            background: #f8fafc;
            border-radius: 20px;
            border: 1px solid rgba(99, 102, 241, 0.1);
            position: relative;
            z-index: 5
        }

        .cw-stat-item {
            text-align: center
        }

        .cw-stat-number {
            display: block;
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-stat-text {
            font-size: 0.8rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600
        }

        .cw-stat-divider {
            width: 2px;
            height: 50px;
            background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.3), transparent)
        }

        @media(max-width:992px) {
            .cw-cards-row {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:576px) {
            .cw-cards-row {
                grid-template-columns: 1fr
            }

            .cw-countdown {
                flex-wrap: wrap;
                gap: 1rem
            }

            .cw-time-sep {
                display: none
            }

            .cw-stats-strip {
                flex-direction: column;
                gap: 1.5rem
            }

            .cw-stat-divider {
                width: 50px;
                height: 2px
            }
        }

        .cw-shimmer-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.4), transparent);
            animation: cwShimmerSweep 4s ease-in-out infinite
        }

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

            100% {
                transform: translateX(100%)
            }
        }

        .cw-premium-label {
            animation: cwLabelPulse 3s ease-in-out infinite
        }

        @keyframes cwLabelPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3)
            }

            50% {
                box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.15)
            }
        }

        .cw-line-2 {
            animation: cwTitleShine 4s ease-in-out infinite
        }

        @keyframes cwTitleShine {

            0%,
            100% {
                filter: brightness(1)
            }

            50% {
                filter: brightness(1.15)
            }
        }

        .cw-countdown-wrapper {
            animation: cwCountFloat 6s ease-in-out infinite
        }

        @keyframes cwCountFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        .cw-card-icon {
            animation: cwIconFloat 4s ease-in-out infinite
        }

        .cw-feature-card:nth-child(1) .cw-card-icon {
            animation-delay: 0s
        }

        .cw-feature-card:nth-child(2) .cw-card-icon {
            animation-delay: 0.5s
        }

        .cw-feature-card:nth-child(3) .cw-card-icon {
            animation-delay: 1s
        }

        .cw-feature-card:nth-child(4) .cw-card-icon {
            animation-delay: 1.5s
        }

        @keyframes cwIconFloat {

            0%,
            100% {
                transform: translateY(0) scale(1)
            }

            50% {
                transform: translateY(-6px) scale(1.05)
            }
        }

        .cw-num {
            animation: cwNumPulse 1s ease-in-out infinite
        }

        @keyframes cwNumPulse {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.03)
            }
        }

        .cw-stat-number {
            animation: cwStatGlow 3s ease-in-out infinite
        }

        @keyframes cwStatGlow {

            0%,
            100% {
                text-shadow: 0 0 0 transparent
            }

            50% {
                text-shadow: 0 0 20px rgba(99, 102, 241, 0.3)
            }
        }

        .cw-feature-card {
            animation: cwCardEntry 0.6s ease-out forwards;
            opacity: 0
        }

        .cw-feature-card:nth-child(1) {
            animation-delay: 0.1s
        }

        .cw-feature-card:nth-child(2) {
            animation-delay: 0.2s
        }

        .cw-feature-card:nth-child(3) {
            animation-delay: 0.3s
        }

        .cw-feature-card:nth-child(4) {
            animation-delay: 0.4s
        }

        @keyframes cwCardEntry {
            0% {
                opacity: 0;
                transform: translateY(30px)
            }

            100% {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .cw-premium-section {
            position: relative;
            padding: 5rem 0;
            overflow: hidden;
            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16162a 100%);
            isolation: isolate
        }

        .cw-premium-section canvas {
            display: none !important
        }

        .cw-premium-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none
        }

        .cw-gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.4
        }

        .cw-orb-purple {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, #6366f1, #4f46e5);
            top: -200px;
            left: -100px;
            animation: cwOrbMove 20s ease-in-out infinite
        }

        .cw-orb-blue {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, #22d3ee, #0891b2);
            bottom: -150px;
            right: -100px;
            animation: cwOrbMove 25s ease-in-out infinite reverse
        }

        @keyframes cwOrbMove {

            0%,
            100% {
                transform: translate(0, 0)
            }

            50% {
                transform: translate(50px, -30px)
            }
        }

        .cw-noise-overlay {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.03
        }

        .cw-glass-container {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 3rem;
            border: 1px solid rgba(255, 255, 255, 0.08)
        }

        .cw-neon-border {
            position: absolute;
            inset: -2px;
            border-radius: 26px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #22d3ee, #6366f1);
            background-size: 300% 300%;
            animation: cwNeonFlow 4s ease infinite;
            z-index: -1;
            opacity: 0.6
        }

        @keyframes cwNeonFlow {
            0% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }

            100% {
                background-position: 0% 50%
            }
        }

        .cw-header-area {
            text-align: center;
            margin-bottom: 2.5rem
        }

        .cw-floating-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 24px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
            border: 1px solid rgba(99, 102, 241, 0.4);
            border-radius: 50px;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden
        }

        .cw-badge-glow {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
            animation: cwBadgeSweep 3s ease-in-out infinite
        }

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

            100% {
                transform: translateX(100%)
            }
        }

        .cw-floating-badge i {
            color: #fbbf24;
            font-size: 14px
        }

        .cw-floating-badge span {
            color: #fff;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px
        }

        .cw-glitch-title {
            margin-bottom: 1rem
        }

        .cw-title-main {
            display: block;
            font-size: clamp(2rem, 6vw, 4rem);
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.2)
        }

        .cw-title-gradient {
            display: block;
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 900;
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #22d3ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: cwTitleGlow 3s ease-in-out infinite
        }

        @keyframes cwTitleGlow {

            0%,
            100% {
                filter: brightness(1) drop-shadow(0 0 10px rgba(99, 102, 241, 0.3))
            }

            50% {
                filter: brightness(1.2) drop-shadow(0 0 20px rgba(99, 102, 241, 0.5))
            }
        }

        .cw-tagline {
            color: rgba(255, 255, 255, 0.6);
            font-size: 1rem;
            max-width: 500px;
            margin: 0 auto
        }

        .cw-center-showcase {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            margin-bottom: 3rem
        }

        .cw-hologram-card {
            position: relative;
            width: 150px;
            height: 150px
        }

        .cw-holo-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid rgba(99, 102, 241, 0.3)
        }

        .cw-ring-1 {
            inset: 0;
            animation: cwRingSpin 8s linear infinite
        }

        .cw-ring-2 {
            inset: 15px;
            border-color: rgba(139, 92, 246, 0.3);
            animation: cwRingSpin 12s linear infinite reverse
        }

        .cw-ring-3 {
            inset: 30px;
            border-color: rgba(34, 211, 238, 0.3);
            animation: cwRingSpin 16s linear infinite
        }

        @keyframes cwRingSpin {
            to {
                transform: rotate(360deg)
            }
        }

        .cw-holo-center {
            position: absolute;
            inset: 40px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(99, 102, 241, 0.3)
        }

        .cw-holo-center i {
            color: #6366f1;
            font-size: 24px;
            margin-bottom: 4px;
            animation: cwRocketPulse 2s ease-in-out infinite
        }

        @keyframes cwRocketPulse {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-5px)
            }
        }

        .cw-launching {
            color: #fbbf24;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 1px
        }

        .cw-countdown-glass {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem 2.5rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1)
        }

        .cw-count-item {
            text-align: center
        }

        .cw-count-num {
            display: block;
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-count-label {
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 1px;
            text-transform: uppercase
        }

        .cw-count-sep {
            color: rgba(255, 255, 255, 0.3);
            font-size: 2rem;
            font-weight: 300
        }

        .cw-neon-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 2rem
        }

        .cw-neon-card {
            position: relative;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 16px;
            text-align: center;
            transition: all 0.4s;
            overflow: hidden
        }

        .cw-card-border {
            position: absolute;
            inset: -1px;
            border-radius: 17px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.3));
            opacity: 0;
            transition: opacity 0.4s
        }

        .cw-neon-card:hover {
            transform: translateY(-6px);
            background: rgba(255, 255, 255, 0.04)
        }

        .cw-neon-card:hover .cw-card-border {
            opacity: 1
        }

        .cw-card-content {
            position: relative;
            z-index: 1
        }

        .cw-card-icon-wrap {
            width: 50px;
            height: 50px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(99, 102, 241, 0.3)
        }

        .cw-card-icon-wrap i {
            color: #6366f1;
            font-size: 20px
        }

        .cw-neon-card h4 {
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            margin: 0 0 0.5rem
        }

        .cw-neon-card p {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
            margin: 0
        }

        .cw-stats-bar {
            display: flex;
            justify-content: center;
            gap: 3rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05)
        }

        .cw-stat-cell {
            text-align: center
        }

        .cw-stat-val {
            display: block;
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(135deg, #6366f1, #22d3ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-stat-lbl {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px
        }

        @media(max-width:992px) {
            .cw-neon-cards {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:576px) {
            .cw-glass-container {
                padding: 2rem 1.5rem
            }

            .cw-neon-cards {
                grid-template-columns: 1fr
            }

            .cw-countdown-glass {
                flex-wrap: wrap;
                justify-content: center
            }

            .cw-count-sep {
                display: none
            }

            .cw-stats-bar {
                flex-direction: column;
                gap: 1.5rem
            }
        }

        .cw-minimal {
            padding: 4rem 0;
            background: transparent;
            display: flex;
            justify-content: center
        }

        .cw-minimal canvas {
            display: none !important
        }

        .cw-minimal .container {
            max-width: 900px
        }

        .cw-min-header {
            margin-bottom: 2.5rem;
            text-align: center
        }

        .cw-min-badge {
            display: inline-block;
            padding: 8px 24px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #0a0a0f;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 2px;
            border-radius: 50px;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3)
        }

        .cw-min-title {
            font-size: clamp(2rem, 6vw, 3rem);
            font-weight: 900;
            color: #0f172a;
            margin: 0 0 0.75rem;
            line-height: 1.2
        }

        .cw-min-title span {
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-min-subtitle {
            font-size: 0.95rem;
            color: #64748b;
            margin: 0
        }

        .cw-min-countdown {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2.5rem
        }

        .cw-min-time {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 1.25rem 1rem;
            background: linear-gradient(145deg, #0f172a, #1e293b);
            border-radius: 12px;
            min-width: 70px;
            border: 1px solid rgba(251, 191, 36, 0.2);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)
        }

        .cw-min-time span {
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(180deg, #fbbf24, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-min-time small {
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 600
        }

        .cw-min-features {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2.5rem;
            flex-wrap: wrap
        }

        .cw-min-feat {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: linear-gradient(145deg, #0f172a, #1e293b);
            border-radius: 8px;
            border: 1px solid rgba(251, 191, 36, 0.15);
            transition: all 0.3s
        }

        .cw-min-feat i {
            color: #fbbf24;
            font-size: 14px
        }

        .cw-min-feat strong {
            color: #e2e8f0;
            font-size: 0.85rem;
            font-weight: 600
        }

        .cw-min-feat:hover {
            border-color: #fbbf24;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(251, 191, 36, 0.15)
        }

        .cw-min-stats {
            display: flex;
            justify-content: center;
            gap: 2.5rem;
            flex-wrap: wrap;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(251, 191, 36, 0.1)
        }

        .cw-min-stat {
            text-align: center
        }

        .cw-min-stat span {
            display: block;
            font-size: 1.8rem;
            font-weight: 900;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-min-stat {
            font-size: 0.8rem;
            color: #94a3b8
        }

        @media(max-width:768px) {
            .cw-min-countdown {
                gap: 0.75rem
            }

            .cw-min-time {
                padding: 1rem 0.75rem;
                min-width: 60px
            }

            .cw-min-time span {
                font-size: 1.6rem
            }

            .cw-min-features {
                gap: 0.75rem
            }

            .cw-min-feat {
                padding: 8px 14px
            }

            .cw-min-stats {
                flex-direction: column;
                gap: 1.5rem
            }
        }

        .cw-ultimate {
            position: relative;
            padding: 4rem 0;
            overflow: hidden
        }

        .cw-solid-bg {
            position: absolute;
            inset: 0;
            background: #0a0a0f;
            z-index: 0
        }

        .cw-ultimate canvas,
        .cw-ultimate .particles-js-canvas-el {
            display: none !important;
            visibility: hidden !important
        }

        .cw-ultimate .container {
            position: relative;
            z-index: 5;
            max-width: 800px
        }

        .cw-premium-card {
            position: relative;
            background: linear-gradient(145deg, #0f0f15, #151520);
            border-radius: 24px;
            padding: 3rem 2.5rem;
            border: 1px solid rgba(251, 191, 36, 0.15);
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5)
        }

        .cw-corner {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid #fbbf24
        }

        .cw-corner-tl {
            top: 15px;
            left: 15px;
            border-right: none;
            border-bottom: none;
            animation: cwCornerPulse 2s ease-in-out infinite
        }

        .cw-corner-tr {
            top: 15px;
            right: 15px;
            border-left: none;
            border-bottom: none;
            animation: cwCornerPulse 2s ease-in-out infinite 0.5s
        }

        .cw-corner-bl {
            bottom: 15px;
            left: 15px;
            border-right: none;
            border-top: none;
            animation: cwCornerPulse 2s ease-in-out infinite 1s
        }

        .cw-corner-br {
            bottom: 15px;
            right: 15px;
            border-left: none;
            border-top: none;
            animation: cwCornerPulse 2s ease-in-out infinite 1.5s
        }

        @keyframes cwCornerPulse {

            0%,
            100% {
                opacity: 0.5;
                transform: scale(1)
            }

            50% {
                opacity: 1;
                transform: scale(1.1)
            }
        }

        .cw-glow-line {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fbbf24, transparent);
            animation: cwGlowSweep 3s ease-in-out infinite
        }

        @keyframes cwGlowSweep {

            0%,
            100% {
                opacity: 0.3;
                width: 40%
            }

            50% {
                opacity: 1;
                width: 70%
            }
        }

        .cw-card-inner {
            text-align: center
        }

        .cw-badge-wrap {
            margin-bottom: 1.5rem
        }

        .cw-animated-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 28px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #0a0a0f;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 2px;
            border-radius: 50px;
            animation: cwBadgePulse 2s ease-in-out infinite
        }

        .cw-animated-badge i {
            font-size: 12px;
            animation: cwGemSpin 3s linear infinite
        }

        @keyframes cwBadgePulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(251, 191, 36, 0.3)
            }

            50% {
                box-shadow: 0 0 40px rgba(251, 191, 36, 0.6)
            }
        }

        @keyframes cwGemSpin {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        .cw-animated-title {
            margin-bottom: 1rem
        }

        .cw-title-line1 {
            display: block;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 900;
            color: #fff;
            animation: cwTitleFade 3s ease-in-out infinite
        }

        .cw-title-line2 {
            display: block;
            font-size: clamp(2.5rem, 7vw, 4rem);
            font-weight: 900;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: cwGoldShift 4s ease-in-out infinite
        }

        @keyframes cwTitleFade {

            0%,
            100% {
                opacity: 0.9
            }

            50% {
                opacity: 1
            }
        }

        @keyframes cwGoldShift {
            0% {
                background-position: 0% 50%
            }

            50% {
                background-position: 100% 50%
            }

            100% {
                background-position: 0% 50%
            }
        }

        .cw-animated-desc {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.95rem;
            margin-bottom: 2rem
        }

        .cw-center-icon {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 2rem
        }

        .cw-rotating-ring {
            position: absolute;
            inset: 0;
            border: 2px dashed rgba(251, 191, 36, 0.4);
            border-radius: 50%;
            animation: cwRingRotate 10s linear infinite
        }

        @keyframes cwRingRotate {
            to {
                transform: rotate(360deg)
            }
        }

        .cw-icon-core {
            position: absolute;
            inset: 15px;
            background: linear-gradient(145deg, #1a1a25, #252535);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(251, 191, 36, 0.3)
        }

        .cw-icon-core i {
            font-size: 28px;
            color: #fbbf24;
            animation: cwRocketBounce 2s ease-in-out infinite
        }

        @keyframes cwRocketBounce {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        .cw-animated-countdown {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem
        }

        .cw-count-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 1.25rem 1rem;
            background: linear-gradient(145deg, #15151f, #1f1f2a);
            border-radius: 12px;
            min-width: 65px;
            border: 1px solid rgba(251, 191, 36, 0.15);
            animation: cwBoxGlow 3s ease-in-out infinite
        }

        .cw-count-box:nth-child(1) {
            animation-delay: 0s
        }

        .cw-count-box:nth-child(2) {
            animation-delay: 0.2s
        }

        .cw-count-box:nth-child(3) {
            animation-delay: 0.4s
        }

        .cw-count-box:nth-child(4) {
            animation-delay: 0.6s
        }

        @keyframes cwBoxGlow {

            0%,
            100% {
                box-shadow: 0 0 0 rgba(251, 191, 36, 0)
            }

            50% {
                box-shadow: 0 0 20px rgba(251, 191, 36, 0.15)
            }
        }

        .cw-count-box span {
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(180deg, #fbbf24, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .cw-count-box small {
            font-size: 0.55rem;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
            text-transform: uppercase
        }

        .cw-feature-grid {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap
        }

        .cw-feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s;
            cursor: default
        }

        .cw-feature-item i {
            color: #fbbf24;
            font-size: 14px;
            transition: transform 0.4s
        }

        .cw-feature-item span {
            color: #e2e8f0;
            font-size: 0.8rem;
            font-weight: 600
        }

        .cw-feature-item:hover {
            background: rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.3);
            transform: translateY(-4px) scale(1.02)
        }

        .cw-feature-item:hover i {
            transform: rotate(15deg) scale(1.2)
        }

        .cw-stats-row {
            display: flex;
            justify-content: center;
            gap: 2.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(251, 191, 36, 0.1)
        }

        .cw-stat-box {
            text-align: center
        }

        .cw-stat-num {
            display: block;
            font-size: 1.8rem;
            font-weight: 900;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: cwStatPop 2s ease-in-out infinite
        }

        .cw-stat-txt {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px
        }

        @keyframes cwStatPop {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.05)
            }
        }

        @media(max-width:768px) {
            .cw-premium-card {
                padding: 2rem 1.5rem
            }

            .cw-animated-countdown {
                gap: 0.75rem
            }

            .cw-count-box {
                min-width: 55px;
                padding: 1rem
            }

            .cw-count-box span {
                font-size: 1.6rem
            }

            .cw-feature-grid {
                gap: 0.5rem
            }

            .cw-feature-item {
                padding: 8px 12px
            }

            .cw-stats-row {
                flex-direction: column;
                gap: 1rem
            }
        }