:root {
                --text-primary: #1d1d1f;
                --text-secondary: #86868b;
                --bg-main: #f9f9f9;
                --bg-glass: rgba(255, 255, 255, 0.75);
                --white: #ffffff;
                
                /* Gradients & Accents */
                --gradient-primary: linear-gradient(135deg, #007aff 0%, #af52de 100%);
                --gradient-glow: rgba(0, 122, 255, 0.3);
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            html {
                overflow-x: clip;
            }

            body {
                background-color: var(--bg-main);
                color: var(--text-primary);
                overflow-x: clip;
                max-width: 100vw;
            }

            /* =========================================
            HEADER TASARIMI - PREMIUM
            ========================================= */

            /* Üst Bilgi Bandı */
            .announcement-bar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1001;
                background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d0d2b 100%);
                padding: 10px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .announcement-bar.hidden {
                transform: translateY(-100%);
                opacity: 0;
            }

            .announcement-inner {
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 13px;
                color: rgba(255,255,255,0.85);
                font-weight: 500;
            }

            .announcement-spark {
                font-size: 16px;
                animation: sparkle 2s ease-in-out infinite;
            }

            @keyframes sparkle {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.3); }
            }

            .announcement-text {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .announcement-text strong {
                background: linear-gradient(135deg, #5ac8fa, #af52de);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-weight: 700;
            }

            .announcement-cta {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 50px;
                padding: 4px 14px;
                font-size: 12px;
                font-weight: 600;
                color: white;
                text-decoration: none;
                transition: all 0.3s ease;
                margin-left: 4px;
            }

            .announcement-cta:hover {
                background: rgba(255,255,255,0.18);
            }

            .announcement-cta svg {
                width: 12px;
                height: 12px;
                transition: transform 0.3s ease;
            }

            .announcement-cta:hover svg {
                transform: translateX(2px);
            }

            .announcement-close {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                background: none;
                border: none;
                color: rgba(255,255,255,0.35);
                cursor: pointer;
                padding: 4px;
                display: flex;
                transition: color 0.2s ease;
            }

            .announcement-close:hover {
                color: rgba(255,255,255,0.7);
            }

            .announcement-close svg {
                width: 16px;
                height: 16px;
            }

            /* Header */
            header {
                position: fixed;
                top: 52px;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 48px);
                max-width: 1440px;
                height: 64px;
                background: rgba(255, 255, 255, 0.72);
                backdrop-filter: blur(40px) saturate(200%);
                -webkit-backdrop-filter: blur(40px) saturate(200%);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 8px 0 24px;
                z-index: 1000;
                border: 1px solid rgba(255,255,255,0.5);
                border-radius: 20px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.06), 
                            0 1px 2px rgba(0,0,0,0.04),
                            inset 0 1px 0 rgba(255,255,255,0.6);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            header.no-bar {
                top: 12px;
            }

            header.scrolled {
                top: 8px;
                height: 58px;
                background: rgba(255, 255, 255, 0.88);
                box-shadow: 0 8px 40px rgba(0,0,0,0.08),
                            0 1px 3px rgba(0,0,0,0.06),
                            inset 0 1px 0 rgba(255,255,255,0.7);
                border-color: rgba(0,0,0,0.06);
            }

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

            /* Logo */
            .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                text-decoration: none;
                flex-shrink: 0;
                transition: transform 0.3s ease;
            }

            .logo:hover {
                transform: scale(1.03);
            }

            .logo-icon {
                height: 38px;
                width: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                position: relative;
            }

            .logo:hover .logo-icon {
                transform: scale(1.03);
            }

            .logo-icon img {
                height: 100%;
                width: auto;
                display: block;
                object-fit: contain;
            }

            /* Footer'daki beyaz logo */
            .site-footer .logo-icon {
                height: auto;
                width: 140px;
            }

            .site-footer .logo-icon img {
                width: 100%;
                height: auto;
                filter: brightness(0) invert(1);
            }

            .logo-text {
                font-size: 21px;
                font-weight: 700;
                color: #000;
                letter-spacing: -0.8px;
            }

            .logo-text span {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            /* Navigation */
            nav {
                display: flex;
                gap: 2px;
                align-items: center;
                background: rgba(0,0,0,0.035);
                padding: 4px;
                border-radius: 14px;
            }

            nav a {
                text-decoration: none;
                color: #6e6e73;
                font-size: 13.5px;
                font-weight: 500;
                padding: 8px 16px;
                border-radius: 10px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                white-space: nowrap;
            }

            nav a:hover {
                color: #1d1d1f;
                background: rgba(0,0,0,0.05);
            }

            nav a.active {
                color: #fff;
                background: var(--gradient-primary);
                box-shadow: 0 2px 10px rgba(0, 122, 255, 0.3);
            }

            /* Sağ Taraf */
            .header-right {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }

            /* Live Status Indicator */
            .header-live {
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 6px 14px;
                background: rgba(52, 199, 89, 0.08);
                border: 1px solid rgba(52, 199, 89, 0.15);
                border-radius: 50px;
                font-size: 12px;
                font-weight: 600;
                color: #34c759;
                letter-spacing: 0.3px;
                white-space: nowrap;
            }

            .live-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #34c759;
                position: relative;
                flex-shrink: 0;
            }

            .live-dot::after {
                content: '';
                position: absolute;
                inset: -3px;
                border-radius: 50%;
                background: rgba(52, 199, 89, 0.3);
                animation: livePulse 2s ease-in-out infinite;
            }

            @keyframes livePulse {
                0%, 100% { transform: scale(1); opacity: 0.6; }
                50% { transform: scale(1.6); opacity: 0; }
            }

            /* Dil Seçici */
            .lang-switcher {
                display: flex;
                align-items: center;
                gap: 0;
                background: rgba(0,0,0,0.04);
                border-radius: 10px;
                padding: 3px;
                border: 1px solid rgba(0,0,0,0.04);
            }

            .lang-btn {
                padding: 5px 10px;
                font-size: 12px;
                font-weight: 600;
                color: #86868b;
                border: none;
                background: transparent;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.25s ease;
                font-family: inherit;
                letter-spacing: 0.3px;
            }

            .lang-btn.active {
                background: white;
                color: #1d1d1f;
                box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            }

            .lang-btn:hover:not(.active) {
                color: #1d1d1f;
            }

            .btn-contact {
                text-decoration: none;
                color: #424245;
                font-size: 13.5px;
                font-weight: 500;
                padding: 9px 18px;
                border-radius: 50px;
                border: 1.5px solid rgba(0,0,0,0.08);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                white-space: nowrap;
                background: transparent;
            }

            .btn-contact:hover {
                border-color: rgba(0,0,0,0.15);
                background: rgba(0,0,0,0.03);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            }

            .btn-participate {
                background: var(--gradient-primary);
                color: var(--white);
                text-decoration: none;
                padding: 9px 22px;
                border-radius: 50px;
                font-size: 13.5px;
                font-weight: 600;
                transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
                box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 6px;
                position: relative;
                overflow: visible;
            }

            .btn-participate::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50px;
                background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .btn-participate:hover::before {
                opacity: 1;
            }

            /* Notification Badge */
            .btn-badge {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 20px;
                height: 20px;
                background: #ff3b30;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                font-weight: 700;
                color: white;
                border: 2px solid white;
                box-shadow: 0 2px 6px rgba(255,59,48,0.4);
                animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            @keyframes badgePop {
                0% { transform: scale(0); }
                100% { transform: scale(1); }
            }

            .btn-participate:hover {
                transform: translateY(-2px) scale(1.03);
                box-shadow: 0 8px 24px rgba(0, 122, 255, 0.35);
            }

            .btn-participate svg {
                width: 15px;
                height: 15px;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .btn-participate:hover svg {
                transform: translateX(3px);
            }

            /* Mobil Menü Butonu */
            .menu-toggle {
                display: none;
                flex-direction: column;
                gap: 5px;
                cursor: pointer;
                padding: 10px;
                border: none;
                background: rgba(0,0,0,0.04);
                border-radius: 12px;
                z-index: 1001;
                transition: all 0.3s ease;
            }

            .menu-toggle:hover {
                background: rgba(0,0,0,0.07);
            }

            .menu-toggle span {
                display: block;
                width: 20px;
                height: 2px;
                background: #1d1d1f;
                border-radius: 2px;
                transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                transform-origin: center;
            }

            .menu-toggle.open {
                background: rgba(0,0,0,0.06);
            }

            .menu-toggle.open span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .menu-toggle.open span:nth-child(2) {
                opacity: 0;
                transform: scaleX(0);
            }

            .menu-toggle.open span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }

            /* =========================================
            HERO SECTION TASARIMI
            ========================================= */
            .hero {
                min-height: 100vh;
                display: grid;
                grid-template-columns: 1fr 1fr;
                padding: 140px 56px 64px 56px;
                max-width: 1536px;
                margin: 0 auto;
                gap: 80px;
                align-items: center;
            }

            /* Sol Taraf: İçerik */
            .hero-content {
                display: flex;
                flex-direction: column;
                gap: 36px;
                position: relative;
                z-index: 10;
            }

            .hero-content h1 {
                font-size: 72px;
                font-weight: 700;
                line-height: 1.15;
                letter-spacing: -2.5px;
                color: var(--text-primary);
            }

            .text-gradient {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                display: inline-block;
            }

            /* Dönen kelime animasyonu */
            .rotating-text {
                display: inline-grid;
                vertical-align: top;
            }

            .rotating-text .word {
                grid-area: 1 / 1;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                white-space: nowrap;
                opacity: 0;
                transform: translateY(40%);
                transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
                filter: blur(6px);
            }

            .rotating-text .word.active {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0px);
                transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
            }

            .rotating-text .word.exit {
                opacity: 0;
                transform: translateY(-40%);
                filter: blur(6px);
                transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
            }

            /* Animasyon bittikten sonra gelen stacked görünüm */
            .hero-final-text {
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                gap: 0 14px;
                line-height: 1.15;
            }

            .hero-final-text .final-line {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                gap: 0 14px;
            }

            .hero-final-text .final-word {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-size: 72px;
                font-weight: 700;
                letter-spacing: -2.5px;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                display: inline-block;
            }

            .hero-final-text .final-word.show {
                opacity: 1;
                transform: translateY(0);
            }

            .hero-final-text .final-static {
                font-size: 72px;
                font-weight: 700;
                letter-spacing: -2.5px;
                color: var(--text-primary);
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                display: inline-block;
            }

            .hero-final-text .final-static.show {
                opacity: 1;
                transform: translateY(0);
            }

            .hero-final-text .final-word.accent {
                font-size: 82px;
                font-weight: 800;
                letter-spacing: -3px;
            }

            .hero-content p {
                font-size: 21px;
                line-height: 1.5;
                color: var(--text-secondary);
                max-width: 90%;
                font-weight: 400;
                letter-spacing: -0.3px;
            }

            .hero-buttons {
                display: flex;
                gap: 20px;
                margin-top: 8px;
            }

            .btn-primary {
                background: var(--gradient-primary);
                color: var(--white);
                text-decoration: none;
                padding: 18px 36px;
                border-radius: 50px;
                font-size: 17px;
                font-weight: 600;
                box-shadow: 0 12px 32px var(--gradient-glow);
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .btn-primary::after {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
                border-radius: 50px;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 16px 40px rgba(0, 122, 255, 0.4);
            }

            .btn-primary:hover::after {
                opacity: 1;
            }

            .btn-secondary {
                background: transparent;
                color: var(--text-primary);
                text-decoration: none;
                padding: 18px 36px;
                border-radius: 50px;
                font-size: 17px;
                font-weight: 600;
                border: 1.5px solid rgba(0,0,0,0.1);
                transition: all 0.3s ease;
            }

            .btn-secondary:hover {
                border-color: rgba(0,0,0,0.3);
                background-color: rgba(0,0,0,0.02);
                transform: translateY(-2px);
            }

            /* Adım Kartları */
            .stats-container {
                display: flex;
                gap: 16px;
                margin-top: 40px;
                align-items: stretch;
            }

            .stat-card {
                background-color: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                padding: 14px 14px;
                border-radius: 14px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.03), 
                            inset 0 0 0 1px rgba(255,255,255,1);
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 6px;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .stat-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--gradient-primary);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .stat-card:hover::before {
                opacity: 1;
            }

            .stat-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 20px 50px rgba(0,0,0,0.08), 
                            inset 0 0 0 1px rgba(255,255,255,1);
            }

            /* Logo Icon Watermark — imza gibi küçük kurumsal dokunuş */
            .stat-card::after,
            .fair-3d-card::after,
            .contact-info-card::after {
                content: '';
                position: absolute;
                bottom: 6px;
                right: 8px;
                width: 24px;
                height: 24px;
                background-image: url('logo-icon.svg');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                opacity: 0.04;
                pointer-events: none;
                z-index: 0;
                transition: opacity 0.4s ease;
            }

            .stat-card:hover::after,
            .fair-3d-card:hover::after,
            .contact-info-card:hover::after {
                opacity: 0.08;
            }

            .step-header {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .step-icon {
                width: 32px;
                height: 32px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .step-icon svg {
                width: 16px;
                height: 16px;
            }

            .step-1 .step-icon {
                background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
            }

            .step-2 .step-icon {
                background: linear-gradient(135deg, #af52de 0%, #da7ff5 100%);
            }

            .step-3 .step-icon {
                background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
            }

            .step-number {
                font-size: 9px;
                font-weight: 700;
                color: var(--text-secondary);
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .stat-value {
                font-size: 14px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -0.3px;
                line-height: 1.25;
            }

            .stat-label {
                font-size: 11px;
                color: var(--text-secondary);
                font-weight: 400;
                line-height: 1.35;
            }

            /* Kartlar arası ok işareti */
            .step-arrow {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            .step-arrow.revealed {
                opacity: 0.3;
            }

            .step-arrow svg {
                width: 20px;
                height: 20px;
                color: var(--text-secondary);
            }

            /* Kartlar gizli başlasın, uçak geçince görünsün */
            .stat-card {
                opacity: 0;
                transform: translateY(20px) scale(0.9);
            }

            .stat-card.revealed {
                opacity: 1;
                transform: translateY(0) scale(1);
                transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow 0.3s ease;
            }

            .stat-card.revealed:hover {
                transform: translateY(-6px) scale(1);
            }

            /* Stats container - uçak içinde uçacak */
            .stats-container {
                position: relative;
                overflow: visible;
                overflow-x: clip;
            }

            /* Uçak - doğrudan kutuların üzerinden geçecek */
            .airplane {
                position: absolute;
                left: -80px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 50;
                opacity: 0;
                pointer-events: none;
                filter: drop-shadow(0 6px 18px rgba(0, 122, 255, 0.5))
                        drop-shadow(0 2px 8px rgba(175, 82, 222, 0.35));
            }

            .airplane.flying {
                opacity: 1;
                animation: flyAcross 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            }

            @keyframes flyAcross {
                0% {
                    left: -80px;
                    opacity: 0;
                }
                6% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    left: calc(100% + 80px);
                    opacity: 0;
                }
            }

            /* Uçak arkasındaki iz - gradient çizgi */
            .airplane-trail {
                position: absolute;
                left: -80px;
                top: 50%;
                width: 150px;
                height: 3px;
                background: linear-gradient(90deg, transparent 0%, rgba(0, 122, 255, 0.6) 40%, rgba(175, 82, 222, 0.5) 100%);
                border-radius: 3px;
                transform: translateY(-50%) translateX(-100%);
                opacity: 0;
                pointer-events: none;
                filter: blur(1px);
                z-index: 49;
            }

            .airplane.flying ~ .airplane-trail {
                opacity: 1;
                animation: flyAcross 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            }

            /* Uçak geçerken kutunun üzerinde parlama efekti */
            .stat-card.glow-pulse {
                box-shadow: 0 10px 40px rgba(0,122,255,0.12),
                            0 0 30px rgba(175,82,222,0.08),
                            inset 0 0 0 1px rgba(255,255,255,1);
                font-size: 36px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -1.5px;
            }

            .stat-label {
                font-size: 15px;
                color: var(--text-secondary);
                font-weight: 500;
            }

            /* =========================================
            SAĞ TARAF: 3D ETKİNLİK VİTRİNİ
            ========================================= */
            .hero-visual {
                width: 100%;
                height: 100%;
                min-height: 650px;
                display: flex;
                align-items: center;
                justify-content: center;
                perspective: 1200px;
                position: relative;
            }

            .visual-glow {
                position: absolute;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(0,122,255,0.08) 0%, rgba(175,82,222,0.05) 40%, rgba(249,249,249,0) 70%);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 0;
                filter: blur(40px);
            }

            .scene-wrapper {
                position: relative;
                width: 100%;
                height: 100%;
                transform-style: preserve-3d;
                transition: transform 0.1s ease-out;
                z-index: 1;
            }

            .scene {
                position: relative;
                width: 100%;
                height: 100%;
                transform-style: preserve-3d;
                transform: rotateX(15deg) rotateY(-20deg);
                animation: floatScene 8s ease-in-out infinite;
            }

            @keyframes floatScene {
                0%, 100% { transform: rotateX(15deg) rotateY(-20deg) translateY(0); }
                50% { transform: rotateX(18deg) rotateY(-18deg) translateY(-15px); }
            }

            /* YENİ: Canvas 3D Dünya (Globe) */
            .world-globe-canvas {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 1400px;
                height: 1400px;
                transform: translate(-50%, -50%);
                z-index: -1;
                pointer-events: none;
                opacity: 0.85;
            }

            /* 3D Cam Zemin (Stand Hissi İçin) */
            .stand-base {
                position: absolute;
                top: 75%;
                left: 5%;
                width: 90%;
                height: 250px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 40px;
                transform: rotateX(75deg) translateZ(-80px);
                box-shadow: 
                    0 40px 80px rgba(0,0,0,0.08),
                    inset 0 0 0 2px rgba(255,255,255,0.8);
                backdrop-filter: blur(10px);
            }

            /* 3D Etkinlik Kartları */
            .fair-3d-card {
                position: absolute;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border-radius: 18px;
                padding: 12px;
                box-shadow: 
                    -20px 20px 50px rgba(0,0,0,0.08), 
                    inset 0 0 0 1px rgba(255,255,255,1);
                display: flex;
                flex-direction: column;
                gap: 16px;
                transform-style: preserve-3d;
                transition: transform 0.3s ease;
                overflow: hidden;
            }

            .fair-3d-card:hover {
                background: rgba(255, 255, 255, 1);
            }

            .fair-3d-img {
                width: 100%;
                height: 110px;
                object-fit: cover;
                border-radius: 12px;
                box-shadow: 0 8px 20px rgba(0,0,0,0.06);
            }

            .fair-3d-content {
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding: 0 2px 2px 2px;
            }

            .fair-3d-date {
                font-size: 10px;
                font-weight: 700;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .fair-3d-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -0.3px;
            }

            .fair-3d-loc {
                font-size: 11px;
                color: var(--text-secondary);
                display: flex;
                align-items: center;
                gap: 4px;
                font-weight: 500;
            }

            /* Kart Pozisyonları ve Animasyonları */
            .card-1 {
                top: 10%;
                left: 20%;
                width: 320px;
                transform: translateZ(-20px);
                animation: floatCard1 6s ease-in-out infinite alternate;
            }

            .card-2 {
                top: 35%;
                left: 55%;
                width: 280px;
                transform: translateZ(60px);
                animation: floatCard2 5s ease-in-out infinite alternate-reverse;
            }

            .card-3 {
                top: 55%;
                left: 10%;
                width: 260px;
                transform: translateZ(140px);
                animation: floatCard3 4s ease-in-out infinite alternate;
            }

            @keyframes floatCard1 {
                0% { transform: translateZ(-20px) translateY(0); }
                100% { transform: translateZ(-20px) translateY(-12px); }
            }
            @keyframes floatCard2 {
                0% { transform: translateZ(60px) translateY(0); }
                100% { transform: translateZ(60px) translateY(-15px); }
            }
            @keyframes floatCard3 {
                0% { transform: translateZ(140px) translateY(0); }
                100% { transform: translateZ(140px) translateY(-10px); }
            }

            /* Responsive Tasarım */
            @media (max-width: 1200px) {
                .hero-content h1 { font-size: 60px; }
                .hero { gap: 40px; padding: 140px 40px 64px 40px; }

                .hero-final-text .final-word {
                    font-size: 60px;
                }
                .hero-final-text .final-static {
                    font-size: 60px;
                }
                .hero-final-text .final-word.accent {
                    font-size: 68px;
                }
            }

            @media (max-width: 1024px) {
                .hero {
                    grid-template-columns: 1fr;
                    padding: 120px 32px 48px 32px;
                    text-align: center;
                }

                .hero-content {
                    align-items: center;
                }

                .hero-content p {
                    max-width: 100%;
                }

                .hero-buttons {
                    justify-content: center;
                }

                .stats-container {
                    justify-content: center;
                    width: 100%;
                }

                .hero-visual {
                    min-height: 500px;
                    margin-top: 20px;
                }

                .hero-final-text {
                    align-items: center;
                }

                .hero-final-text .final-word {
                    font-size: 54px;
                }
                .hero-final-text .final-static {
                    font-size: 54px;
                }
                .hero-final-text .final-word.accent {
                    font-size: 60px;
                }
                
                header {
                    top: 48px;
                    width: calc(100% - 24px);
                    padding: 0 8px 0 16px;
                    height: 56px;
                    border-radius: 16px;
                }

                .logo-icon {
                    height: 34px;
                }

                header.no-bar {
                    top: 8px;
                }

                header.scrolled {
                    top: 6px;
                    height: 52px;
                }

                .announcement-bar {
                    font-size: 12px;
                    padding: 8px 40px 8px 16px;
                }

                .announcement-cta {
                    display: none;
                }

                nav {
                    display: none !important;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    height: 100dvh;
                    background: rgba(255,255,255,0.98);
                    backdrop-filter: blur(40px) saturate(200%);
                    -webkit-backdrop-filter: blur(40px) saturate(200%);
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    padding: 80px 32px 40px;
                    z-index: 1002;
                    border-radius: 0;
                }

                nav.open {
                    display: flex !important;
                }

                nav a {
                    font-size: 22px;
                    padding: 16px 40px;
                    border-radius: 16px;
                    width: 100%;
                    max-width: 320px;
                    text-align: center;
                }

                nav a.active {
                    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
                }

                .menu-toggle {
                    display: flex;
                }

                .header-live {
                    display: none;
                }

                .lang-switcher {
                    display: none;
                }

                .btn-contact {
                    display: none;
                }

                .btn-participate {
                    font-size: 12.5px;
                    padding: 8px 16px;
                    gap: 4px;
                }

                .btn-participate svg {
                    width: 13px;
                    height: 13px;
                }

                .btn-badge {
                    width: 16px;
                    height: 16px;
                    font-size: 9px;
                    top: -4px;
                    right: -4px;
                }
            }
            
            @media (max-width: 768px) {
                .hero-content h1 {
                    font-size: 42px;
                    letter-spacing: -1.5px;
                }

                .hero-content p {
                    font-size: 17px;
                }
                
                .stats-container {
                    flex-direction: column;
                    gap: 12px;
                    overflow: visible;
                }

                .step-arrow {
                    transform: rotate(90deg);
                }

                .stat-card {
                    padding: 20px 18px;
                }

                /* Watermark küçültme — mobil */
                .stat-card::after,
                .fair-3d-card::after,
                .contact-info-card::after {
                    width: 20px;
                    height: 20px;
                    bottom: 5px;
                    right: 6px;
                }

                /* Mobilde uçak yukarıdan aşağı uçsun */
                .airplane {
                    width: 36px;
                    height: 36px;
                    left: 50% !important;
                    top: -60px !important;
                    transform: translateX(-50%) rotate(90deg) !important;
                }

                .airplane.flying {
                    opacity: 1;
                    animation: flyDown 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
                }

                .airplane-trail {
                    width: 3px !important;
                    height: 80px !important;
                    left: 50% !important;
                    top: -60px !important;
                    transform: translateX(-50%) !important;
                    background: linear-gradient(180deg, transparent 0%, rgba(0, 122, 255, 0.6) 40%, rgba(175, 82, 222, 0.5) 100%) !important;
                }

                .airplane.flying ~ .airplane-trail {
                    animation: flyDown 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
                }

                @keyframes flyDown {
                    0% {
                        top: -60px;
                        left: 50%;
                        opacity: 0;
                    }
                    6% {
                        opacity: 1;
                    }
                    90% {
                        opacity: 1;
                    }
                    100% {
                        top: calc(100% + 60px);
                        left: 50%;
                        opacity: 0;
                    }
                }

                .hero-final-text {
                    align-items: center;
                    justify-content: center;
                }

                .hero-final-text .final-line {
                    justify-content: center;
                }

                .hero-final-text .final-word {
                    font-size: 42px;
                    letter-spacing: -1.5px;
                }
                .hero-final-text .final-static {
                    font-size: 42px;
                    letter-spacing: -1.5px;
                }
                .hero-final-text .final-word.accent {
                    font-size: 48px;
                    letter-spacing: -2px;
                }
                
                header {
                    padding: 0 16px;
                    height: 54px;
                    width: calc(100% - 20px);
                    border-radius: 14px;
                }

                header.no-bar {
                    top: 8px;
                }

                header.scrolled {
                    height: 50px;
                }

                .announcement-bar {
                    font-size: 11px;
                    padding: 7px 36px 7px 12px;
                }

                .announcement-inner {
                    gap: 8px;
                    font-size: 11px;
                }

                .announcement-spark {
                    font-size: 13px;
                }

                .announcement-close {
                    right: 12px;
                }

                .announcement-close svg {
                    width: 14px;
                    height: 14px;
                }

                .logo-icon {
                    height: 32px;
                }
                
                .hero {
                    padding: 100px 20px 40px 20px;
                    gap: 24px;
                    min-height: auto;
                    overflow-x: clip;
                }

                .hero-buttons {
                    flex-direction: column;
                    width: 100%;
                    gap: 12px;
                }
                
                .btn-primary, .btn-secondary {
                    width: 100%;
                    text-align: center;
                    padding: 16px 28px;
                    font-size: 16px;
                }

                /* === HERO VISUAL - Mobilde 3D kapat, basit layout === */
                .hero-visual {
                    min-height: auto;
                    height: auto;
                    perspective: none;
                    overflow: visible;
                    padding: 20px 0;
                }

                .visual-glow {
                    display: none;
                }

                .world-globe-canvas {
                    display: none;
                }

                .scene-wrapper {
                    transform: none !important;
                    transform-style: flat;
                    width: 100%;
                    height: auto;
                }

                .scene {
                    transform: none;
                    animation: none;
                    transform-style: flat;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    width: 100%;
                    height: auto;
                    position: relative;
                }

                .stand-base {
                    display: none;
                }

                .fair-3d-card {
                    position: relative;
                    width: 100% !important;
                    top: auto !important;
                    left: auto !important;
                    transform: none !important;
                    animation: none !important;
                    border-radius: 20px;
                    padding: 14px;
                    gap: 12px;
                }

                .fair-3d-img {
                    height: 160px;
                    border-radius: 14px;
                }

                .fair-3d-content {
                    gap: 6px;
                    padding: 0 4px 4px 4px;
                }

                .fair-3d-title {
                    font-size: 16px;
                }

                .fair-3d-date {
                    font-size: 11px;    
                }

                .fair-3d-loc {
                    font-size: 12px;
                }
            }

            @media (max-width: 480px) {
                nav a {
                    font-size: 19px;
                    padding: 14px 32px;
                    border-radius: 14px;
                    max-width: 280px;
                }

                .menu-toggle {
                    padding: 8px;
                    border-radius: 10px;
                    gap: 4px;
                }

                .menu-toggle span {
                    width: 18px;
                }

                .hero-content h1 {
                    font-size: 32px;
                    letter-spacing: -1px;
                }

                .hero-content p {
                    font-size: 15px;
                }

                .hero-final-text .final-word {
                    font-size: 30px;
                    letter-spacing: -1px;
                }
                .hero-final-text .final-static {
                    font-size: 30px;
                    letter-spacing: -1px;
                }
                .hero-final-text .final-word.accent {
                    font-size: 36px;
                    letter-spacing: -1.5px;
                }

                .hero {
                    padding: 85px 16px 28px 16px;
                    gap: 20px;
                }

                header {
                    padding: 0 12px;
                    height: 50px;
                    width: calc(100% - 16px);
                    border-radius: 12px;
                }

                header.scrolled {
                    height: 46px;
                }

                .logo-icon {
                    height: 28px;
                }

                .btn-participate {
                    font-size: 11px;
                    padding: 7px 12px;
                    gap: 3px;
                }

                .btn-participate svg {
                    width: 12px;
                    height: 12px;
                }

                .btn-badge {
                    width: 15px;
                    height: 15px;
                    font-size: 8px;
                    top: -3px;
                    right: -3px;
                }

                .stat-card {
                    padding: 16px 14px;
                    border-radius: 16px;
                }

                /* Watermark daha küçük — küçük ekranlar */
                .stat-card::after,
                .fair-3d-card::after,
                .contact-info-card::after {
                    width: 16px;
                    height: 16px;
                    bottom: 4px;
                    right: 5px;
                }

                .step-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 10px;
                }

                .step-icon svg {
                    width: 18px;
                    height: 18px;
                }

                .stat-value {
                    font-size: 15px;
                }

                .stat-label {
                    font-size: 12px;
                }

                .step-number {
                    font-size: 10px;
                }

                .fair-3d-img {
                    height: 130px;
                }

                .fair-3d-card {
                    padding: 12px;
                    gap: 10px;
                }

                .fair-3d-title {
                    font-size: 15px;
                }

                .airplane {
                    width: 30px;
                    height: 30px;
                }

                .airplane-trail {
                    width: 3px !important;
                    height: 60px !important;
                }

                .btn-primary, .btn-secondary {
                    padding: 14px 24px;
                    font-size: 15px;
                }

                .hero-content {
                    gap: 24px;
                }

                .stats-container {
                    margin-top: 28px;
                    gap: 10px;
                }

                .step-arrow svg {
                    width: 16px;
                    height: 16px;
                }
            }

            @media (max-width: 360px) {
                .hero-content h1 {
                    font-size: 26px;
                }

                .hero-final-text .final-word {
                    font-size: 24px;
                }
                .hero-final-text .final-static {
                    font-size: 24px;
                }
                .hero-final-text .final-word.accent {
                    font-size: 30px;
                }

                .btn-primary, .btn-secondary {
                    padding: 13px 20px;
                    font-size: 14px;
                }

                header {
                    width: calc(100% - 12px);
                    padding: 0 10px;
                    height: 48px;
                    border-radius: 10px;
                }

                header.scrolled {
                    height: 44px;
                }

                .logo-icon {
                    height: 26px;
                }

                .btn-participate {
                    font-size: 10px;
                    padding: 6px 10px;
                }

                .contact-title {
                    font-size: 24px;
                }

                .contact-stats {
                    gap: 12px;
                }

                .contact-stat-number {
                    font-size: 22px;
                }
            }

            /* =========================================
               BİZ KİMİZ SECTION
               ========================================= */
            .about-section {
                padding: 120px 56px 100px;
                max-width: 1536px;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }

            .about-section::before {
                content: '';
                position: absolute;
                top: -150px;
                right: -200px;
                width: 700px;
                height: 700px;
                background: radial-gradient(circle, rgba(0,122,255,0.04) 0%, rgba(175,82,222,0.03) 40%, transparent 70%);
                pointer-events: none;
                filter: blur(80px);
            }

            .about-wrapper {
                display: grid;
                grid-template-columns: 1.1fr 1fr;
                gap: 56px;
                align-items: stretch;
                position: relative;
                z-index: 1;
            }

            /* ===== SOL: Banner Alanı ===== */
            .about-banner {
                position: relative;
                border-radius: 28px;
                overflow: hidden;
                min-height: 580px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

            .about-banner-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 8s ease;
            }

            .about-banner:hover .about-banner-img {
                transform: scale(1.06);
            }

            .about-banner-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(to top,
                    rgba(8, 15, 30, 0.92) 0%,
                    rgba(8, 15, 30, 0.55) 40%,
                    rgba(8, 15, 30, 0.15) 65%,
                    transparent 100%);
                z-index: 1;
            }

            .about-banner-content {
                position: relative;
                z-index: 2;
                padding: 40px 36px;
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

            .about-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(255,255,255,0.12);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 50px;
                padding: 8px 18px;
                font-size: 12px;
                font-weight: 600;
                color: #fff;
                letter-spacing: 0.5px;
                width: fit-content;
            }

            .about-badge svg {
                width: 14px;
                height: 14px;
            }

            .about-title {
                font-size: 40px;
                font-weight: 700;
                letter-spacing: -1.5px;
                color: #fff;
                line-height: 1.15;
            }

            .about-title span {
                background: linear-gradient(135deg, #5ac8fa 0%, #af52de 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .about-banner-desc {
                font-size: 15px;
                color: rgba(255,255,255,0.7);
                line-height: 1.65;
                max-width: 480px;
            }

            .about-banner-desc strong {
                color: #fff;
                font-weight: 600;
            }

            .about-banner-actions {
                display: flex;
                gap: 12px;
                margin-top: 8px;
            }

            .about-btn-primary {
                background: var(--gradient-primary);
                color: var(--white);
                text-decoration: none;
                padding: 13px 28px;
                border-radius: 50px;
                font-size: 14px;
                font-weight: 600;
                box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3);
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border: none;
                cursor: pointer;
            }

            .about-btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 32px rgba(0, 122, 255, 0.4);
            }

            .about-btn-primary svg {
                width: 15px;
                height: 15px;
                transition: transform 0.25s ease;
            }

            .about-btn-primary:hover svg {
                transform: translateX(3px);
            }

            .about-btn-secondary {
                background: rgba(255,255,255,0.1);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                color: #fff;
                text-decoration: none;
                padding: 13px 28px;
                border-radius: 50px;
                font-size: 14px;
                font-weight: 600;
                border: 1.5px solid rgba(255,255,255,0.2);
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                cursor: pointer;
            }

            .about-btn-secondary:hover {
                border-color: rgba(255,255,255,0.4);
                background: rgba(255,255,255,0.15);
                transform: translateY(-2px);
            }

            /* Banner üst köşe floating stat */
            .about-banner-float {
                position: absolute;
                top: 24px;
                right: 24px;
                z-index: 3;
                background: rgba(255,255,255,0.12);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 16px;
                padding: 14px 18px;
                display: flex;
                align-items: center;
                gap: 12px;
                animation: aboutFloat 4s ease-in-out infinite alternate;
            }

            @keyframes aboutFloat {
                0% { transform: translateY(0); }
                100% { transform: translateY(-8px); }
            }

            .about-banner-float-icon {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                background: var(--gradient-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .about-banner-float-icon svg {
                width: 18px;
                height: 18px;
                color: #fff;
            }

            .about-banner-float-text {
                display: flex;
                flex-direction: column;
                gap: 1px;
            }

            .about-banner-float-value {
                font-size: 14px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -0.3px;
            }

            .about-banner-float-label {
                font-size: 10px;
                color: rgba(255,255,255,0.55);
                font-weight: 500;
            }

            /* ===== SAĞ: Kutular Grid ===== */
            .about-boxes {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
                align-content: center;
            }

            .about-box {
                background: var(--white);
                border-radius: 22px;
                padding: 28px 24px;
                display: flex;
                flex-direction: column;
                gap: 14px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.04),
                            inset 0 0 0 1px rgba(255,255,255,0.9);
                border: 1px solid rgba(0,0,0,0.04);
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                cursor: default;
                position: relative;
                overflow: hidden;
            }

            .about-box::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--gradient-primary);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .about-box:hover::before {
                opacity: 1;
            }

            .about-box:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 48px rgba(0,0,0,0.07),
                            inset 0 0 0 1px rgba(0,122,255,0.06);
            }

            .about-box-icon {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .about-box-icon svg {
                width: 24px;
                height: 24px;
                stroke: #fff;
            }

            .about-box:nth-child(1) .about-box-icon {
                background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
            }
            .about-box:nth-child(2) .about-box-icon {
                background: linear-gradient(135deg, #af52de 0%, #da7ff5 100%);
            }
            .about-box:nth-child(3) .about-box-icon {
                background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
            }
            .about-box:nth-child(4) .about-box-icon {
                background: linear-gradient(135deg, #ff9500 0%, #ffb340 100%);
            }

            .about-box-title {
                font-size: 17px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -0.3px;
                line-height: 1.3;
            }

            .about-box-desc {
                font-size: 13px;
                color: var(--text-secondary);
                line-height: 1.55;
            }

            .about-box-number {
                font-size: 28px;
                font-weight: 700;
                letter-spacing: -1.5px;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-top: auto;
                line-height: 1;
            }

            /* Full-width stat strip */
            .about-box-wide {
                grid-column: 1 / -1;
                flex-direction: row;
                align-items: center;
                gap: 24px;
                padding: 22px 28px;
                background: linear-gradient(135deg, rgba(0,122,255,0.04) 0%, rgba(175,82,222,0.03) 100%);
                border: 1px solid rgba(0,122,255,0.08);
            }

            .about-box-wide:hover {
                background: linear-gradient(135deg, rgba(0,122,255,0.07) 0%, rgba(175,82,222,0.05) 100%);
            }

            .about-box-wide .about-box-icon {
                width: 52px;
                height: 52px;
            }

            .about-box-wide-content {
                display: flex;
                flex-direction: column;
                gap: 3px;
                flex: 1;
            }

            .about-box-wide-content .about-box-title {
                font-size: 15px;
            }

            .about-box-wide-content .about-box-desc {
                font-size: 12px;
            }

            .about-box-wide-stats {
                display: flex;
                gap: 24px;
                flex-shrink: 0;
            }

            .about-box-wide-stat {
                text-align: center;
            }

            .about-box-wide-stat-val {
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -1px;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                line-height: 1.2;
            }

            .about-box-wide-stat-label {
                font-size: 10px;
                color: var(--text-secondary);
                font-weight: 500;
            }

            /* Scroll reveal */
            .about-banner,
            .about-boxes {
                opacity: 0;
                transform: translateY(40px);
                transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .about-banner.visible {
                opacity: 1;
                transform: translateY(0);
            }

            .about-boxes.visible {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.15s;
            }

            /* About - Responsive */
            @media (max-width: 1200px) {
                .about-section {
                    padding: 100px 40px 80px;
                }

                .about-wrapper {
                    gap: 40px;
                }

                .about-title {
                    font-size: 34px;
                }

                .about-banner {
                    min-height: 520px;
                }
            }

            @media (max-width: 1024px) {
                .about-section {
                    padding: 80px 32px 60px;
                }

                .about-wrapper {
                    grid-template-columns: 1fr;
                    gap: 32px;
                }

                .about-banner {
                    min-height: 460px;
                }

                .about-boxes {
                    max-width: 600px;
                    margin: 0 auto;
                    width: 100%;
                }

                .about-banner-float {
                    top: 16px;
                    right: 16px;
                }
            }

            @media (max-width: 768px) {
                .about-section {
                    padding: 60px 20px 48px;
                }

                .about-title {
                    font-size: 30px;
                    letter-spacing: -1px;
                }

                .about-banner {
                    min-height: 400px;
                    border-radius: 22px;
                }

                .about-banner-content {
                    padding: 28px 24px;
                }

                .about-banner-desc {
                    font-size: 14px;
                }

                .about-banner-float {
                    display: none;
                }

                .about-banner-actions {
                    flex-direction: column;
                }

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

                .about-box {
                    padding: 22px 18px;
                    border-radius: 18px;
                }

                .about-box-title {
                    font-size: 15px;
                }

                .about-box-wide {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 14px;
                }

                .about-box-wide-stats {
                    width: 100%;
                    justify-content: space-around;
                }
            }

            @media (max-width: 480px) {
                .about-section {
                    padding: 48px 16px 36px;
                }

                .about-title {
                    font-size: 26px;
                    letter-spacing: -0.8px;
                }

                .about-banner {
                    min-height: 360px;
                    border-radius: 18px;
                }

                .about-banner-content {
                    padding: 22px 18px;
                    gap: 12px;
                }

                .about-banner-desc {
                    font-size: 13px;
                }

                .about-boxes {
                    grid-template-columns: 1fr;
                    gap: 12px;
                }

                .about-box-wide {
                    grid-column: auto;
                }

                .about-box {
                    padding: 20px 16px;
                }
            }

            /* =========================================
               HİZMETLERİMİZ SECTION
               ========================================= */
            .services-section {
                padding: 120px 56px 100px;
                max-width: 1536px;
                margin: 0 auto;
                position: relative;
                background: var(--bg-main);
                overflow: clip;
            }

            .services-section::before {
                content: '';
                position: absolute;
                top: -100px;
                left: 50%;
                transform: translateX(-50%);
                width: 900px;
                height: 900px;
                background: radial-gradient(circle, rgba(0,122,255,0.03) 0%, rgba(175,82,222,0.02) 40%, transparent 70%);
                pointer-events: none;
                filter: blur(80px);
            }

            .services-header {
                text-align: center;
                margin-bottom: 72px;
                position: relative;
                z-index: 1;
            }

            .services-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(0,122,255,0.06);
                border: 1px solid rgba(0,122,255,0.1);
                border-radius: 50px;
                padding: 8px 20px;
                font-size: 13px;
                font-weight: 600;
                color: #007aff;
                letter-spacing: 0.5px;
                margin-bottom: 20px;
            }

            .services-badge svg {
                width: 16px;
                height: 16px;
            }

            .services-title {
                font-size: 52px;
                font-weight: 700;
                letter-spacing: -2px;
                color: var(--text-primary);
                line-height: 1.1;
                margin-bottom: 16px;
            }

            .services-title span {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .services-subtitle {
                font-size: 18px;
                color: var(--text-secondary);
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* Carousel Wrapper */
            .services-carousel-wrapper {
                position: relative;
                z-index: 1;
                max-width: 100%;
                margin: 0 auto;
            }

            /* Side gradient masks - on section level */
            .services-carousel-mask-left,
            .services-carousel-mask-right {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 220px;
                z-index: 6;
                pointer-events: none;
            }
            .services-carousel-mask-left {
                left: 0;
                background: linear-gradient(to right, var(--bg-main) 30%, transparent 100%);
            }
            .services-carousel-mask-right {
                right: 0;
                background: linear-gradient(to left, var(--bg-main) 30%, transparent 100%);
            }

            /* Nav buttons */
            .services-carousel-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 52px;
                height: 52px;
                border-radius: 50%;
                border: 1.5px solid rgba(0,0,0,0.1);
                background: var(--white);
                color: var(--text-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                z-index: 10;
            }
            .services-carousel-btn#services-prev {
                left: 24px;
            }
            .services-carousel-btn#services-next {
                right: 24px;
            }

            .services-carousel-btn:hover {
                background: var(--text-primary);
                color: var(--white);
                border-color: var(--text-primary);
                box-shadow: 0 8px 24px rgba(0,0,0,0.15);
                transform: translateY(-50%) scale(1.08);
            }

            .services-carousel-btn:active {
                transform: translateY(-50%) scale(0.95);
            }

            .services-carousel-btn svg {
                width: 22px;
                height: 22px;
            }

            /* Kartlar Track */
            .services-grid {
                display: flex;
                align-items: center;
                transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform;
                padding: 40px 0 60px;
            }

            .services-grid .service-card {
                flex: 0 0 340px;
                width: 340px;
                height: 400px;
                margin: 0 16px;
                transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.5s ease,
                            box-shadow 0.5s ease,
                            filter 0.5s ease;
                opacity: 0.45;
                transform: scale(0.82);
                filter: brightness(0.92);
            }

            .services-grid .service-card.active-card {
                transform: scale(1.08);
                opacity: 1;
                filter: brightness(1);
                box-shadow: 0 24px 64px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
                z-index: 3;
            }

            .services-grid .service-card.adjacent-card {
                transform: scale(0.92);
                opacity: 0.7;
                filter: brightness(0.96);
                z-index: 2;
            }

            /* Carousel Indicators */
            .services-carousel-dots {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 20px;
                position: relative;
                z-index: 1;
            }

            .services-carousel-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(0,0,0,0.1);
                border: none;
                cursor: pointer;
                transition: all 0.35s ease;
                padding: 0;
            }

            .services-carousel-dot.active {
                background: var(--text-primary);
                width: 32px;
                border-radius: 5px;
            }

            .services-carousel-dot:hover:not(.active) {
                background: rgba(0,0,0,0.25);
            }

            /* ====== SERVİS KARTI ====== */
            .service-card {
                position: relative;
                width: 100%;
                height: 430px;
                border-radius: 24px;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
                transition: box-shadow 0.5s ease, transform 0.5s ease;
            }

            .service-card:hover {
                box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
                transform: translateY(-8px);
            }

            /* Arkaplan Görseli */
            .service-card-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .service-card:hover .service-card-img {
                transform: scale(1.08);
            }

            /* === DEFAULT STATE: Beyaz alt bölüm === */
            .service-card-default {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 56%;
                background: #fff;
                z-index: 20;
                display: flex;
                flex-direction: column;
                padding: 22px 22px 18px;
                transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.4s ease;
            }

            .service-card:hover .service-card-default {
                transform: translateY(110%);
                opacity: 0;
            }

            .service-card-default-top {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
            }

            .service-card-default-title {
                font-size: 16px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -0.3px;
                line-height: 1.3;
            }

            .service-card-default-subtitle {
                font-size: 12px;
                color: var(--text-secondary);
                margin-top: 3px;
                font-weight: 500;
            }

            .service-card-heart-default {
                flex-shrink: 0;
                margin-top: 2px;
                color: #c7c7cc;
                transition: color 0.25s ease;
                background: none;
                border: none;
                cursor: pointer;
                padding: 0;
            }

            .service-card-heart-default:hover {
                color: #ff3b30;
            }

            .service-card-heart-default svg {
                width: 20px;
                height: 20px;
            }

            .service-card-desc {
                font-size: 11.5px;
                color: #86868b;
                line-height: 1.55;
                margin-top: 10px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .service-card-bottom {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                margin-top: auto;
                padding-top: 14px;
            }

            .service-card-stats {
                display: flex;
                gap: 14px;
            }

            .service-card-stat-value {
                font-size: 11px;
                font-weight: 700;
                color: var(--text-primary);
                line-height: 1.2;
            }

            .service-card-stat-label {
                font-size: 9px;
                color: #aeaeb2;
                font-weight: 500;
                margin-top: 1px;
            }

            .service-card-see-more {
                flex-shrink: 0;
                background: linear-gradient(135deg, #007aff 0%, #af52de 100%);
                color: #fff;
                font-size: 11px;
                font-weight: 600;
                padding: 8px 18px;
                border-radius: 50px;
                border: none;
                cursor: pointer;
                transition: transform 0.25s ease, box-shadow 0.25s ease;
                white-space: nowrap;
            }

            .service-card-see-more:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
            }

            /* === HOVER STATE: Gradient overlay === */
            .service-card-hover {
                position: absolute;
                inset: 0;
                z-index: 10;
                background: linear-gradient(to top, 
                    rgba(10, 25, 47, 0.92) 0%, 
                    rgba(10, 25, 47, 0.45) 45%, 
                    rgba(10, 25, 47, 0.08) 70%,
                    transparent 100%);
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 24px;
                opacity: 0;
                transition: opacity 0.5s ease;
                pointer-events: none;
            }

            .service-card:hover .service-card-hover {
                opacity: 1;
                pointer-events: auto;
            }

            /* Hover: Kalp ikonu sağ üstte */
            .service-card-heart-hover {
                position: absolute;
                top: 16px;
                right: 16px;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(255,255,255,0.15);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255,255,255,0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: background 0.25s ease, transform 0.3s ease;
                opacity: 0;
                transform: translateY(-8px);
            }

            .service-card:hover .service-card-heart-hover {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.1s;
            }

            .service-card-heart-hover:hover {
                background: rgba(255,255,255,0.25);
                transform: scale(1.1);
            }

            .service-card-heart-hover svg {
                width: 18px;
                height: 18px;
                color: #fff;
            }

            /* Hover alt içerik */
            .service-card-hover-title {
                font-size: 18px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -0.3px;
                opacity: 0;
                transform: translateY(12px);
                transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .service-card:hover .service-card-hover-title {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.12s;
            }

            .service-card-hover-subtitle {
                font-size: 12px;
                color: rgba(255,255,255,0.6);
                margin-top: 3px;
                font-weight: 500;
                opacity: 0;
                transform: translateY(12px);
                transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .service-card:hover .service-card-hover-subtitle {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.16s;
            }

            .service-card-hover-rating {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 8px;
                opacity: 0;
                transform: translateY(12px);
                transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .service-card:hover .service-card-hover-rating {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.2s;
            }

            .service-card-hover-rating svg {
                width: 14px;
                height: 14px;
                color: #fbbf24;
                fill: #fbbf24;
            }

            .service-card-hover-rating-val {
                font-size: 13px;
                color: #fff;
                font-weight: 600;
            }

            .service-card-hover-rating-sep {
                color: rgba(255,255,255,0.25);
                font-size: 12px;
            }

            .service-card-hover-rating-reviews {
                font-size: 12px;
                color: rgba(255,255,255,0.5);
                font-weight: 500;
            }

            /* Hover: See more + arrow butonu */
            .service-card-hover-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 16px;
                opacity: 0;
                transform: translateY(12px);
                transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .service-card:hover .service-card-hover-actions {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.25s;
            }

            .service-card-hover-btn {
                flex: 1;
                background: transparent;
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                padding: 11px 0;
                border-radius: 50px;
                border: 1.5px solid rgba(255,255,255,0.25);
                cursor: pointer;
                transition: background 0.25s ease, border-color 0.25s ease;
                text-align: center;
                letter-spacing: 0.2px;
            }

            .service-card-hover-btn:hover {
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.4);
            }

            .service-card-hover-arrow {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                border: 1.5px solid rgba(255,255,255,0.25);
                background: transparent;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                flex-shrink: 0;
                transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
            }

            .service-card-hover-arrow:hover {
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.4);
                transform: translateX(2px);
            }

            .service-card-hover-arrow svg {
                width: 18px;
                height: 18px;
            }

            /* Services - Carousel Animations */
            .services-carousel-wrapper.reveal {
                opacity: 0;
                transform: translateY(40px);
                transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .services-carousel-wrapper.reveal.visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* Services - Responsive */
            @media (max-width: 1200px) {
                .services-section {
                    padding: 100px 40px 80px;
                }

                .services-grid .service-card {
                    flex: 0 0 300px;
                    width: 300px;
                    height: 380px;
                }

                .services-carousel-mask-left,
                .services-carousel-mask-right {
                    width: 120px;
                }
            }

            @media (max-width: 1024px) {
                .services-section {
                    padding: 80px 32px 60px;
                }

                .services-title {
                    font-size: 42px;
                }

                .services-grid .service-card {
                    flex: 0 0 280px;
                    width: 280px;
                    height: 370px;
                    margin: 0 12px;
                }

                .services-carousel-btn {
                    width: 44px;
                    height: 44px;
                }
                .services-carousel-btn#services-prev { left: 16px; }
                .services-carousel-btn#services-next { right: 16px; }

                .services-carousel-btn svg {
                    width: 18px;
                    height: 18px;
                }

                .services-carousel-mask-left,
                .services-carousel-mask-right {
                    width: 80px;
                }
            }

            @media (max-width: 768px) {
                .services-section {
                    padding: 60px 20px 48px;
                }

                .services-title {
                    font-size: 34px;
                    letter-spacing: -1.5px;
                }

                .services-subtitle {
                    font-size: 16px;
                }

                .services-header {
                    margin-bottom: 40px;
                }

                .services-grid .service-card {
                    flex: 0 0 260px;
                    width: 260px;
                    height: 360px;
                    margin: 0 10px;
                }

                .services-grid .service-card.active-card {
                    transform: scale(1.05);
                }

                .services-carousel-btn {
                    width: 40px;
                    height: 40px;
                }
                .services-carousel-btn#services-prev { left: 10px; }
                .services-carousel-btn#services-next { right: 10px; }

                .services-carousel-btn svg {
                    width: 16px;
                    height: 16px;
                }

                .services-carousel-mask-left,
                .services-carousel-mask-right {
                    width: 50px;
                }
            }

            @media (max-width: 480px) {
                .services-section {
                    padding: 48px 16px 36px;
                }

                .services-title {
                    font-size: 28px;
                    letter-spacing: -1px;
                }

                .services-subtitle {
                    font-size: 14px;
                }

                .services-grid .service-card {
                    flex: 0 0 240px;
                    width: 240px;
                    height: 360px;
                    margin: 0 8px;
                }

                .services-carousel-btn {
                    width: 36px;
                    height: 36px;
                }
                .services-carousel-btn#services-prev { left: 6px; }
                .services-carousel-btn#services-next { right: 6px; }

                .services-carousel-btn svg {
                    width: 14px;
                    height: 14px;
                }

                .services-carousel-mask-left,
                .services-carousel-mask-right {
                    width: 30px;
                }

                .services-carousel-dots {
                    margin-top: 16px;
                }
            }

            /* =========================================
               FUARLARIMIZ SECTION
               ========================================= */
            .fairs-section {
                padding: 120px 0 100px;
                position: relative;
                background: #0a0f1e;
                overflow: hidden;
            }

            .fairs-section::before {
                content: '';
                position: absolute;
                top: -300px;
                left: 50%;
                transform: translateX(-50%);
                width: 1200px;
                height: 1200px;
                background: radial-gradient(circle, rgba(0,122,255,0.08) 0%, rgba(175,82,222,0.05) 30%, transparent 60%);
                pointer-events: none;
            }

            .fairs-section::after {
                content: '';
                position: absolute;
                bottom: -200px;
                right: -100px;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(175,82,222,0.06) 0%, transparent 60%);
                pointer-events: none;
            }

            .fairs-inner {
                max-width: 1536px;
                margin: 0 auto;
                padding: 0 56px;
            }

            .fairs-header {
                text-align: center;
                margin-bottom: 72px;
                position: relative;
                z-index: 1;
            }

            .fairs-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(175,82,222,0.12);
                border: 1px solid rgba(175,82,222,0.2);
                border-radius: 50px;
                padding: 8px 20px;
                font-size: 13px;
                font-weight: 600;
                color: #af52de;
                letter-spacing: 0.5px;
                margin-bottom: 20px;
            }

            .fairs-badge svg {
                width: 16px;
                height: 16px;
            }

            .fairs-title {
                font-size: 52px;
                font-weight: 700;
                letter-spacing: -2px;
                color: #fff;
                line-height: 1.1;
                margin-bottom: 16px;
            }

            .fairs-title span {
                background: linear-gradient(135deg, #af52de 0%, #007aff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .fairs-subtitle {
                font-size: 18px;
                color: rgba(255,255,255,0.45);
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* ======== HERO FUAR KARTI ======== */
            .fair-hero {
                position: relative;
                border-radius: 28px;
                overflow: hidden;
                height: 440px;
                cursor: pointer;
                z-index: 1;
                margin-bottom: 48px;
            }

            .fair-hero-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .fair-hero:hover .fair-hero-img {
                transform: scale(1.04);
            }

            .fair-hero-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg,
                    rgba(10, 15, 30, 0.88) 0%,
                    rgba(10, 15, 30, 0.5) 50%,
                    rgba(10, 15, 30, 0.15) 100%);
                display: flex;
                align-items: flex-end;
                padding: 48px;
            }

            .fair-hero-content {
                max-width: 560px;
            }

            .fair-hero-status {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 7px 16px;
                border-radius: 50px;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                margin-bottom: 20px;
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
            }

            .fair-hero-status.upcoming {
                background: rgba(0, 122, 255, 0.15);
                color: #5ac8fa;
                border: 1px solid rgba(90, 200, 250, 0.2);
            }

            .fair-hero-status.upcoming::before {
                content: '';
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #5ac8fa;
                animation: heroPulse 2s infinite;
            }

            @keyframes heroPulse {
                0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(90,200,250,0.5); }
                50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(90,200,250,0); }
            }

            .fair-hero-date {
                font-size: 14px;
                color: rgba(255,255,255,0.5);
                font-weight: 500;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .fair-hero-date svg {
                width: 15px;
                height: 15px;
                opacity: 0.5;
            }

            .fair-hero-name {
                font-size: 36px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -1px;
                margin-bottom: 8px;
                line-height: 1.15;
            }

            .fair-hero-location {
                font-size: 15px;
                color: rgba(255,255,255,0.55);
                display: flex;
                align-items: center;
                gap: 6px;
                font-weight: 500;
                margin-bottom: 24px;
            }

            .fair-hero-location svg {
                width: 16px;
                height: 16px;
                opacity: 0.6;
            }

            .fair-hero-tags {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                margin-bottom: 28px;
            }

            .fair-tag {
                padding: 6px 14px;
                border-radius: 50px;
                font-size: 12px;
                font-weight: 600;
                background: rgba(255,255,255,0.08);
                color: rgba(255,255,255,0.75);
                border: 1px solid rgba(255,255,255,0.1);
                backdrop-filter: blur(8px);
                transition: all 0.3s ease;
            }

            .fair-tag:hover {
                background: rgba(255,255,255,0.15);
                border-color: rgba(255,255,255,0.2);
            }

            .fair-hero-btn {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 13px 28px;
                border-radius: 50px;
                background: rgba(255,255,255,0.1);
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                border: 1.5px solid rgba(255,255,255,0.15);
                cursor: pointer;
                transition: all 0.4s ease;
                backdrop-filter: blur(12px);
                letter-spacing: 0.2px;
            }

            .fair-hero-btn:hover {
                background: rgba(255,255,255,0.2);
                border-color: rgba(255,255,255,0.3);
                transform: translateY(-2px);
                box-shadow: 0 12px 32px rgba(0,0,0,0.3);
            }

            .fair-hero-btn svg {
                width: 16px;
                height: 16px;
                transition: transform 0.3s ease;
            }

            .fair-hero-btn:hover svg {
                transform: translateX(3px);
            }

            /* Hero sağ: Countdown / Stats */
            .fair-hero-stats {
                position: absolute;
                right: 48px;
                bottom: 48px;
                display: flex;
                gap: 12px;
                z-index: 2;
            }

            .fair-hero-stat {
                width: 90px;
                height: 90px;
                border-radius: 20px;
                background: rgba(255,255,255,0.07);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255,255,255,0.1);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                transition: all 0.3s ease;
            }

            .fair-hero-stat:hover {
                background: rgba(255,255,255,0.12);
                transform: translateY(-3px);
            }

            .fair-hero-stat-val {
                font-size: 26px;
                font-weight: 700;
                color: #fff;
                line-height: 1;
            }

            .fair-hero-stat-label {
                font-size: 10px;
                color: rgba(255,255,255,0.5);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.8px;
            }

            /* ======== TIMELINE KARTLARI ======== */
            .fairs-timeline-label {
                font-size: 13px;
                font-weight: 600;
                color: rgba(255,255,255,0.3);
                letter-spacing: 1px;
                text-transform: uppercase;
                margin-bottom: 24px;
                display: flex;
                align-items: center;
                gap: 12px;
                position: relative;
                z-index: 1;
            }

            .fairs-timeline-label::after {
                content: '';
                flex: 1;
                height: 1px;
                background: linear-gradient(to right, rgba(255,255,255,0.1), transparent);
            }

            .fairs-timeline {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                position: relative;
                z-index: 1;
            }

            .fair-tl-card {
                position: relative;
                border-radius: 22px;
                overflow: hidden;
                cursor: pointer;
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.06);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .fair-tl-card:hover {
                background: rgba(255,255,255,0.08);
                border-color: rgba(255,255,255,0.12);
                transform: translateY(-8px);
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            }

            .fair-tl-card-img-wrap {
                position: relative;
                overflow: hidden;
                height: 180px;
            }

            .fair-tl-card-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .fair-tl-card:hover .fair-tl-card-img {
                transform: scale(1.08);
            }

            .fair-tl-card-img-wrap::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(10,15,30,0.6) 0%, transparent 50%);
                pointer-events: none;
            }

            .fair-tl-status {
                position: absolute;
                top: 14px;
                left: 14px;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 4px 11px;
                border-radius: 50px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                z-index: 2;
            }

            .fair-tl-status.urgent {
                background: rgba(255, 59, 48, 0.2);
                color: #ff453a;
                border: 1px solid rgba(255, 59, 48, 0.3);
            }

            .fair-tl-status.urgent::before {
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #ff453a;
                animation: heroPulse 1.5s infinite;
            }

            .fair-tl-status.warning {
                background: rgba(255, 149, 0, 0.2);
                color: #ff9f0a;
                border: 1px solid rgba(255, 149, 0, 0.3);
            }

            .fair-tl-status.warning::before {
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #ff9f0a;
                animation: heroPulse 2s infinite;
            }

            .fair-tl-status.early {
                background: rgba(0, 122, 255, 0.15);
                color: #5ac8fa;
                border: 1px solid rgba(90, 200, 250, 0.25);
            }

            .fair-tl-status.early::before {
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #5ac8fa;
            }

            .fair-tl-status.filling {
                background: rgba(175, 82, 222, 0.2);
                color: #bf5af2;
                border: 1px solid rgba(175, 82, 222, 0.3);
            }

            .fair-tl-status.filling::before {
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #bf5af2;
                animation: heroPulse 2s infinite;
            }

            /* Fuar numarası - kart üstünde */
            .fair-tl-number {
                position: absolute;
                top: 14px;
                right: 14px;
                width: 32px;
                height: 32px;
                border-radius: 10px;
                background: rgba(255,255,255,0.1);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255,255,255,0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 700;
                color: rgba(255,255,255,0.7);
                z-index: 2;
            }

            .fair-tl-card-body {
                padding: 20px 20px 22px;
            }

            .fair-tl-date {
                font-size: 12px;
                color: rgba(255,255,255,0.35);
                font-weight: 500;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .fair-tl-date svg {
                width: 13px;
                height: 13px;
                opacity: 0.5;
            }

            .fair-tl-name {
                font-size: 17px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -0.3px;
                margin-bottom: 6px;
                line-height: 1.3;
                transition: color 0.3s ease;
            }

            .fair-tl-card:hover .fair-tl-name {
                background: linear-gradient(135deg, #af52de, #007aff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .fair-tl-location {
                font-size: 13px;
                color: rgba(255,255,255,0.4);
                display: flex;
                align-items: center;
                gap: 5px;
                font-weight: 500;
                margin-bottom: 16px;
            }

            .fair-tl-location svg {
                width: 13px;
                height: 13px;
                opacity: 0.5;
            }

            .fair-tl-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .fair-tl-tags {
                display: flex;
                gap: 6px;
            }

            .fair-tl-tag {
                padding: 4px 10px;
                border-radius: 50px;
                font-size: 10px;
                font-weight: 600;
                background: rgba(0,122,255,0.1);
                color: rgba(90,200,250,0.8);
                border: 1px solid rgba(0,122,255,0.15);
            }

            .fair-tl-arrow {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                flex-shrink: 0;
            }

            .fair-tl-card:hover .fair-tl-arrow {
                background: linear-gradient(135deg, #007aff, #af52de);
                border-color: transparent;
                transform: translateX(2px);
            }

            .fair-tl-arrow svg {
                width: 14px;
                height: 14px;
                color: rgba(255,255,255,0.4);
                transition: color 0.3s ease;
            }

            .fair-tl-card:hover .fair-tl-arrow svg {
                color: #fff;
            }

            /* Tüm Fuarları Gör Butonu */
            .fairs-cta {
                text-align: center;
                margin-top: 56px;
                position: relative;
                z-index: 1;
            }

            .fairs-cta-btn {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 16px 36px;
                border-radius: 60px;
                background: transparent;
                color: #fff;
                font-size: 15px;
                font-weight: 600;
                border: 1.5px solid rgba(255,255,255,0.12);
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                letter-spacing: -0.2px;
                text-decoration: none;
                backdrop-filter: blur(12px);
            }

            .fairs-cta-btn:hover {
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.25);
                box-shadow: 0 12px 40px rgba(0,0,0,0.3);
                transform: translateY(-3px);
            }

            .fairs-cta-btn svg {
                width: 18px;
                height: 18px;
                transition: transform 0.3s ease;
            }

            .fairs-cta-btn:hover svg {
                transform: translateX(4px);
            }

            /* Fairs Animations */
            .fair-hero,
            .fair-tl-card {
                opacity: 0;
                transform: translateY(40px);
            }

            .fair-hero.visible {
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .fair-tl-card.visible {
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                            background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
            }

            .fair-tl-card.visible:hover {
                transform: translateY(-8px);
            }

            /* Fairs Responsive */
            @media (max-width: 1200px) {
                .fairs-inner {
                    padding: 0 40px;
                }
                .fairs-section {
                    padding: 100px 0 80px;
                }
                .fair-hero {
                    height: 380px;
                }
                .fair-hero-name {
                    font-size: 30px;
                }
                .fair-hero-stats {
                    right: 36px;
                    bottom: 36px;
                }
                .fair-hero-stat {
                    width: 80px;
                    height: 80px;
                }
                .fair-hero-stat-val {
                    font-size: 22px;
                }
            }

            @media (max-width: 1024px) {
                .fairs-inner {
                    padding: 0 32px;
                }
                .fairs-section {
                    padding: 80px 0 60px;
                }
                .fairs-title {
                    font-size: 42px;
                }
                .fairs-timeline {
                    grid-template-columns: repeat(2, 1fr);
                }
                .fair-hero {
                    height: 360px;
                }
                .fair-hero-name {
                    font-size: 26px;
                }
                .fair-hero-stats {
                    position: relative;
                    right: auto;
                    bottom: auto;
                    margin-top: 20px;
                }
                .fair-hero-overlay {
                    flex-direction: column;
                    justify-content: flex-end;
                }
            }

            @media (max-width: 768px) {
                .fairs-inner {
                    padding: 0 20px;
                }
                .fairs-section {
                    padding: 60px 0 48px;
                }
                .fairs-title {
                    font-size: 34px;
                    letter-spacing: -1.5px;
                }
                .fairs-subtitle {
                    font-size: 16px;
                }
                .fairs-header {
                    margin-bottom: 40px;
                }
                .fair-hero {
                    height: 320px;
                    border-radius: 20px;
                }
                .fair-hero-overlay {
                    padding: 28px;
                }
                .fair-hero-name {
                    font-size: 22px;
                }
                .fair-hero-stat {
                    width: 68px;
                    height: 68px;
                    border-radius: 14px;
                }
                .fair-hero-stat-val {
                    font-size: 18px;
                }
                .fair-hero-stat-label {
                    font-size: 9px;
                }
                .fairs-timeline {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 14px;
                }
                .fair-tl-card-img-wrap {
                    height: 140px;
                }
            }

            @media (max-width: 480px) {
                .fairs-inner {
                    padding: 0 16px;
                }
                .fairs-section {
                    padding: 48px 0 36px;
                }
                .fairs-title {
                    font-size: 28px;
                    letter-spacing: -1px;
                }
                .fairs-subtitle {
                    font-size: 14px;
                }
                .fair-hero {
                    height: 300px;
                    border-radius: 16px;
                    margin-bottom: 32px;
                }
                .fair-hero-overlay {
                    padding: 20px;
                }
                .fair-hero-name {
                    font-size: 20px;
                }
                .fair-hero-btn {
                    padding: 10px 20px;
                    font-size: 13px;
                }
                .fair-hero-stats {
                    gap: 8px;
                }
                .fair-hero-stat {
                    width: 60px;
                    height: 60px;
                    border-radius: 12px;    
                }
                .fair-hero-stat-val {
                    font-size: 16px;
                }
                .fairs-timeline {
                    grid-template-columns: 1fr;
                    gap: 12px;
                }
                .fair-tl-card-img-wrap {
                    height: 160px;
                }
                .fairs-cta {
                    margin-top: 36px;
                }
                .fairs-cta-btn {
                    padding: 14px 28px;
                    font-size: 14px;
                }
            }

            /* =========================================
               ORTAKLARIMIZ SECTION
               ========================================= */
            .partners-section {
                padding: 100px 56px 80px;
                max-width: 1536px;
                margin: 0 auto;
                position: relative;
                overflow: clip;
            }

            .partners-section::before {
                content: '';
                position: absolute;
                top: -200px;
                left: 50%;
                transform: translateX(-50%);
                width: 800px;
                height: 800px;
                background: radial-gradient(circle, rgba(0,122,255,0.04) 0%, rgba(175,82,222,0.03) 40%, transparent 70%);
                pointer-events: none;
                filter: blur(60px);
            }

            .partners-header {
                text-align: center;
                margin-bottom: 64px;
                position: relative;
                z-index: 1;
            }

            .partners-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(0,122,255,0.06);
                border: 1px solid rgba(0,122,255,0.1);
                border-radius: 50px;
                padding: 8px 20px;
                font-size: 13px;
                font-weight: 600;
                color: #007aff;
                letter-spacing: 0.5px;
                margin-bottom: 20px;
            }

            .partners-badge svg {
                width: 16px;
                height: 16px;
            }

            .partners-title {
                font-size: 52px;
                font-weight: 700;
                letter-spacing: -2px;
                color: var(--text-primary);
                line-height: 1.1;
                margin-bottom: 16px;
            }

            .partners-title span {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .partners-subtitle {
                font-size: 18px;
                color: var(--text-secondary);
                max-width: 600px;
                margin: 0 auto;
                line-height: 1.6;
            }

            /* Marquee / Kayar Şerit */
            .partners-marquee-wrapper {
                position: relative;
                z-index: 1;
                overflow-x: clip;
                overflow-y: visible;
                padding: 16px 0;
                margin: -16px 0;
            }

            .partners-marquee-wrapper::before,
            .partners-marquee-wrapper::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 180px;
                z-index: 10;
                pointer-events: none;
            }

            .partners-marquee-wrapper::before {
                left: 0;
                background: linear-gradient(90deg, var(--bg-main) 0%, var(--bg-main) 10%, transparent 100%);
            }

            .partners-marquee-wrapper::after {
                right: 0;
                background: linear-gradient(-90deg, var(--bg-main) 0%, var(--bg-main) 10%, transparent 100%);
            }

            .partners-row {
                display: flex;
                gap: 20px;
                margin-bottom: 20px;
                animation: scrollLeft 35s linear infinite;
                width: max-content;
                will-change: transform;
            }

            .partners-row:nth-child(2) {
                animation: scrollRight 40s linear infinite;
            }

            .partners-row:hover {
                animation-play-state: paused;
            }

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

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

            /* Ortak Kartı - Şirket Odaklı */
            .partner-card {
                flex-shrink: 0;
                width: 240px;
                background: var(--white);
                border-radius: 20px;
                padding: 28px 24px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.04),
                            inset 0 0 0 1px rgba(255,255,255,0.9);
                border: 1px solid rgba(0,0,0,0.04);
                transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
                cursor: pointer;
                position: relative;
                overflow: visible;
            }

            .partner-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--gradient-primary);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .partner-card:hover::before {
                opacity: 1;
            }

            .partner-card:hover {
                transform: translateY(-8px) scale(1.02);
                box-shadow: 0 20px 50px rgba(0,0,0,0.08),
                            0 0 0 1px rgba(0,122,255,0.08);
            }

            .partner-logo {
                width: 72px;
                height: 72px;
                border-radius: 18px;
                object-fit: contain;
                padding: 8px;
                background: #f5f5f7;
                box-shadow: 0 4px 14px rgba(0,0,0,0.06);
                transition: transform 0.3s ease;
            }

            .partner-card:hover .partner-logo {
                transform: scale(1.08);
            }

            .partner-info {
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .partner-name {
                font-size: 15px;
                font-weight: 700;
                color: var(--text-primary);
                letter-spacing: -0.3px;
            }

            .partner-sector {
                font-size: 12px;
                color: var(--text-secondary);
                font-weight: 500;
            }

            .partner-tag {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: rgba(0,122,255,0.05);
                padding: 6px 14px;
                border-radius: 50px;
                font-size: 11px;
                font-weight: 600;
                color: #007aff;
                letter-spacing: 0.2px;
            }

            .partner-tag svg {
                width: 13px;
                height: 13px;
            }

            /* Partners - Responsive */
            @media (max-width: 1024px) {
                .partners-section {
                    padding: 80px 32px 60px;
                }

                .partners-title {
                    font-size: 42px;
                }
            }

            @media (max-width: 768px) {
                .partners-section {
                    padding: 60px 20px 48px;
                }

                .partners-title {
                    font-size: 34px;
                    letter-spacing: -1.5px;
                }

                .partners-subtitle {
                    font-size: 16px;
                }

                .partners-header {
                    margin-bottom: 40px;
                }

                .partner-card {
                    width: 200px;
                    padding: 22px 16px;
                    border-radius: 16px;
                }

                .partner-logo {
                    width: 60px;
                    height: 60px;
                    border-radius: 14px;
                }

                .partner-name {
                    font-size: 14px;
                }

                .partners-marquee-wrapper::before,
                .partners-marquee-wrapper::after {
                    width: 60px;
                }

                .partners-row {
                    gap: 14px;
                    margin-bottom: 14px;
                }
            }

            @media (max-width: 480px) {
                .partners-section {
                    padding: 48px 16px 36px;
                }

                .partners-title {
                    font-size: 28px;
                    letter-spacing: -1px;
                }

                .partners-subtitle {
                    font-size: 14px;
                }

                .partner-card {
                    width: 170px;
                    padding: 18px 14px;
                    gap: 10px;
                }

                .partner-logo {
                    width: 48px;
                    height: 48px;
                    border-radius: 12px;
                    padding: 6px;
                }

                .partner-name {
                    font-size: 13px;
                }

                .partner-sector {
                    font-size: 10px;
                }

                .partner-tag {
                    font-size: 10px;
                    padding: 5px 12px;
                }

                .partners-marquee-wrapper::before,
                .partners-marquee-wrapper::after {
                    width: 40px;
                }
            }

            /* =========================================
               İLETİŞİM BÖLÜMÜ - PREMIUM
            ========================================= */
            .contact-section {
                position: relative;
                overflow: hidden;
            }

            /* ÜSTTE DARK CTA BANNER */
            .contact-hero {
                background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 40%, #0d0d2b 100%);
                padding: 120px 56px 180px;
                position: relative;
                overflow: hidden;
            }

            .contact-hero::before {
                content: '';
                position: absolute;
                top: -40%;
                right: -10%;
                width: 700px;
                height: 700px;
                background: radial-gradient(circle, rgba(0,122,255,0.15) 0%, rgba(175,82,222,0.08) 50%, transparent 70%);
                filter: blur(80px);
                pointer-events: none;
                animation: contactOrbFloat 8s ease-in-out infinite;
            }

            .contact-hero::after {
                content: '';
                position: absolute;
                bottom: -30%;
                left: -5%;
                width: 500px;
                height: 500px;
                background: radial-gradient(circle, rgba(175,82,222,0.12) 0%, rgba(0,122,255,0.06) 50%, transparent 70%);
                filter: blur(60px);
                pointer-events: none;
                animation: contactOrbFloat 10s ease-in-out infinite reverse;
            }

            @keyframes contactOrbFloat {
                0%, 100% { transform: translate(0, 0) scale(1); }
                50% { transform: translate(30px, -20px) scale(1.05); }
            }

            /* Grid pattern overlay */
            .contact-hero-grid {
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none;
            }

            .contact-hero-inner {
                max-width: 1536px;
                margin: 0 auto;
                position: relative;
                z-index: 2;
                text-align: center;
            }

            .contact-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.1);
                backdrop-filter: blur(10px);
                border-radius: 50px;
                padding: 10px 24px;
                font-size: 13px;
                font-weight: 600;
                color: rgba(255,255,255,0.7);
                letter-spacing: 1px;
                text-transform: uppercase;
                margin-bottom: 28px;
            }

            .contact-badge svg {
                width: 16px;
                height: 16px;
                color: #007aff;
            }

            .contact-title {
                font-size: 64px;
                font-weight: 700;
                letter-spacing: -3px;
                color: white;
                line-height: 1.05;
                margin-bottom: 20px;
            }

            .contact-title span {
                background: linear-gradient(135deg, #5ac8fa 0%, #007aff 40%, #af52de 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .contact-subtitle {
                font-size: 19px;
                color: rgba(255,255,255,0.45);
                max-width: 560px;
                margin: 0 auto;
                line-height: 1.7;
            }

            /* KAYAN STAT BAR */
            .contact-stats {
                display: flex;
                justify-content: center;
                gap: 48px;
                margin-top: 56px;
            }

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

            .contact-stat-number {
                font-size: 36px;
                font-weight: 700;
                letter-spacing: -1.5px;
                background: linear-gradient(135deg, #5ac8fa, #af52de);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                line-height: 1.2;
            }

            .contact-stat-label {
                font-size: 13px;
                color: rgba(255,255,255,0.35);
                font-weight: 500;
                letter-spacing: 0.5px;
                margin-top: 4px;
            }

            /* İÇERİK ALANI - Form + Kartlar */
            .contact-content {
                max-width: 1536px;
                margin: 0 auto;
                padding: 0 56px;
                position: relative;
                z-index: 3;
                margin-top: -120px;
            }

            /* Üstteki yatay mini kartlar */
            .contact-info-strip {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                margin-bottom: 40px;
            }

            .contact-info-card {
                background: rgba(255,255,255,0.95);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border-radius: 20px;
                padding: 28px 24px;
                text-align: center;
                box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.8) inset;
                border: 1px solid rgba(0,0,0,0.04);
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                position: relative;
                overflow: hidden;
            }

            .contact-info-card::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 3px;
                background: var(--gradient-primary);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .contact-info-card:hover::before {
                opacity: 1;
            }

            .contact-info-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,122,255,0.1) inset;
            }

            .contact-info-icon {
                width: 56px;
                height: 56px;
                border-radius: 18px;
                background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.08));
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 16px;
                transition: all 0.3s ease;
            }

            .contact-info-card:hover .contact-info-icon {
                background: var(--gradient-primary);
                box-shadow: 0 6px 20px rgba(0,122,255,0.3);
            }

            .contact-info-icon svg {
                width: 24px;
                height: 24px;
                color: #007aff;
                transition: color 0.3s ease;
            }

            .contact-info-card:hover .contact-info-icon svg {
                color: white;
            }

            .contact-info-card h4 {
                font-size: 15px;
                font-weight: 700;
                color: var(--text-primary);
                margin-bottom: 4px;
                letter-spacing: -0.3px;
            }

            .contact-info-card .card-desc {
                font-size: 12px;
                color: var(--text-secondary);
                margin-bottom: 14px;
                line-height: 1.5;
            }

            .contact-info-card p {
                font-size: 13px;
                color: var(--text-secondary);
                line-height: 1.6;
            }

            .contact-info-detail {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                background: rgba(0,0,0,0.025);
                border-radius: 10px;
                margin-bottom: 6px;
                transition: all 0.25s ease;
            }

            .contact-info-detail:last-child {
                margin-bottom: 0;
            }

            .contact-info-detail:hover {
                background: rgba(0,122,255,0.05);
            }

            .contact-info-detail .detail-icon {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.06));
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .contact-info-detail .detail-icon svg {
                width: 14px;
                height: 14px;
                color: #007aff;
            }

            .contact-info-detail .detail-text {
                display: flex;
                flex-direction: column;
                gap: 1px;
                text-align: left;
                flex: 1;
            }

            .contact-info-detail .detail-label {
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.8px;
                color: var(--text-secondary);
                opacity: 0.7;
            }

            .contact-info-detail .detail-value {
                font-size: 13px;
                font-weight: 600;
                color: var(--text-primary);
                letter-spacing: -0.1px;
            }

            .contact-info-card a {
                color: #007aff;
                text-decoration: none;
                font-weight: 600;
                transition: color 0.2s ease;
            }

            .contact-info-card a:hover {
                color: #af52de;
            }

            .card-action {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                margin-top: 12px;
                font-size: 12px;
                font-weight: 600;
                color: #007aff;
                text-decoration: none;
                padding: 6px 14px;
                background: rgba(0,122,255,0.06);
                border-radius: 50px;
                transition: all 0.3s ease;
            }

            .card-action:hover {
                background: rgba(0,122,255,0.12);
                color: #0056cc;
                transform: translateX(2px);
            }

            .card-action svg {
                width: 12px;
                height: 12px;
                transition: transform 0.3s ease;
            }

            .card-action:hover svg {
                transform: translateX(2px);
            }

            .card-status {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 11px;
                font-weight: 600;
                padding: 5px 12px;
                border-radius: 50px;
                margin-top: 12px;
            }

            .card-status.open {
                background: rgba(52,199,89,0.08);
                color: #34c759;
            }

            .card-status .status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: currentColor;
                animation: statusPulse 2s ease-in-out infinite;
            }

            @keyframes statusPulse {
                0%, 100% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.5; transform: scale(0.8); }
            }

            /* FORM ALANI - bento grid */
            .contact-main-grid {
                display: grid;
                grid-template-columns: 1.1fr 0.9fr;
                gap: 32px;
                align-items: start;
            }

            /* Sol: Form */
            .contact-form-wrapper {
                background: var(--white);
                border-radius: 28px;
                padding: 48px;
                box-shadow: 0 8px 40px rgba(0,0,0,0.06);
                border: 1px solid rgba(0,0,0,0.04);
                position: relative;
                overflow: hidden;
            }

            .contact-form-wrapper::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 4px;
                background: var(--gradient-primary);
            }

            .form-header {
                margin-bottom: 32px;
            }

            .form-header h3 {
                font-size: 26px;
                font-weight: 700;
                letter-spacing: -1px;
                color: var(--text-primary);
                margin-bottom: 8px;
            }

            .form-header p {
                font-size: 15px;
                color: var(--text-secondary);
                line-height: 1.6;
            }

            .contact-form {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .form-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }

            .form-group {
                display: flex;
                flex-direction: column;
                gap: 8px;
                position: relative;
            }

            .form-group label {
                font-size: 13px;
                font-weight: 600;
                color: var(--text-primary);
                letter-spacing: 0.2px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .form-group label .label-icon {
                width: 16px;
                height: 16px;
                color: #007aff;
                opacity: 0.5;
            }

            .form-group input,
            .form-group textarea,
            .form-group select {
                width: 100%;
                padding: 16px 20px;
                border: 2px solid rgba(0,0,0,0.06);
                border-radius: 16px;
                font-size: 15px;
                font-family: inherit;
                color: var(--text-primary);
                background: #f8f8fa;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                outline: none;
            }

            .form-group input::placeholder,
            .form-group textarea::placeholder {
                color: #c7c7cc;
            }

            .form-group input:focus,
            .form-group textarea:focus,
            .form-group select:focus {
                border-color: #007aff;
                background: var(--white);
                box-shadow: 0 0 0 5px rgba(0,122,255,0.06), 0 4px 16px rgba(0,122,255,0.06);
            }

            .form-group textarea {
                resize: vertical;
                min-height: 130px;
            }

            .form-actions {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 8px;
            }

            .form-submit {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                background: var(--gradient-primary);
                color: white;
                border: none;
                padding: 18px 40px;
                border-radius: 50px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
                box-shadow: 0 6px 24px rgba(0,122,255,0.3);
                font-family: inherit;
                position: relative;
                overflow: hidden;
            }

            .form-submit::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .form-submit:hover::before {
                opacity: 1;
            }

            .form-submit:hover {
                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 12px 36px rgba(0,122,255,0.4);
            }

            .form-submit svg {
                width: 18px;
                height: 18px;
                transition: transform 0.3s ease;
            }

            .form-submit:hover svg {
                transform: translate(3px, -3px);
            }

            .form-hint {
                font-size: 12px;
                color: var(--text-secondary);
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .form-hint svg {
                width: 14px;
                height: 14px;
                color: #34c759;
            }

            /* Sağ: Harita + CTA */
            .contact-side {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }

            .contact-map-card {
                border-radius: 24px;
                overflow: hidden;
                box-shadow: 0 8px 40px rgba(0,0,0,0.06);
                border: 1px solid rgba(0,0,0,0.04);
                background: var(--white);
            }

            .contact-map-card iframe {
                width: 100%;
                height: 280px;
                border: none;
                display: block;
            }

            .contact-map-info {
                padding: 20px 24px;
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .contact-map-pin {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                background: linear-gradient(135deg, #ff3b30, #ff9500);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .contact-map-pin svg {
                width: 20px;
                height: 20px;
                color: white;
            }

            .contact-map-text {
                font-size: 14px;
                font-weight: 600;
                color: var(--text-primary);
                line-height: 1.4;
            }

            .contact-map-text span {
                display: block;
                font-size: 12px;
                font-weight: 400;
                color: var(--text-secondary);
            }

            /* Premium CTA Card */
            .contact-cta-card {
                background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 100%);
                border-radius: 24px;
                padding: 36px 32px;
                position: relative;
                overflow: hidden;
            }

            .contact-cta-card::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -30%;
                width: 250px;
                height: 250px;
                background: radial-gradient(circle, rgba(0,122,255,0.2), transparent 70%);
                filter: blur(40px);
                pointer-events: none;
            }

            .contact-cta-card h4 {
                font-size: 20px;
                font-weight: 700;
                color: white;
                letter-spacing: -0.5px;
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }

            .contact-cta-card p {
                font-size: 14px;
                color: rgba(255,255,255,0.45);
                line-height: 1.6;
                margin-bottom: 24px;
                position: relative;
                z-index: 1;
            }

            .contact-cta-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.15);
                backdrop-filter: blur(10px);
                color: white;
                padding: 14px 28px;
                border-radius: 50px;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                transition: all 0.3s ease;
                position: relative;
                z-index: 1;
            }

            .contact-cta-btn:hover {
                background: rgba(255,255,255,0.18);
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            }

            .contact-cta-btn svg {
                width: 16px;
                height: 16px;
                transition: transform 0.3s ease;
            }

            .contact-cta-btn:hover svg {
                transform: translateX(3px);
            }

            /* Hızlı İletişim Bar */
            .contact-quick-bar {
                display: flex;
                gap: 12px;
                margin-top: 20px;
                position: relative;
                z-index: 1;
            }

            .quick-contact-chip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 50px;
                padding: 8px 16px;
                font-size: 12px;
                color: rgba(255,255,255,0.6);
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .quick-contact-chip:hover {
                background: rgba(255,255,255,0.12);
                color: white;
            }

            .quick-contact-chip svg {
                width: 14px;
                height: 14px;
            }

            /* Alt bölüm padding */
            .contact-bottom-space {
                padding-bottom: 80px;
            }

            /* =========================================
               FOOTER
            ========================================= */
            .site-footer {
                background: #1d1d1f;
                color: rgba(255,255,255,0.8);
                padding: 80px 56px 0;
                position: relative;
                overflow: hidden;
            }

            .site-footer::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--gradient-primary);
            }

            .footer-grid {
                max-width: 1536px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1.5fr 1fr 1fr 1fr;
                gap: 48px;
                padding-bottom: 60px;
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }

            .footer-brand .logo {
                margin-bottom: 20px;
            }

            .footer-brand .logo-text {
                color: white;
            }

            .footer-brand p {
                font-size: 15px;
                line-height: 1.7;
                color: rgba(255,255,255,0.5);
                max-width: 320px;
                margin-bottom: 24px;
            }

            .footer-socials {
                display: flex;
                gap: 12px;
            }

            .footer-social-link {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                text-decoration: none;
            }

            .footer-social-link:hover {
                background: var(--gradient-primary);
                border-color: transparent;
                transform: translateY(-3px);
                box-shadow: 0 6px 20px rgba(0,122,255,0.3);
            }

            .footer-social-link svg {
                width: 18px;
                height: 18px;
                color: rgba(255,255,255,0.6);
            }

            .footer-social-link:hover svg {
                color: white;
            }

            .footer-col h4 {
                font-size: 14px;
                font-weight: 700;
                color: white;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                margin-bottom: 24px;
            }

            .footer-col ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 14px;
            }

            .footer-col ul li a {
                color: rgba(255,255,255,0.5);
                text-decoration: none;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.25s ease;
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .footer-col ul li a:hover {
                color: white;
                transform: translateX(4px);
            }

            .footer-bottom {
                max-width: 1536px;
                margin: 0 auto;
                padding: 28px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .footer-bottom p {
                font-size: 13px;
                color: rgba(255,255,255,0.35);
            }

            .footer-bottom-links {
                display: flex;
                gap: 24px;
            }

            .footer-bottom-links a {
                font-size: 13px;
                color: rgba(255,255,255,0.35);
                text-decoration: none;
                transition: color 0.2s ease;
            }

            .footer-bottom-links a:hover {
                color: rgba(255,255,255,0.7);
            }

            /* RESPONSIVE - İletişim */
            @media (max-width: 1024px) {
                .contact-hero {
                    padding: 100px 40px 160px;
                }
                .contact-content {
                    padding: 0 40px;
                }
                .contact-info-strip {
                    grid-template-columns: 1fr 1fr;
                }
                .contact-main-grid {
                    grid-template-columns: 1fr;
                    gap: 28px;
                }
                .contact-title {
                    font-size: 48px;
                    letter-spacing: -2px;
                }
                .contact-stats {
                    gap: 32px;
                }
            }

            @media (max-width: 768px) {
                .contact-hero {
                    padding: 80px 20px 140px;
                }
                .contact-content {
                    padding: 0 20px;
                    margin-top: -100px;
                }
                .contact-title {
                    font-size: 34px;
                    letter-spacing: -1.2px;
                }
                .contact-subtitle {
                    font-size: 15px;
                }
                .contact-info-strip {
                    grid-template-columns: 1fr;
                    gap: 12px;
                }
                .contact-stats {
                    flex-wrap: wrap;
                    gap: 24px;
                }
                .contact-stat-number {
                    font-size: 28px;
                }
                .contact-form-wrapper {
                    padding: 28px 20px;
                    border-radius: 20px;
                }
                .form-row {
                    grid-template-columns: 1fr;
                }
                .form-header h3 {
                    font-size: 22px;
                }
                .form-actions {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 12px;
                }
                .form-submit {
                    justify-content: center;
                }
                .contact-map-card iframe {
                    height: 200px;
                }
                .contact-quick-bar {
                    flex-wrap: wrap;
                }
                .contact-hero::before {
                    width: 350px;
                    height: 350px;
                    top: -20%;
                    right: -15%;
                    filter: blur(60px);
                }
                .contact-hero::after {
                    width: 250px;
                    height: 250px;
                    bottom: -15%;
                    left: -10%;
                    filter: blur(40px);
                }
                .contact-badge {
                    padding: 8px 18px;
                    font-size: 11px;
                }
                .contact-cta-card {
                    padding: 28px 24px;
                    border-radius: 20px;
                }
                .contact-cta-card h4 {
                    font-size: 18px;
                }
                .contact-cta-card p {
                    font-size: 13px;
                    margin-bottom: 20px;
                }
                .contact-cta-btn {
                    padding: 12px 24px;
                    font-size: 13px;
                }
                .contact-info-card {
                    padding: 22px 18px;
                    border-radius: 16px;
                }
                .contact-info-icon {
                    width: 48px;
                    height: 48px;
                    border-radius: 14px;
                    margin-bottom: 12px;
                }
                .contact-info-icon svg {
                    width: 20px;
                    height: 20px;
                }
                .contact-info-card h4 {
                    font-size: 13px;
                }
                .contact-info-card .card-desc {
                    font-size: 11px;
                    margin-bottom: 10px;
                }
                .contact-info-card p {
                    font-size: 12px;
                }
                .contact-info-detail {
                    padding: 7px 10px;
                    gap: 7px;
                }
                .contact-info-detail .detail-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 6px;
                }
                .contact-info-detail .detail-icon svg {
                    width: 12px;
                    height: 12px;
                }
                .contact-info-detail .detail-label {
                    font-size: 9px;
                }
                .contact-info-detail .detail-value {
                    font-size: 12px;
                }
                .card-action {
                    font-size: 11px;
                    padding: 5px 12px;
                    margin-top: 10px;
                }
                .card-status {
                    font-size: 10px;
                    padding: 4px 10px;
                    margin-top: 10px;
                }
                .contact-map-info {
                    padding: 16px 18px;
                }
            }

            @media (max-width: 480px) {
                .contact-hero {
                    padding: 64px 16px 120px;
                }
                .contact-content {
                    padding: 0 16px;
                    margin-top: -90px;
                }
                .contact-title {
                    font-size: 28px;
                    letter-spacing: -1px;
                }
                .contact-subtitle {
                    font-size: 14px;
                    line-height: 1.6;
                }
                .contact-stats {
                    gap: 16px;
                    margin-top: 36px;
                }
                .contact-stat-number {
                    font-size: 24px;
                    letter-spacing: -1px;
                }
                .contact-stat-label {
                    font-size: 11px;
                }
                .contact-info-strip {
                    gap: 10px;
                    margin-bottom: 28px;
                }
                .contact-info-card {
                    padding: 18px 14px;
                    border-radius: 14px;
                }
                .contact-info-icon {
                    width: 42px;
                    height: 42px;
                    border-radius: 12px;
                    margin-bottom: 10px;
                }
                .contact-info-icon svg {
                    width: 18px;
                    height: 18px;
                }
                .contact-info-card h4 {
                    font-size: 12px;
                    margin-bottom: 4px;
                }
                .contact-info-card .card-desc {
                    font-size: 10px;
                    margin-bottom: 8px;
                }
                .contact-info-card p {
                    font-size: 11px;
                }
                .contact-info-detail {
                    padding: 6px 8px;
                    gap: 6px;
                    border-radius: 8px;
                    margin-bottom: 4px;
                }
                .contact-info-detail .detail-icon {
                    width: 22px;
                    height: 22px;
                    border-radius: 6px;
                }
                .contact-info-detail .detail-icon svg {
                    width: 11px;
                    height: 11px;
                }
                .contact-info-detail .detail-label {
                    font-size: 8px;
                    letter-spacing: 0.5px;
                }
                .contact-info-detail .detail-value {
                    font-size: 11px;
                }
                .card-action {
                    font-size: 10px;
                    padding: 4px 10px;
                    margin-top: 8px;
                    gap: 4px;
                }
                .card-action svg {
                    width: 10px;
                    height: 10px;
                }
                .card-status {
                    font-size: 9px;
                    padding: 3px 8px;
                    margin-top: 8px;
                    gap: 4px;
                }
                .card-status .status-dot {
                    width: 5px;
                    height: 5px;
                }
                .contact-main-grid {
                    gap: 20px;
                }
                .contact-form-wrapper {
                    padding: 22px 16px;
                    border-radius: 16px;
                }
                .form-header {
                    margin-bottom: 24px;
                }
                .form-header h3 {
                    font-size: 20px;
                }
                .form-header p {
                    font-size: 13px;
                }
                .contact-form {
                    gap: 16px;
                }
                .form-group input,
                .form-group textarea,
                .form-group select {
                    padding: 14px 16px;
                    border-radius: 14px;
                    font-size: 14px;
                }
                .form-group textarea {
                    min-height: 110px;
                }
                .form-group label {
                    font-size: 12px;
                }
                .form-submit {
                    padding: 16px 32px;
                    font-size: 15px;
                    border-radius: 50px;
                }
                .form-hint {
                    font-size: 11px;
                    text-align: center;
                    justify-content: center;
                }
                .contact-map-card {
                    border-radius: 18px;
                }
                .contact-map-card iframe {
                    height: 170px;
                }
                .contact-map-info {
                    padding: 14px 16px;
                    gap: 10px;
                }
                .contact-map-pin {
                    width: 36px;
                    height: 36px;
                    border-radius: 10px;
                }
                .contact-map-pin svg {
                    width: 18px;
                    height: 18px;
                }
                .contact-map-text {
                    font-size: 13px;
                }
                .contact-map-text span {
                    font-size: 11px;
                }
                .contact-cta-card {
                    padding: 24px 20px;
                    border-radius: 18px;
                }
                .contact-cta-card h4 {
                    font-size: 17px;
                }
                .contact-cta-card p {
                    font-size: 12px;
                    margin-bottom: 18px;
                }
                .contact-cta-btn {
                    padding: 11px 20px;
                    font-size: 13px;
                    gap: 6px;
                }
                .quick-contact-chip {
                    padding: 7px 13px;
                    font-size: 11px;
                }
                .contact-quick-bar {
                    gap: 8px;
                    margin-top: 16px;
                }
                .contact-bottom-space {
                    padding-bottom: 48px;
                }
                .contact-hero::before {
                    width: 250px;
                    height: 250px;
                    filter: blur(50px);
                }
                .contact-hero::after {
                    width: 180px;
                    height: 180px;
                    filter: blur(35px);
                }
            }

            /* RESPONSIVE - Footer */
            @media (max-width: 1024px) {
                .footer-grid {
                    grid-template-columns: 1fr 1fr;
                    gap: 40px;
                }
            }

            @media (max-width: 768px) {
                .site-footer {
                    padding: 56px 20px 0;
                }
                .footer-grid {
                    grid-template-columns: 1fr;
                    gap: 36px;
                }
                .footer-bottom {
                    flex-direction: column;
                    gap: 16px;
                    text-align: center;
                    padding: 24px 0;
                }
                .footer-bottom-links {
                    justify-content: center;
                }
                .footer-brand .logo-icon {
                    width: 120px;
                    height: auto;
                }
                .footer-brand p {
                    font-size: 14px;
                    max-width: 100%;
                }
                .footer-col h4 {
                    font-size: 13px;
                    margin-bottom: 18px;
                }
                .footer-col ul {
                    gap: 12px;
                }
                .footer-col ul li a {
                    font-size: 13px;
                }
                .footer-social-link {
                    width: 38px;
                    height: 38px;
                }
            }

            @media (max-width: 480px) {
                .site-footer {
                    padding: 42px 16px 0;
                }
                .footer-grid {
                    gap: 28px;
                    padding-bottom: 40px;
                }
                .footer-brand .logo-icon {
                    width: 110px;
                    height: auto;
                }
                .footer-brand p {
                    font-size: 13px;
                    margin-bottom: 18px;
                }
                .footer-socials {
                    gap: 10px;
                }
                .footer-social-link {
                    width: 36px;
                    height: 36px;
                    border-radius: 10px;
                }
                .footer-social-link svg {
                    width: 16px;
                    height: 16px;
                }
                .footer-col h4 {
                    font-size: 12px;
                    margin-bottom: 16px;
                }
                .footer-col ul {
                    gap: 10px;
                }
                .footer-col ul li a {
                    font-size: 13px;
                }
                .footer-bottom {
                    padding: 20px 0;
                    gap: 12px;
                }
                .footer-bottom p {
                    font-size: 12px;
                }
                .footer-bottom-links {
                    gap: 16px;
                    flex-wrap: wrap;
                }
                .footer-bottom-links a {
                    font-size: 12px;
                }
            }


/* =========================================
   ABOUT PAGE - CUSTOM STYLES
   ========================================= */

/* ---------- HERO ---------- */
.about-hero {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #0d1b2a 30%, #1b2838 60%, #0a0a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 120px;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,122,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(175,82,222,0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Animated grid background */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
    opacity: 0.6;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Floating particles */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0,122,255,0.4);
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

.about-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1000px;
    padding: 0 32px;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.about-hero-badge svg {
    width: 16px;
    height: 16px;
}

.about-hero-title {
    font-size: clamp(42px, 7vw, 86px);
    font-weight: 800;
    color: white;
    line-height: 1.05;
    letter-spacing: -3px;
    margin-bottom: 28px;
}

.about-hero-title .gradient-text {
    background: linear-gradient(135deg, #5ac8fa 0%, #007aff 30%, #af52de 70%, #ff6b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.about-hero-sub {
    font-size: clamp(16px, 2vw, 21px);
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 48px;
    font-weight: 400;
}

/* Hero airplane animation container */
.hero-airplane-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 100px;
    display: flex;
    align-items: center;
    overflow: visible;
    overflow-x: clip;
}

.hero-airplane-path {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.hero-airplane-path-line {
    position: absolute;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,122,255,0.5), rgba(175,82,222,0.5), transparent);
    border-radius: 2px;
    top: 0;
    left: 0;
    transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-airplane-path-line.animate {
    width: 100%;
}

.hero-plane {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 6px 24px rgba(0, 122, 255, 0.6))
            drop-shadow(0 2px 10px rgba(175, 82, 222, 0.4));
}

