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

    /* ── TEMA SİSTEMİ ──
       Varsayılan (data-theme henüz yokken veya ="dark") koyu tema burada
       tanımlı — eskisinden biraz "açılmış" (tam #000 değil) bir siyah
       kullanıyor. Açık tema :root[data-theme="light"] altında override
       ediliyor.

       Semantik roller (arka plan/metin/vurgu/kart/kenar/gölge) fiziksel
       renk isimleriyle eşleniyor — yeniden adlandırmak yerine (1300+ satırlık
       CSS'te devasa bir riskli refactor olurdu) burada rolleri açıkça
       belgeliyoruz:
         arka plan (birincil)  → --black     metin (birincil) → --white
         arka plan (yükseltilmiş) → --void   metin (ikincil)  → --grey
         arka plan (ikincil)   → --charcoal  metin (soluk)    → --grey-light
         kart yüzeyi           → --surface   vurgu / accent   → --green (+ --green-rgb)
         kenarlık              → --border    gölge/scrim      → --scrim-rgb

       --green-fill/--on-accent KASITLI olarak hiçbir temada override
       edilmiyor: dolgulu (solid) buton/rozet arka planları her zaman parlak
       yeşil + üzerinde koyu metin olmalı (bu ikili temadan bağımsız hep aynı
       kalmalı, aksi halde parlak yeşil zemin + temaya göre değişen metin
       rengi bazı kombinasyonlarda okunmaz hale gelirdi).

       Hero ve #services-scene DAHİL site genelindeki TÜM bölümler artık tam
       tema uyumlu: --black/--white/--green(-rgb)/--services-scene-bg gibi
       değişkenleri izliyor (bkz. #hero, .hero-wordmark, #hero-vignette,
       #bg-canvas/#hero-pcb-canvas opaklık kuralları ve
       scroll-animation.js#applyServicesSceneTheme). Yalnızca Services
       sahnesindeki 3D modellerin kendi malzeme renkleri (camsı koyu
       gövdeler + neon kenarlar) bilinçli olarak sabit bırakıldı — bu, iki
       temada da bir "prodüksiyon" görünümü sağlıyor. */
    :root {
      --black: #0D0E0F; --void: #16171A; --charcoal: #1C1D1F;
      --surface: #212224; --border: #2B2C2E; --green: #00FF66;
      --green-rgb: 0,255,102;
      --green-dim: #10B981; --green-glow: rgba(var(--green-rgb),0.15);
      --white: #F5F5F5; --grey: #949494; --grey-light: #6B6B6B;
      --danger: #FF5F56;
      --green-fill: #00FF66; --on-accent: #07160D;
      --modal-bg: rgba(20,21,23,.95);
      /* Önceden .55 opaklıkta idi — nav sabit (fixed) olduğundan altından
         kayan HER bölümün arka planıyla farklı oranda karışıyordu; --black
         (#0D0E0F) ile aynı renkte olan hero üzerinde sorunsuz görünse de,
         daha AÇIK bir yüzeyin (--surface #212224 gibi) altından geçerken o
         yüzeyi belirgin şekilde KOYULAŞTIRIP header'ı "sitenin geri
         kalanından daha koyu" gösteriyordu. Opaklığı artırmak nav'ı, altında
         ne olursa olsun --black'e yakın, TUTARLI tek bir tona sabitliyor. */
      --nav-bg: rgba(13,14,15,.88);
      --scrim-rgb: 0,0,0;
      --services-scene-bg: var(--black);
      --services-glass-bg: rgba(1,2,2,.4);
      /* ÖNCEDEN koyu temada .55/.92 opaklıkta siyahtı — #hero-vignette bu
         rengi imlecin bulunduğu noktayı merkez alan bir radial-gradient
         olarak çiziyor (bkz. main.js #initHeroPCB, --vx/--vy mousemove'da
         güncelleniyor). Sonuç: hero'nun büyük bölümü (merkez dışındaki her
         yer) bu koyu katmanla ekstra kararıyordu ve imlecin etrafında
         "dairesel bir parlama" gibi algılanan bir efekt oluşuyordu — hem de
         hero'nun ortalama koyuluğu, altında AYNI --black değerini opaksız
         kullanan #services-scene'den bariz şekilde farklı görünüyordu
         (kullanıcı geri bildirimi). Tamamen şeffaf yaparak hem imleç-takipli
         "parlama" hissini iptal ediyoruz hem de hero'yu services ile birebir
         aynı düz --black tonuna getiriyoruz. */
      --hero-vignette-edge: rgba(0,0,0,0);
      --hero-vignette-edge-strong: rgba(0,0,0,0);
      /* Aşağıdaki 5 değişken KASITLI olarak sadece burada (dark :root'ta),
         [data-theme="light"] altında TEKRAR tanımlanmıyor — çünkü fiziksel
         olarak temadan bağımsız olmaları gereken sabitler: gölgeler gerçek
         dünyada da her zaman "koyu" olur (bir kartın altındaki gölge açık
         temada beyaza dönmez), pencere-kontrolü noktaları (.t-dot) macOS'un
         evrensel kırmızı/sarı/yeşiliyle sabit tanınır, dolgulu marka butonu
         (--green-fill) zaten her temada aynı parlak yeşil kalıyor (bkz. üst
         yorum) — o yüzden hover tonu da sabit kalmalı. */
      --shadow-rgb: 0,0,0;
      --mask-opaque: #000;
      --green-fill-hover: #33ff88;
      --traffic-red: #FF5F56; --traffic-yellow: #FFBD2E; --traffic-green: #27C93F;
      --services-title-halo: rgba(0,0,0,.45);
      --font-head: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace;
      --font-display: 'Orbitron', 'Space Grotesk', sans-serif;
      --font-wordmark: 'Outfit', 'Space Grotesk', sans-serif;
    }
    :root[data-theme="light"] {
      /* --void ve --white önceden saf #FFFFFF/#16171A idi — büyük düz
         yüzeylerde (iletişim terminali, çerez bandı) saf beyaz parlak/"ışıldayan"
         hissi verirken, saf yakın-siyah metin de #F5F5F6 gövde üzerinde
         gereğinden sert bir kontrast yaratıyordu. İkisini de hafifçe
         yumuşatıyoruz — --surface kartlar için AYRICA saf beyaz kalıyor
         (gövdeden (--black) net şekilde ayrışması gereken tek yüzey bu). */
      --black: #F5F5F6; --void: #FAFAFA; --charcoal: #EFEFF1;
      --surface: #FFFFFF; --border: #DEDEE2; --green: #047857;
      --green-rgb: 5,150,105;
      --white: #1D1F23; --grey: #5B5D63; --grey-light: #9A9CA3;
      --danger: #B3261E;
      --scrim-rgb: 255,255,255;
      --services-scene-bg: var(--black);
      --services-glass-bg: rgba(255,255,255,.55);
      --hero-vignette-edge: rgba(30,32,30,.07);
      --hero-vignette-edge-strong: rgba(30,32,30,.16);
      --services-title-halo: rgba(255,255,255,.65);
      --modal-bg: rgba(255,255,255,.94);
      /* Önceden SAF beyazdı (255,255,255) — ama açık temada --black (sayfa
         gövde rengi) saf beyaz DEĞİL, hafif kırık beyaz #F5F5F6. Nav'ın saf
         beyaz olması, sitenin geri kalanından fark edilir şekilde daha
         PARLAK görünmesine yol açıyordu. --black'in kendi rgb'siyle
         (245,245,246) aynı tona çekip, yukarıdaki koyu tema mantığıyla
         simetrik şekilde opaklığı artırdık — tutarlı, "sitenin bir parçası"
         gibi duran bir header. */
      --nav-bg: rgba(245,245,246,.88);
    }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { background: var(--black); color: var(--white); font-family: var(--font-head); overflow-x: hidden; }
    main { overflow-x: hidden; }

    /* Custom imleç sadece gerçek fare + hover destekleyen cihazlarda çalışır —
       touch cihazlarda hem gereksiz hem de parmağın altında yanlış konumda
       "takılı" kalan bir noktaya dönüşüyordu, ayrıca mousemove dinleyicisi ve
       rAF döngüsü boşuna pil/performans tüketiyordu (bkz. main.js).
       `body { cursor:none }` TEK BAŞINA yetmiyordu: tarayıcının UA
       stylesheet'i <a>, <button>, <input> gibi etkileşimli elemanlara kendi
       `cursor` değerini (pointer/default) EXPLICIT olarak veriyor — bu,
       inherited none'dan daha spesifik olduğundan üzerine geliyor ve
       kartlar/linkler üzerinde gerçek sistem imleci sızıyordu. `*` ile TÜM
       elemanları (ve UA stylesheet'i) `!important` ile ezerek özel imlecin
       her zaman, her elemanda tek görünen imleç olmasını garanti ediyoruz. */
    @media (hover: hover) and (pointer: fine) {
      *, *::before, *::after { cursor: none !important; }
    }
    #cursor, #cursor-ring { display: none; }
    @media (hover: hover) and (pointer: fine) {
      #cursor, #cursor-ring { display: block; }
    }

    /* ── SİTE GENELİ FOCUS GÖRÜNÜRLÜĞÜ ──
       Tek yerden, marka rengiyle (yeşil) tutarlı klavye focus halkası.
       :focus-visible sayesinde sadece klavye ile gezinirken görünür,
       mouse tıklamasında tetiklenmez. */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* z-index geçmişi: önce 10000/10001 idi (tüm modallardan yüksek) — bir
       modal açıkken imleç halkasının içerik üzerinden geçip köşeleri
       "kesiyormuş" gibi görünmesi şikayeti üzerine geçici olarak TÜM
       modallardan (en yükseği team-modal-content: 9902) düşük yapılmıştı.
       Ama bu, hover:none !important sayesinde gerçek OS imlecinin zaten
       gizli olduğu bir sitede modal açıkken imlecin TAMAMEN görünmez olması
       gibi çok daha ciddi bir kullanılabilirlik sorunu yarattı (kullanıcı
       team-modal'da fare nerede göremiyordu). İmleç her zaman görünür
       olmalı — tüm modallardan yüksekte tutuluyor, en yüksek modalın
       (9902) hemen üzerinde. */
    #cursor { position:fixed; width:10px; height:10px; background:var(--green); border-radius:50%; pointer-events:none; z-index:9951; transform:translate(-50%,-50%); transition:width .2s,height .2s; mix-blend-mode:difference; }
    #cursor-ring { position:fixed; width:36px; height:36px; border:1px solid rgba(var(--green-rgb),0.5); border-radius:50%; pointer-events:none; z-index:9950; transform:translate(-50%,-50%); transition:width .25s,height .25s; }
    body:has(a:hover) #cursor, body:has(button:hover) #cursor { width:18px; height:18px; }
    body:has(a:hover) #cursor-ring, body:has(button:hover) #cursor-ring { width:54px; height:54px; }

    ::-webkit-scrollbar { width:3px; }
    ::-webkit-scrollbar-track { background:var(--black); }
    ::-webkit-scrollbar-thumb { background:var(--green); border-radius:2px; }

    /* ─── GİRİŞ ANİMASYONU (bkz. assets/js/intro.js) ───
       Tema/temayla ilgisiz, SABİT koyu bir sahne — nav'ın en yüksek
       z-index'inden (100) bile yukarıda durmalı ki tüm sayfayı (nav dahil)
       örtsün. #intro-mark-wrap'ın oranı (927:1314) bitechminilogo.png'nin
       gerçek piksel oranıyla BİREBİR aynı — bu sayede SVG çizimden rastere
       geçişte (crossfade) hiçbir distorsiyon/sıçrama olmuyor. Path'ler
       (intro-outline/intro-dot) potrace ile PNG'nin alfa kanalından
       çıkarılmış gerçek geometri — elle tahmin edilen bir yaklaşıklık
       değil, bu yüzden ince bir kontur çizgisi (stroke-width düşük) yeterli
       ve markayla birebir örtüşüyor. */
    #intro-splash { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; background:#050605; }
    #intro-mark-wrap { position:relative; height:min(26vh,220px); aspect-ratio:927/1314; will-change:transform; }
    #intro-mark, #intro-mark-raster { position:absolute; inset:0; width:100%; height:100%; }
    #intro-mark-raster { opacity:0; object-fit:contain; }
    /* #intro-mark'a stroke-dasharray/dashoffset SADECE JS ile (intro.js)
       path.getTotalLength() hesaplanarak verilebiliyor — o çalışana kadar
       tarayıcı bu path'leri varsayılan (dasharray yok = tamamen çizili)
       haliyle render ediyordu, bu da her yenilemede tam "b" şeklinin bir
       kare boyunca yanıp sönmesine yol açıyordu. JS path'leri gizleyip
       düzgün şekilde göstermeden ÖNCE grup baştan opacity:0 — hiçbir zaman
       yarı-hazır bir kare boyanmıyor. */
    #intro-mark { opacity:0; }
    #intro-outline, #intro-dot { fill:none; stroke:#00ff66; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
    /* transform:scale(0) BİLEREK burada yok (sadece opacity:0 var). CSS'ten
       gelen bir transform:scale(0), tarayıcının SVG için varsayılan
       transform-box:view-box kuralı yüzünden ikonun TÜMÜNÜN merkezini
       (463.5 657) origin sayar — intro.js'in GSAP'a verdiği svgOrigin ise
       noktanın KENDİ merkezini (617 342) hedefler. GSAP ilk tween'de
       "var olan" transform'u (CSS'ten miras) FARKLI bir origin ile
       yorumlayıp yeni svgOrigin'e geçince ikisi çakışıyor, matris SVG
       tuvalinin çok dışında (negatif) bir noktaya kayıyor — nokta ekranda
       sol üstten "uçarak gelmiş" gibi görünüyordu. Doğru başlangıç scale'i
       artık intro.js'te gsap.set() ile, aynı svgOrigin kullanılarak
       veriliyor — CSS ile GSAP hiç farklı origin'den başlamıyor. */
    #intro-dot { opacity:0; }
    @media (prefers-reduced-motion: reduce) {
      #intro-splash { display:none !important; }
    }

    /* nav'ın kendi arkaplanı yoktu (tamamen şeffaf), her zaman koyu bir sahne
       olan hero'nun üzerinde her zaman iyi görünüyordu — ama açık temada
       kullanıcı about/portfolio gibi AÇIK ARKAPLANLI bölümleri scroll
       ederken sabit (fixed) nav'ın altından kayan içerik beyaz metni
       "beyaz üstünde beyaz" yapıp okunmaz hale getirirdi. Buzlu cam
       (frosted glass) arkaplan + blur, altındaki içerik ne olursa olsun
       metnin her zaman okunur kalmasını garantiliyor. */
    nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:24px 40px; background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background-color .3s; }
    .nav-logo { display:flex; align-items:center; font-family:var(--font-head); font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--white); text-decoration:none; }
    /* Logo dosyasındaki yazı (BiTECH) koyu bir zemin için tasarlanmış açık
       renkli bir wordmark — açık temada nav-bg neredeyse beyaza döndüğünde
       (bkz. --nav-bg) kaybolurdu. Bu yüzden logo, sayfa temasından bağımsız
       SABİT koyu bir "chip" üzerinde gösteriliyor. */
    .nav-logo-mark { display:flex; align-items:center; background:#0d0e0f; border-radius:8px; padding:7px 14px; }
    .nav-logo-mark .nav-logo-fallback { color:#f5f5f5; }
    .nav-logo img { height:22px; width:auto; display:block; }
    .lang-toggle-btn { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--white); background:none; border:1px solid var(--border); border-radius:4px; padding:8px 14px; cursor:pointer; transition:border-color .2s,color .2s; }
    .lang-toggle-btn:hover { border-color:var(--green); color:var(--green); }
    .theme-toggle-btn { font-size:15px; line-height:1; background:none; border:1px solid var(--border); border-radius:4px; padding:7px 10px; cursor:pointer; transition:border-color .2s; }
    .theme-toggle-btn:hover { border-color:var(--green); }
    .nav-menu-btn { display:flex; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
    .nav-menu-btn span { display:block; width:26px; height:2px; background:var(--white); transition:transform .3s,opacity .3s,width .3s; }
    .nav-menu-btn span:nth-child(2) { width:18px; }
    .nav-menu-btn:hover span:nth-child(2) { width:26px; }

    /* Önceden opak (blursuz) var(--black) dolgu kullanıyordu — sitedeki diğer
       tüm katmanlar (nav, proje/ekip/gizlilik modalleri) frosted-blur +
       --scrim-rgb tabanlı yarı saydam bir scrim kullanırken menü tek başına
       düz/opak kalıp o tutarlı "cam" dilinden kopuyordu; --scrim-rgb zaten
       temaya göre (koyu=siyah/açık=beyaz) değiştiğinden bu, blur tonunu da
       otomatik olarak aktif temaya bağlıyor. */
    #menu-overlay { position:fixed; inset:0; background:rgba(var(--scrim-rgb),.86); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); z-index:90; display:flex; flex-direction:column; justify-content:center; padding:80px 40px 40px; opacity:0; pointer-events:none; transition:opacity .4s ease, background-color .3s; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    #menu-overlay.open { opacity:1; pointer-events:all; }
    .menu-link { font-size:clamp(2.5rem,7vw,6rem); font-weight:700; color:var(--white); text-decoration:none; display:block; line-height:1.1; padding:8px 0; transition:color .2s; border-bottom:1px solid var(--border); }
    .menu-link:hover { color:var(--green); }
    .menu-link .menu-link-num { font-family:var(--font-mono); font-size:.28em; color:var(--grey); vertical-align:middle; margin-right:12px; }

    /* Hero artık body/#services-scene ile AYNI --black değişkenini kullanıyor
       (önceden #0D0E0F olarak sabitti, #services-scene'in --services-scene-bg'si
       ise ayrı bir hardcoded #010202 taşıyordu — bu iki YAKIN AMA FARKLI koyu
       ton, Hero→Services sınırında gözle görülür bir "dikiş" (seam)
       yaratıyordu; tek kaynaktan (--black) beslenerek imkansız hale getirildi).
       Açık temada da artık gerçekten açık zemine geçiyor — vinyet/canvas
       opaklığı da tema bazlı ayrıca ayarlanıyor (bkz. #hero-vignette,
       #bg-canvas, #hero-pcb-canvas). */
    #hero { min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:120px 40px 80px; margin-bottom:0; position:relative; overflow:hidden; isolation:isolate; background:var(--black); transition:background-color .3s; }
    .hero-intro { max-width:480px; }
    .hero-intro p { font-size:clamp(1.1rem,2.2vw,1.45rem); font-weight:400; line-height:1.55; color:var(--white); letter-spacing:-.01em; }
    .hero-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--green); margin-bottom:24px; }
    .hero-badge::before { content:''; display:block; width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
    @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),0.5)} 50%{box-shadow:0 0 0 6px rgba(var(--green-rgb),0)} }

    /* Parçacık/PCB dekorları yeşil tonunu (JS'te sabit rgba(0,255,102,x))
       koruyor — renk şeması değil OPAKLIK ile temaya uyarlanıyor: koyu
       temada "hacker" estetiği için belirgin, açık temada ise kurumsal/göz
       yormayan bir doku olarak kalsın diye belirgin şekilde soluklaştırılıyor.
       #hero-pcb-canvas'ın opacity'si scroll'a göre main.js'te INLINE set
       ediliyor (fade-out efekti) — CSS'teki bir data-theme kuralı bunu
       ezemeyeceğinden, tema çarpanı da main.js#updateHeroPCBOpacity içinde,
       aynı inline atamanın parçası olarak uygulanıyor (bkz. main.js). */
    #hero-pcb-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block; pointer-events:none; transition:opacity .15s linear, transform .35s ease-out; will-change:transform; }
    #hero-vignette {
      position:absolute; inset:-5%; z-index:-1; pointer-events:none;
      --vx:50%; --vy:42%;
      background:radial-gradient(circle at var(--vx) var(--vy), transparent 0%, transparent 30%, var(--hero-vignette-edge) 72%, var(--hero-vignette-edge-strong) 100%);
      transition:background-position .2s ease-out, background .3s;
    }

    .typewriter-cursor { display:inline-block; width:.55em; height:1em; margin-left:2px; background:var(--green); vertical-align:text-bottom; animation:blinkCursor .9s step-end infinite; }
    @keyframes blinkCursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }

    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    .hero-wordmark { width:100%; overflow:hidden; margin-top:40px; }
    .wordmark-text { font-family:var(--font-wordmark); font-weight:900; font-size:clamp(1.7rem,8.6vw,8.6rem); line-height:1; letter-spacing:-2px; color:var(--white); white-space:nowrap; display:inline-block; transition:text-shadow .3s; }
    .wordmark-text:hover { text-shadow:0 0 30px rgba(var(--green-rgb),.35); }
    .wordmark-text .wm-dot { color:var(--green); text-shadow:0 0 24px rgba(var(--green-rgb),.8); }

    .t-dot { width:12px; height:12px; border-radius:50%; }
    .t-dot:nth-child(1){background:var(--traffic-red)} .t-dot:nth-child(2){background:var(--traffic-yellow)} .t-dot:nth-child(3){background:var(--traffic-green)}

    section { padding:120px 40px; max-width:1400px; margin:0 auto; }
    .section-eyebrow { font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
    .section-eyebrow::after { content:''; display:block; height:1px; width:40px; background:var(--green); }
    h1, h2 { font-family:var(--font-head); font-weight:700; line-height:1.05; letter-spacing:-.03em; }
    h2 { font-size:clamp(2.2rem,5vw,4rem); margin-bottom:64px; }

    #services { padding-top:80px; }
    .bento-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(220px,auto); gap:16px; }
    .bento-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:36px; display:flex; flex-direction:column; justify-content:space-between; transition:border-color .3s,box-shadow .3s,transform .3s; position:relative; overflow:hidden; }
    .bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 80%,rgba(var(--green-rgb),.06) 0%,transparent 60%); opacity:0; transition:opacity .4s; }
    .bento-card:hover { border-color:rgba(var(--green-rgb),.4); box-shadow:0 0 40px rgba(var(--green-rgb),.08); transform:translateY(-4px); }
    .bento-card:hover::before { opacity:1; }
    .bento-card:nth-child(1){grid-column:span 5} .bento-card:nth-child(2){grid-column:span 7}
    .bento-card:nth-child(3){grid-column:span 4} .bento-card:nth-child(4){grid-column:span 4} .bento-card:nth-child(5){grid-column:span 4}
    .bento-num { font-family:var(--font-mono); font-size:11px; color:var(--green); margin-bottom:32px; }
    .bento-title { font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:600; margin-bottom:12px; letter-spacing:-.02em; }
    .bento-desc { font-size:14px; color:var(--grey); line-height:1.65; }
    .bento-icon { font-size:3rem; margin-bottom:20px; filter:grayscale(1) brightness(2); transition:filter .3s; }
    .bento-card:hover .bento-icon { filter:none; }
    .bento-arrow { width:40px; height:40px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; align-self:flex-end; font-size:18px; transition:background .3s,border-color .3s,color .3s; }
    .bento-card:hover .bento-arrow { background:var(--green-fill); border-color:var(--green-fill); color:var(--on-accent); }

    #about { border-top:1px solid var(--border); }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    .about-stats { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
    .stat-card { padding:32px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
    .stat-num { font-size:clamp(2.5rem,4vw,3.5rem); font-weight:700; color:var(--green); font-family:var(--font-head); letter-spacing:-.04em; }
    .stat-label { font-size:13px; color:var(--grey); margin-top:6px; }
    .about-text h2 { margin-bottom:28px; }
    .about-text p { font-size:16px; color:var(--grey); line-height:1.8; margin-bottom:20px; }
    .about-text p strong { color:var(--white); }
    .btn-outline { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border:1px solid var(--green); color:var(--green); text-decoration:none; font-family:var(--font-mono); font-size:13px; border-radius:4px; margin-top:16px; transition:background .3s,color .3s; }
    .btn-outline:hover { background:var(--green-fill); color:var(--on-accent); }

    #portfolio { border-top:1px solid var(--border); overflow:hidden; }
    #portfolio-inner { padding:0 40px 48px; }

    #testimonials { border-top:1px solid var(--border); overflow:hidden; }
    #testimonials-inner { padding:0 40px 48px; }

    /* ── Referanslarımız (client logo marquee) ── */
    .clients-section { margin-bottom:0; }
    .clients-label { font-family:var(--font-mono); font-size:11px; color:var(--grey); letter-spacing:.15em; text-transform:uppercase; padding:0 40px; margin-bottom:24px; }
    .clients-marquee-wrap { width:100%; overflow:hidden; position:relative; }
    .clients-marquee-wrap::before, .clients-marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
    .clients-marquee-wrap::before { left:0; background:linear-gradient(to right,var(--black),transparent); }
    .clients-marquee-wrap::after { right:0; background:linear-gradient(to left,var(--black),transparent); }
    .clients-marquee-track { display:flex; align-items:center; gap:72px; width:max-content; padding:0 40px; will-change:transform; }
    /* brightness(1.8): logoları koyu zemin üzerinde görünür kılmak için
       aydınlatıyor — açık temada bu AYNI değer logoları beyaz zemin
       üzerinde neredeyse görünmez kılar (ışık temasında override edilir,
       bkz. aşağıda). */
    .client-logo { flex-shrink:0; height:40px; display:flex; align-items:center; justify-content:center; opacity:.55; filter:grayscale(1) brightness(1.8); transition:opacity .3s,filter .3s; }
    :root[data-theme="light"] .client-logo { filter:grayscale(1) brightness(.75); }
    .client-logo:hover { opacity:1; }
    .client-logo img { max-height:40px; max-width:160px; object-fit:contain; }
    .client-logo-fallback { font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--grey); letter-spacing:-.02em; white-space:nowrap; }

    /* ── Projelerimiz (kategori filtreli grid, 33+ kapasiteli) ── */
    #projects-inner { padding:0 40px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
    .projects-label { font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:.15em; text-transform:uppercase; }
    .projects-filters { display:flex; flex-wrap:wrap; gap:8px; }
    .filter-tab {
      font-family:var(--font-mono); font-size:12px; color:var(--grey);
      background:none; border:1px solid var(--border); border-radius:100px;
      padding:8px 16px; cursor:pointer; transition:border-color .2s,color .2s,background .2s;
    }
    .filter-tab:hover { color:var(--white); border-color:var(--grey-light); }
    .filter-tab.active { background:var(--green-fill); border-color:var(--green-fill); color:var(--on-accent); font-weight:600; }

    /* ── Proje slider'ı ──
       Grid yerine yatay scroll-snap: native touch swipe/trackpad kaydırma
       mobil ve masaüstünde ekstra JS/kütüphane gerektirmeden ücretsiz
       geliyor; ok butonları sadece hover destekleyen (masaüstü) cihazlarda
       gösteriliyor (bkz. main.js projectsSupportsHoverNav) — touch'ta zaten
       parmakla kaydırmak daha doğal, oklar sadece görsel gürültü olurdu. */
    .projects-slider-wrap { position:relative; }
    /* padding-top: overflow-x:auto tek başına set edildiğinde (overflow-y hiç
       belirtilmeden) CSS spesifikasyonu gereği overflow-y de örtük biçimde
       'auto'ya döner — yani bu container DİKEY taşmayı da kırpar. Üstte hiç
       boşluk yokken kart hover'da translateY(-6px) ile yukarı kalkınca (+
       box-shadow glow'u) container'ın üst kenarında KESİLİYORDU. Kaydırma
       ekseniyle aynı yönde olmayan bu kırpılmayı önlemek için lift+glow'a
       yetecek kadar üst boşluk ekliyoruz. */
    /* scroll-padding-left/right: scroll-snap-type:x mandatory AKTİFKEN
       container'ın kendi padding'i, "start" snap noktasını hesaba
       katmıyor — tarayıcı scrollLeft'i sanki padding hiç yokmuş gibi 0'a
       (veya sona) kilitliyor, bu yüzden ilk/son kart tuval kenarına
       yapışıp önceki/sonraki ok butonlarının (bkz. .projects-nav, sol/sağ
       6px) TAM ALTINA giriyor, metnin ilk karakterlerini gizliyordu. Bir
       çocuk elemente margin eklemek de ÇÖZMEDİ — scroll-snap-align:start
       margin kutusunu baz aldığından tarayıcı scrollLeft'i otomatik olarak
       margin kadar ileri kaydırıp aradaki boşluğu görünmez kılıyordu.
       Doğru/standart çözüm: padding değil scroll-padding — snap
       algoritmasına doğrudan "dinlenme konumunda bu kadar boşluk bırak"
       demek, container padding'iyle ÇAKIŞMIYOR. */
    .projects-grid {
      display:flex; gap:20px; padding:24px 40px 40px;
      scroll-padding-left:40px; scroll-padding-right:40px;
      overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .projects-grid::-webkit-scrollbar { display:none; }
    .project-card {
      background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px;
      transition:border-color .3s,box-shadow .3s,transform .3s,opacity .3s;
      display:flex; flex-direction:column; position:relative; overflow:hidden;
      flex:0 0 min(340px,80vw); scroll-snap-align:start;
    }
    .project-card.hidden { display:none; }
    .project-card:hover { border-color:rgba(var(--green-rgb),.35); box-shadow:0 0 40px rgba(var(--green-rgb),.08); transform:translateY(-6px); }

    .projects-nav {
      position:absolute; top:50%; transform:translateY(-50%); z-index:5;
      width:44px; height:44px; border-radius:50%;
      background:var(--surface); border:1px solid var(--border); color:var(--white);
      display:flex; align-items:center; justify-content:center;
      font-size:18px; cursor:pointer; transition:border-color .2s,color .2s,box-shadow .2s;
      box-shadow:0 8px 24px rgba(var(--shadow-rgb),.35);
    }
    .projects-nav:hover { border-color:var(--green); color:var(--green); }
    .projects-nav[disabled] { opacity:.3; cursor:default; pointer-events:none; }
    .projects-nav-prev { left:6px; }
    .projects-nav-next { right:6px; }
    .project-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
    .project-icon { font-size:2.4rem; line-height:1; filter:grayscale(.2); }
    .project-link-icon {
      width:34px; height:34px; flex-shrink:0; border:1px solid var(--border); border-radius:50%;
      display:flex; align-items:center; justify-content:center; color:var(--grey);
      text-decoration:none; font-size:14px; transition:border-color .2s,color .2s,background .2s;
    }
    .project-link-icon:hover { border-color:var(--green); color:var(--green); background:rgba(var(--green-rgb),.08); }
    .project-year { font-family:var(--font-mono); font-size:11px; color:var(--grey); }
    /* line-clamp: başlık/açıklama karakter sayısı dile göre değişiyor (İngilizce
       çeviriler çoğu zaman Türkçeden daha uzun) — sabit yükseklik olmadan bu,
       her kartın farklı satır sayısına taşıp (flex stretch yüzünden) TÜM
       satırdaki kartların dile göre boy değiştirmesine, hatta üstteki sabit
       konumlu ok butonlarının (bkz. .projects-nav, %50 dikey ortalanmış)
       uzayan açıklama metniyle çakışmasına yol açıyordu. 2/3 satırda sabit
       kesme ile kart yüksekliği dilden bağımsız hep aynı kalıyor. */
    .project-card-title {
      font-weight:600; font-size:18px; margin-bottom:10px; letter-spacing:-.01em;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .project-card-desc {
      font-size:13.5px; color:var(--grey); line-height:1.65; margin-bottom:20px; flex-grow:1;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .project-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .project-card-tag { display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:100px; font-size:11px; color:var(--green); font-family:var(--font-mono); }
    .project-detail-btn {
      background:none; border:none; color:var(--white); font-family:var(--font-mono); font-size:12px;
      cursor:pointer; display:flex; align-items:center; gap:6px; transition:color .2s;
    }
    .project-detail-btn:hover { color:var(--green); }

    /* ── Proje Detay Modalı ──
       ÖNCEDEN: görünürlük tek bir opacity geçişiyle DIŞ #project-modal
       sarmalayıcısında yönetiliyordu, #project-modal-bg (backdrop-filter'lı
       eleman) sadece onun İÇİNDEKİ bir çocuktu ve kendi opaklığını hiç
       taşımıyordu. Bir ANCESTOR'ın opacity'si geçiş halindeyken (0→1),
       tarayıcı o alt ağacı ayrı bir offscreen katmana render edip SONRA
       karıştırıyor — bu, İÇERİDEKİ backdrop-filter'ın örneklediği/oluşturduğu
       bulanıklığın ekip modalına (bkz. #team-modal-bg — kendi opaklığını
       DOĞRUDAN, bir ancestor'a bağlı olmadan taşıyor) göre daha "puslu/soluk"
       görünmesine yol açıyordu. Aynı düzeni burada da kuruyoruz: dış sarmalayıcı
       artık sadece pointer-events kapısı, blur'lu bg VE içerik kartı kendi
       opaklıklarını doğrudan taşıyor — netlik artık team-modal ile birebir aynı. */
    #project-modal { position:fixed; inset:0; z-index:9700; pointer-events:none; }
    #project-modal.open { pointer-events:all; }
    /* backdrop-filter KASITLI olarak kaldırıldı — kullanıcı isteği üzerine
       arkaplan artık ekip modalı gibi bulanıklaştırılmıyor, sadece
       koyulaştırılıyor (scrim). */
    #project-modal-bg {
      position:fixed; inset:0; z-index:9701; background:rgba(var(--scrim-rgb),.75);
      opacity:0; transition:opacity .3s ease, background-color .3s;
    }
    #project-modal.open #project-modal-bg { opacity:1; }
    /* scrollbar-width/-webkit-scrollbar: native scrollbar, border-radius'lu
       bir overflow:auto kutusunda Chromium'da köşeye göre kırpılmıyor —
       içerik (features/technologies/outcomes eklenince) max-height'ı aşınca
       scrollbar en üstte/altta yuvarlak köşenin dışına taşıp "karttan
       taşan bir çubuk" gibi görünüyordu. Aynı çözüm .projects-grid'de de
       kullanılıyor: scrollbar'ı tamamen gizleyip kaydırmayı wheel/touch/
       klavyeye bırakıyoruz — görsel taşma imkansız hale geliyor. */
    #project-modal-content {
      position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
      width:min(560px,92vw); max-height:82vh; overflow-y:auto; scrollbar-width:none;
      background:var(--modal-bg); border:1px solid rgba(var(--green-rgb),.2); border-radius:20px;
      padding:48px 44px; box-shadow:0 0 80px rgba(var(--green-rgb),.1), 0 40px 80px rgba(var(--shadow-rgb),.6);
      z-index:9702; opacity:0; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    }
    #project-modal.open #project-modal-content { transform:translate(-50%,-50%) scale(1); opacity:1; }
    #project-modal-content::-webkit-scrollbar { display:none; }
    #project-modal-close {
      position:absolute; top:20px; right:20px; width:40px; height:40px;
      background:var(--charcoal); border:1px solid rgba(var(--green-rgb),.3); border-radius:50%;
      display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:var(--white);
      transition:background .2s,border-color .2s,color .2s;
    }
    #project-modal-close:hover { background:rgba(var(--green-rgb),.12); border-color:var(--green); color:var(--green); }
    #project-modal-icon { font-size:3rem; margin-bottom:20px; }
    #project-modal-tag { font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
    #project-modal-title { font-family:var(--font-head); font-size:28px; font-weight:700; letter-spacing:-.02em; margin-bottom:16px; padding-right:40px; }
    #project-modal-desc { font-size:15px; color:var(--grey); line-height:1.75; margin-bottom:28px; }
    .project-modal-section { margin-bottom:28px; }
    .project-modal-section-label { font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
    .project-modal-section ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
    .project-modal-section ul li { position:relative; padding-left:20px; font-size:14px; color:var(--grey); line-height:1.6; }
    .project-modal-section ul li::before { content:"▸"; position:absolute; left:0; color:var(--green); }
    .project-modal-tech-chips { display:flex; flex-wrap:wrap; gap:8px; }
    .project-modal-tech-chip { font-family:var(--font-mono); font-size:12px; color:var(--white); background:rgba(var(--green-rgb),.1); border:1px solid rgba(var(--green-rgb),.25); border-radius:20px; padding:6px 14px; }
    #project-modal-link { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border:1px solid var(--green); color:var(--green); text-decoration:none; font-family:var(--font-mono); font-size:13px; border-radius:6px; transition:background .2s,color .2s; }
    #project-modal-link:hover { background:var(--green-fill); color:var(--on-accent); }

    #team { border-top:1px solid var(--border); }
    #team-inner { padding:0 40px 48px; }

    /* ── EKİP ŞERİDİ (sonsuz otomatik kayan carousel) ──
       Hareket main.js'te TEK bir JS rAF döngüsüyle sürülüyor (CSS @keyframes
       YOK) — bunun sebebi: önceki sürümde şeridin CSS animasyonu ile hover'da
       o an "canlı" değerini okuyup karta ters uygulayan ayrı bir JS mekanizması
       AYNI transform üzerinde iki farklı kaynaktan besleniyordu; ağır sayfa
       yükü (WebGL sahnesi, parçacık canvas'ı) altında bu iki kaynak senkron
       dışı kalıp kartların titremesine/zıplamasına yol açabiliyordu. Artık tek
       kaynak (main.js teamOffset) olduğundan bu yapısal olarak imkansız. */
    .team-marquee {
      position:relative; overflow-x:hidden; overflow-y:visible;
      padding:56px 0 76px;
      /* Yatay swipe main.js'teki pointer sürükleme koduna ait — burada
         touch-action:pan-y ile SADECE dikey sayfa scroll'u tarayıcıya
         bırakılıyor, yatay hareket tarayıcının kendi kaydırmasıyla
         yarışmadan doğrudan bizim koda gelsin diye. */
      touch-action: pan-y;
      /* Kartlar artık sürüklenerek kaydırılmıyor (bkz. team-scrollbar) —
         imleç bu yüzden grab/grabbing değil, sıradan pointer. */
      /* Kenarlarda sonsuz döngünün "dikişini" sert bir kesim yerine
         yumuşak bir fade ile gizler — hem daha zarif hem kenarda büyüyen
         bir kart aniden kırpılmış gibi görünmez. */
      -webkit-mask-image:linear-gradient(to right,transparent 0,var(--mask-opaque) 60px,var(--mask-opaque) calc(100% - 60px),transparent 100%);
      mask-image:linear-gradient(to right,transparent 0,var(--mask-opaque) 60px,var(--mask-opaque) calc(100% - 60px),transparent 100%);
    }
    .team-marquee-track {
      display:flex; gap:28px; width:max-content; padding:0 40px;
      will-change:transform;
    }

    /* DIŞ eleman: sadece şeridin akışını (ve hover'da ondan "bağımsızca"
       donma transform'unu) taşır — kendi görsel stili yok. Büyüme/kalkma
       görseli tamamen AYRI, İÇ .team-card-inner'da; ikisi hiçbir zaman aynı
       transform stringinde birleşmiyor. */
    .team-card { width:280px; flex:0 0 280px; position:relative; cursor:pointer; }
    /* NOT: pointer-events:none KULLANMA — kart bu geçiş penceresindeyken
       tıklamayı tamamen yok sayıp events'i team-marquee-track'e (boş şeride)
       düşürüyordu, delegated click handler orada kart bulamayıp popup'ı hiç
       açmıyordu (asıl "popup açılmıyor" regresyonunun kök sebebi buydu).
       Titreme koruması main.js'teki TEAM_ZOOM_END_DELAY + relatedTarget
       containment kontrolleriyle sağlanıyor; tıklanabilirlik hiçbir zaman
       kapatılmamalı. */
    .team-card.zoom-reset { transition:transform .4s cubic-bezier(.23,1,.32,1); }
    /* z-index BURADA (DIŞ .team-card'ta) şart: .team-card her zaman
       position:relative olduğundan tüm kardeşler zaten aynı stacking
       katmanında (z-index:auto) DOM sırasına göre boyanıyor. z-index'i
       sadece İÇ .team-card-inner'a koymak (aşağıdaki gibi) yetmez — o,
       DIŞ elemanın transform'unun oluşturduğu KENDİ stacking context'i
       içinde kalır, kardeş .team-card'lara göre hiçbir şey değiştirmez.
       Sonuç: büyüyen kart, DOM'da SONRA gelen bir komşusunun altında
       kalıp fare o örtüşen bölgede sahte bir mouseout tetikliyor ve
       hover ortasında "kayboluyor" gibi görünüyordu. */
    .team-card.zoomed { z-index:20; }

    .team-card-inner {
      background:var(--surface); border:1px solid var(--border); border-radius:16px;
      padding:32px 26px; box-sizing:border-box; height:100%;
      transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
    }
    .team-card.zoomed .team-card-inner {
      transform:scale(1.14) translateY(-16px);
      box-shadow:0 30px 70px rgba(var(--shadow-rgb),.55), 0 0 0 1px rgba(var(--green-rgb),.2);
      border-color:rgba(var(--green-rgb),.4);
    }
    .team-avatar { width:64px; height:64px; border-radius:50%; background:var(--charcoal); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:18px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
    .team-card.zoomed .team-avatar { transform:scale(1.12); border-color:rgba(var(--green-rgb),.4); }
    .team-name { font-size:17px; font-weight:600; margin-bottom:4px; }
    .team-role { font-size:12px; color:var(--green); font-family:var(--font-mono); margin-bottom:14px; }
    /* Kapalı halde 3 satıra kırpılır; kart büyüyünce (bkz. .zoomed) tam metin
       açılır — "tam bilgisi net görünsün" isteğinin karşılığı. */
    .team-bio {
      font-size:13.5px; color:var(--grey); line-height:1.6;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .team-card.zoomed .team-bio { -webkit-line-clamp:14; color:var(--white); }
    .team-links { display:flex; gap:10px; margin-top:18px; }
    .team-link { width:30px; height:30px; border:1px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--grey); }

    /* ── EKİP ŞERİDİ İNCE NEON SCROLLBAR ──
       Gerçek native scrollbar değil — main.js'teki tek doğruluk kaynağı
       teamOffset'i okuyup thumb'ı konumlayan/boyutlandıran custom bir track.
       Sürüklenince (main.js) autoplay durur ve teamOffset'i doğrudan sürer;
       otomatik akışla aynı transform kaynağını paylaştığından asla senkron
       dışı kalamaz. */
    .team-scrollbar {
      position:relative; height:4px; margin:0 40px; border-radius:100px;
      background:var(--border); cursor:pointer; touch-action:pan-y;
      -webkit-user-select:none; user-select:none;
      transition:background-color .3s;
    }
    .team-scrollbar-thumb {
      position:absolute; top:0; left:0; height:100%; border-radius:100px;
      background:var(--green);
      box-shadow:0 0 8px rgba(var(--green-rgb),.9), 0 0 18px rgba(var(--green-rgb),.55);
      transition:box-shadow .2s ease;
      will-change:transform, width;
    }
    .team-scrollbar:hover .team-scrollbar-thumb,
    .team-scrollbar.active .team-scrollbar-thumb {
      box-shadow:0 0 12px rgba(var(--green-rgb),1), 0 0 26px rgba(var(--green-rgb),.75);
    }

    /* ── TEAM MODAL — RACE-CONDITION-FREE ──
       Bu, sitedeki en yüksek z-index katmanı: diğer iki modal (proje 9700-9702,
       gizlilik 9800-9802) ile kesinlikle çakışmasın diye ayrı bir üst kademe
       (9900-9902) kullanılıyor — hiçbir kart veya sayfa öğesi bunun önüne geçemez. */
    #team-modal {
      position: fixed;
      inset: 0;
      z-index: 9900;
      pointer-events: none;
      clip-path: circle(0% at 50% 50%);
    }
    #team-modal.open {
      pointer-events: all;
    }
    #team-modal-bg {
      position: fixed;
      inset: 0;
      z-index: 9901;
      background: rgba(var(--scrim-rgb),.82);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      transition: background-color .3s;
      opacity: 0;
      /* Never capture pointer events — card hover tracking works via global coords;
         click-to-close on this overlay is handled via a document-level click
         listener in main.js (a click that lands outside #team-modal-content). */
      pointer-events: none;
    }
    #team-modal-content {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) scale(0.92);
      width: min(520px, 92vw);
      max-height: 86vh;
      overflow-y: auto;
      background: var(--modal-bg);
      border: 1px solid rgba(var(--green-rgb),.2);
      border-radius: 24px;
      padding: 48px 44px 40px;
      box-shadow: 0 0 80px rgba(var(--green-rgb),.12), 0 40px 80px rgba(var(--shadow-rgb),.6);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      z-index: 9902;
    }
    #team-modal-content::before { content:''; position:absolute; inset:0; border-radius:24px; background:radial-gradient(ellipse at 30% 20%,rgba(var(--green-rgb),.07) 0%,transparent 60%); pointer-events:none; }
    .modal-avatar { width:84px; height:84px; border-radius:50%; background:var(--charcoal); border:2px solid rgba(var(--green-rgb),.3); display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin-bottom:24px; box-shadow:0 0 24px rgba(var(--green-rgb),.15); }
    .modal-name { font-size:26px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px; }
    .modal-role { font-family:var(--font-mono); font-size:12px; color:var(--green); margin-bottom:20px; letter-spacing:.08em; }
    .modal-bio { font-size:15px; color:var(--grey); line-height:1.75; margin-bottom:28px; }
    .modal-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
    .modal-tag { padding:5px 12px; border:1px solid var(--border); border-radius:100px; font-family:var(--font-mono); font-size:10px; color:var(--grey); letter-spacing:.1em; }
    .modal-links { display:flex; gap:12px; }
    .modal-link { padding:10px 20px; border:1px solid var(--border); border-radius:6px; font-family:var(--font-mono); font-size:12px; color:var(--grey); text-decoration:none; transition:border-color .2s,color .2s; }
    .modal-link:hover { border-color:var(--green); color:var(--green); }
    .modal-divider { height:1px; background:var(--border); margin:24px 0; }

    #modal-close {
      /* Was top:-20px/right:-20px (half outside the card) which got clipped
         by #team-modal-content's overflow-y:auto — kept fully inside the
         card bounds instead so it can never be cut off. */
      position: absolute; top: 20px; right: 20px;
      width: 44px; height: 44px;
      background: var(--charcoal);
      border: 1px solid rgba(var(--green-rgb),.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 18px; color: var(--white);
      transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
      z-index: 10;
    }
    #modal-close:hover { background:rgba(var(--green-rgb),.12); border-color:var(--green); color:var(--green); box-shadow:0 0 20px rgba(var(--green-rgb),.25); }

    #contact { border-top:1px solid var(--border); }
    .contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; }
    .contact-info h2 { margin-bottom:24px; }
    .contact-info p { font-size:16px; color:var(--grey); line-height:1.75; margin-bottom:40px; }
    .contact-detail { display:flex; flex-direction:column; gap:16px; }
    .contact-item { display:flex; align-items:center; gap:14px; font-size:14px; }
    .contact-item-icon { width:36px; height:36px; background:var(--surface); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .contact-item-label { font-family:var(--font-mono); font-size:11px; color:var(--grey); }
    .contact-item-val { font-size:14px; color:var(--white); }
    /* WhatsApp satırı — diğer contact-item'ler düz div, bu tek başına tıklanabilir
       bir <a>; ikon dahil TÜM satır hedef alanına dahil (sadece metin değil).
       Hover dili sitedeki diğer kartlarla aynı: yeşil border-glow + hafif kayma. */
    .contact-item-link { text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s ease; }
    .contact-item-link:hover { transform:translateX(4px); }
    .contact-item-link:active { transform:translateX(2px) scale(.98); }
    .contact-item-link:hover .contact-item-icon,
    .contact-item-link:focus-visible .contact-item-icon { border-color:var(--green); box-shadow:0 0 20px rgba(var(--green-rgb),.25); }
    .contact-item-link:hover .contact-item-val,
    .contact-item-link:focus-visible .contact-item-val { color:var(--green); }
    .terminal-form { background:var(--void); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
    .terminal-form-bar { background:var(--charcoal); padding:14px 20px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); }
    .terminal-form-body { padding:32px; }

    /* ── Hizmet Talebi / Genel İletişim seçici (segmented control) ── */
    .form-type-toggle { display:flex; gap:4px; background:var(--black); border:1px solid var(--border); border-radius:8px; padding:4px; margin-bottom:24px; }
    .form-type-btn {
      flex:1; background:none; border:none; border-radius:6px; padding:10px 12px;
      font-family:var(--font-mono); font-size:12px; color:var(--grey); letter-spacing:.02em;
      cursor:pointer; transition:background .2s,color .2s;
    }
    .form-type-btn:hover { color:var(--white); }
    .form-type-btn.active { background:var(--green-fill); color:var(--on-accent); font-weight:600; }

    .form-field { margin-bottom:20px; }
    .form-label { font-family:var(--font-mono); font-size:11px; color:var(--green); margin-bottom:8px; display:block; }
    .form-input,.form-textarea { width:100%; background:var(--black); border:1px solid var(--border); border-radius:6px; padding:14px 16px; color:var(--white); font-family:var(--font-mono); font-size:13px; outline:none; transition:border-color .2s,box-shadow .2s; }
    .form-input:focus,.form-textarea:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(var(--green-rgb),.1); }
    .form-textarea { resize:vertical; min-height:120px; }
    .form-submit { width:100%; padding:16px; background:var(--green-fill); color:var(--on-accent); border:none; border-radius:6px; font-family:var(--font-mono); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s,transform .1s; display:flex; align-items:center; justify-content:center; gap:10px; }
    .form-submit:hover { background:var(--green-fill-hover); }
    .form-submit:active { transform:scale(.98); }

    footer { border-top:1px solid var(--border); padding:48px 40px; display:flex; align-items:center; justify-content:space-between; max-width:100%; }
    .footer-logo { display:flex; align-items:center; font-family:var(--font-head); font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--white); text-decoration:none; }
    .footer-logo img { height:20px; width:auto; display:block; }
    .footer-copy { font-family:var(--font-mono); font-size:11px; color:var(--grey); }
    .footer-links { display:flex; gap:24px; }
    .footer-link { font-size:13px; color:var(--grey); text-decoration:none; transition:color .2s; }
    .footer-link:hover { color:var(--green); }

    .reveal { opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    #bg-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35; }
    /* Parçacıklar JS'te sabit yeşil renkte çiziliyor (main.js) — açık
       zeminde aynı opaklıkta kalırsa daha göze batar, o yüzden ışık
       temasında belirgin şekilde soluklaştırılıyor. */
    :root[data-theme="light"] #bg-canvas { opacity:.12; }

    @media(max-width:768px){
      nav{padding:20px 24px} section{padding:80px 24px} #hero{padding:100px 24px 40px}
      #menu-overlay{justify-content:flex-start;padding:100px 24px 260px}
      .bento-grid{grid-template-columns:1fr} .bento-card:nth-child(n){grid-column:span 1}
      .about-grid{grid-template-columns:1fr;gap:48px} .about-stats{grid-template-columns:1fr 1fr}
      .contact-grid{grid-template-columns:1fr;gap:48px}
      footer{flex-direction:column;gap:20px;text-align:center} .footer-links{justify-content:center}
      #team-modal-content{padding:36px 28px 32px}
      #modal-close{top:16px;right:16px}
      .team-card{width:240px;flex-basis:240px}
      .team-card-inner{padding:26px 22px}
      .team-marquee{-webkit-mask-image:linear-gradient(to right,transparent 0,var(--mask-opaque) 24px,var(--mask-opaque) calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,var(--mask-opaque) 24px,var(--mask-opaque) calc(100% - 24px),transparent 100%)}
      #portfolio-inner,#projects-inner,#testimonials-inner,#team-inner{padding-left:24px;padding-right:24px}
      /* Mobilde kartların kendisi zaten doğrudan parmakla sürüklenebiliyor
         (bkz. main.js teamTrack pointer sürükleme) — ince neon scrollbar
         asıl masaüstü fare kullanıcıları için düşünülmüştü, dar ekranda
         gereksiz bir ekstra kontrol/dokunma hedefi oluyordu. */
      .team-scrollbar{display:none}
      .projects-grid{padding:20px 24px 24px; scroll-padding-left:24px; scroll-padding-right:24px}
      .projects-nav{display:none}
      #cookie-banner{flex-direction:column;align-items:flex-start;padding:20px 24px}
      #cookie-actions{width:100%;justify-content:space-between}
      #privacy-modal-content{padding:36px 24px}
    }
    @media(max-width:480px){
      .about-stats{grid-template-columns:1fr}
      .wordmark-text{font-size:clamp(1.4rem,8.2vw,8.6rem);letter-spacing:-1px}
    }

    /* ── prefers-reduced-motion ──
       Siteye özgü sürekli CSS animasyonları (cyber-grid kayması, hero-badge
       nabız, typewriter imleç yanıp sönmesi, reveal geçişleri, hover
       transition'ları) hareket duyarlılığı olan kullanıcılar için önceden
       HİÇBİR ŞEKİLDE devre dışı bırakılmıyordu — WCAG 2.3.3'ün beklediği
       "isteğe bağlı azaltılmış hareket" desteği eksikti. Süreleri neredeyse
       sıfıra indirip iterasyonu 1'e sabitlemek, öğeleri aniden "zıplatmadan"
       (display:none gibi sert bir kesintiye gitmeden) hareketi etkin biçimde
       kaldırıyor. JS tarafındaki sürekli rAF döngüleri (parçacıklar, ekip/
       referans şeridi, hero PCB, 3D sahne) ayrıca kendi
       matchMedia('(prefers-reduced-motion: reduce)') kontrollerini taşır. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

/* ══════════════════════════════════════════════════════════
   SERVICES 3D SCROLL SCENE (Three.js + GSAP ScrollTrigger)
   Migrated from tt.html. Scoped to #services-scene so it can
   never bleed into the rest of the site's design.
══════════════════════════════════════════════════════════ */
:root {
  --accent: #00ff66;
  --accent-rgb: 0, 255, 102;
}

#services-scene { font-family: 'Inter', sans-serif; }

/* 3D objeler panel geçişlerinde ekranın her yerine uçabiliyor; metin
   panelinin arka planı onları "kesmesin" diye şeffaflaştırıyoruz, ve
   panel'in kendisi tıklama/sürükleme olaylarını canvas'a geçirsin diye
   pointer-events kapatıyoruz (panellerde zaten tıklanabilir öğe yok). */
#services-scene .panel { pointer-events: none; }
/* Sahnenin "zemini" artık tema değişkenini izliyor — WebGL canvas'ın kendisi
   şeffaf render ediliyor (bkz. scroll-animation.js renderer.setClearColor),
   bu yüzden gerçek arka plan rengini BU div belirliyor. */
#canvas-wrapper { z-index: 1; background: var(--services-scene-bg); transition: background-color .3s; }
#text-container { z-index: 10; }

/* Vinyet: merkezden kenarlara doğru sahne rengine karışan radial gradient —
   önceden #010202'ye sabitti (index.html'de inline Tailwind arbitrary value),
   artık --services-scene-bg'yi okuduğundan tema değişince otomatik senkron. */
#services-scene .services-vignette {
  background: radial-gradient(circle at center, transparent 30%, var(--services-scene-bg) 100%);
}

