/* ============================================================
   PUNCH YAZILIM — KOZMIK KATMAN ("evren disi")
   Boyutsal portal, yorungedeki gezegenler, nebula, holografik
   tipografi, kuyruklu yildiz imleci, warp gecisleri.
   Tum efektler prefers-reduced-motion'a saygi duyar.
   ============================================================ */

:root {
  --star: #dfe7ff;
  --nebula-cyan: #36e0d6;
  --nebula-pink: #ff5fd1;
  --cosmic-deep: #050310;
}

/* Site genel zemini biraz daha "uzay" yap */
body { background-color: var(--cosmic-deep); }

/* ---------- HERO: boyutsal portal ---------- */
.portal {
  position: absolute;
  top: 50%; left: 58%;
  width: min(60vw, 720px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none;
  filter: blur(0.4px);
}
.portal::before, .portal::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
/* donen renkli halka */
.portal::before {
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--punch-violet-500) 60deg,
    var(--nebula-pink) 140deg, transparent 200deg,
    var(--nebula-cyan) 280deg, var(--punch-violet-600) 340deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 56%, #000 57%, #000 70%, transparent 72%);
  animation: portalSpin 18s linear infinite;
  opacity: 0.85;
}
/* ic parlama / olay ufku */
.portal::after {
  background: radial-gradient(circle, rgba(139,61,255,0.35) 0%, rgba(192,38,211,0.12) 38%, transparent 60%);
  animation: portalPulse 6s var(--ease-in-out) infinite;
}
.portal .ring {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid rgba(173,132,247,0.25);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
          mask: radial-gradient(circle, transparent 60%, #000 61%);
  animation: portalSpin 26s linear infinite reverse;
}
.portal .ring:nth-child(2){ inset: 18%; border-color: rgba(54,224,214,0.18); animation-duration: 34s; }
@keyframes portalSpin { to { transform: rotate(360deg); } }
@keyframes portalPulse { 0%,100% { opacity:.5; transform: scale(1);} 50% { opacity:.9; transform: scale(1.06);} }

/* ---------- Yorungedeki gezegenler ---------- */
.orbit-system { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orbit {
  position: absolute; top: 50%; left: 58%;
  border: 1px solid rgba(255,255,255,0.05); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin var(--orbit-dur, 40s) linear infinite;
}
.orbit .planet {
  position: absolute; top: -7px; left: calc(50% - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--p-col, var(--punch-violet-400)) 60%, #1a0b33);
  box-shadow: 0 0 18px var(--p-col, var(--punch-violet-500));
}
.orbit.o1 { width: 360px; height: 360px; --orbit-dur: 28s; }
.orbit.o1 .planet { --p-col: var(--nebula-cyan); }
.orbit.o2 { width: 540px; height: 540px; --orbit-dur: 44s; }
.orbit.o2 .planet { --p-col: var(--nebula-pink); width: 10px; height: 10px; }
.orbit.o3 { width: 760px; height: 760px; --orbit-dur: 66s; }
.orbit.o3 .planet { --p-col: var(--punch-violet-300); width: 18px; height: 18px; }
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Holografik / parlayan baslik ---------- */
.holo {
  background: linear-gradient(92deg, #fff 0%, var(--nebula-cyan) 22%, var(--punch-violet-300) 48%, var(--nebula-pink) 72%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holoShift 7s linear infinite;
  text-shadow: 0 0 50px rgba(139,61,255,0.25);
}
@keyframes holoShift { to { background-position: 250% 0; } }

/* ---------- Kuyruklu yildiz imleci (canvas trail JS) ---------- */
#comet-trail { position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; }
@media (hover: none), (pointer: coarse) { #comet-trail { display: none; } }

/* ---------- Warp gecisi (scroll hizinda yildiz cizgileri) ---------- */
.warp-streaks { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.3s; mix-blend-mode: screen; }
body.warping .warp-streaks { opacity: 1; }

/* ---------- Bolumlere yildiz toz dokusu ---------- */
.starfield-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(173,132,247,0.8), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(54,224,214,0.7), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,95,209,0.6), transparent);
  background-repeat: repeat; background-size: 280px 280px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
}

/* ---------- Kozmik kart kenari (ince yildiz parlamasi) ---------- */
.card.cosmic::before {
  background: linear-gradient(140deg, var(--nebula-cyan), transparent 35%, transparent 65%, var(--nebula-pink));
  opacity: 0.4;
}

/* ---------- "Floating" yumusak suzulme ---------- */
.float-slow { animation: floatSlow 9s var(--ease-in-out) infinite; }
@keyframes floatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Hero icin daha derin atmosfer ---------- */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 58% 45%, transparent 40%, rgba(5,3,16,0.55) 100%);
}

