/* ==========================================================
   AJANS GRAFIZM — PHP/MySQL sürümü
   Neo-brütalist, isyankar, terminal estetiği.
   ========================================================== */

:root{
  --bg:#050505;
  --surface:#111111;
  --surface-glass:rgba(17,17,17,0.7);
  --text:#F5F5F5;
  --text-dim:#A1A1AA;
  --text-faint:#5c5c63;
  --green:#2ECC40;
  --orange:#FF6B1A;
  --border:rgba(255,255,255,0.1);
  --border-strong:rgba(255,255,255,0.28);
  --error:#FF3B30;

  --font-display:'Clash Display','Cabinet Grotesk','Space Grotesk',system-ui,sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:0.95;
  margin:0;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
button{ font-family:inherit; }

::selection{ background:var(--green); color:#050505; }

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

.mono{ font-family:var(--font-mono); }
.dim{ color:var(--text-dim); }
.accent-green{ color:var(--green); }
.accent-orange{ color:var(--orange); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.wrap{ max-width:1320px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

/* ---------- texture layers ---------- */
.scanline{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.blink{ animation:blink 1.1s step-end infinite; }
@media (prefers-reduced-motion: reduce){ .blink{ animation:none; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  mix-blend-mode:difference;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem clamp(1.25rem,4vw,2.5rem);
}
.nav-logo{
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  letter-spacing:-0.02em; color:#fff; text-transform:uppercase;
}
.nav-logo-r{ font-family:var(--font-mono); font-size:0.6rem; vertical-align:super; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.25em;
  color:#fff; padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav-links a:hover,.nav-links a.is-active{ border-bottom-color:#fff; }
.nav-toggle{
  display:none; background:none; border:none; color:#fff;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.2em; cursor:pointer;
}
.nav-overlay{
  position:fixed; inset:0; z-index:90; background:#000;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:clamp(1.25rem,4vw,2.5rem); gap:0.4rem;
  transform:translateY(-100%); transition:transform 0.35s ease;
}
.nav-overlay.is-open{ transform:translateY(0); }
.nav-overlay a{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.5rem); letter-spacing:-0.02em; padding-block:0.2rem;
}
.nav-overlay a:hover{ color:var(--green); }
.nav-overlay-sys{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-faint); letter-spacing:0.2em; margin-top:2rem; }

@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- button groups ---------- */
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.2em;
  text-transform:uppercase; padding:1rem 1.6rem; border:1px solid var(--border-strong);
  background:transparent; color:var(--text); cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover{ background:var(--green); color:#050505; border-color:var(--green); transform:translateY(-2px); }
.btn-solid{ background:var(--green); color:#050505; border-color:var(--green); }
.btn-solid:hover{ background:var(--orange); border-color:var(--orange); color:#050505; }

/* ---------- hero ---------- */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, #050505 0%, rgba(5,5,5,0.35) 45%, rgba(5,5,5,0.65) 100%);
}
.hero-body{ position:relative; z-index:2; padding-inline:clamp(1.25rem,4vw,2.5rem); perspective:1000px; }
.hero-eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.3em;
  color:var(--green); margin-bottom:1.5rem;
}
.hero h1{
  font-size:clamp(2.6rem,9vw,7.2rem);
  text-shadow:0 4px 40px rgba(0,0,0,0.6);
}
.hero h1 .outline{
  -webkit-text-stroke:1.5px var(--text); color:transparent;
}
.hero-lede{
  margin-top:2rem; display:flex; flex-direction:column; gap:1.25rem; max-width:46rem;
}
@media (min-width:800px){ .hero-lede{ flex-direction:row; align-items:flex-end; } }
.hero-lede .since{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.25em; color:var(--orange); flex:none; }
.hero-lede p{ color:#d4d4d8; font-size:clamp(0.95rem,1.4vw,1.05rem); line-height:1.7; }
.hero-scroll{
  position:absolute; z-index:2; bottom:clamp(1.5rem,5vw,2.5rem); left:clamp(1.25rem,4vw,2.5rem);
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em; color:var(--text-dim);
}

/* ---------- section rhythm ---------- */
section{ position:relative; }
.section-pad{ padding-block:clamp(4.5rem,9vw,8rem); }
.divider{ border-top:1px solid var(--border); }

/* ---------- manifesto ---------- */
.manifesto{ overflow:hidden; border-block:1px solid var(--border); padding-block:clamp(4rem,9vw,7rem); }
.manifesto .eyebrow{ padding-inline:clamp(1.25rem,4vw,2.5rem); margin-bottom:2rem; }
.manifesto-line{
  font-size:clamp(2.6rem,10vw,8rem); white-space:nowrap; will-change:transform;
}
.manifesto-line.line-2{ -webkit-text-stroke:1.5px var(--text); color:transparent; }
.manifesto-copy-wrap{
  padding-inline:clamp(1.25rem,4vw,2.5rem); margin-top:3.5rem;
  display:grid; gap:2.5rem;
}
@media (min-width:800px){ .manifesto-copy-wrap{ grid-template-columns:1fr 1fr; } }
.manifesto-copy-wrap p{ color:#d4d4d8; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.75; max-width:38rem; }
.manifesto-copy-wrap .cta-row{ display:flex; align-items:flex-end; }
@media (min-width:800px){ .manifesto-copy-wrap .cta-row{ justify-content:flex-end; } }

/* ---------- section head ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section-head h2{ margin-top:0.6rem; font-size:clamp(2rem,4.5vw,3.4rem); max-width:16ch; }
.section-head p{ color:var(--text-dim); max-width:34ch; font-size:0.95rem; }

/* ---------- services grid (bento) ---------- */
.service-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
.service-card{
  grid-column:span 12;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:2.25rem clamp(1.25rem,2vw,2rem);
  display:flex; flex-direction:column; gap:1rem;
  transition:background 0.25s ease;
  min-height:220px;
}
@media (min-width:700px){ .service-card{ grid-column:span 6; } }
@media (min-width:1100px){ .service-card{ grid-column:span 4; } }
.service-card:hover{ background:var(--surface); }
.service-card:hover .service-num{ color:var(--green); }
.service-num{ font-family:var(--font-mono); font-size:0.75rem; color:var(--text-faint); letter-spacing:0.15em; transition:color 0.2s ease; }
.service-card h3{ font-size:1.3rem; letter-spacing:-0.01em; }
.service-hook{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; color:var(--orange); text-transform:none; }
.service-desc{ color:var(--text-dim); font-size:0.9rem; line-height:1.65; }

/* ---------- portfolio (3D depth-scroll cards) ---------- */
.portfolio-rail{ perspective:1400px; }
.portfolio-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.port-card{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  transform-style:preserve-3d; will-change:transform, opacity;
  transition:border-color 0.25s ease;
}
.port-card:hover{ border-color:var(--border-strong); }
.port-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.4) contrast(1.05); transition:filter 0.4s ease, transform 0.6s ease; }
.port-card:hover img{ filter:grayscale(0) contrast(1.1); transform:scale(1.04); }
.port-meta{
  position:absolute; inset:auto 0 0 0; padding:1.1rem 1.25rem;
  background:linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.port-meta .cat{ font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; color:var(--green); }
.port-meta h3{ font-size:1.15rem; margin-top:0.35rem; }
.port-meta .yr{ font-family:var(--font-mono); font-size:0.65rem; color:var(--text-dim); position:absolute; top:-1.6rem; right:1.25rem; }

/* ---------- timeline ---------- */
.timeline{ border-block:1px solid var(--border); }
.timeline-row{
  display:grid; grid-template-columns:6rem 1fr; gap:1.5rem;
  padding-block:2.25rem; border-top:1px solid var(--border);
}
.timeline-row:first-child{ border-top:none; }
.timeline-row .yr{ font-family:var(--font-mono); font-size:1.2rem; color:var(--green); }
.timeline-row p{ color:var(--text-dim); max-width:52ch; font-size:1rem; line-height:1.7; }

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--border); padding-block:1.75rem; }
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-q{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; text-transform:none; letter-spacing:0; }
.faq-a{ color:var(--text-dim); margin-top:0.75rem; max-width:56ch; line-height:1.7; }

/* ---------- word marquee (kariyer/manifesto ambient) ---------- */
.word-marquee{ overflow:hidden; border-block:1px solid var(--border); }
.word-marquee-inner{
  display:flex; gap:2.5rem; width:max-content; white-space:nowrap;
  padding-block:1.4rem; animation:marquee-scroll 30s linear infinite;
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.2rem,2.6vw,2rem);
  color:var(--text-faint); text-transform:uppercase;
}
.word-marquee-inner span.hi{ color:var(--text); }
@keyframes marquee-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .word-marquee-inner{ animation:none; } }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--border); background:var(--bg); margin-top:0; }

.marquee-track{ overflow:hidden; border-bottom:1px solid var(--border); }
.marquee-inner{
  display:flex; gap:2rem; width:max-content; white-space:nowrap;
  padding-block:1rem; animation:marquee-scroll 22s linear infinite;
  font-family:var(--font-display); font-weight:800; font-size:0.9rem;
  color:var(--green); text-transform:uppercase; letter-spacing:-0.01em;
}
.marquee-inner em{ font-style:normal; color:var(--orange); margin-left:0.5rem; }
@media (prefers-reduced-motion: reduce){ .marquee-inner{ animation:none; } }

.footer-grid{
  display:grid; gap:2.5rem; padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,2.5rem);
  grid-template-columns:1.2fr 1fr 1fr;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }
