/* ============================================================
   Üretken YZ & Vibe Coding — İlk Çağ · Sinematik Sahne Sistemi v2
   Analog Patron - Dijital Ekip · UP-HB Academy
   ============================================================ */
:root {
  --ink: #f5f1e8;
  --ink-dim: rgba(245, 241, 232, 0.66);
  --bg: #050508;
  --pink: #df66bf;
  --blue-bright: #4d6bff;
  --turq: #00fff4;
  --gold: #e8b45a; /* sadece tablo ışığı; UI aksanı değil */
  --grad: linear-gradient(180deg, #ffffff 8%, #d8fffc 52%, #00fff4 105%);
  --serif: "Playfair Display", "Georgia", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
}
::selection { background: var(--pink); color: #fff; }

/* --- 3D toz/ışık canvas'ı: sahnelerin ÜZERİNDE yaşar --- */
#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100vh;
  z-index: 3; pointer-events: none;
  mix-blend-mode: screen; opacity: .8;
}

/* --- Film dokusu + vinyet: her şeyin üstünde --- */
.grain {
  position: fixed; inset: -50%; z-index: 4; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: grain 7s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0);} 20% { transform: translate(-4%,3%);}
  40% { transform: translate(3%,-4%);} 60% { transform: translate(-2%,-3%);} 80% { transform: translate(4%,2%);}
}
.vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 110% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* --- Üst bar --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4.5vw;
  background: linear-gradient(to bottom, rgba(5,5,8,0.8), transparent);
}
.topbar img { height: 50px; width: auto; }
.nav-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px;
  background: rgba(8,8,14,.55); backdrop-filter: blur(14px);
  border: 1px solid rgba(245,241,232,.14);
  box-shadow: 0 8px 30px rgba(0,0,0,.4), inset 0 0 20px rgba(0,255,244,.03);
}
.nav-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 8px; border-radius: 999px;
  color: var(--ink-dim); text-decoration: none;
  font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .16em; font-weight: 600;
  transition: all .3s; position: relative;
}
.nav-link .nl-orb {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--orb, var(--turq)), 0 0 14px -3px var(--orb, var(--turq));
  transition: transform .3s, box-shadow .3s;
}
.nav-link .nl-orb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.03); transition: transform .45s;
}
.nav-link:hover .nl-orb { transform: scale(1.1); box-shadow: 0 0 0 1.5px var(--orb, var(--turq)), 0 0 18px -1px var(--orb, var(--turq)); }
.nav-link:hover .nl-orb img { transform: scale(1.18); }
.nav-link.active .nl-orb { box-shadow: 0 0 0 1.5px var(--orb, var(--turq)), 0 0 20px 0 var(--orb, var(--turq)); }
.nav-link:hover { color: var(--ink); background: rgba(245,241,232,.06); }
.nav-link.active {
  color: var(--ink);
  background: linear-gradient(120deg, rgba(223,102,191,.18), rgba(0,255,244,.12));
  box-shadow: inset 0 0 0 1px rgba(0,255,244,.35), 0 0 18px rgba(0,255,244,.12);
  text-shadow: 0 0 14px rgba(0,255,244,.4);
}
.nav-link.cta {
  background: linear-gradient(100deg, var(--pink), var(--blue-bright));
  color: #fff;
  box-shadow: 0 4px 18px rgba(223,102,191,.4);
}
.nav-link.cta .nl-orb { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 0 16px -2px #fff; }
.nav-link.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(223,102,191,.55); }
@media (max-width: 860px) { .nav-pill { display: none; } }

/* ============================================================
   SAHNE SİSTEMİ — pinlenen sinematik perdeler
   ============================================================ */
.scene { position: relative; height: 300vh; }
.scene .pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  will-change: transform, opacity, border-radius;
}
.scene .layer { position: absolute; inset: 0; }

/* katman 1: tablo (kenardan taşacak kadar büyük → parallax payı) */
.scene .bg { inset: -10% -18%; }
.scene .bg img, .scene .bg video {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.scene .bg video { position: absolute; inset: 0; }
.scene .bg video + .bg-fallback { display: none; }
.scene .bg video.dead + .bg-fallback { display: block; }

/* --- Video hacim katmanı: mevcut videoya perspektif + ışık + optik kenar --- */
.scene .pin {
  perspective: 1350px;
  perspective-origin: var(--video-light-x, 50%) var(--video-light-y, 48%);
}
.video-depth-stage {
  position: absolute; inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate3d(var(--video-depth-tx, 0), var(--video-depth-ty, 0), 0)
    rotateX(var(--video-depth-rx, 0deg))
    rotateY(var(--video-depth-ry, 0deg))
    scale(var(--video-depth-scale, 1.075));
  will-change: transform;
  transition: transform .12s linear;
  box-shadow:
    0 62px 125px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.09),
    0 0 55px rgba(0,255,244,.055);
}
.video-depth-stage > video,
.video-depth-stage > .bg-fallback {
  translate: 0 0 22px;
  backface-visibility: hidden;
}
.video-depth-stage::before,
.video-depth-stage::after,
.video-depth-rim {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.video-depth-stage::before {
  z-index: 3;
  translate: 0 0 55px;
  background:
    radial-gradient(circle 34vw at var(--video-light-x, 50%) var(--video-light-y, 48%), rgba(255,255,255,.19), transparent 56%),
    linear-gradient(112deg, transparent 28%, rgba(0,255,244,.12) 48%, transparent 64%);
  mix-blend-mode: screen;
  opacity: .8;
}
.video-depth-stage::after {
  z-index: 4;
  translate: 0 0 76px;
  background:
    radial-gradient(ellipse 72% 68% at 50% 47%, transparent 52%, rgba(3,3,8,.34) 82%, rgba(2,2,6,.74) 100%),
    linear-gradient(to right, rgba(0,255,244,.055), transparent 13%, transparent 87%, rgba(223,102,191,.055));
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(216,255,252,.045);
}
.video-depth-rim {
  z-index: 5;
  inset: 1.3%;
  translate: 0 0 94px;
  border: 1px solid rgba(216,255,252,.19);
  border-radius: 3px;
  opacity: .62;
  box-shadow:
    0 0 32px rgba(0,255,244,.10),
    inset 0 0 44px rgba(223,102,191,.07);
  mix-blend-mode: screen;
}
.scene[data-mood="gold"] .video-depth-stage::before {
  background:
    radial-gradient(circle 36vw at var(--video-light-x, 50%) var(--video-light-y, 48%), rgba(255,238,196,.15), transparent 58%),
    linear-gradient(112deg, transparent 34%, rgba(232,180,90,.08) 49%, transparent 62%);
}
.scene-contain .video-depth-stage {
  transform:
    translate3d(var(--video-depth-tx, 0), var(--video-depth-ty, 0), 0)
    rotateX(var(--video-depth-rx, 0deg))
    rotateY(var(--video-depth-ry, 0deg))
    scale(var(--video-depth-scale, 1.025));
}

/* tam-kare sahne: panorama asla kırpılmaz (evrim) */
.scene-contain .bg { inset: 0; display: flex; align-items: center; }
.scene-contain .bg video, .scene-contain .bg img {
  object-fit: contain; background: #050508;
  transform: none !important;
}
.scene-contain .wash { background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(5,5,8,.55) 100%) !important; }

/* katman 2: renk/atmosfer yıkaması */
.scene .wash { z-index: 1; }
.scene[data-mood="gold"] .wash {
  background:
    radial-gradient(ellipse 85% 70% at 50% 42%, transparent 45%, rgba(5,5,8,.26) 82%, rgba(5,5,8,.7) 100%),
    linear-gradient(to top, rgba(5,5,8,.88) 0%, transparent 26%),
    linear-gradient(to bottom, rgba(5,5,8,.55) 0%, transparent 14%);
}
.scene[data-mood="dark"] .wash {
  background:
    radial-gradient(ellipse 85% 70% at 50% 45%, transparent 40%, rgba(5,5,8,.34) 80%, rgba(5,5,8,.78) 100%),
    linear-gradient(to top, rgba(5,5,8,.9) 0%, transparent 28%),
    linear-gradient(to bottom, rgba(5,5,8,.6) 0%, transparent 16%);
}

/* katman 3: dev perde numarası — arkada süzülür */
.scene .act {
  z-index: 1; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4vw;
}
.scene .act span {
  font-family: var(--serif); font-size: clamp(120px, 26vw, 380px); font-weight: 700;
  color: transparent; -webkit-text-stroke: 1px rgba(245,241,232,0.16);
  line-height: 1; will-change: transform; user-select: none;
}

