/* EndV — sayfalara özel bileşen stilleri.
   Önceden her HTML dosyasının <style> bloğunda kopyalanıyordu; artık tek yerden yönetilir. */

/* --- Ortak: neon / cam yüzeyler --- */
.glass-panel { background: rgba(255, 255, 255, 0.03); }
.glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); }
.neon-shadow-primary { box-shadow: 0 0 15px rgba(192, 193, 255, 0.3); }

/* --- Anasayfa: scroll animasyonu, parçacıklar, kart efektleri --- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

.neon-glow-primary {
  box-shadow: 0 0 20px rgba(192, 193, 255, 0.3);
  transition: box-shadow 0.3s ease-in-out;
}
.neon-glow-primary:hover { box-shadow: 0 0 30px rgba(192, 193, 255, 0.6); }

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.particle {
  position: absolute;
  background: rgba(192, 193, 255, 0.5);
  border-radius: 50%;
  animation: float 5s infinite ease-in-out;
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(-20px); opacity: 0.8; }
}

.hover-card { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.hover-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 30px -10px rgba(192, 193, 255, 0.3);
  border-color: rgba(192, 193, 255, 0.5);
}

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
}
.btn-shimmer:hover::after { transform: translateX(100%); }

body { transition: background-color 0.5s ease, color 0.5s ease; }

/* --- Başvuru formu alanları --- */
input.field, select.field, textarea.field {
  width: 100%; background: #2a2a2a; border: 1px solid #464554;
  border-radius: 0.375rem; padding: 0.6rem 1rem; color: #e5e2e1;
  font-family: Geist, sans-serif; font-size: 16px;
  transition: all .2s;
}
input.field:focus, select.field:focus, textarea.field:focus {
  outline: none; border-color: #c0c1ff;
  box-shadow: 0 0 12px rgba(192,193,255,0.3);
}
.flabel {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: #c7c4d7; display: block; margin-bottom: 0.5rem;
}

/* --- Karakter sayfaları: sinematik görsel efekti --- */
.cartoon-img {
  filter: saturate(1.4) contrast(1.15) sepia(0.15) hue-rotate(-5deg);
  transition: transform 0.7s cubic-bezier(0.5, 0, 0, 1), filter 0.5s ease;
}
.cartoon-img:hover {
  transform: scale(1.08);
  filter: saturate(1.6) contrast(1.25) sepia(0.1) hue-rotate(0deg);
}
.cartoon-text {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
}
.character-card {
  background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(10,10,10,0.8) 80%, rgba(0,0,0,1) 100%);
}

/* ============================================================
   EndV Premium Motion katmanı (motion.js ile eşleşir)
   ============================================================ */

html { scroll-behavior: smooth; }

/* Sayfa giriş animasyonu */
main { animation: evPageIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes evPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* İnce film grenli doku — blend modu YOK: tam ekran karışım her karede
   yeniden boyanmayı tetikliyordu (kaydırma jank'inin ana kaynaklarından biri). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(192, 193, 255, 0.22); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(192, 193, 255, 0.4); }

/* Odak halkası */
:focus-visible { outline: 2px solid rgba(192, 193, 255, 0.85); outline-offset: 2px; border-radius: 4px; }

/* Okuma ilerleme çubuğu */
.ev-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 55; pointer-events: none;
  background: linear-gradient(90deg, #c0c1ff, #4cd7f6, #ddb7ff);
  box-shadow: 0 0 12px rgba(192, 193, 255, 0.5);
}

/* Nav: kaydırma durumu + akıllı gizlenme (aşağı kayarken gizlenir, yukarıda görünür) */
#evNav { transition: height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
#evNav.nav-hidden { transform: translateY(-105%); }
#evNav.nav-scrolled {
  height: 3.5rem;
  background-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25), 0 0 24px rgba(192, 193, 255, 0.12);
}
.dark #evNav.nav-scrolled { background-color: rgba(32, 31, 31, 0.72); }
#evNav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 193, 255, 0.55), rgba(76, 215, 246, 0.4), transparent);
  opacity: 0.6; pointer-events: none;
}
.ev-link { position: relative; }
.ev-link::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c0c1ff, #4cd7f6);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ev-link:hover::after, .ev-link.ev-active::after { transform: scaleX(1); }

