refactor(v2): design-taste skiliyle marka renklerine (kırmızı/zinc) geçiş

Referans olarak gösterilen görsellerdeki turuncu/lacivert palet başka
bir şirkete ait olduğu için tamamen kaldırıldı, AyrisLegal'ın kendi
kırmızı aksanına (#E61919) sadık kalındı. Inline style yerine Tailwind
utility'lerine, emoji yerine lucide-react ikonlarına geçildi. Hero
ortadan hizalı yerine asimetrik split düzene, alt özellik şeridi ise
"3 eşit kart" yerine bento grid'e dönüştürüldü. Spring physics tabanlı
Framer Motion reveal + magnetic CTA butonu eklendi.

app/[locale]/v2/page.tsx

@@ -1,26 +1,22 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView, useMotionValue, useTransform, useSpring } from 'framer-motion'
+import {
+  ArrowRight, FileText, Search, MessageSquare, ShieldCheck, Cloud, Lock,
+  CheckCircle2, Sparkles, Scale, GraduationCap, AlertTriangle,
+  FolderOpen, Landmark, Users2, ChevronRight,
+} from 'lucide-react'
 import ContactFormV2 from '@/components/contact-form-v2'
 
-/* ─── Design tokens (Modern SaaS / warm & rounded) ─────────────────────── */
+/* ─────────────────────────────────────────────────────────────────────────
-const T = {
+   Brand tokens — AyrisLegal kırmızısı (#E61919) tek aksan renk, nötr taban
-  bg:        '#FFFFFF',
+   zinc skalası. Referans görsellerdeki turuncu/lacivert paletle kasıtlı
-  bgSoft:    '#FFF8F1',
+   olarak hiçbir ortak nokta yok (başka bir şirketin kimliği).
-  ink:       '#0B1220',
+   ───────────────────────────────────────────────────────────────────────── */
-  inkSoft:   'rgba(11,18,32,0.62)',
+const ACCENT = '#E61919'
-  inkFaint:  'rgba(11,18,32,0.42)',
+const ACCENT_DARK = '#B8140F'
-  orange:    '#F2600C',
+const ACCENT_SOFT = '#FDEEEC'
-  orangeDark:'#D94E00',
-  orangeSoft:'#FFEDD9',
-  navy:      '#16223D',
-  navySoft:  '#EEF2FB',
-  green:     '#0F9D6E',
-  greenSoft: '#E4F7EF',
-  border:    'rgba(11,18,32,0.08)',
-  fontHead:  '"Archivo", sans-serif',
-}
 
 function Reveal({ children, className = '', delay = 0 }: {
   children: React.ReactNode; className?: string; delay?: number
@@ -30,9 +26,9 @@ function Reveal({ children, className = '', delay = 0 }: {
   return (
     <motion.div
       ref={ref}
-      initial={{ opacity: 0, y: 18 }}
+      initial={{ opacity: 0, y: 20 }}
-      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 }}
+      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-      transition={{ duration: 0.5, ease: 'easeOut', delay }}
+      transition={{ type: 'spring', stiffness: 100, damping: 20, delay }}
       className={className}
     >
       {children}
@@ -40,17 +36,71 @@ function Reveal({ children, className = '', delay = 0 }: {
   )
 }
 
-/* ─── Mock "browser window" chrome wrapper ─────────────────────────────── */
+/* Magnetic CTA — useMotionValue/useTransform dışında hiçbir React state
-function BrowserFrame({ children, width = '100%' }: { children: React.ReactNode; width?: string }) {
+   kullanmıyor (skill kuralı: sürekli hover animasyonu için useState yasak). */
+function MagneticButton({ href, children, variant = 'solid' }: {
+  href: string; children: React.ReactNode; variant?: 'solid' | 'outline'
+}) {
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const springX = useSpring(x, { stiffness: 150, damping: 15, mass: 0.5 })
+  const springY = useSpring(y, { stiffness: 150, damping: 15, mass: 0.5 })
+  const tx = useTransform(springX, v => v)
+  const ty = useTransform(springY, v => v)
+
+  const handleMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    x.set((e.clientX - rect.left - rect.width / 2) * 0.25)
+    y.set((e.clientY - rect.top - rect.height / 2) * 0.25)
+  }
+  const handleLeave = () => { x.set(0); y.set(0) }
+
+  const base = 'inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 text-[15px] font-semibold transition-colors active:scale-[0.98]'
+  const style = variant === 'solid'
+    ? { background: ACCENT, color: '#fff' }
+    : { background: '#fff', color: '#18181B', border: '1.5px solid rgb(228 228 231)' }
+
   return (
-    <div style={{ width, borderRadius: '18px', overflow: 'hidden', background: '#fff', border: `1px solid ${T.border}`, boxShadow: '0 30px 70px -20px rgba(11,18,32,0.25)' }}>
+    <motion.a
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 16px', background: '#F4F5F7', borderBottom: `1px solid ${T.border}` }}>
+      href={href}
-        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
+      onMouseMove={handleMove}
-        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
+      onMouseLeave={handleLeave}
-        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
+      style={{ x: tx, y: ty, ...style }}
-        <span style={{ flex: 1, textAlign: 'center', fontSize: '12px', color: T.inkFaint, fontWeight: 500 }}>ayrislegal.com</span>
+      className={base}
+      onMouseEnter={e => { if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT_DARK }}
+      onMouseOut={e => { if (variant === 'solid') (e.currentTarget as HTMLElement).style.background = ACCENT }}
+    >
+      {children}
+    </motion.a>
+  )
+}
+
+/* Sürekli nabız atan "canlı" gösterge — izole, memoized, parent'ı
+   yeniden render etmez (performance guardrail). */
+const LivePulse = React.memo(function LivePulse() {
+  return (
+    <span className="relative flex h-2 w-2">
+      <motion.span
+        className="absolute inline-flex h-full w-full rounded-full"
+        style={{ background: ACCENT }}
+        animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}
+        transition={{ duration: 1.6, repeat: Infinity, ease: 'easeOut' }}
+      />
+      <span className="relative inline-flex h-2 w-2 rounded-full" style={{ background: ACCENT }} />
+    </span>
+  )
+})
+
+function BrowserFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-full overflow-hidden rounded-[1.75rem] border border-zinc-200/70 bg-white shadow-[0_30px_70px_-25px_rgba(24,24,27,0.25)]">
+      <div className="flex items-center gap-2 border-b border-zinc-200/70 bg-zinc-50 px-4 py-3">
+        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
+        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
+        <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
+        <span className="flex-1 text-center text-xs font-medium text-zinc-400">ayrislegal.com</span>
       </div>
-      <div style={{ background: '#fff' }}>{children}</div>
+      <div className="bg-white">{children}</div>
     </div>
   )
 }