/* katman 2.5: süzülen sis — sahne içi derinlik */
.scene .haze { z-index: 1; opacity: .5; }
.scene .haze::before, .scene .haze::after {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(ellipse 44% 30% at 25% 66%, rgba(223,102,191,.13), transparent 65%),
    radial-gradient(ellipse 40% 28% at 78% 30%, rgba(0,255,244,.11), transparent 65%);
  animation: hazedrift 24s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.scene .haze::after {
  background:
    radial-gradient(ellipse 36% 26% at 70% 72%, rgba(77,107,255,.12), transparent 65%),
    radial-gradient(ellipse 42% 30% at 22% 24%, rgba(255,255,255,.05), transparent 60%);
  animation-duration: 31s; animation-direction: alternate-reverse;
}
@keyframes hazedrift {
  0% { transform: translate(-3%, -2%) scale(1); }
  100% { transform: translate(3%, 2.5%) scale(1.08); }
}
@media (max-width: 860px) { .scene .haze { display: none; } }

@media (max-width: 860px) {
  .scene .pin { perspective: 900px; }
  .video-depth-stage { transition: transform .08s linear; }
  .video-depth-stage > video,
  .video-depth-stage > .bg-fallback { translate: 0 0 12px; }
  .video-depth-stage::before { opacity: .42; translate: 0 0 24px; }
  .video-depth-stage::after { translate: 0 0 32px; }
  .video-depth-rim { display: block; opacity: .25; translate: 0 0 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene .pin { perspective: none; }
  .video-depth-stage,
  .scene-contain .video-depth-stage {
    transform: none;
    transition: none;
    box-shadow: none;
  }
  .video-depth-stage > video,
  .video-depth-stage > .bg-fallback { translate: none; }
  .video-depth-stage::before { opacity: .26; translate: none; }
  .video-depth-stage::after { translate: none; }
  .video-depth-rim { display: none; }
}

/* katman 3.5: dekupe süzülen figürler — gerçek 3D derinlik */
.fg-el {
  position: absolute; z-index: 1; pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(0,255,244,.18));
}
.fg-el img { width: 100%; height: auto; display: block; }
.fg-el.glow-pink { filter: drop-shadow(0 30px 60px rgba(0,0,0,.65)) drop-shadow(0 0 38px rgba(223,102,191,.28)); }
@media (max-width: 860px) { .fg-el { display: none; } }

/* katman 4: içerik */
.scene .content {
  z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 5vw 10vh; max-width: none;
}
.scene .content > * { will-change: transform, opacity; }

.kicker {
  font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--turq); margin-bottom: 20px; font-weight: 600;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}
.kicker.gold { color: var(--pink); }
.hl {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(0,255,244,.35)) drop-shadow(0 4px 16px rgba(0,0,0,.85));
}
.kicker.pink { color: var(--pink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); }
h1 {
  font-size: clamp(42px, 7vw, 104px); line-height: 1.04;
  text-shadow: 0 3px 14px rgba(0,0,0,.92), 0 0 38px rgba(0,255,244,.28), 0 0 110px rgba(223,102,191,.25);
}
h2 {
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.12; margin-bottom: 24px;
  text-shadow: 0 3px 12px rgba(0,0,0,.92), 0 0 30px rgba(0,255,244,.22), 0 0 90px rgba(223,102,191,.2);
}
h3 { font-size: clamp(19px, 2.1vw, 27px); }
.lead {
  font-size: clamp(17px, 1.55vw, 21px); color: var(--ink-dim); max-width: 620px;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.scene .sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.2vw, 28px); margin: 18px 0 12px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.9));
  width: fit-content;
}

/* hero rozeti */
.date-badge {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(245,241,232,0.3); border-radius: 999px;
  padding: 10px 22px; font-size: 14px; letter-spacing: 0.08em;
  margin-bottom: 30px; width: fit-content;
  background: rgba(5,5,8,0.55); backdrop-filter: blur(8px);
}
.date-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 12px var(--turq); }

/* scroll ipucu */
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-dim); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--turq), transparent);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top;} 55% { transform: scaleY(1); transform-origin: top;} 100% { opacity: 0; transform: scaleY(1);} }

/* --- Butonlar --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px; border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: 0.02em;
  text-decoration: none; transition: transform .25s, box-shadow .25s;
  cursor: pointer; border: none;
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn-primary {
  position: relative; overflow: hidden;
  color: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(120deg, rgba(20,10,26,.92), rgba(8,10,26,.92)) padding-box,
    conic-gradient(from var(--spin), var(--pink), var(--turq), var(--blue-bright), var(--pink)) border-box;
  animation: btnspin 3.5s linear infinite, ctapulse 3s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(0,255,244,.45);
}
@keyframes btnspin { to { --spin: 360deg; } }
.btn-primary::before {
  content: ""; width: 15px; height: 20px; flex-shrink: 0;
  border: 1.6px solid rgba(0,255,244,.9);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(to right, transparent 44%, rgba(223,102,191,.95) 47%, rgba(0,255,244,.95) 53%, transparent 56%);
  background-size: 100% 100%;
  box-shadow: 0 0 10px rgba(0,255,244,.4), inset 0 0 6px rgba(223,102,191,.35);
  transition: background .4s, box-shadow .4s;
  animation: seampulse 2.4s ease-in-out infinite;
}
@keyframes seampulse {
  0%,100% { filter: brightness(1); } 50% { filter: brightness(1.9); }
}
.btn-primary:hover::before {
  background: linear-gradient(to right, rgba(223,102,191,.6), rgba(255,255,255,.95), rgba(0,255,244,.6));
  box-shadow: 0 0 18px rgba(0,255,244,.9);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: ctashine 3s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(223,102,191,0.55), 0 0 60px rgba(0,255,244,.25); }
.btn-ghost {
  border: 1px solid rgba(245,241,232,0.35); color: var(--ink);
  background: rgba(5,5,8,.4); backdrop-filter: blur(6px);
  position: relative; overflow: hidden;
}
.btn-ghost::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(0,255,244,.14), transparent);
  animation: ctashine 3.6s ease-in-out infinite;
}
.btn-ghost:hover { border-color: var(--turq); color: var(--turq); box-shadow: 0 0 26px rgba(0,255,244,.18); }
.cta-row { display: flex; gap: 18px; margin-top: 36px; flex-wrap: wrap; }

/* --- Sticky CTA --- */
.sticky-cta {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px; border-radius: 999px;
  background: linear-gradient(100deg, var(--pink), var(--blue-bright));
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 38px rgba(0,0,0,0.6), 0 0 22px rgba(223,102,191,0.4);
  transition: transform .25s;
}
.sticky-cta:hover { transform: translateY(-3px) scale(1.02); }
.sticky-cta small { font-weight: 400; opacity: .85; }

/* ============================================================
   ARA BÖLÜMLER (siyah zemin — kartlar, program, fiyat)
   ============================================================ */
.interlude {
  position: relative; z-index: 2; padding: 15vh 5.5vw;
  max-width: 1440px; margin: 0 auto;
  background: transparent;
}
.interlude::before {
  content: ""; position: absolute; inset: -12% -40%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 42% 34% at 12% 18%, rgba(223,102,191,.1), transparent 62%),
    radial-gradient(ellipse 44% 36% at 88% 82%, rgba(0,255,244,.09), transparent 62%),
    radial-gradient(ellipse 30% 26% at 78% 12%, rgba(77,107,255,.08), transparent 60%);
}

/* prompt satırı */
.prompt-field {
  margin: 44px 0 0; max-width: 640px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(0,255,244,0.4); border-radius: 16px;
  padding: 20px 26px; background: rgba(8,8,14,0.85);
  box-shadow: 0 0 46px rgba(0,255,244,0.1), inset 0 0 24px rgba(0,3,255,0.07);
  font-family: "SF Mono", "Menlo", monospace; font-size: 15px;
}
.prompt-field .p-mark { color: var(--turq); }
.prompt-field .cursor { display: inline-block; width: 9px; height: 19px; background: var(--pink); animation: blink 1.1s steps(1) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }
.quote-attr { margin-top: 18px; color: var(--turq); letter-spacing: 0.2em; font-size: 13px; text-transform: uppercase; }

