/* ==========================================================================
   GRAFION — Hero 1 (Klasik) + Hero 2 (Kinetik Kreatif)
   Yalnızca aktif hero tipi hero1/hero2 iken yüklenir (index.php $ek_css).
   style.css'ten ayrıldı (performans: kullanılmayan hero CSS'i yüklenmesin).
   Paylaşılan arkaplan/video yardımcıları self-contained kopyalanmıştır.
   ========================================================================== */

/* ---- Hero 1 temel ---- */
.hero { position: relative; padding-top: clamp(8rem, 16vh, 12rem); padding-bottom: clamp(4rem, 8vw, 7rem); min-height: 100svh; display: flex; align-items: center; overflow-x: clip; }
.hero__grid { display: grid; gap: 2.5rem; width: 100%; position: relative; z-index: 1; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.12fr 0.88fr; align-items: center; gap: 3rem; } }

/* ---- Hero arkaplan: video + görsel ---- */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg--resim { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobilde video konumu — ayrı dikey mobil video yoksa kadrajı kaydır (--hvpm inline gelir) */
@media (max-width: 768px) { .hero__bg video { object-position: var(--hvpm, center); } }
/* Scroll-scrub: render edilmiş WebP sprite kareleri (DOM'da video YOK).
   .hero__scrub = poster arka planlı kapsayıcı; canvas hazır olunca üstüne biner. */
.hero__scrub { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: var(--hvpm, center); background-repeat: no-repeat; }
.hero__scrub-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hvpm, center); display: block;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.hero__scrub-canvas.is-on { opacity: 1; }
/* Yükleniyor göstergesi (sprite gelene kadar) — sağ-alt köşede ince halka */
.hero__scrub-load {
  position: absolute; right: 1rem; bottom: 1rem; width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.9);
  border-radius: 50%; animation: heroScrubSpin .8s linear infinite;
  opacity: .85; transition: opacity .35s ease; pointer-events: none;
}
.hero__scrub-load.is-off { opacity: 0; }
@keyframes heroScrubSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__scrub-load { animation: none; } }
.hero__video--karanlik { display: block; }
:root[data-theme="light"] .hero__video--karanlik { display: none; }
.hero__video--aydinlik { display: none; }
:root[data-theme="light"] .hero__video--aydinlik { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg video { display: none !important; }
}