.hero-plane.fly {
    opacity: 1;
    animation: heroPlaneAcross 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes heroPlaneAcross {
    0% { left: -80px; opacity: 0; transform: translateY(-50%) rotate(0deg); }
    5% { opacity: 1; }
    50% { transform: translateY(-60%) rotate(-2deg); }
    85% { opacity: 1; }
    100% { left: calc(100% + 80px); opacity: 0; transform: translateY(-50%) rotate(0deg); }
}

.hero-plane-trail {
    position: absolute;
    left: -80px;
    top: 50%;
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,122,255,0.7) 40%, rgba(175,82,222,0.6) 100%);
    border-radius: 3px;
    transform: translateY(-50%) translateX(-100%);
    opacity: 0;
    pointer-events: none;
    filter: blur(1.5px);
    z-index: 49;
}

.hero-plane.fly ~ .hero-plane-trail {
    opacity: 1;
    animation: heroPlaneAcross 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Hero stat pills that appear after airplane */
.hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.hero-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 60px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-stat-pill.revealed {
    opacity: 1;
    transform: translateY(0);
}

.hero-stat-pill:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(0,122,255,0.3);
    transform: translateY(-3px);
}

.hero-stat-pill .pill-value {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stat-pill .pill-label {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0,122,255,0.5), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ---------- STORY SECTION ---------- */
.story-section {
    padding: 140px 56px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.story-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.1);
    color: #007aff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-badge svg {
    width: 16px;
    height: 16px;
}