/* Mobil menü yay animasyonu */
#mobileMenu { transition-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1); }

/* Hero: süzülen aurora katmanları — dev `filter: blur()` kümeleri yerine
   radial-gradient (boyama bir kez, hareket yalnızca translate/scale = GPU'da). */
.ev-aurora {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform;
}
.ev-aurora--a {
  width: 48rem; height: 48rem; left: -10rem; top: -8rem;
  background: radial-gradient(closest-side, rgba(128, 131, 255, 0.36), rgba(128, 131, 255, 0) 70%);
  animation: evAuroraA 26s ease-in-out infinite alternate;
}
.ev-aurora--b {
  width: 40rem; height: 40rem; right: -8rem; top: 3rem;
  background: radial-gradient(closest-side, rgba(221, 183, 255, 0.32), rgba(221, 183, 255, 0) 70%);
  animation: evAuroraB 31s ease-in-out infinite alternate;
}
.ev-aurora--c {
  width: 44rem; height: 44rem; left: 26%; bottom: -20rem;
  background: radial-gradient(closest-side, rgba(76, 215, 246, 0.28), rgba(76, 215, 246, 0) 70%);
  animation: evAuroraC 36s ease-in-out infinite alternate;
}
.dark .ev-aurora { opacity: 0.85; }
@keyframes evAuroraA {
  from { translate: 0 0; scale: 1; }
  to { translate: 70px -46px; scale: 1.14; }
}
@keyframes evAuroraB {
  from { translate: 0 0; scale: 1.06; }
  to { translate: -60px 40px; scale: 1; }
}
@keyframes evAuroraC {
  from { translate: 0 0; scale: 1.04; }
  to { translate: 44px -34px; scale: 1.16; }
}

/* Hero içeriği: kaydırmayla geri çekilir (motion.js transform/opacity yazar) */
.ev-hero-inner { will-change: transform, opacity; }
.hero-enter { animation: evHeroEnter 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes evHeroEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Bölünmüş başlık animasyonu (motion.js) — yalnızca görünür olunca oynar.
   `display: inline-block` kalıcıdır; gizleme/animasyon yalnızca .ev-split ile gelir.
   motion.js, animasyon tamamlandıktan sonra .ev-split'i kaldırır: animasyon hiç
   oynamazsa bile başlık asla görünmez kalmaz. */
.ev-word { display: inline-block; }
.ev-split .ev-word { opacity: 0; }
.ev-split.ev-in .ev-word { animation: evWordUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes evWordUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.ev-hero-title { text-shadow: 0 0 46px rgba(192, 193, 255, 0.22); }

/* Hero gradyan yazıda ışık süzülmesi — sürekli değil, dalgalı ve yavaş
   (eski 2.5s sonsuz animasyon her karede yazıyı yeniden boyuyordu) */
.ev-shimmer-text { animation: evShimmer 8s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes evShimmer {
  0% { background-position: 170% 50%; }
  40%, 100% { background-position: -70% 50%; }
}

/* Kademeli açılış: [data-stagger] çocukları sırayla belirir (theme.js --ev-i yazar).
   :where() sayesinde özgüllük sıfırdır; hover/utility sınıfları ezilmez. */
:where([data-stagger]) > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--ev-i, 0) * 85ms);
}
:where([data-stagger].visible) > * { opacity: 1; transform: none; }

/* Görsel hover büyümesi — TEK KAYNAK: index ve galeri aynı animasyonu kullanır.
   Büyüme kartın tamamı üzerine gelindiğinde tetiklenir; böylece imlecin görselin
   kenarına denk gelip gelmemesine bağlı tutarsızlık oluşmaz.
   yumuşak ease-out eğrisi "nefes alma" hissi verir ve her görselde aynı sürede oynar.
   Not: satır içi `transition` yazılmamalıdır (theme.js bu yüzden WAAPI kullanır);
   inline transition bu kuralı eziyordu. */