@media (max-width: 720px) {
  .orbit.o3 { display: none; }
  .portal { left: 50%; width: 96vw; opacity: 0.85; }
  .orbit { left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .portal::before, .portal::after, .portal .ring, .orbit, .holo, .float-slow { animation: none !important; }
  .warp-streaks { display: none !important; }
}

/* ---------- WebGL nebula (hero en arka katman) ---------- */
.hero #nebula-gl {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block;
  image-rendering: auto;
}
/* GL aktifken 2D hero canvas'i biraz seffaflastir (cift nebula olmasin) */
.hero #hero-canvas { mix-blend-mode: screen; }

/* ---------- 3D gezegen bolumu ---------- */
.cosmic-planet { position: relative; }
#planet-canvas { width: 100%; aspect-ratio: 1; max-width: 460px; margin-inline: auto; display: block; }
.cosmic-planet .planet-wrap { position: relative; }
.cosmic-planet .planet-wrap::after {
  content: ''; position: absolute; inset: -10% ; z-index: -1;
  background: radial-gradient(circle, rgba(124,58,237,0.18), transparent 60%);
  filter: blur(30px);
}

/* ============================================================
   PERFORMANS KADEMELERI (html[data-perf]) — perf.js otomatik atar
   high: tum efektler · medium: WebGL/site-arkasi kapali · low: sade · off: durgun
   ============================================================ */

/* Site geneli kozmik arka plan (yalniz yuksek) */
#cosmic-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; display: none; }
html[data-perf="high"] #cosmic-bg { display: block; }

/* ORTA: WebGL nebula + site-arkasi yildiz alani kapali (2D hero & portal kalir) */
html[data-perf="medium"] #nebula-gl,
html[data-perf="medium"] #cosmic-bg { display: none; }

/* DUSUK: agir GPU efektleri kapali, sade ama sik kalir */
html[data-perf="low"] #nebula-gl,
html[data-perf="low"] #hero-canvas,
html[data-perf="low"] #cosmic-bg,
html[data-perf="low"] .aurora,
html[data-perf="low"] .grid-lines,
html[data-perf="low"] .portal,
html[data-perf="low"] .orbit-system,
html[data-perf="low"] .warp-streaks,
html[data-perf="low"] #comet-trail { display: none !important; }
html[data-perf="low"] .card,
html[data-perf="low"] .site-header.scrolled,
html[data-perf="low"] .btn-glass { backdrop-filter: none !important; }
html[data-perf="low"] .aurora span,
html[data-perf="low"] .glow-border::before,
html[data-perf="low"] .btn.btn-glow,
html[data-perf="low"] .holo,
html[data-perf="low"] .float-slow { animation: none !important; }
html[data-perf="low"] .hero-orb { opacity: 0.3; filter: blur(50px); }

/* KAPALI: yalniz durgun, sik bir koyu tema */
html[data-perf="off"] #nebula-gl,
html[data-perf="off"] #hero-canvas,
html[data-perf="off"] #cosmic-bg,
html[data-perf="off"] .aurora,
html[data-perf="off"] .grid-lines,
html[data-perf="off"] .portal,
html[data-perf="off"] .orbit-system,
html[data-perf="off"] .warp-streaks,
html[data-perf="off"] #comet-trail,
html[data-perf="off"] .preloader { display: none !important; }
html[data-perf="off"] *, html[data-perf="off"] *::before, html[data-perf="off"] *::after { animation: none !important; }
html[data-perf="off"] .card, html[data-perf="off"] .site-header.scrolled { backdrop-filter: none !important; }

/* ---------- Efekt yogunlugu secici (footer) ---------- */
.perf-control { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.perf-control select {
  background: rgba(255,255,255,0.04); color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer;
}
.perf-control select:focus { outline: none; border-color: var(--punch-violet-400); }