/* Arka Plan Derinlik Izgarası */
#services-scene .cyber-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.5) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(600px) rotateX(60deg) translateY(-100px) translateZ(-250px);
  animation: gridMove 30s linear infinite;
  transition: background-image 0.8s;
}
/* Açık temada aynı opaklık, koyu zemine göre ayarlandığından soluk kalıyordu
   (yeşilin açık zemin üzerindeki algısal kontrastı daha düşük) — görsel
   ağırlığı iki temada da eşitlemek için hafifçe artırıyoruz. */
:root[data-theme="light"] #services-scene .cyber-grid { opacity: 0.14; }
@keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 80px; } }

/* Yazı Geçiş Efektleri */
#services-scene .panel-content {
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0; transform: translateY(40px) scale(0.95);
}
#services-scene .panel.active .panel-content { opacity: 1; transform: translateY(0) scale(1); }

/* Panel başlık/açıklama metinleri index.html'de hardcoded Tailwind
   text-white/text-zinc-400 taşıyordu — ID+class özgüllüğü (bu selektörler)
   o utility class'lardan daha spesifik olduğundan onları ezip tema
   değişkenlerine bağlıyoruz. Metin, masaüstünde (glass-card'ın kapalı
   olduğu lg breakpoint) doğrudan hareketli 3D sahnenin üzerinde durduğundan,
   okunabilirliği her iki temada da korumak için hafif bir text-shadow
   ekliyoruz — --services-title-halo koyu temada siyaha, açık temada beyaza
   doğru gölge verir (bkz. :root tanımları), bu yüzden burada TEK bir kural
   yeterli, ayrı bir [data-theme="light"] override'ına gerek yok. */