@@ -66,160 +116,158 @@ export default function HomePageV2() {
   const [pricingYearly, setPricingYearly] = useState(true)
 
   return (
-    <div style={{ background: T.bg, color: T.ink, fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif', minHeight: '100vh' }}>
+    <div className="min-h-[100dvh] bg-white text-zinc-900" style={{ fontFamily: '"Archivo", ui-sans-serif, system-ui, sans-serif' }}>
       <style>{`
-        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');
-        * { box-sizing: border-box; }
+        ::selection { background: ${ACCENT_SOFT}; color: ${ACCENT_DARK}; }
-        body { margin: 0; }
-        a { color: inherit; }
-        :focus-visible { outline: 2px solid ${T.orange}; outline-offset: 2px; }
-        ::selection { background: ${T.orangeSoft}; color: ${T.ink}; }
-        .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: #fff; background: ${T.orange}; border: none; border-radius: 999px; padding: 15px 28px; transition: background .15s, transform .1s; }
-        .btn-primary:hover { background: ${T.orangeDark}; transform: translateY(-1px); }
-        .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px; color: ${T.ink}; background: #fff; border: 1.5px solid ${T.border}; border-radius: 999px; padding: 15px 28px; transition: border-color .15s, background .15s; }
-        .btn-outline:hover { border-color: ${T.ink}; background: ${T.navySoft}; }
-        .nav-link { color: ${T.inkSoft}; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .15s; }
-        .nav-link:hover { color: ${T.ink}; }
-        .pill-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: ${T.orangeSoft}; color: ${T.orangeDark}; }
-        .feature-card { border-radius: 20px; border: 1px solid ${T.border}; background: #fff; padding: 28px; transition: box-shadow .2s, transform .2s; }
-        .feature-card:hover { box-shadow: 0 20px 50px -20px rgba(11,18,32,0.18); transform: translateY(-3px); }
-        .soon-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: ${T.navySoft}; color: ${T.navy}; }
-        @media (max-width: 900px) { .nav-links { display: none !important; } .split-2col { grid-template-columns: 1fr !important; } }
-        @media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr !important; } .grid-2 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: repeat(2,1fr) !important; } }
       `}</style>
 
       {/* ══════════════════════════════ NAV ═════════════════════════════ */}
-      <nav style={{ position: 'sticky', top: 0, zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '16px clamp(20px,6vw,64px)', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', borderBottom: `1px solid ${T.border}` }}>
+      <nav className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-zinc-100 bg-white/85 px-5 py-4 backdrop-blur-md md:px-16">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <img src="/logo.png" alt="AyrisLegal" className="h-6 w-auto object-contain" />
-          <img src="/logo.png" alt="AyrisLegal" style={{ height: '26px', width: 'auto', objectFit: 'contain' }} />
+        <div className="hidden items-center gap-8 md:flex">
+          {NAV_LINKS.map(l => (
+            <a key={l.href} href={l.href} className="text-[14.5px] font-semibold text-zinc-500 transition-colors hover:text-zinc-900">
+              {l.label}
+            </a>
+          ))}
         </div>
-        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
+        <div className="flex items-center gap-3">
-          {NAV_LINKS.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
+          <a href="#iletisim" className="hidden rounded-full border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-900 transition-colors hover:bg-zinc-50 sm:inline-block">
-        </div>
+            Giriş Yap
-        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          </a>
-          <a href="#iletisim" className="btn-outline" style={{ padding: '10px 20px', fontSize: '14px' }}>Giriş Yap</a>
+          <a href="#iletisim" className="inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-colors" style={{ background: ACCENT }}>
-          <a href="#iletisim" className="btn-primary" style={{ padding: '10px 22px', fontSize: '14px' }}>Ücretsiz Deneyin →</a>
+            Ücretsiz Deneyin <ArrowRight size={15} strokeWidth={2} />
+          </a>
         </div>
       </nav>
 
-      {/* ══════════════════════════════ HERO ════════════════════════════ */}
+      {/* ══════════════════════════════ HERO — asimetrik, sola hizalı ═══ */}
-      <section style={{
+      <section className="relative overflow-hidden">
-        position: 'relative', overflow: 'hidden',
+        <div className="pointer-events-none absolute -right-40 -top-40 h-[520px] w-[520px] rounded-full opacity-[0.07] blur-3xl" style={{ background: ACCENT }} />
-        background: `radial-gradient(circle at 30% 0%, ${T.orangeSoft} 0%, ${T.bg} 55%)`,
+        <div className="mx-auto grid max-w-[1400px] grid-cols-1 gap-14 px-5 pb-16 pt-16 md:grid-cols-[1fr_0.9fr] md:gap-10 md:px-16 md:pb-24 md:pt-24">
-      }}>
+          <div>
-        <div style={{ maxWidth: '900px', margin: '0 auto', padding: 'clamp(64px,10vw,120px) clamp(20px,6vw,72px) clamp(48px,7vw,72px)', textAlign: 'center', position: 'relative' }}>
+            <Reveal>
-          <Reveal>
+              <span className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-semibold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>
-            <span className="pill-badge">✨ Avukatlar için yapay zeka destekli hukuki asistan</span>
+                <Sparkles size={14} strokeWidth={2.5} /> Avukatlar için yapay zeka destekli hukuki asistan
-          </Reveal>
+              </span>
-          <Reveal delay={0.06}>
+            </Reveal>
-            <h1 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(36px,6.5vw,64px)', lineHeight: 1.08, letterSpacing: '-0.02em', margin: '24px 0 0' }}>
+            <Reveal delay={0.06}>
-              Hukuk Pratiğinde<br />
+              <h1 className="mt-6 text-[clamp(38px,5.5vw,60px)] font-extrabold leading-[1.03] tracking-tighter text-zinc-950">
-              <span style={{ color: T.orange }}>Yapay Zeka Devrimi</span>
+                Pasif araştırma değil,<br />
-            </h1>
+                <span style={{ color: ACCENT }}>aktif düşünce ortağı.</span>
-          </Reveal>
+              </h1>
-          <Reveal delay={0.12}>
+            </Reveal>
-            <p style={{ fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.6, color: T.inkSoft, maxWidth: '58ch', margin: '24px auto 0' }}>
+            <Reveal delay={0.12}>
-              Dava dosyalarınızla sohbet edin, saniyeler içinde dilekçe taslağı oluşturun ve içtihat taraması yapın. AyrisLegal, modern hukukçunun güç kaynağı.
+              <p className="mt-6 max-w-[52ch] text-[17px] leading-relaxed text-zinc-500">
-            </p>
+                AyrisLegal, dava dosyalarınızı analiz eder, hukuki sorularınızı yanıtlar, içtihat taraması yapar ve saniyeler içinde dilekçe taslağı oluşturur.
-          </Reveal>
-          <Reveal delay={0.18}>
-            <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '36px' }}>
-              <a href="#iletisim" className="btn-primary">Ücretsiz Deneyin →</a>
-              <a href="#tanisin" className="btn-outline">Nasıl Çalışır?</a>
-            </div>
-          </Reveal>
-          <Reveal delay={0.22}>
-            <p style={{ fontSize: '13px', color: T.inkFaint, marginTop: '20px' }}>
-              Kredi kartı gerekmez · Kurucu ekiple birebir demo
-            </p>
-          </Reveal>
-        </div>
-
-        {/* Hero mockup */}
-        <Reveal delay={0.2}>
-          <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,8vw,96px)' }}>
-            <BrowserFrame>
-              <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '360px' }}>
-                <div style={{ background: T.navySoft, padding: '20px 16px', borderRight: `1px solid ${T.border}`, display: 'flex', flexDirection: 'column', gap: '6px' }}>
-                  {['📊 Kontrol Merkezi', '📁 Davalar', '📄 Dilekçe', '🔍 İçtihat', '💬 Chat'].map((item, i) => (
-                    <div key={item} style={{ padding: '10px 12px', borderRadius: '10px', fontSize: '13px', fontWeight: 600, background: i === 1 ? '#fff' : 'transparent', color: i === 1 ? T.orange : T.inkSoft, boxShadow: i === 1 ? '0 2px 8px rgba(11,18,32,0.08)' : 'none' }}>
-                      {item}
-                    </div>
-                  ))}
-                </div>
-                <div style={{ padding: '24px' }}>
-                  <div style={{ fontSize: '12px', color: T.inkFaint, fontWeight: 600, marginBottom: '14px' }}>KİRA TESPİT DAVASI · DOSYA DETAYI</div>
-                  {[
-                    { name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026', tag: 'diğer' },
-                    { name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026', tag: 'tutanak' },
-                    { name: 'Kira Sözleşmesi', date: '10.01.2026', tag: 'diğer' },
-                  ].map(row => (
-                    <div key={row.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: '12px', border: `1px solid ${T.border}`, marginBottom: '8px' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.green }} />
-                        <span style={{ fontSize: '13.5px', fontWeight: 600 }}>{row.name}</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                        <span style={{ fontSize: '12px', color: T.inkFaint }}>{row.date}</span>
-                        <span style={{ fontSize: '11px', fontWeight: 700, padding: '3px 10px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{row.tag}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </BrowserFrame>
-          </div>
-        </Reveal>
-      </section>
-
-      {/* ══════════════════════════════ STATS ═══════════════════════════ */}
-      <section style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px) clamp(48px,7vw,72px)' }}>
-        <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
-          {[
-            { value: '1', label: 'Sabit fiyat, tüm avukatlara' },
-            { value: '40.000 ₺', label: 'Yıllık, gizli ücret yok' },
-            { value: '5', label: 'Mahkeme kaynağı tek ekranda' },
-            { value: '7/24', label: 'Dosyanızla çalışan ortak' },
-          ].map(s => (
-            <div key={s.label} style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 16px', textAlign: 'center' }}>
-              <div style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '28px', color: T.orange }}>{s.value}</div>
-              <div style={{ fontSize: '12.5px', color: T.inkSoft, marginTop: '6px', lineHeight: 1.4 }}>{s.label}</div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* ══════════════════════════════ TANIŞIN — alternating feature showcase ══════════════ */}
-      <section id="tanisin" style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
-        <Reveal>
-          <div style={{ textAlign: 'center', marginBottom: 'clamp(48px,8vw,80px)' }}>
-            <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(28px,4vw,42px)', margin: '0 0 12px', letterSpacing: '-0.02em' }}>AyrisLegal ile Tanışın</h2>
-            <p style={{ fontSize: '16px', color: T.inkSoft }}>Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda</p>
-          </div>
-        </Reveal>
-
-        {/* 01 — Dava Dosyası Yönetimi */}
-        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
-          <Reveal>
-            <div>
-              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>01</span>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dava Dosyası Yönetimi</h3>
-              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
-                Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
               </p>
+            </Reveal>
+            <Reveal delay={0.18}>
+              <div className="mt-9 flex flex-wrap items-center gap-4">
+                <MagneticButton href="#iletisim">Ücretsiz Deneyin <ArrowRight size={16} strokeWidth={2.5} /></MagneticButton>
+                <MagneticButton href="#tanisin" variant="outline">Nasıl Çalışır?</MagneticButton>
+              </div>
+            </Reveal>
+            <Reveal delay={0.24}>
+              <p className="mt-5 text-[13px] text-zinc-400">Kredi kartı gerekmez · Kurucu ekiple birebir demo</p>
+            </Reveal>
+          </div>
+
+          {/* Asimetrik görsel kompozisyon: ana panel + üstüne binen yüzen kart */}
+          <Reveal delay={0.15} className="relative">
+            <div className="relative mt-6 md:mt-14">
+              <BrowserFrame>
+                <div className="p-5">
+                  <div className="mb-4 flex items-center justify-between">
+                    <span className="text-[11px] font-bold uppercase tracking-wide text-zinc-400">Kira Tespit Davası · Dosya Detayı</span>
+                    <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-zinc-400">
+                      <LivePulse /> Canlı
+                    </span>
+                  </div>
+                  {[
+                    { name: 'Bilirkişi Raporu - Kira Tespiti', date: '15.01.2026' },
+                    { name: '2024/100 Esas Tensip Tutanağı', date: '10.01.2026' },
+                    { name: 'Kira Sözleşmesi', date: '10.01.2026' },
+                  ].map(row => (
+                    <div key={row.name} className="mb-2 flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3">
+                      <div className="flex items-center gap-2.5">
+                        <CheckCircle2 size={15} strokeWidth={2} className="text-zinc-300" />
+                        <span className="text-[13.5px] font-semibold text-zinc-700">{row.name}</span>
+                      </div>
+                      <span className="text-[11.5px] text-zinc-400">{row.date}</span>
+                    </div>
+                  ))}
+                </div>
+              </BrowserFrame>
+
+              {/* Yüzen, üste binen ikinci panel — variance 8 asimetrisi */}
+              <div className="absolute -bottom-8 -left-8 hidden w-[220px] rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-[0_20px_45px_-15px_rgba(24,24,27,0.2)] sm:block">
+                <div className="mb-2 flex items-center gap-2" style={{ color: ACCENT }}>
+                  <AlertTriangle size={15} strokeWidth={2.5} />
+                  <span className="text-[11px] font-bold uppercase tracking-wide">Çelişki Avcısı</span>
+                </div>
+                <p className="text-[12px] leading-snug text-zinc-500">2 ifade arasında çelişki tespit edildi.</p>
+              </div>
             </div>
           </Reveal>
+        </div>
+
+        {/* İstatistik şeridi — asimetrik genişlikler */}
+        <div className="mx-auto max-w-[1400px] px-5 pb-16 md:px-16">
+          <Reveal>
+            <div className="grid grid-cols-2 gap-3 border-t border-zinc-100 pt-10 md:grid-cols-[1fr_1.3fr_1fr_1fr] md:gap-4">
+              {[
+                { value: '1', label: 'Sabit fiyat, tüm avukatlara' },
+                { value: '40.000 ₺', label: 'Yıllık, gizli ücret yok' },
+                { value: '5', label: 'Mahkeme kaynağı tek ekranda' },
+                { value: '7/24', label: 'Dosyanızla çalışan ortak' },
+              ].map(s => (
+                <div key={s.label}>
+                  <div className="font-mono text-2xl font-bold text-zinc-950">{s.value}</div>
+                  <div className="mt-1 text-[12.5px] leading-snug text-zinc-500">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      {/* ══════════════════════════════ TANIŞIN — zig-zag showcase ══════════════ */}
+      <section id="tanisin" className="mx-auto max-w-[1400px] px-5 py-20 md:px-16 md:py-28">
+        <Reveal>
+          <div className="mb-16 max-w-[46ch] md:mb-24">
+            <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Platform</span>
+            <h2 className="mt-3 text-[clamp(28px,3.6vw,42px)] font-extrabold tracking-tighter text-zinc-950">AyrisLegal ile tanışın</h2>
+            <p className="mt-3 text-[16px] text-zinc-500">Modern hukukçunun ihtiyaç duyduğu tüm araçlar, tek bir platformda.</p>
+          </div>
+        </Reveal>
+
+        {/* 01 */}
+        <div className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
+          <Reveal>
+            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>01</span>
+            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dava dosyası yönetimi</h3>
+            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
+              Belgelerinizi yükleyin, yapay zeka saniyeler içinde okuyup analiz etsin. Dosyanın tarafları, UYAP bilgileri ve genel durumu tek ekranda.
+            </p>
+          </Reveal>
           <Reveal delay={0.08}>
             <BrowserFrame>
-              <div style={{ padding: '20px' }}>
+              <div className="p-5">
-                <div style={{ fontSize: '12px', fontWeight: 700, color: T.inkFaint, marginBottom: '12px' }}>GENEL BAKIŞ</div>
+                <div className="mb-3 flex flex-wrap gap-1.5">
-                {['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler', 'Chat'].map((t, i) => (
+                  {['Genel Bakış', 'Belgeler', 'İçtihat Arama', 'Dilekçeler'].map((t, i) => (
-                  <div key={t} style={{ display: 'inline-block', fontSize: '12px', fontWeight: 600, padding: '6px 12px', borderRadius: '999px', marginRight: '6px', marginBottom: '14px', background: i === 0 ? T.orange : T.navySoft, color: i === 0 ? '#fff' : T.inkSoft }}>{t}</div>
+                    <span key={t} className={`rounded-full px-3 py-1.5 text-[11.5px] font-semibold ${i === 0 ? 'text-white' : 'text-zinc-500'}`} style={i === 0 ? { background: ACCENT } : { background: '#F4F4F5' }}>
-                ))}
+                      {t}
-                <div style={{ borderRadius: '14px', border: `1px solid ${T.border}`, padding: '16px', background: T.bgSoft }}>
+                    </span>
-                  <div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '8px' }}>Taraflar</div>
+                  ))}
-                  <div style={{ fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.8 }}>
+                </div>
-                    Davacı: Elif Yılmaz<br />Davalı: Mehmet Kaya<br />Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi
+                <div className="rounded-2xl border border-zinc-100 bg-zinc-50/60 p-4">
+                  <div className="mb-2 text-[12.5px] font-bold text-zinc-800">Taraflar</div>
+                  <div className="space-y-1 text-[12.5px] text-zinc-500">
+                    <div>Davacı: Elif Yılmaz</div>
+                    <div>Davalı: Mehmet Kaya</div>
+                    <div>Mahkeme: Ankara 33. Sulh Hukuk Mahkemesi</div>
                   </div>
                 </div>
               </div>
@@ -227,230 +275,202 @@ export default function HomePageV2() {
           </Reveal>
         </div>
 
-        {/* 02 — Akıllı Analizler */}
+        {/* 02 — image left, text right */}
-        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
+        <div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
-          <Reveal className="order-2" delay={0.08}>
+          <Reveal delay={0.08} className="order-2 md:order-1">
             <BrowserFrame>
-              <div style={{ padding: '20px' }}>
+              <div className="p-5">
-                <div style={{ fontSize: '13px', fontWeight: 700, marginBottom: '12px' }}>⚡ Dava Stratejisi</div>
+                <div className="mb-3 flex items-center gap-2 text-[13px] font-bold text-zinc-800">
-                <ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: '12.5px', color: T.inkSoft, lineHeight: 1.9 }}>
+                  <Scale size={16} strokeWidth={2} style={{ color: ACCENT }} /> Dava Stratejisi
+                </div>
+                <ul className="mb-4 space-y-2 pl-4 text-[12.5px] leading-relaxed text-zinc-500" style={{ listStyleType: 'disc' }}>
                   <li>Kira sözleşmesinin emsal olarak kullanılması</li>
                   <li>Bilirkişi raporundaki hatalı değerlendirmelerin çürütülmesi</li>
                   <li>Kira bedelinin 01.08.2023&apos;ten itibaren geçerli sayılması</li>
                 </ul>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginTop: '16px' }}>
+                <div className="grid grid-cols-2 gap-2.5">
-                  <div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: T.greenSoft }}>
+                  <div className="rounded-xl border border-zinc-100 bg-emerald-50/60 p-3">
-                    <div style={{ fontSize: '11px', fontWeight: 700, color: T.green, marginBottom: '4px' }}>✓ MEVCUT DELİLLER</div>
+                    <div className="mb-1 text-[10.5px] font-bold text-emerald-700">MEVCUT DELİLLER</div>
-                    <div style={{ fontSize: '11.5px', color: T.inkSoft }}>Temmuz 2026 emsal ilanları</div>
+                    <div className="text-[11.5px] text-zinc-500">Temmuz 2026 emsal ilanları</div>
                   </div>
-                  <div style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '12px', background: '#FEF2F2' }}>
+                  <div className="rounded-xl border border-zinc-100 p-3" style={{ background: ACCENT_SOFT }}>
-                    <div style={{ fontSize: '11px', fontWeight: 700, color: '#DC2626', marginBottom: '4px' }}>✕ EKSİK DELİLLER</div>
+                    <div className="mb-1 text-[10.5px] font-bold" style={{ color: ACCENT_DARK }}>EKSİK DELİLLER</div>
-                    <div style={{ fontSize: '11.5px', color: T.inkSoft }}>Güncel emsal kira ilanı</div>
+                    <div className="text-[11.5px] text-zinc-500">Güncel emsal kira ilanı</div>
                   </div>
                 </div>
               </div>
             </BrowserFrame>
           </Reveal>
-          <Reveal>
+          <Reveal className="order-1 md:order-2">
-            <div>
+            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>02</span>
-              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>02</span>
+            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">Dosya içerisinde akıllı analizler</h3>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Dosya İçerisinde Akıllı Analizler</h3>
+            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
-              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: '0 0 16px' }}>
+              Dosya Özeti, Dosya Röntgeni, Çelişki Avcısı, Dava Stratejisi ve Müzakere/Arabuluculuk analizleri — dosyanızdaki tüm belgeleri okuyarak tek tıkla kapsamlı analizler sunar.
-                Dosya Özeti, Dosya Röntgeni, Çelişki Avcısı, Dava Stratejisi ve Müzakere/Arabuluculuk analizleri — dosyanızdaki tüm belgeleri okuyarak tek tıkla kapsamlı analizler sunar.
+            </p>
-              </p>
+            <div className="mt-5 flex flex-wrap gap-2">
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+              {['Çelişki Avcısı', 'Dosya Özeti', 'Dosya Röntgeni', 'Müzakere'].map(t => (
-                {['🚨 Çelişki Avcısı', '📋 Dosya Özeti', '🔎 Dosya Röntgeni', '⚖️ Müzakere'].map(t => (
+                <span key={t} className="rounded-full bg-zinc-100 px-3.5 py-1.5 text-[12px] font-semibold text-zinc-600">{t}</span>
-                  <span key={t} className="pill-badge" style={{ background: T.navySoft, color: T.navy }}>{t}</span>
+              ))}
-                ))}
-              </div>
             </div>
           </Reveal>
         </div>
 