.section-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.section-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 18px;
    color: #86868b;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Story Quote Block — Cinematic Manifesto */
.story-quote-block {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 56px 64px 56px 80px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,255,0.95) 100%);
    border-radius: 32px;
    border: 1px solid rgba(0,122,255,0.08);
    box-shadow:
        0 24px 80px rgba(0,122,255,0.06),
        0 8px 24px rgba(175,82,222,0.04),
        inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
}

.story-quote-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #007aff, #af52de);
    border-radius: 5px 0 0 5px;
}

.story-quote-block::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(175,82,222,0.06), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.story-quote-deco {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 1;
}

.story-quote-mark {
    width: 40px;
    height: 40px;
    opacity: 0.2;
}

.story-quote-lines {
    position: relative;
    z-index: 2;
}

.story-quote-line {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.story-quote-accent {
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.story-quote-divider {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.story-quote-divider span {
    display: block;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #007aff, #af52de);
    opacity: 0.4;
}

.story-quote-block .highlight {
    background: linear-gradient(135deg, #007aff, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.story-quote-block .word-reveal {
    display: inline-block;
    opacity: 0.12;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(4px);
}

.story-quote-block .word-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.story-quote-side-label {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
}

.story-quote-side-label span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #007aff, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.35;
}

/* Story Grid */
/* ---- Story Value Grid ---- */
.story-value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 72px;
}

.story-value-card {
    position: relative;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    padding: 36px 32px 36px 36px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.3s ease;
    overflow: hidden;
}

.story-value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0,122,255,0.04) 0%, rgba(175,82,222,0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.story-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.15);
}