/* Hero 1/2 video veil — video/görsel varsa aurora+videoyu örter, sinematik film efekti verir */
.hero__bg-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Dark/light ayrı: --vd-* (dark) / --vl-* (light) inline gelir; tema seçer */
  --veil-opak: var(--vd-opak, 1);
  --veil-renk: var(--vd-renk, #080412);
  opacity: var(--veil-opak, 1);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--veil-renk,#080412) 62%, transparent) 0%, color-mix(in srgb, var(--c-indigo) 48%, transparent) 50%, color-mix(in srgb, var(--veil-renk,#080412) 80%, transparent) 100%),
    radial-gradient(110% 80% at 72% 22%, color-mix(in srgb, var(--c-violet) 22%, transparent), transparent 55%);
}
:root[data-theme="light"] .hero__bg-veil { --veil-opak: var(--vl-opak, 1); --veil-renk: var(--vl-renk, #080412); }
.hero__bg-veil::before {
  /* Global arkaplan grid'i (.bg-fx::before) ile BİREBİR aynı çizim: çizgiler kare
     KENARINDA (0/64), aynı --grid-line rengi, -2px faz + --grid-oy dikey hizalama
     → hero grid'i arkaplan grid'iyle kayık görünmez (sayfanın üstünde örtüşür). */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -2px calc(var(--grid-oy, 0px) - 2px);
}
.hero__bg-veil.grid-gizli-d::before { display: none; }
:root[data-theme="light"] .hero__bg-veil.grid-gizli-d::before { display: block; }
:root[data-theme="light"] .hero__bg-veil.grid-gizli-l::before { display: none; }
/* Koyu zemin: açık modda da DARK veil opaklık/renk + DARK grid davranışı → dark
   moddaki görünümle birebir (veil kaybolmaz). --grid-line .is-koyu-zemin'de dark'a alınır. */
:root[data-theme="light"] .is-koyu-zemin .hero__bg-veil { --veil-opak: var(--vd-opak, 1); --veil-renk: var(--vd-renk, #080412); }
:root[data-theme="light"] .is-koyu-zemin .hero__bg-veil.grid-gizli-l::before { display: block; }
:root[data-theme="light"] .is-koyu-zemin .hero__bg-veil.grid-gizli-d::before { display: none; }
.hero__bg-veil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(4,2,10,.55) 100%);
}

/* Animated aurora field behind the hero — instant premium ambience */
.hero__aurora { position: absolute; inset: -10% -5% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__aurora span {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.55; mix-blend-mode: screen;
  will-change: transform;
  animation: auroraFloat 14s var(--ease-in-out) infinite;
}
.hero__aurora span:nth-child(1) { width: 38vw; height: 38vw; left: 4%;  top: 6%;  background: radial-gradient(circle, var(--c-violet), transparent 70%); }
.hero__aurora span:nth-child(2) { width: 30vw; height: 30vw; left: 30%; top: 30%; background: radial-gradient(circle, var(--c-purple), transparent 70%); animation-delay: -4s; animation-duration: 18s; }
.hero__aurora span:nth-child(3) { width: 26vw; height: 26vw; left: 12%; top: 40%; background: radial-gradient(circle, var(--c-lavender), transparent 70%); animation-delay: -8s; animation-duration: 16s; }
:root[data-theme="light"] .hero__aurora span { opacity: 0.35; }
@keyframes auroraFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(6%, -5%, 0) scale(1.12); }
  66%     { transform: translate3d(-5%, 4%, 0) scale(0.95); }
}

.hero__title {
  font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 1.4rem 0 1.6rem;
}
.hero__title .hl {
  font-style: italic;
  background: linear-gradient(110deg, var(--c-violet), var(--c-lavender) 55%, var(--c-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.06em;
}
.hero__title .line { display: block; }
.hero__title .line > span {
  display: inline-block;
  transform: none;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.25rem; }

/* Static spotlight — soft ambient light behind the headline (no JS needed) */
.hero__spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(540px circle at 22% 38%,
              color-mix(in srgb, var(--c-violet) 22%, transparent), transparent 60%);
  opacity: 0.7;
}

/* ===== HERO VISUAL — glass "ayna" + idea-words orbiting a tilted ring ===== */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  perspective: 1300px;
  container-type: inline-size;
}
.hero__scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: mirrorFloat 6.5s var(--ease-in-out) infinite;
}
@keyframes mirrorFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero__mirror {
  position: absolute; left: 50%; top: 50%;
  width: 114%;
  transform: translate(-50%, -50%);
}
.hero__mirror-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 60px rgba(92, 45, 145, 0.5)); }
.hero__mirror-img--dark { display: none; }
:root[data-theme="dark"] .hero__mirror-img--light { display: none; }
:root[data-theme="dark"] .hero__mirror-img--dark { display: block; }
.hero__mirror::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 60%; height: 58%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c-violet) 50%, transparent), transparent 66%);
  filter: blur(44px); z-index: -1;
}

.orbit {
  position: absolute; inset: 0;
  transform: rotateX(72deg);
  transform-style: preserve-3d;
  pointer-events: none;
}
.orbit__ring {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit__ring--1 { width: 96%; height: 96%; border: 1px solid color-mix(in srgb, var(--c-violet) 30%, transparent); }
.orbit__ring--2 { width: 66%; height: 66%; border: 1px dashed color-mix(in srgb, var(--c-lavender) 26%, transparent); }

.orbit__spin {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  animation: orbitSpin 34s linear infinite;
}
@keyframes orbitSpin { to { transform: rotateZ(360deg); } }

.orbit__node {
  position: absolute; left: 0; top: 0;
  transform: rotateZ(var(--a)) translateX(48cqw);
  transform-style: preserve-3d;
}
.orbit__face {
  display: inline-flex;
  transform: rotateZ(calc(-1 * var(--a))) rotateZ(0deg) rotateX(-72deg);
  animation: orbitFace 34s linear infinite;
}
@keyframes orbitFace {
  from { transform: rotateZ(calc(-1 * var(--a))) rotateZ(0deg)    rotateX(-72deg); }
  to   { transform: rotateZ(calc(-1 * var(--a))) rotateZ(-360deg) rotateX(-72deg); }
}
.orbit__chip {
  align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem; border-radius: 100px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.orbit__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.orbit__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--c-violet) 70%);
  box-shadow: 0 0 18px 5px color-mix(in srgb, var(--c-violet) 65%, transparent);
}
.orbit__dot--sm { width: 9px; height: 9px; box-shadow: 0 0 12px 3px color-mix(in srgb, var(--c-lavender) 60%, transparent); }