.ev-zoom-wrap { position: relative; overflow: hidden; }
.ev-zoom { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.ev-zoom-wrap:hover .ev-zoom,
.ev-zoom-wrap:focus-visible .ev-zoom {
  transform: scale(1.1);
  will-change: transform; /* büyük JPEG'lerde ilk kare titremesini önler */
}


.ev-spot { position: relative; overflow: hidden; }
.ev-spot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--ev-mx, 50%) var(--ev-my, 50%), rgba(192, 193, 255, 0.16), transparent 62%);
  opacity: 0; transition: opacity 0.35s ease;
}
.ev-spot:hover::before { opacity: 1; }

/* Manyetik butonlar (motion.js) */
.btn-magnetic { will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* Kaydırma parallax'ı uygulanan katman (motion.js) */
.ev-parallax { will-change: transform; }

/* Nabız gibi parlayan rozet — box-shadow animasyonu yerine opaklık nabzı
   (gölgeyi her karede yeniden boyamak yerine kompozitörde çalışır) */
.ev-pulse-glow { position: relative; }
.ev-pulse-glow::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 26px 4px rgba(192, 193, 255, 0.32);
  opacity: 0.12; animation: evGlowPulse 3.4s ease-in-out infinite;
}
@keyframes evGlowPulse {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.75; }
}

/* İmleci takip eden ışık halesi (yalnızca fareli cihazlarda, motion.js ekler) */
.ev-cursor {
  position: fixed; left: 0; top: 0; width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem;
  border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(closest-side, rgba(128, 131, 255, 0.13), rgba(128, 131, 255, 0.05) 45%, rgba(128, 131, 255, 0) 72%);
  opacity: 0; transition: opacity 0.45s ease;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
.dark .ev-cursor {
  background: radial-gradient(closest-side, rgba(192, 193, 255, 0.15), rgba(192, 193, 255, 0.05) 45%, rgba(192, 193, 255, 0) 72%);
}
.ev-cursor.ev-cursor--on { opacity: 0.55; }
.ev-cursor.ev-cursor--hot { opacity: 0.95; }

/* Yukarı çık butonu (motion.js ekler) */
.ev-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45;
  width: 2.7rem; height: 2.7rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(128, 131, 255, 0.4);
  background: rgba(255, 255, 255, 0.72); color: #494bd6;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(14px) scale(0.94); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.dark .ev-top { background: rgba(32, 31, 31, 0.66); color: #c0c1ff; border-color: rgba(192, 193, 255, 0.35); }
.ev-top.ev-top--on { opacity: 1; transform: none; pointer-events: auto; }
.ev-top:hover { border-color: rgba(128, 131, 255, 0.9); }
.dark .ev-top:hover { border-color: rgba(192, 193, 255, 0.85); }

/* Bölüm çapaları sabit menünün altında kalmasın */
section { scroll-margin-top: 4.5rem; }

/* Sayfa geçişleri (destekleyen tarayıcılarda) */
@view-transition { navigation: auto; }

/* ==========================================================================
   SİNEMATİK KATMAN — kngl.gg / vland.life tarzı animasyon dili
   İlke: yalnızca transform/opacity (kompozitör). Konik kenarlık gibi boyama
   gerektiren efektler küçük öğelerle sınırlı tutulur.
   ========================================================================== */

/* 1) Animasyonlu konik kenarlık — dönen ışık halkası.
   @property sayesinde açı interpolasyon yapar; yalnızca bu sözde öğe boyanır.
   KULLANIM: yalnızca küçük/az sayıda öğede (rozet, ana buton, öne çıkan kart). */
@property --ev-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.ev-ring { position: relative; isolation: isolate; }
.ev-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--ev-angle),
    rgba(128, 131, 255, 0) 38%,
    rgba(128, 131, 255, 0.95) 49%,
    rgba(221, 183, 255, 0.85) 53%,
    rgba(128, 131, 255, 0) 64%);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: evRingSpin 4.2s linear infinite;
}
@keyframes evRingSpin { to { --ev-angle: 360deg; } }