.footer-logo{
  font-family:var(--font-display); font-weight:800; font-size:2rem;
  text-transform:uppercase; letter-spacing:-0.02em; margin:0 0 0.75rem;
}
.footer-logo span{ color:var(--orange); }
.footer-col{ display:flex; flex-direction:column; gap:0.75rem; font-size:0.8rem; letter-spacing:0.05em; }
.footer-col p{ letter-spacing:0.15em; }
.footer-col a{ color:var(--text-dim); transition:color 0.2s ease; width:fit-content; }
.footer-col a:hover{ color:var(--green); }

.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.5rem clamp(1.25rem,4vw,2.5rem); border-top:1px solid var(--border);
  font-size:0.65rem; letter-spacing:0.08em; color:var(--text-faint);
}

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.stat-cell{ background:var(--bg); padding:2.25rem 1.5rem; display:flex; flex-direction:column; gap:0.4rem; }
.stat-cell .val{ font-family:var(--font-mono); font-size:clamp(1.8rem,3vw,2.6rem); font-variant-numeric:tabular-nums; color:var(--green); }
.stat-cell .lbl{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-faint); letter-spacing:0.15em; text-transform:uppercase; }

/* ---------- contact / forms ---------- */
.contact-grid{ display:grid; gap:3rem; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1.1fr; } }
.field{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.5rem; }
.field label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em; color:var(--text-dim); text-transform:uppercase; }
.field input,.field textarea{
  background:transparent; border:1px solid var(--border-strong); color:var(--text);
  font-family:var(--font-mono); font-size:0.95rem; padding:0.9rem 1rem;
  border-radius:0; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--green); }
