/* 1. BU KISMI EN TEPEYE EKLE */
        :root {
            --font-stack: "SF Compact Display", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

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

        /* 2. BODY KISMINI ŞÖYLE GÜNCELLE (Montserrat'ı sil) */
        body {
            font-family: var(--font-stack);
            /* Yeni font burada */
            background: #ffffff;
            color: #222;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            /* Yazıları netleştirir */
        }

        /* 3. BAŞLIKLAR İÇİN BUNU EKLE (Daha modern durması için) */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-stack);
            letter-spacing: -0.02em;
        }

        /* --- HERO WRAPPER --- */
        .hero-wrapper {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #fff;
            /* Altta beyaz zemin garanti olsun */
        }

        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('images/hero-bg.webp');
            background-size: cover;
            background-position: center;
            z-index: 1;
            animation: slowZoom 40s infinite alternate ease-in-out;

            /* KRİTİK DÜZELTME: CSS MASK */
            /* Resmin alt kısmını tarayıcı seviyesinde maskeleyerek yok ediyoruz. Gradient'e güvenmek yerine resmi siliyoruz. */
            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        }

        .overlay {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(248, 250, 252, 0.2) 100%) !important;
        }

        .bg-image {
            position: absolute;
        }

        /* sende zaten var :contentReference[oaicite:2]{index=2} */



        /* EKSTRA SİS KATMANI (Garanti Geçiş) */
        .hero-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 250px;
            /* Transition to brand cool off-white instead of pure white */
            background: linear-gradient(to top, #f8fafc 0%, transparent 100%);
            z-index: 2;
            pointer-events: none;
        }

        /* --- NAVBAR --- */
        /* Navbar'da blur kalabilir, o yukarıda olduğu için sorun çıkarmaz */
        /* NAVBAR REMOVED - NOW MODULAR (nav.html) */


        /* --- HERO İÇERİK --- */
        .hero-content {
            position: relative;
            z-index: 10;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* Merkezi hizalama */
            text-align: center;
            /* Metinleri merkezle */
            margin: 0 auto;
            /* Sayfayı ortala */
            max-width: 1000px;
            padding-top: 120px;
            padding-bottom: 80px;
        }

        .tagline {
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #555;
            margin-bottom: 25px;
            font-weight: 700;
            opacity: 0;
            animation: fadeIn 1s 0.5s forwards;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .tagline::before,
        .tagline::after {
            content: '';
            width: 20px;
            height: 1px;
            background: #3b82f6;
            /* Brand Blue */
        }

        .hero-content h1 {
            font-family: var(--font-stack);
            font-size: 5rem;
            line-height: 1.0;
            color: #0f172a;
            /* Brand Navy */
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s 0.8s forwards;
            font-weight: 800;
            letter-spacing: -0.04em;
        }

        .hero-content p {
            color: #334155;
            /* Muted Navy */
            font-size: 1.1rem;
            line-height: 1.8;
            max-width: 580px;
            font-weight: 400;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s 1s forwards;
            margin-bottom: 60px;
        }

        /* --- ARAMA KUTUSU (SORUN ÇIKARAN KISIM DÜZELTİLDİ) --- */
        .search-container-wrapper {
            position: relative;
            z-index: 20;
            display: flex;
            justify-content: center;
            /* Merkezi hizalama */
            width: 100%;
            padding-top: 40px;
            opacity: 0;
            animation: fadeIn 1s 1.4s forwards;
        }

        .search-bar {
            background: #0f172a;
            /* Brand Navy */
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);

            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 950px;
            will-change: transform;
        }

        .input-box {
            flex: 1;
            position: relative;
        }

        .input-box input {
            width: 100%;
            /* Semi-transparent dark background for inputs */
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 18px 20px 18px 45px;
            border-radius: 4px;
            color: #fff;
            font-family: var(--font-stack);
            font-size: 14px;
            font-weight: 500;
            transition: 0.3s;
        }

        .input-box input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .input-box i {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            z-index: 2;
        }

        .input-box input:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(34, 211, 238, 0.5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            outline: none;
        }

        .btn-action {
            /* Restore Brand Gradient */
            background: linear-gradient(90deg, #3b82f6, #22d3ee);
            color: #fff;
            border: none;
            padding: 18px 45px;
            border-radius: 4px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-family: var(--font-stack);
            white-space: nowrap;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
        }

        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(34, 211, 238, 0.5);
            filter: brightness(1.1);
        }

        /* --- İSTATİSTİK BÖLÜMÜ --- */
        .stats-section {
            position: relative;
            z-index: 5;
            background-color: #f8fafc;
            /* Hafif cool gri/mavi zemin */
            padding: 80px 80px;
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: -1px;
        }

        .stat-card {
            flex: 1;
            height: 240px;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 40px;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .stat-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
        }

        .stat-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
            z-index: 1;
        }

        .stat-card.blue-tint .stat-overlay {
            background: linear-gradient(90deg, rgba(30, 60, 114, 0.9) 0%, rgba(42, 82, 152, 0.6) 100%);
        }

        .stat-content {
            position: relative;
            z-index: 2;
            color: white;
        }

        .stat-content h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.8rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 5px;
        }

        .stat-content p {
            font-family: var(--font-stack);
            font-size: 1.2rem;
            font-weight: 600;
            color: #eee;
            letter-spacing: 1px;
        }

        .avatar-group {
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            z-index: 2;
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.8);
            object-fit: cover;
            margin-left: -20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: 0.3s;
        }

        .avatar:first-child {
            margin-left: 0;
        }

        .avatar:hover {
            transform: scale(1.1);
            z-index: 10;
        }

        /* Mobil */
        @media (max-width: 768px) {
            .hero-wrapper {
                height: auto;
                min-height: 100vh;
            }

            .hero-content {
                padding: 100px 30px;
                padding-left: 30px;
                align-items: center;
                text-align: center;
            }

            .search-container-wrapper {
                justify-content: center;
            }

            .search-bar {
                flex-direction: column;
                width: 100%;
                gap: 10px;
                padding: 15px;
            }

            .hero-content h1 {
                font-size: 2.8rem;
            }

            .navbar {
                display: none;
            }

            .stats-section {
                flex-direction: column;
                padding: 40px 20px;
            }

            .stat-card {
                width: 100%;
                margin-bottom: 20px;
            }

            /* Mobilde maskelemeyi biraz daha yukarıdan başlat */
            .bg-image {
                -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
                mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            }
        }

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

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

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

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

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

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

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



        .partners-section {
            --ink: #0b1220;
            --navy: #111a2c;
            --muted: rgba(11, 18, 32, .62);
            --accent: #3b82f6;
            --accent2: #22d3ee;

            position: relative;
            z-index: 5;
            padding: 90px 80px;
            overflow: hidden;

            /* DÜZ GRİ YOK -> cool arkaplan */

            background:
                radial-gradient(900px 560px at 14% 18%, rgba(255, 255, 255, 0.16), transparent 60%),
                radial-gradient(850px 520px at 88% 22%, rgba(255, 255, 255, 0.12), transparent 55%),
                radial-gradient(900px 620px at 50% 115%, rgba(255, 255, 255, 0.616), transparent 58%),
                linear-gradient(180deg, #fbfcff 0%, #f3f6fb 100%);


        }

        /* hafif noise */
        .partners-section::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .04;
            background-image:
                repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 4px),
                repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 5px);
            mix-blend-mode: soft-light;
        }

        /* Layout */
        .partners-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;

            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            align-items: center;
            gap: 70px;
        }

        /* Sol yazı */
        .partners-text {
            max-width: 40ch;
        }

        .partners-text h2 {
            font-family: var(--font-stack);
            font-size: clamp(2.1rem, 3vw, 3rem);
            color: var(--navy);
            margin-bottom: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.08;
        }

        .partners-text p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.05rem;
            color: var(--muted);
            line-height: 1.7;
            font-weight: 500;
        }

        /* Sağ grid */
        .partners-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        /* Kart: gerçek glass */
        .partner-card {
            position: relative;
            height: 110px;
            border-radius: 22px;
            padding: 18px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
            border: 1px solid rgba(255, 255, 255, .26);

            box-shadow:
                0 22px 60px rgba(15, 23, 42, .12),
                inset 0 1px 0 rgba(255, 255, 255, .34);

            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
            .partner-card {
                -webkit-backdrop-filter: blur(18px) saturate(1.2);
                backdrop-filter: blur(18px) saturate(1.2);
            }
        }

        /* cam parlaması */
        .partner-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                radial-gradient(260px 90px at 20% 12%, rgba(255, 255, 255, .40), transparent 60%),
                radial-gradient(240px 120px at 90% 80%, rgba(59, 130, 246, .16), transparent 65%);
            opacity: .85;
        }

        /* gradient border (premium) */
        .partner-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            padding: 1px;

            background: linear-gradient(135deg,
                    rgba(255, 255, 255, .65),
                    rgba(59, 130, 246, .18),
                    rgba(34, 211, 238, .12),
                    rgba(255, 255, 255, .42));

            -webkit-mask-composite: xor;
            mask-composite: exclude;

            opacity: .85;
        }

        /* Logo davranışı (daha kurumsal) */
        .partner-card img {
            max-width: 82%;
            max-height: 82%;
            object-fit: contain;

            filter: grayscale(100%) contrast(1.05);
            opacity: .78;

            transition: transform .25s ease, filter .25s ease, opacity .25s ease;
        }

        /* Hover */
        .partner-card:hover {
            transform: translateY(-4px);
            border-color: rgba(59, 130, 246, .22);
            box-shadow:
                0 34px 90px rgba(15, 23, 42, .16),
                inset 0 1px 0 rgba(255, 255, 255, .38);
        }

        .partner-card:hover img {
            filter: grayscale(0%) contrast(1.08);
            opacity: 1;
            transform: scale(1.03);
        }

        /* Responsive */
        @media (max-width: 1100px) {
            .partners-section {
                padding: 70px 30px;
            }

            .partners-container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .partners-text {
                margin: 0 auto;
            }

            .partners-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 520px) {
            .partners-grid {
                grid-template-columns: 1fr;
            }

            .partner-card {
                height: 96px;
            }
        }



        /* =========================================
   NASIL ÇALIŞIYORUZ — COOL GLASS (NO BROWN)
   Graphite + Electric Blue
   ========================================= */

        /* =========================================
   MODERN NASIL ÇALIŞIYORUZ - STICKY INTERACTIVE
   ========================================= */
        .modern-work-section {
            position: relative;
            padding: 120px 0;
            background-color: #f8fafc;
            /* Cool Slate Zemin */
        }

        .work-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* Yarı yarıya */
            gap: 80px;
            align-items: start;
        }

        /* SOL: AKAN LİSTE */
        .work-steps {
            position: relative;
            z-index: 2;
        }

        .work-header {
            margin-bottom: 60px;
        }

        .work-header h2 {
            font-family: var(--font-stack);
            font-size: 3.2rem;
            color: #1a2a44;
            /* Lacivert Başlık */
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 15px;
        }

        .work-header p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #64748b;
            /* Soft Gri */
            line-height: 1.6;
        }

        /* ADIM KARTLARI */
        .step-card {
            display: flex;
            align-items: flex-start;
            gap: 25px;
            padding: 35px 30px;
            border-radius: 20px;
            background: transparent;
            /* Başlangıçta şeffaf */
            border: 1px solid transparent;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            margin-bottom: 20px;
            cursor: pointer;
        }

        /* HOVER: KART PARLAR */
        .step-card:hover {
            background: #ffffff;
            border-color: rgba(59, 130, 246, 0.15);
            /* Hafif Mavi Çerçeve */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
            transform: translateX(10px);
        }

        /* Numara */
        .step-num {
            font-family: var(--font-stack);
            font-size: 2.5rem;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px #cbd5e1;
            /* İçi boş, gri çerçeveli */
            line-height: 1;
            transition: all 0.3s ease;
        }

        .step-card:hover .step-num {
            color: #3b82f6;
            /* Hoverda Mavi olur */
            -webkit-text-stroke: 0;
        }

        /* İçerik */
        .step-text h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.3rem;
            color: #1a2a44;
            font-weight: 700;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }

        .step-card:hover .step-text h3 {
            color: #3b82f6;
        }

        .step-text p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.95rem;
            color: #64748b;
            line-height: 1.6;
            margin: 0;
        }


        /* SAĞ: STICKY GÖRSEL */
        .work-visual {
            position: sticky;
            top: 120px;
            /* Sayfanın üstünden 120px boşlukta sabit kalır */
            height: 600px;
            border-radius: 30px;
            overflow: hidden;
            background: #fff;
            padding: 10px;
            /* Çerçeve payı */
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .visual-frame {
            width: 100%;
            height: 100%;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
        }

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

        /* Dekoratif Blur */
        .work-visual::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(59, 130, 246, 0.2);
            filter: blur(80px);
            z-index: -1;
        }

        /* MOBİL */
        @media (max-width: 992px) {
            .work-container {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .work-visual {
                position: relative;
                /* Mobilde sticky olmaz */
                top: 0;
                height: 400px;
                order: -1;
                /* Mobilde görsel üstte */
            }

            .step-card {
                padding: 25px 20px;
            }

            .step-card:hover {
                transform: none;
            }
        }

        /* =========================================
           SIK SORULAN SORULAR (FAQ) BÖLÜMÜ
           ========================================= */
        .faq-section {
            background-color: #f8fafc;
            /* Temiz bir arka plan */
            padding: 100px 20px;
        }

        .faq-container {
            max-width: 900px;
            /* Okunabilirlik için çok geniş olmasın */
            margin: 0 auto;
        }

        /* Başlık Alanı */
        .faq-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .faq-header h2 {
            font-family: var(--font-stack);
            font-size: 3rem;
            color: #1a2a44;
            /* Üst satır Lacivert */
            line-height: 1.2;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .faq-header h2 span {
            color: #3b82f6;
            /* Alt satır Electric Blue */
            display: block;
            /* Alt satıra indir */
        }

        .faq-header p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #555;
            font-weight: 500;
        }

        /* FAQ Kutuları */
        .faq-wrapper {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .faq-item {
            background: #ffffff;
            border: 2px solid rgba(59, 130, 246, 0.15);
            /* Standartlaşmış mavi çerçeve */
            border-radius: 20px;
            /* Modern yumuşak köşe */
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Açık olan kutunun stili */
        .faq-item.active {
            background: #f1f5f9;
            /* Hafif cool gri */
            border-color: #3b82f6;
            /* Aktifken mavi çerçeve */
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
            border-radius: 24px;
        }

        /* Soru Kısmı (Tıklanabilir Alan) */
        .faq-question {
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            /* Metin seçilmesin */
        }

        .faq-question h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #1a2a44;
            margin: 0;
        }

        .faq-icon {
            font-size: 1.2rem;
            color: #3b82f6;
            transition: transform 0.3s ease;
        }

        /* Cevap Kısmı (Gizli) */
        .faq-answer {
            max-height: 0;
            /* Başlangıçta kapalı */
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            /* Yumuşak açılma animasyonu */
            padding: 0 40px;
            /* Sağdan soldan boşluk */
        }

        .faq-answer p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            color: #555;
            line-height: 1.6;
            padding-bottom: 30px;
            /* Alttan boşluk */
            margin-top: -10px;
        }

        /* Aktif Durum (JS ile eklenecek) */
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
            /* Oku ters çevir */
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            /* Yeterince büyük bir değer */
        }

        /* Mobil */
        @media (max-width: 768px) {
            .faq-header h2 {
                font-size: 2.2rem;
            }

            .faq-question {
                padding: 20px 25px;
            }

            .faq-answer {
                padding: 0 25px;
            }

            .faq-question h3 {
                font-size: 1rem;
            }
        }

        /* =========================================
   PROJENİZ Mİ VAR — DARK NAVY CTA (NO IMAGE)
   ========================================= */

        .project-cta-section {
            padding: 90px 80px;
            background-color: #f8fafc;
        }

        .project-cta-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* oval “hero card” */
        .cta-hero {
            position: relative;
            height: 440px;
            border-radius: 150px;
            overflow: hidden;

            /* KOYU LACİVERT zemin + ışıklar */
            background:
                radial-gradient(900px 560px at 14% 18%, rgba(59, 130, 246, .22), transparent 60%),
                radial-gradient(850px 520px at 88% 22%, rgba(34, 211, 238, .16), transparent 55%),
                radial-gradient(900px 620px at 50% 115%, rgba(0, 0, 0, .38), transparent 58%),
                linear-gradient(180deg, #0f172a 0%, #0b1220 70%, #070b14 100%);

            box-shadow:
                0 46px 110px rgba(0, 0, 0, .45),
                0 18px 44px rgba(0, 0, 0, .28);

            border: 1px solid rgba(255, 255, 255, .10);
        }

        /* çok hafif noise */
        .cta-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .05;
            background-image:
                repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 6px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 7px);
            mix-blend-mode: overlay;
        }

        /* premium cam çerçeve */
        .cta-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            border: 1px solid rgba(255, 255, 255, .14);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
        }

        .cta-overlay-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            padding: 0 64px;
            z-index: 2;
        }

        /* içerik düzeni */
        .cta-top-content {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 50px;
        }

        /* başlık */
        .cta-title h2 {
            font-family: var(--font-stack);
            font-size: clamp(2.6rem, 4.6vw, 4.6rem);
            line-height: .95;
            color: rgba(255, 255, 255, .95);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            text-shadow: 0 18px 60px rgba(0, 0, 0, .55);
        }

        .cta-title h2 span {
            display: block;
            color: rgba(255, 255, 255, .88);
        }

        /* açıklama */
        .cta-info {
            max-width: 520px;
        }

        .cta-info p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .78);
            line-height: 1.65;
            font-weight: 600;
            margin-bottom: 22px;
            text-shadow: 0 16px 50px rgba(0, 0, 0, .55);
        }

        /* butonlar */
        .cta-buttons {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        /* PRIMARY: bizim koyu lacivert */
        .btn-cta-dark {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 14px 26px;
            border-radius: 999px;
            text-decoration: none;

            font-weight: 900;
            font-size: 13px;
            letter-spacing: .08em;

            color: rgba(255, 255, 255, .95);

            background: linear-gradient(180deg, #1b2a4a 0%, #0f172a 55%, #0b1220 100%);
            border: 1px solid rgba(255, 255, 255, .14);

            box-shadow:
                0 22px 60px rgba(0, 0, 0, .35),
                inset 0 1px 0 rgba(255, 255, 255, .10);

            transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        .btn-cta-dark:hover {
            transform: translateY(-2px);
            filter: brightness(1.06);
            border-color: rgba(59, 130, 246, .28);
            box-shadow:
                0 34px 90px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .12);
        }

        /* SECONDARY: glass outline */
        .btn-cta-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 14px 26px;
            border-radius: 999px;
            text-decoration: none;

            font-weight: 900;
            font-size: 13px;
            letter-spacing: .08em;

            color: rgba(255, 255, 255, .92);
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .18);

            box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
            transition: transform .25s ease, background .25s ease, border-color .25s ease;
        }

        @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
            .btn-cta-outline {
                -webkit-backdrop-filter: blur(18px) saturate(1.2);
                backdrop-filter: blur(18px) saturate(1.2);
            }
        }

        .btn-cta-outline:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, .14);
            border-color: rgba(59, 130, 246, .26);
        }

        /* küçük not */
        .cta-note {
            display: block;
            font-size: .88rem;
            color: rgba(255, 255, 255, .62);
            font-weight: 600;
            text-shadow: 0 16px 50px rgba(0, 0, 0, .55);
        }

        /* mobil */
        @media (max-width: 900px) {
            .project-cta-section {
                padding: 60px 20px;
            }

            .cta-hero {
                height: 360px;
                border-radius: 44px;
            }

            .cta-overlay-content {
                padding: 30px 22px;
                align-items: flex-end;
            }

            .cta-top-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 18px;
            }

            .cta-buttons {
                width: 100%;
            }

            .btn-cta-dark,
            .btn-cta-outline {
                width: 100%;
                text-align: center;
            }
        }


        /* =========================================
   COOL GLASS FOOTER — Graphite + Electric Blue
   (NO GOLD / NO BEIGE)
   ========================================= */

        /* FOOTER REMOVED - NOW MODULAR (footer.html) */

        /* =========================================
   SÜREÇ (PROCESS) - TERTEMİZ BEYAZ (DESENSİZ)
   ========================================= */
        .process-section {
            position: relative;
            padding: 100px 0;

            /* 1. ZEMİN: Hafif kirli beyaz/mavimsi */
            background-color: #f8fafc;

            /* Altına ince bir çizgi çekelim ki sonraki koyu bölümle birleşirken net dursun */
            border-bottom: 1px solid #e0e0e0;
        }

        /* RESMİ BURAYA ALDIK (Opaklık verebilmek için) */
        .process-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            /* --- RESİM AYARLARI --- */
            background-image: url('images/surec.jpg');
            /* Dosya yolunu kontrol et */
            background-repeat: no-repeat;
            background-size: cover;
            /* Alanı doldur */
            background-position: center top;
            /* Ortala */

            /* --- KRİTİK AYAR: OPAKLIĞI DÜŞÜRME --- */
            /* 1 = Tam görünür, 0 = Görünmez. */
            /* 0.15 yaparsan resim çok hafif bir doku gibi durur, gözü yormaz. */
            opacity: 0.15;

            z-index: 1;
            /* En altta duracak */
            pointer-events: none;
            /* Tıklamaları engellemesin */
        }

        /* =========================================
   PROCESS SECTION: BENTO GRID (MODERN & CLEAN)
   ========================================= */
        .process-bento-section {
            padding: 100px 0;
            background-color: #f8fafc;
            position: relative;
        }

        .bento-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .bento-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 60px auto;
        }

        .bento-header h2 {
            font-family: var(--font-stack);
            font-size: 3rem;
            color: #1e293b;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .bento-header p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #64748b;
        }

        /* GRID YAPISI */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto auto;
            gap: 25px;
        }

        /* ORTAK KART STİLİ */
        .bento-card {
            background: #ffffff;
            border-radius: 24px;
            padding: 35px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            overflow: hidden;
        }

        .bento-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .bento-icon-box {
            width: 50px;
            height: 50px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: #3b82f6;
            margin-bottom: 20px;
            transition: 0.3s;
        }

        .bento-card:hover .bento-icon-box {
            background: #3b82f6;
            color: #fff;
        }

        .bento-card h3 {
            font-family: var(--font-stack);
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 12px;
        }

        .bento-card p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.5;
        }

        /* ÖZEL KART BOYUTLARI (ASİMETRİ) */
        /* 1. KART: Geniş Tanıtım */
        .bento-large {
            grid-column: span 2;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #fff;
        }

        .bento-large h3 {
            color: #fff;
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

        .bento-large p {
            color: #cbd5e1;
            font-size: 1rem;
        }

        .bento-large .bento-icon-box {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* 2. & 3. KART: Standart */
        .bento-std {
            grid-column: span 1;
        }

        /* 4. KART: Geniş Yatay */
        .bento-wide {
            grid-column: span 2;
        }

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

            .bento-large,
            .bento-wide {
                grid-column: span 2;
            }
        }

        @media (max-width: 600px) {
            .bento-grid {
                grid-template-columns: 1fr;
            }

            .bento-large,
            .bento-wide,
            .bento-std {
                grid-column: span 1;
            }
        }

        /* =========================================
   GLOBAL LAYOUT (Full Section Feel)
   ========================================= */
        html {
            /* Scroll snap kaldırıldı (Daha özgür kullanım) */
            scroll-behavior: smooth;
        }

        /* Tüm ana bölümler görsel olarak birer slayt gibi dolsun ama kilitlenmesin */
        section,
        .hero-wrapper,
        .process-bento-section,
        .work-timeline-section,
        .services-section,
        .vision-gallery,
        .faq-section,
        .project-cta-section {
            /* scroll-snap-align: start; <- KALDIRILDI */
            min-height: 100vh;
            /* Her bölüm en az 1 ekran boyu */
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* İçeriği ortalar */
            position: relative;
        }

        /* Hero için özel ayar (zaten flex ama ezmeyelim) */
        .hero-wrapper {
            height: 100vh;
        }

        /* =========================================
           NASIL ÇALIŞIYORUZ - HORIZONTAL TIMELINE
           ========================================= */
        .work-process-section {
            padding: 120px 0;
            background-color: #f8fafc;
            overflow: hidden;
            position: relative;
        }

        .process-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
        }

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

        .process-header h2 {
            font-family: var(--font-stack);
            font-size: 3.5rem;
            color: #0f172a;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .process-header p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #64748b;
        }

        /* YATAY AKIŞ */
        .process-steps-horizontal {
            display: flex;
            justify-content: space-between;
            position: relative;
            gap: 20px;
        }

        /* Bağlantı Çizgisi */
        .process-steps-horizontal::before {
            content: '';
            position: absolute;
            top: 45px;
            left: 50px;
            right: 50px;
            height: 2px;
            background: rgba(15, 23, 42, 0.05);
            z-index: 1;
        }

        /* Adım Kartı */
        .process-step-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(30px);
        }

        .process-step-item.animate {
            animation: fadeInUpStep 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

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

        /* İkon/Numara Kutusu */
        .step-circle {
            width: 90px;
            height: 90px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #3b82f6;
            margin-bottom: 25px;
            border: 2px solid rgba(15, 23, 42, 0.05);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
            position: relative;
            transition: all 0.4s ease;
        }

        .process-step-item:hover .step-circle {
            background: #0f172a;
            color: #fff;
            transform: scale(1.1);
            border-color: #3b82f6;
            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
        }

        .step-num-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 32px;
            height: 32px;
            background: #3b82f6;
            color: #fff;
            border-radius: 50%;
            font-size: 0.8rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid #f8fafc;
        }

        /* İçerik */
        .process-step-item h3 {
            font-family: var(--font-stack);
            font-size: 1.35rem;
            color: #0f172a;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .process-step-item p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.95rem;
            color: #64748b;
            line-height: 1.6;
            padding: 0 15px;
        }

        /* Mobilde Dikey Yapı */
        @media (max-width: 992px) {
            .process-steps-horizontal {
                flex-direction: column;
                gap: 50px;
            }

            .process-steps-horizontal::before {
                display: none;
            }

            .process-step-item {
                max-width: 400px;
                margin: 0 auto;
            }
        }

        /* 6 Adım İçin Özelleştirme */
        .process-dark-grid {
            grid-template-rows: repeat(3, 1fr);
            /* 3 Satır */
        }

        .process-step-dark {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 30px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: background 0.3s ease;
        }

        .process-step-dark:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        /* Grid Çizgileri Temizliği (2. sütun sağ, son satır alt yok) */
        .process-step-dark:nth-child(2n) {
            border-right: none;
        }

        .process-step-dark:nth-child(n+5) {
            border-bottom: none;
        }

        /* Tipografi */
        .step-num-dark {
            font-family: var(--font-stack);
            font-size: 1.5rem;
            color: rgba(59, 130, 246, 0.8);
            /* Dim Blue */
            font-weight: 800;
            margin-bottom: 8px;
            display: block;
        }

        .process-step-dark h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #fff;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .process-step-dark p {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            color: #94a3b8;
            line-height: 1.4;
            margin: 0;
        }

        /* MOBİL UYUMLULUK */
        @media (max-width: 900px) {
            .about-stats-section {
                padding: 60px 20px;
            }

            .about-card {
                grid-template-columns: 1fr;
                border-radius: 30px;
            }

            .about-info {
                padding: 50px 30px;
                text-align: center;
                align-items: center;
            }

            .about-info h2 {
                font-size: 2.5rem;
            }

            .stats-grid {
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }

            /* Mobilde grid çizgilerini ayarla (hepsi alt çizgili olsun belki) */
            .process-step-dark:nth-child(2n) {
                border-right: 1px solid rgba(255, 255, 255, 0.1);
                /* Mobilde tek sütunsa yan çizgi gerekmez ama grid 2 ise kalsın */
            }
        }

        /* =========================================
   HİZMETLER BÖLÜMÜ (PREMIUM TASARIM)
   ========================================= */
        .services-section {
            position: relative;
            background: #f8fafc;
            /* Hafif cool gri/mavi zemin */
            padding: 100px 0;
            overflow: hidden;
        }

        .services-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* Başlık */
        .services-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .services-header h2 {
            font-family: var(--font-stack);
            font-size: 3rem;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .services-header p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
            font-weight: 500;
        }

        /* Ana Layout - Sidebar + Content */
        .services-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 40px;
            align-items: start;
        }

        /* --- SIDEBAR NAVİGASYON --- */
        .services-sidebar {
            position: sticky;
            top: 120px;
            background: #f8f9fa;
            border-radius: 20px;
            padding: 30px 0;
            height: fit-content;
        }

        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 20px;
        }

        .sidebar-btn {
            padding: 16px 20px;
            background: transparent;
            border: none;
            border-radius: 12px;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            color: #666;
            position: relative;
        }

        .sidebar-btn::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background: #1a2a44;
            border-radius: 0 3px 3px 0;
            transition: height 0.3s ease;
        }

        .sidebar-btn:hover {
            background: rgba(26, 42, 68, 0.05);
            color: #1a2a44;
        }

        .sidebar-btn.active {
            background: #ffffff;
            color: #1a2a44;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .sidebar-btn.active::before {
            height: 60%;
        }

        .sidebar-icon {
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }

        /* --- İÇERİK ALANI --- */
        .services-content {
            min-height: 500px;
        }

        .category-pane {
            display: none;
            animation: fadeInUp 0.4s ease;
        }

        .category-pane.active {
            display: block;
        }

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

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

        .category-title-section {
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .category-title-section h3 {
            font-family: var(--font-stack);
            font-size: 2rem;
            color: #1a1a1a;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .category-title-section p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            color: #666;
            margin: 0;
        }

        /* Hizmet Grid */
        .service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        /* Hizmet Kartları - Minimal ve Modern */
        .service-item {
            background: #ffffff;
            border: 1px solid #e8e8e8;
            border-radius: 16px;
            padding: 32px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            height: 100%;
            /* Fix: Equal Height */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .service-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 42, 68, 0.03) 0%, rgba(26, 42, 68, 0.01) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .service-item:hover {
            border-color: #1a2a44;
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(26, 42, 68, 0.12);
        }

        .service-item:hover::after {
            opacity: 1;
        }

        .item-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .item-icon {
            width: 56px;
            height: 56px;
            background: #f5f7fa;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a2a44;
            font-size: 1.5rem;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .service-item:hover .item-icon {
            background: #1a2a44;
            color: #ffffff;
            transform: scale(1.05);
        }

        .item-arrow {
            width: 32px;
            height: 32px;
            background: #f5f7fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .service-item:hover .item-arrow {
            background: #1a2a44;
            color: #ffffff;
            transform: translate(4px, -4px);
        }

        .service-item h4 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0;
            line-height: 1.4;
            transition: color 0.3s ease;
        }

        .service-item:hover h4 {
            color: #1a2a44;
        }

        /* --- MOBİL UYUMLULUK --- */
        @media (max-width: 1024px) {
            .services-layout {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .services-sidebar {
                position: relative;
                top: 0;
            }

            .sidebar-nav {
                flex-direction: row;
                overflow-x: auto;
                padding: 0 20px 10px 20px;
                gap: 10px;
            }

            .sidebar-btn {
                white-space: nowrap;
                flex-shrink: 0;
            }

            .sidebar-btn::before {
                display: none;
            }

            .sidebar-btn.active::before {
                display: block;
                bottom: 0;
                top: auto;
                left: 0;
                right: 0;
                width: 100%;
                height: 3px;
                border-radius: 3px 3px 0 0;
            }
        }

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

            .services-container {
                padding: 0 20px;
            }

            .services-header h2 {
                font-size: 2.2rem;
            }

            .service-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .service-item {
                padding: 24px;
            }

            .category-title-section h3 {
                font-size: 1.6rem;
            }
        }

        /* --- POPUP (MODAL) STİLLERİ --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            /* Arka planı karart */
            backdrop-filter: blur(5px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .modal-box {
            background: #fff;
            width: 90%;
            max-width: 600px;
            border-radius: 24px;
            padding: 40px;
            position: relative;
            transform: scale(0.8);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
        }

        .modal-overlay.open .modal-box {
            transform: scale(1);
        }

        .close-modal-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 36px;
            height: 36px;
            background: #f5f5f7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #333;
            transition: 0.3s;
            font-size: 1.2rem;
        }

        .close-modal-btn:hover {
            background: #e5e5e5;
            color: #000;
        }

        #modal-title {
            font-size: 2rem;
            color: #1a2a44;
            margin-bottom: 20px;
            letter-spacing: -1px;
            line-height: 1.2;
        }

        #modal-desc {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.7;
        }

        /* Mobil Uyumluluk */
        @media (max-width: 900px) {
            .service-grid {
                grid-template-columns: 1fr;
            }

            .modal-box {
                padding: 30px 20px;
            }

            #modal-title {
                font-size: 1.5rem;
            }
        }

        /* =========================================
   HİZMETLER - KOYU GLASSMORPHISM (PREMIUM)
   ========================================= */
        .services-section.glass-dark-service {
            position: relative;
            padding: 120px 0;
            overflow: hidden;

            /* ARKA PLAN RESMİ */
            background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            /* Parallax Etkisi */
        }

        /* KOYU PERDE (Metinler Okunsun Diye) */
        .glass-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Lacivert ağırlıklı koyu filtre */
            background: linear-gradient(135deg, rgba(20, 30, 48, 0.95), rgba(10, 10, 15, 0.98));
            z-index: 1;
        }

        .services-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 2;
        }

        /* --- BAŞLIKLAR (KOYU MODA UYGUN) --- */
        .services-header.dark-mode {
            text-align: center;
            margin-bottom: 60px;
        }

        .services-header.dark-mode h2 {
            font-family: var(--font-stack);
            font-size: 3.5rem;
            color: #ffffff;
            /* Beyaz Başlık */
            margin-bottom: 15px;
            font-weight: 700;
        }

        .services-header.dark-mode p {
            font-family: 'Montserrat', sans-serif;
            color: #cfd8dc;
            /* Gümüş Gri (Okunaklı) */
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* --- SEKME BUTONLARI (Pills) --- */
        .glass-tabs {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .glass-btn {
            background: rgba(255, 255, 255, 0.05);
            /* Şeffaf */
            border: 1px solid rgba(255, 255, 255, 0.15);
            /* İnce Çerçeve */
            padding: 14px 30px;
            border-radius: 50px;
            color: #b0b0b0;
            /* Pasif Rengi */
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .glass-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border-color: #fff;
        }

        /* AKTİF BUTON (GOLD DETAYLI BEYAZ) */
        .glass-btn.active {
            background: #ffffff;
            color: #1a2a44;
            /* Marka Laciverti */
            border-color: #fff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        /* --- İÇERİK YAPISI --- */
        .glass-content {
            display: none;
            animation: fadeIn 0.6s ease;
        }

        .glass-content.active {
            display: grid;
            grid-template-columns: 40% 1fr;
            /* Sol Görsel - Sağ Grid */
            gap: 50px;
            align-items: start;
        }

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

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

        /* SOL GÖRSEL */
        .glass-visual {
            height: 450px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .glass-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.8s;
        }

        .glass-content:hover .glass-visual img {
            transform: scale(1.05);
        }

        .visual-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, #000 0%, transparent 100%);
            padding: 30px;
            color: #fff;
        }

        .visual-caption h3 {
            font-family: var(--font-stack);
            font-size: 2rem;
            margin-bottom: 5px;
        }

        .visual-caption span {
            color: #22d3ee;
            /* Gold */
            font-weight: 700;
            letter-spacing: 2px;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        /* --- KARTLAR GRID --- */
        .glass-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        /* KART TASARIMI (KOMPAKT & ŞIK) */
        .glass-card {
            background: rgba(255, 255, 255, 0.06);
            /* Çok hafif şeffaf */
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            transition: 0.3s;
            cursor: pointer;
            height: 100%;
            /* Fix: Equal Height */
            justify-content: space-between;
            /* Align content */
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-5px);
            border-color: rgba(59, 130, 246, 0.4);
            /* Gold Hover */
        }

        /* İkon Kutusu */
        .gc-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.4rem;
            transition: 0.3s;
        }

        .glass-card:hover .gc-icon {
            background: #3b82f6;
            /* Mavi Zemin */
            color: #ffffff;
            /* Beyaz İkon */
        }

        /* Kart Yazıları */
        .gc-info h4 {
            color: #fff;
            /* Başlık Beyaz */
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .gc-info p {
            color: #ccc;
            /* Açıklama Gri (Sırıtmaz) */
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0;
        }

        /* MOBİL */
        @media (max-width: 992px) {
            .glass-content.active {
                grid-template-columns: 1fr;
            }

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

            /* Mobilde tek sütun kartlar */
            .glass-visual {
                height: 250px;
                order: -1;
            }

            .services-header h2 {
                font-size: 2.5rem;
            }

            .glass-btn {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
        }

        /* =========================================
   VİZYON GALERİSİ (YAPI TÜRLERİ)
   ========================================= */
        .vision-gallery {
            padding: 100px 0;
            /* Koyu Hizmetler bölümünden ayrışması için AÇIK GRİ zemin */
            background-color: #f8fafc;
            /* Hafif kirli mavi/gri zemin */
            border-bottom: 1px solid #e0e0e0;
        }

        .gallery-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* Başlık */
        .gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .gallery-header h2 {
            font-family: var(--font-stack);
            font-size: 2.8rem;
            color: #1a2a44;
            /* Lacivert */
            margin-bottom: 10px;
            font-weight: 700;
        }

        .gallery-header p {
            font-family: 'Montserrat', sans-serif;
            color: #666;
            font-size: 1.1rem;
        }

        /* Buton */
        .btn-outline-navy {
            padding: 12px 35px;
            border: 2px solid #1a2a44;
            color: #1a2a44;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: 0.3s;
            font-family: 'Montserrat', sans-serif;
        }

        .btn-outline-navy:hover {
            background: #1a2a44;
            color: #fff;
        }

        /* Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            /* Default stretch behavior ensures equal height rows */
        }

        /* TABLET FIX: Switch to 2 columns earlier */
        @media (max-width: 1200px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Kart Tasarımı (Dergi Kapağı Gibi) */
        .vision-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            /* Çok hafif gölge, temiz dursun */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: 0.4s ease;
            cursor: default;
            height: 100%;
            /* Fix: Equal Height */
            display: flex;
            flex-direction: column;
        }

        .vision-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(26, 42, 68, 0.15);
            /* Hoverda lacivert gölge */
        }

        /* Resim Alanı */
        .vision-img {
            height: 300px;
            /* Görseller büyük, dikkat çekici */
            position: relative;
            overflow: hidden;
        }

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

        .vision-card:hover .vision-img img {
            transform: scale(1.1);
        }

        /* Resim Üzerindeki Etiket */
        .vision-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .img-tag {
            background: #fff;
            color: #1a2a44;
            padding: 6px 15px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Bilgi Alanı */
        .vision-info {
            padding: 30px;
            text-align: center;
            flex: 1;
            /* Push footer/bottom content if any */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .vision-info h3 {
            font-family: var(--font-stack);
            font-size: 1.4rem;
            color: #1a2a44;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .vision-info p {
            font-family: 'Montserrat', sans-serif;
            color: #777;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        /* MOBİL */
        @media (max-width: 900px) {
            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .gallery-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .vision-img {
                height: 250px;
            }
        }

        /* --- CTA CARD (Footer Colors) --- */
        .cta-section {
            position: relative;
            padding: 100px 80px;
            background-color: #f8fafc;
        }

        .cta-card {
            position: relative;
            border-radius: 30px;
            padding: 80px 60px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;

            /* Footer background */
            background:
                radial-gradient(800px 400px at 10% 20%, rgba(59, 130, 246, .15), transparent 50%),
                radial-gradient(800px 400px at 90% 80%, rgba(34, 211, 238, .10), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0b1220 100%);

            box-shadow: 0 30px 60px -10px rgba(15, 23, 42, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .cta-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
        }

        .cta-content h2 {
            /* Main Font Stack */
            font-family: var(--font-stack);
            font-size: 3rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 20px;
            letter-spacing: -1px;
            line-height: 1.1;
        }

        .cta-content p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
            line-height: 1.6;
        }

        .cta-action {
            position: relative;
            z-index: 2;
            flex-shrink: 0;
        }

        /* Matches Footer Accent (Blue/Cyan) */
        .btn-cta-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: linear-gradient(90deg, #3b82f6, #22d3ee);
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            padding: 20px 45px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
        }

        .btn-cta-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(34, 211, 238, 0.5);
            filter: brightness(1.1);
        }

        @media (max-width: 900px) {
            .cta-section {
                padding: 60px 20px;
            }

            .cta-card {
                flex-direction: column;
                text-align: center;
                padding: 50px 30px;
            }

            .cta-content {
                max-width: 100%;
            }

            .cta-content h2 {
                font-size: 2.2rem;
            }

            .btn-cta-primary {
                width: 100%;
                max-width: 300px;
            }
        }


        /* --- GLOBAL CONTACT FORM STYLES (From iletisim.html) --- */
        .glass-form-wrapper {
            position: relative;
            width: 100%;
            /* max-width is handled by container usually, but here we set it relative */
            background: rgba(15, 23, 42, 0.6);
            /* Dark Glass */
            backdrop-filter: blur(30px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }

        .form-header {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
            color: #fff;
            font-family: var(--font-stack, "SF Pro Display", sans-serif);
        }

        .input-group {
            position: relative;
            margin-bottom: 25px;
        }

        .modern-input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 0;
            color: #fff;
            font-size: 15px;
            font-family: var(--font-stack, "SF Pro Display", sans-serif);
            outline: none;
            transition: 0.3s;
        }

        .modern-input::placeholder {
            color: transparent;
        }

        .input-label {
            position: absolute;
            top: 10px;
            left: 0;
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            transition: 0.3s ease;
            font-size: 14px;
        }

        .modern-input:focus~.input-label,
        .modern-input:not(:placeholder-shown)~.input-label {
            top: -15px;
            font-size: 11px;
            color: #22d3ee;
            /* Brand Cyan */
        }

        .modern-input:focus {
            border-bottom-color: #22d3ee;
            /* Brand Cyan */
        }

        .submit-btn {
            background: #fff;
            color: #0f172a;
            border: none;
            padding: 15px 40px;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 1px;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            font-family: var(--font-stack, "SF Pro Display", sans-serif);
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
            background: #22d3ee;
            /* Brand Cyan */
        }

        .close-modal-btn {
            position: absolute;
            top: 40px;
            right: 40px;
            width: 36px;
            height: 36px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #0f172a;
            cursor: pointer;
            z-index: 1001;
            transition: 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .close-modal-btn:hover {
            background: #22d3ee;
            color: #fff;
            transform: rotate(90deg);
        }

        .fixed-side-btn {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .fixed-side-btn:hover {
            transform: translateY(-50%) translateX(-5px);
        }

        .efyuar-btn-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #3b82f6;
            color: white;
            padding: 15px 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        }

        .efyuar-btn-icon {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 14px;
            transform: rotate(180deg);
        }

        /* MODAL STYLES */
        .global-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(5px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .global-modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .global-modal-container {
            position: relative;
            width: 90%;
            max-width: 500px;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .global-modal-overlay.active .global-modal-container {
            transform: scale(1);
        }

        .close-modal-btn {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 30px;
            cursor: pointer;
            transition: 0.3s;
        }

        .close-modal-btn:hover {
            color: #22d3ee;
            transform: rotate(90deg);
        }

        .modal-form-wrapper {
            background: rgba(30, 41, 59, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px !important;
            border-radius: 20px;
        }

        /* --- STICKY SOCIAL ICONS STYLES --- */
        #sticky-social-icons-container {
            position: fixed;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 998;
        }

        #sticky-social-icons-container.alignment-left {
            left: 0;
            right: auto;
        }

        #sticky-social-icons-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #sticky-social-icons-container li a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: #0f172a;
            color: #fff;
            text-decoration: none;
            font-size: 20px;
            border-radius: 0 10px 10px 0;
            /* Semi rounded */
            transition: all 0.3s ease;
            box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            left: 0;
        }

        #sticky-social-icons-container.design-rounded li a {
            border-radius: 0 15px 15px 0;
        }

        /* Colors */
        .fab-fa-whatsapp i {
            color: #25D366;
        }

        .fab-fa-instagram i {
            color: #E1306C;
        }

        .fas-fa-envelope i {
            color: #22d3ee;
        }

        /* Hover Effects */
        #sticky-social-icons-container li a:hover {
            width: 60px;
            /* Slight expansion */
            padding-left: 10px;
            background: #fff;
        }

        #sticky-social-icons-container li a:hover .fab-fa-whatsapp i {
            color: #25D366;
        }

        #sticky-social-icons-container li a.fab-fa-whatsapp:hover {
            background: #25D366;
            color: white !important;
        }

        #sticky-social-icons-container li a.fab-fa-whatsapp:hover i {
            color: white;
        }

        #sticky-social-icons-container li a.fab-fa-instagram:hover {
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            color: white !important;
        }

        #sticky-social-icons-container li a.fab-fa-instagram:hover i {
            color: white;
        }

        #sticky-social-icons-container li a.fas-fa-envelope:hover {
            background: #22d3ee;
            color: white !important;
        }

        #sticky-social-icons-container li a.fas-fa-envelope:hover i {
            color: white;
        }

        /* --- TOAST NOTIFICATION (CENTER MODAL STYLE) --- */
        @media (max-width: 900px) {

            #sticky-social-icons-container,
            .fixed-side-btn {
                display: none !important;
            }
        }

        .premium-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            padding: 30px 40px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #fff;
            border: 2px solid #22d3ee;
            border-radius: 16px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
            z-index: 2147483647 !important;
            font-family: var(--font-stack);
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 20px;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            backdrop-filter: blur(30px);
            pointer-events: none;
            min-width: 320px;
        }

        .premium-toast.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            pointer-events: auto;
        }

        /* Dark overlay behind notification */
        .premium-toast::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        .premium-toast i {
            font-size: 20px;
            color: #22d3ee;
        }