-        {/* 03 — İçtihat Arama ve Raporlama */}
+        {/* 03 */}
-        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center', marginBottom: 'clamp(64px,10vw,120px)' }}>
+        <div className="mt-24 grid grid-cols-1 items-center gap-10 md:mt-32 md:grid-cols-2 md:gap-16">
           <Reveal>
-            <div>
+            <span className="font-mono text-sm font-bold" style={{ color: ACCENT }}>03</span>
-              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>03</span>
+            <h3 className="mt-3 text-[clamp(22px,2.4vw,28px)] font-bold tracking-tight text-zinc-950">İçtihat arama ve raporlama</h3>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>İçtihat Arama ve Raporlama</h3>
+            <p className="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-zinc-500">
-              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
+              Doğal dille arayın, AyrisLegal sizin için en alakalı Yargıtay, Danıştay ve AYM kararlarını bulsun, okusun ve kapsamlı bir içtihat raporu hazırlasın.
-                Doğal dille arayın, AyrisLegal sizin için en alakalı Yargıtay, Danıştay ve AYM kararlarını bulsun, okusun ve kapsamlı bir içtihat raporu hazırlasın.
+            </p>
-              </p>
-            </div>
           </Reveal>
           <Reveal delay={0.08}>
             <BrowserFrame>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '300px' }}>