.story-value-card:hover::before {
    opacity: 1;
}

.story-value-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.story-value-icon svg {
    width: 24px;
    height: 24px;
}

.story-value-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.story-value-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.story-value-content p {
    font-size: 15px;
    color: #6e6e73;
    line-height: 1.7;
    font-weight: 400;
}

.story-value-content p strong {
    color: #1d1d1f;
    font-weight: 600;
}

.story-value-number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 56px;
    font-weight: 800;
    color: rgba(0,0,0,0.03);
    line-height: 1;
    letter-spacing: -0.04em;
    z-index: 0;
    pointer-events: none;
}

/* ---------- SECTORS SECTION ---------- */
.sectors-section {
    padding: 120px 56px;
    background: linear-gradient(180deg, #f9f9f9 0%, #f0f0f5 50%, #f9f9f9 100%);
    position: relative;
    overflow: hidden;
}

.sectors-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.06), transparent 70%);
    top: -200px;
    right: -200px;
    pointer-events: none;
}

.sectors-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 64px;
}

.sector-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px 28px;
    border: 1px solid rgba(255,255,255,1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.sector-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.sector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sector-card:hover::before {
    opacity: 1;
}

.sector-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.15);
}

.sector-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.sector-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sector-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.sector-card-desc {
    font-size: 14px;
    color: #86868b;
    line-height: 1.5;
}

.sector-card-count {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #007aff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sector-card-count svg {
    width: 14px;
    height: 14px;
}

/* ---------- FAIRS TEASER (Mystery/Curiosity) ---------- */
.fairs-teaser {
    padding: 120px 56px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* Airplane running across fairs */
.fairs-airplane-container {
    position: relative;
    margin-bottom: 48px;
    overflow: visible;
    overflow-x: clip;
}

.fairs-airplane-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.fairs-airplane-track {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
}

.fairs-airplane-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,122,255,0.15) 20%, rgba(175,82,222,0.15) 80%, transparent 100%);
    border-radius: 2px;
    position: relative;
}

.fairs-airplane-line::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0,122,255,0.6), rgba(175,82,222,0.5));
    border-radius: 2px;
    transition: width 3s ease-out;
}

.fairs-airplane-line.animate::after {
    width: 100%;
}

.fair-plane-svg {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(0, 122, 255, 0.5));
}

.fair-plane-svg.fly {
    opacity: 1;
    animation: fairPlaneFly 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fairPlaneFly {
    0% { left: -60px; opacity: 0; }
    5% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% + 60px); opacity: 0; }
}

/* --- Glimpse Flag Strip (infinite scroll marquee) --- */
.glimpse-strip {
    width: 100%;
    overflow: hidden;
    overflow-x: clip;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    margin-bottom: 56px;
    padding: 12px 0;
}

.glimpse-strip-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: glimpseScroll 20s linear infinite;
}

.glimpse-flag {
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    filter: grayscale(0.3);
    transition: filter 0.3s ease, transform 0.3s ease;
    cursor: default;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.glimpse-flag:hover {
    filter: grayscale(0);
    transform: scale(1.3);
}

.glimpse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007aff, #af52de);
    opacity: 0.3;
    flex-shrink: 0;
}

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

/* --- Mystery Card Grid --- */
.mystery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    margin-bottom: 56px;
}

.mystery-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 220px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mystery-card.will-animate {
    opacity: 0;
    transform: translateY(30px);
}

.mystery-card.will-animate.revealed {
    opacity: 1;
    transform: translateY(0);
}

.mystery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PEEK cards — show image with fog + flag + hint only */
.mystery-peek .mystery-card-fog {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.mystery-peek:hover .mystery-card-fog {
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0) 100%);
}

.mystery-card-flag {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.mystery-card-flag img {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

.mystery-peek:hover .mystery-card-flag {
    transform: scale(1.1);
}

.mystery-card-hint {
    position: absolute;
    bottom: 16px;
    left: 18px;
    z-index: 2;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.5px;
}

/* LOCKED cards — fully blurred, lock icon center */
.mystery-locked img {
    filter: blur(12px) saturate(0.6);
    transform: scale(1.1);
}

.mystery-card-blur {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.mystery-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.4s ease;
}

.mystery-lock-icon svg {
    width: 24px;
    height: 24px;
    color: rgba(255,255,255,0.8);
}

.mystery-locked:hover .mystery-lock-icon {
    transform: translate(-50%, -50%) scale(1.15);
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
}

/* Counter card */
.mystery-counter {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0eeff 100%);
    border: 2px dashed rgba(0,122,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

.mystery-counter:hover {
    border-color: rgba(0,122,255,0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,122,255,0.1);
}

.mystery-counter-inner {
    text-align: center;
}

.mystery-counter-num {
    font-size: 64px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.mystery-counter-label {
    font-size: 15px;
    font-weight: 600;
    color: #86868b;
    line-height: 1.4;
}

/* Bottom fade overlay on mystery grid */
.mystery-grid-fade {
    position: relative;
    height: 60px;
    margin-top: -60px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    z-index: 3;
    pointer-events: none;
    margin-bottom: 48px;
}

/* FOMO Stats Bar */
.fomo-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 48px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fomo-stats.will-animate {
    opacity: 0;
    transform: translateY(20px);
}

.fomo-stats.will-animate.revealed {
    opacity: 1;
    transform: translateY(0);
}

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

.fomo-num {
    font-size: 48px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    display: inline;
}

.fomo-plus {
    font-size: 36px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fomo-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

.fomo-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08), transparent);
}

/* Teaser CTA Area */
.teaser-cta-area {
    text-align: center;
    position: relative;
    padding: 32px 20px 0;
}

.teaser-cta-glow {
    position: absolute;
    width: 500px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(0,122,255,0.06), rgba(175,82,222,0.05), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.teaser-hook {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
}

.teaser-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 48px;
    border-radius: 50px;
    background: var(--gradient-primary);
    color: white;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0,122,255,0.25);
    letter-spacing: -0.2px;
}

.teaser-cta-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 48px rgba(0,122,255,0.35);
}

.teaser-cta-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.teaser-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Pulse glow on CTA */
.teaser-cta-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.06); }
}

/* ---------- DELPHI SECTION ---------- */
.delphi-section {
    padding: 120px 56px;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d0d2b 100%);
    position: relative;
    overflow: hidden;
}

.delphi-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 20% 50%, rgba(0,122,255,0.1), transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 50%, rgba(175,82,222,0.1), transparent 60%);
    pointer-events: none;
}

.delphi-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.delphi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.delphi-text h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: white;
    line-height: 1.15;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.delphi-text h2 span {
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.delphi-text p {
    font-size: 17px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin-bottom: 16px;
}

.delphi-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.delphi-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}

.delphi-feature:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(0,122,255,0.2);
    transform: translateX(6px);
}

.delphi-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delphi-feature-icon svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.delphi-feature span {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-weight: 500;
}

.delphi-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delphi-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 48px;
    backdrop-filter: blur(20px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.delphi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #007aff, #af52de, #5ac8fa);
}

.delphi-card-logo {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.delphi-card-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 32px;
    font-weight: 500;
}

.delphi-card-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.delphi-card-stat {
    padding: 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}

.delphi-card-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: white;
}

.delphi-card-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    margin-top: 4px;
}

.delphi-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    background: var(--gradient-primary);
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,122,255,0.3);
}

.delphi-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,122,255,0.4);
}

.delphi-cta-btn svg {
    width: 16px;
    height: 16px;
}

/* ---------- NUMBERS SECTION ---------- */
.numbers-section {
    padding: 120px 56px;
    max-width: 1400px;
    margin: 0 auto;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.number-card {
    text-align: center;
    padding: 40px 24px;
    border-radius: 24px;
    background: white;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(30px);
}

.number-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.number-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.number-value {
    font-size: 52px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
    margin-bottom: 8px;
}

.number-label {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.number-desc {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
}

/* ---------- CTA SECTION ---------- */
.about-cta-section {
    padding: 120px 56px;
    text-align: center;
    background: linear-gradient(180deg, #f9f9f9 0%, #f5f5f7 100%);
    position: relative;
    overflow: hidden;
}

.about-cta-section::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.05), transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cta-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.15;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.cta-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-desc {
    font-size: 18px;
    color: #86868b;
    line-height: 1.6;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 36px;
    border-radius: 50px;
    background: var(--gradient-primary);
    color: white;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0,122,255,0.3);
    transition: all 0.3s ease;
}

.cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,122,255,0.4);
}

.cta-btn-primary svg {
    width: 18px;
    height: 18px;
}

.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 36px;
    border-radius: 50px;
    background: transparent;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover {
    border-color: rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.02);
    transform: translateY(-2px);
}

/* =============================================
   NAV DROPDOWN
   ============================================= */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.nav-dropdown-arrow {
    width: 13px;
    height: 13px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: #ffffff;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #6e6e73;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: none !important;
    box-shadow: none !important;
}

.nav-dropdown-menu a:hover {
    color: #1d1d1f;
    background: rgba(0,0,0,0.05) !important;
}

.nav-dropdown-menu a.active {
    color: #007aff !important;
    background: rgba(0, 122, 255, 0.08) !important;
    font-weight: 600;
    -webkit-text-fill-color: #007aff;
}

/* =============================================
   HIZMETLERIMIZ PAGE
   ============================================= */

/* Services Hero Extension */
.services-hero .about-hero-sub {
    max-width: 680px;
    margin: 0 auto;
}

/* ---------- HZ HERO FLOATING ICONS ---------- */
.hz-hero-icons-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hz-hero-float-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    padding: 10px 18px;
    border-radius: 60px;
    animation: floatPill 3s ease-in-out infinite;
    animation-delay: var(--delay);
    transition: all 0.3s ease;
    cursor: default;
}

.hz-hero-float-icon:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.hz-hero-float-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color);
    flex-shrink: 0;
}

.hz-hero-float-icon span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.2px;
}

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

/* ---------- HZ SHOWCASE SECTION ---------- */
.hz-showcase-section {
    padding: 120px 56px;
    background: var(--bg-main);
    position: relative;
}

.hz-showcase-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- FEATURED CARD ---------- */
.hz-featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--white);
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin-top: 60px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hz-featured-card:hover {
    box-shadow: 0 32px 80px rgba(0,0,0,0.1), 0 12px 32px rgba(0,0,0,0.06);
    border-color: rgba(0,122,255,0.15);
    transform: translateY(-4px);
}

.hz-featured-img-wrap {
    position: relative;
    min-height: 480px;
    overflow: hidden;
}

.hz-featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hz-featured-card:hover .hz-featured-img-wrap img {
    transform: scale(1.06);
}

.hz-featured-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,122,255,0.1) 0%, rgba(175,82,222,0.15) 100%);
    pointer-events: none;
}

.hz-featured-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0,122,255,0.35);
}

.hz-featured-badge svg {
    width: 14px;
    height: 14px;
}

.hz-featured-body {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.hz-featured-number {
    font-size: 80px;
    font-weight: 900;
    color: rgba(0,0,0,0.03);
    position: absolute;
    top: 24px;
    right: 32px;
    line-height: 1;
    letter-spacing: -4px;
    pointer-events: none;
}

.hz-featured-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.hz-featured-icon svg {
    width: 28px;
    height: 28px;
}

.hz-featured-title {
    font-size: 32px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -1px;
    margin-bottom: 14px;
}

.hz-featured-desc {
    font-size: 15.5px;
    color: #86868b;
    line-height: 1.7;
    margin-bottom: 28px;
}

.hz-featured-highlights {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.hz-featured-hl {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hz-featured-hl-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0,122,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hz-featured-hl-icon svg {
    width: 18px;
    height: 18px;
    stroke: #007aff;
}

.hz-featured-hl div strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
}

.hz-featured-hl div span {
    font-size: 12.5px;
    color: #86868b;
}

.hz-featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.hz-featured-tags span {
    font-size: 11.5px;
    font-weight: 600;
    color: #007aff;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.1);
    padding: 5px 14px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.hz-featured-card:hover .hz-featured-tags span {
    background: rgba(0,122,255,0.1);
    border-color: rgba(0,122,255,0.2);
}

.hz-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient-primary);
    color: white;
    padding: 14px 32px;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,122,255,0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.hz-featured-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,122,255,0.4);
}

.hz-featured-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hz-featured-btn:hover svg {
    transform: translateX(4px);
}

/* ---------- HZ 2x2 GRID ---------- */
.hz-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.hz-card-v2 {
    background: var(--white);
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hz-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 72px rgba(0,0,0,0.1), 0 10px 28px rgba(0,0,0,0.06);
    border-color: rgba(0,122,255,0.15);
}

.hz-card-v2-visual {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.hz-card-v2-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hz-card-v2:hover .hz-card-v2-visual img {
    transform: scale(1.08);
}

.hz-card-v2-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}

.hz-card-v2-num {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    padding: 6px 14px;
    border-radius: 50px;
    letter-spacing: 1px;
}

.hz-card-v2-body {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hz-card-v2-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.hz-card-v2-icon svg {
    width: 24px;
    height: 24px;
}

.hz-card-v2-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.hz-card-v2-body p {
    font-size: 14.5px;
    color: #86868b;
    line-height: 1.65;
    margin-bottom: 16px;
}

.hz-card-v2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.hz-card-v2-tags span {
    font-size: 11.5px;
    font-weight: 600;
    color: #007aff;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.1);
    padding: 4px 12px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.hz-card-v2:hover .hz-card-v2-tags span {
    background: rgba(0,122,255,0.1);
    border-color: rgba(0,122,255,0.2);
}

.hz-card-v2-stat-row {
    display: flex;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.hz-card-v2-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    text-align: center;
}

.hz-card-v2-stat strong {
    font-size: 14px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.hz-card-v2-stat span {
    font-size: 11.5px;
    color: #86868b;
    font-weight: 500;
}

.hz-card-v2-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.hz-card-v2-arrow span {
    font-size: 14px;
    font-weight: 600;
    color: #007aff;
}

.hz-card-v2-arrow svg {
    width: 18px;
    height: 18px;
    color: #007aff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hz-card-v2:hover .hz-card-v2-arrow svg {
    transform: translateX(5px);
}

/* ---------- HZ MANIFESTO ---------- */
.hz-manifesto-section {
    padding: 100px 56px;
    background: linear-gradient(180deg, #f5f5f7 0%, var(--bg-main) 100%);
}

.hz-manifesto-section .story-quote-block {
    max-width: 1000px;
    margin: 0 auto;
}

/* ---------- HZ PROCESS V2 SECTION ---------- */
.hz-process-v2-section {
    padding: 120px 56px;
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.hz-process-v2-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.hz-steps-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 72px;
    position: relative;
}

.hz-steps-line-bg {
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #007aff, #ff9500, #af52de, #30d158, #ff3b30);
    border-radius: 3px;
    opacity: 0.15;
    z-index: 0;
}

.hz-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hz-step-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--step-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}

.hz-step-item:hover .hz-step-dot {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.hz-step-dot-inner {
    font-size: 18px;
    font-weight: 800;
    color: var(--step-color);
    z-index: 2;
}

.hz-step-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--step-color);
    opacity: 0;
    animation: stepPulse 2.5s ease infinite;
}

@keyframes stepPulse {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

.hz-step-card {
    background: var(--white);
    border-radius: 22px;
    padding: 28px 24px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.hz-step-item:hover .hz-step-card {
    transform: translateY(-6px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.12);
}

.hz-step-card-icon {
    margin-bottom: 14px;
}

.hz-step-card-icon svg {
    width: 28px;
    height: 28px;
}

.hz-step-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.hz-step-card p {
    font-size: 13.5px;
    color: #86868b;
    line-height: 1.6;
}

/* ---------- HZ WHY V2 — DARK SECTION ---------- */
.hz-why-v2-section {
    padding: 120px 56px;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.hz-why-v2-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.08), transparent 70%);
    pointer-events: none;
}

.hz-why-v2-section::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(175,82,222,0.06), transparent 70%);
    pointer-events: none;
}