@media (max-width: 1023px) { .hero__visual { max-width: 500px; } }
@media (max-width: 560px) {
  .hero__visual { max-width: 360px; }
  .hero__mirror { width: 112%; }
  .orbit__ring--2 { display: none; }
  .orbit__ring--1 { width: 86%; height: 86%; }
  .orbit__node { transform: rotateZ(var(--a)) translateX(44cqw); }
  .orbit__chip { font-size: 0.64rem; padding: 0.32rem 0.66rem; }
}

/* ---- Hero 5 — orbit yerine yüklenebilir görsel (light/dark) ---- */
.hero5__gorsel-wrap { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.hero5__gorsel { display: block; width: 100%; height: auto; border-radius: var(--radius-lg, 24px); object-fit: cover; box-shadow: 0 34px 60px rgba(92, 45, 145, 0.4); }
.hero5__gorsel--dark { display: none; }
:root[data-theme="dark"] .hero5__gorsel--light { display: none; }
:root[data-theme="dark"] .hero5__gorsel--dark { display: block; }
/* Görselsiz: içerik tam genişlik */
@media (min-width: 1024px) { .hero5--gorselsiz .hero__grid { grid-template-columns: 1fr; } }

/* Scroll cue */
.scroll-cue { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.5rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.scroll-cue i { width: 1px; height: 34px; background: var(--border-strong); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background: var(--accent); transform: translateY(-100%); animation: scrollCue 2s var(--ease-in-out) infinite; }
@keyframes scrollCue { 50% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

/* ==========================================================================
   HERO 2 — Kreatif kinetik hero (word-rotator + 3D sahneler + fare eğimi)
   ========================================================================== */
.hero2 {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
/* Mobil: Hero 1 & Hero 2 metni üstte AYNI hizada başlasın */
@media (max-width: 768px) {
  .hero, .hero2 {
    align-items: flex-start;
    padding-top: clamp(7rem, 15vh, 9.5rem);
    padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
  }
  /* Başlık satır kırılımı artık grafion_hero_baslik_satirlari() ile <m> vurgusuna
     göre 2 anlamlı satır üretilir (TR/EN uyumlu) → mobil birleştirme hack'i kaldırıldı. */
  /* CTA'lar mobilde YAN YANA (tek satır, eşit genişlik) → dikey yükseklik azalır,
     butonlar yukarı çıkar, videonun öznesine binmez. Sığması için kompakt + ok gizli. */
  .hero__cta { flex-wrap: nowrap; gap: 0.6rem; }
  .hero__cta .magnetic { flex: 1 1 0; min-width: 0; }
  .hero__cta .btn { width: 100%; justify-content: center; font-size: 0.9rem; padding: 0.95rem 0.7rem; gap: 0; white-space: nowrap; }
  .hero__cta .btn svg { display: none; }
  /* hero5 (görselsiz = tam-ekran video): üstte eyebrow/başlık/lead, ALTTA CTA + KEŞFET.
     Aradaki boşluk esner → videonun öznesi ortada görünür, butonlar en alta oturur. */
  .hero5--gorselsiz { align-items: stretch; padding-bottom: clamp(1.75rem, 5vh, 2.75rem); }
  .hero5--gorselsiz .hero__grid { display: flex; flex-direction: column; }
  .hero5--gorselsiz .hero__content { display: flex; flex-direction: column; flex: 1 1 auto; }
  .hero5--gorselsiz .hero__cta { margin-top: auto; }
  .hero5--gorselsiz .scroll-cue { margin-top: 1.4rem; align-self: flex-start; }
}

.hero2__grid { position: relative; z-index: 2; width: 100%; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero2__grid { grid-template-columns: 1.12fr 0.88fr; gap: 3rem; } }

.hero2__eyebrow { color: var(--accent); }
.hero2__title {
  font-family: var(--font-head); font-weight: 700; color: var(--text);
  font-size: clamp(2.4rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.035em;
  margin: 1.4rem 0 1.6rem; text-wrap: balance;
}
.hero2__rotator { display: inline-block; vertical-align: bottom; overflow: hidden; height: 1.15em; width: auto; transition: width 0.5s var(--ease-in-out); will-change: width; }
.hero2__rotator-list { display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.6s var(--ease-in-out); will-change: transform; }
.hero2__word {
  display: block; white-space: nowrap; line-height: 1.15; font-style: italic; padding-right: 0.14em;
  background: linear-gradient(110deg, var(--c-violet), var(--c-purple) 60%, var(--c-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero2__lead { color: var(--text-soft); font-size: var(--fs-lead); line-height: 1.6; max-width: 58ch; margin-bottom: 2.2rem; text-wrap: pretty; }
.hero2__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---- Dönen disiplin sahneleri (sağ panel, 3D + taşan görsel) ---- */
.hero2__showcase { position: relative; perspective: 1300px; }
.hero2__deck {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; margin-inline: auto;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}
@media (min-width: 980px) { .hero2__deck { margin-right: 0; } }
.hero2__deck-3d { position: absolute; inset: 0; perspective: 1100px; transform-style: preserve-3d; }

.hero2__scene {
  position: absolute; inset: 0;
  opacity: 0; transform: rotateY(40deg); transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: opacity 0.7s var(--ease-out), transform 0.75s var(--ease-out);
  pointer-events: none;
}
.hero2__scene.is-active { opacity: 1; transform: rotateY(0deg); pointer-events: auto; z-index: 1; }

.hero2__scene-card {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.4rem, 3vw, 2rem);
  backface-visibility: hidden;
  box-shadow: 0 50px 90px -42px rgba(0,0,0,0.85), inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}
.hero2__scene-art {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--scene-color, var(--c-violet)) 78%, #fff 8%), transparent 55%),
    linear-gradient(158deg, var(--scene-color, var(--c-purple)), color-mix(in srgb, var(--scene-color, var(--c-indigo)) 42%, #000));
}
.hero2__scene-art::after {
  content: attr(data-glyph); position: absolute; right: -0.06em; top: -0.16em;
  font-family: var(--font-head); font-weight: 700; font-size: 32vmin; line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, #fff 24%, transparent); text-stroke: 2px color-mix(in srgb, #fff 24%, transparent);
}
.hero2__scene-art::before {
  content: ""; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero2__scene.is-active .hero2__scene-art { animation: hero2KenBurns 6s var(--ease-out) forwards; }
@keyframes hero2KenBurns { from { transform: scale(1.12); } to { transform: scale(1); } }

.hero2__scene-img {
  position: absolute; z-index: 3; right: -12%; top: -14%;
  width: 80%; max-height: 128%; object-fit: contain;
  transform: translateZ(70px);
  filter: drop-shadow(0 28px 36px rgba(0,0,0,0.55));
  pointer-events: none; opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.15s;
}
.hero2__scene.is-active .hero2__scene-img { opacity: 1; }
.hero2__scene.has-img .hero2__scene-no { color: color-mix(in srgb, #fff 70%, transparent); }

.hero2__scene-no {
  position: absolute; top: clamp(1rem, 3vw, 1.6rem); left: clamp(1.2rem, 3vw, 1.6rem); z-index: 1;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
  color: color-mix(in srgb, #fff 78%, transparent);
}
.hero2__scene-meta { position: relative; z-index: 1; }
.hero2__scene-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 0.35rem; color: #fff; }
.hero2__scene-sub { font-size: 0.95rem; line-height: 1.5; color: color-mix(in srgb, #fff 82%, transparent); max-width: 30ch; }

@media (max-width: 980px) {
  .hero2__deck { max-width: 380px; }
  .hero2__scene-art::after { font-size: 30vmin; }
}

/* Hero 1/2 — reduced motion (style.css'teki global bloktan ayrıldı) */
@media (prefers-reduced-motion: reduce) {
  .hero__title .line > span { opacity: 1 !important; transform: none !important; }
  .hero__aurora span, .orbit__spin, .orbit__face, .hero__scene { animation: none !important; }
  .hero__aurora { display: none; }
  .hero2__scene.is-active .hero2__scene-art { animation: none !important; }
  .hero2__rotator-list { transition: none !important; }
  .hero2__deck { transform: none !important; }
  .hero2__scene { transition: none !important; }
  .hero2__scene.is-active { transform: none !important; }
  .hero2__eyebrow, .hero2__title, .hero2__lead, .hero2__cta { opacity: 1 !important; transform: none !important; }
}