diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..288e979
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,55 @@
+# 1. Base image
+FROM node:20-alpine AS base
+
+# 2. Dependencies
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci --legacy-peer-deps
+
+
+# 3. Builder
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Environment variables must be present at build time for Next.js
+# Coolify will provide these, but we can set defaults
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# 4. Runner
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+# set hostname to localhost
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..05769a2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,135 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #03070b;
+  --foreground: #f8fafc;
+  
+  --bg-primary: #03070b;
+  --bg-secondary: #070d14;
+  --bg-tertiary: #0c141d;
+  
+  --color-emerald: #0df293;
+  --color-emerald-dim: rgba(13, 242, 147, 0.15);
+  --color-cyan: #00f2fe;
+  --color-cyan-dim: rgba(0, 242, 254, 0.15);
+  
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-dim: #64748b;
+  
+  --border-glow: rgba(13, 242, 147, 0.15);
+  --border-cyan-glow: rgba(0, 242, 254, 0.15);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@theme {
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-tertiary: var(--bg-tertiary);
+  
+  --color-accent-emerald: var(--color-emerald);
+  --color-accent-emerald-dim: var(--color-emerald-dim);
+  --color-accent-cyan: var(--color-cyan);
+  --color-accent-cyan-dim: var(--color-cyan-dim);
+  
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-dim: var(--text-dim);
+  
+  --font-space: var(--font-space-grotesk);
+  --font-outfit: var(--font-outfit);
+  
+  --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-spin-slow: spin 20s linear infinite;
+  --animate-float: float 6s ease-in-out infinite;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
   }
 }
 
+/* Base resets & layouts */
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Custom premium utilities */
+.glow-text-emerald {
+  text-shadow: 0 0 20px rgba(13, 242, 147, 0.3);
+}
+
+.glow-text-cyan {
+  text-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
+}
+
+.border-glow-emerald {
+  border-color: var(--border-glow);
+  box-shadow: 0 0 15px rgba(13, 242, 147, 0.05);
+}
+
+.border-glow-cyan {
+  border-color: var(--border-cyan-glow);
+  box-shadow: 0 0 15px rgba(0, 242, 254, 0.05);
+}
+
+.glass-panel {
+  background: rgba(7, 13, 20, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(13, 242, 147, 0.08);
+}
+
+.glass-panel-cyan {
+  background: rgba(7, 13, 20, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 242, 254, 0.08);
+}
+
+/* Custom scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-emerald);
+}
+
+/* Lenis smooth scroll fix */
+html.lenis, html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 976eb90..001b03b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,34 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Space_Grotesk, Outfit } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const outfit = Outfit({
+  variable: "--font-outfit",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700", "800"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "SCENERJİ | Sürdürülebilir Enerji Mühendisliği & Yeşil Dönüşüm",
+  description: "Scenerji, dekarbonizasyon, yeşil dönüşüm destekleri ve sürdürülebilir enerji projeleri için dünya standartlarında mühendislik ve danışmanlık hizmetleri sunar.",
+  keywords: [
+    "sürdürülebilir enerji",
+    "yeşil dönüşüm",
+    "enerji mühendisliği",
+    "dekarbonizasyon",
+    "karbon ayak izi",
+    "enerji danışmanlığı",
+    "yeşil dönüşüm destekleri",
+  ],
+  icons: {
+    icon: "/favicon.ico",
+  },
 };
 
 export default function RootLayout({
@@ -24,10 +38,12 @@ export default function RootLayout({
 }>) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="tr"
+      className={`${spaceGrotesk.variable} ${outfit.variable} h-full antialiased dark`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col font-outfit bg-bg-primary text-text-primary overflow-x-hidden selection:bg-accent-emerald selection:text-bg-primary">
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 3f36f7c..51d84fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,1011 @@
-import Image from "next/image";
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { 
+  ArrowUpRight, 
+  CheckCircle, 
+  TrendingUp, 
+  Leaf, 
+  Zap, 
+  BarChart3, 
+  Globe, 
+  Cpu, 
+  Coins, 
+  Shield, 
+  Mail, 
+  Phone, 
+  MapPin, 
+  Calendar, 
+  Menu,
+  X
+} from "lucide-react";
+import LenisProvider from "@/components/LenisProvider";
+import NoiseOverlay from "@/components/NoiseOverlay";
+import GridBackground from "@/components/GridBackground";
+import Preloader from "@/components/Preloader";
+
+// CUSTOM METRICS ANIMATION COMPONENT
+function AnimatedMetric({ value, label, prefix = "", suffix = "" }: { value: number; label: string; prefix?: string; suffix?: string }) {
+  const [count, setCount] = useState(0);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [hasIntersections, setHasIntersections] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setHasIntersections(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!hasIntersections) return;
+
+    let start = 0;
+    const end = value;
+    const duration = 2000; // 2 seconds
+    const increment = end / (duration / 16); // ~60fps
+
+    const timer = setInterval(() => {
+      start += increment;
+      if (start >= end) {
+        clearInterval(timer);
+        setCount(end);
+      } else {
+        setCount(Math.floor(start));
+      }
+    }, 16);
+
+    return () => clearInterval(timer);
+  }, [hasIntersections, value]);
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+    <div ref={elementRef} className="glass-panel border-glow-emerald rounded-2xl p-8 flex flex-col items-center text-center relative group overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+      <span className="font-space text-4xl lg:text-5xl font-extrabold text-accent-emerald tracking-tight mb-2 group-hover:scale-105 transition-transform duration-300">
+        {prefix}{count.toLocaleString("tr-TR")}{suffix}
+      </span>
+      <span className="font-outfit text-xs text-text-secondary tracking-widest uppercase font-medium">
+        {label}
+      </span>
     </div>
   );
 }
+
+export default function Home() {
+  const [preloaderComplete, setPreloaderComplete] = useState(false);
+  const [activeTab, setActiveTab] = useState<"eng" | "grants">("eng");
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [contactSuccess, setContactSuccess] = useState(false);
+  
+  // Ref for mouse movement parallax on energy core
+  const coreRef = useRef<HTMLDivElement>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!coreRef.current) return;
+      const { left, top, width, height } = coreRef.current.getBoundingClientRect();
+      const x = (e.clientX - left - width / 2) / (width / 2);
+      const y = (e.clientY - top - height / 2) / (height / 2);
+      setMousePos({ x, y });
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  return (
+    <LenisProvider>
+      <NoiseOverlay />
+      
+      {/* 1. CINEMATIC PRELOADER */}
+      <Preloader onComplete={() => setPreloaderComplete(true)} />
+
+      {/* DYNAMIC CONSOLE/DEMO BANNER */}
+      <div className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-accent-cyan via-accent-emerald to-accent-cyan z-[9999]" />
+      
+      <AnimatePresence>
+        {preloaderComplete && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+            className="relative flex flex-col w-full min-h-screen"
+          >
+            {/* BACKGROUND ATMOSPHERE */}
+            <GridBackground />
+
+            {/* FLOATING NAVIGATION & CONCEPT BADGE */}
+            <header className="sticky top-0 w-full z-50 transition-all duration-300">
+              <div className="max-w-7xl mx-auto px-6 py-4">
+                <div className="glass-panel border-glow-emerald rounded-2xl px-6 py-3 flex items-center justify-between">
+                  <a href="#hero" className="flex items-center gap-3">
+                    <div className="w-5 h-5 border border-accent-emerald flex items-center justify-center rounded-sm bg-accent-emerald/10">
+                      <div className="w-2 h-2 bg-accent-emerald rounded-full animate-ping" />
+                    </div>
+                    <span className="font-space text-lg font-bold tracking-[0.25em] text-text-primary">
+                      SCENE<span className="text-accent-emerald">RJİ</span>
+                    </span>
+                  </a>
+
+                  {/* Desktop Nav Links */}
+                  <nav className="hidden md:flex items-center gap-8 text-xs font-space tracking-wider uppercase">
+                    <a href="#tanitin" className="text-text-secondary hover:text-accent-emerald transition-colors">Bizi Tanıyın</a>
+                    <a href="#cozumler" className="text-text-secondary hover:text-accent-emerald transition-colors">Çözümlerimiz</a>
+                    <a href="#projeler" className="text-text-secondary hover:text-accent-emerald transition-colors">Projeler</a>
+                    <a href="#anlayis" className="text-text-secondary hover:text-accent-emerald transition-colors">Hizmet Anlayışı</a>
+                    <a href="#iletisim" className="text-text-secondary hover:text-accent-emerald transition-colors">İletişim</a>
+                  </nav>
+
+                  {/* Navigation CTA */}
+                  <div className="hidden md:flex items-center gap-4">
+                    <span className="text-[10px] font-mono text-text-dim px-2.5 py-1 border border-text-dim/20 rounded-md">
+                      TEŞVİK OPTİMİZASYON PORTALI
+                    </span>
+                    <a 
+                      href="#iletisim" 
+                      className="px-4 py-2 bg-accent-emerald text-bg-primary text-xs font-space font-semibold tracking-wider uppercase rounded-xl hover:bg-white hover:scale-[1.03] active:scale-[0.98] transition-all duration-200 cursor-pointer shadow-lg shadow-accent-emerald/10"
+                    >
+                      TEŞVİK ANALİZİ
+                    </a>
+                  </div>
+
+                  {/* Mobile menu trigger */}
+                  <button 
+                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                    className="md:hidden text-text-primary p-1 hover:text-accent-emerald transition-colors"
+                  >
+                    {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+                  </button>
+                </div>
+              </div>
+
+              {/* Mobile Drawer menu */}
+              <AnimatePresence>
+                {mobileMenuOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: "auto" }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="md:hidden w-full px-6 absolute top-full left-0 z-50"
+                  >
+                    <div className="glass-panel border-glow-emerald rounded-2xl p-6 flex flex-col gap-4 text-sm font-space tracking-wider uppercase mt-2">
+                      <a href="#tanitin" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Bizi Tanıyın</a>
+                      <a href="#cozumler" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Çözümlerimiz</a>
+                      <a href="#projeler" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Projeler</a>
+                      <a href="#anlayis" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Hizmet Anlayışı</a>
+                      <a href="#iletisim" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2">İletişim</a>
+                      <a 
+                        href="#iletisim"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="w-full text-center py-3 bg-accent-emerald text-bg-primary font-bold rounded-xl mt-2 block"
+                      >
+                        TEŞVİK ANALİZİ
+                      </a>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </header>
+
+            {/* CONCEPT BANNER */}
+            <div className="w-full flex justify-center px-6 relative z-10">
+              <div className="glass-panel border-glow-cyan text-[11px] font-mono text-accent-cyan tracking-wider px-6 py-2 rounded-full uppercase flex items-center gap-3">
+                <span className="w-1.5 h-1.5 bg-accent-cyan rounded-full animate-pulse" />
+                BU SİTE SCENERJİ İÇİN HAZIRLANMIŞ ÖZEL BİR KONSEPT DEMODUR — AYRIS TECH
+              </div>
+            </div>
+
+            {/* 2. HERO SECTION */}
+            <section id="hero" className="w-full min-h-[90vh] flex items-center py-20 px-6 relative z-10">
+              <div className="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+                
+                {/* Sol Kolon - Başlık & Açıklama */}
+                <div className="lg:col-span-7 flex flex-col items-start text-left">
+                  <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6 flex items-center gap-2">
+                    <Leaf size={12} className="animate-pulse" />
+                    KARBON NÖTR MÜHENDİSLİK TEKNOLOJİLERİ
+                  </div>
+                  
+                  <h1 className="font-space text-5xl sm:text-6xl xl:text-7xl font-extrabold tracking-tight leading-[0.95] text-text-primary mb-8 glow-text-emerald">
+                    YEŞİL DÖNÜŞÜMÜN <br />
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan via-accent-emerald to-accent-emerald">
+                      MÜHENDİSLİK AKLI.
+                    </span>
+                  </h1>
+                  
+                  <p className="font-outfit text-base md:text-lg text-text-secondary leading-relaxed max-w-xl mb-10">
+                    Scenerji, endüstriyel tesislerin dekarbonizasyon süreçlerini, ileri seviye enerji mühendisliği ve stratejik yeşil dönüşüm teşvikleriyle birleştirerek sürdürülebilirliği yüksek karlılığa dönüştürür.
+                  </p>
+
+                  <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+                    <a 
+                      href="#cozumler"
+                      className="px-8 py-4 bg-accent-emerald text-bg-primary font-space font-semibold text-xs tracking-widest uppercase rounded-xl hover:bg-white transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer shadow-lg shadow-accent-emerald/10 group"
+                    >
+                      Çözümlerimizi İnceleyin
+                      <ArrowUpRight size={14} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
+                    </a>
+                    <a 
+                      href="#iletisim"
+                      className="px-8 py-4 bg-bg-secondary hover:bg-bg-tertiary text-text-primary border border-white/5 hover:border-accent-emerald/30 font-space font-semibold text-xs tracking-widest uppercase rounded-xl transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer"
+                    >
+                      Bize Ulaşın
+                    </a>
+                  </div>
+
+                  {/* Core Features Mini Badges */}
+                  <div className="grid grid-cols-3 gap-6 mt-16 border-t border-white/5 pt-8 w-full max-w-lg">
+                    <div className="flex flex-col">
+                      <span className="font-space text-lg font-bold text-accent-cyan mb-1">%100</span>
+                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">VERİ ODAKLI</span>
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="font-space text-lg font-bold text-accent-emerald mb-1">MİLYONLARCA €</span>
+                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">KAZANILAN TEŞVİK</span>
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="font-space text-lg font-bold text-text-primary mb-1">Sıfır</span>
+                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">RİSK ANALİZİ</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Sağ Kolon - Dynamic Core Animation */}
+                <div className="lg:col-span-5 flex justify-center relative">
+                  {/* Decorative glowing backdrops */}
+                  <div className="absolute w-72 h-72 bg-accent-emerald/10 rounded-full blur-[80px] pointer-events-none" />
+                  
+                  {/* Outer Orbit Container */}
+                  <div 
+                    ref={coreRef}
+                    className="relative w-80 h-80 sm:w-96 sm:h-96 glass-panel border-glow-emerald rounded-full flex items-center justify-center transition-all duration-300 cursor-grab active:cursor-grabbing"
+                    style={{
+                      transform: `perspective(1000px) rotateY(${mousePos.x * 12}deg) rotateX(${-mousePos.y * 12}deg)`,
+                    }}
+                  >
+                    {/* Glowing Energy Core SVG */}
+                    <svg className="w-48 h-48 md:w-56 md:h-56 animate-spin-slow text-accent-emerald" viewBox="0 0 100 100">
+                      {/* Orbital Tracks */}
+                      <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="0.25" strokeDasharray="3 3" fill="none" opacity="0.4" />
+                      <circle cx="50" cy="50" r="30" stroke="currentColor" strokeWidth="0.25" fill="none" opacity="0.2" />
+                      <circle cx="50" cy="50" r="20" stroke="currentColor" strokeWidth="0.5" strokeDasharray="10 5" fill="none" opacity="0.6" />
+                      
+                      {/* Interactive Particle Nodes */}
+                      <circle cx="50" cy="10" r="1.5" fill="currentColor" />
+                      <circle cx="50" cy="90" r="1.5" fill="currentColor" />
+                      <circle cx="10" cy="50" r="1.5" fill="currentColor" />
+                      <circle cx="90" cy="50" r="1.5" fill="currentColor" />
+                      
+                      {/* Connecting Grid Lines */}
+                      <line x1="50" y1="10" x2="50" y2="90" stroke="currentColor" strokeWidth="0.2" opacity="0.3" />
+                      <line x1="10" y1="50" x2="90" y2="50" stroke="currentColor" strokeWidth="0.2" opacity="0.3" />
+                      <line x1="20" y1="20" x2="80" y2="80" stroke="currentColor" strokeWidth="0.15" opacity="0.2" />
+                      <line x1="80" y1="20" x2="20" y2="80" stroke="currentColor" strokeWidth="0.15" opacity="0.2" />
+
+                      {/* Central core energy cell */}
+                      <circle cx="50" cy="50" r="6" fill="url(#coreGradient)" />
+                      <defs>
+                        <radialGradient id="coreGradient">
+                          <stop offset="0%" stopColor="#00f2fe" />
+                          <stop offset="60%" stopColor="#0df293" />
+                          <stop offset="100%" stopColor="#0df293" stopOpacity="0" />
+                        </radialGradient>
+                      </defs>
+                    </svg>
+
+                    {/* Surrounding UI metrics cards inside orbital frame */}
+                    <div className="absolute -top-4 right-2 glass-panel border-glow-cyan rounded-xl p-3 flex flex-col gap-1 shadow-xl animate-float">
+                      <span className="font-mono text-[9px] text-accent-cyan font-bold tracking-wider">CO₂ EMİSYONU</span>
+                      <span className="font-space text-sm font-extrabold text-text-primary">-45.2%</span>
+                    </div>
+
+                    <div className="absolute bottom-6 -left-4 glass-panel border-glow-emerald rounded-xl p-3 flex flex-col gap-1 shadow-xl animate-float" style={{ animationDelay: "3s" }}>
+                      <span className="font-mono text-[9px] text-accent-emerald font-bold tracking-wider">MÜHENDİSLİK VERİMİ</span>
+                      <span className="font-space text-sm font-extrabold text-text-primary">COP 4.8</span>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </section>
+
+            {/* 3. DOUBLE MARQUEE FLOW */}
+            <section className="w-full overflow-hidden border-y border-white/5 py-6 bg-bg-secondary/40 relative z-10">
+              {/* Marquee 1 (Left to Right) */}
+              <div className="flex whitespace-nowrap overflow-hidden py-2 select-none">
+                <div className="inline-flex animate-[marquee_40s_linear_infinite] gap-12 font-space text-lg font-bold tracking-[0.2em] text-text-secondary/20 uppercase">
+                  <span>YEŞİL DÖNÜŞÜM DANIŞMANLIĞI •</span>
+                  <span className="text-accent-emerald">DEKARBONİZASYON •</span>
+                  <span>SANAYİ TEŞVİKLERİ •</span>
+                  <span className="text-accent-cyan">SOLAR ENERJİ SİSTEMLERİ •</span>
+                  <span>ENERJİ VERİMLİLİĞİ •</span>
+                  <span className="text-accent-emerald">MÜHENDİSLİK •</span>
+                  <span>KOJENERASYON SİSTEMLERİ •</span>
+                </div>
+                <div className="inline-flex animate-[marquee_40s_linear_infinite] gap-12 font-space text-lg font-bold tracking-[0.2em] text-text-secondary/20 uppercase" aria-hidden="true">
+                  <span>YEŞİL DÖNÜŞÜM DANIŞMANLIĞI •</span>
+                  <span className="text-accent-emerald">DEKARBONİZASYON •</span>
+                  <span>SANAYİ TEŞVİKLERİ •</span>
+                  <span className="text-accent-cyan">SOLAR ENERJİ SİSTEMLERİ •</span>
+                  <span>ENERJİ VERİMLİLİĞİ •</span>
+                  <span className="text-accent-emerald">MÜHENDİSLİK •</span>
+                  <span>KOJENERASYON SİSTEMLERİ •</span>
+                </div>
+              </div>
+
+              {/* Marquee 2 (Right to Left) */}
+              <div className="flex whitespace-nowrap overflow-hidden py-2 border-t border-white/5 select-none">
+                <div className="inline-flex animate-[marquee-reverse_35s_linear_infinite] gap-12 font-space text-sm font-medium tracking-[0.25em] text-text-dim/15 uppercase">
+                  <span>KOSGEB YEŞİL DÖNÜŞÜM •</span>
+                  <span>TÜBİTAK 1831 YEŞİL DESTEK •</span>
+                  <span className="text-accent-cyan">IPARD DANIŞMANLIĞI •</span>
+                  <span>ISO 50001 BELGELENDİRME •</span>
+                  <span className="text-accent-emerald">ISO 14064 KARBON RAPORU •</span>
+                  <span>SINIRDA KARBON VERGİSİ DANIŞMANLIĞI •</span>
+                </div>
+                <div className="inline-flex animate-[marquee-reverse_35s_linear_infinite] gap-12 font-space text-sm font-medium tracking-[0.25em] text-text-dim/15 uppercase" aria-hidden="true">
+                  <span>KOSGEB YEŞİL DÖNÜŞÜM •</span>
+                  <span>TÜBİTAK 1831 YEŞİL DESTEK •</span>
+                  <span className="text-accent-cyan">IPARD DANIŞMANLIĞI •</span>
+                  <span>ISO 50001 BELGELENDİRME •</span>
+                  <span className="text-accent-emerald">ISO 14064 KARBON RAPORU •</span>
+                  <span>SINIRDA KARBON VERGİSİ DANIŞMANLIĞI •</span>
+                </div>
+              </div>
+            </section>
+
+            {/* Custom styles for marquee loop animations */}
+            <style jsx>{`
+              @keyframes marquee {
+                0% { transform: translateX(0%); }
+                100% { transform: translateX(-100%); }
+              }
+              @keyframes marquee-reverse {
+                0% { transform: translateX(-100%); }
+                100% { transform: translateX(0%); }
+              }
+            `}</style>
+
+            {/* 4. ABOUT & VISION/MISSION SECTION */}
+            <section id="tanitin" className="w-full py-32 px-6 relative z-10 border-b border-white/5">
+              <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 xl:gap-24 items-center">
+                
+                {/* Sol - Detaylı Bizi Tanıyın ve Vizyon */}
+                <div className="lg:col-span-7 flex flex-col items-start">
+                  <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
+                    BİZİ TANIYIN
+                  </div>
+                  
+                  <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-8">
+                    Geleceğin Enerji Yapısını <br />
+                    <span className="text-accent-cyan">Bugünden Tasarlıyoruz.</span>
+                  </h2>
+
+                  <p className="font-outfit text-base text-text-secondary leading-relaxed mb-6">
+                    Scenerji, vizyoner mühendisler ve sürdürülebilirlik uzmanları tarafından kurulmuş, yüksek donanımlı butik bir mühendislik ve yeşil dönüşüm danışmanlık firmasıdır. Amacımız, endüstriyel tesislerin yüksek maliyetli enerji yükümlülüklerini en yeni teknolojiler ve devlet hibeleri yardımıyla karlı bir yatırıma dönüştürmektir.
+                  </p>
+
+                  <p className="font-outfit text-base text-text-secondary leading-relaxed mb-10">
+                    Klasik bir danışmanlıktan farklı olarak; fizik, matematik, ileri mühendislik hesaplamaları ve derin hibe/teşvik mekanizmaları bilgisini harmanlıyoruz. Tesislerin enerji tüketim profilini çıkartarak karbon ayak izlerini minimize ederken, hibe fonlarını maksimum düzeyde kullanmalarını sağlıyoruz.
+                  </p>
+
+                  {/* Asymmetrical Vision & Mission layout */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full border-t border-white/5 pt-8">
+                    <div className="flex flex-col gap-3">
+                      <span className="font-space text-sm font-bold text-accent-emerald uppercase tracking-wider">
+                        VİZYONUMUZ
+                      </span>
+                      <p className="font-outfit text-xs text-text-secondary leading-relaxed">
+                        Türkiye ve küresel pazarda sanayi tesislerinin sıfır emisyon hedeflerine ulaşmasında, en güvenilir ve veri odaklı dekarbonizasyon mühendislik lideri olmak.
+                      </p>
+                    </div>
+                    <div className="flex flex-col gap-3">
+                      <span className="font-space text-sm font-bold text-accent-cyan uppercase tracking-wider">
+                        MİSYONUMUZ
+                      </span>
+                      <p className="font-outfit text-xs text-text-secondary leading-relaxed">
+                        Derin mühendislik bilgimizi ve hibe ekosistemlerini kullanarak yeşil dönüşümü sanayiciler için bir zorunluluktan çıkarıp, rekabet avantajı sağlayan karlı yatırımlara çevirmek.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Sağ - High-craft visual Dashboard Widget representation */}
+                <div className="lg:col-span-5 w-full flex justify-center">
+                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 w-full max-w-md relative overflow-hidden shadow-2xl">
+                    {/* Header of widget */}
+                    <div className="flex items-center justify-between pb-6 border-b border-white/5 mb-6">
+                      <div className="flex flex-col">
+                        <span className="font-space text-sm font-bold text-text-primary">SCENERJİ ANALYTICS</span>
+                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Tesis Analiz Ağı: #TR-8049</span>
+                      </div>
+                      <span className="w-2 h-2 bg-accent-cyan rounded-full animate-ping" />
+                    </div>
+
+                    {/* Content metrics bars */}
+                    <div className="flex flex-col gap-5">
+                      {/* Metric 1 */}
+                      <div className="flex flex-col gap-2">
+                        <div className="flex justify-between font-space text-xs">
+                          <span className="text-text-secondary">Karbon Ayak İzi Azaltımı</span>
+                          <span className="text-accent-cyan font-bold">%42 / Hedef %50</span>
+                        </div>
+                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
+                          <div className="h-full bg-accent-cyan rounded-full" style={{ width: "84%" }} />
+                        </div>
+                      </div>
+
+                      {/* Metric 2 */}
+                      <div className="flex flex-col gap-2">
+                        <div className="flex justify-between font-space text-xs">
+                          <span className="text-text-secondary">Enerji Verimliliği Artışı</span>
+                          <span className="text-accent-emerald font-bold">%35 / Hedef %30</span>
+                        </div>
+                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
+                          <div className="h-full bg-accent-emerald rounded-full" style={{ width: "100%" }} />
+                        </div>
+                      </div>
+
+                      {/* Metric 3 */}
+                      <div className="flex flex-col gap-2">
+                        <div className="flex justify-between font-space text-xs">
+                          <span className="text-text-secondary">Teşvik / Hibe Yararlanma Oranı</span>
+                          <span className="text-text-primary font-bold">%92</span>
+                        </div>
+                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
+                          <div className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald rounded-full" style={{ width: "92%" }} />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Interactive diagram preview inside widget */}
+                    <div className="mt-8 pt-6 border-t border-white/5 flex flex-col gap-4">
+                      <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Aylık Emisyon Tasarruf Eğrisi</span>
+                      
+                      <div className="h-32 flex items-end justify-between gap-1 pt-4">
+                        {[40, 55, 45, 60, 75, 68, 85, 95, 110, 125, 140].map((height, i) => (
+                          <div key={i} className="flex-1 flex flex-col items-center gap-1 group cursor-pointer">
+                            <motion.div 
+                              initial={{ height: 0 }}
+                              whileInView={{ height: `${height * 0.7}%` }}
+                              viewport={{ once: true }}
+                              transition={{ duration: 1, delay: i * 0.05 }}
+                              className={`w-full rounded-t-sm transition-all duration-300 ${i === 10 ? 'bg-accent-emerald' : 'bg-bg-tertiary group-hover:bg-accent-cyan'}`} 
+                            />
+                            <span className="font-mono text-[7px] text-text-dim group-hover:text-text-primary transition-colors">{i + 1}A</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </section>
+
+            {/* 5. INTERACTIVE SOLUTIONS TAB GRID */}
+            <section id="cozumler" className="w-full py-32 px-6 relative z-10 bg-bg-secondary/20">
+              <div className="max-w-7xl mx-auto">
+                
+                {/* Header text */}
+                <div className="flex flex-col items-center text-center max-w-2xl mx-auto mb-16">
+                  <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6">
+                    HİZMET VE ÇÖZÜMLERİMİZ
+                  </div>
+                  <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-6">
+                    Geniş Çözüm Spektrumumuzla <br />
+                    <span className="text-accent-emerald">Sanayiyi Dönüştürüyoruz.</span>
+                  </h2>
+                  <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                    Endüstrinin teknik ihtiyaçlarına özel mühendislik çözümleri ve bu çözümleri finanse edecek global ve ulusal hibe destekleri tek bir çatı altında.
+                  </p>
+                </div>
+
+                {/* Tab Controls */}
+                <div className="flex justify-center mb-16">
+                  <div className="glass-panel border-glow-emerald p-1 rounded-2xl flex gap-2">
+                    <button 
+                      onClick={() => setActiveTab("eng")}
+                      className={`px-6 py-3 rounded-xl font-space text-xs tracking-wider uppercase font-semibold transition-all duration-300 flex items-center gap-2 cursor-pointer ${
+                        activeTab === "eng" 
+                          ? "bg-accent-emerald text-bg-primary shadow-lg" 
+                          : "text-text-secondary hover:text-text-primary"
+                      }`}
+                    >
+                      <Cpu size={14} />
+                      MÜHENDİSLİK ÇÖZÜMLERİMİZ
+                    </button>
+                    <button 
+                      onClick={() => setActiveTab("grants")}
+                      className={`px-6 py-3 rounded-xl font-space text-xs tracking-wider uppercase font-semibold transition-all duration-300 flex items-center gap-2 cursor-pointer ${
+                        activeTab === "grants" 
+                          ? "bg-accent-emerald text-bg-primary shadow-lg" 
+                          : "text-text-secondary hover:text-text-primary"
+                      }`}
+                    >
+                      <Coins size={14} />
+                      YEŞİL DÖNÜŞÜM DESTEKLERİ
+                    </button>
+                  </div>
+                </div>
+
+                {/* Tabs contents with dynamic animations */}
+                <AnimatePresence mode="wait">
+                  {activeTab === "eng" ? (
+                    <motion.div 
+                      key="eng"
+                      initial={{ opacity: 0, y: 15 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -15 }}
+                      transition={{ duration: 0.5 }}
+                      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+                    >
+                      {/* Card 1 */}
+                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
+                          <Zap size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          Yenilenebilir Enerji Mühendisliği
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          Tesisleriniz için çatı ve arazi Solar Enerji (GES), Rüzgar Enerjisi (RES) ve Kojenerasyon sistemlerinin teknik ve finansal fizibilitelerini hazırlıyor, anahtar teslim proje mühendisliği yapıyoruz.
+                        </p>
+                      </div>
+
+                      {/* Card 2 */}
+                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
+                          <BarChart3 size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          Enerji Verimliliği ve VAP
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          Tesislerde detaylı enerji etütleri gerçekleştiriyor, atık ısı geri kazanımı ve proses optimizasyonu ile enerji maliyetlerini düşürecek Verimlilik Artırıcı Projeler (VAP) geliştiriyoruz.
+                        </p>
+                      </div>
+
+                      {/* Card 3 */}
+                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
+                          <Globe size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          Karbon Ayak İzi Hesaplama
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          ISO 14064 standardına uygun olarak şirketinize ait Kapsam 1, 2 ve 3 karbon ayak izi hesaplamalarını yapıyor, uluslararası standartlarda raporlayarak doğrulatma sürecini yönetiyoruz.
+                        </p>
+                      </div>
+                    </motion.div>
+                  ) : (
+                    <motion.div 
+                      key="grants"
+                      initial={{ opacity: 0, y: 15 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -15 }}
+                      transition={{ duration: 0.5 }}
+                      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+                    >
+                      {/* Grant Card 1 */}
+                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
+                          <Coins size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          TÜBİTAK 1831 Yeşil İnovasyon
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          {"KOBİ'lerin"} yeşil dönüşüme yönelik teknolojik çözümlerini finanse eden TÜBİTAK Yeşil İnovasyon destek mekanizmalarında tam kapsamlı proje hazırlama, başvuru ve raporlama danışmanlığı veriyoruz.
+                        </p>
+                      </div>
+
+                      {/* Grant Card 2 */}
+                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
+                          <Shield size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          KOSGEB Yeşil Dönüşüm Destekleri
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          Tesislerinizin enerji motorlarının verimlileştirilmesi, güneş enerjisi yatırımları ve karbon ayak izi hesaplama masraflarına kadar birçok alanda KOSGEB hibelerinden maksimum payı almanızı sağlıyoruz.
+                        </p>
+                      </div>
+
+                      {/* Grant Card 3 */}
+                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
+                          <TrendingUp size={20} />
+                        </div>
+                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
+                          Sınırda Karbon Vergisi (CBAM)
+                        </h3>
+                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
+                          Avrupa Birliği Yeşil Mutabakatı kapsamında, ihracat yapan firmalarımızı Sınırda Karbon Düzenleme Mekanizmasına (SKDM) hazırlıyor, gümrükte karbon vergisi ödemelerini engelleyecek sistemleri kuruyoruz.
+                        </p>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </section>
+
+            {/* 6. HORIZONTAL PROJECTS CAROUSEL */}
+            <section id="projeler" className="w-full py-32 px-6 relative z-10 border-t border-b border-white/5 overflow-hidden">
+              <div className="max-w-7xl mx-auto">
+                <div className="flex flex-col md:flex-row md:items-end justify-between mb-16">
+                  <div className="flex flex-col items-start max-w-xl">
+                    <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
+                      PORTFOLYO
+                    </div>
+                    <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
+                      Mühendislikle Şekillenen <br />
+                      <span className="text-accent-cyan">Başarı Hikayelerimiz.</span>
+                    </h2>
+                  </div>
+                  <span className="font-mono text-xs text-text-dim mt-4 md:mt-0 max-w-xs block text-left">
+                    Sanayinin karbon emisyonlarını sıfırlarken, sürdürülebilir karlı yapıları inşa ettiğimiz bazı seçkin referanslarımız.
+                  </span>
+                </div>
+
+                {/* Projects Draggable Flex Area */}
+                <div className="flex gap-8 overflow-x-auto pb-8 pt-4 scrollbar-none snap-x snap-mandatory">
+                  
+                  {/* Project 1 */}
+                  <div className="glass-panel border-glow-emerald rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div>
+                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
+                        <span className="font-space text-sm font-bold text-accent-emerald tracking-wide">01 // SOLAR ENERJİ</span>
+                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Manisa OSB</span>
+                      </div>
+                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
+                        Mega Endüstriyel Çatı GES Kurulumu
+                      </h3>
+                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
+                        Bölgenin en büyük metal işleme fabrikasının 75.000 metrekarelik çatı alanına 12.4 MWp gücünde Solar Enerji Santrali kurduk. Tesisin yıllık elektrik ihtiyacının tamamı yeşil enerjiden karşılanıyor.
+                      </p>
+                    </div>
+                    
+                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
+                      <div className="flex flex-col">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">VERİLEN TEŞVİK</span>
+                        <span className="font-space text-base font-extrabold text-accent-emerald">€1.4 Milyon Hibe</span>
+                      </div>
+                      <div className="flex flex-col text-right">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">GERİ ÖDEME SÜRESİ</span>
+                        <span className="font-space text-base font-extrabold text-text-primary">3.2 Yıl</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Project 2 */}
+                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div>
+                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
+                        <span className="font-space text-sm font-bold text-accent-cyan tracking-wide">02 // VERİ & YÖNETİM</span>
+                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Bursa & Kocaeli</span>
+                      </div>
+                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
+                        ISO 50001 Enerji Yönetim Ağı
+                      </h3>
+                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
+                        Otomotiv yan sanayi üreticisinin 14 farklı üretim tesisinde, IoT sensör entegrasyonuyla ISO 50001 Enerji Yönetim sistemini kurduk. Tüketimleri anlık analiz ederek gereksiz kayıpları sıfırladık.
+                      </p>
+                    </div>
+                    
+                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
+                      <div className="flex flex-col">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">ENERJİ TASARRUFU</span>
+                        <span className="font-space text-base font-extrabold text-accent-cyan">Yıllık 18.2 Milyon kWh</span>
+                      </div>
+                      <div className="flex flex-col text-right">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">VERİMLİLİK ARTIŞI</span>
+                        <span className="font-space text-base font-extrabold text-text-primary">%28</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Project 3 */}
+                  <div className="glass-panel border-glow-emerald rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div>
+                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
+                        <span className="font-space text-sm font-bold text-accent-emerald tracking-wide">03 // YEŞİL TEŞVİK</span>
+                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">İzmir Aliağa</span>
+                      </div>
+                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
+                        Yeşil Dönüşüm Teşvik Optimizasyonu
+                      </h3>
+                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
+                        Büyük ölçekli çelik üreticimizin karbonsuzlaşma yol haritasını hazırladık. Kapsam 1-2 emisyon raporlarını tamamlayarak, AB Yeşil Mutabakatı kapsamında 1.8 Milyon € tutarında direkt hibe onaylattık.
+                      </p>
+                    </div>
+                    
+                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
+                      <div className="flex flex-col">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">KAZANILAN HİBE</span>
+                        <span className="font-space text-base font-extrabold text-accent-emerald">€1.8 Milyon Hibe</span>
+                      </div>
+                      <div className="flex flex-col text-right">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">KARBON VERGİ TASARRUFU</span>
+                        <span className="font-space text-base font-extrabold text-text-primary">%100</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Project 4 */}
+                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div>
+                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
+                        <span className="font-space text-sm font-bold text-accent-cyan tracking-wide">04 // MÜHENDİSLİK</span>
+                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Tekirdağ Çorlu</span>
+                      </div>
+                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
+                        Kojenerasyon ve Isı Geri Kazanımı
+                      </h3>
+                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
+                        Tekstil boyahanesinin baca gazlarındaki ve atık sularındaki ısıyı geri kazanacak kojenerasyon entegrasyonu projesini tamamladık. Atık ısı, {"fabrikanın"} sıcak su ihtiyacının {"%85'ini"} karşılıyor.
+                      </p>
+                    </div>
+                    
+                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
+                      <div className="flex flex-col">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">AZALTILAN DOĞALGAZ</span>
+                        <span className="font-space text-base font-extrabold text-accent-cyan">Yıllık %32</span>
+                      </div>
+                      <div className="flex flex-col text-right">
+                        <span className="font-mono text-[9px] text-text-dim uppercase">YILLIK CO₂ AZALTIMI</span>
+                        <span className="font-space text-base font-extrabold text-text-primary">4.200 Ton</span>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </section>
+
+            {/* 7. QUANTITATIVE SERVICE EXCELLENCE */}
+            <section id="anlayis" className="w-full py-32 px-6 relative z-10 bg-bg-secondary/10">
+              <div className="max-w-7xl mx-auto">
+                
+                {/* Header info */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start mb-20">
+                  <div className="flex flex-col items-start">
+                    <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6">
+                      HİZMET ANLAYIŞI
+                    </div>
+                    <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-6">
+                      Verilerle Kanıtlanmış <br />
+                      <span className="text-accent-emerald">Sürdürülebilir Başarı.</span>
+                    </h2>
+                  </div>
+                  <p className="font-outfit text-base text-text-secondary leading-relaxed pt-2">
+                    Scenerji olarak, mühendislik hesaplarımızı teoride bırakmıyoruz. Geliştirdiğimiz projelerin tamamında, tesislerinizin gerçek enerji tüketim verileri üzerinden çalışıyor ve gerçekleştirdiğimiz net tasarrufları faturalandırılabilir kanıtlarla sunuyoruz.
+                  </p>
+                </div>
+
+                {/* High-end metrics grid with counters */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                  <AnimatedMetric value={120} label="MİLYON kWh TASARRUF" suffix="M+" />
+                  <AnimatedMetric value={45000} label="TON AZALTILAN CO₂" suffix="+" />
+                  <AnimatedMetric value={34} label="MWp PROJELENDİRİLEN GES" suffix="+" />
+                  <AnimatedMetric value={12} label="MİLYON € HİBE & TEŞVİK" suffix="M+ €" />
+                </div>
+              </div>
+            </section>
+
+            {/* 8. EDITORIAL FOOTER (CONTACT & ARTICLES) */}
+            <footer id="iletisim" className="w-full bg-[#04090f] pt-32 pb-16 px-6 relative z-10 border-t border-white/5">
+              <div className="max-w-7xl mx-auto">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 xl:gap-24 items-start pb-20 border-b border-white/5 mb-16">
+                  
+                  {/* Sol Kolon - İletişim Formu */}
+                  <div className="lg:col-span-6 flex flex-col items-start w-full">
+                    <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
+                      İLETİŞİM FORMU
+                    </div>
+                    <h2 className="font-space text-3xl sm:text-4xl font-extrabold tracking-tight mb-8">
+                      Yeşil Dönüşümü <br />
+                      <span className="text-accent-cyan">Birlikte Başlatalım.</span>
+                    </h2>
+
+                    <form 
+                      onSubmit={(e) => {
+                        e.preventDefault();
+                        setContactSuccess(true);
+                      }}
+                      className="w-full flex flex-col gap-6"
+                    >
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <div className="flex flex-col gap-2">
+                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Adınız Soyadınız</label>
+                          <input 
+                            required 
+                            type="text" 
+                            placeholder="Örn: Mustafa Yıldız" 
+                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
+                          />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Firma Adı</label>
+                          <input 
+                            required 
+                            type="text" 
+                            placeholder="Örn: Scenerji Sanayi A.Ş." 
+                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <div className="flex flex-col gap-2">
+                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">E-Posta Adresi</label>
+                          <input 
+                            required 
+                            type="email" 
+                            placeholder="Örn: mustafa@scenerji.com" 
+                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
+                          />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Telefon Numarası</label>
+                          <input 
+                            required 
+                            type="tel" 
+                            placeholder="Örn: +90 532 000 00 00" 
+                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col gap-2">
+                        <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Mesajınız / Teşvik Talebiniz</label>
+                        <textarea 
+                          required 
+                          rows={4}
+                          placeholder="Fesadınızı dekarbonize etmek istediğiniz alanları belirtin..." 
+                          className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300 resize-none"
+                        />
+                      </div>
+
+                      <button 
+                        type="submit" 
+                        className="w-full sm:w-auto self-start px-8 py-4 bg-accent-cyan text-bg-primary font-space font-semibold text-xs tracking-widest uppercase rounded-xl hover:bg-white transition-all duration-300 cursor-pointer shadow-lg shadow-accent-cyan/10"
+                      >
+                        ANALİZ TALEBİ GÖNDER
+                      </button>
+
+                      <AnimatePresence>
+                        {contactSuccess && (
+                          <motion.div 
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="glass-panel border-glow-emerald bg-accent-emerald/5 rounded-xl p-4 flex items-center gap-3 text-accent-emerald font-outfit text-sm"
+                          >
+                            <CheckCircle size={18} />
+                            Talebiniz başarıyla alındı. Mühendislerimiz 24 saat içinde analiz raporuyla dönüş yapacaktır.
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </form>
+                  </div>
+
+                  {/* Sağ Kolon - Makaleler & İletişim Bilgileri */}
+                  <div className="lg:col-span-6 flex flex-col gap-12 w-full lg:pl-10">
+                    
+                    {/* Featured Articles Section */}
+                    <div>
+                      <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6 inline-block">
+                        GÜNCEL YAZILARIMIZ / MAKALELER
+                      </div>
+                      
+                      <div className="flex flex-col gap-6 mt-4">
+                        {/* Article 1 */}
+                        <a href="#" className="glass-panel border border-white/5 hover:border-accent-emerald/30 p-5 rounded-2xl flex gap-4 group transition-all duration-300">
+                          <div className="w-10 h-10 shrink-0 bg-accent-emerald/10 text-accent-emerald flex items-center justify-center rounded-xl font-mono text-xs">
+                            01
+                          </div>
+                          <div className="flex flex-col gap-1">
+                            <h4 className="font-space text-sm font-bold text-text-primary group-hover:text-accent-emerald transition-colors">
+                              Sınırda Karbon Vergisi (CBAM) ve Türk Sanayisine Etkileri
+                            </h4>
+                            <span className="font-mono text-[9px] text-text-dim flex items-center gap-1.5 uppercase mt-1">
+                              <Calendar size={10} /> 12 MAYIS 2026 • AKADEMİK
+                            </span>
+                          </div>
+                        </a>
+
+                        {/* Article 2 */}
+                        <a href="#" className="glass-panel border border-white/5 hover:border-accent-emerald/30 p-5 rounded-2xl flex gap-4 group transition-all duration-300">
+                          <div className="w-10 h-10 shrink-0 bg-accent-cyan/10 text-accent-cyan flex items-center justify-center rounded-xl font-mono text-xs">
+                            02
+                          </div>
+                          <div className="flex flex-col gap-1">
+                            <h4 className="font-space text-sm font-bold text-text-primary group-hover:text-accent-cyan transition-colors">
+                              ISO 14064 Standardı ile Karbon Ayak İzi Hesaplama Kılavuzu
+                            </h4>
+                            <span className="font-mono text-[9px] text-text-dim flex items-center gap-1.5 uppercase mt-1">
+                              <Calendar size={10} /> 24 NİSAN 2026 • REHBER
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+
+                    {/* Coordinates & Contact Info */}
+                    <div className="border-t border-white/5 pt-10 flex flex-col gap-6">
+                      <div className="flex items-center gap-4 text-text-secondary font-outfit text-sm">
+                        <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-cyan">
+                          <MapPin size={16} />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">MERKEZ OFİS</span>
+                          <span className="text-text-primary text-xs font-semibold">Ataköy Towers, A Blok, Bakırköy / İstanbul</span>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col sm:flex-row gap-6">
+                        <a href="mailto:info@scenerji.com" className="flex items-center gap-4 text-text-secondary font-outfit text-sm hover:text-accent-emerald transition-colors flex-1">
+                          <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-emerald">
+                            <Mail size={16} />
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">E-POSTA ADRESİ</span>
+                            <span className="text-text-primary text-xs font-semibold">info@scenerji.com</span>
+                          </div>
+                        </a>
+
+                        <a href="tel:+902128093450" className="flex items-center gap-4 text-text-secondary font-outfit text-sm hover:text-accent-cyan transition-colors flex-1">
+                          <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-cyan">
+                            <Phone size={16} />
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">TELEFON NUMARASI</span>
+                            <span className="text-text-primary text-xs font-semibold">+90 (212) 809 34 50</span>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+
+                {/* Subfooter bottom details */}
+                <div className="flex flex-col md:flex-row justify-between items-center gap-6 font-mono text-[10px] text-text-dim uppercase tracking-wider">
+                  <div className="flex items-center gap-3">
+                    <span className="w-1.5 h-1.5 bg-accent-emerald rounded-full" />
+                    <span>© 2026 SCENERJİ DANIŞMANLIK & MÜHENDİSLİK. TÜM HAKLARI SAKLIDIR.</span>
+                  </div>
+                  <span>KONSEPT KOD & TASARIM: AYRIS TECH DEMO PORTALI</span>
+                </div>
+              </div>
+            </footer>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </LenisProvider>
+  );
+}
diff --git a/components/GridBackground.tsx b/components/GridBackground.tsx
new file mode 100644
index 0000000..d50d54a
--- /dev/null
+++ b/components/GridBackground.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+
+export default function GridBackground() {
+  return (
+    <div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none z-[0]">
+      {/* Dynamic Ambient Glows */}
+      <div className="absolute top-[10%] left-[20%] w-[35vw] h-[35vw] bg-accent-emerald-dim rounded-full blur-[120px] animate-pulse-slow opacity-60" />
+      <div className="absolute bottom-[20%] right-[10%] w-[45vw] h-[45vw] bg-accent-cyan-dim rounded-full blur-[150px] animate-pulse-slow opacity-50" style={{ animationDelay: "2s" }} />
+
+      {/* Grid Pattern */}
+      <div 
+        className="absolute inset-0 w-full h-full"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, rgba(13, 242, 147, 0.03) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(13, 242, 147, 0.03) 1px, transparent 1px)
+          `,
+          backgroundSize: "60px 60px",
+        }}
+      />
+      
+      {/* Decorative vertical lines */}
+      <div className="absolute left-[15%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-emerald/5 to-transparent" />
+      <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-cyan/5 to-transparent" />
+      <div className="absolute right-[15%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-accent-emerald/5 to-transparent" />
+    </div>
+  );
+}
diff --git a/components/LenisProvider.tsx b/components/LenisProvider.tsx
new file mode 100644
index 0000000..cb428fa
--- /dev/null
+++ b/components/LenisProvider.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import Lenis from "lenis";
+
+export default function LenisProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const lenisRef = useRef<Lenis | null>(null);
+
+  useEffect(() => {
+    // Initialize Lenis
+    const lenis = new Lenis({
+      duration: 1.2,
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+      orientation: "vertical",
+      gestureOrientation: "vertical",
+      smoothWheel: true,
+      wheelMultiplier: 1,
+      touchMultiplier: 1.5,
+    });
+
+    lenisRef.current = lenis;
+
+    // RAF loop
+    function raf(time: number) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    // Bind clean-up
+    return () => {
+      lenis.destroy();
+      lenisRef.current = null;
+    };
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/components/NoiseOverlay.tsx b/components/NoiseOverlay.tsx
new file mode 100644
index 0000000..e12587e
--- /dev/null
+++ b/components/NoiseOverlay.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+export default function NoiseOverlay() {
+  return (
+    <div 
+      className="fixed inset-0 w-full h-full pointer-events-none z-[99999] opacity-[0.025]"
+      style={{
+        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+        backgroundRepeat: "repeat",
+      }}
+    />
+  );
+}
diff --git a/components/Preloader.tsx b/components/Preloader.tsx
new file mode 100644
index 0000000..4cc8f83
--- /dev/null
+++ b/components/Preloader.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const DIAGNOSTICS = [
+  "SOLAR PANEL DİZİLERİ SENKRONİZE EDİLİYOR...",
+  "RÜZGAR TRÜBİN KOMPANSATÖRLERİ DENGELENİYOR...",
+  "KOJENERASYON OPTİMİZASYON KATI AKTİFLEŞTİRİLİYOR...",
+  "YEŞİL DÖNÜŞÜM KARBON AĞI YAPILANDIRILIYOR...",
+  "SCENERJİ ENERJİ AKIŞI STABİL DURUMA GETİRİLDİ.",
+];
+
+export default function Preloader({ onComplete }: { onComplete: () => void }) {
+  const [progress, setProgress] = useState(0);
+  const [diagnosticText, setDiagnosticText] = useState(DIAGNOSTICS[0]);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    let currentProgress = 0;
+    const duration = 2400; // 2.4 seconds total preloader time
+    const intervalTime = 20;
+    const step = 100 / (duration / intervalTime);
+
+    const timer = setInterval(() => {
+      currentProgress += step;
+      if (currentProgress >= 100) {
+        currentProgress = 100;
+        clearInterval(timer);
+        setTimeout(() => {
+          setIsVisible(false);
+          setTimeout(onComplete, 800); // Allow curtain reveal animation to complete
+        }, 500);
+      }
+      setProgress(Math.floor(currentProgress));
+
+      // Update diagnostic text based on progress
+      const diagIndex = Math.min(
+        Math.floor((currentProgress / 100) * DIAGNOSTICS.length),
+        DIAGNOSTICS.length - 1
+      );
+      setDiagnosticText(DIAGNOSTICS[diagIndex]);
+    }, intervalTime);
+
+    return () => clearInterval(timer);
+  }, [onComplete]);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 1 }}
+          exit={{ 
+            clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
+            transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] }
+          }}
+          className="fixed inset-0 w-full h-full bg-[#03070b] z-[99999] flex flex-col items-center justify-center p-6 select-none"
+        >
+          {/* Subtle decorative grid in preloader */}
+          <div 
+            className="absolute inset-0 w-full h-full opacity-10 pointer-events-none"
+            style={{
+              backgroundImage: `
+                linear-gradient(to right, rgba(13, 242, 147, 0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(13, 242, 147, 0.05) 1px, transparent 1px)
+              `,
+              backgroundSize: "40px 40px",
+            }}
+          />
+
+          <div className="w-full max-w-xl flex flex-col relative z-10">
+            {/* Tech Logo / Icon */}
+            <div className="flex items-center gap-3 mb-10">
+              <div className="w-6 h-6 border border-accent-emerald flex items-center justify-center rounded-sm animate-spin-slow">
+                <div className="w-2.5 h-2.5 bg-accent-emerald" />
+              </div>
+              <span className="font-space text-lg font-bold tracking-[0.2em] text-accent-emerald uppercase">
+                SCENERJİ SYSTEM
+              </span>
+              <span className="ml-auto text-[10px] font-mono text-text-dim px-2 py-0.5 border border-text-dim/20 rounded-sm">
+                v2.6.0
+              </span>
+            </div>
+
+            {/* Diagnostic Logs */}
+            <div className="h-16 font-mono text-xs text-text-secondary border-l border-accent-emerald/20 pl-4 mb-8 flex flex-col justify-center">
+              <span className="text-[10px] text-accent-cyan tracking-wider uppercase mb-1">
+                [SİSTEM TEŞHİS KÜTÜPHANESİ]
+              </span>
+              <span className="animate-pulse">{diagnosticText}</span>
+            </div>
+
+            {/* Progress Counter & Bar */}
+            <div className="flex items-end justify-between font-space mb-3">
+              <span className="text-sm font-light text-text-secondary tracking-widest uppercase">
+                ENERJİ AĞI KALİBRASYONU
+              </span>
+              <span className="text-3xl font-bold text-accent-emerald tabular-nums">
+                {progress}%
+              </span>
+            </div>
+            
+            <div className="w-full h-[2px] bg-bg-tertiary relative overflow-hidden rounded-full">
+              <motion.div 
+                className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+
+            <div className="mt-8 flex justify-between font-mono text-[9px] text-text-dim uppercase tracking-wider">
+              <span>KURULUM: AYRIS TECH</span>
+              <span>LOKASYON: TÜRKİYE</span>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/docs/TEMPLATE_BRIEF.md b/docs/TEMPLATE_BRIEF.md
new file mode 100644
index 0000000..6a6b93f
--- /dev/null
+++ b/docs/TEMPLATE_BRIEF.md
@@ -0,0 +1,416 @@
+# Şablon Tasarım Rehberi
+### Ayris Tech — Premium Demo Sistemi
+
+---
+
+## Görevin
+
+Potansiyel müşterilere gönderilecek demo siteleri için sektöre özel Next.js şablonları yazıyorsun.
+
+Öncelik sırası: **1. Tasarım ve his → 2. Animasyon → 3. İçerik → 4. Teknik detaylar**
+
+Müşteri linke tıkladığında ilk 3 saniyede "bu benim için yapılmış, bu çok pahalı görünüyor" hissini yaşamalı. Kod çalışıyor mu çalışmıyor mu ikinci plandır — önce göz kamaştır.
+
+---
+
+## Tasarım Felsefesi
+
+### "Oha" Anı Zorunludur
+
+Her şablonun sayfaya girince insanı duraksatan **bir imza momenti** olmalı. Bu an tasarlanmış, hesaplanmış, sektöre özgün olmalı. Genel bir animasyon değil — o sektörün ruhunu yansıtan bir hareket.
+
+Referans seviye: **Awwwards Site of the Day**. Hedef his: "Bu siteyi kim yaptı, nasıl yaptı?"
+
+### Tasarım Kararlarında Öncelik Sırası
+
+```
+1. Boşluk ve nefes   — section'lar arası ritim, padding cömertliği
+2. Tipografi gücü    — başlıklar cesur ve büyük, hiyerarşi net
+3. Fotoğraf kalitesi — her fotoğraf kompozisyon düşünülerek seçilmeli
+4. Renk disiplini    — max 2-3 renk, geri kalanı siyah/beyaz/gri
+5. Hareket kalitesi  — az animasyon ama her biri mükemmel
+6. Detay titizliği   — hover state'ler, geçişler, micro-interaction'lar
+```
+
+### Nasıl Düşünmeli
+
+Görseller verildiğinde şunu sor: **"Bu tasarımı 10.000 USD'ye satan ajans ne hissettirdi?"**
+
+- Boşlukla mı ezdi? (luxury whitespace)
+- Tipografiyle mi şok etti? (devasa başlık, küçük body)
+- Fotoğrafla mı sardı? (fullscreen, parallax, overlay)
+- Hareketle mi büyüledi? (curtain, reveal, magnetic)
+- Detayla mı ikna etti? (custom cursor, subtle grain, line animation)
+
+Cevap hangisi ise — oradan başla, diğerlerini o etrafına kur.
+
+---
+
+## İmza Moment Kütüphanesi
+
+Her şablona aşağıdakilerden **en az bir** tane koy. Birden fazla koyacaksan aralarına yeterli "sessizlik" bırak.
+
+### Sayfa Açılışı
+- **Curtain reveal** — siyah ekran ortadan ikiye ayrılır, fotoğraf ortaya çıkar
+- **Preloader çizgi** — ince bir çizgi soldan sağa ilerler, logo belirir, sahne açılır
+- **Staggered text entrance** — başlık kelime kelime veya karakter karakter düşer
+- **Scale-up reveal** — küçük merkezi bir görsel tam ekrana açılır
+
+### Scroll Animasyonları
+- **Parallax hero** — scroll ettikçe fotoğraf daha yavaş iner, metin daha hızlı çıkar
+- **Sticky + akan metin** — fotoğraf sabit kalır, metin onun üzerinden akar
+- **Horizontal scroll bölüm** — kartlar/menü yatay ilerler, mouse/touch ile sürüklenir
+- **Pinned section** — section scroll boyunca sabit kalır, içeriği değişir (tablar gibi)
+- **Text scale on scroll** — başlık küçükten büyüğe veya büyükten küçüğe dönüşür
+
+### Hover & Mikro
+- **Magnetic buton** — mouse yaklaştıkça buton sana doğru çekilir
+- **Custom cursor** — varsayılan cursor kaybolur, markaya özgü daire/metin gelir
+- **Image tilt** — kart hover'ında 3D perspektif eğimi (rotateX/Y)
+- **Clip-path reveal** — fotoğraf hover'da yukarıdan aşağı açılır
+- **Underline draw** — link hover'ında çizgi soldan sağa çizilir
+
+### Atmosfer
+- **Scrolling marquee** — sonsuz döngü metin bandı (iki yönde farklı hızda olursa daha iyi)
+- **Grain texture overlay** — tüm sayfa üstünde ince film grain (opacity 0.03-0.06)
+- **Ambient glow** — arka planda renk blobları yavaşça hareket eder
+- **Video loop** — hero'da sessiz, döngü video (restoran, otel için)
+
+---
+
+## Tipografi Kuralları
+
+Pahalı hissinin %40'ı tipografiden gelir.
+
+```
+Başlık boyutu:   clamp(48px, 8vw, 120px) — küçük ekranda küçülür, büyük ekranda büyür
+Body boyutu:     16px minimum, 18px ideal
+Satır yüksekliği: başlıklarda 0.9-1.0, body'de 1.6-1.8
+Harf aralığı:    büyük harf başlıklarda tracking-widest, serif başlıklarda -0.02em
+```
+
+**Font kombinasyonları (sektöre göre):**
+- Otel/Butik/Restoran → Playfair Display (serif) + Inter (sans) — klasik lüks
+- Mimari/Kurumsal → Inter Black + Inter Regular — modern güç
+- Bar/Gastro → Cormorant Garamond + Space Grotesk — sofistike
+- Klinik/SaaS → DM Sans veya Sora + monospace detay — temiz güven
+
+Başlık tek satırda yoksa **satır kırılmalarını elle kontrol et** — otomatik kırılma çirkin görünür.
+
+---
+
+## Renk ve Atmosfer Kuralları
+
+### Koyu Tema (restoran, bar, otel, gastro)
+- Arka plan: `#080810` veya `#0a0a0a` — tam siyah değil, hafif tonlu
+- Metin: `#ffffff` + `rgba(255,255,255,0.5)` ikincil
+- Aksant: firmanın ana rengi — sadece CTA, badge, vurgu için
+- Fotoğraflar üstünde: `rgba(0,0,0,0.3-0.5)` overlay — direkt koymadan
+
+### Açık Tema (klinik, mimari, kurumsal, butik)
+- Arka plan: `#ffffff` veya `#f8f7f4` (hafif warm) veya `#f5f0e8` (krem)
+- Metin: `#0a0a0a` veya `#1a1a1a`
+- Aksant: firmanın ana rengi
+- İkincil yüzeyler: `#f0f0f0` veya `rgba(0,0,0,0.04)`
+
+### Renk Disiplini
+- Ana renk: butonlar, başlık vurgusu, badge, aktif state
+- İkincil renk: hover state, border, gradient ikinci noktası
+- Nötr: arka planlar, kartlar, ayırıcılar
+- **Başka renk yok.** Emoji veya ikonlar nötr tutulur.
+
+---
+
+## Fotoğraf Kullanımı
+
+Fotoğraflar kod kadar önemli. Kötü fotoğraf iyi tasarımı mahveder.
+
+**Unsplash koleksiyonları (sektöre göre):**
+- Otel/Resort: `https://source.unsplash.com/1920x1080/?luxury,hotel,resort`
+- Restoran: `https://source.unsplash.com/1920x1080/?restaurant,food,gastronomy`
+- Bar: `https://source.unsplash.com/1920x1080/?cocktail,bar,dark`
+- Mimari: `https://source.unsplash.com/1920x1080/?architecture,interior,modern`
+- Klinik: `https://source.unsplash.com/1920x1080/?clinic,medical,clean`
+
+**Kurallar:**
+- Hero fotoğrafı her zaman `object-cover` + `object-position: center`
+- Dikey fotoğraflar (portrait) kart içinde daha dramatik görünür — kullan
+- Birden fazla fotoğraf varsa renk tonu tutarlı olsun (hepsi sıcak veya hepsi soğuk)
+- `picsum.photos` sadece hızlı test için — final görünümde Unsplash parametreli URL kullan
+
+---
+
+## Animasyon Kalitesi
+
+### Easing Değerleri
+```typescript
+// Smooth deceleration — genel kullanım
+ease: [0.25, 0.46, 0.45, 0.94] as [number,number,number,number]
+
+// Dramatic entrance — hero başlıklar
+ease: [0.16, 1, 0.3, 1] as [number,number,number,number]
+
+// Snappy — buton, badge, küçük elementler
+ease: [0.34, 1.56, 0.64, 1] as [number,number,number,number]
+
+// Linear — marquee, döngüler
+ease: "linear"
+```
+
+### Süre Kuralları
+```
+Micro (hover, badge):     0.15-0.25s
+Element entrance:         0.6-0.8s
+Section transition:       0.8-1.0s
+Page reveal / curtain:    1.0-1.4s
+Marquee döngü:            20-40s (içerik uzunluğuna göre)
+```
+
+### Stagger Ritmi
+```typescript
+// Çocuk sayısına göre stagger ayarla
+3-4 element:   staggerChildren: 0.15
+5-8 element:   staggerChildren: 0.08
+9+ element:    staggerChildren: 0.05
+```
+
+### Animasyon Monotonluğu Kırma
+Her section aynı `fadeUp` ile başlarsa sayfa uyutur. Karıştır:
+- Hero: curtain veya scale reveal
+- Stats: sayaç animasyonu (AnimatedCounter)
+- Kartlar: stagger + hafif x offset (soldan veya sağdan)
+- Galeri: clip-path veya opacity-only (y hareketi olmadan)
+- CTA section: parallax arka plan + metin fade
+
+---
+
+## Lenis Smooth Scroll Kurulumu
+
+Her şablona ekle:
+
+```typescript
+"use client";
+import { useEffect } from "react";
+
+// Component içinde:
+useEffect(() => {
+  let lenis: any;
+  import("@studio-freight/lenis").then(({ default: Lenis }) => {
+    lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
+    function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
+    requestAnimationFrame(raf);
+  });
+  return () => lenis?.destroy();
+}, []);
+```
+
+---
+
+## Section Tasarım Standartları
+
+### Hero
+- Her zaman viewport yüksekliği: `min-h-screen`
+- Fotoğraf varsa: `position: absolute, inset: 0, object-fit: cover` + koyu overlay
+- Başlık: clamp ile responsive, viewport'un %60-70'ini kaplamalı
+- CTA buton: tek, net, aksant renkli — ikinci buton varsa ghost/outline
+
+### Marquee Bandı (opsiyonel ama etkili)
+Hero ile sonraki section arasına koy. İki yönde farklı iki satır daha güçlü görünür.
+
+### İki Kolonlu (Split) Section
+```
+Sol: metin + CTA         Sağ: tall fotoğraf (aspect-ratio: 3/4)
+Metin sola hizalı        Fotoğraf slight overlap (negatif margin)
+```
+
+### Kart Grid'leri
+- 3'lü grid: her kart eşit, hover'da `y: -8` ve border glow
+- Masonry: sadece galeri için — CSS columns veya css-grid ile
+- Horizontal scroll: `overflow-x: auto`, `scrollbar-width: none`, touch-action: pan-x
+
+### CTA Section (Son Bölüm)
+En az bir kez tam genişlikte, fotoğraf arka planlı olsun. Başlık büyük, CTA tek.
+
+---
+
+## Tech Stack
+
+```json
+{
+  "zorunlu": [
+    "Next.js 14 App Router",
+    "Framer Motion v11",
+    "Tailwind CSS v3",
+    "TypeScript strict",
+    "@studio-freight/lenis"
+  ],
+  "gerektiğinde": [
+    "Three.js / @react-three/fiber  (sadece ambient bg için, performans dikkat)",
+    "react-lottie-player            (loading, boş state ikonları için)",
+    "usehooks-ts                    (useWindowSize, useIntersectionObserver)"
+  ],
+  "yasak": [
+    "jQuery",
+    "Bootstrap",
+    "CSS @keyframes animasyonları (Framer Motion kullan)",
+    "inline style ile animasyon (transform, opacity — Framer Motion kullan)"
+  ]
+}
+```
+
+**Framer Motion zorunlu kurallar:**
+- `ease` array'leri her zaman type assertion: `as [number,number,number,number]`
+- Scroll animasyonları: `useScroll` + `useTransform`
+- Section girişleri: `whileInView` + `viewport={{ once: true }}`
+- Layout animasyonları: `layout` prop — yükseklik değişimlerinde kullan
+
+---
+
+## Kalite Kontrol Listesi
+
+Kodu teslim etmeden önce şunları kontrol et:
+
+**Tasarım:**
+- [ ] Sayfaya girince ilk 3 saniyede "oha" dedirten bir şey var mı?
+- [ ] Boşluklar cömert mi — hiçbir element birbirine yapışık değil mi?
+- [ ] Başlıklar yeterince büyük mü — yarım metre uzaktan okunabilir mi?
+- [ ] Renk disiplini korunuyor mu — max 3 renk var mı?
+- [ ] Fotoğraflar kompozisyon olarak uygun mu?
+
+**Animasyon:**
+- [ ] Her section farklı animasyon mu kullanıyor (monotonluk yok)?
+- [ ] Easing değerleri sert mi yoksa yumuşak mı? (Sert olmamalı)
+- [ ] Lenis smooth scroll çalışıyor mu?
+- [ ] Hover state'lerin hepsi var mı?
+
+**Detay:**
+- [ ] Demo banner sabit mi: `"Bu site demo amaçlıdır — demo.ayristech.com"`
+- [ ] Mobile'da layout bozulmuyor mu?
+- [ ] TypeScript hataları var mı (`any` yok)?
+
+---
+
+## Proje Yapısı
+
+```
+demo-ayristech/
+├── app/
+│   ├── page.tsx              # Showcase index
+│   └── [slug]/page.tsx       # Dynamic routing
+├── components/
+│   └── templates/
+│       └── [SektörTemplate]/
+│           └── index.tsx     # Her şablon kendi klasöründe
+├── data/
+│   └── demos.ts              # Tüm demo verisi
+└── components/ui/
+    └── AnimatedCounter.tsx   # Scroll-triggered sayaç
+```
+
+Yeni şablon eklerken:
+1. `components/templates/YeniTemplate/index.tsx` oluştur
+2. `data/demos.ts` interface'ine yeni sektör tipini ve alanları ekle
+3. `app/[slug]/page.tsx` routing'e `if (data.template === "yeni") return <YeniTemplate data={data} />;`
+4. `app/page.tsx` `templateLabels`'a yeni badge ekle
+
+---
+
+## Müşteri Sitesi SS Analizi
+
+Sana müşterinin mevcut sitesinin ekran görüntüleri verildiğinde şu sırayla ilerle:
+
+### 1. İçerik Çıkarımı
+
+Her SS'den şunları çıkar:
+
+| Alan | Nereden Bulunur |
+|---|---|
+| Firma adı | Header, logo yanı, title |
+| Slogan | Hero başlığı veya alt metin |
+| Şehir / Adres | Footer, iletişim sayfası |
+| Telefon | Header, footer, iletişim |
+| E-posta | Footer, iletişim sayfası |
+| Çalışma saatleri | Footer veya iletişim |
+| Hizmetler | Hizmetler/servisler/poliklinikler sayfası |
+| Ekip / Doktorlar | Kadro/hakkımızda sayfası |
+| Yorumlar / Referanslar | Varsa ana sayfa veya ayrı sayfa |
+| Sosyal medya | Footer veya header ikonları |
+
+### 2. Mevcut Tasarımı Değerlendir
+
+SS'lere bakarak kısaca not al:
+- **Renk paleti:** Mevcut ana renk nedir?
+- **Genel his:** Profesyonel mi, eski mi, amatör mü?
+- **Eksikler:** Animasyon yok, mobile bozuk, fotoğraf kalitesi kötü vb.
+- **Güçlü yanlar:** Korunabilecek bir şey var mı?
+
+Bu değerlendirmeyi şablona yansıt — mevcut siteyi taklit etme, **dönüştür**.
+
+### 3. demos.ts Formatında Çıkar
+
+Analiz sonucunu aşağıdaki formatta hazırla, eksik alanları makul şekilde doldur:
+
+```typescript
+{
+  slug: "firma-adi",          // firma adından türet, küçük harf, tire ile
+  template: "klinik",         // sektöre göre seç
+  firma: {
+    adi: "Firma Adı",
+    slogan: "SS'den alınan slogan veya uygun bir slogan üret",
+    sehir: "Şehir",
+    adres: "Tam adres",
+    telefon: "+90 ...",
+    email: "info@...",
+    logoEmoji: "🏥",          // sektöre uygun emoji
+    renkAna: "#______",       // mevcut sitenin ana rengi
+    renkKoyu: "#______",      // daha koyu tonu
+    renkAcik: "#______",      // çok açık tonu (bg için)
+  },
+  istatistikler: [
+    { deger: "15+", etiket: "Yıllık Deneyim" },
+    // SS'de rakam varsa al, yoksa sektöre uygun üret
+  ],
+  hizmetler: [
+    { ikon: "🔬", baslik: "Hizmet Adı", aciklama: "Kısa açıklama" },
+    // SS'deki hizmetler sayfasından çek
+  ],
+  yorumlar: [
+    { yazar: "Ad Soyad", yorum: "...", puan: 5, tarih: "2024", emoji: "👤" },
+    // SS'de yoksa 3 adet gerçekçi yorum üret
+  ],
+  // Sektöre özel alanlar — SS'den çek, yoksa üret
+}
+```
+
+### 4. Şablon Seçimi
+
+Sektöre göre hangi şablonun kullanılacağına karar ver:
+
+| Sektör | Şablon |
+|---|---|
+| Klinik, hastane, sağlık merkezi | `klinik` |
+| Diş kliniği, estetik | `dental` |
+| Restoran, kafe, bistro | `restoran` veya `restoran2` |
+| Bar, meyhane, gece kulübü | `bar` veya `bar2` |
+| Otel, resort, apart | `hotel1`, `hotel2` veya `hotel3` |
+| Taksi, transfer, ulaşım | `taxi` veya `taxi2` |
+| Yazılım, SaaS, chatbot | `chatbot` |
+| İnşaat, mimarlık, kurumsal | `kurumsal` |
+
+Mevcut şablonlardan hiçbiri uygun değilse: **yeni şablon yaz** — TEMPLATE_BRIEF'teki tasarım kurallarına uyarak.
+
+### 5. Antigravity'e Ver
+
+Analiz tamamlandığında şunu söyle:
+
+> "Bu `demos.ts` verisini kullan. TEMPLATE_BRIEF.md'deki kurallara göre `[ŞabonAdı]` şablonunu yaz. Mevcut sitenin renk paletini koru ama tasarımı tamamen modernize et. İmza moment olarak `[seçilen imza moment]` kullan."
+
+---
+
+## Son Not
+
+Amaç: müşteriye link atıp "bak, senin için yaptım" diyebilmek.
+
+**Standart değil, özel. Güzel değil, etkileyici. Çalışıyor değil, hissettiriyor.**
+
+Eğer şablona baktığında "bu idare eder" diyorsan — yeniden başla.
diff --git a/docs/sccenerji.com/Anasayfa.jpg b/docs/sccenerji.com/Anasayfa.jpg
new file mode 100644
index 0000000..fe05b6a
Binary files /dev/null and b/docs/sccenerji.com/Anasayfa.jpg differ
diff --git a/docs/sccenerji.com/Bizi Tanıyın.jpg b/docs/sccenerji.com/Bizi Tanıyın.jpg
new file mode 100644
index 0000000..cca6fe5
Binary files /dev/null and b/docs/sccenerji.com/Bizi Tanıyın.jpg differ
diff --git a/docs/sccenerji.com/Hizmet Anlayışı.jpg b/docs/sccenerji.com/Hizmet Anlayışı.jpg
new file mode 100644
index 0000000..3a96436
Binary files /dev/null and b/docs/sccenerji.com/Hizmet Anlayışı.jpg differ
diff --git a/docs/sccenerji.com/Index.jpg b/docs/sccenerji.com/Index.jpg
new file mode 100644
index 0000000..ec45140
Binary files /dev/null and b/docs/sccenerji.com/Index.jpg differ
diff --git a/docs/sccenerji.com/Makaleler.jpg b/docs/sccenerji.com/Makaleler.jpg
new file mode 100644
index 0000000..c391b45
Binary files /dev/null and b/docs/sccenerji.com/Makaleler.jpg differ
diff --git a/docs/sccenerji.com/Tamamlanan Projeler.jpg b/docs/sccenerji.com/Tamamlanan Projeler.jpg
new file mode 100644
index 0000000..436d414
Binary files /dev/null and b/docs/sccenerji.com/Tamamlanan Projeler.jpg differ
diff --git a/docs/sccenerji.com/Vizyon ve Misyon.jpg b/docs/sccenerji.com/Vizyon ve Misyon.jpg
new file mode 100644
index 0000000..a190af7
Binary files /dev/null and b/docs/sccenerji.com/Vizyon ve Misyon.jpg differ
diff --git a/docs/sccenerji.com/Yeşil Dönüşüm Destekleri.jpg b/docs/sccenerji.com/Yeşil Dönüşüm Destekleri.jpg
new file mode 100644
index 0000000..2426473
Binary files /dev/null and b/docs/sccenerji.com/Yeşil Dönüşüm Destekleri.jpg differ
diff --git a/docs/sccenerji.com/Çözümlerimiz.jpg b/docs/sccenerji.com/Çözümlerimiz.jpg
new file mode 100644
index 0000000..fb2b87a
Binary files /dev/null and b/docs/sccenerji.com/Çözümlerimiz.jpg differ
diff --git a/docs/sccenerji.com/İletişim.jpg b/docs/sccenerji.com/İletişim.jpg
new file mode 100644
index 0000000..87a927c
Binary files /dev/null and b/docs/sccenerji.com/İletişim.jpg differ
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..68a6c64 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 194d143..19c2282 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "scenerji",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.40.0",
+        "lenis": "^1.3.23",
+        "lucide-react": "^1.17.0",
         "next": "16.2.6",
         "react": "19.2.4",
         "react-dom": "19.2.4"
@@ -3762,6 +3765,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4689,6 +4719,37 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.23",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.23.tgz",
+      "integrity": "sha512-YxYq3TJqj9sJNv0V9SkyQHejt14xwyIwgDaaMK89Uf9SxQfIszu+gTQSSphh6BWlLTNVKvvXAGkg+Zf+oFIevg==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5022,6 +5083,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5089,6 +5159,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 02e6e78..e3d9b54 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "framer-motion": "^12.40.0",
+    "lenis": "^1.3.23",
+    "lucide-react": "^1.17.0",
     "next": "16.2.6",
     "react": "19.2.4",
     "react-dom": "19.2.4"