/* portallar */
.portals { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 56px; }
.portal {
  position: relative; border-radius: 200px 200px 26px 26px;
  border: 1px solid rgba(245,241,232,0.16);
  padding: 0; text-align: center; text-decoration: none;
  overflow: hidden; transition: transform .35s, border-color .35s, box-shadow .35s;
  min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end;
}
.portal .p-img { position: absolute; inset: 0; }
.portal .p-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portal .p-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,8,.96) 12%, rgba(5,5,8,.35) 55%, rgba(5,5,8,.15));
}
.portal:hover { transform: translateY(-8px); }
.portal:hover .p-img img { transform: scale(1.06); }
.portal.p1:hover { border-color: var(--pink); box-shadow: 0 24px 60px rgba(223,102,191,0.18); }
.portal.p2:hover { border-color: var(--turq); box-shadow: 0 24px 60px rgba(0,255,244,0.14); }
.portal .p-body { position: relative; z-index: 1; padding: 0 36px 44px; }
.portal .p-day { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); }
.portal h3 { font-size: clamp(26px, 2.6vw, 38px); margin: 14px 0 4px; }
.portal .p-theme { font-family: var(--serif); font-style: italic; color: var(--pink); margin-bottom: 16px; }
.portal.p2 .p-theme { color: var(--turq); }
.portal p { color: var(--ink-dim); font-size: 15.5px; max-width: 360px; margin: 0 auto 22px; }
.portal .p-go { color: var(--pink); font-weight: 600; font-size: 15px; }

/* çıktı kartları */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 56px; }
.outcome {
  border: 1px solid rgba(245,241,232,0.13); border-radius: 22px;
  padding: 40px 30px; background: rgba(10,10,16,0.72);
  transition: transform .3s, border-color .3s;
}
.outcome:hover { transform: translateY(-6px); }
.outcome:nth-child(1):hover { border-color: var(--pink); }
.outcome:nth-child(2):hover { border-color: var(--turq); }
.outcome:nth-child(3):hover { border-color: var(--blue-bright); }
.outcome .o-num { font-family: var(--serif); font-size: 46px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.outcome h3 { margin: 14px 0 10px; }
.outcome p { color: var(--ink-dim); font-size: 15.5px; }

/* program tablet/parşömen */
.program { display: flex; flex-direction: column; gap: 20px; margin-top: 54px; }
.tablet {
  border: 1px solid rgba(245,241,232,0.14); border-radius: 18px;
  background: linear-gradient(120deg, rgba(245,241,232,0.05), rgba(10,10,16,0.7));
  overflow: hidden; transition: border-color .3s;
}
.tablet summary {
  display: flex; align-items: center; gap: 26px;
  padding: 26px 32px; cursor: pointer; list-style: none;
}
.tablet summary::-webkit-details-marker { display: none; }
.tablet .t-num { font-family: var(--serif); font-size: 34px; color: var(--pink); min-width: 58px; }
.tablet .t-thumb {
  width: 74px; height: 74px; flex-shrink: 0;
  border-radius: 74px 74px 12px 12px; overflow: hidden;
  border: 1px solid rgba(223,102,191,.4);
  box-shadow: 0 0 16px rgba(223,102,191,.18), 0 8px 18px rgba(0,0,0,.5);
}
.page-gun2 .tablet .t-thumb { border-color: rgba(0,255,244,.4); box-shadow: 0 0 16px rgba(0,255,244,.16), 0 8px 18px rgba(0,0,0,.5); }
.tablet .t-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tablet:hover .t-thumb img { transform: scale(1.14); }
@media (max-width: 640px) { .tablet .t-thumb { width: 56px; height: 56px; } .tablet summary { gap: 14px; } }
.page-gun2 .tablet .t-num { color: var(--turq); }
.tablet h3 { flex: 1; font-size: clamp(18px, 2vw, 24px); }
.tablet .t-chip { font-size: 12px; letter-spacing: .12em; color: var(--ink-dim); border: 1px solid rgba(245,241,232,0.2); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.tablet .t-body { padding: 0 32px 30px 116px; color: var(--ink-dim); font-size: 15.5px; max-width: 760px; }
.tablet[open] { border-color: rgba(223,102,191,0.55); }
.page-gun2 .tablet[open] { border-color: rgba(0,255,244,0.45); }

/* telefon mockup */
.phone-stage { display: flex; align-items: center; gap: 7vw; flex-wrap: wrap; }
.phone {
  width: 250px; aspect-ratio: 9/19; border-radius: 38px;
  border: 2px solid rgba(245,241,232,0.25);
  background: #0c0c14; padding: 12px; flex-shrink: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(223,102,191,0.16);
  animation: floaty 7s ease-in-out infinite;
}
.phone .screen {
  width: 100%; height: 100%; border-radius: 28px; overflow: hidden; position: relative;
}
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }
.phone .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.4);
}
.phone .play::after { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.phone .p-caption { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.2deg);} 50% { transform: translateY(-16px) rotate(1.2deg);} }

/* laptop + dashboard */
.duo-stage { display: flex; gap: 5vw; align-items: center; flex-wrap: wrap; margin-top: 50px; }
.laptop { width: min(460px, 88vw); animation: floaty 8s ease-in-out infinite; }
.laptop .lid {
  border-radius: 14px 14px 0 0; border: 2px solid rgba(245,241,232,0.22); border-bottom: none;
  background: #0c0c14; padding: 12px; aspect-ratio: 16/10;
}
.laptop .lid .term {
  height: 100%; border-radius: 8px; background: #07070e; padding: 16px;
  font-family: "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.9; overflow: hidden;
}
.laptop .base { height: 14px; background: linear-gradient(#20202c, #0c0c14); border-radius: 0 0 16px 16px; border: 2px solid rgba(245,241,232,0.22); border-top: none; }
.term .c1 { color: var(--turq); } .term .c2 { color: var(--pink); } .term .c3 { color: #9aa4ff; } .term .cd { color: rgba(245,241,232,0.45); }
.dash-mock {
  width: min(420px, 88vw); border-radius: 18px; border: 1px solid rgba(0,255,244,0.3);
  background: rgba(8,8,14,0.92); padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 46px rgba(0,255,244,0.1);
  animation: floaty 9s ease-in-out infinite reverse;
}
.dash-mock .d-title { font-size: 13px; letter-spacing: .18em; color: var(--turq); text-transform: uppercase; margin-bottom: 16px; }
.dash-mock .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-mock .d-card { border: 1px solid rgba(245,241,232,0.12); border-radius: 12px; padding: 14px; font-size: 12.5px; }
.dash-mock .d-card b { display: block; font-size: 13.5px; margin-bottom: 4px; color: var(--ink); }
.dash-mock .d-card span { color: var(--ink-dim); }
.dash-mock .d-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #35e07c; margin-right: 6px; box-shadow: 0 0 8px #35e07c; }

/* araç çipleri */
.tools-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.tool-chip {
  border: 1px solid rgba(245,241,232,0.18); border-radius: 999px;
  padding: 12px 24px; font-size: 14.5px; letter-spacing: .04em; color: var(--ink-dim);
  background: rgba(10,10,16,0.6); transition: all .3s;
}
.tool-chip:hover { color: var(--turq); border-color: var(--turq); transform: translateY(-3px); }

/* dahil olanlar */
.includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; margin-top: 50px; max-width: 900px; }
.include { display: flex; gap: 16px; align-items: flex-start; }
.include .i-mark { color: var(--turq); font-size: 20px; line-height: 1.4; }
.include p b { color: var(--ink); display: block; }
.include p { color: var(--ink-dim); font-size: 15.5px; }

/* eğitmen */
.instructor { display: flex; gap: 6vw; align-items: center; flex-wrap: wrap; }
.instructor .portrait {
  width: min(360px, 80vw); border-radius: 200px 200px 22px 22px;
  border: 1px solid rgba(223,102,191,0.4); overflow: hidden; flex-shrink: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.instructor .portrait img { width: 100%; display: block; }
.instructor .portrait.portrait-cut {
  width: min(440px, 86vw); border: none; border-radius: 0; overflow: visible;
  box-shadow: none; position: relative;
}
.instructor .portrait.portrait-cut::before {
  content: ""; position: absolute; inset: 8% -6% -4% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(223,102,191,.22), rgba(0,255,244,.1) 55%, transparent 75%);
  filter: blur(12px);
}
.instructor .portrait.portrait-cut img {
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(223,102,191,.25));
  animation: floaty 9s ease-in-out infinite;
}
.instructor .bio { flex: 1; min-width: 300px; }
.instructor .bio .lead { margin: 18px 0 22px; }
.instructor .creds { display: flex; flex-direction: column; gap: 10px; color: var(--ink-dim); font-size: 15.5px; }
.instructor .creds span::before { content: "— "; color: var(--pink); }
.instructor .creds a { color: var(--turq); text-decoration: none; }
.instructor .creds a:hover { text-decoration: underline; }
.socials { margin-top: 26px; display: flex; gap: 14px; }
.social-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(223,102,191,0.45); color: var(--ink);
  text-decoration: none; font-size: 14.5px; letter-spacing: .03em;
  transition: all .3s; background: rgba(8,8,14,.6);
}
.social-link svg { color: var(--pink); }
.social-link:hover { border-color: var(--turq); color: var(--turq); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,255,244,.12); }
.social-link:hover svg { color: var(--turq); }