#services-scene .panel-content h2 {
  color: var(--white);
  text-shadow: 0 2px 22px var(--services-title-halo);
  transition: color .3s, text-shadow .3s;
}
#services-scene .panel-content p {
  color: var(--grey);
  transition: color .3s;
}

#services-scene .accent-line {
  display: block; width: 0; height: 2px;
  background: var(--accent);
  margin-top: 20px;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, background 0.8s;
}
#services-scene .panel.active .accent-line { width: 60px; }

/* Mobil Uyumluluk İçin Cam Kart (Glassmorphism)
   Not: opaklık bilerek düşük tutuluyor — panel geçişlerinde uçuşan 3D
   parçaların bu kartın arkasında "kesilmiş" görünmesini engellemek için. */
#services-scene .glass-card {
  background: var(--services-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  border-left: 1px solid rgba(var(--accent-rgb), 0.1);
  pointer-events: auto;
  transition: background-color .3s;
}

/* ══════════════════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════════════════ */
#cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9500;
  background: var(--void);
  border-top: 1px solid rgba(var(--green-rgb),.25);
  box-shadow: 0 -20px 60px rgba(var(--shadow-rgb),.6);
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
#cookie-banner.hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
#cookie-message { font-size: 13.5px; color: var(--grey); line-height: 1.6; max-width: 640px; }
#cookie-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-link-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--grey);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.cookie-link-btn:hover { color: var(--green); }
.cookie-btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  padding: 11px 22px; border-radius: 6px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.cookie-btn-outline { background: none; border: 1px solid var(--border); color: var(--white); }
.cookie-btn-outline:hover { border-color: var(--grey-light); }
.cookie-btn-solid { background: var(--green-fill); border: 1px solid var(--green-fill); color: var(--on-accent); font-weight: 600; }
.cookie-btn-solid:hover { background: var(--green-fill-hover); }