.hz-why-v2-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hz-why-v2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.hz-why-v2-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 36px 28px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hz-why-v2-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.04));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hz-why-v2-card:hover::before {
    opacity: 1;
}

.hz-why-v2-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.hz-why-v2-card-num {
    font-size: 60px;
    font-weight: 900;
    color: rgba(255,255,255,0.04);
    position: absolute;
    top: 16px;
    right: 20px;
    line-height: 1;
    letter-spacing: -4px;
    pointer-events: none;
}

.hz-why-v2-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(0,122,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.hz-why-v2-card-icon svg {
    width: 26px;
    height: 26px;
    stroke: #007aff;
}

.hz-why-v2-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}

.hz-why-v2-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.65;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.hz-why-v2-card p strong {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

.hz-why-v2-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}

.hz-why-v2-stat-val {
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.hz-why-v2-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
}

/* =============================================
   SERVICE DETAIL PAGE (Fuar Organizasyonu etc.)
   ============================================= */

/* ---------- GENERAL GRADIENT TEXT ---------- */
.gradient-text {
    background: linear-gradient(135deg, #5ac8fa 0%, #007aff 30%, #af52de 70%, #ff6b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

/* ---------- SERVICE DETAIL PAGE BODY ---------- */
body.page-service-detail {
    background: #0a0a1e;
}

/* ---------- SERVICE HERO SECTION ---------- */
.service-hero-section {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a1e 0%, #0f1029 40%, #1a0a2e 100%);
}

.service-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.service-hero-bg::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.12) 0%, transparent 60%);
    animation: heroBgPulse 8s ease-in-out infinite;
}

.service-hero-bg::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(175,82,222,0.1) 0%, transparent 55%);
    animation: heroBgPulse 8s ease-in-out infinite 4s;
}

@keyframes heroBgPulse {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
    50% { transform: scale(1.15) translate(3%, 3%); opacity: 0.7; }
}

/* Floating grid pattern overlay */
.service-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.service-hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 56px 80px 80px;
    max-width: 720px;
    margin-left: auto;
}

.service-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 60px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    width: fit-content;
    animation: fadeSlideUp 0.8s ease forwards;
    opacity: 0;
}

.service-hero-badge svg {
    width: 18px;
    height: 18px;
    stroke: #5ac8fa;
}

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

.service-hero-title {
    font-size: clamp(38px, 5.5vw, 72px);
    font-weight: 900;
    color: white;
    line-height: 1.05;
    letter-spacing: -3px;
    margin-bottom: 24px;
    animation: fadeSlideUp 0.8s ease forwards 0.15s;
    opacity: 0;
}

.service-hero-title .gradient-text {
    display: block;
    background: linear-gradient(135deg, #5ac8fa 0%, #007aff 25%, #af52de 60%, #ff6b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite, fadeSlideUp 0.8s ease forwards 0.15s;
}

.service-hero-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    margin-bottom: 44px;
    max-width: 560px;
    animation: fadeSlideUp 0.8s ease forwards 0.3s;
    opacity: 0;
}

.service-hero-desc strong {
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}

/* Hero stats row */
.service-hero-stats {
    display: flex;
    gap: 32px;
    animation: fadeSlideUp 0.8s ease forwards 0.45s;
    opacity: 0;
}

.service-hero-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 32px;
}

.service-hero-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

.service-hero-stat .stat-value {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.service-hero-stat .stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
}

/* Hero visual right side */
.service-hero-visual {
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.service-hero-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, #0a0a1e 30%, transparent 100%);
    z-index: 4;
    pointer-events: none;
}

.service-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
    animation: heroKenBurns 20s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, 2%); }
}

.service-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a0a1e 0%, rgba(10,10,30,0.4) 40%, transparent 80%);
    z-index: 2;
    pointer-events: none;
}

.service-hero-visual::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, #0a0a1e, transparent);
    z-index: 3;
    pointer-events: none;
}

/* Airplane animation */
.service-hero-airplane {
    position: absolute;
    bottom: 15%;
    right: 10%;
    z-index: 10;
    animation: planeFloat 4s ease-in-out infinite;
}

.service-plane {
    filter: drop-shadow(0 8px 24px rgba(90, 200, 250, 0.3));
}

.service-plane-trail {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 120px;
    height: 3px;
    background: linear-gradient(to left, rgba(90,200,250,0.6), transparent);
    border-radius: 3px;
    transform: translateY(-50%);
    animation: trailPulse 2s ease-in-out infinite;
}

@keyframes planeFloat {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    25% { transform: translate(8px, -12px) rotate(-1deg); }
    50% { transform: translate(-4px, -20px) rotate(-3deg); }
    75% { transform: translate(12px, -8px) rotate(-1.5deg); }
}

@keyframes trailPulse {
    0%, 100% { opacity: 0.4; width: 80px; }
    50% { opacity: 0.8; width: 140px; }
}

/* ---------- SERVICE FEATURED SECTION ---------- */
.service-featured-section {
    padding: 120px 56px;
    background: linear-gradient(180deg, var(--bg-main) 0%, #f5f5f7 100%);
    position: relative;
    overflow: hidden;
}

.service-featured-section::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}

.service-featured-section::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -150px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(175,82,222,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.service-featured-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.service-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.1);
    color: #007aff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.service-featured-title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.service-featured-desc {
    font-size: 17px;
    color: #86868b;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 64px;
}

.service-featured-desc strong {
    color: #1d1d1f;
    font-weight: 600;
}

.service-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.service-featured-card {
    background: var(--white);
    border-radius: 28px;
    padding: 44px 32px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-featured-card:hover::before {
    transform: scaleX(1);
}

.service-featured-card::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.04), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-featured-card:hover::after {
    opacity: 1;
}

.service-featured-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 72px rgba(0,0,0,0.07),
        0 12px 28px rgba(0,122,255,0.06);
    border-color: rgba(0,122,255,0.12);
}

.service-featured-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.4s ease;
}

.service-featured-card:hover .service-featured-icon {
    background: linear-gradient(135deg, rgba(0,122,255,0.14), rgba(175,82,222,0.1));
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,122,255,0.12);
}

.service-featured-icon svg {
    width: 28px;
    height: 28px;
    stroke: #007aff;
}

.service-featured-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.service-featured-card p {
    font-size: 15px;
    color: #86868b;
    line-height: 1.7;
}

/* ---------- SERVICE MANIFESTO SECTION ---------- */
.service-manifesto-section {
    padding: 100px 56px;
    background: linear-gradient(180deg, #f5f5f7 0%, var(--bg-main) 100%);
    position: relative;
}

.service-manifesto-section .story-quote-block {
    max-width: 1000px;
    margin: 0 auto;
}

/* ---------- SERVICE PROCESS SECTION ---------- */
.service-process-section {
    padding: 120px 56px;
    background: linear-gradient(180deg, var(--bg-main) 0%, #f5f5f7 100%);
    position: relative;
    overflow: hidden;
}

.service-process-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.service-process-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.service-process-header {
    text-align: center;
    margin-bottom: 72px;
}

/* Steps timeline track */
.service-steps-track {
    display: flex;
    gap: 0;
    position: relative;
}

/* Horizontal connecting line */
.service-steps-track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 52px;
    right: 52px;
    height: 3px;
    background: linear-gradient(90deg, #007aff, #5ac8fa, #af52de, #ff6b9d, #30d158);
    border-radius: 3px;
    opacity: 0.12;
    z-index: 0;
}

.service-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 0 8px;
}

.service-step-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #007aff;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0,122,255,0.12);
}

.service-step-item:nth-child(2) .service-step-dot { border-color: #5ac8fa; color: #5ac8fa; box-shadow: 0 4px 16px rgba(90,200,250,0.15); }
.service-step-item:nth-child(3) .service-step-dot { border-color: #af52de; color: #af52de; box-shadow: 0 4px 16px rgba(175,82,222,0.15); }
.service-step-item:nth-child(4) .service-step-dot { border-color: #ff6b9d; color: #ff6b9d; box-shadow: 0 4px 16px rgba(255,107,157,0.15); }
.service-step-item:nth-child(5) .service-step-dot { border-color: #30d158; color: #30d158; box-shadow: 0 4px 16px rgba(48,209,88,0.15); }

/* Pulse ring around dot */
.service-step-dot::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid #007aff;
    opacity: 0;
    animation: serviceStepPulse 3s ease-in-out infinite;
}

.service-step-item:nth-child(2) .service-step-dot::before { border-color: #5ac8fa; animation-delay: 0.5s; }
.service-step-item:nth-child(3) .service-step-dot::before { border-color: #af52de; animation-delay: 1s; }
.service-step-item:nth-child(4) .service-step-dot::before { border-color: #ff6b9d; animation-delay: 1.5s; }
.service-step-item:nth-child(5) .service-step-dot::before { border-color: #30d158; animation-delay: 2s; }

@keyframes serviceStepPulse {
    0% { opacity: 0; transform: scale(1); }
    30% { opacity: 0.35; }
    100% { opacity: 0; transform: scale(1.6); }
}

.service-step-item:hover .service-step-dot {
    transform: scale(1.15);
    box-shadow: 0 8px 28px rgba(0,122,255,0.2);
}

.service-step-card {
    background: var(--white);
    border-radius: 22px;
    padding: 28px 22px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    width: 100%;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.service-step-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #007aff;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.service-step-item:nth-child(2) .service-step-card::before { background: #5ac8fa; }
.service-step-item:nth-child(3) .service-step-card::before { background: #af52de; }
.service-step-item:nth-child(4) .service-step-card::before { background: #ff6b9d; }
.service-step-item:nth-child(5) .service-step-card::before { background: #30d158; }

.service-step-item:hover .service-step-card::before {
    transform: scaleX(1);
}

.service-step-item:hover .service-step-card {
    transform: translateY(-6px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.1);
}

.service-step-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.service-step-card p {
    font-size: 14px;
    color: #86868b;
    line-height: 1.65;
}

/* ---------- SEO BREADCRUMB ---------- */
.seo-breadcrumb {
    background: transparent;
    padding: 0;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    z-index: 10;
}

.seo-breadcrumb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
}

.seo-breadcrumb-inner a {
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}

.seo-breadcrumb-inner a:hover {
    color: rgba(255,255,255,0.8);
}

.seo-breadcrumb-sep {
    color: rgba(255,255,255,0.2);
    font-size: 11px;
}

.seo-breadcrumb-current {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* ---------- SEO ARTICLE LAYOUT ---------- */
.seo-article-section {
    padding: 80px 56px 120px;
    background: var(--bg-main);
    position: relative;
}

.seo-article-inner {
    max-width: 1340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: flex-start;
}

/* ---------- TABLE OF CONTENTS ---------- */
.seo-article-sidebar {
    align-self: stretch;
}

.seo-toc-sticky {
    position: sticky;
    top: 100px;
    background: var(--white);
    border-radius: 24px;
    padding: 28px 24px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

.seo-toc-title {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.seo-toc-title svg {
    width: 18px;
    height: 18px;
    stroke: #007aff;
}

.seo-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seo-toc-link {
    display: block;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #86868b;
    text-decoration: none;
    border-radius: 12px;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
    line-height: 1.4;
}

.seo-toc-link:hover {
    color: #007aff;
    background: rgba(0,122,255,0.04);
    border-left-color: #007aff;
}

.seo-toc-link.active {
    color: #007aff;
    background: rgba(0,122,255,0.06);
    border-left-color: #007aff;
    font-weight: 600;
}

/* ---------- SEO ARTICLE MAIN ---------- */
.seo-article-main {
    min-width: 0;
}

/* ---------- SEO CONTENT BLOCK ---------- */
.seo-content-block {
    margin-bottom: 80px;
    scroll-margin-top: 100px;
}

.seo-content-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.1);
    color: #007aff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.seo-content-block h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.seo-content-block > p {
    font-size: 16.5px;
    color: #4a4a4f;
    line-height: 1.85;
    margin-bottom: 20px;
}

.seo-content-block > p a {
    color: #007aff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1.5px solid rgba(0,122,255,0.2);
    transition: border-color 0.2s ease;
}

.seo-content-block > p a:hover {
    border-bottom-color: #007aff;
}

.seo-content-block > p strong {
    color: #1d1d1f;
    font-weight: 700;
}

/* ---------- HIGHLIGHT BOX ---------- */
.seo-highlight-box {
    display: flex;
    gap: 20px;
    padding: 28px 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,122,255,0.04) 0%, rgba(175,82,222,0.04) 100%);
    border: 1px solid rgba(0,122,255,0.1);
    margin: 32px 0;
    align-items: flex-start;
}

.seo-highlight-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,122,255,0.1), rgba(175,82,222,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: #007aff;
}

.seo-highlight-content {
    font-size: 15px;
    color: #4a4a4f;
    line-height: 1.75;
}

.seo-highlight-content strong {
    color: #1d1d1f;
    font-weight: 700;
}

/* ---------- ADVANTAGES GRID ---------- */
.seo-advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.seo-advantage-card {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 28px;
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-advantage-card:hover::before {
    transform: scaleX(1);
}

.seo-advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.07), 0 8px 20px rgba(0,122,255,0.05);
    border-color: rgba(0,122,255,0.1);
}

.seo-adv-num {
    font-size: 48px;
    font-weight: 900;
    color: rgba(0,0,0,0.03);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 8px;
    pointer-events: none;
}

.seo-advantage-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.seo-advantage-card p {
    font-size: 14.5px;
    color: #86868b;
    line-height: 1.7;
}

.seo-advantage-card p strong {
    color: #1d1d1f;
    font-weight: 600;
}

/* ---------- SERVICE DETAIL BLOCK ---------- */
.seo-service-detail-block {
    background: var(--white);
    border-radius: 24px;
    padding: 40px 36px;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 24px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.seo-service-detail-block::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.03), transparent 70%);
    pointer-events: none;
}

.seo-service-detail-block:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    border-color: rgba(0,122,255,0.08);
}

.seo-service-detail-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.seo-service-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.seo-service-detail-icon svg {
    width: 24px;
    height: 24px;
    stroke: #007aff;
}

.seo-service-detail-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

.seo-service-detail-block > p {
    font-size: 15.5px;
    color: #4a4a4f;
    line-height: 1.8;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.seo-service-detail-block > p strong {
    color: #1d1d1f;
    font-weight: 600;
}

.seo-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.seo-detail-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4f;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0,122,255,0.03);
    border: 1px solid rgba(0,122,255,0.06);
    transition: all 0.25s ease;
}

.seo-detail-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradient-primary);
    flex-shrink: 0;
}

.seo-detail-list li:hover {
    background: rgba(0,122,255,0.06);
    border-color: rgba(0,122,255,0.12);
}

/* ---------- SEO PROCESS TIMELINE ---------- */
.seo-process-timeline {
    position: relative;
    padding-left: 48px;
    margin-top: 48px;
}

.seo-process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 23px;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #007aff, #5ac8fa, #af52de, #ff6b9d, #30d158, #007aff);
    border-radius: 3px;
    opacity: 0.15;
}

.seo-process-item {
    display: flex;
    gap: 28px;
    margin-bottom: 48px;
    position: relative;
}

.seo-process-item:last-child {
    margin-bottom: 0;
}

.seo-process-marker {
    position: absolute;
    left: -48px;
    top: 4px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,122,255,0.15);
    transition: all 0.3s ease;
}

.seo-process-item:nth-child(2) .seo-process-marker { border-color: #5ac8fa; box-shadow: 0 4px 16px rgba(90,200,250,0.15); }
.seo-process-item:nth-child(3) .seo-process-marker { border-color: #af52de; box-shadow: 0 4px 16px rgba(175,82,222,0.15); }
.seo-process-item:nth-child(4) .seo-process-marker { border-color: #ff6b9d; box-shadow: 0 4px 16px rgba(255,107,157,0.15); }
.seo-process-item:nth-child(5) .seo-process-marker { border-color: #30d158; box-shadow: 0 4px 16px rgba(48,209,88,0.15); }
.seo-process-item:nth-child(6) .seo-process-marker { border-color: #ff9500; box-shadow: 0 4px 16px rgba(255,149,0,0.15); }

.seo-process-marker span {
    font-size: 16px;
    font-weight: 800;
    color: #007aff;
}

.seo-process-item:nth-child(2) .seo-process-marker span { color: #5ac8fa; }
.seo-process-item:nth-child(3) .seo-process-marker span { color: #af52de; }
.seo-process-item:nth-child(4) .seo-process-marker span { color: #ff6b9d; }
.seo-process-item:nth-child(5) .seo-process-marker span { color: #30d158; }
.seo-process-item:nth-child(6) .seo-process-marker span { color: #ff9500; }

.seo-process-content {
    background: var(--white);
    border-radius: 22px;
    padding: 32px 28px;
    border: 1px solid rgba(0,0,0,0.06);
    flex: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-process-content:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
    transform: translateX(6px);
    border-color: rgba(0,122,255,0.1);
}

.seo-process-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.seo-process-time {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #007aff;
    background: rgba(0,122,255,0.06);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.seo-process-content p {
    font-size: 15px;
    color: #6e6e73;
    line-height: 1.75;
}

/* ---------- INCENTIVE CARDS ---------- */
.seo-incentive-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 36px 0;
}

.seo-incentive-card {
    background: var(--white);
    border-radius: 22px;
    padding: 36px 32px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.seo-incentive-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    border-radius: 4px 0 0 4px;
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.seo-incentive-card:hover::before {
    transform: scaleY(1);
}

.seo-incentive-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
    border-color: rgba(0,122,255,0.1);
}

.seo-incentive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.seo-incentive-header h3 {
    font-size: 19px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.seo-incentive-badge {
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: var(--gradient-primary);
    padding: 6px 16px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,122,255,0.2);
}

.seo-incentive-card > p {
    font-size: 15px;
    color: #6e6e73;
    line-height: 1.75;
}

/* ---------- SECTORS GRID ---------- */
.seo-sectors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.seo-sector-item {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 28px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seo-sector-item::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.04), transparent 70%);
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.5s ease;
}

.seo-sector-item:hover::after {
    transform: scale(1);
}

.seo-sector-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.07);
    border-color: rgba(0,122,255,0.1);
}

.seo-sector-icon {
    font-size: 36px;
    margin-bottom: 16px;
    display: block;
    line-height: 1;
}

.seo-sector-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.seo-sector-item p {
    font-size: 14.5px;
    color: #86868b;
    line-height: 1.7;
}

/* ---------- WHY GRID ---------- */
.seo-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.seo-why-card {
    background: var(--white);
    border-radius: 24px;
    padding: 40px 32px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seo-why-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.seo-why-card:hover::before {
    transform: scaleX(1);
}

.seo-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.1);
}

.seo-why-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.seo-why-card:hover .seo-why-icon {
    background: linear-gradient(135deg, rgba(0,122,255,0.14), rgba(175,82,222,0.1));
    transform: scale(1.05);
}

.seo-why-icon svg {
    width: 26px;
    height: 26px;
    stroke: #007aff;
}

.seo-why-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}

.seo-why-card p {
    font-size: 14.5px;
    color: #86868b;
    line-height: 1.7;
}

/* ---------- REFERANSLARIMIZ SECTION ---------- */
.ref-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d0d2b 100%);
    border-radius: 24px;
    padding: 36px 40px;
    margin-top: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.ref-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 120px;
    padding: 8px 0;
}

.ref-stat-number {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    line-height: 1.1;
}

.ref-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.3px;
}

.ref-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* Referans Logo Grid */
.ref-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 56px;
}

.ref-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ref-logo-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}

.ref-logo-card:hover::after {
    transform: scaleX(1);
}

.ref-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.12);
}

.ref-logo-img {
    width: 100%;
    max-width: 120px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.55);
    transition: all 0.4s ease;
    margin-bottom: 4px;
}

.ref-logo-card:hover .ref-logo-img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06);
}

.ref-logo-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
}

.ref-logo-sector {
    font-size: 11.5px;
    font-weight: 500;
    color: #86868b;
    background: rgba(0,122,255,0.06);
    padding: 3px 10px;
    border-radius: 20px;
}

/* Öne Çıkan Projeler */
.ref-projects-title {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 28px;
    padding-left: 16px;
    border-left: 3px solid;
    border-image: var(--gradient-primary) 1;
}

.ref-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.ref-project-card {
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.1);
    border-color: rgba(0,122,255,0.1);
}

.ref-project-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ref-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ref-project-card:hover .ref-project-image img {
    transform: scale(1.08);
}

.ref-project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex;
    justify-content: flex-end;
}

.ref-project-location {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 12px;
    border-radius: 20px;
}

.ref-project-info {
    padding: 24px;
}

.ref-project-info h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.ref-project-info p {
    font-size: 13.5px;
    color: #86868b;
    line-height: 1.7;
    margin-bottom: 16px;
}

.ref-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ref-project-tags span {
    font-size: 11px;
    font-weight: 600;
    color: #007aff;
    background: rgba(0,122,255,0.07);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

/* Müşteri Görüşleri */
.ref-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.ref-testimonial-card {
    background: var(--white);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    position: relative;
}

.ref-testimonial-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 72px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.06));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    pointer-events: none;
}

.ref-testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.1);
}

.ref-testimonial-stars {
    font-size: 16px;
    color: #ff9f0a;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.ref-testimonial-text {
    font-size: 14px;
    color: #515154;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 24px;
}

.ref-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ref-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #007aff 0%, #af52de 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ref-testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ref-testimonial-info strong {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
}

.ref-testimonial-info span {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
}

/* Referanslar Responsive */
@media (max-width: 1024px) {
    .ref-logos-grid { grid-template-columns: repeat(3, 1fr); }
    .ref-projects-grid { grid-template-columns: repeat(2, 1fr); }
    .ref-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ref-stats-bar { padding: 28px 20px; gap: 0; }
    .ref-stat-number { font-size: 28px; }
    .ref-stat-label { font-size: 11.5px; }
    .ref-stat-divider { height: 36px; }
    .ref-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ref-logo-card { padding: 22px 14px; }
    .ref-projects-grid { grid-template-columns: 1fr; }
    .ref-testimonials-grid { grid-template-columns: 1fr; }
    .ref-projects-title { font-size: 19px; }
}

@media (max-width: 480px) {
    .ref-stats-bar { flex-direction: column; gap: 8px; padding: 24px 16px; }
    .ref-stat-divider { width: 60%; height: 1px; }
    .ref-stat-item { padding: 10px 0; }
    .ref-logos-grid { grid-template-columns: repeat(2, 1fr); }
    .ref-testimonial-card { padding: 24px; }
}

/* ---------- FAQ ACCORDION ---------- */
.seo-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
}

.seo-faq-item {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: all 0.35s ease;
}

.seo-faq-item[open] {
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    border-color: rgba(0,122,255,0.12);
}

.seo-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: all 0.2s ease;
}

.seo-faq-question::-webkit-details-marker {
    display: none;
}

.seo-faq-question span {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.2px;
    line-height: 1.5;
}

.seo-faq-question svg {
    width: 20px;
    height: 20px;
    color: #86868b;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-faq-item[open] .seo-faq-question svg {
    transform: rotate(180deg);
    color: #007aff;
}

.seo-faq-question:hover {
    background: rgba(0,122,255,0.02);
}

.seo-faq-answer {
    padding: 0 28px 24px;
}

.seo-faq-answer p {
    font-size: 15px;
    color: #6e6e73;
    line-height: 1.8;
}