/* manifesto */
.manifesto { text-align: center; max-width: 980px; margin: 0 auto; }
.manifesto .duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; margin-top: 56px; }
.manifesto .side { border: 1px solid rgba(245,241,232,0.14); border-radius: 22px; padding: 44px 30px; background: rgba(10,10,16,0.7); }
.manifesto .side h3 { margin-bottom: 12px; }
.manifesto .side.analog { border-color: rgba(223,102,191,0.45); }
.manifesto .side.analog h3 { color: var(--pink); }
.manifesto .side.dijital { border-color: rgba(0,255,244,0.35); }
.manifesto .side.dijital h3 { color: var(--turq); }
.manifesto .side p { color: var(--ink-dim); font-size: 15.5px; }
.manifesto .amp { font-family: var(--serif); font-size: 54px; color: var(--pink); }

/* fiyat */
.pricing { text-align: center; }
.price-card {
  max-width: 560px; margin: 50px auto 0;
  border: 1px solid rgba(223,102,191,0.4); border-radius: 28px;
  padding: 56px 44px; background: rgba(8,8,14,0.86);
  box-shadow: 0 0 80px rgba(223,102,191,0.1);
}
.price-card .p-label { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-dim); }
.price-card .p-amount { font-family: var(--serif); font-size: clamp(56px, 8vw, 84px); margin: 14px 0 4px; }
.price-card .p-amount small { font-size: .38em; color: var(--ink-dim); font-family: var(--sans); }
.price-card .p-note { color: var(--ink-dim); font-size: 15px; margin-bottom: 34px; }
.price-card ul { list-style: none; text-align: left; margin: 0 auto 38px; max-width: 380px; color: var(--ink-dim); font-size: 15.5px; display: flex; flex-direction: column; gap: 10px; }
.price-card ul li::before { content: "✓  "; color: var(--turq); font-weight: 700; }

/* köprü */
.bridge { text-align: center; }
.bridge a.big-link {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 44px);
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--pink);
  transition: color .3s;
}
.bridge a.big-link:hover { color: var(--pink); }

/* footer */
footer {
  position: relative; z-index: 2;
  padding: 60px 8vw 90px; text-align: center;
  border-top: 1px solid rgba(245,241,232,0.1);
}
footer img { height: 60px; margin-bottom: 22px; }
footer .made-with {
  display: inline-block; margin-top: 18px;
  border: 1px solid rgba(0,255,244,0.35); border-radius: 999px;
  padding: 9px 22px; font-size: 13px; letter-spacing: .06em; color: var(--turq);
}
footer .fine { color: var(--ink-dim); font-size: 13.5px; margin-top: 18px; }

/* --- Sihirli geçişler: ışık patlaması + huzme --- */
.magic-flash {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 55%),
    rgba(255,255,255,.95), rgba(0,255,244,.55) 16%, rgba(223,102,191,.32) 36%, rgba(77,107,255,.14) 52%, transparent 66%);
  mix-blend-mode: screen;
}
.magic-beam {
  position: fixed; top: -25%; bottom: -25%; left: 0; width: 36vw; z-index: 5;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 8%, rgba(0,255,244,.5) 38%, rgba(255,255,255,.55) 50%, rgba(223,102,191,.45) 62%, transparent 92%);
  filter: blur(26px);
  transform: skewX(-12deg) translateX(-70vw);
}

/* --- Ön başvuru formu --- */
.apply-card {
  max-width: 620px; margin: 50px auto 0;
  border: 1px solid rgba(0,255,244,0.3); border-radius: 28px;
  padding: 48px 42px; background: rgba(8,8,14,0.88);
  box-shadow: 0 0 80px rgba(0,255,244,0.08);
  text-align: left;
}
.apply-card .form-row { margin-bottom: 18px; }
.apply-card label { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.apply-card input, .apply-card select, .apply-card textarea {
  width: 100%; padding: 14px 18px; border-radius: 12px;
  border: 1px solid rgba(245,241,232,0.2); background: rgba(5,5,8,.7);
  color: var(--ink); font-family: var(--sans); font-size: 15.5px;
  outline: none; transition: border-color .25s, box-shadow .25s;
}
.apply-card input:focus, .apply-card select:focus, .apply-card textarea:focus {
  border-color: var(--turq); box-shadow: 0 0 22px rgba(0,255,244,.15);
}
.apply-card textarea { min-height: 96px; resize: vertical; }
.apply-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.apply-alt { margin-top: 26px; text-align: center; color: var(--ink-dim); font-size: 14px; }
.apply-alt a { color: var(--turq); text-decoration: none; }
.apply-alt a:hover { text-decoration: underline; }
.form-status { display: none; margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-size: 15px; }
.form-status.ok { display: block; border: 1px solid rgba(53,224,124,.5); color: #7bf0ac; background: rgba(53,224,124,.08); }
.form-status.err { display: block; border: 1px solid rgba(255,120,120,.5); color: #ffb0b0; background: rgba(255,120,120,.08); }

/* --- Görselli 'dahil olanlar' kartları --- */
.includes-rich { gap: 22px 26px; max-width: 1000px; }
.includes-rich .include {
  align-items: center; gap: 18px;
  border: 1px solid rgba(245,241,232,0.13); border-radius: 18px;
  padding: 16px 20px 16px 16px; background: rgba(10,10,16,0.65);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.includes-rich .include:hover { transform: translateY(-4px); border-color: rgba(0,255,244,.5); box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 26px rgba(0,255,244,.12); }
.includes-rich .include:nth-child(odd):hover { border-color: rgba(223,102,191,.55); box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 26px rgba(223,102,191,.15); }
.i-thumb {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 88px 88px 14px 14px; overflow: hidden;
  border: 1px solid rgba(223,102,191,.4);
  box-shadow: 0 0 18px rgba(223,102,191,.2), 0 8px 20px rgba(0,0,0,.5);
}
.includes-rich .include:nth-child(even) .i-thumb { border-color: rgba(0,255,244,.4); box-shadow: 0 0 18px rgba(0,255,244,.18), 0 8px 20px rgba(0,0,0,.5); }
.i-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .5s; }
.includes-rich .include:hover .i-thumb img { transform: scale(1.12); }

/* --- Katmanlı eser kartları --- */
.outcomes-rich .outcome { padding: 0 0 30px; overflow: hidden; position: relative; }
.outcomes-rich .outcome::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px;
  background: linear-gradient(140deg, rgba(223,102,191,.6), transparent 35%, transparent 65%, rgba(0,255,244,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.outcomes-rich .outcome:nth-child(odd) { animation: teamfloat 7s ease-in-out infinite; }
.outcomes-rich .outcome:nth-child(even) { animation: teamfloat 8.4s ease-in-out infinite reverse; }
.o-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-radius: 22px 22px 0 0; margin-bottom: 22px;
}
.o-media img, .o-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.outcomes-rich .outcome:hover .o-media img, .outcomes-rich .outcome:hover .o-media video { transform: scale(1.08); }
.o-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,14,.95), transparent 55%);
}
.o-media .o-num {
  position: absolute; bottom: 8px; left: 22px; z-index: 1;
  font-size: 52px; filter: drop-shadow(0 0 18px rgba(223,102,191,.5));
}
.outcomes-rich .outcome h3 { padding: 0 26px; }
.outcomes-rich .outcome p { padding: 0 26px; }

/* --- Kozmik video zeminli bölüm + canlı ışıklı yazılar --- */
.outcomes-stage { position: relative; overflow: hidden; border-radius: 32px; max-width: 1500px; padding: 13vh 6vw; }
.stage-video { position: absolute; inset: 0; z-index: -1; }
.stage-video video { width: 100%; height: 100%; object-fit: cover; }
.stage-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(5,5,8,.25), rgba(5,5,8,.82) 90%); }
.glow-title {
  animation: titleglow 3.4s ease-in-out infinite;
}
@keyframes titleglow {
  0%,100% { text-shadow: 0 3px 12px rgba(0,0,0,.92), 0 0 26px rgba(0,255,244,.3), 0 0 80px rgba(223,102,191,.25); }
  50% { text-shadow: 0 3px 12px rgba(0,0,0,.92), 0 0 44px rgba(0,255,244,.6), 0 0 130px rgba(223,102,191,.5); }
}
.glow-text { animation: kickerglow 2.8s ease-in-out infinite; }
@keyframes kickerglow {
  0%,100% { text-shadow: 0 0 10px rgba(0,255,244,.4); }
  50% { text-shadow: 0 0 24px rgba(0,255,244,.9); }
}
.outcomes-stage .outcome { background: rgba(8,8,14,0.62); backdrop-filter: blur(8px); border-color: rgba(245,241,232,0.2); }
.outcomes-stage .outcome:hover { box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgba(223,102,191,.2); }

