/* ════════════════════════════════════════════════════════════
   GÖZDE ÇEVRE — HAREKET KATMANI (gc-hareket.css)
   Mevcut stilleri EZMEZ; yalnızca üzerine hareket/derinlik ekler.
   Eşi:  gc-hareket.js
   Tüm sayfalarda aynı dosya kullanılır.
   ════════════════════════════════════════════════════════════ */

/* ── 0. Sayfa geçişi (View Transitions API) ───────────────── */
@view-transition { navigation: auto; }

@keyframes gc-vt-cikis{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes gc-vt-giris{ from{ opacity:0; transform:translateY(14px) } }

::view-transition-old(root){ animation:gc-vt-cikis .26s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:gc-vt-giris .42s cubic-bezier(0,0,.2,1) both }


/* ── 1. Okuma ilerlemesi çubuğu ───────────────────────────── */
.gc-ilerleme{
  position:fixed; top:0; left:0; height:2px; width:100%;
  z-index:400; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--petrol,#0E7C86),var(--petrol-parlak,#22C3D0) 55%,#7DFF3A);
  box-shadow:0 0 12px -2px rgba(34,195,208,.8);
}


/* ── 2. Giriş animasyonu başlangıç durumu ─────────────────── */
/* Sınıf JS tarafından eklenir → JS yoksa içerik normal görünür. */
.gc-gizli{ opacity:0 }


/* ── 3. 3B kart davranışı ─────────────────────────────────── */
/* Sarmalayıcıya perspektif; karta preserve-3d.              */
.gc-3d-alan{ perspective:1100px; perspective-origin:50% 50% }

.gc-kart{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .35s cubic-bezier(.2,.7,.3,1), border-color .35s;
}

/* İmleç ışığı (spotlight) — kartın üstünde yumuşak bir hale */
.gc-kart::before{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(
    460px circle at var(--gc-mx,50%) var(--gc-my,50%),
    rgba(34,195,208,.16), rgba(34,195,208,.05) 38%, transparent 62%);
}
.gc-kart[data-gc-isik="1"]::before{ opacity:1 }

/* Koyu zeminli kartlarda ışık amber tarafa kayar */
.gc-kart.gc-kart--koyu::before{
  background:radial-gradient(
    460px circle at var(--gc-mx,50%) var(--gc-my,50%),
    rgba(222,146,38,.18), rgba(34,195,208,.07) 40%, transparent 64%);
}

/* Kart içeriği ışığın üstünde kalsın */
.gc-kart > *{ position:relative; z-index:2 }

/* Kenar parıltısı — hover'da beliren ince gradyan çerçeve */
.gc-kart::after{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(34,195,208,.9), rgba(125,255,58,.35) 45%, rgba(222,146,38,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.gc-kart[data-gc-isik="1"]::after{ opacity:1 }

/* Hover'da yükselme gölgesi (açık zemin) */
.gc-kart[data-gc-isik="1"]{
  box-shadow:0 26px 54px -26px rgba(10,58,72,.55), 0 6px 18px -12px rgba(10,58,72,.35);
}
.gc-kart.gc-kart--koyu[data-gc-isik="1"]{
  box-shadow:0 26px 60px -26px rgba(0,0,0,.75), 0 0 34px -14px rgba(34,195,208,.45);
}

/* Kart içinde daha derin duran öğeler (Z ekseninde öne çıkar) */
.gc-kart .gc-z{ transform:translateZ(26px) }
.gc-kart .gc-z-az{ transform:translateZ(12px) }


/* ── 4. Kart süsleri (tüm sayfalarda ortak) ───────────────── */
.hizmet,.dkart,.duyuru{ overflow:hidden }

/* Üstten akan tarama çizgisi — kartın kendi rengini kullanır */
.gc-kart .gc-tarama{
  position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,transparent,
    var(--kart-renk,var(--petrol-parlak,#22C3D0)),transparent);
  transform:translateX(-100%); opacity:0; z-index:3; pointer-events:none;
}
.gc-kart[data-gc-isik="1"] .gc-tarama{ animation:gc-tara 1.1s cubic-bezier(.3,.7,.3,1) }
@keyframes gc-tara{
  0%{ transform:translateX(-100%); opacity:0 }
  22%{ opacity:1 }
  100%{ transform:translateX(100%); opacity:0 }
}

/* Parametre etiketleri hover'da sırayla canlanır */
.hizmet .parametreler span{ transition:background .25s, border-color .25s, color .25s, transform .25s }
.hizmet[data-gc-isik="1"] .parametreler span{
  background:#E4F2F3; border-color:var(--petrol,#0E7C86); color:var(--petrol-koyu,#0A5A62);
}

/* "Detaylı kapsam →" okunun kayması */
.hizmet a.devam,.tumu,.dkart .detay-git{ transition:color .2s }
.gc-ok{ display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.3,1) }
.hizmet:hover a.devam .gc-ok,
.tumu:hover .gc-ok,
.dkart[data-gc-isik="1"] .detay-git .gc-ok{ transform:translateX(6px) }


/* ── 5. Üst şeridin dolması (duyuru tipi kartlar) ─────────── */
.sd,.duyuru{ position:relative; overflow:hidden }
.gc-kart .gc-serit{
  position:absolute; left:0; top:-3px; height:3px; width:100%;
  background:linear-gradient(90deg,
    var(--kart-renk,var(--petrol-parlak,#22C3D0)),#7DFF3A);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.8,.3,1); z-index:3;
}
.gc-kart[data-gc-isik="1"] .gc-serit{ transform:scaleX(1) }


/* ── 6. Galeri kartı — Flip geçişi için hazırlık ──────────── */
.medya{ transform-style:preserve-3d }
.medya img{ transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.medya[data-gc-isik="1"] img{ transform:scale(1.06) }
/* Flip sırasında orijinal kart görünmez kalır */
.medya.gc-flip-kaynak{ visibility:hidden }

/* Işık kutusu artık yumuşak açılır */
.isik-kutu{ opacity:0; transition:opacity .3s ease }
.isik-kutu.acik{ opacity:1 }
.isik-medya{ will-change:transform }


/* ── 7. Akreditasyon kutuları ─────────────────────────────── */
.akredit .kutu{ position:relative; transition:background .3s, transform .3s }
.akredit .kutu[data-gc-isik="1"]{ background:var(--kagit,#fff) }
.akredit .kutu .kod{ transition:color .3s }
.akredit .kutu[data-gc-isik="1"] .kod{ color:var(--petrol-parlak,#22C3D0) }


/* ── 8. Mıknatıslı butonlar ───────────────────────────────── */
.gc-miknatis{ position:relative; will-change:transform }
.gc-miknatis > .gc-miknatis-ic{ display:block; will-change:transform }


/* ── 9. Hero başlık — satır/kelime maskeleme ──────────────── */
.gc-satir{ display:block; overflow:hidden }
.gc-kelime{ display:inline-block; will-change:transform }


/* ── 10. Bölüm başlığı çizgisinin çizilmesi ───────────────── */
/* JS, --gc-cizgi-w değişkenini 0 → 34px tweenler. Değişken yoksa
   (JS kapalı) 34px varsayılanıyla mevcut görünüm korunur. */
.gc-aktif .gozkas::before{ width:var(--gc-cizgi-w,34px) }


/* ── 11. Hero rozetleri — float animasyonu GSAP'e devredildi ─ */
.gc-aktif .rozet--1,
.gc-aktif .rozet--2,
.gc-aktif .rozet--3{ animation:none !important }


/* ── 12. Lenis yumuşak kaydırma gereksinimleri ────────────── */
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }


/* ── 13. Dokunmatik / azaltılmış hareket ──────────────────── */
@media (hover:none){
  .gc-kart::after{ display:none }
  .gc-kart{ transform:none !important }
}

@media (prefers-reduced-motion:reduce){
  .gc-ilerleme{ display:none }
  .gc-gizli{ opacity:1 !important }
  .gc-kart{ transform:none !important }
  .gc-kart::before,.gc-kart::after{ transition:none }
  .hizmet[data-gc-isik="1"] .gc-tarama{ animation:none }
  .medya[data-gc-isik="1"] img{ transform:none }
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}


/* ── 14. HERO OKUNABİLİRLİK PERDESİ ───────────────────────────
   3B sahne artık opak zeminle çizildiği (bloom için gerekli)
   ve daha parlak olduğu için, metnin oturduğu sol tarafa
   sahnenin ÜSTÜNDE duran bir karartma perdesi gerekiyor.
   z-index: canvas(0) < perde(3) < .icerik(5)                */
.gc-aktif .hero{ --gc-perde:1 }   /* 1 = tam perde, 0 = perdesiz */
.gc-aktif .hero::before{
  z-index:3;
  background:
    linear-gradient(100deg,
      rgba(8,23,32,calc(.95 * var(--gc-perde))) 0%,
      rgba(8,23,32,calc(.88 * var(--gc-perde))) 24%,
      rgba(8,23,32,calc(.52 * var(--gc-perde))) 44%,
      rgba(8,23,32,calc(.12 * var(--gc-perde))) 62%,
      rgba(8,23,32,0)   76%),
    radial-gradient(ellipse 70% 60% at 30% 45%,
      transparent 30%, rgba(8,23,32,.55) 100%);
}
/* Tarama çizgileri sahnenin üstünde kalsın */
.gc-aktif .hero::after{ z-index:4 }

@media (max-width:960px){
  /* Tek sütuna düşünce metin sahnenin tam üstünde durur */
  .gc-aktif .hero::before{
    background:linear-gradient(180deg,
      rgba(8,23,32,.92) 0%, rgba(8,23,32,.80) 45%,
      rgba(8,23,32,.55) 72%, rgba(8,23,32,.3) 100%);
  }
}


/* ── 15. İÇ SAYFA KARTLARI ────────────────────────────────────
   Eğim + imleç ışığı gc-kart üzerinden geliyor; burada yalnızca
   her kart tipinin kendi vurgusu tanımlanıyor.               */

/* /hizmetlerimiz — detay kartları kategori rengini korur */
.dkart[data-gc-isik="1"]{ border-color:var(--kart-renk,var(--petrol)) }
.dkart[data-gc-isik="1"]::after{
  background:linear-gradient(135deg,
    var(--kart-renk,var(--petrol-parlak)), rgba(125,255,58,.3) 55%,
    rgba(222,146,38,.5));
}
/* Karusel kartları hareket katmanının dışında tutulur */
.karusel-parca .kart{ transform-style:preserve-3d }

/* /belgeler — tip rozeti hover'da canlanır */
.belge .tip{ transition:background .25s, color .25s }
.belge[data-gc-isik="1"] .tip{ background:var(--petrol); color:#fff }

/* /iletisim — büyük satır hover'da vurgulanır */
.i-kart .buyuk{ transition:color .25s }
.i-kart[data-gc-isik="1"] .buyuk{ color:var(--petrol-koyu) }

/* /politikalarimiz — dar sütunda ışık halkası küçülsün */
.principle-card::before,.commitment-card::before{
  background:radial-gradient(300px circle at var(--gc-mx,50%) var(--gc-my,50%),
    rgba(34,195,208,.14), transparent 60%) !important;
}

/* İç sayfaların koyu başlık bandı — ana sayfadaki hero perdesi
   burada gerekmiyor (canvas yok), yalnızca giriş animasyonu var */
.gc-aktif .sayfa-holo .baslik-alan{ position:relative; z-index:5 }


/* ── 16. KEŞİF DÜĞMESİ ("Sonraki bölüm") ──────────────────────
   Hero'nun alt-ortasında durur. İki iş yapar:
     · gc-kesif-cizgi → sinematiğin ne kadarının geçtiğini gösterir
       (kaydırmanın sonlu olduğunu görünür kılar)
     · tıklanınca sinematiği atlayıp sonraki bölüme geçirir
   Hero sabitlendiğinde (position:fixed) birlikte hareket eder. */
.gc-kesif{
  position:absolute; left:50%; bottom:70px; z-index:8;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:11px 20px 10px;
  background:rgba(8,23,32,.62);
  border:1px solid rgba(34,195,208,.32);
  border-radius:100px;
  backdrop-filter:blur(6px);
  cursor:pointer; color:#BFE9ED;
  font-family:'IBM Plex Mono',monospace;
  transition:border-color .25s, background .25s, color .25s;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
}
.gc-kesif:hover{
  background:rgba(14,124,134,.28);
  border-color:var(--petrol-parlak,#22C3D0);
  color:#fff;
}
.gc-kesif:focus-visible{
  outline:2px solid var(--petrol-parlak,#22C3D0); outline-offset:3px;
}

.gc-kesif-ust{ display:flex; align-items:center; gap:9px }
.gc-kesif-yazi{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap;
}
.gc-kesif-ok{ width:15px; height:15px; flex:none }
.gc-kesif:not(:hover) .gc-kesif-ok{ animation:gc-kesif-zipla 2.1s ease-in-out infinite }
.gc-kesif:hover .gc-kesif-ok{ transform:translateY(2px); transition:transform .25s }
@keyframes gc-kesif-zipla{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(3px) }
}

/* İlerleme çizgisi — sinematiğin ne kadarı geçti */
.gc-kesif-cizgi{
  width:92px; height:2px; border-radius:2px;
  background:rgba(34,195,208,.2); overflow:hidden;
}
.gc-kesif-cizgi i{
  display:block; width:100%; height:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--petrol-parlak,#22C3D0),#7DFF3A);
  box-shadow:0 0 8px -1px rgba(34,195,208,.9);
}
/* Sinematik yoksa çizgi anlamsız — gizle */
.gc-kesif[data-gc-cizgi="0"] .gc-kesif-cizgi{ display:none }

/* Çerez bandı açıkken düğme yukarı çıksın (çakışmayı önler) */
.gc-cerez-acik .gc-kesif{ bottom:210px }

@media (max-width:960px){
  .gc-kesif{ bottom:26px; padding:9px 16px 8px }
  .gc-kesif-yazi{ font-size:10.5px }
  .gc-cerez-acik .gc-kesif{ bottom:230px }
}
@media (prefers-reduced-motion:reduce){
  .gc-kesif-ok{ animation:none !important }
}


/* ── 17. ÜST MENÜ — KAYAN GÖSTERGE ────────────────────────────
   Eskiden hover/aktif durumu düz bir renk kutusuydu; kartlardaki
   canlılığın yanında sönük kalıyordu. Artık öğeler arasında
   kayan tek bir gösterge var: ölçüm cihazı imleci gibi.
   index-nav.html'e dokunulmaz — buradaki kurallar onu ezer.   */
.gc-aktif nav.menu{ position:relative }

.gc-aktif nav.menu a{
  position:relative; z-index:2;
  transition:color .28s cubic-bezier(.2,.8,.3,1), text-shadow .28s;
  background:none !important;          /* düz kutu iptal */
}
.gc-aktif nav.menu a:hover,
.gc-aktif nav.menu a.aktif{
  color:#fff;
  text-shadow:0 0 14px rgba(34,195,208,.55);
}

/* Kayan gösterge — JS konumlandırır */
.gc-nav-isaret{
  position:absolute; top:0; left:0; z-index:1;
  height:100%; width:0; pointer-events:none;
  border-radius:7px; opacity:0;
  background:linear-gradient(180deg,
    rgba(34,195,208,.05), rgba(34,195,208,.17));
  border:1px solid rgba(34,195,208,.34);
  box-shadow:0 0 18px -6px rgba(34,195,208,.65),
             inset 0 1px 0 rgba(255,255,255,.06);
}
/* Alt kenarda parlak ölçüm imleci */
.gc-nav-isaret::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-1px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--petrol-parlak,#22C3D0) 22%,
             #7DFF3A 78%,transparent);
  box-shadow:0 0 10px -1px rgba(34,195,208,.95);
}
/* Aktif sayfadayken göstergenin sürekli hafif nabzı */
.gc-nav-isaret[data-gc-durum="aktif"]{ animation:gc-nav-nabiz 3.6s ease-in-out infinite }
@keyframes gc-nav-nabiz{
  0%,100%{ box-shadow:0 0 18px -6px rgba(34,195,208,.55), inset 0 1px 0 rgba(255,255,255,.06) }
  50%    { box-shadow:0 0 26px -6px rgba(34,195,208,.9),  inset 0 1px 0 rgba(255,255,255,.10) }
}

/* Sağdaki eylem butonlarına ışık süpürmesi */
.gc-aktif .nav-cta,
.gc-aktif .nav-portal,
.gc-aktif .nav-degerlendir{ position:relative; overflow:hidden }
.gc-aktif .nav-cta::after,
.gc-aktif .nav-portal::after,
.gc-aktif .nav-degerlendir::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,
             rgba(255,255,255,.30) 50%,transparent 65%);
  transform:translateX(-120%);
}
.gc-aktif .nav-cta:hover::after,
.gc-aktif .nav-portal:hover::after,
.gc-aktif .nav-degerlendir:hover::after{
  animation:gc-supur .7s cubic-bezier(.3,.7,.3,1);
}
@keyframes gc-supur{ to{ transform:translateX(120%) } }

@media (prefers-reduced-motion:reduce){
  .gc-nav-isaret{ transition:none !important; animation:none !important }
  .gc-aktif .nav-cta:hover::after,
  .gc-aktif .nav-portal:hover::after,
  .gc-aktif .nav-degerlendir:hover::after{ animation:none }
}
@media (max-width:960px){ .gc-nav-isaret{ display:none } }