+              <div className="grid grid-cols-2 divide-x divide-zinc-100">
-                <div style={{ padding: '16px', borderRight: `1px solid ${T.border}` }}>
+                <div className="p-4">
-                  <div style={{ fontSize: '11px', fontWeight: 700, color: T.inkFaint, marginBottom: '10px' }}>SONUÇLAR (50)</div>
+                  <div className="mb-2.5 text-[10.5px] font-bold uppercase tracking-wide text-zinc-400">Sonuçlar (50)</div>
                   {[
-                    { court: 'YARGITAY', chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273', date: '10.06.2021' },
+                    { chamber: 'Ceza Genel Kurulu', esas: '2020/165', karar: '2021/273' },
-                    { court: 'YARGITAY', chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821', date: '02.10.2023' },
+                    { chamber: '1. Ceza Dairesi', esas: '2023/5798', karar: '2023/5821' },
-                  ].map((r) => (
+                  ].map(r => (
-                    <div key={r.esas} style={{ borderRadius: '12px', border: `1px solid ${T.border}`, padding: '10px 12px', marginBottom: '8px' }}>
+                    <div key={r.esas} className="mb-2 rounded-xl border border-zinc-100 p-2.5">
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
+                      <div className="mb-1 flex items-center gap-1.5">
-                        <span style={{ fontSize: '9px', fontWeight: 700, padding: '2px 7px', borderRadius: '999px', background: T.orangeSoft, color: T.orangeDark }}>{r.court}</span>
+                        <span className="rounded-full px-1.5 py-0.5 text-[8.5px] font-bold" style={{ background: ACCENT_SOFT, color: ACCENT_DARK }}>YARGITAY</span>
-                        <span style={{ fontSize: '10.5px', color: T.inkFaint }}>{r.chamber}</span>
+                        <span className="text-[10px] text-zinc-400">{r.chamber}</span>
                       </div>
-                      <div style={{ fontSize: '12.5px', fontWeight: 700 }}>E. {r.esas} - K. {r.karar}</div>
+                      <div className="text-[12px] font-bold text-zinc-800">E. {r.esas} - K. {r.karar}</div>
                     </div>
                   ))}
                 </div>
-                <div style={{ padding: '16px' }}>
+                <div className="p-4">
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12.5px', fontWeight: 700, marginBottom: '10px' }}>✨ AyrisLegal İçtihat Raporu</div>
+                  <div className="mb-2 flex items-center gap-1.5 text-[12px] font-bold text-zinc-800">
-                  <div style={{ fontSize: '11.5px', color: T.inkSoft, lineHeight: 1.7 }}>
+                    <Sparkles size={13} strokeWidth={2.5} style={{ color: ACCENT }} /> İçtihat Raporu
-                    <b style={{ color: T.ink }}>1. Alaka Puanı ve Durum</b><br />
-                    Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
                   </div>
+                  <p className="text-[11px] leading-relaxed text-zinc-500">
+                    <b className="text-zinc-800">1. Alaka Puanı ve Durum</b><br />
+                    Sunulan 48 karardan yaklaşık 15 tanesi doğrudan uyuşmazlığın esasına ilişkindir…
+                  </p>
                 </div>
               </div>
             </BrowserFrame>
           </Reveal>
         </div>
-
-        {/* 04 — Dilekçe */}
-        <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'center' }}>
-          <Reveal className="order-2" delay={0.08}>
-            <BrowserFrame>
-              <div style={{ padding: '20px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px' }}>
-                  <span style={{ fontSize: '11px', fontWeight: 700, padding: '4px 10px', borderRadius: '999px', background: T.greenSoft, color: T.green }}>✓ Dilekçe Oluşturma Tamamlandı</span>
-                </div>
-                <div style={{ fontSize: '12px', color: T.inkSoft, lineHeight: 1.8, borderRadius: '12px', border: `1px solid ${T.border}`, padding: '14px', background: T.bgSoft }}>
-                  <b style={{ color: T.ink }}>SONUÇ VE İSTEM:</b> Yukarıda arz ve izah edilen ve Sayın Dairenizce re&apos;sen gözetilecek nedenlerle davalı tarafın usul ve yasaya aykırı istinaf başvurusunun reddine karar verilmesini saygılarımızla arz ve talep ederiz.
-                </div>
-              </div>
-            </BrowserFrame>
-          </Reveal>
-          <Reveal>
-            <div>
-              <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>04</span>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Yapay Zeka Destekli Dilekçe Oluşturma</h3>
-              <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
-                Süre tutum, mazeret ve vekaletname sunma dilekçelerini tek tıkla saniyeler içinde hazırlar. Dava dosyanızdaki belgeler ve içtihat araştırmaları ışığında, olaya uygun profesyonel dilekçeler oluşturun.
-              </p>
-            </div>
-          </Reveal>
-        </div>
       </section>
 
-      {/* ══════════════════════════════ BÜRO / OFİS DASHBOARD ═══════════════ */}
+      {/* ══════════════════════════════ BENTO — özellik ızgarası (3-eşit-kart YOK) ═══════ */}
-      <section style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
+      <section className="bg-zinc-50/70 py-20 md:py-28">
-        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
+        <div className="mx-auto max-w-[1400px] px-5 md:px-16">
-          <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '56px', alignItems: 'center' }}>
+          <Reveal>
-            <Reveal>
+            <div className="mb-14 max-w-[50ch]">
-              <div>
+              <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Tek Platform</span>
-                <span style={{ color: T.orange, fontWeight: 800, fontSize: '15px' }}>05</span>
+              <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Bizzat mahkemeye gitmek dışında her şey burada</h2>
-                <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)', margin: '10px 0 14px' }}>Tüm Büro İhtiyaçlarınız Tek Platformda</h3>
+            </div>
-                <p style={{ fontSize: '15.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
+          </Reveal>
-                  Dava yönetiminden dilekçe hazırlamaya, içtihat aramasından UYAP entegrasyonuna kadar — bizzat mahkemeye gidip duruşmaya girmek dışında her şey burada.
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-[1.4fr_1fr] md:grid-rows-2">
+            {/* Büyük kart — sohbet, 2 satır boyu */}
+            <Reveal className="md:row-span-2">
+              <div className="flex h-full flex-col justify-between rounded-[1.75rem] p-9 text-white" style={{ background: `linear-gradient(150deg, ${ACCENT}, ${ACCENT_DARK})` }}>
+                <div>
+                  <MessageSquare size={26} strokeWidth={2} />
+                  <h3 className="mt-5 text-2xl font-extrabold tracking-tight">Dosyalarınızla sohbet edin</h3>
+                  <p className="mt-3 max-w-[42ch] text-[14.5px] leading-relaxed text-white/85">
+                    Dava dosyalarınızı yükleyin, AyrisLegal sizin için hepsini saniyeler içinde okuyup analiz etsin — Türk hukuk sistemine özel eğitilmiş yapay zekasıyla dilekçe taslakları hazırlasın.
+                  </p>
+                </div>
+                <span className="mt-8 inline-flex w-fit items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-[12.5px] font-semibold">
+                  <Landmark size={14} strokeWidth={2.5} /> Türk hukukuna özel yapay zeka
+                </span>
+              </div>
+            </Reveal>
+
+            <Reveal delay={0.06}>
+              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
+                <FileText size={22} strokeWidth={2} className="text-zinc-400" />
+                <h3 className="mt-4 text-lg font-bold text-zinc-950">Dilekçe asistanı</h3>
+                <p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
+                  Belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, profesyonel dilekçeler hazırlayın.
                 </p>
               </div>
             </Reveal>
-            <Reveal delay={0.08}>
+
-              <BrowserFrame>
+            <Reveal delay={0.12}>
-                <div style={{ padding: '20px' }}>
+              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
-                  <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px' }}>
+                <div className="flex items-center gap-3">
-                    {[
+                  <Search size={22} strokeWidth={2} className="text-zinc-400" />
-                      { icon: '📁', label: 'Evrak Yönetimi', color: T.orangeSoft, fg: T.orangeDark },
+                  <span className="rounded-full bg-zinc-100 px-2.5 py-1 text-[10.5px] font-bold text-zinc-500">UYAP Chrome Eklentisi</span>
-                      { icon: '📄', label: 'Dilekçe Sistemi', color: T.navySoft, fg: T.navy },
-                      { icon: '🔍', label: 'İçtihat Arama', color: T.greenSoft, fg: T.green },
-                      { icon: '👥', label: 'Ekip Paylaşımı', color: '#F3E8FF', fg: '#7E22CE', soon: true },
-                      { icon: '🎓', label: 'Dijital Stajyer', color: '#FEF9C3', fg: '#A16207' },
-                      { icon: '💬', label: 'AyrisLegal Chat', color: '#FFE4E6', fg: '#BE123C' },
-                    ].map(c => (
-                      <div key={c.label} style={{ borderRadius: '14px', padding: '14px 10px', background: c.color, textAlign: 'center' }}>
-                        <div style={{ fontSize: '20px', marginBottom: '6px' }}>{c.icon}</div>
-                        <div style={{ fontSize: '11.5px', fontWeight: 700, color: c.fg }}>{c.label}</div>
-                        {c.soon && <div style={{ fontSize: '9px', fontWeight: 700, marginTop: '4px', color: c.fg, opacity: 0.7 }}>YAKINDA</div>}
-                      </div>
-                    ))}
-                  </div>
                 </div>
-              </BrowserFrame>
+                <h3 className="mt-4 text-lg font-bold text-zinc-950">Akıllı içtihat arama &amp; UDF desteği</h3>
+                <p className="mt-2 text-[13.5px] leading-relaxed text-zinc-500">
+                  En alakalı kararları bulur, okur. UYAP formatındaki (UDF) dosyalarınızı otomatik OCR ile doğrudan yükleyin.
+                </p>
+              </div>
+            </Reveal>
+          </div>
+
+          {/* İkinci sıra — asimetrik 3'lü, eşit değil (2fr/1fr/1fr) */}
+          <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[1.3fr_1fr_1fr]">
+            <Reveal>
+              <div className="h-full rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
+                <div className="grid grid-cols-3 gap-2">
+                  {[
+                    { icon: FolderOpen, label: 'Evrak Yönetimi' },
+                    { icon: FileText, label: 'Dilekçe Sistemi' },
+                    { icon: Search, label: 'İçtihat Arama' },
+                  ].map(c => (
+                    <div key={c.label} className="rounded-xl bg-zinc-50 p-3 text-center">
+                      <c.icon size={18} strokeWidth={2} className="mx-auto text-zinc-500" />
+                      <div className="mt-1.5 text-[10.5px] font-semibold text-zinc-600">{c.label}</div>
+                    </div>
+                  ))}
+                </div>
+                <h3 className="mt-5 text-base font-bold text-zinc-950">Tüm büro ihtiyaçlarınız tek yerde</h3>
+                <p className="mt-1.5 text-[13px] leading-relaxed text-zinc-500">Dava yönetiminden UYAP entegrasyonuna kadar.</p>
+              </div>
+            </Reveal>
+            <Reveal delay={0.06}>
+              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
+                <GraduationCap size={22} strokeWidth={2} className="text-zinc-400" />
+                <h3 className="mt-4 text-base font-bold text-zinc-950">Dijital stajyer</h3>
+                <p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Uzun soluklu araştırma görevlerini AyrisLegal&apos;a devredin.</p>
+              </div>
+            </Reveal>
+            <Reveal delay={0.12}>
+              <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200/70 bg-white p-7">
+                <div className="flex items-center gap-2">
+                  <Users2 size={22} strokeWidth={2} className="text-zinc-400" />
+                  <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[9.5px] font-bold text-zinc-500">YAKINDA</span>
+                </div>
+                <h3 className="mt-4 text-base font-bold text-zinc-950">Ekip paylaşımı</h3>
+                <p className="mt-2 text-[13px] leading-relaxed text-zinc-500">Büronuzla ortak çalışma alanı.</p>
+              </div>
             </Reveal>
           </div>
         </div>
       </section>
 
-      {/* ══════════════════════════════ ÜÇ KART — Sohbet / Dilekçe / UYAP ═══════ */}
+      {/* ══════════════════════════════ GÜVEN — koyu zemin, saf siyah değil ═══════ */}
-      <section style={{ maxWidth: '1200px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
+      <section className="bg-zinc-950 py-20 text-white md:py-28">
-        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '20px', marginBottom: '20px' }}>
+        <div className="mx-auto max-w-[1200px] px-5 md:px-16">
           <Reveal>
-            <div style={{ borderRadius: '24px', padding: '36px', background: `linear-gradient(135deg, ${T.orange}, ${T.orangeDark})`, color: '#fff', height: '100%' }}>
+            <div className="mb-14 max-w-[56ch]">
-              <div style={{ fontSize: '26px', marginBottom: '14px' }}>💬</div>
+              <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-500">Güven</span>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '24px', margin: '0 0 12px' }}>Dosyalarınızla Sohbet Edin</h3>
+              <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter">Dosyalarınız sizin kalır</h2>
-              <p style={{ fontSize: '14.5px', lineHeight: 1.7, opacity: 0.92, margin: '0 0 18px', maxWidth: '48ch' }}>
+              <p className="mt-3 text-[15px] text-zinc-400">Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal&apos;ı bu bilinçle kuruyoruz.</p>
-                Dava dosyalarınızı AyrisLegal&apos;a yükleyin, sizin için hepsini saniyeler içinde okuyup analiz etsin, hazırlamasını isteyeceğiniz dilekçelerinizi Türk hukuk sistemine özel eğitilmiş yapay zekasıyla hazırlasın.
-              </p>
-              <span style={{ display: 'inline-flex', fontSize: '12.5px', fontWeight: 700, padding: '8px 16px', borderRadius: '999px', background: 'rgba(255,255,255,0.2)' }}>🌐 Türk Hukukuna Özel Yapay Zeka</span>
             </div>
           </Reveal>
-          <Reveal delay={0.06}>
+          <div className="grid grid-cols-1 gap-px overflow-hidden rounded-3xl bg-white/10 sm:grid-cols-2 lg:grid-cols-4">
-            <div className="feature-card" style={{ height: '100%' }}>
-              <div style={{ fontSize: '24px', marginBottom: '14px' }}>📝</div>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '20px', margin: '0 0 10px' }}>Dilekçe Asistanı</h3>
-              <p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>
-                Dava dosyanızdaki belgeleri, analizleri ve içtihat araştırmalarını bağlam olarak ekleyin, eşi benzeri olmayan profesyonellikte dilekçeler hazırlayın.
-              </p>
-            </div>
-          </Reveal>
-        </div>
-        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
-          <Reveal>
-            <div className="feature-card">
-              <div style={{ fontSize: '24px', marginBottom: '14px' }}>⚖️</div>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Akıllı İçtihat Arama</h3>
-              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
-                Sizin için en alakalı sonuçları bulur, okur, aramanızla alakalı kararları belirler ve bunlarla kapsamlı bir içtihat raporu oluşturur.
-              </p>
-            </div>
-          </Reveal>
-          <Reveal delay={0.06}>
-            <div className="feature-card">
-              <div style={{ fontSize: '24px', marginBottom: '14px' }}>📂</div>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>UDF &amp; PDF Desteği</h3>
-              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: '0 0 12px' }}>
-                UYAP formatındaki (UDF) dosyalarınızı doğrudan yükleyin. Otomatik OCR ve sınıflandırma.
-              </p>
-              <span className="pill-badge" style={{ background: T.navySoft, color: T.navy, fontSize: '11.5px' }}>🧩 UYAP Chrome Eklentisi</span>
-            </div>
-          </Reveal>
-          <Reveal delay={0.12}>
-            <div className="feature-card">
-              <div style={{ fontSize: '24px', marginBottom: '14px' }}>🎯</div>
-              <h3 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: '17px', margin: '0 0 10px' }}>Dava Stratejisi ve Simülatör</h3>
-              <p style={{ fontSize: '13.5px', lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
-                Mahkemeye çıkmadan önce yapay zekanın &quot;Hakim&quot;, &quot;Savcı&quot; ya da &quot;Karşı Taraf Avukatı&quot; rolüne girdiği bir simülasyonla savunmanızı önceden deneyimleyin.
-              </p>
-            </div>
-          </Reveal>
-        </div>
-      </section>
-
-      {/* ══════════════════════════════ GÜVEN ═══════════════════════════ */}
-      <section style={{ background: T.navy, color: '#fff', padding: 'clamp(48px,8vw,96px) 0' }}>
-        <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
-          <Reveal>
-            <div style={{ textAlign: 'center', marginBottom: '48px' }}>
-              <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>Dosyalarınız Sizin Kalır</h2>
-              <p style={{ fontSize: '15px', color: 'rgba(255,255,255,0.65)', maxWidth: '60ch', margin: '0 auto' }}>
-                Bir dava dosyası, bir avukatın elindeki en hassas belgedir. AyrisLegal&apos;ı bu bilinçle kuruyoruz.
-              </p>
-            </div>
-          </Reveal>
-          <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px' }}>
             {[
-              { icon: '🔒', title: 'Yerel Şifreli Saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
+              { icon: Lock, title: 'Yerel şifreli saklama', desc: 'Hassas veriler işletim sisteminizin kendi güvenli katmanıyla şifrelenir.' },
-              { icon: '☁️', title: 'Kendi Drive’ınıza Yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
+              { icon: Cloud, title: 'Kendi Drive’ınıza yedekleme', desc: 'Yedekleme bizim sunucularımıza değil, sizin Drive hesabınıza yapılır.' },
-              { icon: '🚫', title: 'Sadece Sizin Analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
+              { icon: ShieldCheck, title: 'Sadece sizin analiziniz', desc: 'Belgeleriniz başka kullanıcılarla paylaşılmaz.' },
-              { icon: '✅', title: 'Son Karar Her Zaman Sizde', desc: 'AyrisLegal analiz ve taslak üretir, nihai kontrol sizde kalır.' },
+              { icon: CheckCircle2, title: 'Son karar her zaman sizde', desc: 'AyrisLegal analiz ve taslak üretir, nihai kontrol sizde kalır.' },
             ].map((item, i) => (
               <Reveal key={item.title} delay={i * 0.05}>
-                <div style={{ borderRadius: '18px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', padding: '22px' }}>
+                <div className="h-full bg-zinc-950 p-7">
-                  <div style={{ fontSize: '22px', marginBottom: '12px' }}>{item.icon}</div>
+                  <item.icon size={20} strokeWidth={2} style={{ color: ACCENT }} />
-                  <h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '14.5px', margin: '0 0 8px' }}>{item.title}</h3>
+                  <h3 className="mt-4 text-[14px] font-bold">{item.title}</h3>
-                  <p style={{ fontSize: '12.5px', lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', margin: 0 }}>{item.desc}</p>
+                  <p className="mt-2 text-[12.5px] leading-relaxed text-zinc-500">{item.desc}</p>
                 </div>
               </Reveal>
             ))}
@@ -459,64 +479,68 @@ export default function HomePageV2() {
       </section>
 
       {/* ══════════════════════════════ FİYATLANDIRMA ═══════════════════ */}
-      <section id="fiyatlandirma" style={{ maxWidth: '1100px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
+      <section id="fiyatlandirma" className="mx-auto max-w-[1100px] px-5 py-20 md:px-16 md:py-28">
         <Reveal>
-          <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+          <div className="mb-3 text-center">
-            <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', margin: '0 0 12px' }}>İhtiyacınıza Uygun Modeller</h2>
+            <span className="font-mono text-[12px] font-semibold uppercase tracking-wider text-zinc-400">Fiyatlandırma</span>
-            <p style={{ fontSize: '15px', color: T.inkSoft }}>Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
+            <h2 className="mt-3 text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">İhtiyacınıza uygun modeller</h2>
+            <p className="mt-3 text-[15px] text-zinc-500">Basit, şeffaf fiyatlandırma — gizli ücret yok.</p>
           </div>
         </Reveal>
         <Reveal delay={0.05}>
-          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '36px' }}>
+          <div className="mb-10 flex justify-center">
-            <div style={{ display: 'inline-flex', padding: '4px', borderRadius: '999px', background: T.navySoft, gap: '4px' }}>
+            <div className="inline-flex gap-1 rounded-full bg-zinc-100 p-1">
-              <button onClick={() => setPricingYearly(true)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: pricingYearly ? '#fff' : 'transparent', color: pricingYearly ? T.ink : T.inkSoft, boxShadow: pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Yıllık</button>
+              <button onClick={() => setPricingYearly(true)} className={`rounded-full px-4.5 px-[18px] py-2 text-[13.5px] font-bold transition-colors ${pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Yıllık</button>
-              <button onClick={() => setPricingYearly(false)} style={{ border: 'none', cursor: 'pointer', padding: '9px 18px', borderRadius: '999px', fontSize: '13.5px', fontWeight: 700, background: !pricingYearly ? '#fff' : 'transparent', color: !pricingYearly ? T.ink : T.inkSoft, boxShadow: !pricingYearly ? '0 2px 8px rgba(11,18,32,0.1)' : 'none' }}>Aylık bilgi al</button>
+              <button onClick={() => setPricingYearly(false)} className={`rounded-full px-[18px] py-2 text-[13.5px] font-bold transition-colors ${!pricingYearly ? 'bg-white text-zinc-900 shadow-sm' : 'text-zinc-500'}`}>Aylık bilgi al</button>
             </div>
           </div>
         </Reveal>
-        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px' }}>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <Reveal delay={0.08}>
-            <div style={{ borderRadius: '24px', border: `1.5px solid ${T.border}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+            <div className="flex h-full flex-col rounded-[1.75rem] border border-zinc-200 p-9">
-              <p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orange }}>BİREYSEL AVUKAT</p>
+              <p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT }}>Bireysel Avukat</p>
-              <p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '44px' }}>{pricingYearly ? '40.000 ₺' : 'Bilgi Al'}<span style={{ fontSize: '15px', fontWeight: 500, color: T.inkFaint }}>{pricingYearly ? ' / yıl' : ''}</span></p>
+              <p className="mt-2.5 text-[42px] font-extrabold tracking-tighter text-zinc-950">
-              <p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
+                {pricingYearly ? '40.000 ₺' : 'Bilgi Al'}
-              <div style={{ borderTop: `1px solid ${T.border}`, margin: '24px 0' }} />
+                {pricingYearly && <span className="text-[15px] font-medium text-zinc-400"> / yıl</span>}
-              <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              </p>
+              <p className="mt-4 text-[14px] text-zinc-500">Serbest çalışan avukatlar için tasarlanmış yapay zeka çalışma ortağı.</p>
+              <div className="my-6 border-t border-zinc-100" />
+              <ul className="mb-7 flex flex-col gap-3">
                 {['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: '14px', alignItems: 'center' }}>
+                  <li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-700">
-                    <span style={{ color: T.green, fontWeight: 800 }}>✓</span>{item}
+                    <CheckCircle2 size={16} strokeWidth={2.5} className="text-emerald-600" />{item}
                   </li>
                 ))}
               </ul>
-              <a href="#iletisim" className="btn-outline" style={{ marginTop: 'auto', width: '100%' }}>Ücretsiz Deneyin</a>
+              <a href="#iletisim" className="mt-auto rounded-full border border-zinc-200 py-3.5 text-center text-[14.5px] font-bold text-zinc-900 transition-colors hover:bg-zinc-50">Ücretsiz Deneyin</a>
             </div>
           </Reveal>
           <Reveal delay={0.14}>
-            <div style={{ borderRadius: '24px', border: `1.5px solid ${T.orange}`, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', background: T.orangeSoft }}>
+            <div className="relative flex h-full flex-col rounded-[1.75rem] border p-9" style={{ borderColor: ACCENT, background: ACCENT_SOFT }}>
-              <span style={{ position: 'absolute', top: '-12px', left: '32px', fontSize: '11px', fontWeight: 700, padding: '5px 14px', borderRadius: '999px', background: T.orange, color: '#fff' }}>Ekip Çalışması</span>
+              <span className="absolute -top-3 left-9 rounded-full px-3.5 py-1 text-[11px] font-bold text-white" style={{ background: ACCENT }}>Ekip Çalışması</span>
-              <p style={{ margin: 0, fontSize: '13px', fontWeight: 700, color: T.orangeDark }}>HUKUK BÜROSU</p>
+              <p className="text-[12.5px] font-bold uppercase tracking-wide" style={{ color: ACCENT_DARK }}>Hukuk Bürosu</p>
-              <p style={{ margin: '10px 0 0', fontFamily: T.fontHead, fontWeight: 800, fontSize: '32px' }}>Özel Fiyatlandırma</p>
+              <p className="mt-2.5 text-[30px] font-extrabold tracking-tighter text-zinc-950">Özel Fiyatlandırma</p>
-              <p style={{ fontSize: '14px', color: T.inkSoft, margin: '16px 0 0' }}>Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
+              <p className="mt-4 text-[14px] text-zinc-600">Tüm ekibiniz için paylaşımlı çalışma alanı, dosya yönetimi ve özel entegrasyonlar.</p>
-              <div style={{ borderTop: `1px solid rgba(11,18,32,0.15)`, margin: '24px 0' }} />
+              <div className="my-6 border-t border-black/10" />
-              <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              <ul className="mb-7 flex flex-col gap-3">
                 {['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: '14px', alignItems: 'center' }}>
+                  <li key={item} className="flex items-center gap-2.5 text-[14px] text-zinc-800">
-                    <span style={{ color: T.orangeDark, fontWeight: 800 }}>✓</span>{item}
+                    <CheckCircle2 size={16} strokeWidth={2.5} style={{ color: ACCENT_DARK }} />{item}
                   </li>
                 ))}
               </ul>
-              <a href="#iletisim" className="btn-primary" style={{ marginTop: 'auto', width: '100%' }}>İletişime Geçin</a>
+              <a href="#iletisim" className="mt-auto rounded-full py-3.5 text-center text-[14.5px] font-bold text-white transition-colors" style={{ background: ACCENT }}>İletişime Geçin</a>
             </div>
           </Reveal>
         </div>
       </section>
 
       {/* ══════════════════════════════ SSS ══════════════════════════════ */}
-      <section id="sss" style={{ maxWidth: '1000px', margin: '0 auto', padding: 'clamp(48px,8vw,96px) clamp(20px,6vw,72px)' }}>
+      <section id="sss" className="mx-auto max-w-[900px] px-5 py-20 md:px-16 md:py-28">
         <Reveal>
-          <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(26px,3.4vw,38px)', textAlign: 'center', margin: '0 0 40px' }}>Muhtemelen Bunları Soracaksınız</h2>
+          <h2 className="mb-12 text-center text-[clamp(26px,3.2vw,38px)] font-extrabold tracking-tighter text-zinc-950">Muhtemelen bunları soracaksınız</h2>
         </Reveal>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
+        <div className="divide-y divide-zinc-100 border-y border-zinc-100">
           {[
             { q: 'Müvekkil dosyalarım nerede saklanıyor, kim görebilir?', a: 'Belgeler yerel şifreli depolamada tutulur, yedekleme sizin kendi Google Drive hesabınıza yapılır. Başka kullanıcı veya üçüncü tarafla paylaşılmaz.' },
             { q: 'Yapay zeka yanlış bir şey söylerse sorumluluk kimde?', a: 'AyrisLegal karar organı değildir — analiz, taslak ve öneri üretir. Ürettiği emsal kararlar gerçek esas/karar numaralarıyla gelir, kaynağından doğrulanabilir. Nihai değerlendirme ve imza her zaman sizde kalır.' },
@@ -524,9 +548,12 @@ export default function HomePageV2() {
             { q: 'Büromdaki diğer avukatlarla paylaşabilir miyim?', a: 'Şu an platform bireysel avukat için tasarlandı. Ekip/büro paylaşımı yol haritamızda — Hukuk Bürosu planı için iletişime geçin.' },
           ].map(item => (
             <Reveal key={item.q}>
-              <div style={{ borderRadius: '18px', border: `1px solid ${T.border}`, padding: '22px 24px' }}>
+              <div className="py-6">
-                <h3 style={{ fontFamily: T.fontHead, fontWeight: 700, fontSize: '16px', margin: '0 0 8px' }}>{item.q}</h3>
+                <h3 className="flex items-start gap-2 text-[15.5px] font-bold text-zinc-900">
-                <p style={{ fontSize: '14px', lineHeight: 1.65, color: T.inkSoft, margin: 0 }}>{item.a}</p>
+                  <ChevronRight size={17} strokeWidth={2.5} className="mt-0.5 shrink-0" style={{ color: ACCENT }} />
+                  {item.q}
+                </h3>
+                <p className="mt-2 pl-[25px] text-[14px] leading-relaxed text-zinc-500">{item.a}</p>
               </div>
             </Reveal>
           ))}
@@ -534,38 +561,34 @@ export default function HomePageV2() {
       </section>
 
       {/* ══════════════════════════════ İLETİŞİM ═════════════════════════ */}
-      <section id="iletisim" style={{ background: T.bgSoft, padding: 'clamp(48px,8vw,96px) 0' }}>
+      <section id="iletisim" className="bg-zinc-50/70 py-20 md:py-28">
-        <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 clamp(20px,6vw,72px)' }}>
+        <div className="mx-auto grid max-w-[1100px] grid-cols-1 gap-12 px-5 md:grid-cols-[1fr_1.2fr] md:px-16">
-          <div className="split-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '48px', alignItems: 'start' }}>
+          <Reveal>
-            <Reveal>
+            <h2 className="text-[clamp(24px,3vw,30px)] font-extrabold tracking-tighter text-zinc-950">
-              <div>
+              Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
-                <h2 style={{ fontFamily: T.fontHead, fontWeight: 800, fontSize: 'clamp(24px,3vw,32px)', margin: '0 0 14px' }}>
+            </h2>
-                  Şu an müşteri referansı göstermiyoruz — kasıtlı olarak.
+            <p className="mt-4 text-[14.5px] leading-relaxed text-zinc-500">
-                </h2>
+              AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz.
-                <p style={{ fontSize: '14.5px', lineHeight: 1.7, color: T.inkSoft, margin: 0 }}>
+            </p>
-                  AyrisLegal yeni. Sahte ya da ödünç yorumlar yerine dürüst olmayı seçtik: platformu kurucu ekiple birlikte, doğrudan geri bildiriminizle şekillendiriyoruz.
+            <ul className="mt-7 flex flex-col gap-3">
-                </p>
+              {['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
-                <ul style={{ listStyle: 'none', margin: '26px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <li key={step} className="flex items-center gap-3 text-[14px] text-zinc-600">
-                  {['Formu doldurun', 'Kurucu ekipten biri sizi arar', '15 dakikalık canlı demoda dosyanızla test edersiniz'].map((step, i) => (
+                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white" style={{ background: ACCENT }}>{i + 1}</span>
-                    <li key={step} style={{ display: 'flex', gap: '10px', fontSize: '14px', color: T.inkSoft, alignItems: 'center' }}>
+                  {step}
-                      <span style={{ width: 22, height: 22, borderRadius: '50%', background: T.orange, color: '#fff', fontSize: '11px', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{i + 1}</span>
+                </li>
-                      {step}
+              ))}
-                    </li>
+            </ul>
-                  ))}
+          </Reveal>
-                </ul>
+          <Reveal delay={0.08}>
-              </div>
+            <ContactFormV2 />
-            </Reveal>
+          </Reveal>
-            <Reveal delay={0.08}>
-              <ContactFormV2 />
-            </Reveal>
-          </div>
         </div>
       </section>
 
       {/* ══════════════════════════════ FOOTER ═══════════════════════════ */}
-      <footer style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px clamp(20px,6vw,72px)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px', fontSize: '13px', color: T.inkFaint, borderTop: `1px solid ${T.border}` }}>
+      <footer className="mx-auto flex max-w-[1400px] flex-wrap items-center justify-between gap-3 border-t border-zinc-100 px-5 py-8 text-[13px] text-zinc-400 md:px-16">
         <span>© {new Date().getFullYear()} AyrisLegal — Ayris Tech&apos;in bir ürünüdür.</span>
-        <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" style={{ color: T.inkFaint }}>Created by ayris.tech</a>
+        <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-zinc-400 hover:text-zinc-600">Created by ayris.tech</a>
       </footer>
     </div>
   )