body { overflow-x: hidden; background-color: #ffffff; color: #09090b; }
        
        /* Lenis Smooth Scroll Core */
        html.lenis, html.lenis body { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto !important; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

        /* Hide Scrollbar for clean UI */
        ::-webkit-scrollbar { display: none; }
        * { scrollbar-width: none; }

        /* Hero Text Splitting (kelime sarmalayıcı + harf harf 3D çağlayan) */
        .word { display: inline-flex; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
        .char {
            display: inline-block;
            transform: translateY(115%) rotateX(-80deg);
            opacity: 0;
            transform-origin: 50% 100%;
            will-change: transform, opacity;
        }

        /* Sinematik rozet: üzerinden periyodik ışık süpürmesi geçer */
        .cine-badge-shine {
            background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
            transform: translateX(-120%);
            animation: cineBadgeShine 3.2s ease-in-out infinite;
        }
        @keyframes cineBadgeShine {
            0%, 55% { transform: translateX(-120%); }
            85%, 100% { transform: translateX(120%); }
        }
        @media (prefers-reduced-motion: reduce) { .cine-badge-shine { animation: none; } }

        /* ==========================================================================
           ÖZEL İMLEÇ — ışık halesi + halka + nokta
           ========================================================================== */
        body.cursor-on, body.cursor-on a, body.cursor-on button,
        body.cursor-on .target-pill, body.cursor-on canvas { cursor: none; }

        #cursor-dot {
            width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
            background: linear-gradient(135deg, #0284c7, #059669);
            box-shadow: 0 0 12px rgba(2,132,199,0.6);
        }
        #cursor-ring {
            width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
            border: 1.5px solid rgba(9,9,11,0.28);
            transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease,
                        border-color 0.3s ease, background-color 0.3s ease;
        }
        #cursor-ring.cursor-hover {
            width: 66px; height: 66px; margin: -33px 0 0 -33px;
            border-color: rgba(5,150,105,0.65);
            background-color: rgba(52,211,153,0.08);
        }
        #cursor-glow { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
        #cursor-glow .glow-inner {
            width: 100%; height: 100%; border-radius: 50%;
            /* blur filtresi yerine yumuşak radial-gradient: aynı görünüm, GPU maliyeti çok daha düşük.
               Animasyon yalnızca transform/opacity kullanır (compositor-only, repaint tetiklemez). */
            background: radial-gradient(circle,
                rgba(2,132,199,0.11) 0%, rgba(5,150,105,0.07) 35%, rgba(5,150,105,0.03) 55%, transparent 72%);
            will-change: transform, opacity;
            animation: glowBreath 4s ease-in-out infinite;
        }
        @keyframes glowBreath {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.15); opacity: 1; }
        }
        /* Tıklama dalgası */
        .cursor-ripple {
            position: fixed; z-index: 95; width: 14px; height: 14px;
            margin: -7px 0 0 -7px; border-radius: 50%;
            border: 2px solid rgba(2,132,199,0.55);
            pointer-events: none;
            animation: cursorRipple 0.7s ease-out forwards;
        }
        @keyframes cursorRipple {
            to { transform: scale(7); opacity: 0; border-color: rgba(5,150,105,0); }
        }
        @media (prefers-reduced-motion: reduce) {
            #cursor-glow .glow-inner { animation: none; }
        }

        /* Preloader güvenlik ağı: JS ne yaparsa yapsın 3.2sn sonra kaybolur */
        @keyframes preloaderSafety {
            to { opacity: 0; visibility: hidden; }
        }
        #preloader { animation: preloaderSafety 0.6s ease 3.2s forwards; }
        .preload-panel, .preload-panel-b { will-change: transform; }

        /* Hero ambiyans küreleri yavaşça süzülür */
        @keyframes orbDrift {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, -30px) scale(1.08); }
            66% { transform: translate(-30px, 25px) scale(0.95); }
        }
        .hero-orb { animation: orbDrift 14s ease-in-out infinite; }
        .hero-orb-2 { animation: orbDrift 18s ease-in-out infinite reverse; }

        /* "Keşfet" ışık huzmesi */
        @keyframes beamDrop {
            0% { transform: translateY(-120%); }
            100% { transform: translateY(240%); }
        }
        .scroll-beam { animation: beamDrop 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

        @media (prefers-reduced-motion: reduce) {
            .hero-orb, .hero-orb-2, .scroll-beam { animation: none; }
        }

        /* Marquee Animation */
        .marquee-track { display: flex; width: max-content; animation: marquee 25s linear infinite; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Mobile Menu Clip Path */
        #mobile-menu {
            clip-path: circle(0px at calc(100% - 40px) 40px);
            transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
        }
        #mobile-menu.active { clip-path: circle(200% at calc(100% - 40px) 40px); }

        /* Footer Animated Gradient */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animated-gradient {
            background: linear-gradient(120deg, rgba(2,132,199,0.16), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(5,150,105,0.16));
            background-size: 250% 250%;
            animation: gradientShift 10s ease infinite;
        }

        /* Target Pill idle float */
        @keyframes pillFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        .pill-float { animation: pillFloat 3.5s ease-in-out infinite; }
        .target-pill:hover .pill-float { animation-play-state: paused; }
        .target-pill:nth-of-type(odd) .pill-float { animation-delay: 0.4s; }
        .target-pill:nth-of-type(even) .pill-float { animation-delay: 1.2s; }

        /* Yörünge modu (orbit-live): body'ye yalnızca JS motoru gerçekten
           çalışınca eklenir. Dokunmatik/dar ekranlarda absolute konumlandırma
           asla sızmaz — rozetler normal akışta kalır. */
        body.orbit-live #kitle {
            height: 100dvh;
            padding-top: 0; padding-bottom: 0;
            justify-content: center;
        }
        body.orbit-live #kitle .kitle-head { padding-top: 5rem; }
        body.orbit-live #target-wrapper {
            display: block;
            margin-top: 0;
            height: 62vh; min-height: 480px;
        }
        body.orbit-live #target-hub { display: flex; }
        body.orbit-live #target-lines,
        body.orbit-live .orbit-ring,
        body.orbit-live .orbit-ring-rev { display: block; }
        body.orbit-live .target-pill {
            position: absolute; left: 50%; top: 50%;
            will-change: transform;
        }

        /* Yörünge çalışmayan her yerde (mobil, dokunmatik, JS hatası):
           saf CSS giriş animasyonu */
        @keyframes pillEnter {
            from { opacity: 0; transform: translateY(20px) scale(0.92); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        body:not(.orbit-live) .target-pill {
            opacity: 0;
            animation: pillEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        body:not(.orbit-live) .target-pill:nth-of-type(1) { animation-delay: 0.2s; }
        body:not(.orbit-live) .target-pill:nth-of-type(2) { animation-delay: 0.28s; }
        body:not(.orbit-live) .target-pill:nth-of-type(3) { animation-delay: 0.36s; }
        body:not(.orbit-live) .target-pill:nth-of-type(4) { animation-delay: 0.44s; }
        body:not(.orbit-live) .target-pill:nth-of-type(5) { animation-delay: 0.52s; }
        /* Hub çevresinde dönen ışık halkası */
        @keyframes hubSpin { to { transform: rotate(360deg); } }
        .hub-spin {
            background: conic-gradient(from 0deg,
                transparent 0%, rgba(56,189,248,0.8) 10%, transparent 22%,
                transparent 50%, rgba(52,211,153,0.8) 60%, transparent 72%);
            animation: hubSpin 5s linear infinite;
            filter: blur(4px);
        }
        @media (prefers-reduced-motion: reduce) { .hub-spin { animation: none; } }

        /* Yörünge halkalarının nefes efekti JS döngüsünde hesaplanır
           (CSS animasyonu, JS'in verdiği opaklığı ezdiği için kaldırıldı) */
        @media (prefers-reduced-motion: reduce) {
            .target-pill { opacity: 1; animation: none; }
        }

        /* Hero Badge Light Animations */
        .hero-badge {
            position: relative;
            overflow: hidden;
            animation: badgeGlow 2.5s ease-in-out infinite;
        }
        .hero-badge::before {
            content: '';
            position: absolute;
            top: 0; left: -150%;
            width: 60%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.85), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }
        @keyframes badgeShine {
            0% { left: -150%; }
            60%, 100% { left: 150%; }
        }
        @keyframes badgeGlow {
            0%, 100% { box-shadow: 0 0 0px rgba(2,132,199,0.0), 0 0 0px rgba(5,150,105,0.0); }
            50% { box-shadow: 0 0 16px rgba(2,132,199,0.35), 0 0 8px rgba(5,150,105,0.25); }
        }
        .hero-badge-dot { animation: badgeDotPulse 1.6s ease-in-out infinite; }
        @keyframes badgeDotPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.3); }
        }

        /* ==========================================================================
           CINEMATIC SCROLL SHOWCASE (Dev 3D Kart + Telefon Mockup)
           ========================================================================== */
        .bg-grid-theme {
            background-size: 60px 60px;
            background-image:
                linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
        }

        /* 3D Deep Card (koyu cam/titanyum his — beyaz UI ile kontrast) */
        .premium-depth-card {
            background: linear-gradient(145deg, #18181B 0%, #09090B 100%);
            box-shadow:
                0 40px 100px -20px rgba(0, 0, 0, 0.5),
                0 20px 40px -20px rgba(0, 0, 0, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.1),
                inset 0 -2px 4px rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: absolute; /* GSAP pin için gerekli */
            /* Yatay ortalama: transform yerine otomatik kenar boşluğu.
               GSAP genişliği (width) animasyonla büyütürken transform: translateX(-50%)
               yüzdesel değeri sabit piksele donuyor ve kart bazı ekran genişliklerinde
               (ör. 2048px) sol kenarı sabit kalıp sağa taşıyordu. left/right:0 + margin:auto
               ile ortalama transform'dan bağımsızlaşır; GSAP transform'u yalnızca dikey (y)
               hareket için kullandığından yatay ortalama her genişlikte korunur. */
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
        }

        .card-sheen {
            position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 50;
            background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.08) 0%, transparent 40%);
            mix-blend-mode: screen; transition: opacity 0.3s ease;
        }

        .text-card-silver-matte {
            background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0px 12px 24px rgba(0,0,0,0.8));
        }

        .iphone-bezel {
            background-color: #111;
            box-shadow:
                inset 0 0 0 2px #52525B,
                inset 0 0 0 7px #000,
                0 40px 80px -15px rgba(0,0,0,0.9);
            transform-style: preserve-3d;
        }

        .screen-glare {
            background: linear-gradient(110deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%);
        }

        .widget-depth {
            background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.03);
        }

        .floating-ui-badge {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255,255,255,0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .progress-ring {
            transform: rotate(-90deg); transform-origin: center;
            stroke-dasharray: 402; stroke-dashoffset: 402; stroke-linecap: round;
        }

        /* ==========================================================================
           EKİP — Sticky Kart Destesi
           ========================================================================== */
        .team-stack-inner { will-change: transform, filter; }
        .team-photo { will-change: transform; }
        .blog-card { will-change: transform, clip-path; }

        /* ==========================================================================
           HİZMETLER — Yatay Şov (spot ışığı, 3D kartlar)
           ========================================================================== */
        .service-spot {
            background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color, rgba(14,165,233,0.1)) 0%, transparent 65%);
        }
        .service-card { will-change: transform; transform-style: preserve-3d; }

        /* ==========================================================================
           MANIFESTO — Pinned Kelime Kelime Reveal
           ========================================================================== */
        .m-word {
            display: inline-block;
            will-change: transform, filter, opacity;
            transform-style: preserve-3d;
        }
        .m-key .m-word, .m-word.m-key {
            background: linear-gradient(90deg, #0284c7, #059669);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-weight: 800;
        }

        /* ==========================================================================
           DNA SÜREÇ SARMALI (Sürecimiz.)
           ========================================================================== */
        @keyframes dnaNodePulse {
            0%, 100% { box-shadow: 0 0 20px rgba(56,189,248,0.25), 0 0 0 0 rgba(56,189,248,0.25); }
            50% { box-shadow: 0 0 35px rgba(52,211,153,0.45), 0 0 0 10px rgba(52,211,153,0); }
        }
        .dna-node { animation: dnaNodePulse 2.8s ease-in-out infinite; }

        /* Kartların 3D dönerek gelmesi için derinlik */
        .dna-step { perspective: 1200px; }
        .dna-card {
            background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.08);
        }

        @media (prefers-reduced-motion: reduce) {
            .dna-node { animation: none; }
        }

        /* Hero Title Gradient Text */
        @keyframes heroGradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        #hero-title {
            background: linear-gradient(100deg,
                #0284c7 0%, #38bdf8 12%, #09090b 32%,
                #09090b 68%, #34d399 88%, #059669 100%);
            background-size: 250% 100%;
            animation: heroGradientMove 7s ease-in-out infinite;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        /* Başlığın arkasında yavaşça dönen ışık halesi */
        @keyframes haloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
        .hero-halo {
            background: conic-gradient(from 0deg,
                rgba(2,132,199,0.12) 0%, transparent 20%,
                rgba(5,150,105,0.12) 45%, transparent 65%,
                rgba(2,132,199,0.10) 85%, transparent 100%);
            filter: blur(60px);
            animation: haloSpin 24s linear infinite;
        }
        @media (prefers-reduced-motion: reduce) { .hero-halo { animation: none; } }
        #hero-title * {
            background: inherit;
            -webkit-background-clip: inherit;
            background-clip: inherit;
            color: inherit;
            -webkit-text-fill-color: inherit;
        }