.field textarea{ min-height:140px; }
.form-note{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); margin-top:0.5rem; }
.alert{ font-family:var(--font-mono); font-size:0.8rem; padding:1rem 1.25rem; border:1px solid; margin-bottom:1.5rem; }
.alert-ok{ border-color:var(--green); color:var(--green); }
.alert-error{ border-color:var(--error); color:var(--error); }

.contact-side .mono{ font-size:0.72rem; letter-spacing:0.2em; color:var(--text-faint); margin-bottom:0.5rem; }
.contact-side a.big-link{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.4rem); text-transform:uppercase; display:inline-block; margin-bottom:2.5rem; }
.contact-side a.big-link:hover{ color:var(--green); }

/* ---------- reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* ---------- body loading gate (avoids flash of unstyled scroll jump) ---------- */
body.is-loading{ overflow:hidden; }

/* ==========================================================
   Sinematik doku, glitch, imleç — "sıradan durmasın" katmanı
   ========================================================== */

/* film grain (hareketli SVG turbulence dokusu) */
.grain-layer{
  position:fixed; inset:-6%; width:112%; height:112%; z-index:2;
  pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 0.5s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,3%); }
  50%{ transform:translate(3%,-2%); } 75%{ transform:translate(-3%,-3%); } 100%{ transform:translate(2%,2%); }
}
@media (prefers-reduced-motion: reduce){ .grain-layer{ animation:none; } }