/* ---------- SEO ARTICLE RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .seo-article-inner {
        grid-template-columns: 260px 1fr;
        gap: 48px;
    }
    .seo-advantages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .seo-article-section { padding: 60px 32px 100px; }
    .seo-article-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .seo-article-sidebar {
        display: none;
    }
    .seo-detail-list { grid-template-columns: 1fr 1fr; }
    .seo-sectors-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .seo-article-section { padding: 48px 24px 80px; }
    .seo-breadcrumb-inner { padding: 12px 28px; font-size: 12px; }
    .seo-advantages-grid { grid-template-columns: 1fr; gap: 16px; }
    .seo-advantage-card { padding: 28px 22px; }
    .seo-service-detail-block { padding: 28px 22px; }
    .seo-service-detail-header h3 { font-size: 19px; }
    .seo-detail-list { grid-template-columns: 1fr; }
    .seo-process-timeline { padding-left: 40px; }
    .seo-process-marker { left: -40px; width: 38px; height: 38px; }
    .seo-process-marker span { font-size: 14px; }
    .seo-process-content { padding: 24px 22px; }
    .seo-process-content h3 { font-size: 18px; }
    .seo-sectors-grid { grid-template-columns: 1fr; }
    .seo-why-grid { grid-template-columns: 1fr; }
    .seo-why-card { padding: 28px 22px; }
    .seo-incentive-card { padding: 28px 24px; }
    .seo-incentive-header h3 { font-size: 17px; }
    .seo-faq-question { padding: 20px 22px; }
    .seo-faq-question span { font-size: 15px; }
    .seo-faq-answer { padding: 0 22px 20px; }
    .seo-highlight-box { flex-direction: column; gap: 14px; padding: 22px 24px; }
    .seo-content-block h2 { letter-spacing: -1px; }
}

@media (max-width: 480px) {
    .seo-article-section { padding: 36px 16px 60px; }
    .seo-breadcrumb-inner { padding: 10px 20px; font-size: 11.5px; gap: 6px; }
    .seo-content-block { margin-bottom: 56px; }
    .seo-content-block h2 { font-size: 24px; letter-spacing: -0.5px; }
    .seo-content-block > p { font-size: 15px; }
    .seo-advantage-card { padding: 24px 18px; border-radius: 18px; }
    .seo-adv-num { font-size: 36px; }
    .seo-service-detail-block { padding: 24px 18px; border-radius: 18px; }
    .seo-service-detail-header { gap: 12px; }
    .seo-service-detail-icon { width: 44px; height: 44px; border-radius: 14px; }
    .seo-service-detail-header h3 { font-size: 17px; }
    .seo-process-timeline { padding-left: 32px; }
    .seo-process-marker { left: -32px; width: 32px; height: 32px; }
    .seo-process-marker span { font-size: 12px; }
    .seo-process-content { padding: 20px 18px; border-radius: 18px; }
    .seo-process-content h3 { font-size: 16px; }
    .seo-process-time { font-size: 11px; }
    .seo-sector-item { padding: 28px 20px; }
    .seo-faq-question { padding: 18px 18px; }
    .seo-faq-question span { font-size: 14px; }
    .seo-faq-answer { padding: 0 18px 18px; }
    .seo-faq-answer p { font-size: 14px; }
}

/* --------- SERVICE PAGE RESPONSIVE --------- */
@media (max-width: 1200px) {
    .service-hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .service-hero-content {
        padding: 140px 56px 60px;
        max-width: 100%;
        margin: 0;
    }
    .service-hero-visual {
        height: 50vh;
        min-height: 360px;
    }
    .service-hero-overlay {
        background: linear-gradient(180deg, #0a0a1e 0%, rgba(10,10,30,0.3) 50%, transparent 100%);
    }
    .service-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .service-steps-track {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    .service-steps-track::before {
        display: none;
    }
    .service-step-item {
        width: calc(33.33% - 24px);
        flex: none;
    }
}

@media (max-width: 1024px) {
    .service-featured-section { padding: 100px 32px; }
    .service-manifesto-section { padding: 80px 32px; }
    .service-process-section { padding: 100px 32px; }
    .service-hero-content { padding: 120px 40px 50px; }
    .service-featured-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .service-hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .service-hero-content {
        padding: 110px 28px 40px;
    }
    .service-hero-title {
        letter-spacing: -2px;
    }
    .service-hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
    .service-hero-stat .stat-value {
        font-size: 28px;
    }
    .service-hero-visual {
        height: 40vh;
        min-height: 280px;
    }
    .service-featured-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-featured-card {
        padding: 32px 24px;
    }
    .service-step-item {
        width: calc(50% - 16px);
    }
    .service-hero-airplane {
        bottom: 10%;
        right: 5%;
    }
    .service-plane {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .service-hero-content {
        padding: 100px 20px 32px;
    }
    .service-hero-badge {
        padding: 8px 16px;
        font-size: 11.5px;
    }
    .service-hero-stats {
        flex-direction: column;
        gap: 16px;
    }
    .service-hero-stat {
        padding-right: 0;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .service-hero-stat:not(:last-child)::after {
        display: none;
    }
    .service-hero-stat .stat-value {
        font-size: 24px;
    }
    .service-featured-section { padding: 80px 20px; }
    .service-manifesto-section { padding: 60px 20px; }
    .service-process-section { padding: 80px 20px; }
    .service-featured-card {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .service-featured-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .service-step-item {
        width: 100%;
    }
    .service-step-dot {
        width: 46px;
        height: 46px;
        font-size: 15px;
    }
    .service-step-card {
        padding: 22px 18px;
        border-radius: 18px;
    }
    .service-step-card h4 {
        font-size: 15px;
    }
    .service-step-card p {
        font-size: 13px;
    }
    .service-hero-airplane {
        display: none;
    }
}

/* ---------- HIZMETLERIMIZ RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .hz-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
    .hz-why-v2-grid { grid-template-columns: repeat(2, 1fr); }
    .hz-steps-track { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .hz-steps-line-bg { display: none; }
}

@media (max-width: 1024px) {
    .hz-showcase-section { padding: 100px 32px; }
    .hz-manifesto-section { padding: 80px 32px; }
    .hz-process-v2-section { padding: 100px 32px; }
    .hz-why-v2-section { padding: 100px 32px; }
    .hz-featured-card { grid-template-columns: 1fr; }
    .hz-featured-img-wrap { min-height: 320px; }
    .hz-featured-body { padding: 40px 32px; }
    .hz-featured-title { font-size: 28px; }
    .hz-steps-track { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
    .hz-grid-2x2 { grid-template-columns: 1fr; gap: 22px; }
    .hz-card-v2-visual { height: 200px; }
    .hz-why-v2-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .hz-hero-icons-row { gap: 10px; }
    .hz-hero-float-icon { padding: 8px 14px; }
    .hz-hero-float-icon span { font-size: 11.5px; }
    .hz-steps-track { grid-template-columns: 1fr 1fr; gap: 20px; }
    .hz-step-dot { width: 46px; height: 46px; }
    .hz-step-dot-inner { font-size: 15px; }
    .hz-step-card { padding: 22px 18px; }
    .hz-step-card h4 { font-size: 14.5px; }
    .hz-step-card p { font-size: 12.5px; }
    .hz-featured-highlights { gap: 12px; }
    .hz-featured-number { font-size: 56px; }
    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        background: transparent;
        backdrop-filter: none;
        padding: 0 0 0 16px;
        min-width: auto;
        display: none;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        transform: none;
    }
    .nav-dropdown-menu a {
        font-size: 13px;
        padding: 8px 12px;
        color: rgba(255,255,255,0.6);
    }
    .nav-dropdown-menu a:hover {
        color: white;
        background: rgba(255,255,255,0.1) !important;
    }
}

@media (max-width: 480px) {
    .hz-showcase-section { padding: 80px 20px; }
    .hz-manifesto-section { padding: 60px 20px; }
    .hz-process-v2-section { padding: 80px 20px; }
    .hz-why-v2-section { padding: 80px 20px; }
    .hz-featured-img-wrap { min-height: 240px; }
    .hz-featured-body { padding: 28px 22px; }
    .hz-featured-title { font-size: 24px; }
    .hz-featured-desc { font-size: 14px; }
    .hz-featured-btn { padding: 12px 24px; font-size: 14px; }
    .hz-why-v2-grid { grid-template-columns: 1fr; }
    .hz-why-v2-card { padding: 28px 22px; }
    .hz-steps-track { grid-template-columns: 1fr; gap: 20px; }
    .hz-step-dot { width: 42px; height: 42px; margin-bottom: 16px; }
    .hz-hero-icons-row { gap: 8px; }
    .hz-hero-float-icon { padding: 7px 12px; }
    .hz-hero-float-icon svg { width: 15px; height: 15px; }
    .hz-hero-float-icon span { font-size: 10.5px; }
    .hz-card-v2-stat-row { gap: 12px; }
}

/* ---------- ABOUT PAGE RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .sectors-grid { grid-template-columns: repeat(3, 1fr); }
    .mystery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .story-section { padding: 100px 32px; }
    .sectors-section { padding: 100px 32px; }
    .fairs-teaser { padding: 100px 32px; }
    .delphi-section { padding: 100px 32px; }
    .numbers-section { padding: 100px 32px; }
    .about-cta-section { padding: 100px 32px; }
    .story-value-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .delphi-grid { grid-template-columns: 1fr; gap: 48px; }
    .numbers-grid { grid-template-columns: repeat(2, 1fr); }
    .sectors-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .about-hero { padding-top: 100px; min-height: 90vh; }
    .hero-stats-row { gap: 12px; }
    .hero-stat-pill { padding: 10px 16px; }
    .hero-stat-pill .pill-value { font-size: 18px; }
    .sectors-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .mystery-grid { grid-template-columns: repeat(2, 1fr); }
    .mystery-card { height: 180px; }
    .fomo-stats { gap: 24px; }
    .fomo-num { font-size: 36px; }
    .fomo-divider { height: 36px; }
    .numbers-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .story-value-grid { grid-template-columns: 1fr; }
    .story-value-card { padding: 28px 24px; }
    .story-quote-block { padding: 40px 32px 40px 44px; border-radius: 24px; margin-bottom: 60px; }
    .story-quote-deco { top: 16px; left: 16px; }
    .story-quote-mark { width: 28px; height: 28px; }
    .story-quote-side-label { display: none; }
    .story-quote-line { font-size: clamp(18px, 4.5vw, 28px); }
    .story-quote-accent { font-size: clamp(20px, 5vw, 32px); }
}

@media (max-width: 480px) {
    .sectors-grid { grid-template-columns: 1fr; }
    .numbers-grid { grid-template-columns: 1fr; }
    .hero-stats-row { flex-direction: column; align-items: center; }
    .story-section { padding: 80px 20px; }
    .sectors-section { padding: 80px 20px; }
    .fairs-teaser { padding: 80px 20px; }
    .mystery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mystery-card { height: 150px; }
    .mystery-counter-num { font-size: 44px; }
    .fomo-stats { gap: 16px; flex-wrap: wrap; }
    .fomo-num { font-size: 32px; }
    .fomo-plus { font-size: 24px; }
    .fomo-label { font-size: 11px; }
    .teaser-hook { font-size: 17px; }
    .teaser-cta-btn { padding: 16px 32px; font-size: 15px; }
    .glimpse-flag { width: 28px; height: 18px; }
    .delphi-section { padding: 80px 20px; }
    .numbers-section { padding: 80px 20px; }
    .about-cta-section { padding: 80px 20px; }
    .story-quote-block { padding: 32px 20px 32px 32px; border-radius: 20px; margin-bottom: 48px; }
    .story-quote-deco { top: 12px; left: 12px; }
    .story-quote-mark { width: 24px; height: 24px; }
    .story-quote-divider { margin: 14px 0; }
    .story-quote-divider span { width: 40px; height: 2px; }
}


/* =============================================
   FUAR TAKVİMİ PAGE
   ============================================= */

/* --- HERO --- */
.calendar-hero {
    position: relative;
    min-height: 85vh;
    background: linear-gradient(165deg, #000000 0%, #0a0a2e 30%, #0d1b3e 60%, #000000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 140px 48px 80px;
}

.calendar-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 800px 600px at 20% 50%, rgba(0, 122, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 80% 30%, rgba(175, 82, 222, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 60% 80%, rgba(90, 200, 250, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.calendar-hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}

/* Animated orbs */
.calendar-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: calOrbFloat 8s ease-in-out infinite;
}

.calendar-hero-orb.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.4), transparent);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.calendar-hero-orb.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(175, 82, 222, 0.35), transparent);
    top: 50%;
    right: 15%;
    animation-delay: -3s;
}

.calendar-hero-orb.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(90, 200, 250, 0.3), transparent);
    bottom: 10%;
    left: 40%;
    animation-delay: -5s;
}

@keyframes calOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

.calendar-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

.calendar-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

.calendar-hero-badge svg {
    width: 16px;
    height: 16px;
    stroke: #5ac8fa;
}

.calendar-hero-title {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    color: white;
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.calendar-hero-title .gradient-text {
    background: linear-gradient(135deg, #5ac8fa 0%, #007aff 40%, #af52de 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calendar-hero-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 48px;
    font-weight: 400;
}

/* Hero stats */
.calendar-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

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

.calendar-hero-stat-value {
    font-size: 36px;
    font-weight: 800;
    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;
    letter-spacing: -1px;
    line-height: 1.2;
}

.calendar-hero-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

.calendar-hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}

/* Scroll hint */
.calendar-scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.25);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.calendar-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
    animation: calScrollPulse 2s ease-in-out infinite;
}

@keyframes calScrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}

/* Floating particles in hero */
.calendar-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.cal-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: calParticleFloat 6s ease-in-out infinite;
}

.cal-particle:nth-child(1) { width: 4px; height: 4px; background: rgba(0,122,255,0.5); top: 20%; left: 15%; animation-delay: 0s; }
.cal-particle:nth-child(2) { width: 3px; height: 3px; background: rgba(175,82,222,0.5); top: 35%; right: 20%; animation-delay: -1s; }
.cal-particle:nth-child(3) { width: 5px; height: 5px; background: rgba(90,200,250,0.4); top: 60%; left: 25%; animation-delay: -2s; }
.cal-particle:nth-child(4) { width: 3px; height: 3px; background: rgba(0,122,255,0.4); top: 75%; right: 30%; animation-delay: -3s; }
.cal-particle:nth-child(5) { width: 4px; height: 4px; background: rgba(175,82,222,0.4); bottom: 25%; left: 60%; animation-delay: -4s; }
.cal-particle:nth-child(6) { width: 3px; height: 3px; background: rgba(90,200,250,0.5); top: 15%; right: 35%; animation-delay: -5s; }

@keyframes calParticleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    25% { opacity: 0.8; transform: translateY(-20px) scale(1); }
    50% { opacity: 0.4; transform: translateY(-40px) scale(0.8); }
    75% { opacity: 0.6; transform: translateY(-60px) scale(0.6); }
}

/* --- SECTION INTRO (before fairs) --- */
.calendar-section-intro {
    max-width: 1400px;
    margin: 0 auto;
    padding: 64px 48px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.calendar-section-intro-left h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.calendar-section-intro-left p {
    font-size: 15px;
    color: #86868b;
    font-weight: 400;
}

.calendar-section-intro-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cal-info-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(0, 122, 255, 0.06);
    border: 1px solid rgba(0, 122, 255, 0.1);
    font-size: 12px;
    font-weight: 600;
    color: #007aff;
    white-space: nowrap;
}

.cal-info-chip svg {
    width: 14px;
    height: 14px;
}

.cal-info-chip.green {
    background: rgba(52, 199, 89, 0.06);
    border-color: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.cal-info-chip.purple {
    background: rgba(175, 82, 222, 0.06);
    border-color: rgba(175, 82, 222, 0.1);
    color: #af52de;
}

/* --- FILTER BAR --- */
.calendar-filter-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(249, 249, 249, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 0;
    transition: all 0.3s ease;
}

.calendar-filter-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.filter-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.04);
    padding: 4px;
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.filter-tab:hover {
    color: #1d1d1f;
    background: rgba(0,0,0,0.04);
}

.filter-tab.active {
    color: #fff;
    background: var(--gradient-primary);
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.3);
}

.filter-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.08);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    transition: all 0.3s ease;
}

.filter-tab.active .tab-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    white-space: nowrap;
}

.filter-dropdown-btn:hover {
    background: rgba(0,0,0,0.07);
    border-color: rgba(0,0,0,0.1);
}

.filter-dropdown-btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

.filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.filter-search:focus-within {
    border-color: #007aff;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.filter-search svg {
    width: 15px;
    height: 15px;
    color: #86868b;
    flex-shrink: 0;
}

.filter-search input {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    outline: none;
    width: 160px;
    font-family: inherit;
}

.filter-search input::placeholder {
    color: #aaa;
}

.filter-view-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(0,0,0,0.04);
}

.view-btn {
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #86868b;
}

.view-btn.active {
    background: white;
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.view-btn svg {
    width: 16px;
    height: 16px;
}

/* --- FEATURED FAIR --- */
.calendar-featured {
    max-width: 1400px;
    margin: 0 auto;
    padding: 64px 48px 0;
}

.featured-fair-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #000;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-fair-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.2);
}

.featured-fair-visual {
    position: relative;
    overflow: hidden;
}

.featured-fair-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-fair-card:hover .featured-fair-visual img {
    transform: scale(1.05);
}

.featured-fair-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.9) 100%);
}

.featured-fair-badge {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.featured-fair-badge.spotlight {
    background: linear-gradient(135deg, #ff9500, #ff3b30);
    color: white;
}

.featured-fair-badge svg {
    width: 14px;
    height: 14px;
}

.featured-fair-body {
    position: relative;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a1a 0%, #111133 100%);
}

.featured-fair-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 20px;
    width: fit-content;
}

.featured-fair-status.upcoming {
    background: rgba(0, 122, 255, 0.15);
    color: #5ac8fa;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.featured-fair-status .status-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: livePulse 2s ease-in-out infinite;
}

.featured-fair-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    margin-bottom: 12px;
}

.featured-fair-date svg {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.featured-fair-name {
    font-size: 36px;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-fair-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 24px;
}

.featured-fair-location svg {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.featured-fair-desc {
    font-size: 14.5px;
    color: rgba(255,255,255,0.35);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 440px;
}

.featured-fair-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.featured-fair-tag {
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}

.featured-fair-metrics {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.featured-metric {
    text-align: left;
}

.featured-metric-value {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
}

.featured-metric-label {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 2px;
}

.featured-fair-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.featured-fair-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.featured-fair-btn.primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
}

.featured-fair-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4);
}

.featured-fair-btn.secondary {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
}

.featured-fair-btn.secondary:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.featured-fair-btn svg {
    width: 16px;
    height: 16px;
}

/* Countdown in featured */
.featured-countdown {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.countdown-unit {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 14px;
    text-align: center;
    min-width: 56px;
}

.countdown-value {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    line-height: 1;
}

.countdown-label {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
}

/* --- MAIN CONTENT --- */
.calendar-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 48px 100px;
}

/* Month Section Header */
.month-section {
    margin-bottom: 56px;
}

.month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.month-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.month-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: white;
    font-size: 18px;
    font-weight: 800;
}

.month-info h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

.month-info span {
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
}

.month-count {
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
    font-size: 13px;
    font-weight: 600;
}

/* --- FAIR CARDS GRID --- */
.fairs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- FAIR CARD --- */
.fair-card {
    position: relative;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.fair-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06);
    border-color: transparent;
}

/* Card Image */
.fair-card-visual {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.fair-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fair-card:hover .fair-card-visual img {
    transform: scale(1.08);
}

.fair-card-visual::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
}

/* Status Badge */
.fair-card-status {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fair-card-status.upcoming {
    background: rgba(0, 122, 255, 0.85);
    color: white;
}

.fair-card-status.open {
    background: rgba(52, 199, 89, 0.85);
    color: white;
}

.fair-card-status.filling {
    background: rgba(255, 149, 0, 0.85);
    color: white;
}

.fair-card-status.urgent {
    background: rgba(255, 59, 48, 0.85);
    color: white;
    animation: calUrgentPulse 2s ease-in-out infinite;
}

.fair-card-status.completed {
    background: rgba(142, 142, 147, 0.85);
    color: white;
}

.fair-card-status.early {
    background: rgba(175, 82, 222, 0.85);
    color: white;
}

@keyframes calUrgentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.fair-card-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Mini countdown on card */
.fair-card-countdown {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.card-countdown-unit {
    flex: 1;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
}

.card-countdown-val {
    font-size: 16px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.card-countdown-lbl {
    font-size: 8px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Card country flag */
.fair-card-flag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Card Body */
.fair-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fair-card-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #007aff;
    font-weight: 600;
    margin-bottom: 10px;
}

.fair-card-date svg {
    width: 14px;
    height: 14px;
}

.fair-card-name {
    font-size: 19px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.fair-card:hover .fair-card-name {
    color: #007aff;
}

.fair-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #86868b;
    margin-bottom: 6px;
}

.fair-card-location svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.fair-card-venue {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #aeaeb2;
    margin-bottom: 16px;
}

.fair-card-venue svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Card Tags */
.fair-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fair-card-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 122, 255, 0.06);
    color: #007aff;
    letter-spacing: 0.2px;
}

.fair-card-tag.sector {
    background: rgba(175, 82, 222, 0.06);
    color: #af52de;
}

.fair-card-tag.incentive {
    background: rgba(52, 199, 89, 0.06);
    color: #34c759;
}

/* Card Metrics */
.fair-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 0;
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.card-metric {
    text-align: center;
}

.card-metric-val {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.card-metric-lbl {
    font-size: 10px;
    color: #aeaeb2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Card Footer / CTA */
.fair-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
    background: rgba(0,0,0,0.01);
}

.fair-card-price {
    display: flex;
    flex-direction: column;
}

.fair-card-price-label {
    font-size: 10px;
    color: #aeaeb2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fair-card-price-value {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
}

.fair-card-price-value .original {
    font-size: 12px;
    color: #aeaeb2;
    text-decoration: line-through;
    font-weight: 500;
    margin-left: 6px;
}

.fair-card-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    background: var(--gradient-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
    font-family: inherit;
    text-decoration: none;
}

.fair-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35);
}

.fair-card-cta svg {
    width: 14px;
    height: 14px;
}

/* Teşvik badge on card */
.fair-card-incentive-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.06), rgba(0, 122, 255, 0.04));
    font-size: 11.5px;
    font-weight: 600;
    color: #34c759;
    border-top: 1px solid rgba(52, 199, 89, 0.08);
}

.fair-card-incentive-strip svg {
    width: 13px;
    height: 13px;
}

/* --- BOTTOM CTA SECTION --- */
.calendar-cta-section {
    position: relative;
    padding: 100px 48px;
    background: linear-gradient(165deg, #000000 0%, #0a0a2e 30%, #0d1b3e 60%, #000000 100%);
    overflow: hidden;
    text-align: center;
}

.calendar-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 600px 400px at 30% 50%, rgba(0, 122, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 300px at 70% 50%, rgba(175, 82, 222, 0.06) 0%, transparent 70%);
}

.calendar-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.calendar-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.calendar-cta-icon svg {
    width: 28px;
    height: 28px;
    stroke: #5ac8fa;
}

.calendar-cta-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: white;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.calendar-cta-title span {
    background: linear-gradient(135deg, #5ac8fa, #007aff, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calendar-cta-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    margin-bottom: 36px;
}

.calendar-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.calendar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.calendar-cta-btn.primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
}

.calendar-cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0, 122, 255, 0.4);
}

.calendar-cta-btn.glass {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
}

.calendar-cta-btn.glass:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    transform: translateY(-3px);
}

.calendar-cta-btn svg {
    width: 18px;
    height: 18px;
}

/* --- EMPTY STATE --- */
.fairs-empty {
    text-align: center;
    padding: 80px 20px;
    display: none;
}

.fairs-empty.visible {
    display: block;
}

.fairs-empty svg {
    width: 48px;
    height: 48px;
    color: #d2d2d7;
    margin-bottom: 16px;
}

.fairs-empty h4 {
    font-size: 18px;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 8px;
}

.fairs-empty p {
    font-size: 14px;
    color: #aeaeb2;
}

/* --- FUAR TAKVİMİ RESPONSIVE --- */
@media (max-width: 1200px) {
    .fairs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-fair-card {
        min-height: 450px;
    }
}

@media (max-width: 1024px) {
    .calendar-hero {
        padding: 120px 32px 70px;
        min-height: 75vh;
    }

    .calendar-filter-inner {
        padding: 12px 24px;
        flex-wrap: wrap;
    }

    .filter-controls {
        flex-wrap: wrap;
    }

    .calendar-featured {
        padding: 48px 32px 0;
    }

    .calendar-content {
        padding: 40px 32px 80px;
    }

    .featured-fair-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .featured-fair-visual {
        height: 300px;
    }

    .featured-fair-visual::after {
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    }

    .featured-fair-body {
        padding: 36px;
    }

    .featured-fair-name {
        font-size: 28px;
    }

    .featured-countdown {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: auto;
    }

    .calendar-section-intro {
        padding: 48px 32px 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .calendar-hero {
        padding: 100px 20px 60px;
        min-height: 70vh;
    }

    .calendar-hero-title {
        letter-spacing: -1px;
    }

    .calendar-hero-sub {
        font-size: 15px;
    }

    .calendar-hero-stats {
        gap: 24px;
    }

    .calendar-hero-stat-value {
        font-size: 28px;
    }

    .calendar-hero-stat-divider {
        height: 30px;
    }

    .calendar-filter-inner {
        padding: 10px 16px;
        gap: 10px;
    }

    .filter-tabs {
        width: 100%;
        order: 2;
    }

    .filter-controls {
        width: 100%;
        order: 1;
    }

    .filter-search {
        flex: 1;
    }

    .filter-search input {
        width: 100%;
    }

    .fairs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .calendar-featured {
        padding: 32px 20px 0;
    }

    .calendar-content {
        padding: 32px 20px 60px;
    }

    .featured-fair-body {
        padding: 28px;
    }

    .featured-fair-name {
        font-size: 24px;
    }

    .featured-fair-metrics {
        gap: 16px;
        flex-wrap: wrap;
    }

    .featured-fair-actions {
        flex-wrap: wrap;
    }

    .calendar-cta-section {
        padding: 80px 20px;
    }

    .month-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fair-card-visual {
        height: 200px;
    }

    .calendar-section-intro {
        padding: 32px 20px 0;
    }

    .calendar-section-intro-right {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .calendar-hero-stats {
        gap: 16px;
    }

    .calendar-hero-stat-value {
        font-size: 24px;
    }

    .calendar-hero-stat-divider {
        display: none;
    }

    .calendar-hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .featured-countdown {
        gap: 4px;
    }

    .countdown-unit {
        min-width: 46px;
        padding: 8px 8px;
    }

    .countdown-value {
        font-size: 18px;
    }

    .fair-card-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .filter-view-toggle {
        display: none;
    }

    .calendar-section-intro-right {
        display: none;
    }
}


/* ===========================================
   İLETİŞİM (CONTACT) PAGE — cp- prefix
   =========================================== */

/* ---------- HERO ---------- */
.cp-hero {
    position: relative;
    min-height: 92vh;
    background: linear-gradient(165deg, #08081a 0%, #0d0f2b 40%, #131540 70%, #0a0a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 140px 56px 80px;
}

.cp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.cp-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.35;
    pointer-events: none;
}

.cp-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #007aff 0%, transparent 70%);
    top: -10%; right: 10%;
    animation: cpOrbFloat 12s ease-in-out infinite;
}

.cp-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #af52de 0%, transparent 70%);
    bottom: -5%; left: 5%;
    animation: cpOrbFloat 15s ease-in-out infinite reverse;
}

.cp-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #5ac8fa 0%, transparent 70%);
    top: 30%; left: 40%;
    animation: cpOrbFloat 18s ease-in-out infinite 3s;
}

@keyframes cpOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* Particles */
.cp-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cp-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: cpParticleFloat 20s linear infinite;
}

.cp-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 22s; }
.cp-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: -4s; animation-duration: 18s; }
.cp-particle:nth-child(3) { left: 45%; top: 35%; animation-delay: -8s; animation-duration: 25s; }
.cp-particle:nth-child(4) { left: 65%; top: 70%; animation-delay: -2s; animation-duration: 20s; }
.cp-particle:nth-child(5) { left: 80%; top: 15%; animation-delay: -6s; animation-duration: 23s; }
.cp-particle:nth-child(6) { left: 90%; top: 50%; animation-delay: -10s; animation-duration: 19s; }
.cp-particle:nth-child(7) { left: 35%; top: 80%; animation-delay: -12s; animation-duration: 21s; }
.cp-particle:nth-child(8) { left: 55%; top: 10%; animation-delay: -3s; animation-duration: 24s; }

@keyframes cpParticleFloat {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

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

.cp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 28px;
    backdrop-filter: blur(20px);
}

.cp-hero-badge svg {
    width: 16px;
    height: 16px;
    stroke: #007aff;
}

.cp-hero-title {
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.cp-hero-sub {
    font-size: clamp(15px, 1.3vw, 18px);
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 40px;
}

.cp-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cp-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(0,122,255,0.6));
    animation: cpScrollPulse 2s ease-in-out infinite;
}

@keyframes cpScrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ---------- QUICK CONTACT METHODS ---------- */
.cp-methods-section {
    padding: 100px 56px 80px;
    background: var(--bg-main);
}

.cp-methods-header {
    text-align: center;
    margin-bottom: 56px;
}

.cp-methods-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.12);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #007aff;
    margin-bottom: 20px;
}

.cp-methods-badge svg {
    width: 15px;
    height: 15px;
}

.cp-methods-header h2 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.cp-methods-header p {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
}

.cp-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.cp-method-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 32px 28px;
    background: var(--white);
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
}

.cp-method-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.cp-method-whatsapp::before { background: linear-gradient(135deg, rgba(37,211,102,0.06), rgba(37,211,102,0.02)); }
.cp-method-phone::before { background: linear-gradient(135deg, rgba(0,122,255,0.06), rgba(0,122,255,0.02)); }
.cp-method-email::before { background: linear-gradient(135deg, rgba(175,82,222,0.06), rgba(175,82,222,0.02)); }
.cp-method-office::before { background: linear-gradient(135deg, rgba(255,149,0,0.06), rgba(255,149,0,0.02)); }

.cp-method-card:hover::before { opacity: 1; }

.cp-method-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border-color: transparent;
}

.cp-method-icon-wrap {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.cp-method-whatsapp .cp-method-icon-wrap { background: rgba(37,211,102,0.1); }
.cp-method-phone .cp-method-icon-wrap { background: rgba(0,122,255,0.1); }
.cp-method-email .cp-method-icon-wrap { background: rgba(175,82,222,0.1); }
.cp-method-office .cp-method-icon-wrap { background: rgba(255,149,0,0.1); }

.cp-method-icon-wrap svg {
    width: 24px;
    height: 24px;
}

.cp-method-whatsapp .cp-method-icon-wrap svg { stroke: #25d366; }
.cp-method-phone .cp-method-icon-wrap svg { stroke: #007aff; }
.cp-method-email .cp-method-icon-wrap svg { stroke: #af52de; }
.cp-method-office .cp-method-icon-wrap svg { stroke: #ff9500; }

.cp-method-body {
    position: relative;
    z-index: 1;
    flex: 1;
}

.cp-method-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.cp-method-body p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.cp-method-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.cp-method-badge-live,
.cp-method-badge-hours {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 16px;
}

.cp-method-badge-live {
    background: rgba(37,211,102,0.1);
    color: #25d366;
}

.cp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25d366;
    animation: cpLivePulse 2s ease-in-out infinite;
}

@keyframes cpLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.cp-method-badge-hours {
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
}

.cp-method-badge-hours svg {
    width: 12px;
    height: 12px;
}

.cp-method-arrow {
    position: absolute;
    top: 28px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.cp-method-arrow svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-primary);
}

.cp-method-card:hover .cp-method-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- MAIN SECTION: FORM + SIDEBAR ---------- */
.cp-main-section {
    padding: 0 56px 100px;
    background: var(--bg-main);
}

.cp-main-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: flex-start;
}

/* --- FORM --- */
.cp-form-wrapper {
    background: var(--white);
    border-radius: 28px;
    padding: 48px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 40px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.cp-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 28px 28px 0 0;
}

.cp-form-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
}

.cp-form-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007aff, #af52de);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-form-icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
}

.cp-form-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.8px;
    margin-bottom: 4px;
}

.cp-form-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Step Indicator */
.cp-form-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 36px;
    padding: 20px 24px;
    background: rgba(0,0,0,0.02);
    border-radius: 16px;
}

.cp-form-step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.4;
    transition: all 0.4s ease;
}

.cp-form-step.active {
    opacity: 1;
}

.cp-form-step.completed {
    opacity: 0.7;
}

.cp-step-num {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.4s ease;
}

.cp-form-step.active .cp-step-num {
    background: var(--gradient-primary);
    color: #fff;
}

.cp-form-step.completed .cp-step-num {
    background: #34c759;
    color: #fff;
}

.cp-form-step span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.2px;
}

.cp-form-step.active span {
    color: var(--text-primary);
}

.cp-step-line {
    flex: 1;
    height: 2px;
    background: rgba(0,0,0,0.06);
    margin: 0 16px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.cp-step-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Form Panels */
.cp-form-panel {
    display: none;
}

.cp-form-panel.active {
    display: block;
    animation: cpPanelIn 0.4s ease;
}

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

.cp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.cp-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-form-group.cp-full {
    margin-bottom: 20px;
}

.cp-form-group label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.1px;
}

.cp-form-group label svg {
    width: 15px;
    height: 15px;
    stroke: #007aff;
    opacity: 0.7;
}

.cp-form-group label .required {
    color: #ff3b30;
    font-weight: 700;
}

.cp-form-group input,
.cp-form-group select,
.cp-form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--text-primary);
    background: rgba(0,0,0,0.015);
    transition: all 0.3s ease;
    outline: none;
}

.cp-form-group input:focus,
.cp-form-group select:focus,
.cp-form-group textarea:focus {
    border-color: #007aff;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(0,122,255,0.08);
}

.cp-form-group input::placeholder,
.cp-form-group textarea::placeholder {
    color: rgba(0,0,0,0.25);
}

.cp-form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.cp-form-group select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2386868b' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%2386868b' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

.cp-char-count {
    font-size: 11.5px;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 4px;
}

/* File Drop */
.cp-file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 16px;
    background: rgba(0,0,0,0.015);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    gap: 8px;
}

.cp-file-drop:hover,
.cp-file-drop.dragover {
    border-color: #007aff;
    background: rgba(0,122,255,0.03);
}

.cp-file-drop svg {
    width: 28px;
    height: 28px;
    stroke: var(--text-secondary);
    margin-bottom: 4px;
}

.cp-file-drop span {
    font-size: 13.5px;
    color: var(--text-secondary);
}

.cp-file-drop span strong {
    color: #007aff;
}

.cp-file-drop small {
    font-size: 11.5px;
    color: rgba(0,0,0,0.3);
}

.cp-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Consent / Privacy */
.cp-form-consent {
    margin-bottom: 28px;
}

.cp-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.cp-checkbox-wrap input[type="checkbox"] {
    display: none;
}

.cp-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.3s ease;
    position: relative;
}

.cp-checkbox-wrap input:checked + .cp-checkbox-custom {
    background: var(--gradient-primary);
    border-color: transparent;
}

.cp-checkbox-wrap input:checked + .cp-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cp-checkbox-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cp-checkbox-text a {
    color: #007aff;
    text-decoration: none;
    font-weight: 600;
}

.cp-checkbox-text a:hover {
    text-decoration: underline;
}

/* Form Navigation */
.cp-form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
}