/* --- Evrim poster videosu bandı --- */
.poster-band {
  position: relative; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(223,102,191,.4); margin-top: 50px;
  box-shadow: 0 0 60px rgba(223,102,191,.18), 0 28px 70px rgba(0,0,0,.55);
}
.poster-band video, .poster-band img { width: 100%; display: block; }

/* --- Patron + büyük canlı ekip --- */
.patron-row { display: flex; justify-content: center; margin: 54px 0 12px; }
.patron-card {
  text-align: center; border: 2px solid rgba(223,102,191,.6); border-radius: 26px;
  padding: 30px 52px 28px; background: rgba(8,8,14,0.78); min-width: 250px;
  box-shadow: 0 0 50px rgba(223,102,191,.25), 0 20px 60px rgba(0,0,0,.5);
  animation: teamfloat 5s ease-in-out infinite;
}
.patron-card img {
  width: 148px; height: 148px; border-radius: 22px;
  border: 2px solid var(--pink);
  box-shadow: 0 0 30px rgba(223,102,191,.4);
}
.patron-card b { display: block; margin-top: 14px; font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1.2; }
.patron-card span {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink); font-weight: 700; white-space: nowrap;
  border: 1px solid rgba(223,102,191,.5); border-radius: 999px; padding: 6px 16px;
}
.team-divider {
  text-align: center; margin: 30px 0 6px; font-size: 13px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--turq); font-weight: 700;
  animation: kickerglow 2.8s ease-in-out infinite;
}

/* Lale — ekip lideri kartı (turkuaz) */
.patron-card.lead-patron { border-color: rgba(0,255,244,.55); box-shadow: 0 0 44px rgba(0,255,244,.22), 0 20px 60px rgba(0,0,0,.5); padding: 24px 44px 22px; }
.patron-card.lead-patron img { width: 118px; height: 118px; border-color: var(--turq); box-shadow: 0 0 26px rgba(0,255,244,.35); image-rendering: pixelated; }
.patron-card.lead-patron span { color: var(--turq); border-color: rgba(0,255,244,.5); }

/* --- Işıklı Yol Haritası (evrim çizgisi) --- */
.roadmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 64px; }
.roadmap {
  position: relative; border: 1px solid rgba(245,241,232,0.1); border-radius: 26px;
  padding: 44px 34px 34px; background: rgba(8,8,14,0.6);
}
.roadmap .r-title { text-align: center; margin-bottom: 8px; }
.roadmap .r-sub { text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-dim); margin-bottom: 40px; font-size: 15.5px; }
.r-line { position: relative; margin-left: 26px; padding-left: 40px; }
.r-line::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--pink), #b06cf0 40%, var(--turq));
  box-shadow: 0 0 18px rgba(223,102,191,.55), 0 0 34px rgba(0,255,244,.3);
  animation: lineglow 3.2s ease-in-out infinite;
}
.roadmap.r-g2 .r-line::before {
  background: linear-gradient(180deg, var(--turq), #4d6bff 55%, var(--pink));
  box-shadow: 0 0 18px rgba(0,255,244,.55), 0 0 34px rgba(223,102,191,.3);
}
@keyframes lineglow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
.r-node { position: relative; padding: 0 0 38px; }
.r-node:last-child { padding-bottom: 6px; }
.r-node::before {
  content: ""; position: absolute; left: -47px; top: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle, #fff 20%, var(--pink) 60%, transparent 75%);
  box-shadow: 0 0 14px var(--pink), 0 0 30px rgba(223,102,191,.6);
  animation: nodepulse 2.6s ease-in-out infinite;
}
.roadmap.r-g2 .r-node::before {
  background: radial-gradient(circle, #fff 20%, var(--turq) 60%, transparent 75%);
  box-shadow: 0 0 14px var(--turq), 0 0 30px rgba(0,255,244,.6);
}
.r-node:nth-child(2)::before { animation-delay: .4s; }
.r-node:nth-child(3)::before { animation-delay: .8s; }
.r-node:nth-child(4)::before { animation-delay: 1.2s; }
.r-node:nth-child(5)::before { animation-delay: 1.6s; }
@keyframes nodepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.r-node { display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: start; }
.r-thumb {
  width: 86px; height: 86px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(223,102,191,.45);
  box-shadow: 0 0 20px rgba(223,102,191,.25), 0 10px 26px rgba(0,0,0,.5);
  transition: transform .35s, box-shadow .35s;
}
.roadmap.r-g2 .r-thumb { border-color: rgba(0,255,244,.45); box-shadow: 0 0 20px rgba(0,255,244,.22), 0 10px 26px rgba(0,0,0,.5); }
.r-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.r-node:hover .r-thumb { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 34px rgba(223,102,191,.45), 0 16px 34px rgba(0,0,0,.55); }
.roadmap.r-g2 .r-node:hover .r-thumb { box-shadow: 0 0 34px rgba(0,255,244,.4), 0 16px 34px rgba(0,0,0,.55); }
.r-node:hover .r-thumb img { transform: scale(1.12); }
@media (max-width: 560px) { .r-node { grid-template-columns: 64px 1fr; gap: 14px; } .r-thumb { width: 64px; height: 64px; } }

.r-node .r-era {
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700;
  color: var(--pink); margin-bottom: 4px;
}
.roadmap.r-g2 .r-node { display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: start; }
.r-thumb {
  width: 86px; height: 86px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(223,102,191,.45);
  box-shadow: 0 0 20px rgba(223,102,191,.25), 0 10px 26px rgba(0,0,0,.5);
  transition: transform .35s, box-shadow .35s;
}
.roadmap.r-g2 .r-thumb { border-color: rgba(0,255,244,.45); box-shadow: 0 0 20px rgba(0,255,244,.22), 0 10px 26px rgba(0,0,0,.5); }
.r-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.r-node:hover .r-thumb { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 34px rgba(223,102,191,.45), 0 16px 34px rgba(0,0,0,.55); }
.roadmap.r-g2 .r-node:hover .r-thumb { box-shadow: 0 0 34px rgba(0,255,244,.4), 0 16px 34px rgba(0,0,0,.55); }
.r-node:hover .r-thumb img { transform: scale(1.12); }
@media (max-width: 560px) { .r-node { grid-template-columns: 64px 1fr; gap: 14px; } .r-thumb { width: 64px; height: 64px; } }

.r-node .r-era { color: var(--turq); }
.r-node h4 { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); color: var(--ink); margin-bottom: 4px; }
.r-node p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; max-width: 420px; }
.r-node .r-final {
  display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: .1em;
  border: 1px solid rgba(0,255,244,.4); color: var(--turq); border-radius: 999px; padding: 5px 14px;
}
.roadmap.r-g2 .r-node .r-final { border-color: rgba(223,102,191,.5); color: var(--pink); }
@media (max-width: 980px) { .roadmaps { grid-template-columns: 1fr; } }

