:root {
            --primary-blue: #00a8e8;
            --glow-blue: rgba(0, 168, 232, 0.15);
            --dark-text: #0f172a;
            --deep-navy: #0b0f1a;
            --soft-gray: #f8fafc;
            --border-color: rgba(15, 23, 42, 0.08);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Plus Jakarta Sans", sans-serif;
            background-color: #ffffff;
            color: var(--dark-text);
            overflow-x: hidden;
        }

        /* --- Kaydırma Animasyonu Temel Ayarları --- */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition-property: opacity, transform;
        }

        /* Aktif olduğunda (göründüğünde) uygulanacak stil */
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Bazı bölümlerin soldan veya sağdan gelmesini isterseniz (Opsiyonel) */
        .reveal-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease-out;
        }

        .reveal-left.active {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s ease-out;
        }

        .reveal-right.active {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal:nth-child(1) {
            transition-delay: 0.1s;
        }

        .reveal:nth-child(2) {
            transition-delay: 0.2s;
        }

        .reveal:nth-child(3) {
            transition-delay: 0.3s;
        }

        .bg-glow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 80% 20%, var(--glow-blue) 0%, transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 40%);
            z-index: -1;
            pointer-events: none;
        }

        /* --- NAVBAR & HAMBURGER --- */
        .navbar {
            padding: 30px 0;
            transition: 0.4s;
            background: transparent !important;
            z-index: 1100;
        }

        /* Hamburger İkonu */
        .navbar-toggler {
            border: none !important;
            padding: 0;
            outline: none !important;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .burger-icon {
            width: 30px;
            height: 20px;
            position: relative;
            display: block;
        }

        .burger-icon span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--dark-text);
            border-radius: 9px;
            transition: .25s ease-in-out;
        }

        .burger-icon span:nth-child(1) {
            top: 0;
        }

        .burger-icon span:nth-child(2) {
            top: 8px;
        }

        .burger-icon span:nth-child(3) {
            top: 16px;
        }

        /* Mobil Menü Kapatma İkonu (Overlay İçinde) */
        .btn-close-menu {
            position: absolute;
            top: 30px;
            right: 30px;
            background: none;
            border: none;
            font-size: 2rem;
            color: var(--dark-text);
            font-weight: 300;
            cursor: pointer;
        }

        /* --- HERO LOGO EFEKTİ (Glow & Tilt) --- */
        .hero-logo-wrapper {
            position: relative;
            display: inline-block;
            padding: 20px;
        }

        .hero-logo-wrapper::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: var(--primary-blue);
            filter: blur(80px);
            opacity: 0.2;
            z-index: -1;
            animation: pulse-glow 4s infinite alternate;
        }

        .hero-floating-logo {
            width: 100%;
            max-width: 420px;
            border-radius: 50px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
            animation: float-soft 5s ease-in-out infinite;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .hero-floating-logo:hover {
            transform: scale(1.05) rotateY(10deg) rotateX(5deg);
        }

        @keyframes float-soft {

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

            50% {
                transform: translateY(-25px) rotate(2deg);
            }
        }

        @keyframes pulse-glow {
            from {
                opacity: 0.1;
                scale: 0.8;
            }

            to {
                opacity: 0.3;
                scale: 1.1;
            }
        }

        /* --- SECTION PADDINGS (BOŞLUKLAR) --- */
        .hero-section {
            padding: 180px 0 120px;
        }

        .content-section {
            padding: 100px 0;
        }

        .stats-bar {
            padding: 120px 0;
        }

        /* --- FEATURED BANNER --- */
        .featured-banner {
            background: #0f172a;
            border-radius: 48px;
            padding: 60px;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(15, 23, 42, 0.2);
        }

        .featured-banner::before {
            content: "LARAVEL";
            position: absolute;
            right: -40px;
            bottom: -20px;
            font-size: 10rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.03);
            transform: rotate(-10deg);
        }

        /* --- SERVICE GRID --- */
        .service-card {
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
            border-radius: 40px;
            padding: 50px;
            transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
            height: 100%;
        }

        .service-card:hover {
            transform: translateY(-15px);
            border-color: var(--primary-blue);
            background: white;
        }

        /* --- FOOTER --- */
        footer {
            background: #0f172a;
            color: rgba(255, 255, 255, 0.6);
            padding: 100px 0 40px;
        }

        .footer-brand {
            color: white !important;
            font-weight: 800;
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .footer-logo-img {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            border: 2px solid var(--primary-blue);
            background: white;
        }

        .footer-title {
            color: white;
            font-weight: 700;
            margin-bottom: 25px;
        }

        /* --- MOBILE OVERLAY --- */
        @media (max-width: 991px) {
            .navbar-collapse {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: #ffffff;
                padding: 120px 40px;
                transform: translateX(100%);
                transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);
                display: flex !important;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 2000;
            }

            .navbar-collapse.show {
                transform: translateX(0);
            }

            .nav-link {
                font-size: 2.2rem;
                font-weight: 800;
                margin-bottom: 25px;
                text-align: center;
            }

            .hero-section {
                padding-top: 140px;
                text-align: center;
            }
        }

        /* Logo Wrapper Konumlandırma */
        .logo-wrapper {
            position: relative;
            display: inline-block;
            padding: 60px;
        }

        /* Logonun İçinde Bulunduğu Daire */
        .logo-container-circle {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            z-index: 2;
            border: 8px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 50px rgba(0, 168, 232, 0.2);
            animation: float-3d 6s ease-in-out infinite;
        }

        /* Arka Plandaki Dönen Halkalar */
        .logo-circle-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 420px;
            height: 420px;
            border: 2px dashed rgba(0, 168, 232, 0.3);
            border-radius: 50%;
            animation: rotate-circle 20s linear infinite;
            z-index: 1;
        }

        /* İkinci Bir Ters Dönen Halka (Daha modern bir hava katar) */
        .logo-circle-bg::after {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
            border: 1px solid rgba(0, 212, 255, 0.1);
            border-radius: 50%;
            border-top: 4px solid var(--primary-blue);
            animation: rotate-circle-reverse 10s linear infinite;
        }

        /* Logonun İçinde Bulunduğu Daire */
        .logo-container-circle {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            z-index: 2;
            border: 8px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 50px rgba(0, 168, 232, 0.2);
            /* translateY kaldırıldı, sadece rotasyon kaldı */
            animation: rotate-3d-only 8s ease-in-out infinite;
            background: white;
            /* Resim tam oturmazsa arkası beyaz kalsın */
        }

        /* --- MODERN CHAT WIDGET CONTAINER --- */
        .chat-widget-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 2000;
        }

        /* Chat Tetikleyici Buton */
        .chat-trigger-btn {
            width: 65px;
            height: 65px;
            border-radius: 50% 50% 5% 50%;
            /* Modern chat balonu formu */
            background: linear-gradient(135deg, var(--primary-blue), #00d4ff);
            color: white;
            border: none;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0, 168, 232, 0.4);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .chat-trigger-btn:hover {
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 15px 40px rgba(0, 168, 232, 0.6);
        }

        /* Sohbet Penceresi (Glassmorphism) */
        .chat-window {
            position: absolute;
            bottom: 85px;
            right: 0;
            width: 350px;
            max-width: calc(100vw - 60px);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 30px;
            border: 1px solid var(--border-color);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(30px) scale(0.9);
            transform-origin: bottom right;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .chat-window.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Chat Header */
        .chat-header {
            background: #0f172a;
            /* Kurumsal Dark Renk */
            padding: 25px;
            color: white;
        }

        .chat-body {
            padding: 25px;
        }

        .chat-body .form-control {
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .chat-body .form-control:focus {
            background: white;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 4px rgba(0, 168, 232, 0.1);
        }

        /* Gönder Butonu */
        .btn-chat-send {
            background: var(--primary-blue);
            color: white;
            font-weight: 700;
            border-radius: 12px;
            padding: 12px;
            border: none;
            transition: 0.3s;
        }

        .btn-chat-send:hover {
            background: #008cc2;
            transform: translateY(-2px);
        }

        /* --- MARKA RENKLERİYLE UYUMLU BUTONLAR --- */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-blue), #00d4ff) !important;
            border: none !important;
            color: white !important;
            transition: all 0.3s ease !important;
        }

        .btn-primary:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 20px var(--glow-blue) !important;
            filter: brightness(1.1);
        }

        .btn-outline-dark {
            border: 2px solid var(--primary-blue) !important;
            color: var(--primary-blue) !important;
            background: transparent !important;
        }

        .btn-outline-dark:hover {
            background: var(--primary-blue) !important;
            color: white !important;
            transform: translateY(-3px);
        }

        /* --- CHAT ICON EFEKTİ (PULSE & GLOW) --- */
        .chat-trigger-btn {
            position: relative;
            /* Eski stilleriniz kalsın, sadece efektleri ekliyoruz */
        }

        /* Dikkat Çeken Nabız Efekti */
        .chat-trigger-btn::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--primary-blue);
            border-radius: 50%;
            z-index: -1;
            animation: chat-pulse 2s infinite;
        }

        @keyframes chat-pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

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

        /* Chat Butonuna Hafif Sallanma Efekti (Belli aralıklarla) */
        .chat-trigger-btn #chatIcon {
            display: inline-block;
            animation: chat-shake 5s ease-in-out infinite;
        }

        @keyframes chat-shake {

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

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

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

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

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

        /* Form içindeki buton */
        .btn-chat-send {
            background: linear-gradient(135deg, var(--primary-blue), #00d4ff) !important;
            border: none !important;
        }

        /* Sadece 3D Rotasyon Animasyonu (Yukarı hareket yok) */
        @keyframes rotate-3d-only {

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

            50% {
                transform: rotateY(-15deg) rotateX(-5deg);
            }
        }

        /* Arka plandaki dönen halkalar aynı kalıyor */
        .logo-circle-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 420px;
            height: 420px;
            border: 2px dashed rgba(0, 168, 232, 0.3);
            border-radius: 50%;
            animation: rotate-circle 20s linear infinite;
            z-index: 1;
        }

        /* Animasyon Tanımları */

        /* 1. Logonun Süzülme Efekti */
        @keyframes float-3d {

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

            50% {
                transform: translateY(-25px) rotateY(-10deg);
            }
        }

        /* 2. Dış Halkanın Dönüşü */
        @keyframes rotate-circle {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* 3. İç Halkanın Ters Dönüşü */
        @keyframes rotate-circle-reverse {
            from {
                transform: rotate(0deg);
            }

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

        /* Mobil için Boyut Düzenlemesi */
        @media (max-width: 768px) {
            .logo-container-circle {
                width: 240px;
                height: 240px;
            }

            .logo-circle-bg {
                width: 300px;
                height: 300px;
            }
        }

        /* --- MODERN GLASS STATS (FOOTER'DAN AYRI) --- */
        .stats-bar-glass {
            padding: 0;
            margin-top: -60px;
            /* Bir üst bölümle iç içe geçme efekti */
            position: relative;
            z-index: 10;
        }

        .stats-glass-container {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 40px;
            padding: 60px 40px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
        }

        .stat-item-modern {
            transition: transform 0.3s ease;
        }

        .stat-item-modern:hover {
            transform: translateY(-10px);
        }

        /* --- MODERN DARK FOOTER --- */
        footer {
            background: #0b0f1a;
            /* Daha derin bir siyah-lacivert */
            color: #94a3b8;
            padding: 150px 0 40px;
            /* Üstteki stats için ekstra üst boşluk */
            margin-top: -80px;
            /* Stats ile şık bir birleşme */
            position: relative;
        }

        .footer-title-modern {
            color: white;
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        .footer-title-modern::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--primary-blue);
        }

        .footer-links-modern {
            list-style: none;
            padding: 0;
        }

        .footer-links-modern li {
            margin-bottom: 15px;
        }

        .footer-links-modern a {
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .footer-links-modern a:hover {
            color: white;
            padding-left: 8px;
        }

        .footer-bottom-modern {
            margin-top: 80px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.85rem;
        }

        /* --- MODERN NAV LINK EFEKTLERİ --- */
        .nav-link {
            font-weight: 600;
            color: var(--dark-text) !important;
            margin: 0 10px;
            padding: 8px 15px !important;
            position: relative;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        /* Üzerine gelince opaklık artar ve hafif yükselir */
        .nav-link:hover {
            opacity: 1;
            color: var(--primary-blue) !important;
            transform: translateY(-2px);
        }

        /* Modern Alt Çizgi Animasyonu */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 80%;
            /* Çizgi merkezden kenarlara doğru açılır */
        }

        /* --- PROJE BAŞLAT BUTONU (GLOW EFFECT) --- */
        .btn-nav-custom {
            background: var(--dark-text);
            color: white !important;
            border-radius: 50px;
            padding: 12px 30px !important;
            font-weight: 700;
            border: none;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        /* Butonun arkasındaki mavi parlama */
        .btn-nav-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-blue);
            z-index: -1;
            transition: transform 0.4s ease;
            transform: scaleX(0);
            transform-origin: right;
        }

        .btn-nav-custom:hover::before {
            transform: scaleX(1);
            transform-origin: left;
        }

        .btn-nav-custom:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px var(--glow-blue);
            color: white !important;
        }

        /* Navbar Scrolled durumunda link renkleri */
        .navbar.scrolled .nav-link {
            font-size: 0.9rem;
        }

        /* --- MODERN BENTO-STYLE SERVICES --- */
        .content-section {
            padding: 120px 0;
            position: relative;
        }

        .service-card-modern {
            background: rgba(255, 255, 255, 0.03);
            /* Çok hafif transparanlık */
            border: 1px solid var(--border-color);
            border-radius: 40px;
            padding: 60px 45px;
            height: 100%;
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        /* Hover durumunda arka planda beliren gradyan ışığı */
        .service-card-modern::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, var(--glow-blue), transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: -1;
        }

        .service-card-modern:hover {
            transform: translateY(-12px) scale(1.02);
            border-color: var(--primary-blue);
            background: #ffffff;
            box-shadow: 0 40px 80px rgba(0, 168, 232, 0.1);
        }

        .service-card-modern:hover::before {
            opacity: 1;
        }

        /* Modern İkon Kutusu */
        .service-icon-box {
            width: 85px;
            height: 85px;
            background: var(--soft-gray);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.8rem;
            margin-bottom: 35px;
            transition: all 0.4s ease;
        }

        .service-card-modern:hover .service-icon-box {
            background: var(--primary-blue);
            color: white;
            transform: rotate(-10deg) scale(1.1);
            box-shadow: 0 15px 30px var(--glow-blue);
        }

        .service-title-modern {
            font-weight: 800;
            font-size: 1.6rem;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

        .service-text-modern {
            color: #64748b;
            line-height: 1.7;
            font-size: 1.05rem;
        }

        /* Arka planda uçuşan numara efekti */
        .card-number {
            position: absolute;
            bottom: -20px;
            right: 20px;
            font-size: 8rem;
            font-weight: 900;
            color: var(--dark-text);
            opacity: 0.03;
            transition: 0.5s ease;
        }

        .service-card-modern:hover .card-number {
            opacity: 0.08;
            transform: translateY(-20px);
        }

        /* --- MODERN DROPDOWN (DESKTOP) --- */
        @media (min-width: 992px) {
            .dropdown-menu {
                display: block;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(20px);
                border: 1px solid var(--border-color) !important;
                border-radius: 24px !important;
                padding: 15px;
                min-width: 280px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
            }

            .nav-item.dropdown:hover .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }

        .dropdown-item {
            padding: 12px 18px !important;
            border-radius: 15px !important;
            font-weight: 600;
            color: var(--dark-text);
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
        }

        .dropdown-item:hover {
            background: var(--glow-blue) !important;
            color: var(--primary-blue) !important;
            transform: translateX(8px);
        }

        .dropdown-item i {
            font-size: 1.1rem;
            opacity: 0.7;
        }

        /* --- MOBİL DÜZENLEMELER --- */
        @media (max-width: 991px) {

            /* Proje Başlat Butonunu Mobilde Gizle */
            .btn-nav-custom {
                display: none !important;
            }

            .navbar-collapse {
                background: #ffffff !important;
                padding: 100px 30px !important;
            }

            .nav-link {
                font-size: 1.8rem !important;
                /* Biraz küçülttük ki sığsın */
                margin-bottom: 15px !important;
            }

            /* Mobil Dropdown Yapısı */
            .dropdown-menu {
                background: var(--soft-gray) !important;
                border: none !important;
                box-shadow: none !important;
                margin-top: 0 !important;
                padding: 0 !important;
                display: none;
                /* Bootstrap 'show' ile açacak */
            }

            .dropdown-menu.show {
                display: block;
                margin-bottom: 20px;
            }

            .dropdown-item {
                font-size: 1.2rem !important;
                justify-content: center;
                padding: 10px !important;
                opacity: 0.8;
            }

            .dropdown-toggle::after {
                vertical-align: middle;
            }

            #loader-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #ffffff;
                /* Arka plan rengi */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                /* Her şeyin üstünde görünmesi için */
                transition: opacity 0.5s ease;
            }

            .loader {
                border: 4px solid #f3f3f3;
                border-top: 4px solid #3498db;
                /* Arayüzünüzün ana rengini buraya yazın */
                border-radius: 50%;
                width: 50px;
                height: 50px;
                animation: spin 1s linear infinite;
            }

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

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

            /* Sayfa yüklendiğinde loader'ı gizlemek için sınıf */
            .loader-hidden {
                opacity: 0;
                visibility: hidden;
            }
        }

        /* --- Genel Değişkenler ve Reset --- */
        :root {
            --primary-blue: #00a8e8;
            --dark-navy: #0f172a;
            --soft-gray: #f8fafc;
            --border-color: #e2e8f0;
        }

        .fw-800 {
            font-weight: 800;
        }

        .fw-900 {
            font-weight: 900;
        }

        /* --- Hero Bölümü --- */
        .hero-section {
            padding-top: 120px;
            background: radial-gradient(circle at 80% 20%, rgba(0, 168, 232, 0.05) 0%, transparent 40%);
        }

        .ecommerce-mockup-wrapper {
            position: relative;
            padding: 20px;
        }

        .glass-checkout-card {
            position: absolute;
            top: -20px;
            left: -30px;
            width: 260px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 24px;
            padding: 25px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            z-index: 10;
            animation: float-soft 5s ease-in-out infinite;
        }

        @keyframes float-soft {

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

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

        .status-dot {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        }

        .skeleton-line {
            height: 8px;
            background: #f1f5f9;
            border-radius: 4px;
            margin-bottom: 12px;
        }

        /* --- Başlangıç Paketi (Pricing) --- */
        .bg-soft-gray {
            background-color: var(--soft-gray);
            border-radius: 80px 80px 0 0;
        }

        .package-card-glow {
            background: #ffffff;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(0, 168, 232, 0.06);
            border: 1px solid var(--border-color);
        }

        .package-sidebar {
            background: linear-gradient(135deg, var(--dark-navy) 0%, #1e293b 100%);
            position: relative;
        }

        .price-tag .amount {
            font-size: 2.8rem;
            font-weight: 900;
        }

        .price-tag .currency {
            font-size: 1.2rem;
            vertical-align: top;
        }

        .feature-item {
            display: flex;
            gap: 15px;
            align-items: center;
            transition: 0.3s;
        }

        .f-icon {
            width: 45px;
            height: 45px;
            background: var(--soft-gray);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            flex-shrink: 0;
            transition: 0.3s;
        }

        .feature-item:hover .f-icon {
            background: var(--primary-blue);
            color: white;
            transform: scale(1.1) rotate(-5deg);
        }

        /* --- Teklif Al Formu (Request Section) --- */
        .text-blue-accent {
            color: var(--primary-blue);
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 20px;
            background: white;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
        }

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

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 168, 232, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(0, 168, 232, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 168, 232, 0);
            }
        }

        .contact-info-bubbles {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .info-bubble {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
        }

        .bubble-icon {
            width: 40px;
            height: 40px;
            background: rgba(0, 168, 232, 0.1);
            color: var(--primary-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Layered Form */
        .layered-form-card {
            position: relative;
            padding: 40px;
            z-index: 1;
        }

        .form-card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 35px;
            z-index: -1;
            box-shadow: 0 40px 80px rgba(15, 23, 42, 0.08);
            border: 1px solid var(--border-color);
        }

        /* Floating Input Groups */
        .floating-input-group {
            position: relative;
            margin-bottom: 20px;
        }

        .floating-input-group input,
        .floating-input-group select,
        .floating-input-group textarea {
            width: 100%;
            padding: 15px 5px;
            border: none;
            border-bottom: 2px solid var(--border-color);
            background: transparent;
            outline: none;
            transition: 0.3s;
            font-weight: 500;
        }

        .floating-input-group label {
            position: absolute;
            left: 5px;
            top: 15px;
            color: #94a3b8;
            pointer-events: none;
            transition: 0.3s;
        }

        .floating-input-group input:focus~label,
        .floating-input-group input:not(:placeholder-shown)~label,
        .floating-input-group select:focus~label,
        .floating-input-group select:valid~label,
        .floating-input-group textarea:focus~label,
        .floating-input-group textarea:not(:placeholder-shown)~label {
            top: -10px;
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--primary-blue);
        }

        .floating-input-group input:focus,
        .floating-input-group textarea:focus {
            border-bottom-color: var(--primary-blue);
        }

        /* Submit Button */
        .submit-action-btn {
            width: 100%;
            padding: 18px 30px;
            background: var(--dark-navy);
            color: white;
            border: none;
            border-radius: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
            transition: 0.4s;
            cursor: pointer;
        }

        .submit-action-btn:hover {
            background: var(--primary-blue);
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0, 168, 232, 0.3);
        }

        .btn-icon {
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .glass-checkout-card {
                display: none;
            }

            .bg-soft-gray {
                border-radius: 40px 40px 0 0;
            }

            .layered-form-card {
                padding: 25px;
            }
        }

        /* --- Cyber Section Setup --- */
        .cyber-contact-section {
            background-color: #0b111a;
            /* Derin Koyu Lacivert/Siyah */
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }

        /* Arka plandaki parlamalar (Blobs) */
        .cyber-glow-1 {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 168, 232, 0.15) 0%, transparent 70%);
            top: 10%;
            left: 5%;
            z-index: 1;
        }

        .cyber-glow-2 {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
            bottom: -10%;
            right: 5%;
            z-index: 1;
        }

        /* --- Glass Master Card --- */
        .glass-master-card {
            background: rgba(255, 255, 255, 0.03);
            /* Cam efekti için çok hafif beyaz */
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 40px;
            padding: 60px;
            position: relative;
            z-index: 5;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
        }

        .blue-neon-text {
            color: #00d4ff;
            text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        }

        /* --- Cyber Input Styles --- */
        .cyber-input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .cyber-input-group label {
            font-size: 0.75rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1.5px;
            padding-left: 5px;
        }

        .cyber-input-group input,
        .cyber-input-group select,
        .cyber-input-group textarea {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 14px 18px;
            color: white;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .cyber-input-group input:focus,
        .cyber-input-group select:focus,
        .cyber-input-group textarea:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: #00d4ff;
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
            outline: none;
        }

        /* --- Submit Button (Neon Blue) --- */
        .cyber-submit-btn {
            background: linear-gradient(135deg, #00d4ff 0%, #00a8e8 100%);
            border: none;
            color: white;
            padding: 16px 60px;
            border-radius: 50px;
            font-weight: 800;
            font-size: 1.1rem;
            letter-spacing: 1px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0, 168, 232, 0.4);
            cursor: pointer;
        }

        .cyber-submit-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(0, 168, 232, 0.6);
            filter: brightness(1.1);
        }

        /* Mobil Düzenleme */
        @media (max-width: 768px) {
            .glass-master-card {
                padding: 30px;
                border-radius: 30px;
            }

            .display-5 {
                font-size: 2.2rem;
            }
        }

        /* --- Background & Blobs --- */
        .light-glass-section {
            background-color: #f0f4f8;
            /* Çok açık gri-mavi arka plan */
            padding: 100px 0;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .light-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            z-index: -1;
            opacity: 0.5;
        }

        .blob-blue {
            width: 400px;
            height: 400px;
            background: #00a8e8;
            top: -100px;
            right: -50px;
        }

        .blob-cyan {
            width: 350px;
            height: 350px;
            background: #00d4ff;
            bottom: -50px;
            left: -50px;
        }

        /* --- Crystal Card (The Glass Effect) --- */
        .crystal-card {
            background: rgba(255, 255, 255, 0.4);
            /* Şeffaf beyaz */
            backdrop-filter: blur(15px);
            /* Buzlu cam etkisi */
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            /* Camın kenar parlaması */
            border-radius: 40px;
            padding: 60px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
        }

        .glass-tag {
            background: rgba(0, 168, 232, 0.1);
            color: #00a8e8;
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 800;
        }

        /* --- Input Styling --- */
        .glass-input-wrapper {
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 18px;
            display: flex;
            align-items: center;
            padding: 5px 20px;
            transition: 0.3s all ease;
        }

        .glass-input-wrapper i {
            color: #00a8e8;
            font-size: 1.2rem;
            margin-right: 15px;
        }

        .glass-input-wrapper input,
        .glass-input-wrapper select,
        .glass-input-wrapper textarea {
            border: none;
            background: transparent;
            width: 100%;
            padding: 12px 0;
            outline: none;
            color: #334155;
            font-weight: 500;
        }

        .glass-input-wrapper:focus-within {
            background: #ffffff;
            box-shadow: 0 10px 20px rgba(0, 168, 232, 0.08);
            border-color: #00a8e8;
        }

        /* --- Button Styling --- */
        .glass-btn-primary {
            background: #00a8e8;
            color: white;
            border: none;
            padding: 16px 45px;
            border-radius: 18px;
            font-weight: 800;
            transition: 0.3s all ease;
            box-shadow: 0 10px 25px rgba(0, 168, 232, 0.2);
        }

        .glass-btn-primary:hover {
            background: #008cc2;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 168, 232, 0.3);
        }

        @media (max-width: 768px) {
            .crystal-card {
                padding: 30px;
                border-radius: 30px;
            }
        }


        /* --- Root Renk Paleti --- */
        :root {
            --p-blue: #00a8e8;
            --s-dark: #0f172a;
            --neon-lime: #d4ff00;
            /* Görseldeki o dikkat çeken renk */
            --glass-white: rgba(255, 255, 255, 0.7);
        }

        .main-title-v5 {
            font-weight: 900;
            letter-spacing: -1.5px;
        }

        .highlight-neon {
            color: var(--p-blue);
            position: relative;
        }

        /* --- Super Glass Card --- */
        .super-glass-card {
            background: var(--glass-white);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 45px;
            padding: 60px;
            box-shadow: 0 40px 120px -20px rgba(0, 168, 232, 0.15);
            position: relative;
        }

        /* --- Modern Input Fields --- */
        .modern-field {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            display: flex;
            align-items: center;
            padding: 2px 22px;
            position: relative;
            transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .modern-field i {
            font-size: 1.1rem;
            color: #94a3b8;
            margin-right: 15px;
            transition: 0.3s;
        }

        .modern-field input,
        .modern-field select,
        .modern-field textarea {
            border: none;
            background: transparent;
            width: 100%;
            padding: 14px 0;
            outline: none;
            color: var(--s-dark);
            font-weight: 700;
            font-size: 0.95rem;
        }

        .modern-field:focus-within {
            background: #ffffff;
            border-color: var(--p-blue);
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0, 168, 232, 0.1);
        }

        .modern-field:focus-within i {
            color: var(--p-blue);
        }

        /* --- Floating Action Control (Görseldeki Menünün Gelişmiş Hali) --- */
        .floating-action-control {
            display: flex;
            background: var(--s-dark);
            padding: 8px;
            border-radius: 25px;
            justify-content: center;
            width: fit-content;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .btn-action {
            background: transparent;
            border: none;
            color: #64748b;
            padding: 12px 25px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            font-size: 0.85rem;
            transition: 0.4s;
        }

        .btn-action.active,
        .btn-action:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
        }

        .btn-action i {
            font-size: 1.2rem;
        }

        /* --- Mega Submit Button --- */
        .mega-submit-btn {
            width: 100%;
            background: var(--p-blue);
            color: white;
            border: none;
            padding: 22px;
            border-radius: 20px;
            font-weight: 900;
            letter-spacing: 1.5px;
            transition: 0.4s;
            box-shadow: 0 20px 40px rgba(0, 168, 232, 0.3);
            text-transform: uppercase;
        }

        .mega-submit-btn:hover {
            background: var(--s-dark);
            transform: scale(1.02);
        }

        @media (max-width: 768px) {
            .super-glass-card {
                padding: 35px 20px;
                border-radius: 35px;
            }

            .btn-action span {
                display: none;
            }

            /* Mobilde sadece ikon */
        }

        /* --- Root Vars & Base --- */
        :root {
            --primary-blue: #00a8e8;
            --deep-dark: #05070a;
            --text-muted: #64748b;
        }

        .ls-tight {
            letter-spacing: -2px;
        }

        .fw-900 {
            font-weight: 900;
        }

        /* --- Background Decorations --- */
        .mega-hero-section {
            background: #ffffff;
            padding: 100px 0;
        }

        .bg-grid-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 168, 232, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 232, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.15;
            z-index: 1;
        }

        .orb-1 {
            width: 500px;
            height: 500px;
            background: var(--primary-blue);
            top: -100px;
            right: -50px;
        }

        .orb-2 {
            width: 400px;
            height: 400px;
            background: #00ffcc;
            bottom: -50px;
            left: -100px;
        }

        /* --- Hero Typography --- */
        .text-stroke {
            color: transparent;
            -webkit-text-stroke: 1px var(--deep-dark);
        }

        .text-blue-glow {
            color: var(--primary-blue);
            text-shadow: 0 0 30px rgba(0, 168, 232, 0.2);
        }

        .hero-subtext {
            font-size: 1.15rem;
            color: var(--text-muted);
            line-height: 1.7;
            max-width: 550px;
        }

        /* --- Modern Tags & Buttons --- */
        .top-tag-modern {
            display: inline-flex;
            align-items: center;
            background: #f1f5f9;
            padding: 8px 16px;
            border-radius: 12px;
            gap: 10px;
        }

        .tag-text {
            font-size: 0.75rem;
            font-weight: 900;
            letter-spacing: 2px;
            color: var(--text-muted);
        }

        .btn-cyber-primary {
            background: var(--deep-dark);
            color: #fff;
            padding: 20px 40px;
            border-radius: 15px;
            text-decoration: none;
            font-weight: 800;
            display: flex;
            align-items: center;
            position: relative;
            transition: 0.4s;
            overflow: hidden;
        }

        .btn-cyber-primary:hover {
            transform: translateY(-5px);
            background: var(--primary-blue);
            color: #fff;
        }

        /* --- Composition Stack --- */
        .composition-stack {
            position: relative;
            padding: 30px;
        }

        .main-screen {
            border-radius: 25px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            background: #fff;
        }

        .screen-header {
            background: #f8fafc;
            padding: 10px 15px;
            display: flex;
        }

        .screen-header .dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .dots .r {
            background: #ff5f56;
        }

        .dots .y {
            background: #ffbd2e;
        }

        .dots .g {
            background: #27c93f;
        }

        .floating-data-card {
            position: absolute;
            background: #fff;
            padding: 15px 25px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .card-1 {
            top: 0;
            right: -20px;
        }

        .card-2 {
            bottom: 40px;
            left: -20px;
        }

        .data-icon {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            background: rgba(0, 168, 232, 0.1);
            color: var(--primary-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        .data-icon.blue {
            background: rgba(15, 23, 42, 0.05);
            color: #0f172a;
        }

        .data-info .numb {
            display: block;
            font-weight: 900;
            font-size: 1.2rem;
            color: var(--deep-dark);
            line-height: 1;
        }

        .data-info .lbl {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* --- Mosaic Feature Cards --- */
        .mosaic-card {
            padding: 40px;
            border-radius: 30px;
            background: #fff;
            border: 1px solid #f1f5f9;
            transition: 0.4s;
            height: 100%;
        }

        .mosaic-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-blue);
            box-shadow: 0 20px 40px rgba(0, 168, 232, 0.05);
        }

        .mosaic-card.active {
            background: var(--deep-dark);
            color: #fff;
        }

        .mosaic-card.active p {
            color: rgba(255, 255, 255, 0.6);
        }

        .m-icon {
            font-size: 2rem;
            color: var(--primary-blue);
            margin-bottom: 20px;
        }

        /* --- Animations --- */
        .animate-y {
            animation: floatY 4s infinite ease-in-out;
        }

        .animate-y-reverse {
            animation: floatY 4s infinite ease-in-out reverse;
        }

        @keyframes floatY {

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

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

        @media (max-width: 991px) {
            .display-2 {
                font-size: 3rem;
            }

            .composition-stack {
                margin-top: 50px;
            }
        }

        :root {
            --p-blue: #00a8e8;
            --glass-bg: rgba(255, 255, 255, 0.4);
            --glass-border: rgba(255, 255, 255, 0.6);
            --d-navy: #0f172a;
        }

        /* --- Arka Plan Katmanları --- */
        .glass-software-hero {
            background: #f8fafc;
            min-height: 100vh;
        }

        .mesh-grid-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(var(--p-blue) 0.5px, transparent 0.5px);
            background-size: 30px 30px;
            opacity: 0.1;
        }

        .glass-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            z-index: 1;
            opacity: 0.2;
        }

        .orb-primary {
            width: 500px;
            height: 500px;
            background: var(--p-blue);
            top: -100px;
            right: -50px;
        }

        .orb-secondary {
            width: 400px;
            height: 400px;
            background: #00d4ff;
            bottom: -100px;
            left: -50px;
        }

        /* --- Cam Panel Tasarımı --- */
        .glass-content-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 40px;
        }

        .text-gradient-azure {
            background: linear-gradient(135deg, var(--p-blue), #005f83);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* --- Butonlar & Badge --- */
        .btn-premium-glass {
            background: var(--d-navy);
            color: #fff;
            padding: 18px 35px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            font-weight: 800;
            text-decoration: none;
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .btn-premium-glass:hover {
            transform: translateY(-5px);
            background: var(--p-blue);
        }

        .modern-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            padding: 10px 20px;
            border-radius: 50px;
            border: 1px solid #e2e8f0;
        }

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

        /* --- Visual Cam Kartlar --- */
        .visual-glass-stack {
            position: relative;
            padding: 40px;
        }

        .glass-card-main {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(30px);
            border-radius: 35px;
            border: 1px solid rgba(255, 255, 255, 0.8);
            overflow: hidden;
        }

        .glass-card-head {
            background: rgba(255, 255, 255, 0.4);
            padding: 15px 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .controls span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #e2e8f0;
            display: inline-block;
            margin-right: 5px;
        }

        .floating-glass-tag {
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px 25px;
            border-radius: 20px;
            font-weight: 800;
            font-size: 0.85rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        }

        .tag-top {
            top: 0;
            right: 0;
        }

        .tag-bottom {
            bottom: 50px;
            left: -10px;
        }

        /* --- Özellik Kartları --- */
        .glass-feature-card-v2 {
            background: #fff;
            padding: 40px 30px;
            border-radius: 30px;
            transition: 0.4s;
            border: 1px solid #f1f5f9;
            height: 100%;
        }

        .glass-feature-card-v2:hover {
            transform: translateY(-10px);
            border-color: var(--p-blue);
        }

        .glass-feature-card-v2.active {
            background: var(--d-navy);
            color: #fff;
        }

        .f-icon-wrap {
            width: 60px;
            height: 60px;
            background: #f8fafc;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--p-blue);
            margin-bottom: 25px;
        }

        /* --- Animasyonlar --- */
        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }

            100% {
                opacity: 1;
            }
        }

        .animate-bounce-slow {
            animation: float 6s infinite ease-in-out;
        }

        .animate-bounce-fast {
            animation: float 4s infinite ease-in-out reverse;
        }

        @keyframes float {

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

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

        /* --- Genel Değişkenler & Aydınlık Temeller --- */
        :root {
            --glass-white: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.4);
            --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
            --accent-blue: #007bff;
            --text-main: #2d3436;
            --text-muted: #636e72;
        }

        body {
            background-color: #f8fafc;
            /* Yumuşak off-white arka plan */
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
        }

        /* --- Hero Section & Pastel Orbs --- */
        .light-software-hero {
            background: radial-gradient(circle at top right, #e0f2fe, #f8fafc);
            z-index: 1;
        }

        /* Aydınlık temada küreleri daha pastel ve yumuşak yapıyoruz */
        .soft-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.6;
        }

        .orb-1 {
            width: 500px;
            height: 500px;
            background: #dbeafe;
            /* Pastel mavi */
            top: -150px;
            right: -100px;
        }

        .orb-2 {
            width: 400px;
            height: 400px;
            background: #fef3c7;
            /* Pastel sarı/turuncu */
            bottom: 50px;
            left: -100px;
        }

        /* --- Glass Browser Mockup (Aydınlık) --- */
        .glass-browser-v9 {
            background: var(--glass-white);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: var(--glass-shadow);
        }

        .browser-head-v9 {
            background: rgba(255, 255, 255, 0.4);
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            padding: 12px 20px;
        }

        .url-bar-v9 {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* --- Skeleton Elements --- */
        .skeleton-box-v9,
        .skeleton-line-v9 {
            background: rgba(0, 0, 0, 0.03);
        }

        .skeleton-box-v9.active {
            background: linear-gradient(135deg, #00d2ff15, #00d2ff30);
            border: 1px solid rgba(0, 210, 255, 0.2);
        }

        /* --- Stats Section --- */
        .stat-big {
            font-size: 3.5rem;
            font-weight: 900;
            color: var(--text-main);
            letter-spacing: -2px;
        }

        .border-light {
            border-color: rgba(0, 0, 0, 0.05) !important;
        }

        /* --- Technical Capabilities Cards (Modern White Glass) --- */
        .glass-feature-card-v2 {
            background: var(--glass-white);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            padding: 2.5rem 2rem;
            border-radius: 28px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
        }

        .glass-feature-card-v2:hover {
            background: #fff;
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 123, 255, 0.1);
            border-color: var(--accent-blue);
        }

        .f-icon-wrap {
            width: 64px;
            height: 64px;
            background: #f1f5f9;
            border-radius: 18px;
            color: var(--accent-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
        }

        /* --- Butonlar --- */
        .btn-mikbal-solid {
            background: var(--text-main);
            color: #fff;
            padding: 14px 32px;
            border-radius: 14px;
            font-weight: 600;
            transition: 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-mikbal-solid:hover {
            background: var(--accent-blue);
            color: #fff;
            transform: scale(1.05);
        }

        .btn-mikbal-outline-dark {
            border: 2px solid #e2e8f0;
            color: var(--text-main);
            padding: 14px 32px;
            border-radius: 14px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-mikbal-outline-dark:hover {
            background: #fff;
            border-color: var(--text-main);
        }

        /* --- Renk Dokunuşları --- */
        .text-azure-glow {
            color: var(--accent-blue);
            text-shadow: 0 0 20px rgba(0, 123, 255, 0.2);
        }

        .hero-text-muted {
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* Yazı Renkleri ve Geçişler */
        .text-gradient-primary {
            background: linear-gradient(135deg, #0061ff 0%, #60efff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .badge-line {
            display: inline-block;
            width: 30px;
            height: 2px;
            background: #0061ff;
            border-radius: 2px;
        }

        /* Modern Butonlar */
        .btn-custom-primary {
            background: #000;
            color: #fff;
            padding: 16px 32px;
            border-radius: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }

        .btn-custom-primary:hover {
            background: #0061ff;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 97, 255, 0.2);
            color: #fff;
        }

        .btn-custom-light {
            background: #fff;
            color: #000;
            padding: 16px 32px;
            border-radius: 16px;
            font-weight: 600;
            border: 1px solid #eee;
            text-decoration: none;
            transition: 0.3s;
        }

        .btn-custom-light:hover {
            border-color: #000;
            background: #f8f9fa;
        }

        /* Mockup ve Glass Efektleri */
        .mockup-glass-container {
            position: relative;
            padding: 20px;
        }

        .glass-browser-v10 {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 30px;
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .browser-header {
            background: rgba(248, 250, 252, 0.5);
            padding: 15px 25px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
        }

        .browser-address {
            margin-left: 20px;
            background: #fff;
            padding: 4px 15px;
            border-radius: 8px;
            font-size: 0.8rem;
            color: #94a3b8;
            width: 100%;
        }

        /* Yüzen Cam Kartlar */
        .floating-card-glass {
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 15px 20px;
            border-radius: 20px;
            border: 1px solid #fff;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 10;
        }

        .card-top-right {
            top: -10px;
            right: -20px;
        }

        .card-bottom-left {
            bottom: 40px;
            left: -30px;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .bg-success-light {
            background: #dcfce7;
            color: #16a34a;
        }

        .bg-primary-light {
            background: #dbeafe;
            color: #2563eb;
        }

        /* Animasyonlar */
        @keyframes float {

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

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

        .animate-float {
            animation: float 5s infinite ease-in-out;
        }

        .animate-float-delayed {
            animation: float 6s infinite ease-in-out 1s;
        }

        .skeleton-shimmer {
            background: linear-gradient(90deg, #f1f5f9 25%, #f8fafc 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
            border-radius: 12px;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

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

        /* --- Responsive Düzenlemeler --- */

        @media (max-width: 991.98px) {

            /* Hero alanındaki min-vh-100 değerini mobilde serbest bırakalım */
            .row.align-items-center.min-vh-100 {
                min-height: auto !important;
                padding-top: 100px;
                padding-bottom: 50px;
            }

            .display-3 {
                font-size: 2.5rem !important;
                /* Başlık Mobilde Çok Büyük Kalmasın */
            }

            /* Görsel mockup kısmını mobilde daha sade yapalım */
            .mockup-glass-container {
                margin-top: 3rem;
                padding: 10px;
            }

            /* Mobilde ekran dışına taşan yüzen kartları düzenle veya gizle */
            .floating-card-glass {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                margin-top: 15px;
                width: 100%;
                /* Kartlar mobilde tam genişlik olsun */
                animation: none !important;
                /* Mobilde işlemciyi yormasın */
            }
        }

        @media (max-width: 767.98px) {

            /* Butonları mobilde alt alta getir */
            .hero-content-v9 .d-flex.flex-wrap {
                flex-direction: column;
            }

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

            /* İstatistikleri (Trust Indicators) mobilde ortala */
            .trust-indicators {
                justify-content: center;
                text-align: center;
                flex-wrap: wrap;
                gap: 20px !important;
            }

            .trust-indicators .vr {
                display: none;
                /* Mobilde aradaki çizgiyi kaldır */
            }

            /* Form alanındaki paddingleri azalt */
            .super-glass-card {
                padding: 20px !important;
            }

            /* Başlıkları küçült */
            .display-4 {
                font-size: 2rem !important;
            }
        }

        /* --- Form Alanı Modern Field Düzeltmesi --- */
        .modern-field {
            width: 100%;
            margin-bottom: 10px;
        }

        /* Select ve Inputların mobilde taşmasını engelle */
        .modern-field input,
        .modern-field select,
        .modern-field textarea {
            width: 100%;
            max-width: 100%;
        }

        /* Hikaye Görseli Tasarımı */
        .about-image-stack {
            position: relative;
            padding: 20px;
        }

        .main-img {
            border: 8px solid #fff;
            transition: transform 0.5s ease;
        }

        .main-img:hover {
            transform: scale(1.02);
        }

        .floating-glass-card.stats-card {
            position: absolute;
            bottom: -10px;
            right: -10px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            padding: 25px 35px;
            border-radius: 24px;
            border: 1px solid #fff;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* Küçük İkon Kutuları */
        .icon-sm-glass {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        /* Arka Plan Hafif Renk */
        .bg-light-soft {
            background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
        }

        /* Mobilde Görsel Düzenleme */
        @media (max-width: 991.98px) {
            .about-image-stack {
                margin-bottom: 50px;
            }

            .floating-glass-card.stats-card {
                right: 20px;
                padding: 15px 25px;
            }
        }

        /* Navbar Altına Geçmesini Engelleyen Boşluk */
        .pt-100 {
            padding-top: 120px !important;
            /* Navbar yüksekliğine göre ayarlayabilirsiniz */
        }

        /* İletişim Bilgi Kartları */
        .contact-info-card {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            transition: 0.3s;
        }

        .contact-info-card:hover {
            transform: translateX(10px);
            background: #fff;
            border-color: var(--accent-blue);
        }

        .icon-box-glass {
            width: 50px;
            height: 50px;
            background: var(--accent-blue);
            color: #fff;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        /* Sosyal Medya İkonları */
        .social-link-glass {
            width: 45px;
            height: 45px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            text-decoration: none;
            transition: 0.3s;
        }

        .social-link-glass:hover {
            background: var(--accent-blue);
            color: #fff;
            transform: translateY(-5px);
        }

        /* Mobil Düzenleme */
        @media (max-width: 991.98px) {
            .pt-100 {
                padding-top: 80px !important;
            }
        }

        /* Sayfanın genel boşluğu (Navbar yüksekliği + ek alan) */
        .contact-page-wrapper {
            padding-top: 150px !important;
            /* Üst Boşluk */
            padding-bottom: 120px !important;
            /* Alt Boşluk */
            background: radial-gradient(circle at 10% 10%, rgba(0, 97, 255, 0.03), transparent);
        }

        .mb-100 {
            margin-bottom: 80px;
        }

        /* İletişim Kartları Yeni Stil */
        .contact-info-card-v2 {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 24px;
            padding: 24px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: all 0.4s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        }

        .contact-info-card-v2:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 97, 255, 0.08);
            border-color: rgba(0, 97, 255, 0.2);
        }

        .icon-circle-glass {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #0061ff, #60efff);
            color: #fff;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            box-shadow: 0 8px 15px rgba(0, 97, 255, 0.2);
        }

        /* Form Kartı Ekstra Gölge */
        .shadow-ultra {
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05) !important;
        }

        /* Mobilde boşlukları biraz daraltalım */
        @media (max-width: 768px) {
            .contact-page-wrapper {
                padding-top: 100px !important;
                padding-bottom: 60px !important;
            }

            .mb-100 {
                margin-bottom: 40px;
            }
        }

        /* Daha küçük ve zarif süreç alanı */
        .form-process-glass-mini {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 18px;
            padding: 20px 25px;
            /* Boşluklar daraltıldı */
            max-width: 500px;
            /* Kartın yayılmasını engelledik */
        }

        .line-height-1 {
            line-height: 1;
            margin-top: 2px;
        }

        .text-muted-modern {
            color: #4b5563;
            font-weight: 500;
        }

        /* Sarı tik rengi */
        .text-warning {
            color: #facc15 !important;
        }

        /* Mobilde tam genişlik */
        @media (max-width: 768px) {
            .form-process-glass-mini {
                max-width: 100%;
                padding: 15px 20px;
            }
        }

        /* Alt Boşluk */
        .pb-120 {
            padding-bottom: 120px;
        }

        /* Filtre Butonları */
        .filter-btn {
            padding: 10px 24px;
            border-radius: 50px;
            background: #fff;
            border: 1px solid #eee;
            font-weight: 600;
            font-size: 0.9rem;
            color: #666;
            transition: all 0.3s ease;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: #000;
            color: #fff;
            border-color: #000;
        }

        /* Proje Kartları */
        .project-glass-card {
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 30px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 100%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        }

        .project-glass-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
        }

        .project-img-wrapper {
            position: relative;
            overflow: hidden;
            height: 240px;
        }

        .project-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .project-glass-card:hover .project-img-wrapper img {
            transform: scale(1.1);
        }

        /* Hover Overlay */
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 97, 255, 0.4);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.4s ease;
        }

        .project-glass-card:hover .project-overlay {
            opacity: 1;
        }

        .view-project-btn {
            width: 60px;
            height: 60px;
            background: #fff;
            color: #000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            text-decoration: none;
            transform: translateY(20px);
            transition: 0.4s ease;
        }

        .project-glass-card:hover .view-project-btn {
            transform: translateY(0);
        }

        /* İçerik Stilleri */
        .project-category {
            background: #f1f5f9;
            color: #0061ff;
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .project-date {
            font-size: 0.8rem;
            color: #94a3b8;
            font-weight: 600;
        }

        /* Widget Genel Konum */
        .glass-chat-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
        }

        /* Tetikleyici Buton (Glass Trigger) */
        .glass-chat-trigger {
            width: 60px;
            height: 60px;
            border-radius: 20px;
            background: linear-gradient(135deg, #0061ff, #60efff);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(0, 97, 255, 0.4);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .glass-chat-trigger:hover {
            transform: scale(1.1) rotate(5deg);
        }

        .trigger-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: #0061ff;
            z-index: -1;
            animation: chatPulse 2s infinite;
        }

        @keyframes chatPulse {
            0% {
                transform: scale(1);
                opacity: 0.5;
            }

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

        /* Sohbet Penceresi (Glass Window) */
        .glass-chat-window {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 350px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 30px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            display: none;
            /* Başlangıçta gizli */
            overflow: hidden;
            transform-origin: bottom right;
            animation: windowPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

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

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

        /* Header */
        .glass-chat-header {
            background: linear-gradient(135deg, rgba(0, 97, 255, 0.9), rgba(96, 239, 255, 0.9));
            padding: 20px 25px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .online-indicator {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dot {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            box-shadow: 0 0 10px #22c55e;
        }

        /* Form Alanları */
        .glass-chat-body {
            padding: 25px;
        }

        .chat-welcome-text {
            font-size: 0.9rem;
            color: #64748b;
            margin-bottom: 20px;
        }

        .chat-input-group {
            margin-bottom: 15px;
        }

        .chat-input-group input,
        .chat-input-group textarea {
            width: 100%;
            padding: 12px 18px;
            border-radius: 15px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            background: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            outline: none;
            transition: 0.3s;
        }

        .chat-input-group input:focus,
        .chat-input-group textarea:focus {
            border-color: #0061ff;
            background: #fff;
        }

        .btn-glass-send {
            width: 100%;
            padding: 14px;
            border-radius: 15px;
            border: none;
            background: #000;
            color: white;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: 0.3s;
        }

        .btn-glass-send:hover {
            background: #0061ff;
            transform: translateY(-2px);
        }

        .btn-close-chat {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }

        /* İkonların başlangıç durumlarını sabitleyelim */
        .trigger-icons {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .chat-icon-main,
        .chat-icon-close {
            position: absolute;
            /* İkonları üst üste bindirir */
            transition: all 0.3s ease;
        }

        .chat-icon-close {
            display: none;
            /* Sayfa açıldığında Çarpı kapalı olsun */
            opacity: 0;
            transform: scale(0.5) rotate(-45deg);
        }
        /* Filtre Çubuğu Glass Tasarımı */
.portfolio-filter-wrapper {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    max-width: fit-content;
    margin: 0 auto;
}

.filter-pill {
    padding: 10px 25px;
    border-radius: 40px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.9rem;
    color: #64748b;
    transition: 0.3s all ease;
}

.filter-pill.active {
    background: #000;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Yeni Nesil Proje Kartı */
.project-glass-card-v11 {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    overflow: hidden;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.project-glass-card-v11:hover {
    transform: translateY(-12px);
    box-shadow: 0 40px 80px rgba(0, 97, 255, 0.08);
    border-color: rgba(0, 97, 255, 0.2);
}

/* Öne Çıkan Kart (Featured) */
.featured-project {
    border-color: rgba(0, 97, 255, 0.15);
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
}

/* Görsel Alanı ve Floating Etiketler */
.project-img-container {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 24px;
    margin: 12px;
}

.project-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.project-glass-card-v11:hover .project-img-container img {
    transform: scale(1.1);
}

.project-tags-floating {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.tag-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Kategori İndikatörü (Pulse Efekti) */
.cat-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot-pulse {
    width: 8px;
    height: 8px;
    background: #10b981; /* E-ticaret için yeşil */
    border-radius: 50%;
    position: relative;
}

.dot-pulse.software { background: #0061ff; }
.dot-pulse.web { background: #f43f5e; }

.dot-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulseLoop 2s infinite;
}

@keyframes pulseLoop {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

.cat-name {
    font-size: 0.75rem;
    font-weight: 800;
    text-uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

/* Overlay ve Buton */
.project-overlay-v11 {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s ease;
}

.project-glass-card-v11:hover .project-overlay-v11 {
    opacity: 1;
}

.btn-project-view {
    background: #fff;
    color: #000;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px);
    transition: 0.4s ease;
}

.project-glass-card-v11:hover .btn-project-view {
    transform: translateY(0);
}

.project-year {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
}

/* Footer ve İkonlar */
.project-footer-v11 {
    border-color: rgba(0,0,0,0.03) !important;
}

.tech-stack-icons {
    display: flex;
    gap: 10px;
    font-size: 1.1rem;
}
/* Logo Boyutu */
.brand-logo {
    height: 40px; /* Mobil için ideal yükseklik */
    width: auto;
    transition: transform 0.3s ease;
}

@media (min-width: 992px) {
    .brand-logo {
        height: 45px; /* Masaüstü için biraz daha büyük */
    }
}

.navbar-brand:hover .brand-logo {
    transform: scale(1.05);
}



/* Sayfa Kaydırıldığında Navbarın Küçülmesi (Opsiyonel) */

/* Mobil Menü Tasarımı */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        position: fixed;
        top: 0;
        left: 0;
        width: 105%;
        height: 100vh;
        padding: 80px 30px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .nav-link {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000 !important;
    }
    
    .btn-nav-custom {
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
    }
}

/* Burger Icon (Modern Çizgi Stil) */
.burger-icon span {
    display: block;
    width: 25px;
    height: 2px;
    background: #000;
    margin: 5px 0;
    transition: 0.3s;
}
/* Navbar Ana Taşıyıcı */
#mainNavbar {
    background: transparent !important;
    padding: 25px 0;
    transition: all 0.4s ease;
}

/* Cam Konteyner (Görseldeki gibi oval ve şeffaf) */
.glass-nav-container {
    background: rgba(255, 255, 255, 0.05); /* Çok hafif şeffaflık */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 100px; /* Tam oval yapı */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Sayfa Kaydırıldığında Navbar */


/* Link Stilleri */
.nav-link {
    color: #2d3436 !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
    padding: 8px 15px !important;
}

.nav-link:hover {
    color: #00a8e8 !important;
    transform: translateY(-1px);
}

/* Görseldeki Özel Sarı Buton */
.btn-glass-action {
    background: #e1ff00; /* Görseldeki neon sarı */
    color: #000 !important;
    font-weight: 700;
    padding: 10px 25px !important;
    border-radius: 50px;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(225, 255, 0, 0.2);
}

.btn-glass-action:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(225, 255, 0, 0.3);
    background: #d4f000;
}

/* Dropdown Tasarımı */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 15px;
    margin-top: 15px !important;
}

.dropdown-item {
    border-radius: 10px;
    padding: 8px 15px;
    font-weight: 600;
    transition: 0.2s;
}

.dropdown-item:hover {
    background: rgba(0, 97, 255, 0.05);
    color: #0061ff;
}

/* Mobil Menü Uyumu */
@media (max-width: 991px) {
    .glass-nav-container {
        border-radius: 25px; /* Mobilde daha az oval */
    }
    .navbar-collapse {
        padding: 20px 0;
    }
}

/* Logo İkon Alanı */
.brand-logo-circle {
    width: 35px;
    height: 35px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Sayfa kaydırıldığında navbarın dış yüksekliğini bozma */
#mainNavbar.navbar-scrolled {
    padding: 15px 0 !important;
    background: transparent !important; /* Dış arka plan hep şeffaf kalsın */
    backdrop-filter: none !important;
    border: none !important;
}

/* Sadece içteki glass container'ı etkile */
#mainNavbar.navbar-scrolled .glass-nav-container {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Mobil Kapatma Butonu Stili */
.btn-close-menu {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
    transition: all 0.3s ease;
}

.btn-close-menu:hover {
    background: #e1ff00; /* Neon sarı hover efekti */
    transform: rotate(90deg);
}

/* Mobilde Menü Açıldığında Overlay Ayarı */
@media (max-width: 991px) {
    .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Elemanları en üste daya */
    }
}

/* Logo Taşıyıcı Alan (Daire Formu) */
.brand-logo-wrapper {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.5); /* Hafif cam etkisi */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 168, 232, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Logo Resim Ayarları */
.navbar-logo-img {
    width: 85%; /* Dairenin içinde hafif boşluk bırakır */
    height: 85%;
    object-fit: contain;
}

/* Navbar Brand Üzerine Gelince Logo Efekti */
.navbar-brand:hover .brand-logo-wrapper {
    transform: scale(1.08) rotate(5deg);
    border-color: #00a8e8;
    box-shadow: 0 0 15px rgba(0, 168, 232, 0.3);
}

/* Metin Hizalama ve Stil */
.brand-text {
    font-size: 1.2rem;
    color: #2d3436;
    letter-spacing: 0.5px;
}

.brand-text b {
    color: #00a8e8; /* SOFT kısmını markanızın ana mavisi yapalım */
}
/* Alt Boşluk Ayarı */
.mb-120 { margin-bottom: 120px; }

/* Ana Banner Kutusu */
.laravel-premium-banner {
    background: #0f172a; /* Derin lacivert zemin */
    border-radius: 50px;
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
}

/* Arka Plan Glow Efekti */
.banner-blur-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 168, 232, 0.2) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    z-index: 1;
}

/* Azure Gradient Yazı */
.text-azure-gradient {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Küçük Badge Stili */
.badge-tech {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d2ff;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-line {
    height: 1px;
    width: 60px;
    background: rgba(255, 255, 255, 0.1);
}

/* Küçük İstatistik Kartları */
.stat-glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
}

.stat-glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #00d2ff;
    transform: translateY(-5px);
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Sağ Taraf Görsel Stack */
.tech-visual-stack {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.visual-main-card {
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.visual-glass-box {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 5;
}

.top-card { top: 0; right: 20px; background: #1e293b; color: #fff; border: 1px solid #334155; }
.bottom-card { bottom: 20px; left: 20px; display: flex; align-items: center; gap: 10px; color: #0f172a; }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }

/* Mobil Düzenleme */
@media (max-width: 991px) {
    .laravel-premium-banner { padding: 40px 30px; border-radius: 30px; }
    .tech-visual-stack { margin-top: 50px; }
}

/* Ürün Kartı Görsel Yüksekliği Ayarı */
.project-img-container {
    height: 200px !important; /* Ürünler için daha uygun bir kareye yakın form */
}

/* Kategori İsmi */
.cat-name {
    letter-spacing: 1px;
    font-weight: 800;
    color: #94a3b8;
    font-size: 0.65rem;
}

/* İndirimli Fiyat Çizgisi */
.text-decoration-line-through {
    color: #cbd5e1 !important;
    font-size: 0.8rem;
}

/* Shopping Hero Özel Arka Plan */
.ecommerce-hero {
    background: radial-gradient(circle at top right, #f0f9ff, #ffffff);
}

/* Ürün Overlay Butonu Düzenleme */
.btn-project-view {
    cursor: pointer;
    outline: none;
}
@media (max-width: 991.98px) {
    #mainNavbar {
        padding: 10px 15px !important; /* Dış çerçeveden boşluk */
    }

    .glass-nav-container {
        /* Kenarlardan boşluk bırakıp köşeleri oval yapıyoruz */
        margin: 0 auto;
        padding: 8px 15px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(15px);
        border-radius: 20px !important; /* Oval görünüm */
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
        
        /* Sağdan soldan boşluk bırakması için genişliği kısıtlıyoruz */
        width: calc(100% - 30px) !important;
    }

    /* Menü açıldığında içeriğin taşmaması için */
    .navbar-collapse {
        background: white;
        margin-top: 15px;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
}

@media (max-width: 991.98px) {
    .navbar-toggler {
        padding: 0 !important; /* Etrafındaki boşluğu kaldırır */
        margin-right: 0 !important;
    }
}