/* ══════════════════════════════════════════════════════════
   PRIVACY MODAL
══════════════════════════════════════════════════════════ */
#privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#privacy-modal.open { opacity: 1; pointer-events: all; }
#privacy-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 9801;
  background: rgba(var(--scrim-rgb),.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color .3s;
}
#privacy-modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.96);
  width: min(680px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 1px solid rgba(var(--green-rgb),.2);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: 0 0 80px rgba(var(--green-rgb),.1), 0 40px 80px rgba(var(--shadow-rgb),.6);
  z-index: 9802;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
#privacy-modal.open #privacy-modal-content { transform: translate(-50%,-50%) scale(1); }
#privacy-modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px;
  background: var(--charcoal);
  border: 1px solid rgba(var(--green-rgb),.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--white);
  transition: background .2s, border-color .2s, color .2s;
}
#privacy-modal-close:hover { background: rgba(var(--green-rgb),.12); border-color: var(--green); color: var(--green); }
#privacy-modal-title { font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; padding-right: 40px; }
#privacy-modal-updated { font-family: var(--font-mono); font-size: 11px; color: var(--grey); margin-bottom: 28px; }
.privacy-section { margin-bottom: 22px; }
.privacy-section-heading { font-family: var(--font-mono); font-size: 12px; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.privacy-section-body { font-size: 14.5px; color: var(--grey); line-height: 1.75; }