.cp-btn-next,
.cp-btn-prev,
.cp-btn-submit,
.cp-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-btn-next {
    background: var(--gradient-primary);
    color: #fff;
}

.cp-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,122,255,0.3);
}

.cp-btn-next svg,
.cp-btn-prev svg,
.cp-btn-submit svg {
    width: 16px;
    height: 16px;
}

.cp-btn-prev {
    background: transparent;
    color: var(--text-secondary);
    padding-left: 16px;
}

.cp-btn-prev:hover {
    color: var(--text-primary);
}

.cp-btn-submit {
    background: linear-gradient(135deg, #34c759, #30d158);
    color: #fff;
}

.cp-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(52,199,89,0.3);
}

.cp-btn-reset {
    background: var(--gradient-primary);
    color: #fff;
    margin-top: 20px;
}

.cp-btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,122,255,0.3);
}

/* Success State */
.cp-form-success {
    display: none;
    text-align: center;
    padding: 60px 20px;
    animation: cpSuccessIn 0.6s ease;
}

.cp-form-success.active {
    display: block;
}

@keyframes cpSuccessIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.cp-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34c759, #30d158);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.cp-success-icon svg {
    width: 36px;
    height: 36px;
    stroke: #fff;
}

.cp-form-success h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.cp-form-success p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- SIDEBAR --- */
.cp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.cp-sidebar-card {
    background: var(--white);
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.cp-sidebar-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

/* Map Card */
.cp-map-frame {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.cp-map-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: saturate(0.85) contrast(1.05);
}

.cp-map-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
}

.cp-map-pin {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007aff, #5856d6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-map-pin svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.cp-map-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cp-map-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.cp-map-text span {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Office Card */
.cp-office-card {
    padding: 24px;
}

.cp-office-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 18px;
    letter-spacing: -0.2px;
}

.cp-office-card h4 svg {
    width: 18px;
    height: 18px;
    stroke: #007aff;
}

.cp-hours-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.cp-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-hours-day {
    font-size: 13.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cp-hours-time {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-hours-row.closed .cp-hours-time {
    color: #ff3b30;
}

.cp-office-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.cp-office-status.open {
    background: rgba(52,199,89,0.08);
    color: #34c759;
}

.cp-office-status.closed {
    background: rgba(255,59,48,0.08);
    color: #ff3b30;
}

.cp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: cpLivePulse 2s ease-in-out infinite;
}

/* Quick Links Card */
.cp-quick-card {
    padding: 24px;
}

.cp-quick-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}

.cp-quick-card h4 svg {
    width: 18px;
    height: 18px;
    stroke: #ff9500;
}

.cp-quick-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.25s ease;
}

.cp-quick-link:hover {
    background: rgba(0,122,255,0.05);
    color: #007aff;
}

.cp-quick-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cp-link-arrow {
    margin-left: auto;
    width: 14px !important;
    height: 14px !important;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.25s ease;
}

.cp-quick-link:hover .cp-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Social Card */
.cp-social-card {
    padding: 24px;
}

.cp-social-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}

.cp-social-card h4 svg {
    width: 18px;
    height: 18px;
    stroke: #af52de;
}

.cp-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cp-social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cp-social-btn svg {
    width: 18px;
    height: 18px;
}

.cp-social-linkedin {
    background: rgba(10,102,194,0.08);
    color: #0a66c2;
}
.cp-social-linkedin:hover { background: rgba(10,102,194,0.15); transform: translateY(-2px); }

.cp-social-instagram {
    background: rgba(228,64,95,0.08);
    color: #e4405f;
}
.cp-social-instagram:hover { background: rgba(228,64,95,0.15); transform: translateY(-2px); }

.cp-social-youtube {
    background: rgba(255,0,0,0.08);
    color: #ff0000;
}
.cp-social-youtube:hover { background: rgba(255,0,0,0.15); transform: translateY(-2px); }

.cp-social-twitter {
    background: rgba(0,0,0,0.06);
    color: #1d1d1f;
}
.cp-social-twitter:hover { background: rgba(0,0,0,0.12); transform: translateY(-2px); }

.cp-social-btn span {
    letter-spacing: -0.1px;
}

/* ---------- FAQ SECTION ---------- */
.cp-faq-section {
    padding: 100px 56px;
    background: linear-gradient(180deg, var(--bg-main) 0%, #f0f0f5 100%);
}

.cp-faq-inner {
    max-width: 840px;
    margin: 0 auto;
}

.cp-faq-header {
    text-align: center;
    margin-bottom: 56px;
}

.cp-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(175,82,222,0.06);
    border: 1px solid rgba(175,82,222,0.12);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #af52de;
    margin-bottom: 20px;
}

.cp-faq-badge svg {
    width: 15px;
    height: 15px;
}

.cp-faq-header h2 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.cp-faq-header p {
    font-size: 16px;
    color: var(--text-secondary);
}

.cp-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-faq-item {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

.cp-faq-item:hover {
    border-color: rgba(0,122,255,0.15);
}

.cp-faq-item.open {
    border-color: rgba(0,122,255,0.2);
    box-shadow: 0 8px 30px rgba(0,122,255,0.06);
}

.cp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 28px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.3s ease;
}

.cp-faq-question span {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    flex: 1;
    padding-right: 16px;
}

.cp-faq-question svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.cp-faq-item.open .cp-faq-question svg {
    transform: rotate(45deg);
    stroke: #007aff;
}

.cp-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-faq-answer p {
    padding: 0 28px 24px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ---------- BOTTOM CTA ---------- */
.cp-bottom-cta {
    padding: 80px 56px 100px;
    background: linear-gradient(165deg, #08081a 0%, #0d0f2b 40%, #131540 70%, #0a0a1a 100%);
    position: relative;
    overflow: hidden;
}

.cp-bottom-cta::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,122,255,0.15), transparent 70%);
    top: -100px;
    right: -100px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.cp-cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cp-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #007aff, #af52de);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
}

.cp-cta-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.cp-bottom-cta h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.cp-bottom-cta p {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 36px;
}

.cp-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.2px;
}

.cp-cta-btn svg {
    width: 18px;
    height: 18px;
}

.cp-cta-btn.primary {
    background: var(--gradient-primary);
    color: #fff;
}

.cp-cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,122,255,0.35);
}

.cp-cta-btn.glass {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
}

.cp-cta-btn.glass:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .cp-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cp-main-inner {
        grid-template-columns: 1fr 340px;
        gap: 32px;
    }
}

@media (max-width: 1024px) {
    .cp-hero { padding: 120px 32px 80px; min-height: 80vh; }
    .cp-methods-section { padding: 80px 32px 60px; }
    .cp-main-section { padding: 0 32px 80px; }
    .cp-faq-section { padding: 80px 32px; }
    .cp-bottom-cta { padding: 60px 32px 80px; }

    .cp-main-inner {
        grid-template-columns: 1fr;
    }
    .cp-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .cp-hero { padding: 100px 24px 60px; min-height: 70vh; }
    .cp-hero-title { letter-spacing: -1px; }
    .cp-methods-section { padding: 60px 24px 48px; }
    .cp-main-section { padding: 0 24px 60px; }
    .cp-faq-section { padding: 60px 24px; }
    .cp-bottom-cta { padding: 48px 24px 60px; }

    .cp-methods-grid {
        grid-template-columns: 1fr;
    }

    .cp-form-wrapper { padding: 32px 24px; }
    .cp-form-row { grid-template-columns: 1fr; }
    .cp-form-steps { overflow-x: auto; }

    .cp-sidebar {
        grid-template-columns: 1fr;
    }

    .cp-faq-question { padding: 18px 22px; }
    .cp-faq-question span { font-size: 14.5px; }
    .cp-faq-answer p { padding: 0 22px 20px; }
}

@media (max-width: 480px) {
    .cp-hero { padding: 90px 16px 50px; }
    .cp-methods-section { padding: 48px 16px 36px; }
    .cp-main-section { padding: 0 16px 48px; }
    .cp-faq-section { padding: 48px 16px; }
    .cp-bottom-cta { padding: 36px 16px 48px; }

    .cp-form-wrapper { padding: 24px 18px; border-radius: 20px; }
    .cp-form-header { flex-direction: column; align-items: flex-start; }
    .cp-form-steps { padding: 14px 16px; }
    .cp-form-step span { display: none; }

    .cp-method-card { padding: 24px 20px; }
    .cp-cta-buttons { flex-direction: column; }
    .cp-cta-btn { width: 100%; justify-content: center; }

    .cp-social-grid { grid-template-columns: 1fr; }
}

/* =============================================
   FUAR DETAY SAYFASI (fd-)
   ============================================= */

/* ---------- HERO ---------- */
.fd-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 140px 56px 60px;
    overflow: hidden;
    background: linear-gradient(165deg, #050510 0%, #0a0b20 25%, #0d1035 50%, #10133a 75%, #080818 100%);
}

.fd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fd-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 40%, rgba(0,122,255,0.14), transparent 55%),
                radial-gradient(ellipse at 75% 25%, rgba(175,82,222,0.12), transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(90,200,250,0.06), transparent 40%);
}

/* Animated Grid Background */
.fd-hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
    animation: fdGridMove 20s linear infinite;
}

@keyframes fdGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.fd-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    animation: fdOrbFloat 8s ease-in-out infinite;
}

.fd-orb-1 {
    width: 600px;
    height: 600px;
    background: rgba(0,122,255,0.15);
    top: -150px;
    right: -150px;
}

.fd-orb-2 {
    width: 450px;
    height: 450px;
    background: rgba(175,82,222,0.12);
    bottom: -100px;
    left: -100px;
    animation-delay: -4s;
}

.fd-orb-3 {
    width: 300px;
    height: 300px;
    background: rgba(90,200,250,0.08);
    top: 40%;
    left: 50%;
    animation-delay: -6s;
}

@keyframes fdOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.08); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* Floating Particles */
.fd-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.fd-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    animation: fdParticleFloat var(--dur, 12s) var(--delay, 0s) ease-in-out infinite;
}

.fd-particle:nth-child(1) { left: 10%; top: 20%; --dur: 14s; --delay: 0s; background: rgba(0,122,255,0.5); width: 4px; height: 4px; }
.fd-particle:nth-child(2) { left: 85%; top: 15%; --dur: 11s; --delay: -3s; background: rgba(175,82,222,0.5); width: 3px; height: 3px; }
.fd-particle:nth-child(3) { left: 20%; top: 70%; --dur: 16s; --delay: -6s; background: rgba(90,200,250,0.4); width: 5px; height: 5px; }
.fd-particle:nth-child(4) { left: 70%; top: 60%; --dur: 10s; --delay: -2s; }
.fd-particle:nth-child(5) { left: 40%; top: 30%; --dur: 13s; --delay: -5s; background: rgba(0,122,255,0.3); }
.fd-particle:nth-child(6) { left: 90%; top: 80%; --dur: 15s; --delay: -8s; background: rgba(175,82,222,0.4); width: 4px; height: 4px; }
.fd-particle:nth-child(7) { left: 55%; top: 85%; --dur: 12s; --delay: -1s; }
.fd-particle:nth-child(8) { left: 30%; top: 45%; --dur: 18s; --delay: -10s; background: rgba(90,200,250,0.3); width: 2px; height: 2px; }

@keyframes fdParticleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(20px, -30px) scale(1.2); opacity: 0.7; }
    50% { transform: translate(-10px, -60px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(30px, -20px) scale(1.1); opacity: 0.8; }
}

/* Route Animation */
.fd-route-animation {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.fd-route-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fdRouteAppear 1.5s 0.8s ease forwards;
}

@keyframes fdRouteAppear {
    to { opacity: 1; }
}

.fd-route-path {
    stroke-dashoffset: 1000;
    animation: fdRouteDraw 3s 1s ease forwards;
}

@keyframes fdRouteDraw {
    to { stroke-dashoffset: 0; }
}

.fd-route-path-glow {
    animation: fdRouteGlow 3s 2.5s ease-in-out infinite;
}

@keyframes fdRouteGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.4; }
}

.fd-pin-turkey, .fd-pin-algeria {
    opacity: 0;
    animation: fdPinAppear 0.5s ease forwards;
}

.fd-pin-turkey { animation-delay: 1.5s; }
.fd-pin-algeria { animation-delay: 3s; }

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

.fd-pin-turkey circle:first-child, .fd-pin-algeria circle:first-child {
    animation: fdPinPulse 2s ease-in-out infinite;
}

@keyframes fdPinPulse {
    0%, 100% { r: 8; opacity: 0.3; }
    50% { r: 14; opacity: 0.1; }
}

.fd-airplane {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fd-trail-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fd-trail-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #5ac8fa;
    box-shadow: 0 0 6px rgba(90,200,250,0.6);
    animation: fdSparkleFade 1s ease forwards;
    pointer-events: none;
}

@keyframes fdSparkleFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

.fd-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
}

/* Breadcrumb */
.fd-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

.fd-breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fd-breadcrumb a:hover {
    color: rgba(255,255,255,0.8);
}

.fd-breadcrumb svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255,255,255,0.3);
}

.fd-breadcrumb span {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* Badges */
.fd-hero-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.fd-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.fd-badge svg {
    width: 14px;
    height: 14px;
}

.fd-badge-live {
    background: rgba(52,199,89,0.12);
    color: #34c759;
    border: 1px solid rgba(52,199,89,0.2);
}

.fd-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c759;
    position: relative;
}

.fd-live-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(52,199,89,0.4);
    animation: livePulse 2s ease-in-out infinite;
}

.fd-badge-sector {
    background: rgba(0,122,255,0.1);
    color: #5ac8fa;
    border: 1px solid rgba(0,122,255,0.15);
}

.fd-badge-country {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Hero Title */
.fd-hero-title {
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -2.5px;
    line-height: 1.05;
    margin-bottom: 20px;
}

.fd-hero-subtitle {
    display: block;
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 500;
    background: linear-gradient(135deg, #5ac8fa, #af52de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin-top: 8px;
}

.fd-hero-desc {
    font-size: 16.5px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 36px;
}

/* Hero Actions */
.fd-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fd-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(0,122,255,0.3);
}

.fd-btn-primary svg {
    width: 18px;
    height: 18px;
}

.fd-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,122,255,0.4);
}

.fd-btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
    backdrop-filter: blur(20px);
    transition: all 0.35s ease;
}

.fd-btn-glass svg {
    width: 18px;
    height: 18px;
}

.fd-btn-glass:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}

.fd-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fd-btn-ghost svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.fd-btn-ghost:hover {
    color: rgba(255,255,255,0.8);
}

.fd-btn-ghost:hover svg {
    transform: translateY(4px);
}

/* Hero Chips */
.fd-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}

.fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}

.fd-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.fd-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

.fd-chip-accent {
    background: rgba(0,122,255,0.15);
    border-color: rgba(0,122,255,0.3);
    color: rgba(255,255,255,0.85);
}

.fd-chip-accent:hover {
    background: rgba(0,122,255,0.25);
    border-color: rgba(0,122,255,0.4);
}

/* Countdown */
.fd-countdown {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    padding: 28px 48px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    backdrop-filter: blur(20px);
}