/* glitch burst — periyodik olarak tetiklenen kısa jitter */
[data-glitch]{ display:inline-block; will-change:transform; }
[data-glitch].is-glitching{ animation:glitch-jerk 0.32s steps(2) 1; }
@keyframes glitch-jerk{
  0%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  20%{ transform:translate(-4px,2px); clip-path:inset(10% 0 60% 0); }
  40%{ transform:translate(4px,-2px); clip-path:inset(50% 0 20% 0); }
  60%{ transform:translate(-2px,-3px); clip-path:inset(30% 0 40% 0); }
  80%{ transform:translate(3px,3px); clip-path:inset(70% 0 5% 0); }
}

/* custom terminal cursor — yalnızca JS başarıyla devreye aldığında (has-cursor)
   gizlenir; hareket azaltma tercihinde veya JS yoksa sistem imleci kalır. */
body.has-cursor{ cursor:none; }
body.has-cursor a,body.has-cursor button,body.has-cursor input,body.has-cursor textarea{ cursor:none; }
.cursor-dot{
  position:fixed; top:0; left:0; width:16px; height:16px; z-index:300;
  pointer-events:none; border:1px solid var(--green); border-radius:0;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .18s ease, height .18s ease, background .18s ease;
  display:none;
}
body.has-cursor .cursor-dot{ display:block; }
.cursor-dot::before{
  content:""; position:absolute; top:50%; left:50%; width:3px; height:3px;
  background:var(--green); transform:translate(-50%,-50%);
}
.cursor-dot.is-hover{ width:44px; height:44px; background:rgba(46,204,64,0.08); }

/* ==========================================================
   Hizmetler Labirenti — scroll ile ilerlenen 3D koridor
   Varsayılan (JS/hareket kapalı): normal .service-grid akışı.
   .labs-on ile: sticky, translateZ tabanlı 3D koridor.
   ========================================================== */
.labyrinth-section{ height:auto; }
.labyrinth-sticky{ position:static; }
.lab-floor,.lab-ceiling,.lab-fog{ display:none; }
.lab-hud-tr,.lab-hud-bl{ display:none; }
.lab-hud-tl{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.lab-hud-tl h2{ margin-top:0.6rem; font-size:clamp(2rem,4.5vw,3.4rem); }
.lab-scene,.lab-tilt{ position:static; }
.lab-camera.service-grid{ position:static; }
.lab-exit{ grid-column:1/-1; text-align:center; padding:3rem 1rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.lab-exit-link{ margin-top:1.25rem; }
.lab-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.lab-card-num{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; }
.lab-card-code{ font-size:0.62rem; letter-spacing:0.1em; }
.lab-card-rule{ height:1px; width:100%; margin-top:0.5rem; }
.lab-card-rule.green{ background:rgba(46,204,64,0.3); }
.lab-card-rule.orange{ background:rgba(255,107,26,0.3); }
.lab-card-sys{ font-size:0.62rem; letter-spacing:0.08em; margin-top:0.4rem; }

body.labs-on .labyrinth-section{ height:var(--lab-height); position:relative; padding-block:0; }
body.labs-on .labyrinth-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:block; }
body.labs-on .lab-floor,body.labs-on .lab-ceiling{
  display:block; position:absolute; left:-50%; width:200%; pointer-events:none;
}
body.labs-on .lab-floor{
  bottom:0; height:46vh; transform:perspective(700px) rotateX(76deg); transform-origin:bottom;
  background-image:
    repeating-linear-gradient(0deg, rgba(46,204,64,0.14) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(46,204,64,0.1) 0 1px, transparent 1px 90px);
}
body.labs-on .lab-ceiling{
  top:0; height:36vh; transform:perspective(700px) rotateX(-76deg); transform-origin:top;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,107,26,0.09) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(255,107,26,0.07) 0 1px, transparent 1px 90px);
}
body.labs-on .lab-fog{
  display:block; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 0%, transparent 22%, transparent 80%, rgba(5,5,5,0.85) 100%);
}
body.labs-on .lab-hud{ position:absolute; z-index:5; pointer-events:none; }
body.labs-on .lab-hud-tl{ top:6.5rem; left:clamp(1.25rem,4vw,2.5rem); margin:0; }
body.labs-on .lab-hud-tr{ display:block; top:6.5rem; right:clamp(1.25rem,4vw,2.5rem); text-align:right; }
body.labs-on .lab-hud-tr .lab-counter{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; }
body.labs-on .lab-hud-bl{ display:block; bottom:2rem; left:clamp(1.25rem,4vw,2.5rem); }
body.labs-on .lab-scene{ position:absolute; inset:0; perspective:800px; }
body.labs-on .lab-tilt{ position:absolute; inset:0; transform-style:preserve-3d; }
body.labs-on .lab-camera.service-grid{
  display:block; border:none; position:absolute; inset:0; transform-style:preserve-3d;
}
body.labs-on .lab-card.service-card{
  display:block; grid-column:auto; min-height:auto; opacity:0;
  position:absolute; top:50%; left:50%; width:min(76vw,30rem);
  padding:1.75rem 2rem; background:rgba(10,10,10,0.96);
  border:1px solid var(--border);
}
body.labs-on .lab-card.service-card:hover{ background:rgba(10,10,10,0.92); transform-origin:center; }
body.labs-on .lab-exit{
  position:absolute; top:50%; left:50%; text-align:center; border:none; padding:0;
  width:max-content; opacity:0;
}