/* --- Dijital Ekip (8-bit avatarlar, canlı) --- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 22px; margin-top: 28px;
}
.team-card {
  text-align: center; border: 1px solid rgba(0,255,244,0.22); border-radius: 18px;
  padding: 18px 10px 14px; background: rgba(8,8,14,0.72);
  transition: transform .3s, border-color .3s, box-shadow .3s;
  animation: teamfloat 5.4s ease-in-out infinite;
}
.team-card:nth-child(3n) { animation-delay: -1.8s; }
.team-card:nth-child(3n+1) { animation-delay: -3.6s; }
.team-card:nth-child(2n) { animation-duration: 6.6s; }
@keyframes teamfloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-9px);} }
.team-card:hover { border-color: var(--pink); box-shadow: 0 14px 40px rgba(223,102,191,.22); }
.team-card img {
  width: 104px; height: 104px; border-radius: 18px; image-rendering: pixelated;
  border: 1px solid rgba(0,255,244,.35);
  box-shadow: 0 0 18px rgba(0,255,244,.15);
  transition: transform .3s;
}
.team-card:hover img { transform: scale(1.12) rotate(-3deg); box-shadow: 0 0 30px rgba(223,102,191,.4); }
.team-card b { display: block; margin-top: 12px; font-size: 16px; color: var(--ink); }
.team-card span { display: block; font-size: 12px; letter-spacing: .06em; color: var(--ink-dim); margin-top: 3px; }
.team-card.lead-card { border-color: rgba(223,102,191,.5); }
.team-card.lead-card img { border-color: var(--pink); }

/* --- Dijital sticky buton: video zemin + dönen neon çerçeve --- */
.sticky-cta.cta-digital {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  padding: 0; background: none; overflow: hidden; border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(223,102,191,.35), 0 0 60px rgba(0,255,244,.18);
  animation: ctapulse 3s ease-in-out infinite;
}
@keyframes ctapulse {
  0%,100% { box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 26px rgba(223,102,191,.35), 0 0 50px rgba(0,255,244,.15); }
  50% { box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 44px rgba(223,102,191,.6), 0 0 90px rgba(0,255,244,.35); }
}
.sticky-cta.cta-digital::before {
  content: ""; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, var(--pink), var(--turq), var(--blue-bright), var(--pink));
  animation: ctaspin 4s linear infinite;
}
@keyframes ctaspin { to { transform: rotate(360deg); } }
.sticky-cta.cta-digital video {
  position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
  object-fit: cover; border-radius: 999px; z-index: 1;
}
.sticky-cta.cta-digital .cta-inner {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  background: linear-gradient(100deg, rgba(5,5,8,.45), rgba(5,5,8,.2));
  color: #fff; font-weight: 700; font-size: 15px;
  text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 18px rgba(0,255,244,.5);
}
.sticky-cta.cta-digital .cta-inner small { font-weight: 400; opacity: .9; }
.sticky-cta.cta-digital::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: ctashine 2.6s ease-in-out infinite;
}
@keyframes ctashine { 0% { left: -50%; } 60%,100% { left: 120%; } }
.sticky-cta.cta-digital:hover { transform: translateY(-3px) scale(1.04); }