.fd-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.fd-countdown-num {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fd-countdown-label {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fd-countdown-sep {
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.2);
    padding-bottom: 18px;
}

/* ---------- STATS SECTION ---------- */
.fd-stats {
    padding: 0 56px;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.fd-stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.fd-stat-card {
    background: var(--white);
    border-radius: 20px;
    padding: 24px 20px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fd-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.fd-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.fd-stat-icon svg {
    width: 20px;
    height: 20px;
    stroke: #007aff;
}

.fd-stat-label {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fd-stat-value {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.fd-stat-highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 18px;
}

.fd-stat-incentive {
    background: linear-gradient(135deg, #0d0f2b, #131540);
    border-color: rgba(0,122,255,0.15);
}

.fd-stat-incentive .fd-stat-label {
    color: rgba(255,255,255,0.5);
}

.fd-stat-incentive .fd-stat-icon {
    background: rgba(0,122,255,0.15);
}

.fd-stat-incentive .fd-stat-icon svg {
    stroke: #5ac8fa;
}

.fd-stat-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}

/* ---------- SOCIAL PROOF TICKER ---------- */
.fd-ticker {
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa, #eef1f6);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 18px 0;
    margin-bottom: 48px;
    position: relative;
}

.fd-ticker::before,
.fd-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.fd-ticker::before {
    left: 0;
    background: linear-gradient(90deg, #f8f9fa, transparent);
}

.fd-ticker::after {
    right: 0;
    background: linear-gradient(-90deg, #f8f9fa, transparent);
}

.fd-ticker-track {
    display: flex;
    gap: 48px;
    animation: fdTickerScroll 30s linear infinite;
    width: max-content;
    will-change: transform;
}

.fd-ticker:hover .fd-ticker-track {
    animation-duration: 90s;
}

.fd-ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: default;
    transition: color 0.3s ease;
}

.fd-ticker-item:hover {
    color: var(--text-primary);
}

.fd-ticker-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #007aff;
}

.fd-ticker-item span {
    font-weight: 600;
    color: var(--text-primary);
}

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

/* ---------- MAIN SECTION ---------- */
.fd-main {
    padding: 80px 56px;
    max-width: 1400px;
    margin: 0 auto;
}

.fd-main-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

/* Content Cards */
.fd-section-card {
    background: var(--white);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.fd-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.fd-section-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fd-section-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.fd-icon-green { background: linear-gradient(135deg, #34c759, #30d158); }
.fd-icon-orange { background: linear-gradient(135deg, #ff9500, #ff6b00); }
.fd-icon-purple { background: linear-gradient(135deg, #af52de, #bf5af2); }
.fd-icon-red { background: linear-gradient(135deg, #ff3b30, #ff453a); }
.fd-icon-cyan { background: linear-gradient(135deg, #00c7be, #5ac8fa); }

.fd-icon-simem-logo {
    background: linear-gradient(135deg, #0a1628, #1a2a4a);
    border: 2px solid rgba(0,122,255,0.3);
    box-shadow: 0 4px 16px rgba(0,122,255,0.15);
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.fd-icon-simem-logo svg {
    width: 26px;
    height: 26px;
    stroke: #5ac8fa;
}

.fd-icon-simem-img {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    width: 52px;
    height: 52px;
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.fd-icon-simem-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.fd-section-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.8px;
}

.fd-section-card p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.fd-section-card p strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Partner Badge */
.fd-partner-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(0,122,255,0.04), rgba(175,82,222,0.04));
    border: 1px solid rgba(0,122,255,0.1);
    border-radius: 18px;
    margin-top: 8px;
}

.fd-partner-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
}

.fd-partner-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.fd-partner-badge div:last-child {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.fd-partner-badge strong {
    color: var(--text-primary);
}

.fd-partner-badge em {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    font-weight: 700;
}

/* Check List */
.fd-check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fd-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.fd-check-list li strong {
    color: var(--text-primary);
}

.fd-check-list li svg {
    width: 20px;
    height: 20px;
    stroke: #34c759;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Opportunity Grid */
.fd-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.fd-opp-card {
    padding: 24px;
    background: linear-gradient(135deg, rgba(0,122,255,0.03), rgba(175,82,222,0.03));
    border: 1px solid rgba(0,122,255,0.08);
    border-radius: 18px;
    text-align: center;
    transition: all 0.3s ease;
}

.fd-opp-card:hover {
    border-color: rgba(0,122,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,122,255,0.06);
}

.fd-opp-num {
    font-size: 32px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    margin-bottom: 6px;
}

.fd-opp-card p {
    font-size: 13px !important;
    color: var(--text-secondary);
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.fd-opp-detail {
    padding: 20px 24px;
    background: rgba(0,0,0,0.02);
    border-radius: 16px;
    margin-bottom: 0 !important;
}

/* Who Grid */
.fd-who-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.fd-who-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.25s ease;
}

.fd-who-item:hover {
    background: rgba(0,122,255,0.04);
    transform: translateX(4px);
}

.fd-who-item svg {
    width: 20px;
    height: 20px;
    stroke: #007aff;
    flex-shrink: 0;
}

/* ---------- VISITOR PROFILE CARDS ---------- */
.fd-visitor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.fd-visitor-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fd-visitor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
}

.fd-visitor-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,122,255,0.12);
    box-shadow: 0 8px 32px rgba(0,122,255,0.08);
}

.fd-vc-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.fd-vc-icon svg {
    width: 20px;
    height: 20px;
}

.fd-visitor-card strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.fd-visitor-card span {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-weight: 400;
}

/* Color variants */
.fd-vc-blue::before { background: linear-gradient(135deg, #007aff, #5ac8fa); }
.fd-vc-blue .fd-vc-icon { background: rgba(0,122,255,0.08); }
.fd-vc-blue .fd-vc-icon svg { stroke: #007aff; }

.fd-vc-green::before { background: linear-gradient(135deg, #34c759, #30d158); }
.fd-vc-green .fd-vc-icon { background: rgba(52,199,89,0.08); }
.fd-vc-green .fd-vc-icon svg { stroke: #34c759; }

.fd-vc-indigo::before { background: linear-gradient(135deg, #af52de, #bf5af2); }
.fd-vc-indigo .fd-vc-icon { background: rgba(175,82,222,0.08); }
.fd-vc-indigo .fd-vc-icon svg { stroke: #af52de; }

.fd-vc-red::before { background: linear-gradient(135deg, #ff3b30, #ff6b6b); }
.fd-vc-red .fd-vc-icon { background: rgba(255,59,48,0.08); }
.fd-vc-red .fd-vc-icon svg { stroke: #ff3b30; }

.fd-vc-purple::before { background: linear-gradient(135deg, #5856d6, #af52de); }
.fd-vc-purple .fd-vc-icon { background: rgba(88,86,214,0.08); }
.fd-vc-purple .fd-vc-icon svg { stroke: #5856d6; }

.fd-vc-teal::before { background: linear-gradient(135deg, #5ac8fa, #007aff); }
.fd-vc-teal .fd-vc-icon { background: rgba(90,200,250,0.08); }
.fd-vc-teal .fd-vc-icon svg { stroke: #5ac8fa; }

/* Country Tags */
.fd-visitor-countries {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 20px 24px;
}

.fd-vc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.fd-vc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-vc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 500;
    background: rgba(0,0,0,0.04);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.fd-vc-tag:hover {
    background: rgba(0,122,255,0.06);
    border-color: rgba(0,122,255,0.15);
}

.fd-vc-tag-primary {
    background: rgba(0,122,255,0.08);
    border-color: rgba(0,122,255,0.18);
    color: #007aff;
    font-weight: 600;
}

/* ---------- ROUTE INFO CARD ---------- */
.fd-route-info-card {
    background: var(--white);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.fd-route-info-card .fd-section-header {
    margin-bottom: 24px;
}

.fd-route-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fd-route-info-item {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fd-route-info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fd-route-info-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.15);
}

.fd-route-info-item:hover::before {
    opacity: 1;
}

.fd-ri-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,122,255,0.1), rgba(175,82,222,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.fd-ri-icon svg {
    width: 24px;
    height: 24px;
    stroke: #007aff;
}

.fd-route-info-item h4,
.fd-route-info-item strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    display: block;
}

.fd-route-info-item p,
.fd-route-info-item > span {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    display: block;
}

/* ---------- TIMELINE / PARTICIPATION PROCESS ---------- */
.fd-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 28px;
}

.fd-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(0,122,255,0.1), rgba(175,82,222,0.1));
}

.fd-timeline-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    position: relative;
    align-items: flex-start;
}

.fd-tl-num {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.fd-timeline-item:hover .fd-tl-num,
.fd-tl-active .fd-tl-num {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,122,255,0.3);
}

.fd-tl-content {
    flex: 1;
}

.fd-tl-content h4,
.fd-tl-content strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.4;
    display: block;
}

.fd-tl-content p,
.fd-tl-content > span {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    display: block;
}

.fd-tl-active .fd-tl-content h4,
.fd-tl-active .fd-tl-content strong {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Video */
.fd-video-wrapper {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.fd-video-placeholder {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 16/9;
}

.fd-video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fd-video-placeholder:hover img {
    transform: scale(1.05);
}

.fd-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fd-video-play svg {
    width: 28px;
    height: 28px;
    stroke: #007aff;
    margin-left: 4px;
}

.fd-video-placeholder:hover .fd-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 50px rgba(0,0,0,0.25);
}

.fd-video-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

/* Gallery */
.fd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fd-gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/2;
    cursor: pointer;
}

.fd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fd-gallery-item:hover img {
    transform: scale(1.08);
}

.fd-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.fd-gallery-item:hover .fd-gallery-overlay {
    opacity: 1;
}

.fd-gallery-overlay span {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.1px;
}

/* Map */
.fd-map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
}

.fd-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.fd-map-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(0,122,255,0.04);
    border-radius: 16px;
}

.fd-map-info svg {
    width: 22px;
    height: 22px;
    stroke: #007aff;
    flex-shrink: 0;
}

.fd-map-info div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fd-map-info strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
}

.fd-map-info span {
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ---------- SIDEBAR ---------- */
.fd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.fd-sidebar-card {
    background: var(--white);
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.fd-sidebar-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.fd-sidebar-card h3 svg {
    width: 20px;
    height: 20px;
    stroke: #007aff;
}

.fd-sidebar-card > p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 18px;
}

/* Contact Buttons */
.fd-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.fd-sidebar-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fd-sidebar-btn span {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
}

.fd-btn-call {
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(0,122,255,0.04));
    color: #007aff;
    border: 1px solid rgba(0,122,255,0.12);
}

.fd-btn-call:hover {
    background: rgba(0,122,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,122,255,0.12);
}

.fd-btn-mail {
    background: rgba(0,0,0,0.03);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.06);
}

.fd-btn-mail:hover {
    background: rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.fd-btn-whatsapp {
    background: linear-gradient(135deg, rgba(37,211,102,0.1), rgba(37,211,102,0.04));
    color: #25d366;
    border: 1px solid rgba(37,211,102,0.15);
    margin-bottom: 0;
}

.fd-btn-whatsapp:hover {
    background: rgba(37,211,102,0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,211,102,0.12);
}

/* Document Links */
.fd-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.fd-doc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.25s ease;
}

.fd-doc-link:hover {
    background: rgba(0,122,255,0.04);
    color: #007aff;
}

.fd-doc-link svg {
    width: 16px;
    height: 16px;
}

/* Services */
.fd-service-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0,0,0,0.015);
    margin-bottom: 10px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.fd-service-item:last-child {
    margin-bottom: 0;
}

.fd-service-item:hover {
    background: rgba(0,122,255,0.03);
    border-color: rgba(0,122,255,0.08);
    transform: translateX(4px);
}

.fd-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fd-service-icon svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.fd-si-blue { background: linear-gradient(135deg, #007aff, #5ac8fa); }
.fd-si-green { background: linear-gradient(135deg, #34c759, #30d158); }
.fd-si-purple { background: linear-gradient(135deg, #af52de, #bf5af2); }
.fd-si-orange { background: linear-gradient(135deg, #ff9500, #ff6b00); }
.fd-si-red { background: linear-gradient(135deg, #ff3b30, #ff453a); }
.fd-si-cyan { background: linear-gradient(135deg, #00c7be, #5ac8fa); }
.fd-si-pink { background: linear-gradient(135deg, #ff2d55, #ff375f); }
.fd-si-teal { background: linear-gradient(135deg, #30b0c7, #32ade6); }

.fd-service-item div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fd-service-item strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.fd-service-item span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Trust Card */
.fd-trust-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.fd-trust-item {
    text-align: center;
    padding: 18px 12px;
    background: linear-gradient(135deg, rgba(0,122,255,0.03), rgba(175,82,222,0.03));
    border-radius: 16px;
    border: 1px solid rgba(0,122,255,0.06);
}

.fd-trust-num {
    font-size: 24px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.fd-trust-item span {
    display: block;
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 4px;
}

/* Sticky CTA */
.fd-sticky-cta {
    background: linear-gradient(165deg, #08081a 0%, #0d0f2b 40%, #131540 100%);
    border-color: rgba(0,122,255,0.15);
    overflow: hidden;
    position: relative;
}

.fd-sticky-cta::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.2), transparent 70%);
    top: -40px;
    right: -40px;
    filter: blur(40px);
    pointer-events: none;
}

.fd-sticky-inner {
    position: relative;
    z-index: 1;
}

.fd-sticky-badge {
    display: inline-flex;
    padding: 5px 14px;
    background: rgba(255,59,48,0.15);
    color: #ff453a;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 50px;
    border: 1px solid rgba(255,59,48,0.2);
    margin-bottom: 16px;
    letter-spacing: 0.3px;
    animation: fdPulse 3s ease-in-out infinite;
}

@keyframes fdPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fd-sticky-cta h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 10px;
    gap: 0;
}

.fd-sticky-cta p {
    font-size: 13.5px;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
    margin-bottom: 20px;
}

.fd-sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(0,122,255,0.3);
}

.fd-sticky-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.fd-sticky-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,122,255,0.4);
}

.fd-sticky-btn:hover svg {
    transform: translateX(4px);
}

/* ---------- PARTICIPANT LOGOS ---------- */
.fd-logos {
    padding: 80px 56px;
    background: linear-gradient(180deg, #f9f9f9, #ffffff, #f9f9f9);
    position: relative;
    overflow: hidden;
}

.fd-logos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,122,255,0.25), transparent);
}

.fd-logos-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.fd-logos-header {
    text-align: center;
    margin-bottom: 48px;
}

.fd-logos-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(175,82,222,0.08));
    border: 1px solid rgba(0,122,255,0.12);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #007aff;
    margin-bottom: 20px;
}

.fd-logos-badge svg {
    width: 16px;
    height: 16px;
    stroke: #007aff;
}

.fd-logos-header h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1.2px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.fd-logos-header p {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Marquee Wrapper */
.fd-logos-marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 48px;
    overflow: hidden;
    padding: 0 0;
}

.fd-logos-row {
    overflow: visible;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    padding: 20px 0;
}

.fd-logos-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

[data-direction="left"] .fd-logos-track {
    animation: fdLogosScrollLeft 35s linear infinite;
}

[data-direction="right"] .fd-logos-track {
    animation: fdLogosScrollRight 35s linear infinite;
}

.fd-logos-row:hover .fd-logos-track {
    animation-duration: 100s;
}

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

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

/* Logo Card */
.fd-logo-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    min-width: 200px;
}

.fd-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: rgba(0,122,255,0.15);
}

.fd-logo-card img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: #f5f5f7;
    padding: 4px;
    flex-shrink: 0;
}

.fd-logo-card span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.2px;
}

/* Logo Footer */
.fd-logos-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.fd-logos-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.fd-logos-counter svg {
    width: 20px;
    height: 20px;
    stroke: #007aff;
    flex-shrink: 0;
}

.fd-logos-counter strong {
    color: var(--text-primary);
    font-weight: 700;
}

.fd-logos-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 24px rgba(0,122,255,0.25);
}

.fd-logos-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.fd-logos-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,122,255,0.35);
}

.fd-logos-cta:hover svg {
    transform: translateX(4px);
}

/* ---------- QUICK NAV ---------- */
.fd-quick-nav {
    background: var(--white);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 0;
    position: sticky;
    top: 72px;
    z-index: 90;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.85);
}

.fd-quick-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0;
}

.fd-qnav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    position: relative;
}

.fd-qnav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #007aff;
}

.fd-qnav-item:hover {
    color: #007aff;
    border-bottom-color: #007aff;
    background: rgba(0,122,255,0.04);
}

/* ---------- FULL-WIDTH SECTIONS ---------- */
.fd-fw-section {
    padding: 80px 56px;
    position: relative;
}

.fd-fw-gallery {
    background: var(--white);
}

.fd-fw-video {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.fd-fw-timeline {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.fd-fw-process {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

/* Process Video */
.fd-process-video {
    max-width: 960px;
    margin: 0 auto;
}

.fd-process-video-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    aspect-ratio: 16 / 9;
}

.fd-process-video-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fd-process-video-wrap:hover img {
    transform: scale(1.03);
}

.fd-process-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
    transition: opacity 0.3s ease;
}

.fd-process-video-wrap:hover::after {
    opacity: 0.8;
}

.fd-process-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transition: all 0.35s ease;
}

.fd-process-play svg {
    width: 28px;
    height: 28px;
    stroke: #1d1d1f;
    fill: #1d1d1f;
    margin-left: 3px;
}

.fd-process-video-wrap:hover .fd-process-play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.fd-process-label {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* Steps strip under video */
.fd-process-steps {
    display: flex;
    gap: 0;
    margin-top: 20px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.fd-process-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-right: 1px solid rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.fd-process-step:last-child {
    border-right: none;
}

.fd-process-step:hover {
    background: rgba(0,122,255,0.03);
}

.fd-ps-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f0f5;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.fd-ps-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.fd-ps-active .fd-ps-num {
    background: linear-gradient(135deg, #007aff, #af52de);
    color: #fff;
}

.fd-ps-active .fd-ps-text {
    color: #007aff;
}

.fd-fw-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.fd-fw-header {
    text-align: center;
    margin-bottom: 48px;
}

.fd-fw-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 8px;
    letter-spacing: -0.5px;
}

.fd-fw-header p {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.fd-fw-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(0,122,255,0.06);
    border: 1px solid rgba(0,122,255,0.12);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #007aff;
}

.fd-fw-badge svg {
    width: 14px;
    height: 14px;
}

.fd-fw-badge-red {
    background: rgba(255,59,48,0.06);
    border-color: rgba(255,59,48,0.12);
    color: #ff3b30;
}

.fd-fw-badge-cyan {
    background: rgba(0,199,190,0.06);
    border-color: rgba(0,199,190,0.12);
    color: #00c7be;
}

/* Full-width gallery grid */
.fd-gallery-grid-fw {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Full-width video */
.fd-video-fw {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* Full-width timeline — HORIZONTAL */
.fd-timeline-fw {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    padding-left: 0;
    gap: 0;
    position: relative;
}

.fd-timeline-fw::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,122,255,0.08), rgba(0,122,255,0.15), rgba(175,82,222,0.15), rgba(175,82,222,0.08));
}

.fd-timeline-fw .fd-timeline-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 12px;
    padding-top: 0;
}

.fd-timeline-fw .fd-tl-num {
    position: relative;
    z-index: 2;
}

.fd-timeline-fw .fd-tl-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fd-timeline-fw .fd-tl-content strong {
    font-size: 14px;
    text-align: center;
}

.fd-timeline-fw .fd-tl-content > span {
    font-size: 13px;
    text-align: center;
    max-width: 180px;
}

.fd-timeline-cta {
    text-align: center;
    margin-top: 40px;
}

.fd-timeline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #007aff, #af52de);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.35s ease;
    box-shadow: 0 4px 20px rgba(0,122,255,0.25);
}

.fd-timeline-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,122,255,0.35);
}

.fd-timeline-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.fd-timeline-btn:hover svg {
    transform: translateX(4px);
}

/* ---------- SERVICE CTA BUTTON ---------- */
.fd-service-item-cta > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fd-service-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: linear-gradient(135deg, #007aff, #5856d6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,122,255,0.2);
}

.fd-service-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,122,255,0.35);
}

.fd-service-cta-btn svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.fd-service-cta-btn:hover svg {
    transform: translateX(3px);
}

.fd-service-cta-orange {
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    box-shadow: 0 2px 8px rgba(255,149,0,0.2);
}

.fd-service-cta-orange:hover {
    box-shadow: 0 4px 16px rgba(255,149,0,0.35);
}

/* ---------- BOTTOM CTA ---------- */
.fd-bottom-cta {
    padding: 100px 56px;
    background: linear-gradient(165deg, #08081a 0%, #0d0f2b 40%, #131540 70%, #0a0a1a 100%);
    position: relative;
    overflow: hidden;
}

.fd-cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,122,255,0.15), transparent 70%);
    top: -150px;
    right: -100px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.fd-cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.fd-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #007aff, #af52de);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
}

.fd-cta-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.fd-bottom-cta h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.fd-bottom-cta p {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 36px;
}

.fd-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.fd-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.2px;
}

.fd-cta-btn svg {
    width: 18px;
    height: 18px;
}

.fd-cta-btn.primary {
    background: var(--gradient-primary);
    color: #fff;
}

.fd-cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,122,255,0.35);
}

.fd-cta-btn.glass {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
}

.fd-cta-btn.glass:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}

/* ---------- FULL-WIDTH MAP ---------- */
.fd-fw-map {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.fd-map-fw {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

.fd-map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    background: var(--white);
    aspect-ratio: 16 / 9;
}

.fd-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.fd-map-info-fw {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fd-map-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.fd-map-info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.fd-map-info-item svg {
    width: 22px;
    height: 22px;
    stroke: #34c759;
    flex-shrink: 0;
    margin-top: 2px;
}

.fd-map-info-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fd-map-info-item strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.fd-map-info-item span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ---------- FAQ ---------- */
.fd-faq {
    padding: 80px 56px;
    background: var(--white);
    position: relative;
}

.fd-faq-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.fd-faq-header {
    text-align: center;
    margin-bottom: 56px;
}

.fd-faq-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 8px;
    letter-spacing: -0.5px;
}

.fd-faq-header p {
    font-size: 16px;
    color: var(--text-secondary);
}

.fd-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.fd-faq-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fd-faq-item {
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.fd-faq-item:hover {
    border-color: rgba(0,122,255,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.fd-faq-item.active {
    background: var(--white);
    border-color: rgba(0,122,255,0.2);
    box-shadow: 0 8px 32px rgba(0,122,255,0.06);
}

.fd-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.fd-faq-q span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}

.fd-faq-q svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fd-faq-item.active .fd-faq-q svg {
    transform: rotate(45deg);
    stroke: #007aff;
}

.fd-faq-item.active .fd-faq-q span {
    color: #007aff;
}

.fd-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 24px;
}

.fd-faq-item.active .fd-faq-a {
    max-height: 300px;
    padding: 0 24px 20px;
}

.fd-faq-a p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.fd-faq-a a {
    color: #007aff;
    text-decoration: none;
    font-weight: 600;
}

.fd-faq-a a:hover {
    text-decoration: underline;
}

.fd-faq-a strong {
    color: var(--text-primary);
}

.fd-faq-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 48px;
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(0,122,255,0.04), rgba(175,82,222,0.04));
    border: 1px solid rgba(0,122,255,0.1);
    border-radius: 14px;
}

.fd-faq-contact svg {
    width: 20px;
    height: 20px;
    stroke: #007aff;
    flex-shrink: 0;
}

.fd-faq-contact span {
    font-size: 14px;
    color: var(--text-secondary);
}

.fd-faq-contact a {
    color: #007aff;
    text-decoration: none;
    font-weight: 600;
}

.fd-faq-contact a:hover {
    text-decoration: underline;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .fd-stats-inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .fd-main-grid {
        grid-template-columns: 1fr 360px;
        gap: 28px;
    }
    .fd-route-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .fd-hero { padding: 120px 32px 50px; min-height: 80vh; }
    .fd-stats { padding: 0 32px; }
    .fd-main { padding: 60px 32px; }
    .fd-bottom-cta { padding: 80px 32px; }

    .fd-fw-section { padding: 60px 32px; }
    .fd-fw-header h2 { font-size: 30px; }
    .fd-gallery-grid-fw { grid-template-columns: repeat(2, 1fr); }
    .fd-qnav-item { padding: 14px 20px; font-size: 13px; }
    .fd-faq { padding: 60px 32px; }
    .fd-faq-header h2 { font-size: 30px; }
    .fd-map-fw { grid-template-columns: 1fr; }
    .fd-map-info-fw { flex-direction: row; flex-wrap: wrap; }
    .fd-map-info-item { flex: 1 1 calc(33.333% - 12px); }

    .fd-main-grid {
        grid-template-columns: 1fr;
    }
    .fd-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .fd-sticky-cta {
        grid-column: 1 / -1;
    }
    .fd-route-animation { display: none; }
    .fd-logos { padding: 60px 32px; }
}

@media (max-width: 768px) {
    .fd-hero { padding: 100px 24px 40px; min-height: 70vh; }
    .fd-stats { padding: 0 24px; margin-top: 0; }
    .fd-main { padding: 48px 24px; }
    .fd-bottom-cta { padding: 60px 24px; }
    .fd-logos { padding: 48px 24px; }

    .fd-fw-section { padding: 48px 24px; }
    .fd-fw-header h2 { font-size: 26px; }
    .fd-fw-header { margin-bottom: 32px; }
    .fd-gallery-grid-fw { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fd-qnav-item { padding: 12px 16px; font-size: 12px; gap: 6px; }
    .fd-qnav-item svg { width: 14px; height: 14px; }
    .fd-timeline-btn { padding: 14px 32px; font-size: 15px; }
    .fd-timeline-fw { flex-wrap: wrap; justify-content: center; gap: 24px 0; }
    .fd-timeline-fw .fd-timeline-item { flex: 0 0 33.333%; }
    .fd-timeline-fw::before { display: none; }
    .fd-video-fw { border-radius: 16px; }
    .fd-process-video-wrap { border-radius: 16px; }
    .fd-process-play { width: 64px; height: 64px; }
    .fd-process-play svg { width: 22px; height: 22px; }
    .fd-process-step { padding: 12px 14px; gap: 8px; }
    .fd-ps-text { font-size: 12px; }
    .fd-ps-num { width: 24px; height: 24px; font-size: 11px; }
    .fd-map-fw { gap: 20px; }
    .fd-map-info-item { flex: 1 1 100%; }
    .fd-map-wrapper { border-radius: 16px; }
    .fd-faq { padding: 48px 24px; }
    .fd-faq-grid { grid-template-columns: 1fr; gap: 12px; }
    .fd-faq-header h2 { font-size: 26px; }
    .fd-faq-header { margin-bottom: 36px; }
    .fd-faq-q { padding: 18px 20px; }
    .fd-faq-q span { font-size: 14px; }
    .fd-logos-header { margin-bottom: 32px; }
    .fd-logo-card { padding: 14px 20px; min-width: 170px; }
    .fd-logo-card img { width: 32px; height: 32px; }
    .fd-logo-card span { font-size: 13px; }
    .fd-logos-footer { gap: 20px; flex-direction: column; }

    .fd-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .fd-section-card { padding: 28px 24px; }
    .fd-opportunity-grid { grid-template-columns: 1fr; }
    .fd-who-grid { grid-template-columns: 1fr; }
    .fd-visitor-grid { grid-template-columns: repeat(2, 1fr); }
    .fd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .fd-route-info-grid { grid-template-columns: 1fr 1fr; }

    .fd-hero-title { letter-spacing: -1.5px; }
    .fd-hero-actions { flex-direction: column; }
    .fd-hero-actions a { width: 100%; justify-content: center; }

    .fd-countdown { padding: 20px 24px; gap: 4px; }
    .fd-countdown-num { font-size: 26px; }
    .fd-countdown-item { min-width: 55px; }
    .fd-countdown-sep { font-size: 22px; padding-bottom: 14px; }

    .fd-hero-chips { gap: 8px; }
    .fd-chip { padding: 6px 12px; font-size: 12px; }

    .fd-timeline { padding-left: 20px; }
    .fd-tl-num { width: 32px; height: 32px; font-size: 13px; }

    .fd-sidebar {
        grid-template-columns: 1fr;
    }

    .fd-btn-ghost { display: none; }
}

@media (max-width: 480px) {
    .fd-hero { padding: 90px 16px 36px; }
    .fd-stats { padding: 0 16px; }
    .fd-main { padding: 36px 16px; }
    .fd-bottom-cta { padding: 48px 16px; }
    .fd-visitor-grid { grid-template-columns: 1fr; }

    .fd-fw-section { padding: 36px 16px; }
    .fd-fw-header h2 { font-size: 22px; }
    .fd-gallery-grid-fw { grid-template-columns: 1fr; }
    .fd-quick-nav { top: 56px; }
    .fd-qnav-item { padding: 10px 12px; font-size: 11px; }
    .fd-timeline-btn { padding: 12px 28px; font-size: 14px; border-radius: 12px; }
    .fd-timeline-fw { flex-direction: column; align-items: stretch; gap: 16px; padding-left: 20px; }
    .fd-timeline-fw::before { left: 16px; top: 0; bottom: 0; width: 2px; height: auto; }
    .fd-timeline-fw .fd-timeline-item { flex-direction: row; text-align: left; align-items: flex-start; padding: 12px 0; flex: none; }
    .fd-timeline-fw .fd-tl-content { align-items: flex-start; }
    .fd-timeline-fw .fd-tl-content strong { text-align: left; }
    .fd-timeline-fw .fd-tl-content > span { text-align: left; max-width: none; }
    .fd-video-fw { border-radius: 14px; }
    .fd-process-video-wrap { border-radius: 14px; }
    .fd-process-steps { flex-wrap: wrap; border-radius: 12px; }
    .fd-process-step { flex: 0 0 50%; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 10px 12px; }
    .fd-process-step:nth-child(even) { border-right: none; }
    .fd-process-step:nth-last-child(-n+1) { border-bottom: none; flex: 1; }
    .fd-process-play { width: 56px; height: 56px; }
    .fd-process-play svg { width: 20px; height: 20px; }
    .fd-process-label { font-size: 12px; bottom: 16px; }
    .fd-ps-text { font-size: 11px; }
    .fd-map-fw { gap: 16px; }
    .fd-map-wrapper { border-radius: 14px; }
    .fd-map-info-item { padding: 16px; }
    .fd-map-info-item strong { font-size: 13px; }
    .fd-map-info-item span { font-size: 12px; }
    .fd-faq { padding: 36px 16px; }
    .fd-faq-header h2 { font-size: 22px; }
    .fd-faq-q { padding: 16px 18px; gap: 12px; }
    .fd-faq-q span { font-size: 13px; }
    .fd-faq-q svg { width: 18px; height: 18px; }
    .fd-faq-item { border-radius: 14px; }
    .fd-faq-contact { flex-direction: column; text-align: center; padding: 16px 20px; }
    .fd-faq-contact span { font-size: 13px; }

    .fd-stats-inner {
        grid-template-columns: 1fr 1fr;
    }
    .fd-stat-card { padding: 18px 14px; }
    .fd-stat-value { font-size: 13px; }
    .fd-stat-highlight { font-size: 16px; }

    .fd-section-card { padding: 24px 18px; border-radius: 20px; }
    .fd-gallery-grid { grid-template-columns: 1fr; }
    .fd-route-info-grid { grid-template-columns: 1fr; }

    .fd-sidebar-card { padding: 22px 18px; }
    .fd-cta-buttons { flex-direction: column; }
    .fd-cta-btn { width: 100%; justify-content: center; }

    .fd-countdown { flex-wrap: wrap; border-radius: 20px; padding: 16px 20px; }
    .fd-countdown-num { font-size: 22px; }
    .fd-countdown-item { min-width: 48px; }

    .fd-hero-chips { flex-direction: column; align-items: center; }
    .fd-timeline { padding-left: 16px; }
    .fd-route-info-card { padding: 24px 18px; }
    .fd-logos { padding: 36px 16px; }
    .fd-logo-card { padding: 12px 16px; min-width: 150px; gap: 10px; }
    .fd-logo-card img { width: 28px; height: 28px; }
    .fd-logo-card span { font-size: 12px; }
}

/* ============================================
   SAGLIK FUARLARI PAGE - ENHANCED VISUALS
   ============================================ */

/* Multi-destination Route Map */
.sf-route-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sf-route-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: sfRouteAppear 1.5s 0.5s ease forwards;
}

@keyframes sfRouteAppear {
    to { opacity: 1; }
}

.sf-route-line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    fill: none;
    stroke-width: 1.5;
}

.sf-route-line.draw {
    animation: sfRouteDraw 2.5s ease forwards;
}

.sf-route-line:nth-child(1) { animation-delay: 0.8s; }
.sf-route-line:nth-child(2) { animation-delay: 1.2s; }
.sf-route-line:nth-child(3) { animation-delay: 1.6s; }
.sf-route-line:nth-child(4) { animation-delay: 2.0s; }
.sf-route-line:nth-child(5) { animation-delay: 2.4s; }

@keyframes sfRouteDraw {
    to { stroke-dashoffset: 0; }
}

.sf-route-glow {
    fill: none;
    stroke-width: 3;
    opacity: 0;
}

.sf-route-glow.active {
    animation: sfRouteGlow 3s ease-in-out infinite;
}

.sf-route-glow:nth-child(6) { animation-delay: 2s; }
.sf-route-glow:nth-child(7) { animation-delay: 2.5s; }
.sf-route-glow:nth-child(8) { animation-delay: 3s; }
.sf-route-glow:nth-child(9) { animation-delay: 3.5s; }
.sf-route-glow:nth-child(10) { animation-delay: 4s; }

@keyframes sfRouteGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.25; }
}

/* Destination pins */
.sf-pin {
    opacity: 0;
}

.sf-pin.appear {
    animation: sfPinAppear 0.6s ease forwards;
}

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

.sf-pin-pulse {
    animation: sfPinPulse 2s ease-in-out infinite;
}

@keyframes sfPinPulse {
    0%, 100% { r: 10; opacity: 0.3; }
    50% { r: 18; opacity: 0.08; }
}

/* Animated airplane along routes */
.sf-map-airplane {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sf-trail-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sf-trail-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #5ac8fa;
    box-shadow: 0 0 8px rgba(90,200,250,0.8);
    animation: sfSparkleFade 1s ease forwards;
    pointer-events: none;
}

@keyframes sfSparkleFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* Floating Medical Icons */
.sf-floating-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.sf-float-icon {
    position: absolute;
    width: 36px;
    height: 36px;
    opacity: 0;
    animation: sfIconFloat 8s ease-in-out infinite;
}

.sf-float-icon svg {
    width: 100%;
    height: 100%;
    stroke: rgba(52,199,89,0.12);
    stroke-width: 1.5;
    fill: none;
}

.sf-float-icon:nth-child(1) { top: 12%; left: 6%; animation-delay: 0s; animation-duration: 7s; }
.sf-float-icon:nth-child(2) { top: 22%; right: 10%; animation-delay: 1.5s; animation-duration: 8s; }
.sf-float-icon:nth-child(3) { bottom: 28%; left: 12%; animation-delay: 3s; animation-duration: 6.5s; }
.sf-float-icon:nth-child(4) { top: 45%; left: 3%; animation-delay: 2s; animation-duration: 7.5s; }
.sf-float-icon:nth-child(5) { bottom: 18%; right: 6%; animation-delay: 4s; animation-duration: 9s; }
.sf-float-icon:nth-child(6) { top: 65%; right: 4%; animation-delay: 1s; animation-duration: 6s; }
.sf-float-icon:nth-child(7) { top: 8%; left: 22%; animation-delay: 2.5s; animation-duration: 8.5s; }
.sf-float-icon:nth-child(8) { bottom: 12%; left: 28%; animation-delay: 0.5s; animation-duration: 7s; }

@keyframes sfIconFloat {
    0% { opacity: 0; transform: translateY(20px) rotate(0deg); }
    15% { opacity: 0.5; }
    50% { transform: translateY(-30px) rotate(10deg); opacity: 0.3; }
    85% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(20px) rotate(-5deg); }
}

/* Hero Airplane Container (Sağlık) */
.sf-hero-airplane {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    overflow-x: clip;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f3c 100%);
}

.sf-airplane-path {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100px;
    display: flex;
    align-items: center;
}

.sf-airplane-path-line {
    position: absolute;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(52,199,89,0.5), rgba(90,200,250,0.5), rgba(175,82,222,0.5), transparent);
    border-radius: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sf-airplane-path-line.animate {
    width: 100%;
}

.sf-plane-svg {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 6px 24px rgba(52,199,89,0.6))
            drop-shadow(0 2px 10px rgba(90,200,250,0.4));
}

.sf-plane-svg.fly {
    opacity: 1;
    animation: sfPlaneAcross 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sfPlaneAcross {
    0% { left: -80px; opacity: 0; transform: translateY(-50%) rotate(0deg); }
    5% { opacity: 1; }
    50% { transform: translateY(-60%) rotate(-2deg); }
    85% { opacity: 1; }
    100% { left: calc(100% + 80px); opacity: 0; transform: translateY(-50%) rotate(0deg); }
}

.sf-plane-trail {
    position: absolute;
    left: -80px;
    top: 50%;
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(52,199,89,0.6) 40%, rgba(90,200,250,0.5) 100%);
    border-radius: 3px;
    transform: translateY(-50%) translateX(-100%);
    opacity: 0;
    pointer-events: none;
    filter: blur(1.5px);
    z-index: 49;
}

.sf-plane-svg.fly ~ .sf-plane-trail {
    opacity: 1;
    animation: sfPlaneAcross 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Health Stat Pills */
.sf-stats-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.sf-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 60px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sf-stat-pill.revealed {
    opacity: 1;
    transform: translateY(0);
}

.sf-stat-pill:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(52,199,89,0.3);
    transform: translateY(-3px);
}

.sf-stat-pill .pill-value {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #34c759, #5ac8fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sf-stat-pill .pill-label {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Fairs airplane separator */
.sf-fairs-airplane {
    position: relative;
    margin-bottom: 48px;
    overflow: visible;
    overflow-x: clip;
}

.sf-fairs-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.sf-fairs-track {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
}

.sf-fairs-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(52,199,89,0.15) 20%, rgba(90,200,250,0.15) 80%, transparent 100%);
    border-radius: 2px;
    position: relative;
}

.sf-fairs-line::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(52,199,89,0.6), rgba(90,200,250,0.5), rgba(175,82,222,0.4));
    border-radius: 2px;
    transition: width 3s ease-out;
}

.sf-fairs-line.animate::after {
    width: 100%;
}

.sf-fair-plane {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(52,199,89,0.5));
}

.sf-fair-plane.fly {
    opacity: 1;
    animation: sfFairPlaneFly 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sfFairPlaneFly {
    0% { left: -60px; opacity: 0; }
    5% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% + 60px); opacity: 0; }
}

/* Destination dots on separator line */
.sf-dest-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 5%;
    pointer-events: none;
}

.sf-dest-dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(52,199,89,0.3);
    border: 2px solid rgba(52,199,89,0.5);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sf-dest-dot.visible {
    opacity: 1;
    transform: scale(1);
}

.sf-dest-dot::after {
    content: attr(data-city);
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

.sf-dest-dot:nth-child(odd) {
    background: rgba(90,200,250,0.3);
    border-color: rgba(90,200,250,0.5);
}

.sf-dest-dot:nth-child(3) {
    background: rgba(175,82,222,0.3);
    border-color: rgba(175,82,222,0.5);
}

/* Medical cross pattern BG */
.sf-cross-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sf-cross {
    position: absolute;
    opacity: 0;
    animation: sfCrossFloat 10s ease-in-out infinite;
}

.sf-cross svg {
    width: 22px;
    height: 22px;
    stroke: rgba(52,199,89,0.06);
    stroke-width: 1.5;
    fill: none;
}

.sf-cross:nth-child(1) { top: 8%; left: 4%; animation-delay: 0s; }
.sf-cross:nth-child(2) { top: 28%; right: 6%; animation-delay: 2s; }
.sf-cross:nth-child(3) { bottom: 22%; left: 10%; animation-delay: 4s; }
.sf-cross:nth-child(4) { top: 55%; right: 12%; animation-delay: 1s; }
.sf-cross:nth-child(5) { bottom: 8%; right: 18%; animation-delay: 3s; }
.sf-cross:nth-child(6) { top: 72%; left: 6%; animation-delay: 5s; }

@keyframes sfCrossFloat {
    0% { opacity: 0; transform: translateY(10px) rotate(0deg); }
    20% { opacity: 0.5; }
    50% { transform: translateY(-25px) rotate(90deg); opacity: 0.25; }
    80% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(10px) rotate(180deg); }
}

/* Extra hero particles */
.sf-hero-extra-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.sf-extra-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(52,199,89,0.4);
    animation: sfParticleFloat 6s ease-in-out infinite;
}

.sf-extra-particle:nth-child(even) { background: rgba(90,200,250,0.3); width: 2px; height: 2px; }
.sf-extra-particle:nth-child(3n) { background: rgba(175,82,222,0.25); width: 4px; height: 4px; }

.sf-extra-particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.sf-extra-particle:nth-child(2) { top: 35%; right: 20%; animation-delay: 1.2s; }
.sf-extra-particle:nth-child(3) { bottom: 25%; left: 25%; animation-delay: 2.4s; }
.sf-extra-particle:nth-child(4) { top: 50%; left: 8%; animation-delay: 0.6s; }
.sf-extra-particle:nth-child(5) { bottom: 15%; right: 12%; animation-delay: 3.6s; }
.sf-extra-particle:nth-child(6) { top: 15%; right: 30%; animation-delay: 1.8s; }
.sf-extra-particle:nth-child(7) { bottom: 35%; left: 35%; animation-delay: 4.2s; }
.sf-extra-particle:nth-child(8) { top: 70%; right: 8%; animation-delay: 0.3s; }
.sf-extra-particle:nth-child(9) { top: 40%; left: 40%; animation-delay: 2.8s; }
.sf-extra-particle:nth-child(10) { bottom: 40%; right: 25%; animation-delay: 1.5s; }

@keyframes sfParticleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
    25% { opacity: 1; transform: translateY(-15px) scale(1.2); }
    50% { opacity: 0.6; transform: translateY(-30px) scale(0.8); }
    75% { opacity: 0.8; transform: translateY(-20px) scale(1.1); }
}

/* Saglik Fuarlari Responsive */
@media (max-width: 768px) {
    .sf-route-map { display: none; }
    .sf-floating-icons { display: none; }
    .sf-cross-pattern { display: none; }
    .sf-stats-row { gap: 10px; }
    .sf-stat-pill { padding: 10px 16px; }
    .sf-stat-pill .pill-value { font-size: 16px; }
    .sf-stat-pill .pill-label { font-size: 11px; }
    .sf-dest-dot::after { font-size: 9px; }
    .sf-hero-airplane { padding: 32px 16px 40px; }
}

@media (max-width: 480px) {
    .sf-stats-row { gap: 8px; }
    .sf-stat-pill { padding: 8px 12px; gap: 6px; }
    .sf-stat-pill .pill-value { font-size: 14px; }
    .sf-fairs-airplane { margin-bottom: 32px; }
    .sf-dest-dot::after { display: none; }
    .sf-hero-extra-particles { display: none; }
}

/* ============================================================
   SF — Comparison Table
============================================================ */
.sf-table-wrap {
    overflow-x: auto;
    margin-top: 20px;
}

.sf-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sf-compare-table thead tr {
    border-bottom: 2px solid rgba(0,0,0,0.08);
}

.sf-compare-table th {
    padding: 12px 16px;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-compare-table th.text-center {
    text-align: center;
}

.sf-compare-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sf-compare-table tbody tr:last-child {
    border-bottom: none;
}

.sf-compare-table td {
    padding: 14px 16px;
    color: var(--text-secondary);
}

.sf-compare-table td.sf-td-name {
    font-weight: 600;
    color: var(--text-primary);
}

.sf-compare-table td.sf-td-name a {
    color: #007aff;
    text-decoration: none;
    transition: color 0.2s;
}

.sf-compare-table td.sf-td-name a:hover {
    color: #5ac8fa;
}

.sf-compare-table td.text-center {
    text-align: center;
    color: var(--text-primary);
    font-weight: 500;
}

.sf-badge-yes {
    display: inline-block;
    background: rgba(52,199,89,0.12);
    color: #34c759;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .sf-compare-table { font-size: 13px; }
    .sf-compare-table th,
    .sf-compare-table td { padding: 10px 12px; }
}