/* 2) Sinematik başlık tipografisi (referans sitelerin display ölçeği).
   Not: text-transform KULLANILMAZ — Türkçe "i/ı" dönüşümünde sorun çıkmasın. */
.ev-cine-title {
  font-size: clamp(2.4rem, 7.2vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}

/* 3) Kenar solma maskesi (referans sitelerin mask-fade dili) */
.ev-fade-y {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
}

/* 5) Parallax bant: görsel kapsayıcıdan büyük tutulur, kaydırmayla süzülür */
.ev-band { position: relative; overflow: hidden; }
.ev-band > img { position: absolute; top: -9%; left: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.ev-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.6));
}

/* 6) Dev marka yazısı (footer). Referans: clamp(110px, 24vw, 450px), satır 0.8.
   Üç katman: wrap = kırpma, reveal = giriş animasyonu, giant = parallax.
   Böylece her animasyon ayrı elemana yazar, transform çakışması olmaz. */
.ev-giant-wrap { width: 100%; overflow: hidden; text-align: center; }
.ev-giant-reveal {
  transform: translateY(26%);
  opacity: 0;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.15s ease;
}
.ev-giant-wrap.ev-in .ev-giant-reveal { transform: none; opacity: 1; }
.ev-giant {
  font-size: clamp(64px, 19vw, 320px);
  line-height: 0.8;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0;
  will-change: transform, opacity;
  /* currentColor burada KULLANILAMAZ: rengi şeffaflaştırdığımız için gradient
     de şeffaf olurdu. Bu yüzden tema başına açık renk değerleri verilir. */
  background-image: linear-gradient(to bottom, #1b1b22 22%, rgba(27, 27, 34, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dark .ev-giant {
  background-image: linear-gradient(to bottom, #f4f4f8 22%, rgba(244, 244, 248, 0) 100%);
}

/* 8) Sinematik giriş (preloader) — JS ile eklenir; JS yoksa hiç görünmez.
   Kısa tutulur (≈0.9 sn), oturumda bir kez gösterilir. */
.ev-pre {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; gap: 1.1rem; align-content: center;
  background: #0a0a0c;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.ev-pre--out { opacity: 0; visibility: hidden; }
.ev-pre-mark { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.42em; color: #f4f4f6; text-indent: 0.42em; }
.ev-pre-bar { width: min(230px, 52vw); height: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ev-pre-bar > span {
  display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #8083ff, #ddb7ff);
  animation: evPreLoad 0.85s cubic-bezier(0.4, 0, 0.1, 1) forwards;
}
@keyframes evPreLoad { to { transform: scaleX(1); } }

/* 10) Düşük donanımlı cihaz modu (theme.js <html>'e ekler):
   en pahalı efektleri kapatır, geri kalanı korur. Dönen kenarlık (yalnızca
   iki küçük öğe) bilinçli olarak açık bırakılır — imza efekti kaybolmasın. */
html.ev-lite .ev-aurora { animation: none; }
html.ev-lite .ev-pulse-glow::after { animation: none; opacity: 0.3; }
html.ev-lite .ev-cursor { display: none; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main { animation: none; }
  .ev-aurora, .hero-enter { animation: none; }
  .ev-pulse-glow::after { animation: none; opacity: 0.35; }
  .ev-shimmer-text { animation: none; }
  .ev-split .ev-word { animation: none; opacity: 1; }
  .ev-progress { display: none; }
  .ev-link::after { transition: none; }
  #evNav { transition: none; }
  .ev-cursor, .ev-top { display: none; }
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .ev-zoom { transition: none; }
  .ev-zoom-wrap:hover .ev-zoom, .ev-zoom-wrap:focus-visible .ev-zoom { transform: none; }
  .ev-ring::before { animation: none; }
  .ev-pre { display: none; }
  .ev-giant { will-change: auto; }
  .ev-giant-reveal { transform: none; opacity: 1; transition: none; }
  .ev-band > img { will-change: auto; }
  :where([data-stagger]) > * { opacity: 1; transform: none; transition: none; }
}