/* --- KAPI BUTONLAR (hero) --- */
.door-btn {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; cursor: pointer;
  padding: 8px 22px 8px 8px; border-radius: 999px;
  background: rgba(5,5,8,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(223,102,191,.45);
  box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 22px rgba(223,102,191,.2);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.door-btn:hover { transform: translateY(-3px); border-color: rgba(0,255,244,.7); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 44px rgba(0,255,244,.3); }
.db-arch {
  position: relative; display: block; width: 46px; height: 60px;
  border-radius: 46px 46px 8px 8px; overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(#070810, #070810) padding-box,
    linear-gradient(100deg, var(--pink) 0%, #ff8fd8 42%, #5ff3ea 58%, var(--turq) 100%) border-box;
  box-shadow: -6px 0 16px -6px rgba(223,102,191,.55), 6px 0 16px -6px rgba(0,255,244,.55);
  flex-shrink: 0;
}
.db-arch video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-arch .p-door { animation-duration: 6s; }
.door-btn:hover .db-arch .p-left { transform: translateX(-101%) !important; animation: none; }
.door-btn:hover .db-arch .p-right { transform: translateX(101%) !important; animation: none; }
.db-label {
  color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 16px rgba(0,255,244,.35);
}
.door-btn.ghost { border-color: rgba(245,241,232,.3); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.door-btn.ghost:hover { border-color: var(--turq); }

/* --- PORTAL BUTON: açılan kemerli kapı --- */
.cta-portal {
  position: fixed; right: 24px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.portal-arch {
  position: relative; display: block;
  width: 96px; height: 128px;
  border-radius: 96px 96px 16px 16px;
  overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(#070810, #070810) padding-box,
    linear-gradient(100deg, var(--pink) 0%, #ff8fd8 42%, #5ff3ea 58%, var(--turq) 100%) border-box;
  box-shadow: -12px 0 28px -8px rgba(223,102,191,.5), 12px 0 28px -8px rgba(0,255,244,.5), 0 16px 40px rgba(0,0,0,.6);
  animation: archglow 3.2s ease-in-out infinite;
}
@keyframes archglow {
  0%,100% { box-shadow: -10px 0 24px -8px rgba(223,102,191,.4), 10px 0 24px -8px rgba(0,255,244,.4), 0 16px 40px rgba(0,0,0,.6); }
  50% { box-shadow: -14px 0 40px -6px rgba(223,102,191,.75), 14px 0 40px -6px rgba(0,255,244,.75), 0 16px 40px rgba(0,0,0,.6); }
}
.portal-arch video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* kapı kanatları: otantik ahşap-bronz doku; aralık durur, ışık sızar; hover'da tam açılır */
.p-door {
  position: absolute; top: 0; bottom: 0; width: 52%; z-index: 2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 24%, transparent 76%, rgba(0,0,0,.35)),
    repeating-linear-gradient(92deg, #211610 0 4px, #2a1c14 4px 7px, #1c110c 7px 11px),
    linear-gradient(180deg, #271b12, #150e09);
  transition: transform .7s cubic-bezier(.6,0,.2,1);
}
/* gömme kemerli pano + pirinç tokmak */
.p-door::before {
  content: ""; position: absolute; inset: 10% 16% 9%;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10) 35%, rgba(255,255,255,.025));
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), inset 0 -1px 2px rgba(255,255,255,.05), 0 1px 1px rgba(255,255,255,.05);
}
.p-left::before { border-radius: 48px 6px 4px 4px; }
.p-right::before { border-radius: 6px 48px 4px 4px; }
.p-left { background-image:
    radial-gradient(circle at 86% 56%, #efd9a0 0 1.5px, #8a6a35 2.5px, transparent 4px),
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 24%, transparent 76%, rgba(0,0,0,.35)),
    repeating-linear-gradient(92deg, #211610 0 4px, #2a1c14 4px 7px, #1c110c 7px 11px),
    linear-gradient(180deg, #271b12, #150e09); }
.p-right { background-image:
    radial-gradient(circle at 14% 56%, #efd9a0 0 1.5px, #8a6a35 2.5px, transparent 4px),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 24%, transparent 76%, rgba(255,255,255,.06)),
    repeating-linear-gradient(88deg, #211610 0 4px, #2a1c14 4px 7px, #1c110c 7px 11px),
    linear-gradient(180deg, #271b12, #150e09); }
.p-door::after {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  color: rgba(245,241,232,.85); text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,255,244,.6);
  white-space: nowrap;
}
.p-left::after { content: "ÜRETKEN YZ"; color: rgba(255,210,240,.9); text-shadow: 0 0 10px rgba(223,102,191,.7); }
.p-right::after { content: "VİBE CODING"; color: rgba(200,255,252,.9); }
.db-arch .p-door::after { content: none; }
.p-left { left: 0; border-right: 1px solid rgba(0,255,244,.9);
  box-shadow: inset -6px 0 14px rgba(0,255,244,.35);
  transform-origin: left center;
  animation: doorteaseL 5.5s ease-in-out infinite; }
.p-right { right: 0; border-left: 1px solid rgba(223,102,191,.9);
  box-shadow: inset 6px 0 14px rgba(223,102,191,.35);
  transform-origin: right center;
  animation: doorteaseR 5.5s ease-in-out infinite; }
@keyframes doorteaseL {
  0%, 55%, 100% { transform: translateX(0); }
  65%, 85% { transform: translateX(-101%); }
}
@keyframes doorteaseR {
  0%, 55%, 100% { transform: translateX(0); }
  65%, 85% { transform: translateX(101%); }
}
.p-left, .p-right { animation-duration: 7s; }
.cta-portal:hover .p-left { transform: translateX(-101%) !important; animation: none; }
.cta-portal:hover .p-right { transform: translateX(101%) !important; animation: none; }
.cta-portal:hover .portal-arch { animation: none;
  box-shadow: -16px 0 50px -4px rgba(223,102,191,.8), 16px 0 50px -4px rgba(0,255,244,.8), 0 16px 40px rgba(0,0,0,.6); }

/* kapı içi evren: galakside süzülen neon hologram kareleri */
.arch-uni { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.u-sq {
  position: absolute; display: block; border-radius: 2px;
  border: 1px solid var(--sq, var(--turq));
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 14px -2px var(--sq, var(--turq)), inset 0 0 10px -4px var(--sq, var(--turq));
  animation: unifloat 5.2s ease-in-out infinite;
}
.u-sq.sq-p { --sq: var(--pink); width: 26px; height: 16px; left: 13%; top: 22%; }
.u-sq.sq-t { --sq: var(--turq); width: 32px; height: 20px; right: 9%; top: 46%; animation-delay: -2.4s; animation-duration: 6.4s; }
.u-sq.sq-b { --sq: #4d6bff; width: 16px; height: 10px; left: 28%; bottom: 15%; animation-delay: -1.2s; animation-duration: 4.6s; }
@keyframes unifloat {
  0%,100% { transform: translateY(0) rotate(-6deg); opacity: .95; }
  50% { transform: translateY(-12px) rotate(6deg); opacity: 1; }
}
.fd-arch .u-sq.sq-p { width: 36px; height: 22px; }
.fd-arch .u-sq.sq-t { width: 44px; height: 27px; }
.fd-arch .u-sq.sq-b { width: 22px; height: 14px; }

/* tıklama ikonu: parmak + dalga halkaları */
.p-tap {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
  z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.9));
  animation: tap 2.2s ease-in-out infinite;
}
@keyframes tap {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  12% { transform: translate(-50%,-44%) scale(.88); }
  24% { transform: translate(-50%,-50%) scale(1); }
}
.p-ring {
  position: absolute; left: 50%; top: 46%; width: 14px; height: 14px;
  border: 1.5px solid rgba(0,255,244,.9); border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: ripple 2.2s ease-out infinite; opacity: 0;
}
.p-ring.r2 { border-color: rgba(223,102,191,.9); animation-delay: .35s; }
@keyframes ripple {
  10% { opacity: 1; width: 12px; height: 12px; }
  60% { opacity: 0; width: 46px; height: 46px; }
  100% { opacity: 0; }
}
.portal-label {
  text-align: center; color: var(--ink); font-weight: 700; font-size: 13.5px;
  letter-spacing: .04em; line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 16px rgba(0,255,244,.4);
  background: rgba(5,5,8,.72); border: 1px solid rgba(245,241,232,.2);
  border-radius: 12px; padding: 7px 14px; backdrop-filter: blur(6px);
}
.portal-label { max-width: 190px; }
.portal-label small { display: block; font-weight: 400; font-size: 10.5px; color: var(--ink-dim); margin-top: 2px; }
@media (max-width: 860px) {
  .cta-portal { right: 14px; bottom: 14px; }
  .portal-arch { width: 78px; height: 104px; }
  .portal-label { font-size: 12px; padding: 6px 10px; }
}

/* --- Form başarı kapısı: açılır, ışık süzülür --- */
.form-door { text-align: center; margin-top: 26px; }
.fd-arch {
  position: relative; display: inline-block;
  width: 130px; height: 172px;
  border-radius: 130px 130px 18px 18px; overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(#070810, #070810) padding-box,
    linear-gradient(100deg, var(--pink) 0%, #ff8fd8 42%, #5ff3ea 58%, var(--turq) 100%) border-box;
  box-shadow: -14px 0 34px -8px rgba(223,102,191,.5), 14px 0 34px -8px rgba(0,255,244,.5), 0 18px 44px rgba(0,0,0,.6);
}
.fd-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(255,255,255,.95), rgba(0,255,244,.6) 40%, rgba(223,102,191,.4) 70%, transparent 95%);
  opacity: 0; transition: opacity 1.2s ease .4s;
}
.fd-rays {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,.35) 8deg, transparent 16deg,
    transparent 60deg, rgba(0,255,244,.3) 68deg, transparent 76deg,
    transparent 130deg, rgba(223,102,191,.3) 138deg, transparent 146deg,
    transparent 200deg, rgba(255,255,255,.3) 208deg, transparent 216deg,
    transparent 270deg, rgba(0,255,244,.28) 278deg, transparent 286deg, transparent 360deg);
  opacity: 0; transition: opacity 1.4s ease .5s;
  animation: ctaspin 9s linear infinite;
  mix-blend-mode: screen;
}
.form-door .p-door { animation: none; transition: transform 1.6s cubic-bezier(.65,0,.15,1) .25s; }
.form-door.open .p-left { transform: translateX(-101%); }
.form-door.open .p-right { transform: translateX(101%); }
.form-door.open .fd-light { opacity: 1; animation: kickerglow 2.6s ease-in-out infinite; }
.form-door.open .fd-rays { opacity: 1; }
.form-door.open .fd-arch { box-shadow: 0 0 60px rgba(0,255,244,.65), 0 0 120px rgba(223,102,191,.4), 0 18px 44px rgba(0,0,0,.6); }
.fd-msg { margin-top: 20px; color: var(--ink-dim); font-size: 15.5px; }
.fd-msg b { color: var(--ink); display: block; font-size: 17px; margin-bottom: 4px; text-shadow: 0 0 18px rgba(0,255,244,.5); }

/* --- Mobil menü paneli --- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(5,5,8,.93); backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 24px; text-align: center; }
.mm-link {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--serif); font-size: 27px; font-weight: 700;
  text-shadow: 0 0 22px rgba(0,255,244,.25);
  transform: translateY(14px); opacity: 0; transition: transform .5s, opacity .5s;
}
.mm-orb {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--orb, var(--turq)), 0 0 16px -2px var(--orb, var(--turq));
}
.mobile-menu.open .mm-link { transform: none; opacity: 1; }
.mobile-menu.open .mm-link:nth-child(2) { transition-delay: .06s; }
.mobile-menu.open .mm-link:nth-child(3) { transition-delay: .12s; }
.mobile-menu.open .mm-link:nth-child(4) { transition-delay: .18s; }
.mm-link.active { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mm-link.cta {
  margin-top: 8px; font-family: var(--sans); font-size: 17px;
  padding: 14px 34px; border-radius: 999px;
  background: linear-gradient(100deg, var(--pink), var(--blue-bright)); color: #fff;
  box-shadow: 0 8px 30px rgba(223,102,191,.45);
}
@media (min-width: 861px) { .mobile-menu { display: none; } .nav-burger { display: none; } }

/* --- Işıklı çağ geçiş şeridi (evrim sahnesi altı) --- */
.era-strip {
  position: absolute; left: 6vw; right: 6vw; bottom: 5.5%; z-index: 2;
  pointer-events: none;
}
.era-line {
  position: relative; height: 3px; border-radius: 3px; overflow: visible;
  background: linear-gradient(90deg, #ff9d4d, #e8b45a 18%, #df66bf 42%, #b06cf0 58%, #4d6bff 76%, #00fff4);
  box-shadow: 0 0 16px rgba(223,102,191,.6), 0 0 34px rgba(0,255,244,.35);
}
.era-runner {
  position: absolute; top: 50%; width: 60px; height: 7px; border-radius: 7px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(1px) drop-shadow(0 0 12px #fff);
  animation: erarun 5.5s linear infinite;
}
@keyframes erarun { from { left: -60px; } to { left: 100%; } }
.era-points { display: flex; justify-content: space-between; margin-top: 14px; }
.era-pt {
  position: relative; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: rgba(245,241,232,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 14px var(--c);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.era-pt i {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle, #fff 25%, var(--c) 65%, transparent 78%);
  box-shadow: 0 0 12px var(--c), 0 0 26px var(--c);
  margin-top: -24px;
  animation: nodepulse 2.6s ease-in-out infinite;
}
.era-pt:nth-child(2) i { animation-delay: .35s; }
.era-pt:nth-child(3) i { animation-delay: .7s; }
.era-pt:nth-child(4) i { animation-delay: 1.05s; }
.era-pt:nth-child(5) i { animation-delay: 1.4s; }
.era-pt:nth-child(6) i { animation-delay: 1.75s; }
@media (max-width: 860px) {
  .era-strip { left: 4vw; right: 4vw; bottom: 4%; }
  .era-pt { font-size: 8.5px; letter-spacing: .08em; }
}

/* reveal başlangıcı */
[data-reveal] { opacity: 0; transform: translateY(46px); }
.no-motion [data-reveal] { opacity: 1; transform: none; }

/* ============================================================
   MOBİL — hafif sinematik sürüm (pin yok, statik tablolar)
   ============================================================ */
.nav-burger { display: none; background: none; border: none; }
@media (max-width: 860px) {
  #scene { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 46px; height: 46px; padding: 11px; border-radius: 14px;
    background: rgba(8,8,14,.7); backdrop-filter: blur(10px);
    border: 1px solid rgba(0,255,244,.4); cursor: pointer;
    box-shadow: 0 0 18px rgba(0,255,244,.15);
  }
  .nav-burger span { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--turq)); transition: transform .3s, opacity .3s; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .grain { opacity: .05; }
  .scene { height: auto; }
  .scene .pin { position: relative; height: 100svh; min-height: 100svh; display: block; }
  .scene .bg { position: absolute; inset: 0; }
  .scene .bg img, .scene .bg video { transform: none !important; width: 100%; height: 100%; object-fit: cover; }
  .scene .act { display: none; }
  .scene .content { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; justify-content: flex-end; padding: 0 6vw 13svh; }
  .date-badge { flex-wrap: wrap; row-gap: 4px; font-size: 12.5px; letter-spacing: .05em; padding: 9px 16px; }
  .lead { max-width: 100%; }
  h1 { font-size: clamp(38px, 11vw, 64px); }
  .interlude { padding: 13vh 7vw; }
  .portals, .outcomes, .includes, .manifesto .duo { grid-template-columns: 1fr; }
  .portal { min-height: 380px; }
  .manifesto .amp { display: none; }
  .tablet .t-body { padding-left: 32px; }
  .topbar nav { display: none; }
  .sticky-cta { right: 14px; left: 14px; bottom: 14px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #scene, .grain { display: none; }
  .phone, .laptop, .dash-mock { animation: none; }
}

/* QA modu: animasyonsuz tam sayfa çekim */
.qa .scene { height: auto; }
.qa .scene .pin { position: relative; height: 880px; }
.qa .interlude { padding: 90px 7vw; }
.qa .scroll-hint { display: none; }

/* --- Hologram karesi → ışıklı video açılışı --- */
body.holo-hover { cursor: pointer; }
.holo-lb { position: fixed; inset: 0; z-index: 200; display: none; }
.holo-lb.show { display: block; }
.hlb-back {
  position: absolute; inset: 0; background: rgba(4, 6, 14, .74);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .45s ease;
}
.holo-lb.open .hlb-back { opacity: 1; }
.hlb-frame {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: min(880px, 86vw);
  transform: translate(-50%, -50%) scale(.55); opacity: 0;
  border-radius: 18px; overflow: hidden; background: #05070f;
  border: 1px solid var(--hl, var(--turq));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 110px -20px var(--hl, var(--turq));
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.holo-lb.open .hlb-frame { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.hlb-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%);
}
.holo-lb.open .hlb-frame::before { animation: hlbFlash 1.1s ease-out forwards; }
@keyframes hlbFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.hlb-sweep {
  position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; z-index: 3;
  pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(18px);
  background: linear-gradient(100deg, transparent 10%, rgba(255,255,255,.75) 50%, transparent 90%);
  transform: skewX(-14deg);
}
.holo-lb.open .hlb-sweep { animation: hlbSweep 1.25s ease-in-out .15s forwards; }
@keyframes hlbSweep {
  0% { opacity: 0; left: -40%; } 25% { opacity: .9; } 100% { opacity: 0; left: 120%; }
}
.hlb-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hlb-frame figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 24px; border-top: 1px solid rgba(245, 241, 232, .12);
}
.hlb-cap b { display: block; font-family: var(--serif); font-size: 20px; letter-spacing: .01em; }
.hlb-cap i { display: block; font-style: italic; font-size: 13.5px; color: var(--ink-dim); margin-top: 3px; }
.hlb-go {
  flex-shrink: 0; font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-decoration: none;
  color: var(--hl, var(--turq)); border: 1px solid var(--hl, var(--turq));
  border-radius: 999px; padding: 10px 20px; transition: background .25s, color .25s;
}
.hlb-go:hover { background: var(--hl, var(--turq)); color: #05070f; }
.hlb-x {
  position: absolute; top: 10px; right: 12px; z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(245,241,232,.3);
  background: rgba(5, 7, 15, .55); color: var(--ink); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .25s, transform .25s;
}
.hlb-x:hover { background: rgba(245, 241, 232, .18); transform: rotate(90deg); }

/* --- Sistem mimarisi sahnesi (Gün 2): galaksi + neon kareler + blend video --- */
.mimari-stage {
  position: relative; max-width: 1060px; margin: 54px auto 0;
  border-radius: 22px; overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(#04060d, #04060d) padding-box,
    linear-gradient(100deg, var(--pink) 0%, #ff8fd8 42%, #5ff3ea 58%, var(--turq) 100%) border-box;
  box-shadow: -18px 0 60px -18px rgba(223,102,191,.35), 18px 0 60px -18px rgba(0,255,244,.35), 0 26px 70px rgba(0,0,0,.55);
}
.ms-galaxy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.mimari-stage .arch-uni { z-index: 1; }
.mimari-stage .u-sq.sq-p { width: 44px; height: 27px; left: 7%; top: 14%; }
.mimari-stage .u-sq.sq-t { width: 56px; height: 34px; right: 5%; top: 58%; }
.mimari-stage .u-sq.sq-b { width: 30px; height: 19px; left: 16%; bottom: 10%; }
.ms-video {
  position: relative; z-index: 2; display: block; width: 100%;
  aspect-ratio: 16 / 9; mix-blend-mode: screen;
}
@media (max-width: 860px) { .mimari-stage { border-radius: 14px; margin-top: 34px; } }

/* ── Arka plan müziği butonu ───────────────────────────── */
.muzik-btn{
  position:fixed; left:24px; bottom:24px; z-index:120;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 20px 0 17px; border:1.5px solid rgba(252,202,3,.7);
  background:rgba(10,16,32,.85); backdrop-filter:blur(10px);
  border-radius:999px; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 0 rgba(252,202,3,.5);
  transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease;
  font-family:inherit; animation:muzikDikkat 2.8s ease-in-out infinite;
}
.muzik-btn:hover{ border-color:rgba(252,202,3,1); transform:translateY(-2px); }
.muzik-btn.calisiyor{ animation:none; }
@keyframes muzikDikkat{
  0%,100%{ box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 0 rgba(252,202,3,.5); }
  50%{ box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 8px rgba(252,202,3,0); }
}
.muzik-ikon{
  width:18px; height:18px; flex:0 0 auto; position:relative;
  background:
    radial-gradient(circle at 5px 14px, #FCCA03 3.2px, transparent 3.4px),
    radial-gradient(circle at 13px 12px, #FCCA03 3.2px, transparent 3.4px);
}
.muzik-ikon::before{ /* nota sapları */
  content:""; position:absolute; left:7px; top:2px; width:1.5px; height:12px; background:#FCCA03;
  box-shadow:8px 0 0 #FCCA03; transform:rotate(0deg);
}
.muzik-ikon::after{ /* çalarken yanıp sönen halka */
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(252,202,3,0); transition:border-color .3s;
}
.muzik-btn.calisiyor .muzik-ikon::after{
  border-color:rgba(252,202,3,.5); animation:muzikPulse 1.6s ease-in-out infinite;
}
@keyframes muzikPulse{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.15);opacity:.2} }
.muzik-etiket{
  white-space:nowrap; color:#F4EFE6; font-size:13.5px; font-weight:600;
  letter-spacing:.02em;
}
.muzik-etiket::before{ content:"🎵 "; }
@media (max-width:860px){
  .muzik-btn{ left:16px; bottom:16px; height:50px; padding:0 16px 0 14px; }
  .muzik-etiket{ font-size:12.5px; }
}

/* ── Platform sayfası ───────────────────────────── */
.page-platform main{ min-height:100vh; }
.platform-hero{
  max-width:720px; margin:0 auto; padding:130px 24px 80px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.platform-hero h1{ font-size:clamp(42px,7vw,72px); margin:10px 0 14px; }
.platform-hero .lead{ max-width:560px; }
.platform-video-card{
  margin:36px auto 34px; width:min(420px,86vw); border-radius:22px; overflow:hidden;
  border:1.5px solid rgba(0,255,244,.4);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 42px rgba(223,102,191,.22);
  transform:rotate(-1.2deg);
}
.platform-video-card video{ display:block; width:100%; height:auto; }
.platform-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 38px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:17px; letter-spacing:.02em; color:#0A1020;
  background:linear-gradient(100deg,#00FFF4,#7ce8ff);
  box-shadow:0 10px 34px rgba(0,255,244,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.platform-cta:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,255,244,.5); }
.pc-icon{ display:flex; }
.platform-not{ margin-top:18px; color:rgba(244,239,230,.55); font-size:13.5px; }
.platform-not a{ color:#00FFF4; }