/* ==========================================================
   Uzay bölümü — jiroskop/imleç ile hareket eden yıldız alanı
   ========================================================== */
.space-section{
  position:relative; overflow:hidden; background:#000;
  border-top:1px solid var(--border); padding-block:clamp(5rem,14vh,9rem);
  min-height:min(130svh, 900px);
  display:flex; align-items:center; justify-content:center;
}
.space-stars-far,.space-stars-near{ position:absolute; inset:-6%; pointer-events:none; will-change:transform; }
.space-star{ position:absolute; border-radius:50%; }
.space-glow{
  position:absolute; top:50%; left:50%; width:80vmin; height:80vmin; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(46,204,64,0.16) 0%, rgba(255,107,26,0.08) 45%, transparent 70%);
}
.space-body{ position:relative; z-index:2; text-align:center; padding-inline:1.25rem; max-width:56rem; }
.space-copy{ will-change:transform; }
.space-copy .eyebrow{ justify-content:center; margin-bottom:1.25rem; }
.space-copy h2{ font-size:clamp(2.2rem,6vw,5.2rem); line-height:0.95; }
.space-mascot{ margin-top:clamp(1.5rem,4vw,2.5rem); will-change:transform; }
.space-mascot img{
  width:min(45vw,300px); margin-inline:auto;
  filter:drop-shadow(0 0 60px rgba(46,204,64,0.35));
  animation:float-slow 7s ease-in-out infinite;
}
@keyframes float-slow{ 0%,100%{ transform:translateY(-10px); } 50%{ transform:translateY(14px); } }
.space-lede{ color:var(--text-dim); max-width:34rem; margin:2rem auto 0; font-size:0.98rem; line-height:1.75; }
.space-cta{ margin-top:2rem; }
@media (prefers-reduced-motion: reduce){ .space-mascot img{ animation:none; } }

/* ==========================================================
   Maskot — masaüstünde kenardan sürükleyen tam gövde,
   mobilde alttan gözetleyen gözler; ikisi de scroll ile renk değiştirir.
   ========================================================== */
.mascot-drag{
  position:fixed; right:0.75rem; top:50%; z-index:55; width:70px;
  pointer-events:none; will-change:transform, filter; display:none;
  transform:translateY(-50%);
}
.mascot-drag img{ width:100%; }
.mascot-drag .tag{ font-family:var(--font-mono); font-size:0.58rem; color:var(--text-faint); text-align:center; margin-top:0.4rem; letter-spacing:0.1em; }
.mascot-eyes{
  position:fixed; bottom:0; left:50%; width:150px; height:64px; z-index:55;
  overflow:hidden; pointer-events:none; will-change:transform;
  transform:translateX(-50%);
}
.mascot-eyes img{ width:150px; position:absolute; bottom:-74px; left:0; }

.gyro-btn{
  position:fixed; bottom:1rem; left:1rem; z-index:65;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.15em;
  background:#000; border:1px solid var(--green); color:var(--green);
  padding:0.7rem 0.9rem; cursor:pointer;
}
.gyro-btn:active{ background:var(--green); color:#050505; }
.gyro-btn[hidden]{ display:none; }

@media (min-width:820px){
  .mascot-drag{ display:block; }
  .mascot-eyes{ display:none; }
}
@media (max-width:819px){
  .mascot-drag{ display:none; }
}

/* ---------- reveal direction variants ---------- */
[data-reveal="left"]{ transform:translateX(-20px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(20px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(0.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }