first commit

app/[locale]/admin/layout.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { signOut } from 'next-auth/react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Users, Settings, LogOut, Menu, X } from 'lucide-react'
+import { useState } from 'react'
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  const navigation = [
+    { name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
+    { name: 'Kullanıcılar', href: '/admin/users', icon: Users },
+    { name: 'Ayarlar', href: '/admin/settings', icon: Settings },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+      {/* Mobile sidebar backdrop */}
+      {sidebarOpen && (
+        <div 
+          className="fixed inset-0 z-40 bg-gray-900/80 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div className={`
+        fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 
+        transform transition-transform duration-200 ease-in-out lg:translate-x-0 lg:static lg:inset-0
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+      `}>
+        <div className="h-full flex flex-col">
+          <div className="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-800">
+            <h1 className="text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</h1>
+            <button 
+              className="ml-auto lg:hidden text-gray-500"
+              onClick={() => setSidebarOpen(false)}
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+          
+          <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
+            {navigation.map((item) => {
+              const isActive = pathname.endsWith(item.href)
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={`
+                    flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors
+                    ${isActive 
+                      ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white' 
+                      : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'}
+                  `}
+                >
+                  <item.icon className={`mr-3 flex-shrink-0 h-5 w-5 ${isActive ? 'text-gray-900 dark:text-white' : 'text-gray-400'}`} />
+                  {item.name}
+                </Link>
+              )
+            })}
+          </nav>
+          
+          <div className="p-4 border-t border-gray-200 dark:border-gray-800">
+            <button
+              onClick={() => signOut({ callbackUrl: '/' })}
+              className="flex w-full items-center px-3 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
+            >
+              <LogOut className="mr-3 h-5 w-5" />
+              Çıkış Yap
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <header className="h-16 flex items-center lg:hidden bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 px-4">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+          <span className="ml-4 text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</span>
+        </header>
+        
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

app/[locale]/admin/page.tsx

@@ -0,0 +1,47 @@
+import { auth } from '@/lib/auth'
+
+export default async function AdminDashboardPage() {
+  const session = await auth()
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Dashboard</h2>
+        <p className="text-gray-500 dark:text-gray-400 mt-2">
+          Hoş geldiniz, {session?.user?.name || session?.user?.email}. İşte projenizin genel görünümü.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {/* Placeholder Stat Cards */}
+        {[
+          { name: 'Toplam Kullanıcı', stat: '1,245' },
+          { name: 'Aktif Oturumlar', stat: '42' },
+          { name: 'Yeni Kayıtlar', stat: '8' },
+          { name: 'Sistem Durumu', stat: 'Online' },
+        ].map((item) => (
+          <div
+            key={item.name}
+            className="overflow-hidden rounded-lg bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 px-4 py-5 shadow-sm sm:p-6"
+          >
+            <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">{item.name}</dt>
+            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
+              {item.stat}
+            </dd>
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-lg bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 shadow-sm">
+        <div className="p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Son Aktiviteler</h3>
+          <div className="mt-4 border-t border-gray-100 dark:border-gray-800">
+            <div className="py-4 text-sm text-gray-500">
+              Henüz aktivite kaydı bulunmuyor.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/layout.tsx

@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import { Archivo } from "next/font/google";
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { routing } from '@/i18n/routing';
+import "../globals.css";
+
+const archivo = Archivo({
+  subsets: ["latin"],
+  variable: "--font-archivo",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "AyrisLegal — Hukuki Düşünce Ortağınız",
+    template: "%s | AyrisLegal",
+  },
+  description:
+    "AyrisLegal, solo ve küçük büro avukatları için yapay zeka destekli hukuki asistanıdır. Dosya analizi, çok turlu hukuki sohbet ve emsal karar arama tek bir platformda.",
+  keywords: ["avukat yazılımı", "hukuki yapay zeka", "emsal karar arama", "hukuk ofisi yönetim", "AyrisLegal"],
+  authors: [{ name: "ayris.tech", url: "https://ayris.tech" }],
+  creator: "ayris.tech",
+  openGraph: {
+    type: "website",
+    locale: "tr_TR",
+    siteName: "AyrisLegal",
+    title: "AyrisLegal — Hukuki Düşünce Ortağınız",
+    description:
+      "Pasif araştırma değil, aktif düşünce ortağı. Avukatlar için yapay zeka destekli hukuki asistan.",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "AyrisLegal — Hukuki Düşünce Ortağınız",
+    description:
+      "Pasif araştırma değil, aktif düşünce ortağı. Avukatlar için yapay zeka destekli hukuki asistan.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({locale}));
+}
+
+export default async function RootLayout({
+  children,
+  params
+}: Readonly<{
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}>) {
+  const { locale } = await params;
+  
+  if (!routing.locales.includes(locale as any)) {
+    notFound();
+  }
+  
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <html
+      lang={locale}
+      className={`${archivo.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col" suppressHydrationWarning>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

app/[locale]/login/page.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    const result = await signIn('credentials', {
+      redirect: false,
+      email,
+      password,
+    })
+
+    if (result?.error) {
+      setError('Geçersiz e-posta veya şifre')
+      setLoading(false)
+    } else {
+      router.push('/admin')
+      router.refresh()
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-800 overflow-hidden">
+        <div className="p-8">
+          <div className="text-center mb-8">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Admin Girişi</h1>
+            <p className="text-sm text-gray-500 mt-2">Yönetim paneline erişmek için giriş yapın</p>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 text-red-600 p-3 rounded-md text-sm mb-6 border border-red-100">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="email">
+                E-posta
+              </label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors"
+                placeholder="admin@ayris.tech"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="password">
+                Şifre
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors"
+                placeholder="••••••••"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-md transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
+            </button>
+          </form>
+          
+          <div className="mt-6 text-center text-xs text-gray-400">
+            Demo credentials: admin@ayris.tech / admin
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/page.tsx

@@ -0,0 +1,513 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import Link from 'next/link'
+import { motion, useInView } from 'framer-motion'
+import ContactForm from '@/components/contact-form'
+
+/* ─── Design system tokens (Classical) ────────────────────────────────── */
+const T = {
+  bg:          '#f3f2f2',
+  surface:     '#eae9e9',
+  text:        '#201f1d',
+  divider:     'rgba(32,31,29,0.16)',
+  accent:      '#b68235',
+  accentDark:  '#7d5411',
+  neutral100:  '#f8f4f4',
+  fontHead:    '"Sora", sans-serif',
+  fontBody:    '"Inter", sans-serif',
+  radiusMd:    '4px',
+  radiusLg:    '7px',
+  shadowSm:    '0 1px 2px rgba(45,43,43,0.14)',
+  shadowMd:    '0 3px 10px rgba(45,43,43,0.16)',
+}
+
+/* ─── Reveal animation ─────────────────────────────────────────────────── */
+function Reveal({ children, className = '', delay = 0 }: {
+  children: React.ReactNode; className?: string; delay?: number
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const inView = useInView(ref, { once: true, margin: '-80px' })
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 28 }}
+      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 28 }}
+      transition={{ duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94], delay }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+/* ─── Rail nav ──────────────────────────────────────────────────────────── */
+const RAIL_ITEMS = [
+  { id: '02', href: '#is-akisi',     label: '02' },
+  { id: '03', href: '#farklilasim',  label: '03' },
+  { id: '04', href: '#ozellikler',   label: '04' },
+  { id: '05', href: '#fiyatlandirma', label: '05' },
+  { id: '06', href: '#guven',         label: '06' },
+  { id: '07', href: '#iletisim',      label: '07' },
+]
+
+/* ─── Component ─────────────────────────────────────────────────────────── */
+export default function HomePage() {
+  return (
+    <div style={{ background: T.bg, color: T.text, fontFamily: T.fontBody, minHeight: '100vh', position: 'relative' }}>
+
+      {/* ── Inline fonts ── */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@300;400;500;600&display=swap');
+        * { box-sizing: border-box; }
+        body { margin: 0; }
+        a { color: ${T.accent}; text-underline-offset: 3px; }
+        :focus-visible { outline: 2px solid ${T.accent}; outline-offset: 2px; }
+        ::selection { background: rgba(182,130,53,0.25); }
+        .rail-link { text-decoration: none; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.08em; transition: color .2s; font-family: ${T.fontHead}; }
+        .hr-line { height: 1px; border: 0; background: ${T.divider}; margin: 0; }
+        .plate { filter: sepia(0.22) saturate(0.82) contrast(1.05); box-sizing: border-box; border: 6px solid ${T.surface}; outline: 1px solid ${T.divider}; }
+        .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 14px; color: ${T.accent}; background: transparent; border: 1px solid ${T.accent}; padding: 9px 16px; border-radius: ${T.radiusMd}; transition: background .15s; }
+        .btn-primary:hover { background: rgba(182,130,53,0.1); }
+        .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 14px; color: ${T.accent}; background: transparent; border: none; padding: 9px 4px; border-radius: ${T.radiusMd}; transition: background .15s; }
+        .btn-ghost:hover { background: rgba(182,130,53,0.08); }
+        .btn-primary-lg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: ${T.fontHead}; font-weight: 600; font-size: 15px; color: ${T.accent}; background: transparent; border: 1px solid ${T.accent}; padding: 13px 24px; border-radius: ${T.radiusMd}; transition: background .15s; width: 100%; }
+        .btn-primary-lg:hover { background: rgba(182,130,53,0.1); }
+        .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+        .card { display: flex; flex-direction: column; gap: 9px; padding: 13.8px; border-radius: ${T.radiusMd}; background: transparent; border: 1px solid ${T.divider}; box-shadow: ${T.shadowSm}; }
+        .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: ${T.accent}; }
+        .card-title { font-family: ${T.fontHead}; font-weight: 600; font-size: 17px; line-height: 1.2; margin: 0; }
+        .card-body { margin: 0; font-size: 13px; opacity: 0.8; }
+        .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: rgba(32,31,29,0.7); }
+        .legal-input { width: 100%; min-height: 36px; padding: 6px 10px; font-family: ${T.fontBody}; font-size: 14px; color: ${T.text}; background: transparent; border: 1px solid ${T.divider}; border-radius: ${T.radiusMd}; transition: border-color .15s; }
+        .legal-input:hover { border-color: rgba(32,31,29,0.45); }
+        .legal-input:focus { outline: none; border-color: ${T.accent}; }
+        .tag-outline { display: inline-flex; align-items: center; font-size: 10.5px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; border: 1px solid ${T.accent}; color: ${T.accent}; }
+        @media (max-width: 900px) { .rail-fixed { display: none !important; } .hero-badges { display: none !important; } .card-grid { grid-template-columns: 1fr; } }
+        @media (max-width: 700px) { .hero-two-col { grid-template-columns: 1fr !important; } .contact-two-col { grid-template-columns: 1fr !important; } }
+      `}</style>
+
+      {/* ── Left rail ── */}
+      <div
+        className="rail-fixed"
+        style={{ position: 'fixed', left: '22px', top: 0, bottom: 0, width: '26px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '26px', zIndex: 20 }}
+      >
+        {RAIL_ITEMS.map(item => (
+          <a key={item.id} href={item.href} className="rail-link" style={{ color: 'rgba(32,31,29,0.4)', fontWeight: 400 }}
+            onMouseEnter={e => { e.currentTarget.style.color = T.accentDark; e.currentTarget.style.fontWeight = '600' }}
+            onMouseLeave={e => { e.currentTarget.style.color = 'rgba(32,31,29,0.4)'; e.currentTarget.style.fontWeight = '400' }}
+          >
+            {item.label}
+          </a>
+        ))}
+      </div>
+
+      {/* ══════════════════════════════ NAV ═════════════════════════════ */}
+      <nav style={{
+        position: 'sticky', top: 0, zIndex: 30,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        flexWrap: 'wrap', gap: '16px',
+        padding: '14px clamp(20px,6vw,64px)',
+        borderBottom: `1px solid ${T.divider}`,
+        background: T.bg,
+        backdropFilter: 'blur(10px)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <span style={{ fontFamily: T.fontHead, fontSize: '19px', textTransform: 'uppercase', display: 'flex', gap: '4px' }}>
+            <span style={{ fontWeight: 400, letterSpacing: '0.22em' }}>AYRIS</span>
+            <span style={{ fontWeight: 500, letterSpacing: '0.35em' }}>LEGAL</span>
+          </span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '24px', flexWrap: 'wrap' }}>
+          <a href="#farklilasim" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
+            onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
+            onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
+          >Farklılaşım</a>
+          <a href="#ozellikler" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
+            onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
+            onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
+          >Özellikler</a>
+          <a href="#fiyatlandirma" style={{ color: 'inherit', textDecoration: 'none', fontSize: '14px', fontFamily: T.fontBody }}
+            onMouseEnter={e => (e.currentTarget.style.color = T.accent)}
+            onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
+          >Fiyatlandırma</a>
+          <a href="#iletisim" className="btn-primary">Demo Talep Et</a>
+        </div>
+      </nav>
+
+      {/* ══════════════════════════════ HERO ════════════════════════════ */}
+      <section style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(64px,11vw,132px) clamp(20px,6vw,72px) clamp(48px,7vw,80px)', position: 'relative', overflow: 'hidden' }}>
+        <Reveal>
+          <span style={{ display: 'inline-block', fontSize: '13px', letterSpacing: '0.1em', textTransform: 'uppercase', color: T.accentDark, borderBottom: `1px solid ${T.accent}`, paddingBottom: '4px', marginBottom: '26px' }}>
+            Madde 01 — Değer Önermesi
+          </span>
+        </Reveal>
+        <div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: '56px', alignItems: 'center' }}>
+          <div>
+            <Reveal delay={0.05}>
+              <h1 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(46px,7.4vw,96px)', lineHeight: 0.98, letterSpacing: '-0.015em', margin: 0, marginLeft: '-0.03em', marginBottom: '0' }}>
+                <span style={{ display: 'block' }}>Dosyanızı okur,</span>
+                <span style={{ display: 'block' }}>sizinle <em style={{ fontStyle: 'italic', color: T.accentDark }}>tartışır.</em></span>
+              </h1>
+            </Reveal>
+            <Reveal delay={0.12}>
+              <p style={{ fontSize: 'clamp(17px,1.7vw,20px)', lineHeight: 1.65, maxWidth: '52ch', margin: '30px 0 0', color: 'rgba(32,31,29,0.82)', fontFamily: T.fontBody }}>
+                AyrisLegal, yüklediğiniz dava dosyasını analiz eden, içtihat bulan ve dilekçe taslağı çıkaran bir yapay zeka çalışma ortağı — pasif bir arama motoru değil, dosya üzerinde sizinle muhakeme eden bir meslektaş.
+              </p>
+            </Reveal>
+            <Reveal delay={0.18}>
+              <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginTop: '36px', alignItems: 'center' }}>
+                <a href="#iletisim" className="btn-primary" style={{ fontSize: '15px', padding: '13px 24px' }}>Demo Talep Et</a>
+                <a href="#farklilasim" className="btn-ghost" style={{ fontSize: '15px' }}>Nasıl çalışır ↓</a>
+              </div>
+              <p style={{ fontSize: '13px', marginTop: '24px', color: 'rgba(32,31,29,0.6)', fontFamily: T.fontBody }}>
+                Şu an erken erişim aşamasındayız — kurucu ekiple doğrudan görüşün.
+              </p>
+            </Reveal>
+          </div>
+
+          {/* Hero right: mock UI badges + plate */}
+          <div style={{ position: 'relative' }}>
+            <div className="hero-badges" style={{ position: 'absolute', top: '-18px', right: '6px', zIndex: 2, background: T.bg, border: `1px solid ${T.divider}`, borderRadius: T.radiusMd, padding: '8px 14px', fontSize: '12.5px', boxShadow: T.shadowSm, transform: 'rotate(-2deg)', fontFamily: T.fontBody }}>
+              İçtihat bulundu · 3 emsal
+            </div>
+            <div className="hero-badges" style={{ position: 'absolute', bottom: '-16px', left: '-14px', zIndex: 2, background: T.bg, border: `1px solid ${T.divider}`, borderRadius: T.radiusMd, padding: '8px 14px', fontSize: '12.5px', boxShadow: T.shadowSm, transform: 'rotate(2deg)', fontFamily: T.fontBody }}>
+              Dilekçe taslağı hazır
+            </div>
+            {/* Placeholder plate */}
+            <div className="plate" style={{ width: '100%', aspectRatio: '4/5', background: T.surface, display: 'flex', flexDirection: 'column', gap: '12px', padding: '24px', justifyContent: 'center' }}>
+              {['Dava dosyası yüklendi', 'AI analiz ediyor…', 'Argüman değerlendirmesi', 'Emsal: Yargıtay 2024/1234', 'Dilekçe taslağı oluşturuldu'].map((step, i) => (
+                <div key={i} style={{ padding: '10px 14px', borderRadius: T.radiusMd, background: T.bg, border: `1px solid ${T.divider}`, fontSize: '13px', color: i === 4 ? T.accentDark : 'rgba(32,31,29,0.75)', fontFamily: T.fontBody, display: 'flex', alignItems: 'center', gap: '10px' }}>
+                  <span style={{ width: '18px', height: '18px', borderRadius: '50%', background: i === 4 ? T.accent : T.divider, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', color: i === 4 ? '#fff' : 'rgba(32,31,29,0.5)', flexShrink: 0, fontFamily: T.fontHead }}>
+                    {i + 1}
+                  </span>
+                  {step}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ══════════════════════════════ STATS ═══════════════════════════ */}
+      <section style={{ maxWidth: '1240px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(56px,8vw,88px)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', borderTop: `1px solid ${T.divider}`, borderBottom: `1px solid ${T.divider}` }}>
+        {[
+          { value: '01',          label: 'Sabit fiyat, tüm avukatlara' },
+          { value: '40.000 TL',   label: 'Yıllık, gizli ücret yok' },
+          { value: '%100',        label: "Veri Türkiye'de kalır" },
+          { value: '7/24',        label: 'Dosyanızla çalışan ortak' },
+        ].map((s, i, arr) => (
+          <Reveal key={s.label} delay={i * 0.05}>
+            <div style={{ padding: '28px 20px', borderRight: i < arr.length - 1 ? `1px solid ${T.divider}` : undefined, textAlign: 'center' }}>
+              <div style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,4vw,44px)', color: T.accentDark }}>{s.value}</div>
+              <div style={{ fontSize: '13px', marginTop: '6px', color: 'rgba(32,31,29,0.65)', letterSpacing: '0.02em' }}>{s.label}</div>
+            </div>
+          </Reveal>
+        ))}
+      </section>
+
+      {/* ══════════════════════════════ PROBLEM ═════════════════════════ */}
+      <section id="is-akisi" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
+            Madde 02 — Bugünün iş akışı
+          </span>
+          <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 44px', letterSpacing: '-0.008em', maxWidth: '24ch' }}>
+            Dosya, arama, şablon, tekrar.
+          </h2>
+        </Reveal>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 0, borderTop: `1px solid ${T.divider}` }}>
+          <Reveal delay={0.05}>
+            <div style={{ padding: '32px 28px 32px 0', borderRight: `1px solid ${T.divider}` }}>
+              <span style={{ fontFamily: T.fontHead, fontSize: '15px', color: 'rgba(32,31,29,0.45)' }}>01 / Bugün</span>
+              <p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '14px 0 0', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
+                Dosya incelemesi bir programda, içtihat araması ayrı bir siteye açılan sekmede, dilekçe taslağı eski bir Word şablonunda. Her adımda bağlam yeniden kurulur, saatler kaybolur.
+              </p>
+            </div>
+          </Reveal>
+          <Reveal delay={0.1}>
+            <div style={{ padding: '32px 0 32px 28px' }}>
+              <span style={{ fontFamily: T.fontHead, fontSize: '15px', color: T.accentDark }}>02 / AyrisLegal ile</span>
+              <p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '14px 0 0', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
+                Tek bir çalışma alanı: dosyanızı yükleyin, AyrisLegal ile tartışın, içtihat bulun, dilekçe taslağı üretin — hepsi aynı ekranda, bağlamı hiç kaybetmeden.
+              </p>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      <hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
+
+      {/* ══════════════════════════════ DIFFERENTIATOR ══════════════════ */}
+      <section id="farklilasim" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
+            Madde 03 — Tartışma odaklı yapay zeka
+          </span>
+        </Reveal>
+        <div className="hero-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '56px', alignItems: 'center' }}>
+          <Reveal delay={0.05}>
+            <div>
+              <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,40px)', margin: '0 0 20px', letterSpacing: '-0.008em', maxWidth: '16ch' }}>
+                Bulmakla yetinmez, sizinle tartışır.
+              </h2>
+              <p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: '0 0 16px', maxWidth: '46ch', textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)' } as React.CSSProperties}>
+                Çoğu hukuk yazılımı özet çıkarır ya da anahtar kelimeyle arar. AyrisLegal dosyanızdaki argümanı okur, zayıf noktasını sorar, karşı görüş üretir, sizi ikna etmeye çalışır — ya da ikna olur.
+              </p>
+              <p style={{ fontSize: '13px', margin: 0, color: 'rgba(32,31,29,0.58)' }}>
+                Aşağıdaki görsel, bu tartışmanın nasıl göründüğünü gösteren temsili bir tasarımdır.
+              </p>
+            </div>
+          </Reveal>
+
+          {/* Chat simulation */}
+          <Reveal delay={0.1}>
+            <div className="plate" style={{ margin: 0, padding: '28px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+              {/* Lawyer message */}
+              <div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: T.bg, border: `1px solid ${T.divider}`, borderRadius: `${T.radiusMd} ${T.radiusMd} 4px ${T.radiusMd}`, padding: '14px 16px' }}>
+                <div style={{ fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.55)', marginBottom: '6px' }}>Avukat</div>
+                <p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Müvekkilin haklı olduğunu düşünüyorum, mülkiyet devri geçerli.</p>
+              </div>
+              {/* AyrisLegal response */}
+              <div style={{ alignSelf: 'flex-start', maxWidth: '82%', background: T.surface, border: `1px solid ${T.accent}`, borderRadius: `${T.radiusMd} ${T.radiusMd} ${T.radiusMd} 4px`, padding: '14px 16px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
+                  <span style={{ fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', color: T.accentDark }}>AyrisLegal</span>
+                  <span className="tag-outline" style={{ fontSize: '10.5px' }}>İtiraz</span>
+                </div>
+                <p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Devir tarihinde tapuda şerh var — bu, iyi niyet iddianızı zayıflatabilir. Şerhin kaldırılış tarihini kontrol ettiniz mi?</p>
+              </div>
+              {/* Lawyer reply */}
+              <div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: T.bg, border: `1px solid ${T.divider}`, borderRadius: `${T.radiusMd} ${T.radiusMd} 4px ${T.radiusMd}`, padding: '14px 16px' }}>
+                <p style={{ margin: 0, fontSize: '14.5px', lineHeight: 1.6, fontFamily: T.fontBody }}>Haklısınız — 3 emsal kararla bu noktayı destekleyelim.</p>
+              </div>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      <hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
+
+      {/* ══════════════════════════════ FEATURES ════════════════════════ */}
+      <section id="ozellikler" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
+            Madde 04 — Platform
+          </span>
+          <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 40px', letterSpacing: '-0.008em' }}>
+            Bir avukatın ihtiyaç duyduğu şeyler.
+          </h2>
+        </Reveal>
+        <div className="card-grid">
+          {/* Main feature — spans 2 cols */}
+          <Reveal>
+            <div className="card" style={{ gridColumn: 'span 2' }}>
+              <span className="card-kicker">AI tartışma ortağı</span>
+              <h3 className="card-title" style={{ fontSize: '26px' }}>Argümanınızı sınar, meslektaş gibi</h3>
+              <p className="card-body">Zayıf noktaları sorar, karşı görüş üretir, sizi zorlar — pasif özet değil, aktif muhakeme. AyrisLegal'ın temel farkı budur.</p>
+            </div>
+          </Reveal>
+          <Reveal delay={0.05}>
+            <div className="card">
+              <span className="card-kicker">Dosya analizi</span>
+              <h3 className="card-title">Dava dosyasını okur</h3>
+              <p className="card-body">Olay örgüsünü, tarafları ve hukuki dayanakları çıkarır.</p>
+            </div>
+          </Reveal>
+          <Reveal delay={0.1}>
+            <div className="card">
+              <span className="card-kicker">İçtihat arama</span>
+              <h3 className="card-title">Bağlama uygun emsal bulur</h3>
+              <p className="card-body">Anahtar kelime eşleşmesiyle değil, hukuki benzerlikle emsal kararları bulur.</p>
+            </div>
+          </Reveal>
+          <Reveal delay={0.12}>
+            <div className="card">
+              <span className="card-kicker">Dilekçe taslağı</span>
+              <h3 className="card-title">Tartışmayı taslağa döker</h3>
+              <p className="card-body">Vardığınız sonucu, düzenlenebilir bir dilekçe taslağına dönüştürür.</p>
+            </div>
+          </Reveal>
+          <Reveal delay={0.15}>
+            <div className="card">
+              <span className="card-kicker" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                Büro paylaşımı <span className="tag-outline">Yakında</span>
+              </span>
+              <h3 className="card-title">Ekip çalışması</h3>
+              <p className="card-body">Dosya ve tartışma geçmişini büro içindeki meslektaşlarınızla paylaşın.</p>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      <hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
+
+      {/* ══════════════════════════════ PRICING ═════════════════════════ */}
+      <section id="fiyatlandirma" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px', textAlign: 'center' }}>
+            Madde 05 — Fiyatlandırma
+          </span>
+          <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 44px', textAlign: 'center', letterSpacing: '-0.008em' }}>
+            İhtiyacınıza uygun modeller.
+          </h2>
+        </Reveal>
+        
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '32px', maxWidth: '960px', margin: '0 auto' }}>
+          
+          {/* ── Bireysel ── */}
+          <Reveal delay={0.08}>
+            <div style={{ display: 'flex', border: `1px solid ${T.divider}`, borderRadius: T.radiusLg, boxShadow: T.shadowMd, overflow: 'hidden', height: '100%' }}>
+              <div style={{ width: '34px', background: T.neutral100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', borderRight: `1px solid ${T.divider}`, padding: '20px 0' }}>
+                {['01','02','03','04','05'].map(t => (
+                  <span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
+                ))}
+              </div>
+              <div style={{ flex: 1, padding: '40px 36px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
+                <p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(42px,5vw,56px)', lineHeight: 1 }}>40.000 TL</p>
+                <p style={{ margin: '6px 0 0', fontSize: '14px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.6)' }}>Bireysel Avukat / Yıl</p>
+                <p style={{ fontSize: '15px', lineHeight: 1.6, margin: '20px auto 0', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
+                  Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.
+                </p>
+                <hr className="hr-line" style={{ margin: '24px 0' }} />
+                <ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', textAlign: 'left' }}>
+                  {['Sınırsız dosya analizi', 'AI tartışma ortağı', 'İçtihat arama', 'Dilekçe taslağı üretimi'].map(item => (
+                    <li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14.5px', fontFamily: T.fontBody }}>
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: '2px' }}>
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <a href="#iletisim" className="btn-primary-lg" style={{ marginTop: '26px' }}>Demo Talep Et</a>
+              </div>
+            </div>
+          </Reveal>
+
+          {/* ── Büro ── */}
+          <Reveal delay={0.15}>
+            <div style={{ display: 'flex', border: `1px solid ${T.accent}`, borderRadius: T.radiusLg, boxShadow: T.shadowMd, overflow: 'hidden', height: '100%', position: 'relative' }}>
+              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: T.accent, color: '#fff', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center', padding: '4px', fontFamily: T.fontHead, fontWeight: 600 }}>Ekip Çalışması</div>
+              <div style={{ width: '34px', background: 'rgba(182,130,53,0.05)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', borderRight: `1px solid ${T.divider}`, padding: '40px 0 20px' }}>
+                {['01','02','03','04','05'].map(t => (
+                  <span key={t} style={{ fontSize: '11px', color: T.accentDark, writingMode: 'vertical-rl', fontFamily: T.fontHead }}>{t}</span>
+                ))}
+              </div>
+              <div style={{ flex: 1, padding: '56px 36px 40px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
+                <p style={{ margin: 0, fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(32px,4vw,42px)', lineHeight: 1.1, color: T.accentDark, marginTop: '6px' }}>Hukuk Bürosu</p>
+                <p style={{ margin: '10px 0 0', fontSize: '14px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(32,31,29,0.6)' }}>Özel Fiyatlandırma</p>
+                <p style={{ fontSize: '15px', lineHeight: 1.6, margin: '20px auto 0', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
+                  Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.
+                </p>
+                <hr className="hr-line" style={{ margin: '24px 0' }} />
+                <ul style={{ listStyle: 'none', margin: '0 0 auto 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px', textAlign: 'left' }}>
+                  {['Tüm bireysel özellikler', 'Ekip içi dosya paylaşımı', 'Ortak içtihat havuzu', 'Kurucu ekiple özel destek'].map(item => (
+                    <li key={item} style={{ display: 'flex', gap: '10px', fontSize: '14.5px', fontFamily: T.fontBody }}>
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.accentDark} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: '2px' }}>
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <a href="#iletisim" className="btn-primary-lg" style={{ marginTop: '26px', background: T.accent, color: '#fff', border: 'none' }}
+                  onMouseEnter={e => (e.currentTarget.style.background = T.accentDark)}
+                  onMouseLeave={e => (e.currentTarget.style.background = T.accent)}
+                >İletişime Geçin</a>
+              </div>
+            </div>
+          </Reveal>
+
+        </div>
+      </section>
+
+      <hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
+
+      {/* ══════════════════════════════ TRUST ═══════════════════════════ */}
+      <section id="guven" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
+            Madde 06 — Güven ve veri güvenliği
+          </span>
+          <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(30px,3.6vw,44px)', margin: '0 0 16px', letterSpacing: '-0.008em' }}>
+            Dosyalarınız sizin kalır.
+          </h2>
+          <p style={{ fontSize: '15.5px', lineHeight: 1.7, maxWidth: '60ch', margin: '0 0 40px', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>
+            Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal'ı bu bilinçle kuruyoruz.
+          </p>
+        </Reveal>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 0, borderTop: `1px solid ${T.divider}` }}>
+          {[
+            {
+              icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 L20 5 V11 C20 16 16.5 19.5 12 21 C7.5 19.5 4 16 4 11 V5 Z"/><path d="M9 12 l2.2 2.2 L15.5 9.5"/></svg>,
+              title: "KVKK'ya uyumlu",
+              desc: 'Kişisel verilerin korunması mevzuatına uygun işleme ve saklama.',
+            },
+            {
+              icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><line x1="7" y1="7" x2="7" y2="7"/><line x1="7" y1="17" x2="7" y2="17"/></svg>,
+              title: "Sunucular Türkiye'de",
+              desc: "Verileriniz yurt dışına çıkmaz — Ayris Tech'in self-hosted altyapı felsefesiyle.",
+            },
+            {
+              icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="10" width="14" height="10" rx="1.5"/><path d="M8 10 V7 a4 4 0 0 1 8 0 v3"/></svg>,
+              title: 'Dosyanız modelleri eğitmez',
+              desc: 'Yüklediğiniz belgeler yalnızca sizin analizinizde kullanılır.',
+            },
+          ].map((item, i, arr) => (
+            <Reveal key={item.title} delay={i * 0.08}>
+              <div style={{ padding: '28px 24px 0', borderRight: i < arr.length - 1 ? `1px solid ${T.divider}` : undefined }}>
+                {item.icon}
+                <h3 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: '19px', margin: '12px 0 6px' }}>{item.title}</h3>
+                <p style={{ fontSize: '14.5px', lineHeight: 1.6, margin: 0, color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody }}>{item.desc}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      <hr className="hr-line" style={{ maxWidth: '1240px', margin: '0 auto' }} />
+
+      {/* ══════════════════════════════ CONTACT ═════════════════════════ */}
+      <section id="iletisim" style={{ maxWidth: '1240px', margin: '0 auto', padding: 'clamp(56px,9vw,108px) clamp(20px,6vw,72px)' }}>
+        <Reveal>
+          <span style={{ display: 'block', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: T.accentDark, marginBottom: '14px' }}>
+            Madde 07 — Erken erişim
+          </span>
+        </Reveal>
+        <div className="contact-two-col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,5fr) minmax(0,7fr)', gap: '48px' }}>
+          <Reveal delay={0.05}>
+            <div>
+              <h2 style={{ fontFamily: T.fontHead, fontWeight: 400, fontSize: 'clamp(28px,3.2vw,38px)', margin: '0 0 16px', letterSpacing: '-0.008em' }}>
+                Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
+              </h2>
+              <p style={{ fontSize: '15.5px', lineHeight: 1.7, margin: 0, textAlign: 'justify', hyphens: 'auto', color: 'rgba(32,31,29,0.78)', fontFamily: T.fontBody } as React.CSSProperties}>
+                AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz. Demo talep edin, ilk kullanan avukatlardan biri olun.
+              </p>
+              <div style={{ marginTop: '32px', display: 'flex', alignItems: 'center', gap: '14px' }}>
+                <div style={{ width: '48px', height: '48px', border: `1px solid ${T.accent}`, borderRadius: '50%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: T.fontHead, fontSize: '8px', color: T.accentDark, textAlign: 'center', lineHeight: 1.2, flexShrink: 0, textTransform: 'uppercase' }}>
+                  <span style={{ fontWeight: 400, letterSpacing: '0.22em' }}>AYRIS</span>
+                  <span style={{ fontWeight: 500, letterSpacing: '0.35em' }}>LEGAL</span>
+                </div>
+                <span style={{ fontSize: '12.5px', color: 'rgba(32,31,29,0.6)', fontFamily: T.fontBody }}>Kurucu ekip mührü</span>
+              </div>
+            </div>
+          </Reveal>
+          <Reveal delay={0.1}>
+            <ContactForm />
+          </Reveal>
+        </div>
+      </section>
+
+      {/* ══════════════════════════════ FOOTER ══════════════════════════ */}
+      <footer style={{ maxWidth: '1240px', margin: '0 auto', padding: '28px clamp(20px,6vw,72px) 40px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: 'rgba(32,31,29,0.6)', borderTop: `1px solid ${T.divider}`, fontFamily: T.fontBody }}>
+        <span>AyrisLegal, Ayris Tech'in bir ürünüdür.</span>
+        <span>
+          © {new Date().getFullYear()} AyrisLegal ·{' '}
+          <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(32,31,29,0.6)' }}>
+            Created by ayris.tech
+          </a>
+        </span>
+      </footer>
+    </div>
+  )
+}