diff --git a/src/app/[locale]/(dashboard)/dashboard/admin/page.tsx b/src/app/[locale]/(dashboard)/dashboard/admin/page.tsx
index c1ac4b6..4936117 100644
--- a/src/app/[locale]/(dashboard)/dashboard/admin/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/admin/page.tsx
@@ -36,11 +36,11 @@ const navLinks = [
 
 function colorClass(color: string, type: "bg" | "text" | "icon") {
   const map: Record<string, Record<string, string>> = {
-    violet: { bg: "from-violet-500/12 to-violet-600/5", text: "text-violet-400", icon: "bg-violet-500/12" },
-    cyan: { bg: "from-cyan-500/12 to-cyan-600/5", text: "text-cyan-400", icon: "bg-cyan-500/12" },
-    emerald: { bg: "from-emerald-500/12 to-emerald-600/5", text: "text-emerald-400", icon: "bg-emerald-500/12" },
-    amber: { bg: "from-amber-500/12 to-amber-600/5", text: "text-amber-400", icon: "bg-amber-500/12" },
-    rose: { bg: "from-rose-500/12 to-rose-600/5", text: "text-rose-400", icon: "bg-rose-500/12" },
+    violet: { bg: "from-neutral-500/12 to-neutral-600/5", text: "text-neutral-400", icon: "bg-neutral-500/12" },
+    cyan: { bg: "from-neutral-500/12 to-neutral-600/5", text: "text-neutral-400", icon: "bg-neutral-500/12" },
+    emerald: { bg: "from-neutral-500/12 to-neutral-600/5", text: "text-neutral-400", icon: "bg-neutral-500/12" },
+    amber: { bg: "from-neutral-500/12 to-neutral-600/5", text: "text-neutral-400", icon: "bg-neutral-500/12" },
+    rose: { bg: "from-neutral-500/12 to-neutral-600/5", text: "text-neutral-400", icon: "bg-neutral-500/12" },
   };
   return map[color]?.[type] ?? "";
 }
@@ -110,14 +110,14 @@ export default function AdminPage() {
             Sistem genelinde yönetim ve izleme
           </p>
         </div>
-        <span className="badge badge-violet text-xs px-3 py-1">Süper Yönetici</span>
+        <span className="bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] rounded-md text-xs px-3 py-1 font-medium">Süper Yönetici</span>
       </motion.div>
 
       {/* İstatistik Kartları */}
       <motion.div variants={fadeUp} className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
         {isLoading ? (
           <div className="col-span-6 flex justify-center py-12">
-            <Loader2 size={28} className="animate-spin text-violet-400" />
+            <Loader2 size={28} className="animate-spin text-neutral-400" />
           </div>
         ) : (
           statCards.map((card) => {
@@ -154,15 +154,10 @@ export default function AdminPage() {
             <Link
               key={link.href}
               href={link.href}
-              className="group card-surface p-5 flex items-center gap-4 hover:border-violet-500/30 transition-colors"
+              className="group card-surface p-5 flex items-center gap-4 hover:border-neutral-500/30 transition-colors"
             >
-              <div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${
-                link.color === "violet" ? "from-violet-500 to-violet-700" :
-                link.color === "cyan" ? "from-cyan-500 to-cyan-700" :
-                link.color === "emerald" ? "from-emerald-500 to-emerald-700" :
-                "from-amber-500 to-amber-700"
-              } flex items-center justify-center shadow-lg`}>
-                <Icon size={20} className="text-white" />
+              <div className={`w-11 h-11 rounded-xl bg-[var(--color-bg-inverted)] flex items-center justify-center shadow-lg`}>
+                <Icon size={20} className="text-[var(--color-text-inverted)]" />
               </div>
               <div>
                 <h3 className="text-sm font-semibold">{link.label}</h3>
@@ -178,7 +173,7 @@ export default function AdminPage() {
         <motion.div variants={fadeUp} className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <div className="card-surface p-5">
             <h2 className="text-sm font-semibold mb-4 flex items-center gap-2">
-              <TrendingUp size={14} className="text-violet-400" /> Proje Durumları
+              <TrendingUp size={14} className="text-neutral-400" /> Proje Durumları
             </h2>
             <div className="space-y-2">
               {Object.entries(projectsByStatus as Record<string, number>).map(([status, count]) => (
@@ -192,14 +187,14 @@ export default function AdminPage() {
 
           <div className="card-surface p-5">
             <h2 className="text-sm font-semibold mb-4 flex items-center gap-2">
-              <Cpu size={14} className="text-emerald-400" /> Render Job Durumları
+              <Cpu size={14} className="text-neutral-400" /> Render Job Durumları
             </h2>
             <div className="space-y-2">
               {[
-                { key: "QUEUED", icon: Clock, color: "text-amber-400", label: "Beklemede" },
-                { key: "PROCESSING", icon: Loader2, color: "text-cyan-400", label: "İşleniyor" },
-                { key: "COMPLETED", icon: CheckCircle2, color: "text-emerald-400", label: "Tamamlandı" },
-                { key: "FAILED", icon: XCircle, color: "text-rose-400", label: "Başarısız" },
+                { key: "QUEUED", icon: Clock, color: "text-neutral-400", label: "Beklemede" },
+                { key: "PROCESSING", icon: Loader2, color: "text-neutral-400", label: "İşleniyor" },
+                { key: "COMPLETED", icon: CheckCircle2, color: "text-neutral-400", label: "Tamamlandı" },
+                { key: "FAILED", icon: XCircle, color: "text-neutral-400", label: "Başarısız" },
               ].map(({ key, icon: Icon, color, label }) => (
                 <div key={key} className="flex items-center justify-between text-sm">
                   <span className={`flex items-center gap-2 ${color}`}>
@@ -219,9 +214,9 @@ export default function AdminPage() {
         <motion.div variants={fadeUp} className="card-surface p-5">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-sm font-semibold flex items-center gap-2">
-              <Users size={14} className="text-violet-400" /> Son Kayıt Kullanıcılar
+              <Users size={14} className="text-neutral-400" /> Son Kayıt Kullanıcılar
             </h2>
-            <Link href="/dashboard/admin/users" className="text-xs text-violet-400 hover:underline">
+            <Link href="/dashboard/admin/users" className="text-xs text-neutral-400 hover:underline">
               Tümünü Gör
             </Link>
           </div>
@@ -236,7 +231,7 @@ export default function AdminPage() {
                   <p className="text-xs text-[var(--color-text-muted)]">{user.email}</p>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className={`text-xs px-2 py-0.5 rounded-full ${user.isActive ? "bg-emerald-500/10 text-emerald-400" : "bg-rose-500/10 text-rose-400"}`}>
+                  <span className={`text-xs px-2 py-0.5 rounded-full border ${user.isActive ? "bg-neutral-500/10 text-neutral-300 border-neutral-500/20" : "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] border-[var(--color-border-faint)]"}`}>
                     {user.isActive ? "Aktif" : "Pasif"}
                   </span>
                   <span className="text-xs text-[var(--color-text-ghost)]">
diff --git a/src/app/[locale]/(dashboard)/dashboard/admin/plans/page.tsx b/src/app/[locale]/(dashboard)/dashboard/admin/plans/page.tsx
index 9a10648..ae49883 100644
--- a/src/app/[locale]/(dashboard)/dashboard/admin/plans/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/admin/plans/page.tsx
@@ -66,9 +66,9 @@ export default function AdminPlansPage() {
   }
 
   const PLAN_COLORS: Record<string, string> = {
-    free: "from-gray-500/10 to-gray-600/5 border-gray-500/20",
-    pro: "from-violet-500/10 to-violet-600/5 border-violet-500/20",
-    business: "from-amber-500/10 to-amber-600/5 border-amber-500/20",
+    free: "from-neutral-500/10 to-neutral-600/5 border-neutral-500/20",
+    pro: "from-[var(--color-bg-inverted)] to-neutral-800 border-[var(--color-border-faint)] text-[var(--color-text-inverted)]",
+    business: "from-neutral-500/20 to-neutral-600/10 border-neutral-500/30",
   };
 
   return (
@@ -81,7 +81,7 @@ export default function AdminPlansPage() {
       <motion.div variants={fadeUp} className="flex items-center justify-between">
         <div>
           <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold flex items-center gap-2">
-            <LayoutGrid size={22} className="text-amber-400" /> Plan Yönetimi
+            <LayoutGrid size={22} className="text-neutral-400" /> Plan Yönetimi
           </h1>
           <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Abonelik planlarını düzenle ve fiyatları güncelle
@@ -94,7 +94,7 @@ export default function AdminPlansPage() {
 
       {isLoading ? (
         <div className="flex justify-center py-20">
-          <Loader2 size={28} className="animate-spin text-amber-400" />
+          <Loader2 size={28} className="animate-spin text-neutral-400" />
         </div>
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
@@ -129,8 +129,8 @@ export default function AdminPlansPage() {
                         {field.type === "toggle" ? (
                           <button
                             onClick={() => setEdit(plan.id, field.key, !val)}
-                            className={`flex items-center gap-2 text-sm px-3 py-1.5 rounded-xl ${
-                              val ? "bg-emerald-500/10 text-emerald-400" : "bg-rose-500/10 text-rose-400"
+                            className={`flex items-center gap-2 text-sm px-3 py-1.5 rounded-xl border ${
+                              val ? "bg-neutral-500/10 text-neutral-300 border-neutral-500/20" : "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] border-[var(--color-border-faint)]"
                             }`}
                           >
                             {val ? "✓ Aktif" : "✗ Pasif"}
@@ -160,7 +160,7 @@ export default function AdminPlansPage() {
                   disabled={!hasEdits || updatePlan.isPending}
                   className={`w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-medium transition-all ${
                     savedIds.has(plan.id)
-                      ? "bg-emerald-500/10 text-emerald-400"
+                      ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] opacity-80"
                       : hasEdits
                       ? "btn-primary"
                       : "opacity-40 cursor-not-allowed bg-[var(--color-bg-elevated)] text-[var(--color-text-muted)]"
diff --git a/src/app/[locale]/(dashboard)/dashboard/admin/projects/page.tsx b/src/app/[locale]/(dashboard)/dashboard/admin/projects/page.tsx
index 5f58f23..2a47a3c 100644
--- a/src/app/[locale]/(dashboard)/dashboard/admin/projects/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/admin/projects/page.tsx
@@ -16,13 +16,13 @@ import Link from "next/link";
 import { useAdminProjects, useAdminDeleteProject } from "@/hooks/use-api";
 
 const STATUS_LABELS: Record<string, { label: string; color: string }> = {
-  DRAFT: { label: "Taslak", color: "bg-gray-500/10 text-gray-400" },
-  GENERATING_SCRIPT: { label: "Senaryo Üretiliyor", color: "bg-blue-500/10 text-blue-400" },
-  PENDING: { label: "Kuyrukta", color: "bg-amber-500/10 text-amber-400" },
-  GENERATING_MEDIA: { label: "Medya Üretiliyor", color: "bg-cyan-500/10 text-cyan-400" },
-  RENDERING: { label: "Render", color: "bg-violet-500/10 text-violet-400" },
-  COMPLETED: { label: "Tamamlandı", color: "bg-emerald-500/10 text-emerald-400" },
-  FAILED: { label: "Başarısız", color: "bg-rose-500/10 text-rose-400" },
+  DRAFT: { label: "Taslak", color: "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] border border-[var(--color-border-faint)]" },
+  GENERATING_SCRIPT: { label: "Senaryo Üretiliyor", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
+  PENDING: { label: "Kuyrukta", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
+  GENERATING_MEDIA: { label: "Medya Üretiliyor", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
+  RENDERING: { label: "Render", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
+  COMPLETED: { label: "Tamamlandı", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
+  FAILED: { label: "Başarısız", color: "bg-neutral-500/10 text-neutral-400 border border-neutral-500/20" },
 };
 
 const fadeUp = {
@@ -66,7 +66,7 @@ export default function AdminProjectsPage() {
       <motion.div variants={fadeUp} className="flex items-center justify-between">
         <div>
           <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold flex items-center gap-2">
-            <FolderOpen size={22} className="text-cyan-400" /> Proje Yönetimi
+            <FolderOpen size={22} className="text-neutral-400" /> Proje Yönetimi
           </h1>
           <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Toplam {meta.total ?? "—"} proje
@@ -104,7 +104,7 @@ export default function AdminProjectsPage() {
       <motion.div variants={fadeUp} className="card-surface overflow-hidden">
         {isLoading ? (
           <div className="flex justify-center py-16">
-            <Loader2 size={28} className="animate-spin text-cyan-400" />
+            <Loader2 size={28} className="animate-spin text-neutral-400" />
           </div>
         ) : (
           <div className="overflow-x-auto">
@@ -141,7 +141,7 @@ export default function AdminProjectsPage() {
                         </span>
                         {project.status !== "DRAFT" && project.status !== "COMPLETED" && project.status !== "FAILED" && (
                           <div className="w-16 h-1 rounded-full bg-[var(--color-border-faint)] mt-1">
-                            <div className="h-full rounded-full bg-violet-500" style={{ width: `${project.progress}%` }} />
+                            <div className="h-full rounded-full bg-neutral-400" style={{ width: `${project.progress}%` }} />
                           </div>
                         )}
                       </td>
@@ -156,7 +156,7 @@ export default function AdminProjectsPage() {
                         <div className="flex items-center justify-end gap-2">
                           <Link
                             href={`/dashboard/projects/${project.id}`}
-                            className="p-1.5 rounded-lg hover:bg-cyan-500/10 text-cyan-400 transition-colors"
+                            className="p-1.5 rounded-lg hover:bg-neutral-500/10 text-neutral-400 transition-colors"
                             title="Detay"
                           >
                             <ExternalLink size={13} />
@@ -168,7 +168,7 @@ export default function AdminProjectsPage() {
                               }
                             }}
                             disabled={deleteProject.isPending}
-                            className="p-1.5 rounded-lg hover:bg-rose-500/10 text-rose-400 transition-colors"
+                            className="p-1.5 rounded-lg hover:bg-neutral-500/10 text-neutral-400 transition-colors"
                             title="Sil"
                           >
                             <Trash2 size={13} />
diff --git a/src/app/[locale]/(dashboard)/dashboard/admin/render-jobs/page.tsx b/src/app/[locale]/(dashboard)/dashboard/admin/render-jobs/page.tsx
index d4a12cf..25e35d9 100644
--- a/src/app/[locale]/(dashboard)/dashboard/admin/render-jobs/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/admin/render-jobs/page.tsx
@@ -16,11 +16,11 @@ import {
 import { useAdminRenderJobs } from "@/hooks/use-api";
 
 const STATUS_CONFIG: Record<string, { label: string; color: string; icon: React.ElementType }> = {
-  QUEUED: { label: "Beklemede", color: "text-amber-400 bg-amber-500/10", icon: Clock },
-  PROCESSING: { label: "İşleniyor", color: "text-cyan-400 bg-cyan-500/10", icon: Loader2 },
-  COMPLETED: { label: "Tamamlandı", color: "text-emerald-400 bg-emerald-500/10", icon: CheckCircle2 },
-  FAILED: { label: "Başarısız", color: "text-rose-400 bg-rose-500/10", icon: XCircle },
-  CANCELLED: { label: "İptal", color: "text-gray-400 bg-gray-500/10", icon: AlertTriangle },
+  QUEUED: { label: "Beklemede", color: "text-neutral-400 bg-neutral-500/10 border border-neutral-500/20", icon: Clock },
+  PROCESSING: { label: "İşleniyor", color: "text-neutral-400 bg-neutral-500/10 border border-neutral-500/20", icon: Loader2 },
+  COMPLETED: { label: "Tamamlandı", color: "text-neutral-400 bg-neutral-500/10 border border-neutral-500/20", icon: CheckCircle2 },
+  FAILED: { label: "Başarısız", color: "text-neutral-400 bg-neutral-500/10 border border-neutral-500/20", icon: XCircle },
+  CANCELLED: { label: "İptal", color: "text-[var(--color-text-ghost)] bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)]", icon: AlertTriangle },
 };
 
 function formatMs(ms?: number) {
@@ -62,7 +62,7 @@ export default function AdminRenderJobsPage() {
       <motion.div variants={fadeUp} className="flex items-center justify-between">
         <div>
           <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold flex items-center gap-2">
-            <Cpu size={22} className="text-emerald-400" /> Render İş Takibi
+            <Cpu size={22} className="text-neutral-400" /> Render İş Takibi
           </h1>
           <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Toplam {meta.total ?? "—"} render işi (15 saniyede bir güncellenir)
@@ -81,8 +81,8 @@ export default function AdminRenderJobsPage() {
             onClick={() => { setStatusFilter(value); setPage(1); }}
             className={`text-xs px-3 py-1.5 rounded-full transition-colors border ${
               statusFilter === value
-                ? "border-violet-500 bg-violet-500/10 text-violet-400"
-                : "border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-violet-500/40"
+                ? "border-neutral-500 bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
+                : "border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-neutral-500/40"
             }`}
           >
             {label}
@@ -93,7 +93,7 @@ export default function AdminRenderJobsPage() {
       <motion.div variants={fadeUp} className="card-surface overflow-hidden">
         {isLoading ? (
           <div className="flex justify-center py-16">
-            <Loader2 size={28} className="animate-spin text-emerald-400" />
+            <Loader2 size={28} className="animate-spin text-neutral-400" />
           </div>
         ) : (
           <div className="overflow-x-auto">
diff --git a/src/app/[locale]/(dashboard)/dashboard/admin/users/page.tsx b/src/app/[locale]/(dashboard)/dashboard/admin/users/page.tsx
index 368955b..c8ceb29 100644
--- a/src/app/[locale]/(dashboard)/dashboard/admin/users/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/admin/users/page.tsx
@@ -62,7 +62,7 @@ export default function AdminUsersPage() {
       <motion.div variants={fadeUp} className="flex items-center justify-between">
         <div>
           <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold flex items-center gap-2">
-            <Users size={22} className="text-violet-400" /> Kullanıcı Yönetimi
+            <Users size={22} className="text-neutral-400" /> Kullanıcı Yönetimi
           </h1>
           <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Toplam {meta.total ?? "—"} kullanıcı
@@ -92,7 +92,7 @@ export default function AdminUsersPage() {
       <motion.div variants={fadeUp} className="card-surface overflow-hidden">
         {isLoading ? (
           <div className="flex justify-center py-16">
-            <Loader2 size={28} className="animate-spin text-violet-400" />
+            <Loader2 size={28} className="animate-spin text-neutral-400" />
           </div>
         ) : (
           <div className="overflow-x-auto">
@@ -127,7 +127,7 @@ export default function AdminUsersPage() {
                         <div className="flex flex-wrap gap-1">
                           {roleNames.length > 0 ? (
                             roleNames.map((role) => (
-                              <span key={role} className="text-[10px] px-2 py-0.5 rounded-full bg-violet-500/10 text-violet-400 flex items-center gap-1">
+                              <span key={role} className="text-[10px] px-2 py-0.5 rounded-full bg-neutral-500/10 text-neutral-400 border border-neutral-500/20 flex items-center gap-1">
                                 <Shield size={8} /> {role}
                               </span>
                             ))
@@ -138,10 +138,10 @@ export default function AdminUsersPage() {
                       </td>
                       <td className="px-4 py-3">
                         <span
-                          className={`text-xs px-2 py-0.5 rounded-full ${
+                          className={`text-xs px-2 py-0.5 rounded-full border ${
                             user.isActive
-                              ? "bg-emerald-500/10 text-emerald-400"
-                              : "bg-rose-500/10 text-rose-400"
+                              ? "bg-neutral-500/10 text-neutral-300 border-neutral-500/20"
+                              : "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] border-[var(--color-border-faint)]"
                           }`}
                         >
                           {user.isActive ? "Aktif" : "Pasif"}
@@ -154,7 +154,7 @@ export default function AdminUsersPage() {
                         <div className="flex items-center justify-end gap-2">
                           <button
                             onClick={() => setGrantModal({ userId: user.id, email: user.email })}
-                            className="p-1.5 rounded-lg hover:bg-amber-500/10 text-amber-400 transition-colors"
+                            className="p-1.5 rounded-lg hover:bg-neutral-500/10 text-neutral-400 transition-colors"
                             title="Kredi Yükle"
                           >
                             <Coins size={14} />
@@ -162,11 +162,7 @@ export default function AdminUsersPage() {
                           <button
                             onClick={() => toggleActive.mutate(user.id)}
                             disabled={toggleActive.isPending}
-                            className={`p-1.5 rounded-lg transition-colors ${
-                              user.isActive
-                                ? "hover:bg-rose-500/10 text-rose-400"
-                                : "hover:bg-emerald-500/10 text-emerald-400"
-                            }`}
+                            className={`p-1.5 rounded-lg transition-colors hover:bg-neutral-500/10 text-neutral-400`}
                             title={user.isActive ? "Pasif Yap" : "Aktif Yap"}
                           >
                             {user.isActive ? <UserX size={14} /> : <UserCheck size={14} />}
diff --git a/src/app/[locale]/(dashboard)/dashboard/document-to-video/page.tsx b/src/app/[locale]/(dashboard)/dashboard/document-to-video/page.tsx
index 5f78164..d346445 100644
--- a/src/app/[locale]/(dashboard)/dashboard/document-to-video/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/document-to-video/page.tsx
@@ -1,53 +1,34 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
-import { useExtractDocumentTopics, useCreateFromExtractedText } from "@/hooks/use-api";
+import { useCreateFromDocument } from "@/hooks/use-api";
 import { useToast } from "@/components/ui/toast";
 import {
   FileText,
+  Upload,
   Loader2,
   ArrowRight,
-  Clock,
-  Palette,
-  Monitor,
-  Smartphone,
-  Square,
+  Sparkles,
   Wand2,
+  X,
+  File,
 } from "lucide-react";
-
-const videoStyles = [
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
-  { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
-  { id: "NEWS", label: "Haber", emoji: "📰" },
-];
-
-const aspectRatios = [
-  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
-  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
-  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
-];
-
-const languages = [
-  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
-  { code: "en", label: "English", flag: "🇺🇸" },
-  { code: "de", label: "Deutsch", flag: "🇩🇪" },
-  { code: "es", label: "Español", flag: "🇪🇸" },
-];
+import {
+  LanguageSelector,
+  StyleSelector,
+  DurationSelector,
+  AspectRatioSelector,
+} from "@/components/projects/ProjectConfiguration";
 
 export default function DocumentToVideoPage() {
   const router = useRouter();
   const { toast } = useToast();
+  const createFromDoc = useCreateFromDocument();
 
-  const extractDocumentTopics = useExtractDocumentTopics();
-  const createFromExtractedText = useCreateFromExtractedText();
-
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [extractedData, setExtractedData] = useState<{text: string; topics: string[]; originalFilename: string} | null>(null);
-  const [selectedTopic, setSelectedTopic] = useState<string | null>(null);
   
   const [style, setStyle] = useState("CINEMATIC");
   const [cinematicReference, setCinematicReference] = useState("");
@@ -57,41 +38,34 @@ export default function DocumentToVideoPage() {
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
-      setFile(e.target.files[0]);
-      setExtractedData(null);
-      setSelectedTopic(null);
+      const selectedFile = e.target.files[0];
+      
+      // Boyut kontrolü (örn: 10MB)
+      if (selectedFile.size > 10 * 1024 * 1024) {
+        toast("error", "Dosya boyutu 10MB'dan küçük olmalıdır.");
+        return;
+      }
+      
+      setFile(selectedFile);
     }
   };
 
-  const handleExtractTopics = async () => {
-    if (!file) {
-      toast("error", "Lütfen bir belge seçin.");
-      return;
-    }
-
-    try {
-      const result = await extractDocumentTopics.mutateAsync({ file });
-      setExtractedData(result);
-      if (result.topics.length > 0) {
-        setSelectedTopic(result.topics[0]);
-      }
-      toast("success", "Belge incelendi ve konular çıkarıldı!");
-    } catch (error) {
-      toast("error", "Konu çıkarılırken hata oluştu. Belki belge okunamıyor veya çok büyük.");
+  const clearFile = () => {
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
     }
   };
 
   const handleGenerate = async () => {
-    if (!extractedData || !selectedTopic) {
-      toast("error", "Lütfen bir belge yükleyip konu seçin.");
+    if (!file) {
+      toast("error", "Lütfen bir belge yükleyin.");
       return;
     }
 
     try {
-      const result: any = await createFromExtractedText.mutateAsync({
-        text: extractedData.text,
-        topic: selectedTopic,
-        originalFilename: extractedData.originalFilename,
+      const result: any = await createFromDoc.mutateAsync({
+        file,
         language,
         aspectRatio,
         videoStyle: style,
@@ -99,10 +73,10 @@ export default function DocumentToVideoPage() {
         targetDuration: duration,
       });
 
-      toast("success", "Video projesi oluşturuldu!");
+      toast("success", "Belge → Video projesi oluşturuldu!");
       router.push(`/dashboard/projects/${result.id}`);
-    } catch (error) {
-      toast("error", "Proje oluşturulurken hata oluştu.");
+    } catch {
+      toast("error", "Proje oluşturulurken bir hata oluştu.");
     }
   };
 
@@ -110,230 +84,127 @@ export default function DocumentToVideoPage() {
     <div className="max-w-3xl mx-auto space-y-8 pb-24">
       {/* Header */}
       <div className="text-center space-y-3 pb-4">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-blue-500/10 text-blue-500 mb-2 ring-1 ring-blue-500/20 shadow-[0_0_30px_rgba(59,130,246,0.15)]">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] mb-2 ring-1 ring-[var(--color-bg-inverted)]/20 shadow-none">
           <FileText size={32} />
         </div>
         <h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
           Belgeden Video Üret
         </h1>
         <p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
-          PDF, Word, TXT vb. belgenizi yükleyin, yapay zeka içeriği tarayıp senaryolastirsin.
+          PDF, Word veya Text dosyalarınızı yükleyin, yapay zeka sizin için profesyonel bir videoya dönüştürsün
         </p>
       </div>
 
-      {/* Input */}
-      <div className="card p-6 md:p-8 space-y-4">
+      {/* Main Form */}
+      <div className="card p-6 md:p-8 space-y-6">
+        
+        {/* File Upload */}
         <div>
           <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
-            Belge Yükle (PDF, DOCX, TXT)
+            Belge Yükle (.pdf, .docx, .txt, vb.)
           </label>
-          <div className="relative">
-            <input
-              type="file"
-              onChange={handleFileChange}
-              accept=".pdf,.docx,.txt,.csv,.xlsx,.pptx"
-              className="block w-full text-sm text-[var(--color-text-muted)]
-              file:mr-4 file:py-3 file:px-4
-              file:rounded-xl file:border-0
-              file:text-sm file:font-semibold
-              file:bg-blue-500/10 file:text-blue-500
-              hover:file:bg-blue-500/20 cursor-pointer"
-            />
-          </div>
+          
+          {!file ? (
+            <div 
+              onClick={() => fileInputRef.current?.click()}
+              className="w-full h-32 border-2 border-dashed border-[var(--color-border-default)] rounded-xl flex flex-col items-center justify-center gap-3 bg-[var(--color-bg-surface)] hover:bg-[var(--color-bg-elevated)] transition-colors cursor-pointer"
+            >
+              <div className="w-10 h-10 rounded-full bg-[var(--color-bg-elevated)] flex items-center justify-center text-[var(--color-text-muted)]">
+                <Upload size={20} />
+              </div>
+              <div className="text-center">
+                <p className="text-sm font-medium text-[var(--color-text-primary)]">Tıklayın veya sürükleyin</p>
+                <p className="text-xs text-[var(--color-text-ghost)] mt-1">Maksimum 10MB</p>
+              </div>
+            </div>
+          ) : (
+            <div className="w-full p-4 border border-[var(--color-border-default)] rounded-xl flex items-center justify-between bg-[var(--color-bg-elevated)]">
+              <div className="flex items-center gap-3 overflow-hidden">
+                <div className="w-10 h-10 rounded-lg bg-[var(--color-bg-surface)] flex items-center justify-center text-[var(--color-text-secondary)] shrink-0">
+                  <File size={20} />
+                </div>
+                <div className="truncate">
+                  <p className="text-sm font-medium text-[var(--color-text-primary)] truncate">{file.name}</p>
+                  <p className="text-xs text-[var(--color-text-ghost)]">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
+                </div>
+              </div>
+              <button 
+                onClick={clearFile}
+                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--color-bg-surface)] text-[var(--color-text-muted)] transition-colors shrink-0"
+              >
+                <X size={16} />
+              </button>
+            </div>
+          )}
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept=".pdf,.doc,.docx,.txt,.csv"
+            className="hidden"
+          />
         </div>
 
-        {!extractedData && file && (
-          <button
-            onClick={handleExtractTopics}
-            disabled={extractDocumentTopics.isPending}
-            className="w-full flex items-center justify-center gap-2 py-3.5 rounded-xl font-medium text-white shadow-lg bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {extractDocumentTopics.isPending ? (
-              <>
-                <Loader2 size={18} className="animate-spin" />
-                Belge İnceleniyor...
-              </>
-            ) : (
-              <>
-                <FileText size={18} />
-                Konu Çıkar
-              </>
-            )}
-          </button>
-        )}
-
-        {extractedData && (
-          <div className="mt-6 p-4 rounded-xl bg-blue-500/5 border border-blue-500/20">
-            <h3 className="font-medium text-blue-400 mb-3 text-sm flex items-center gap-2">
-              <Wand2 size={16} />
-              Şu Konulardan Birini Seçin:
-            </h3>
-            <div className="space-y-2">
-              {extractedData.topics.map((topic, i) => (
-                <div
-                  key={i}
-                  onClick={() => setSelectedTopic(topic)}
-                  className={cn(
-                    "p-3 rounded-lg border text-sm cursor-pointer transition-all",
-                    selectedTopic === topic
-                      ? "bg-blue-500/20 border-blue-500 text-blue-400"
-                      : "bg-[var(--color-bg-surface)] border-[var(--color-border-faint)] text-[var(--color-text-secondary)] hover:border-blue-500/50"
-                  )}
-                >
-                  {topic}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
+        {/* Configurations */}
+        <div className="space-y-8 pt-6 border-t border-[var(--color-border-faint)]">
+          <LanguageSelector value={language} onChange={setLanguage} />
+          
+          <StyleSelector 
+            value={style} 
+            onChange={setStyle} 
+            cinematicReference={cinematicReference} 
+            onCinematicReferenceChange={setCinematicReference} 
+          />
+          
+          <DurationSelector value={duration} onChange={setDuration} />
+          
+          <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
+        </div>
       </div>
 
-      {/* Video Settings */}
-      <div className="space-y-6">
-        <div className="card p-5 space-y-3">
-          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-            Video Dili
-          </label>
-          <div className="flex gap-2">
-            {languages.map((l) => (
-              <button
-                key={l.code}
-                onClick={() => setLanguage(l.code)}
-                className={cn(
-                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                  language === l.code
-                    ? "bg-blue-500/12 border border-blue-500/30 text-blue-400"
-                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                )}
-              >
-                <span>{l.flag}</span>
-                {l.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="card p-5 space-y-3">
-          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-            <Palette size={14} className="inline mr-1.5 text-blue-400" />
-            Video Stili
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {videoStyles.map((s) => (
-              <button
-                key={s.id}
-                onClick={() => setStyle(s.id)}
-                className={cn(
-                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                  style === s.id
-                    ? "bg-blue-500/12 border border-blue-500/30 text-blue-400"
-                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                )}
-              >
-                <span>{s.emoji}</span>
-                {s.label}
-              </button>
-            ))}
-          </div>
-          {style === "CINEMATIC" && (
-            <div className="pt-3 mt-3 border-t border-[var(--color-border-faint)]">
-              <label className="text-xs font-medium text-[var(--color-text-secondary)] mb-2 block">
-                Özel Sinematik Referans (Opsiyonel)
-              </label>
-              <input
-                type="text"
-                placeholder="Örn: Wes Anderson, Matrix, Neon Cyberpunk..."
-                value={cinematicReference}
-                onChange={(e) => setCinematicReference(e.target.value)}
-                className="w-full bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] rounded-xl py-2 px-3 text-sm focus:border-blue-500/50 outline-none transition-colors"
-              />
-            </div>
-          )}
-        </div>
-
-        <div className="card p-5 space-y-4">
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-              <Clock size={14} className="inline mr-1.5 text-cyan-400" />
-              Hedef Süre: <span className="text-blue-400">{duration}s</span>
-            </label>
-            <input
-              type="range"
-              min={15}
-              max={120}
-              step={5}
-              value={duration}
-              onChange={(e) => setDuration(Number(e.target.value))}
-              className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
-                [&::-webkit-slider-thumb]:appearance-none
-                [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
-                [&::-webkit-slider-thumb]:rounded-full
-                [&::-webkit-slider-thumb]:bg-blue-500
-                [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(59,130,246,0.4)]
-                [&::-webkit-slider-thumb]:cursor-grab"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-              En-Boy Oranı
-            </label>
-            <div className="flex gap-2">
-              {aspectRatios.map((ar) => {
-                const Icon = ar.icon;
-                return (
-                  <button
-                    key={ar.id}
-                    onClick={() => setAspectRatio(ar.id)}
-                    className={cn(
-                      "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
-                      aspectRatio === ar.id
-                        ? "bg-blue-500/12 border border-blue-500/30 text-blue-400"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                    )}
-                  >
-                    <Icon size={20} />
-                    <span className="font-semibold">{ar.label}</span>
-                    <span className="text-[10px] text-[var(--color-text-ghost)]">
-                      {ar.desc}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
+      {/* Action Button */}
+      <div className="flex justify-end">
         <button
           onClick={handleGenerate}
-          disabled={createFromExtractedText.isPending || !selectedTopic}
+          disabled={createFromDoc.isPending || !file}
           className={cn(
-            "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
-            createFromExtractedText.isPending
-              ? "bg-blue-500/20 text-blue-400 cursor-wait"
-              : "bg-blue-500 hover:bg-blue-600 text-white shadow-lg shadow-blue-500/20",
-            !selectedTopic && "opacity-50 cursor-not-allowed"
+            "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[var(--color-text-inverted)] shadow-none transition-all",
+            "bg-[var(--color-bg-inverted)] hover:scale-[1.02]",
+            "disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
           )}
         >
-          {createFromExtractedText.isPending ? (
+          {createFromDoc.isPending ? (
             <>
               <Loader2 size={20} className="animate-spin" />
-              <span>Video Projesi Oluşturuluyor... (Bu işlem uzun sürebilir)</span>
+              <span>Yapay Zeka Belgeyi Okuyor...</span>
             </>
           ) : (
             <>
-              <Wand2 size={20} />
-              <span>Konudan Video Oluştur</span>
-              <ArrowRight size={16} />
+              <Wand2 size={20} className="group-hover:rotate-12 transition-transform" />
+              <span>Belgeden Video Üret</span>
+              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
             </>
           )}
         </button>
-
-        <p className="text-center text-[11px] text-[var(--color-text-ghost)]">
-          Bu işlem 1 kredi kullanır • AI senaryo + görsel üretim dahil
-        </p>
       </div>
 
+      {/* Info Box */}
+      <div className="card p-5 bg-[var(--color-bg-surface)]">
+        <div className="flex items-start gap-3">
+          <Sparkles size={20} className="text-[var(--color-text-secondary)] shrink-0 mt-0.5" />
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
+              Nasıl Çalışır?
+            </h3>
+            <ol className="text-xs text-[var(--color-text-muted)] space-y-1.5 list-decimal list-inside">
+              <li>PDF, Word veya TXT formatında bir metin dosyası yükleyin</li>
+              <li>MarkItDown AI teknolojisiyle belgeniz analiz edilip özetlenir</li>
+              <li>Belgenin içeriğine en uygun görseller ve anlatım senaryosu çıkarılır</li>
+              <li>Sizin seçtiğiniz dil, stil ve süreye göre yepyeni bir video oluşturulur</li>
+            </ol>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/[locale]/(dashboard)/dashboard/page.tsx b/src/app/[locale]/(dashboard)/dashboard/page.tsx
index 76ebf3b..a05783c 100644
--- a/src/app/[locale]/(dashboard)/dashboard/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/page.tsx
@@ -61,36 +61,36 @@ function getStatCards(data?: typeof MOCK_STATS, creditBalance?: { balance: numbe
       value: String(stats.totalProjects),
       change: `${stats.completedVideos} tamamlandı`,
       icon: FolderOpen,
-      gradient: "from-violet-500/12 to-violet-600/5",
-      iconBg: "bg-violet-500/12",
-      iconColor: "text-violet-400",
+      gradient: "from-neutral-500/12 to-neutral-600/5",
+      iconBg: "bg-neutral-500/12",
+      iconColor: "text-neutral-400",
     },
     {
       label: "Devam Eden",
       value: String(stats.activeRenderJobs),
       change: "İşleniyor",
       icon: PlayCircle,
-      gradient: "from-cyan-500/12 to-cyan-600/5",
-      iconBg: "bg-cyan-500/12",
-      iconColor: "text-cyan-400",
+      gradient: "from-neutral-500/12 to-neutral-600/5",
+      iconBg: "bg-neutral-500/12",
+      iconColor: "text-neutral-400",
     },
     {
       label: "Tamamlanan",
       value: String(stats.completedVideos),
       change: "Bu ay",
       icon: CheckCircle2,
-      gradient: "from-emerald-500/12 to-emerald-600/5",
-      iconBg: "bg-emerald-500/12",
-      iconColor: "text-emerald-400",
+      gradient: "from-neutral-500/12 to-neutral-600/5",
+      iconBg: "bg-neutral-500/12",
+      iconColor: "text-neutral-400",
     },
     {
       label: "Kalan Kredi",
       value: String(credits.balance),
       change: `${credits.monthlyLimit} üzerinden`,
       icon: Coins,
-      gradient: "from-amber-500/12 to-amber-600/5",
-      iconBg: "bg-amber-500/12",
-      iconColor: "text-amber-400",
+      gradient: "from-neutral-500/12 to-neutral-600/5",
+      iconBg: "bg-neutral-500/12",
+      iconColor: "text-neutral-400",
     },
   ];
 }
@@ -116,7 +116,7 @@ export default function DashboardPage() {
   if (!mounted) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <Loader2 size={32} className="animate-spin text-violet-500" />
+        <Loader2 size={32} className="animate-spin text-neutral-500" />
       </div>
     );
   }
@@ -151,7 +151,7 @@ export default function DashboardPage() {
       <motion.div variants={fadeUp} className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
         {isLoading ? (
           <div className="col-span-4 flex items-center justify-center py-12">
-            <Loader2 size={28} className="animate-spin text-violet-400" />
+            <Loader2 size={28} className="animate-spin text-neutral-400" />
           </div>
         ) : (
           statCards.map((stat) => {
@@ -184,10 +184,10 @@ export default function DashboardPage() {
       <motion.div variants={fadeUp} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
         <Link
           href="/dashboard/projects/new"
-          className="group card-surface p-4 flex items-center gap-4 hover:border-violet-500/30"
+          className="group card-surface p-4 flex items-center gap-4 hover:border-neutral-500/30"
         >
-          <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-violet-500 to-violet-700 flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-violet-500/20 transition-shadow">
-            <Sparkles size={20} className="text-white" />
+          <div className="w-11 h-11 rounded-xl bg-[var(--color-bg-inverted)] flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-neutral-500/20 transition-shadow">
+            <Sparkles size={20} className="text-[var(--color-text-inverted)]" />
           </div>
           <div>
             <h3 className="text-sm font-semibold">AI ile Video Oluştur</h3>
@@ -197,10 +197,10 @@ export default function DashboardPage() {
 
         <Link
           href="/dashboard/templates"
-          className="group card-surface p-4 flex items-center gap-4 hover:border-cyan-500/30"
+          className="group card-surface p-4 flex items-center gap-4 hover:border-neutral-500/30"
         >
-          <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-cyan-500 to-cyan-700 flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-cyan-500/20 transition-shadow">
-            <TrendingUp size={20} className="text-white" />
+          <div className="w-11 h-11 rounded-xl bg-[var(--color-bg-inverted)] flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-neutral-500/20 transition-shadow">
+            <TrendingUp size={20} className="text-[var(--color-text-inverted)]" />
           </div>
           <div>
             <h3 className="text-sm font-semibold">Şablon Keşfet</h3>
@@ -210,10 +210,10 @@ export default function DashboardPage() {
 
         <Link
           href="/dashboard/projects"
-          className="group card-surface p-4 flex items-center gap-4 hover:border-emerald-500/30"
+          className="group card-surface p-4 flex items-center gap-4 hover:border-neutral-500/30"
         >
-          <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-emerald-500/20 transition-shadow">
-            <Clock size={20} className="text-white" />
+          <div className="w-11 h-11 rounded-xl bg-[var(--color-bg-inverted)] flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-neutral-500/20 transition-shadow">
+            <Clock size={20} className="text-[var(--color-text-inverted)]" />
           </div>
           <div>
             <h3 className="text-sm font-semibold">Devam Eden İşler</h3>
@@ -223,14 +223,14 @@ export default function DashboardPage() {
 
         <Link
           href="#tweet-import"
-          className="group card-surface p-4 flex items-center gap-4 hover:border-sky-500/30"
+          className="group card-surface p-4 flex items-center gap-4 hover:border-neutral-500/30"
           onClick={(e) => {
             e.preventDefault();
             document.getElementById('tweet-import')?.scrollIntoView({ behavior: 'smooth' });
           }}
         >
-          <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-sky-500 to-sky-700 flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-sky-500/20 transition-shadow">
-            <XIcon size={20} className="text-white" />
+          <div className="w-11 h-11 rounded-xl bg-[var(--color-bg-inverted)] flex items-center justify-center shrink-0 shadow-lg group-hover:shadow-neutral-500/20 transition-shadow">
+            <XIcon size={20} className="text-[var(--color-text-inverted)]" />
           </div>
           <div>
             <h3 className="text-sm font-semibold">Tweet → Video</h3>
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
index f023c34..476966e 100644
--- a/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx
@@ -45,13 +45,13 @@ const XIcon = ({ size = 16 }: { size?: number }) => (
 );
 
 const STATUS_MAP: Record<string, { label: string; color: string; icon: React.ElementType; bgClass: string }> = {
-  DRAFT: { label: 'Taslak', color: 'text-slate-400', icon: FileText, bgClass: 'bg-slate-500/10 border-slate-500/20' },
-  GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-violet-400', icon: Sparkles, bgClass: 'bg-violet-500/10 border-violet-500/20' },
-  PENDING: { label: 'Kuyrukta', color: 'text-amber-400', icon: Clock, bgClass: 'bg-amber-500/10 border-amber-500/20' },
-  GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-cyan-400', icon: Sparkles, bgClass: 'bg-cyan-500/10 border-cyan-500/20' },
-  RENDERING: { label: 'Video İşleniyor', color: 'text-blue-400', icon: Film, bgClass: 'bg-blue-500/10 border-blue-500/20' },
-  COMPLETED: { label: 'Tamamlandı', color: 'text-emerald-400', icon: CheckCircle2, bgClass: 'bg-emerald-500/10 border-emerald-500/20' },
-  FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
+  DRAFT: { label: 'Taslak', color: 'text-neutral-400', icon: FileText, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
+  GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
+  PENDING: { label: 'Kuyrukta', color: 'text-neutral-400', icon: Clock, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
+  GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
+  RENDERING: { label: 'Video İşleniyor', color: 'text-neutral-300', icon: Film, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
+  COMPLETED: { label: 'Tamamlandı', color: 'text-neutral-100', icon: CheckCircle2, bgClass: 'bg-neutral-500/20 border-neutral-500/30' },
+  FAILED: { label: 'Başarısız', color: 'text-neutral-500', icon: AlertCircle, bgClass: 'bg-neutral-800/50 border-neutral-800' },
 };
 
 const videoStyles = [
@@ -240,7 +240,7 @@ export default function ProjectDetailPage() {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="flex flex-col items-center gap-3">
-          <Loader2 size={32} className="animate-spin text-violet-400" />
+          <Loader2 size={32} className="animate-spin text-neutral-400" />
           <p className="text-sm text-[var(--color-text-muted)]">Proje yükleniyor...</p>
         </div>
       </div>
@@ -379,7 +379,7 @@ export default function ProjectDetailPage() {
               value={project.videoStyle}
               onChange={(e) => handleStyleChange(e.target.value)}
               disabled={isRendering}
-              className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-violet-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+              className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
             >
               {videoStyles.map((s) => (
                 <option key={s.id} value={s.id}>
@@ -393,7 +393,7 @@ export default function ProjectDetailPage() {
                 value={project.cinematicReference || ''}
                 onChange={(e) => handleCinematicReferenceChange(e.target.value)}
                 disabled={isRendering}
-                className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-violet-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer w-44 truncate"
+                className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer w-44 truncate"
               >
                 <option value="">🎬 Sinematik Yönetmen/Film...</option>
                 {CINEMATIC_REFERENCES.map(ref => (
@@ -438,7 +438,7 @@ export default function ProjectDetailPage() {
             <button
               onClick={handleGenerateScript}
               disabled={isRendering || generateScriptMutation.isPending}
-              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {generateScriptMutation.isPending ? (
                 <Loader2 size={15} className="animate-spin" />
@@ -470,7 +470,7 @@ export default function ProjectDetailPage() {
             <button
               onClick={handleApprove}
               disabled={isRendering || approveMutation.isPending}
-              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 text-white text-sm font-medium shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {approveMutation.isPending ? (
                 <Loader2 size={15} className="animate-spin" />
@@ -554,7 +554,7 @@ export default function ProjectDetailPage() {
         <motion.div variants={fadeUp}>
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
-              <Film size={15} className="text-violet-400" />
+              <Film size={15} className="text-neutral-400" />
               Senaryo — {project.scenes!.length} sahne
             </h2>
             <span className="text-[10px] text-[var(--color-text-ghost)]">
@@ -585,8 +585,8 @@ export default function ProjectDetailPage() {
       {/* ── Boş durum (senaryo yok) ── */}
       {!hasScript && isEditable && (
         <motion.div variants={fadeUp} className="card-surface p-8 text-center">
-          <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500/15 to-cyan-400/10 mx-auto mb-4 flex items-center justify-center">
-            <Sparkles size={28} className="text-violet-400" />
+          <div className="w-16 h-16 rounded-2xl bg-[var(--color-bg-elevated)] mx-auto mb-4 flex items-center justify-center">
+            <Sparkles size={28} className="text-neutral-400" />
           </div>
           <h3 className="text-base font-semibold mb-1.5">Henüz senaryo üretilmedi</h3>
           <p className="text-sm text-[var(--color-text-muted)] mb-4 max-w-sm mx-auto">
@@ -595,7 +595,7 @@ export default function ProjectDetailPage() {
           <button
             onClick={handleGenerateScript}
             disabled={generateScriptMutation.isPending}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50"
           >
             {generateScriptMutation.isPending ? (
               <Loader2 size={15} className="animate-spin" />
@@ -612,7 +612,7 @@ export default function ProjectDetailPage() {
         <motion.div variants={fadeUp}>
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
-              <Clock size={15} className="text-cyan-400" />
+              <Clock size={15} className="text-neutral-400" />
               Render Geçmişi
             </h2>
             {project.status === 'GENERATING_MEDIA' || project.renderJobs.some((j: any) => j.status === 'QUEUED' || j.status === 'PROCESSING') ? (
@@ -632,10 +632,10 @@ export default function ProjectDetailPage() {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2.5">
                     <div className={`w-2 h-2 rounded-full ${
-                      job.status === 'COMPLETED' ? 'bg-emerald-400' :
-                      job.status === 'FAILED' ? 'bg-red-400' :
-                      job.status === 'CANCELLED' ? 'bg-slate-400' :
-                      'bg-amber-400 animate-pulse'
+                      job.status === 'COMPLETED' ? 'bg-neutral-100' :
+                      job.status === 'FAILED' ? 'bg-neutral-500' :
+                      job.status === 'CANCELLED' ? 'bg-neutral-600' :
+                      'bg-neutral-300 animate-pulse'
                     }`} />
                     <span className="text-xs text-[var(--color-text-secondary)]">
                       Deneme #{job.attemptNumber}
@@ -658,9 +658,9 @@ export default function ProjectDetailPage() {
                   </div>
                 </div>
                 {(job.status === 'QUEUED' || job.status === 'PROCESSING') && (
-                  <div className="w-full bg-slate-800 rounded-full h-1.5 mt-1 overflow-hidden">
+                  <div className="w-full bg-[var(--color-bg-surface)] rounded-full h-1.5 mt-1 overflow-hidden">
                     <div 
-                      className="bg-amber-400 h-1.5 rounded-full transition-all duration-1000 ease-out relative" 
+                      className="bg-neutral-300 h-1.5 rounded-full transition-all duration-1000 ease-out relative" 
                       style={{ width: `${job.progress || (job.status === 'QUEUED' ? 5 : 50)}%` }}
                     >
                       <div className="absolute inset-0 bg-white/20 animate-pulse" />
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
index ddf8416..8603300 100644
--- a/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/new/page.tsx
@@ -1,105 +1,33 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   ArrowLeft,
   ArrowRight,
   Sparkles,
-  Languages,
-  Clock,
-  Palette,
-  Monitor,
-  Smartphone,
-  Square,
   Loader2,
   Check,
   Wand2,
-  Search,
-  ChevronDown,
 } from "lucide-react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { useCreateProject } from "@/hooks/use-api";
 import { useToast } from "@/components/ui/toast";
 import { projectsApi } from "@/lib/api/api-service";
+import {
+  LanguageSelector,
+  StyleSelector,
+  DurationSelector,
+  AspectRatioSelector,
+  languages,
+  videoStyles,
+  aspectRatios,
+} from "@/components/projects/ProjectConfiguration";
 
 const steps = ["Konu & Dil", "Stil & Süre", "AI Senaryo"];
 
-const languages = [
-  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
-  { code: "en", label: "English", flag: "🇺🇸" },
-  { code: "es", label: "Español", flag: "🇪🇸" },
-  { code: "de", label: "Deutsch", flag: "🇩🇪" },
-  { code: "fr", label: "Français", flag: "🇫🇷" },
-  { code: "ar", label: "العربية", flag: "🇸🇦" },
-  { code: "pt", label: "Português", flag: "🇧🇷" },
-  { code: "ja", label: "日本語", flag: "🇯🇵" },
-];
-
-const videoStyles = [
-  // Film & Sinema
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
-  { id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
-  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
-  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
-  { id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
-  { id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
-  // Animasyon
-  { id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
-  { id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
-  { id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
-  { id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
-  { id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
-  { id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
-  { id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
-  { id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
-  { id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
-  // Eğitim & Bilgi
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
-  { id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
-  { id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
-  { id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
-  { id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
-  // Retro & Nostaljik
-  { id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
-  { id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
-  { id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
-  { id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
-  { id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
-  // Sanat Akımları
-  { id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
-  { id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
-  { id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
-  { id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
-  { id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
-  { id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
-  { id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
-  { id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
-  { id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
-  // Modern & Minimal
-  { id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
-  { id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
-  { id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
-  { id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
-  { id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
-  { id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
-  // Fotoğrafik
-  { id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
-  { id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
-  { id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
-  { id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
-  { id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
-];
-
-const aspectRatios = [
-  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
-  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
-  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
-];
-
 export default function NewProjectPage() {
   const router = useRouter();
   const createProject = useCreateProject();
@@ -114,26 +42,6 @@ export default function NewProjectPage() {
   const [duration, setDuration] = useState(60);
   const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
 
-  // Search & Category state
-  const [styleSearch, setStyleSearch] = useState("");
-  const [expandedCategory, setExpandedCategory] = useState<string | null>("Film & Sinema");
-
-  const filteredStyles = useMemo(() => {
-    return videoStyles.filter(s => 
-      s.label.toLowerCase().includes(styleSearch.toLowerCase()) || 
-      s.desc.toLowerCase().includes(styleSearch.toLowerCase())
-    );
-  }, [styleSearch]);
-
-  const groupedStyles = useMemo(() => {
-    return filteredStyles.reduce((acc, curr) => {
-      const cat = curr.category || "Diğer";
-      if (!acc[cat]) acc[cat] = [];
-      acc[cat].push(curr);
-      return acc;
-    }, {} as Record<string, typeof videoStyles>);
-  }, [filteredStyles]);
-
   const canProceed = currentStep === 0 ? topic.trim().length >= 5 : true;
   const isGenerating = createProject.isPending;
 
@@ -142,9 +50,9 @@ export default function NewProjectPage() {
       // Backend DTO alanları: prompt (zorunlu), videoStyle, title, language, aspectRatio, targetDuration
       const result = await createProject.mutateAsync({
         title: topic.slice(0, 80),
-        prompt: topic,           // ← topic → prompt (backend alanı)
+        prompt: topic,
         language,
-        videoStyle: style,       // ← style → videoStyle (backend alanı)
+        videoStyle: style,
         cinematicReference: cinematicReference ? cinematicReference : undefined,
         targetDuration: duration,
         aspectRatio,
@@ -190,9 +98,9 @@ export default function NewProjectPage() {
               className={cn(
                 "flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
                 i === currentStep
-                  ? "bg-violet-500/15 text-violet-400 border border-violet-500/25"
+                  ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
                   : i < currentStep
-                    ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 cursor-pointer"
+                    ? "bg-[var(--color-bg-inverted)]/10 text-[var(--color-text-primary)] border border-[var(--color-bg-inverted)]/20 cursor-pointer"
                     : "text-[var(--color-text-ghost)] border border-[var(--color-border-faint)]"
               )}
             >
@@ -208,7 +116,7 @@ export default function NewProjectPage() {
             {i < steps.length - 1 && (
               <div className={cn(
                 "w-6 h-px",
-                i < currentStep ? "bg-emerald-500/40" : "bg-[var(--color-border-faint)]"
+                i < currentStep ? "bg-[var(--color-bg-inverted)]/40" : "bg-[var(--color-border-faint)]"
               )} />
             )}
           </div>
@@ -229,14 +137,14 @@ export default function NewProjectPage() {
             {/* Konu */}
             <div>
               <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
-                <Sparkles size={14} className="inline mr-1.5 text-violet-400" />
+                <Sparkles size={14} className="inline mr-1.5 text-[var(--color-text-primary)]" />
                 Videonun Konusu
               </label>
               <textarea
                 value={topic}
                 onChange={(e) => setTopic(e.target.value)}
                 placeholder="Örn: Boötes Boşluğu — evrendeki en büyük boşluk ve gizemi..."
-                className="w-full h-32 px-4 py-3 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-all resize-none"
+                className="w-full h-32 px-4 py-3 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-[var(--color-border-default)] transition-all resize-none"
               />
               <p className="text-[11px] text-[var(--color-text-ghost)] mt-1.5">
                 Ne kadar detaylı yazarsan, AI o kadar iyi senaryo üretir ({topic.length} karakter)
@@ -244,29 +152,7 @@ export default function NewProjectPage() {
             </div>
 
             {/* Dil Seçimi */}
-            <div>
-              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                <Languages size={14} className="inline mr-1.5 text-cyan-400" />
-                Video Dili
-              </label>
-              <div className="grid grid-cols-4 gap-2">
-                {languages.map((lang) => (
-                  <button
-                    key={lang.code}
-                    onClick={() => setLanguage(lang.code)}
-                    className={cn(
-                      "flex flex-col items-center gap-1 py-3 px-2 rounded-xl text-xs transition-all",
-                      language === lang.code
-                        ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
-                    )}
-                  >
-                    <span className="text-lg">{lang.flag}</span>
-                    <span className="font-medium">{lang.label}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <LanguageSelector value={language} onChange={setLanguage} />
           </motion.div>
         )}
 
@@ -280,154 +166,18 @@ export default function NewProjectPage() {
             className="space-y-6"
           >
             {/* Video Stili */}
-            <div>
-              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
-                <label className="text-sm font-medium text-[var(--color-text-secondary)] block">
-                  <Palette size={14} className="inline mr-1.5 text-violet-400" />
-                  Video Stili
-                </label>
-                <div className="relative w-full sm:w-56">
-                  <div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
-                    <Search size={14} className="text-[var(--color-text-ghost)]" />
-                  </div>
-                  <input
-                    type="text"
-                    placeholder="Stil ara..."
-                    value={styleSearch}
-                    onChange={(e) => setStyleSearch(e.target.value)}
-                    className="w-full pl-8 pr-3 py-1.5 bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-md text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/50"
-                  />
-                </div>
-              </div>
-              
-              <div className="space-y-3 max-h-[360px] overflow-y-auto pr-1 custom-scrollbar">
-                {Object.entries(groupedStyles).map(([category, items]) => {
-                  const isExpanded = styleSearch ? true : expandedCategory === category;
-                  return (
-                    <div key={category} className="bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl overflow-hidden">
-                      <button
-                        onClick={() => !styleSearch && setExpandedCategory(isExpanded ? null : category)}
-                        className="w-full flex items-center justify-between p-3 bg-[var(--color-bg-elevated)] hover:bg-[var(--color-bg-surface-hover)] transition-colors"
-                      >
-                        <span className="text-sm font-medium text-[var(--color-text-secondary)]">{category} <span className="text-[11px] text-[var(--color-text-ghost)] ml-1">({items.length})</span></span>
-                        {!styleSearch && (
-                          <ChevronDown 
-                            size={16} 
-                            className={cn("text-[var(--color-text-ghost)] transition-transform duration-200", isExpanded && "rotate-180")} 
-                          />
-                        )}
-                      </button>
-                      
-                      <AnimatePresence initial={false}>
-                        {isExpanded && (
-                          <motion.div
-                            initial={{ height: 0, opacity: 0 }}
-                            animate={{ height: "auto", opacity: 1 }}
-                            exit={{ height: 0, opacity: 0 }}
-                            transition={{ duration: 0.2 }}
-                          >
-                            <div className="p-3 pt-0 mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2">
-                              {items.map((s) => (
-                                <button
-                                  key={s.id}
-                                  onClick={() => setStyle(s.id)}
-                                  className={cn(
-                                    "flex flex-col items-start gap-1 p-2.5 rounded-xl text-left transition-all",
-                                    style === s.id
-                                      ? "bg-violet-500/12 border border-violet-500/30 glow-violet"
-                                      : "bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]"
-                                  )}
-                                >
-                                  <span className="text-xl mb-0.5">{s.emoji}</span>
-                                  <span className="text-xs font-semibold leading-tight">{s.label}</span>
-                                  <span className="text-[10px] text-[var(--color-text-ghost)] leading-tight">{s.desc}</span>
-                                </button>
-                              ))}
-                            </div>
-                          </motion.div>
-                        )}
-                      </AnimatePresence>
-                    </div>
-                  );
-                })}
-                {Object.keys(groupedStyles).length === 0 && (
-                  <div className="text-center py-8 text-[var(--color-text-ghost)] text-sm">
-                    "{styleSearch}" için sonuç bulunamadı.
-                  </div>
-                )}
-              </div>
-              {style === "CINEMATIC" && (
-                <div className="pt-3 mt-3 border-t border-[var(--color-border-faint)]">
-                  <label className="text-xs font-medium text-[var(--color-text-secondary)] mb-2 block">
-                    Özel Sinematik Referans (Opsiyonel)
-                  </label>
-                  <input
-                    type="text"
-                    placeholder="Örn: Wes Anderson, Matrix, Neon Cyberpunk..."
-                    value={cinematicReference}
-                    onChange={(e) => setCinematicReference(e.target.value)}
-                    className="w-full bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] rounded-md py-1.5 px-3 text-sm focus:border-violet-500/50 outline-none transition-colors"
-                  />
-                </div>
-              )}
-            </div>
+            <StyleSelector 
+              value={style} 
+              onChange={setStyle} 
+              cinematicReference={cinematicReference} 
+              onCinematicReferenceChange={setCinematicReference} 
+            />
 
             {/* Süre */}
-            <div>
-              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                <Clock size={14} className="inline mr-1.5 text-cyan-400" />
-                Hedef Süre: <span className="text-violet-400">{duration}s</span>
-              </label>
-              <input
-                type="range"
-                min={15}
-                max={180}
-                step={5}
-                value={duration}
-                onChange={(e) => setDuration(Number(e.target.value))}
-                className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
-                  [&::-webkit-slider-thumb]:appearance-none
-                  [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
-                  [&::-webkit-slider-thumb]:rounded-full
-                  [&::-webkit-slider-thumb]:bg-violet-500
-                  [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(139,92,246,0.4)]
-                  [&::-webkit-slider-thumb]:cursor-grab"
-              />
-              <div className="flex justify-between text-[10px] text-[var(--color-text-ghost)] mt-1">
-                <span>15s</span>
-                <span>60s</span>
-                <span>120s</span>
-                <span>180s</span>
-              </div>
-            </div>
+            <DurationSelector value={duration} onChange={setDuration} />
 
             {/* En-Boy Oranı */}
-            <div>
-              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                En-Boy Oranı
-              </label>
-              <div className="flex gap-2">
-                {aspectRatios.map((ar) => {
-                  const Icon = ar.icon;
-                  return (
-                    <button
-                      key={ar.id}
-                      onClick={() => setAspectRatio(ar.id)}
-                      className={cn(
-                        "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
-                        aspectRatio === ar.id
-                          ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
-                          : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
-                      )}
-                    >
-                      <Icon size={20} />
-                      <span className="font-semibold">{ar.label}</span>
-                      <span className="text-[10px] text-[var(--color-text-ghost)]">{ar.desc}</span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
+            <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
           </motion.div>
         )}
 
@@ -476,7 +226,7 @@ export default function NewProjectPage() {
               className={cn(
                 "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
                 isGenerating
-                  ? "bg-violet-500/20 text-violet-300 cursor-wait"
+                  ? "bg-[var(--color-bg-inverted)]/20 text-[var(--color-text-primary)] cursor-wait"
                   : "btn-primary text-lg"
               )}
             >
diff --git a/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx b/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
index 89369b4..49953c7 100644
--- a/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx
@@ -40,20 +40,20 @@ const statusMap: Record<
   },
   scripting: {
     icon: Clock,
-    color: "text-blue-400",
-    bgColor: "bg-blue-500/10",
+    color: "text-neutral-400",
+    bgColor: "bg-neutral-200 dark:bg-neutral-800",
     label: "Senaryo",
   },
   reviewing: {
     icon: Clock,
-    color: "text-purple-400",
-    bgColor: "bg-purple-500/10",
+    color: "text-neutral-500",
+    bgColor: "bg-neutral-200 dark:bg-neutral-800",
     label: "İnceleme",
   },
   rendering: {
     icon: Video,
-    color: "text-cyan-400",
-    bgColor: "bg-cyan-500/10",
+    color: "text-[var(--color-text-primary)]",
+    bgColor: "bg-neutral-200 dark:bg-neutral-800",
     label: "Render",
   },
   completed: {
@@ -136,7 +136,7 @@ export default function ProjectsPage() {
           <p className="text-sm text-[var(--color-text-muted)] mt-0.5">
             Tüm video projelerini yönet
             {projects.length > 0 && (
-              <span className="ml-1 text-violet-400">
+              <span className="ml-1 text-[var(--color-text-primary)] font-medium">
                 ({projects.length} proje)
               </span>
             )}
@@ -163,7 +163,7 @@ export default function ProjectsPage() {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Proje ara..."
-            className="w-full pl-9 pr-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 transition-colors"
+            className="w-full pl-9 pr-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-neutral-500 transition-colors"
           />
         </div>
       </div>
@@ -177,7 +177,7 @@ export default function ProjectsPage() {
             className={cn(
               "px-3.5 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-all",
               activeFilter === filter.id
-                ? "bg-violet-500/15 text-violet-400 border border-violet-500/25"
+                ? "bg-neutral-200 text-black border border-neutral-400 dark:bg-neutral-800 dark:text-white dark:border-neutral-600"
                 : "text-[var(--color-text-muted)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]",
             )}
           >
@@ -191,7 +191,7 @@ export default function ProjectsPage() {
         <div className="flex flex-col items-center justify-center py-16">
           <Loader2
             size={32}
-            className="animate-spin text-violet-400 mb-3"
+            className="animate-spin text-[var(--color-text-primary)] mb-3"
           />
           <p className="text-sm text-[var(--color-text-muted)]">
             Projeler yükleniyor...
@@ -221,7 +221,7 @@ export default function ProjectsPage() {
               {!searchQuery && activeFilter === "all" && (
                 <Link
                   href="/dashboard/projects/new"
-                  className="mt-3 text-xs text-violet-400 hover:text-violet-300"
+                  className="mt-3 text-xs text-[var(--color-text-primary)] hover:text-[var(--color-text-secondary)] font-medium"
                 >
                   İlk projenizi oluşturun →
                 </Link>
@@ -234,7 +234,7 @@ export default function ProjectsPage() {
               return (
                 <div
                   key={project.id}
-                  className="flex items-center rounded-xl card hover:border-violet-500/20 transition-all group relative"
+                  className="flex items-center rounded-xl card hover:border-neutral-400 dark:hover:border-neutral-600 transition-all group relative"
                 >
                   <Link
                     href={`/dashboard/projects/${project.id}`}
@@ -246,7 +246,7 @@ export default function ProjectsPage() {
                       <StIcon size={18} />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-violet-300 transition-colors">
+                      <p className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-[var(--color-text-secondary)] transition-colors">
                         {project.title}
                       </p>
                       <div className="flex items-center gap-3 mt-0.5 text-[11px] text-[var(--color-text-ghost)]">
@@ -274,7 +274,7 @@ export default function ProjectsPage() {
                     </span>
                     <ExternalLink
                       size={14}
-                      className="text-[var(--color-text-ghost)] group-hover:text-violet-400 transition-colors shrink-0"
+                      className="text-[var(--color-text-ghost)] group-hover:text-[var(--color-text-primary)] transition-colors shrink-0"
                     />
                   </Link>
                   
diff --git a/src/app/[locale]/(dashboard)/dashboard/text-to-video/page.tsx b/src/app/[locale]/(dashboard)/dashboard/text-to-video/page.tsx
index 94b614d..ee51082 100644
--- a/src/app/[locale]/(dashboard)/dashboard/text-to-video/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/text-to-video/page.tsx
@@ -5,39 +5,13 @@ import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { useCreateFromText } from "@/hooks/use-api";
 import { useToast } from "@/components/ui/toast";
+import { Loader2, ArrowRight, Wand2, Type } from "lucide-react";
 import {
-  FileText,
-  Loader2,
-  ArrowRight,
-  Clock,
-  Palette,
-  Monitor,
-  Smartphone,
-  Square,
-  Wand2,
-  Type,
-} from "lucide-react";
-
-const videoStyles = [
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
-  { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
-  { id: "NEWS", label: "Haber", emoji: "📰" },
-];
-
-const aspectRatios = [
-  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
-  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
-  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
-];
-
-const languages = [
-  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
-  { code: "en", label: "English", flag: "🇺🇸" },
-  { code: "de", label: "Deutsch", flag: "🇩🇪" },
-  { code: "es", label: "Español", flag: "🇪🇸" },
-];
+  LanguageSelector,
+  StyleSelector,
+  DurationSelector,
+  AspectRatioSelector,
+} from "@/components/projects/ProjectConfiguration";
 
 export default function TextToVideoPage() {
   const router = useRouter();
@@ -60,6 +34,7 @@ export default function TextToVideoPage() {
     }
 
     try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const result: any = await createFromText.mutateAsync({
         text: textInput,
         language,
@@ -80,7 +55,7 @@ export default function TextToVideoPage() {
     <div className="max-w-3xl mx-auto space-y-8 pb-24">
       {/* Header */}
       <div className="text-center space-y-3 pb-4">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-blue-500/10 text-blue-500 mb-2 ring-1 ring-blue-500/20 shadow-[0_0_30px_rgba(59,130,246,0.15)]">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] mb-2 ring-1 ring-[var(--color-bg-inverted)]/20 shadow-none">
           <Type size={32} />
         </div>
         <h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
@@ -102,123 +77,26 @@ export default function TextToVideoPage() {
             onChange={(e) => setTextInput(e.target.value)}
             placeholder="Örn: Evrenin başlangıcı ve kara deliklerin sırları hakkında detaylı ve sürükleyici bir anlatım..."
             rows={6}
-            className="w-full bg-[var(--color-bg-subtle)] border border-[var(--color-border-faint)] rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 resize-none transition-all placeholder:text-[var(--color-text-ghost)]"
+            className="w-full bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-bg-inverted)]/50 resize-none transition-all placeholder:text-[var(--color-text-ghost)]"
           />
         </div>
 
         {/* Configurations */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-[var(--color-border-faint)]">
+        <div className="space-y-8 pt-6 border-t border-[var(--color-border-faint)]">
           
-          {/* Style */}
-          <div className="space-y-3">
-            <label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
-              <Palette size={14} /> Video Stili
-            </label>
-            <div className="grid grid-cols-2 gap-2">
-              {videoStyles.slice(0, 4).map((s) => (
-                <button
-                  key={s.id}
-                  onClick={() => setStyle(s.id)}
-                  className={cn(
-                    "flex items-center gap-2 p-3 rounded-xl border text-sm font-medium transition-all",
-                    style === s.id
-                      ? "bg-blue-500/10 border-blue-500/30 text-blue-400"
-                      : "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
-                  )}
-                >
-                  <span>{s.emoji}</span>
-                  <span className="truncate">{s.label}</span>
-                </button>
-              ))}
-            </div>
-            {/* Cinematic Reference */}
-            {style === "CINEMATIC" && (
-              <div className="mt-3">
-                <input
-                  type="text"
-                  value={cinematicReference}
-                  onChange={(e) => setCinematicReference(e.target.value)}
-                  placeholder="Yönetmen/Film stili (Opsiyonel)"
-                  className="w-full bg-black/20 border border-[var(--color-border-faint)] rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-blue-500/50"
-                />
-              </div>
-            )}
-          </div>
+          <LanguageSelector value={language} onChange={setLanguage} />
 
-          {/* Aspect Ratio */}
-          <div className="space-y-3">
-            <label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
-              <Monitor size={14} /> Format
-            </label>
-            <div className="grid grid-cols-3 gap-2">
-              {aspectRatios.map((ar) => {
-                const Icon = ar.icon;
-                return (
-                  <button
-                    key={ar.id}
-                    onClick={() => setAspectRatio(ar.id)}
-                    className={cn(
-                      "flex flex-col items-center gap-2 p-3 rounded-xl border transition-all",
-                      aspectRatio === ar.id
-                        ? "bg-blue-500/10 border-blue-500/30 text-blue-400"
-                        : "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
-                    )}
-                  >
-                    <Icon size={18} />
-                    <div className="text-center">
-                      <div className="text-xs font-bold">{ar.label}</div>
-                      <div className="text-[9px] opacity-70 truncate">{ar.desc}</div>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
+          <StyleSelector 
+            value={style} 
+            onChange={setStyle} 
+            cinematicReference={cinematicReference} 
+            onCinematicReferenceChange={setCinematicReference} 
+          />
 
-          {/* Duration */}
-          <div className="space-y-3">
-            <label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
-              <Clock size={14} /> Süre
-            </label>
-            <div className="flex items-center gap-4 bg-[var(--color-bg-subtle)] p-3 rounded-xl">
-              <input
-                type="range"
-                min="15"
-                max="180"
-                step="15"
-                value={duration}
-                onChange={(e) => setDuration(Number(e.target.value))}
-                className="flex-1 accent-blue-500"
-              />
-              <span className="text-sm font-mono font-medium text-blue-400 w-12 text-right">
-                {duration}s
-              </span>
-            </div>
-          </div>
+          <DurationSelector value={duration} onChange={setDuration} />
+
+          <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
 
-          {/* Language */}
-          <div className="space-y-3">
-            <label className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-ghost)] flex items-center gap-2">
-              <span className="text-[14px]">🗣</span> Seslendirme Dili
-            </label>
-            <div className="grid grid-cols-2 gap-2">
-              {languages.map((lang) => (
-                <button
-                  key={lang.code}
-                  onClick={() => setLanguage(lang.code)}
-                  className={cn(
-                    "flex items-center gap-2 p-2.5 rounded-xl border text-sm font-medium transition-all",
-                    language === lang.code
-                      ? "bg-blue-500/10 border-blue-500/30 text-blue-400"
-                      : "bg-[var(--color-bg-subtle)] border-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)]"
-                  )}
-                >
-                  <span className="text-lg leading-none">{lang.flag}</span>
-                  <span>{lang.label}</span>
-                </button>
-              ))}
-            </div>
-          </div>
         </div>
       </div>
 
@@ -228,8 +106,8 @@ export default function TextToVideoPage() {
           onClick={handleGenerate}
           disabled={createFromText.isPending || !textInput.trim()}
           className={cn(
-            "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-white shadow-[0_0_40px_rgba(59,130,246,0.3)] transition-all",
-            "bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 hover:scale-[1.02]",
+            "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[var(--color-text-inverted)] shadow-none transition-all",
+            "bg-[var(--color-bg-inverted)] hover:scale-[1.02]",
             "disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
           )}
         >
diff --git a/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx b/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx
index 5700440..02c9797 100644
--- a/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx
@@ -8,11 +8,6 @@ import {
   Link2,
   Loader2,
   ArrowRight,
-  Clock,
-  Palette,
-  Monitor,
-  Smartphone,
-  Square,
   Sparkles,
   Wand2,
   MessageSquare,
@@ -24,31 +19,16 @@ import {
 import { cn } from "@/lib/utils";
 import { useTweetPreview, useCreateFromTweet } from "@/hooks/use-api";
 import { useToast } from "@/components/ui/toast";
-
-const videoStyles = [
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
-  { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
-  { id: "NEWS", label: "Haber", emoji: "📰" },
-];
-
-const aspectRatios = [
-  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
-  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
-  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
-];
-
-const languages = [
-  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
-  { code: "en", label: "English", flag: "🇺🇸" },
-  { code: "de", label: "Deutsch", flag: "🇩🇪" },
-  { code: "es", label: "Español", flag: "🇪🇸" },
-];
+import {
+  LanguageSelector,
+  StyleSelector,
+  DurationSelector,
+  AspectRatioSelector,
+} from "@/components/projects/ProjectConfiguration";
 
 export default function XToVideoPage() {
   const router = useRouter();
-  const toast = useToast();
+  const { toast } = useToast();
   const tweetPreview = useTweetPreview();
   const createFromTweet = useCreateFromTweet();
 
@@ -66,15 +46,15 @@ export default function XToVideoPage() {
 
   const handlePreview = async () => {
     if (!isValidUrl) {
-      toast.error("Geçerli bir X/Twitter URL'si girin (https://x.com/...)");
+      toast("error", "Geçerli bir X/Twitter URL'si girin (https://x.com/...)");
       return;
     }
     try {
       const result = await tweetPreview.mutateAsync(tweetUrl);
       setPreviewData(result);
-      toast.success("Tweet başarıyla yüklendi!");
+      toast("success", "Tweet başarıyla yüklendi!");
     } catch {
-      toast.error("Tweet yüklenemedi. URL'yi kontrol edin.");
+      toast("error", "Tweet yüklenemedi. URL'yi kontrol edin.");
     }
   };
 
@@ -89,7 +69,7 @@ export default function XToVideoPage() {
         cinematicReference: cinematicReference ? cinematicReference : undefined,
         targetDuration: duration,
       });
-      toast.success("Tweet → Video projesi oluşturuldu!");
+      toast("success", "Tweet → Video projesi oluşturuldu!");
       const projectId = result?.id;
       if (projectId) {
         router.push(`/dashboard/projects/${projectId}`);
@@ -97,22 +77,21 @@ export default function XToVideoPage() {
         router.push("/dashboard/projects");
       }
     } catch {
-      toast.error("Proje oluşturulurken bir hata oluştu.");
+      toast("error", "Proje oluşturulurken bir hata oluştu.");
     }
   };
 
   return (
-    <div className="max-w-3xl mx-auto space-y-6">
+    <div className="max-w-3xl mx-auto space-y-6 pb-24">
       {/* Header */}
-      <div>
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-300 text-xs font-medium mb-3">
-          <AtSign size={12} />
-          X → Video
+      <div className="text-center space-y-3 pb-4">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] mb-2 ring-1 ring-[var(--color-bg-inverted)]/20 shadow-none">
+          <AtSign size={32} />
         </div>
-        <h1 className="font-[family-name:var(--font-display)] text-2xl md:text-3xl font-bold">
+        <h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
           Tweet'ten Video Oluştur
         </h1>
-        <p className="text-sm text-[var(--color-text-muted)] mt-1">
+        <p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
           X/Twitter yazılarını AI ile kısa videolara dönüştürün
         </p>
       </div>
@@ -132,7 +111,7 @@ export default function XToVideoPage() {
               setPreviewData(null);
             }}
             placeholder="https://x.com/username/status/123456..."
-            className="flex-1 px-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-all"
+            className="flex-1 px-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-[var(--color-bg-inverted)]/40 focus:ring-1 focus:ring-[var(--color-bg-inverted)]/20 transition-all"
           />
           <button
             onClick={handlePreview}
@@ -235,7 +214,7 @@ export default function XToVideoPage() {
                   {previewData.tweet?.metrics?.views ?? 0}
                 </span>
                 {previewData.tweet?.isThread && (
-                  <span className="flex items-center gap-1 text-violet-400">
+                  <span className="flex items-center gap-1 text-[var(--color-bg-inverted)]">
                     <MessageSquare size={12} />
                     {previewData.tweet?.threadTweets?.length ?? 0} tweet thread
                   </span>
@@ -245,7 +224,7 @@ export default function XToVideoPage() {
 
             {/* Suggested info */}
             {previewData.suggestedTitle && (
-              <div className="flex items-center gap-1.5 text-[11px] text-cyan-400">
+              <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-secondary)]">
                 <Sparkles size={12} />
                 Önerilen başlık: {previewData.suggestedTitle} · Tahmini süre: {previewData.estimatedDuration}sn · Viral skoru: {previewData.viralScore}/100
               </div>
@@ -253,7 +232,7 @@ export default function XToVideoPage() {
 
             {/* Images tag */}
             {(previewData.tweet?.media?.filter((m: any) => m.type === 'photo')?.length > 0) && (
-              <div className="flex items-center gap-1.5 text-[11px] text-cyan-400">
+              <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-secondary)]">
                 <ImageIcon size={12} />
                 {previewData.tweet.media.filter((m: any) => m.type === 'photo').length} görsel referans olarak kullanılacak + AI görsel üretilecek
               </div>
@@ -270,147 +249,46 @@ export default function XToVideoPage() {
             animate={{ opacity: 1, y: 0 }}
             className="space-y-6"
           >
-            {/* Language */}
-            <div className="card p-5 space-y-3">
-              <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-                Video Dili
-              </label>
-              <div className="flex gap-2">
-                {languages.map((l) => (
-                  <button
-                    key={l.code}
-                    onClick={() => setLanguage(l.code)}
-                    className={cn(
-                      "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                      language === l.code
-                        ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                    )}
-                  >
-                    <span>{l.flag}</span>
-                    {l.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Style */}
-            <div className="card p-5 space-y-3">
-              <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-                <Palette size={14} className="inline mr-1.5 text-violet-400" />
-                Video Stili
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {videoStyles.map((s) => (
-                  <button
-                    key={s.id}
-                    onClick={() => setStyle(s.id)}
-                    className={cn(
-                      "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                      style === s.id
-                        ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                    )}
-                  >
-                    <span>{s.emoji}</span>
-                    {s.label}
-                  </button>
-                ))}
-              </div>
-              {style === "CINEMATIC" && (
-                <div className="pt-3 mt-3 border-t border-[var(--color-border-faint)]">
-                  <label className="text-xs font-medium text-[var(--color-text-secondary)] mb-2 block">
-                    Özel Sinematik Referans (Opsiyonel)
-                  </label>
-                  <input
-                    type="text"
-                    placeholder="Örn: Wes Anderson, Matrix, Neon Cyberpunk..."
-                    value={cinematicReference}
-                    onChange={(e) => setCinematicReference(e.target.value)}
-                    className="w-full bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] rounded-xl py-2 px-3 text-sm focus:border-violet-500/50 outline-none transition-colors"
-                  />
-                </div>
-              )}
-            </div>
-
-            {/* Duration + Aspect Ratio */}
-            <div className="card p-5 space-y-4">
-              <div>
-                <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                  <Clock size={14} className="inline mr-1.5 text-cyan-400" />
-                  Hedef Süre: <span className="text-violet-400">{duration}s</span>
-                </label>
-                <input
-                  type="range"
-                  min={15}
-                  max={120}
-                  step={5}
-                  value={duration}
-                  onChange={(e) => setDuration(Number(e.target.value))}
-                  className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
-                    [&::-webkit-slider-thumb]:appearance-none
-                    [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
-                    [&::-webkit-slider-thumb]:rounded-full
-                    [&::-webkit-slider-thumb]:bg-violet-500
-                    [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(139,92,246,0.4)]
-                    [&::-webkit-slider-thumb]:cursor-grab"
-                />
-              </div>
-
-              <div>
-                <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                  En-Boy Oranı
-                </label>
-                <div className="flex gap-2">
-                  {aspectRatios.map((ar) => {
-                    const Icon = ar.icon;
-                    return (
-                      <button
-                        key={ar.id}
-                        onClick={() => setAspectRatio(ar.id)}
-                        className={cn(
-                          "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
-                          aspectRatio === ar.id
-                            ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
-                            : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                        )}
-                      >
-                        <Icon size={20} />
-                        <span className="font-semibold">{ar.label}</span>
-                        <span className="text-[10px] text-[var(--color-text-ghost)]">
-                          {ar.desc}
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
+            <div className="card p-6 space-y-8">
+              <LanguageSelector value={language} onChange={setLanguage} />
+              
+              <StyleSelector 
+                value={style} 
+                onChange={setStyle} 
+                cinematicReference={cinematicReference} 
+                onCinematicReferenceChange={setCinematicReference} 
+              />
+              
+              <DurationSelector value={duration} onChange={setDuration} />
+              
+              <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
             </div>
 
             {/* Generate Button */}
-            <button
-              onClick={handleGenerate}
-              disabled={createFromTweet.isPending}
-              className={cn(
-                "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
-                createFromTweet.isPending
-                  ? "bg-violet-500/20 text-violet-300 cursor-wait"
-                  : "btn-primary text-lg",
-              )}
-            >
-              {createFromTweet.isPending ? (
-                <>
-                  <Loader2 size={20} className="animate-spin" />
-                  <span>Video Projesi Oluşturuluyor...</span>
-                </>
-              ) : (
-                <>
-                  <Wand2 size={20} />
-                  <span>Tweet → Video Oluştur</span>
-                  <ArrowRight size={16} />
-                </>
-              )}
-            </button>
+            <div className="flex justify-end">
+              <button
+                onClick={handleGenerate}
+                disabled={createFromTweet.isPending}
+                className={cn(
+                  "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[var(--color-text-inverted)] shadow-none transition-all",
+                  "bg-[var(--color-bg-inverted)] hover:scale-[1.02]",
+                  "disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
+                )}
+              >
+                {createFromTweet.isPending ? (
+                  <>
+                    <Loader2 size={20} className="animate-spin" />
+                    <span>Video Projesi Oluşturuluyor...</span>
+                  </>
+                ) : (
+                  <>
+                    <Wand2 size={20} className="group-hover:rotate-12 transition-transform" />
+                    <span>Tweet → Video Oluştur</span>
+                    <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
+                  </>
+                )}
+              </button>
+            </div>
 
             <p className="text-center text-[11px] text-[var(--color-text-ghost)]">
               Bu işlem 1 kredi kullanır • AI senaryo + görsel üretim dahil
@@ -421,9 +299,9 @@ export default function XToVideoPage() {
 
       {/* Info Box */}
       {!previewData && (
-        <div className="card p-5 bg-gradient-to-br from-violet-500/5 to-cyan-500/5">
+        <div className="card p-5 bg-[var(--color-bg-surface)]">
           <div className="flex items-start gap-3">
-            <Sparkles size={20} className="text-violet-400 shrink-0 mt-0.5" />
+            <Sparkles size={20} className="text-[var(--color-text-secondary)] shrink-0 mt-0.5" />
             <div className="space-y-2">
               <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
                 Nasıl Çalışır?
diff --git a/src/app/[locale]/(dashboard)/dashboard/youtube-to-video/page.tsx b/src/app/[locale]/(dashboard)/dashboard/youtube-to-video/page.tsx
index 25f1cf0..320d20e 100644
--- a/src/app/[locale]/(dashboard)/dashboard/youtube-to-video/page.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/youtube-to-video/page.tsx
@@ -2,64 +2,47 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  Link2,
-  Loader2,
-  ArrowRight,
-  Clock,
-  Palette,
-  Monitor,
-  Smartphone,
-  Square,
-  Sparkles,
-  Wand2,
-} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useCreateFromYoutube } from "@/hooks/use-api";
 import { useToast } from "@/components/ui/toast";
-
-const videoStyles = [
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
-  { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
-  { id: "NEWS", label: "Haber", emoji: "📰" },
-];
-
-const aspectRatios = [
-  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
-  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
-  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
-];
-
-const languages = [
-  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
-  { code: "en", label: "English", flag: "🇺🇸" },
-  { code: "de", label: "Deutsch", flag: "🇩🇪" },
-  { code: "es", label: "Español", flag: "🇪🇸" },
-];
+import {
+  PlaySquare,
+  Link2,
+  Loader2,
+  ArrowRight,
+  Sparkles,
+  Wand2,
+} from "lucide-react";
+import {
+  LanguageSelector,
+  StyleSelector,
+  DurationSelector,
+  AspectRatioSelector,
+} from "@/components/projects/ProjectConfiguration";
 
 export default function YoutubeToVideoPage() {
   const router = useRouter();
   const { toast } = useToast();
-
   const createFromYoutube = useCreateFromYoutube();
 
   const [youtubeUrl, setYoutubeUrl] = useState("");
+  
   const [style, setStyle] = useState("CINEMATIC");
   const [cinematicReference, setCinematicReference] = useState("");
   const [duration, setDuration] = useState(60);
   const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
   const [language, setLanguage] = useState("tr");
 
+  const isValidUrl = /https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/.+/.test(youtubeUrl);
+
   const handleGenerate = async () => {
-    if (!youtubeUrl.includes("youtube.com") && !youtubeUrl.includes("youtu.be")) {
-      toast("error", "Lütfen geçerli bir YouTube tam linki girin.");
+    if (!isValidUrl) {
+      toast("error", "Lütfen geçerli bir YouTube URL'si girin.");
       return;
     }
 
     try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const result: any = await createFromYoutube.mutateAsync({
         youtubeUrl,
         language,
@@ -71,8 +54,8 @@ export default function YoutubeToVideoPage() {
 
       toast("success", "YouTube → Video projesi oluşturuldu!");
       router.push(`/dashboard/projects/${result.id}`);
-    } catch (error) {
-      toast("error", "Proje oluşturulurken hata oluştu.");
+    } catch {
+      toast("error", "Proje oluşturulurken bir hata oluştu.");
     }
   };
 
@@ -80,186 +63,95 @@ export default function YoutubeToVideoPage() {
     <div className="max-w-3xl mx-auto space-y-8 pb-24">
       {/* Header */}
       <div className="text-center space-y-3 pb-4">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-red-500/10 text-red-500 mb-2 ring-1 ring-red-500/20 shadow-[0_0_30px_rgba(239,68,68,0.15)]">
-          <Link2 size={32} />
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] mb-2 ring-1 ring-[var(--color-bg-inverted)]/20 shadow-none">
+          <PlaySquare size={32} />
         </div>
         <h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
-          YouTube'dan Video Üret
+          YouTube'dan Video Oluştur
         </h1>
         <p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
-          YouTube linkini yapıştırın, yapay zeka ana içeriği çıkartıp viral bir Reels/Shorts yaratsın.
+          YouTube videolarını veya Shorts içeriklerini kendi tarzınızda yeniden üretin
         </p>
       </div>
 
-      {/* Input */}
-      <div className="card p-6 md:p-8 space-y-4">
+      {/* Main Form */}
+      <div className="card p-6 md:p-8 space-y-6">
+        
+        {/* Input */}
         <div>
-          <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
-            YouTube URL
+          <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block flex items-center gap-1.5">
+            <Link2 size={14} className="text-red-500" />
+            YouTube Video URL
           </label>
-          <div className="relative">
-            <input
-              type="text"
-              placeholder="https://www.youtube.com/watch?v=..."
-              value={youtubeUrl}
-              onChange={(e) => setYoutubeUrl(e.target.value)}
-              className="w-full bg-[var(--color-bg-surface)] border-2 border-[var(--color-border-faint)] rounded-2xl py-4 pl-12 pr-4 text-sm 
-                focus:border-red-500/50 focus:ring-4 focus:ring-red-500/10 transition-all outline-none"
-            />
-            <Link2
-              size={18}
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--color-text-ghost)]"
-            />
-          </div>
+          <input
+            type="url"
+            value={youtubeUrl}
+            onChange={(e) => setYoutubeUrl(e.target.value)}
+            placeholder="https://youtube.com/watch?v=... veya https://youtu.be/..."
+            className="w-full bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-bg-inverted)]/50 transition-all placeholder:text-[var(--color-text-ghost)]"
+          />
+        </div>
+
+        {/* Configurations */}
+        <div className="space-y-8 pt-6 border-t border-[var(--color-border-faint)]">
+          <LanguageSelector value={language} onChange={setLanguage} />
+          
+          <StyleSelector 
+            value={style} 
+            onChange={setStyle} 
+            cinematicReference={cinematicReference} 
+            onCinematicReferenceChange={setCinematicReference} 
+          />
+          
+          <DurationSelector value={duration} onChange={setDuration} />
+          
+          <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />
         </div>
       </div>
 
-      {/* Video Settings */}
-      <div className="space-y-6">
-        <div className="card p-5 space-y-3">
-          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-            Video Dili
-          </label>
-          <div className="flex gap-2">
-            {languages.map((l) => (
-              <button
-                key={l.code}
-                onClick={() => setLanguage(l.code)}
-                className={cn(
-                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                  language === l.code
-                    ? "bg-red-500/12 border border-red-500/30 text-red-400"
-                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                )}
-              >
-                <span>{l.flag}</span>
-                {l.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="card p-5 space-y-3">
-          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
-            <Palette size={14} className="inline mr-1.5 text-red-400" />
-            Video Stili
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {videoStyles.map((s) => (
-              <button
-                key={s.id}
-                onClick={() => setStyle(s.id)}
-                className={cn(
-                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
-                  style === s.id
-                    ? "bg-red-500/12 border border-red-500/30 text-red-400"
-                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                )}
-              >
-                <span>{s.emoji}</span>
-                {s.label}
-              </button>
-            ))}
-          </div>
-          {style === "CINEMATIC" && (
-            <div className="pt-3 mt-3 border-t border-[var(--color-border-faint)]">
-              <label className="text-xs font-medium text-[var(--color-text-secondary)] mb-2 block">
-                Özel Sinematik Referans (Opsiyonel)
-              </label>
-              <input
-                type="text"
-                placeholder="Örn: Wes Anderson, Matrix, Neon Cyberpunk..."
-                value={cinematicReference}
-                onChange={(e) => setCinematicReference(e.target.value)}
-                className="w-full bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] rounded-xl py-2 px-3 text-sm focus:border-red-500/50 outline-none transition-colors"
-              />
-            </div>
-          )}
-        </div>
-
-        <div className="card p-5 space-y-4">
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-              <Clock size={14} className="inline mr-1.5 text-cyan-400" />
-              Hedef Süre: <span className="text-red-400">{duration}s</span>
-            </label>
-            <input
-              type="range"
-              min={15}
-              max={120}
-              step={5}
-              value={duration}
-              onChange={(e) => setDuration(Number(e.target.value))}
-              className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
-                [&::-webkit-slider-thumb]:appearance-none
-                [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
-                [&::-webkit-slider-thumb]:rounded-full
-                [&::-webkit-slider-thumb]:bg-red-500
-                [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(239,68,68,0.4)]
-                [&::-webkit-slider-thumb]:cursor-grab"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-              En-Boy Oranı
-            </label>
-            <div className="flex gap-2">
-              {aspectRatios.map((ar) => {
-                const Icon = ar.icon;
-                return (
-                  <button
-                    key={ar.id}
-                    onClick={() => setAspectRatio(ar.id)}
-                    className={cn(
-                      "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
-                      aspectRatio === ar.id
-                        ? "bg-red-500/12 border border-red-500/30 text-red-400"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
-                    )}
-                  >
-                    <Icon size={20} />
-                    <span className="font-semibold">{ar.label}</span>
-                    <span className="text-[10px] text-[var(--color-text-ghost)]">
-                      {ar.desc}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
+      {/* Action Button */}
+      <div className="flex justify-end">
         <button
           onClick={handleGenerate}
-          disabled={createFromYoutube.isPending || !youtubeUrl}
+          disabled={createFromYoutube.isPending || !isValidUrl}
           className={cn(
-            "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
-            createFromYoutube.isPending
-              ? "bg-red-500/20 text-red-400 cursor-wait"
-              : "bg-red-500 hover:bg-red-600 text-white shadow-lg shadow-red-500/20",
-            !youtubeUrl && "opacity-50 cursor-not-allowed"
+            "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[var(--color-text-inverted)] shadow-none transition-all",
+            "bg-[var(--color-bg-inverted)] hover:scale-[1.02]",
+            "disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
           )}
         >
           {createFromYoutube.isPending ? (
             <>
               <Loader2 size={20} className="animate-spin" />
-              <span>Video Projesi Oluşturuluyor... (Bu işlem uzun sürebilir)</span>
+              <span>Yapay Zeka Videoyu İşliyor...</span>
             </>
           ) : (
             <>
-              <Wand2 size={20} />
-              <span>YouTube → Video Oluştur</span>
-              <ArrowRight size={16} />
+              <Wand2 size={20} className="group-hover:rotate-12 transition-transform" />
+              <span>YouTube → Video Üret</span>
+              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
             </>
           )}
         </button>
-
-        <p className="text-center text-[11px] text-[var(--color-text-ghost)]">
-          Bu işlem 1 kredi kullanır • AI senaryo + görsel üretim dahil
-        </p>
       </div>
 
+      {/* Info Box */}
+      <div className="card p-5 bg-[var(--color-bg-surface)]">
+        <div className="flex items-start gap-3">
+          <Sparkles size={20} className="text-[var(--color-text-secondary)] shrink-0 mt-0.5" />
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
+              Nasıl Çalışır?
+            </h3>
+            <ol className="text-xs text-[var(--color-text-muted)] space-y-1.5 list-decimal list-inside">
+              <li>Uzun bir YouTube videosu veya Shorts URL'si yapıştırın</li>
+              <li>Video otomatik olarak indirilir ve deşifre edilir (transkript)</li>
+              <li>Belirttiğiniz süreye ve tarza göre yepyeni bir senaryo çıkarılır</li>
+              <li>Orijinal video kullanılmaz, referans olarak alınıp yeni görseller + ses üretilir</li>
+            </ol>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/[locale]/global.css b/src/app/[locale]/global.css
index b3de782..3a3c312 100644
--- a/src/app/[locale]/global.css
+++ b/src/app/[locale]/global.css
@@ -2,65 +2,63 @@
 
 /* ================================================
    ContentGen AI — Design System
-   Aesthetic Direction: Cinematic Dark + Violet Neon
-   Frontend Design Skill: Bold, intentional, unforgettable
+   Aesthetic Direction: Premium Monochrome & High Contrast
+   Frontend Design Skill: Clean, spacious, highly legible
    ================================================ */
 
 @theme {
-  /* ── Color Palette ── */
+  /* ── Color Palette (Monochrome Focus) ── */
   --color-bg-void: #000000;
-  --color-bg-deep: #050509;
-  --color-bg-base: #0a0a12;
-  --color-bg-surface: #111120;
-  --color-bg-elevated: #1a1a2e;
-  --color-bg-subtle: #232340;
+  --color-bg-deep: #0a0a0a;
+  --color-bg-base: #111111;
+  --color-bg-surface: #1a1a1a;
+  --color-bg-elevated: #222222;
+  --color-bg-subtle: #2a2a2a;
 
-  --color-border-faint: #1e1e3a;
-  --color-border-default: #2a2a4a;
-  --color-border-strong: #3a3a5a;
+  --color-border-faint: rgba(255, 255, 255, 0.05);
+  --color-border-default: rgba(255, 255, 255, 0.1);
+  --color-border-strong: rgba(255, 255, 255, 0.2);
 
-  --color-text-primary: #f0f0ff;
-  --color-text-secondary: #a0a0c0;
-  --color-text-muted: #6a6a8a;
-  --color-text-ghost: #4a4a6a;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #a3a3a3;
+  --color-text-muted: #737373;
+  --color-text-ghost: #525252;
 
-  /* Brand */
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-glow: rgba(139, 92, 246, 0.15);
-
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-glow: rgba(6, 182, 212, 0.12);
-
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
+  /* Accent: Clean White/Gray (Replaces Neon) */
+  --color-accent-400: #e5e5e5;
+  --color-accent-500: #ffffff;
+  --color-accent-glow: rgba(255, 255, 255, 0.08);
 
+  /* Status Colors (Subtle versions) */
+  --color-emerald-400: #4ade80;
+  --color-emerald-500: #22c55e;
+  
   --color-amber-400: #fbbf24;
   --color-amber-500: #f59e0b;
-
+  
   --color-rose-400: #fb7185;
   --color-rose-500: #f43f5e;
 
-  /* ── Spacing ── */
-  --spacing-page: clamp(1rem, 4vw, 2.5rem);
+  --color-cyan-400: #38bdf8; /* Kept for processing, but subdued */
+  --color-cyan-500: #0ea5e9;
 
-  /* ── Radius ── */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.625rem;
-  --radius-lg: 0.875rem;
-  --radius-xl: 1.25rem;
+  /* ── Spacing (Increased for breathable UI) ── */
+  --spacing-page: clamp(1.5rem, 5vw, 3rem);
+
+  /* ── Radius (Sharper, more professional) ── */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
   --radius-2xl: 1.5rem;
   --radius-full: 9999px;
 
-  /* ── Shadows ── */
-  --shadow-glow-sm: 0 0 12px rgba(139, 92, 246, 0.08);
-  --shadow-glow-md: 0 0 24px rgba(139, 92, 246, 0.12);
-  --shadow-glow-lg: 0 0 48px rgba(139, 92, 246, 0.18);
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
-  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);
+  /* ── Shadows (Soft, realistic depth instead of glows) ── */
+  --shadow-glow-sm: 0 4px 14px rgba(0, 0, 0, 0.5);
+  --shadow-glow-md: 0 10px 30px rgba(0, 0, 0, 0.6);
+  --shadow-glow-lg: 0 20px 40px rgba(0, 0, 0, 0.8);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.8), 0 8px 16px rgba(0, 0, 0, 0.4);
+  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.6);
 
   /* ── Animations ── */
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -82,11 +80,14 @@ body {
   color: var(--color-text-primary);
   overflow-x: hidden;
   min-height: 100dvh;
+  /* Slightly larger base text */
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
 }
 
 /* ── Selection ── */
 ::selection {
-  background-color: rgba(139, 92, 246, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
   color: white;
 }
 
@@ -106,55 +107,18 @@ body {
   background: var(--color-border-strong);
 }
 
-/* ── Glass Effect ── */
+/* ── Glass Effect (Desaturated, High Blur) ── */
 .glass {
-  background: rgba(17, 17, 32, 0.6);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(10, 10, 10, 0.7);
+  backdrop-filter: blur(24px) saturate(100%);
+  -webkit-backdrop-filter: blur(24px) saturate(100%);
   border: 1px solid var(--color-border-faint);
 }
 
 .glass-subtle {
-  background: rgba(17, 17, 32, 0.35);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-/* ── Glow Effects ── */
-.glow-violet {
-  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15),
-              0 0 40px rgba(139, 92, 246, 0.08),
-              inset 0 1px 0 rgba(255, 255, 255, 0.04);
-}
-
-.glow-cyan {
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.15),
-              0 0 40px rgba(6, 182, 212, 0.08);
-}
-
-/* ── Gradient Borders ── */
-.gradient-border {
-  position: relative;
-}
-.gradient-border::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background: linear-gradient(135deg, var(--color-violet-500), var(--color-cyan-400));
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-
-/* ── Animated Gradient Background ── */
-.gradient-mesh {
-  background-image:
-    radial-gradient(ellipse at 20% 50%, var(--color-violet-glow) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 20%, var(--color-cyan-glow) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
+  background: rgba(10, 10, 10, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 /* ── Card Styles ── */
@@ -163,58 +127,48 @@ body {
   border: 1px solid var(--color-border-faint);
   border-radius: var(--radius-xl);
   transition: all var(--duration-normal) var(--ease-out-expo);
+  box-shadow: var(--shadow-card);
 }
 .card-surface:hover {
   border-color: var(--color-border-default);
   box-shadow: var(--shadow-glow-sm);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
-/* ── Badge Styles ── */
+/* ── Badge Styles (Minimalist) ── */
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.125rem 0.625rem;
+  padding: 0.25rem 0.75rem;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 600;
   border-radius: var(--radius-full);
-  letter-spacing: 0.02em;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
-.badge-violet {
-  background: rgba(139, 92, 246, 0.12);
-  color: var(--color-violet-400);
-  border: 1px solid rgba(139, 92, 246, 0.2);
-}
-.badge-cyan {
-  background: rgba(6, 182, 212, 0.12);
-  color: var(--color-cyan-400);
-  border: 1px solid rgba(6, 182, 212, 0.2);
+.badge-violet, .badge-cyan {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-primary);
+  border: 1px solid rgba(255, 255, 255, 0.15);
 }
 .badge-emerald {
-  background: rgba(16, 185, 129, 0.12);
+  background: rgba(74, 222, 128, 0.1);
   color: var(--color-emerald-400);
-  border: 1px solid rgba(16, 185, 129, 0.2);
+  border: 1px solid rgba(74, 222, 128, 0.2);
 }
 .badge-amber {
-  background: rgba(245, 158, 11, 0.12);
+  background: rgba(251, 191, 36, 0.1);
   color: var(--color-amber-400);
-  border: 1px solid rgba(245, 158, 11, 0.2);
+  border: 1px solid rgba(251, 191, 36, 0.2);
 }
 .badge-rose {
-  background: rgba(244, 63, 94, 0.12);
+  background: rgba(251, 113, 133, 0.1);
   color: var(--color-rose-400);
-  border: 1px solid rgba(244, 63, 94, 0.2);
+  border: 1px solid rgba(251, 113, 133, 0.2);
 }
 
 /* ── Button Styles ── */
 .btn-primary {
-  background: linear-gradient(135deg, var(--color-violet-600), var(--color-violet-500));
-  color: white;
-  font-weight: 600;
-  border-radius: var(--radius-lg);
-  padding: 0.625rem 1.25rem;
-  transition: all var(--duration-normal) var(--ease-out-expo);
-  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
 }
 .btn-primary:hover {
   box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
@@ -246,7 +200,7 @@ body {
   right: 0;
   z-index: 50;
   padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
-  background: rgba(5, 5, 9, 0.85);
+  background: rgba(10, 10, 10, 0.85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-top: 1px solid var(--color-border-faint);
@@ -262,7 +216,7 @@ body {
 .progress-bar-fill {
   height: 100%;
   border-radius: var(--radius-full);
-  background: linear-gradient(90deg, var(--color-violet-500), var(--color-cyan-400));
+  background: var(--color-text-primary);
   transition: width var(--duration-slow) var(--ease-out-expo);
 }
 
diff --git a/src/components/dashboard/dashboard-charts.tsx b/src/components/dashboard/dashboard-charts.tsx
index d9fc6cd..8a039ff 100644
--- a/src/components/dashboard/dashboard-charts.tsx
+++ b/src/components/dashboard/dashboard-charts.tsx
@@ -14,7 +14,7 @@ import {
 } from "recharts";
 import { useDashboardStats } from "@/hooks/use-api";
 
-const COLORS = ["#8b5cf6", "#06b6d4", "#f59e0b", "#ef4444", "#10b981"];
+const COLORS = ["#ffffff", "#a3a3a3", "#525252", "#262626"];
 
 function formatWeekData(stats: Record<string, unknown> | undefined) {
   if (!stats) {
@@ -78,7 +78,7 @@ export function DashboardCharts() {
         {[1, 2].map((i) => (
           <div
             key={i}
-            className="card p-5 h-[280px] animate-pulse bg-[var(--color-bg-surface)]"
+            className="card p-6 md:p-8 h-[300px] animate-pulse bg-[var(--color-bg-surface)] rounded-2xl border border-[var(--color-border-faint)]"
           />
         ))}
       </div>
@@ -88,42 +88,42 @@ export function DashboardCharts() {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
       {/* Haftalik Aktivite */}
-      <div className="card p-5">
-        <h3 className="text-sm font-semibold text-[var(--color-text-secondary)] mb-4">
+      <div className="card-surface p-6 md:p-8">
+        <h3 className="text-base font-semibold text-[var(--color-text-secondary)] mb-6">
           Haftalık Aktivite
         </h3>
-        <ResponsiveContainer width="100%" height={200}>
+        <ResponsiveContainer width="100%" height={220}>
           <AreaChart data={weekData}>
             <defs>
               <linearGradient id="colorProjects" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
-                <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
+                <stop offset="5%" stopColor="#ffffff" stopOpacity={0.2} />
+                <stop offset="95%" stopColor="#ffffff" stopOpacity={0} />
               </linearGradient>
               <linearGradient id="colorVideos" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#06b6d4" stopOpacity={0.3} />
-                <stop offset="95%" stopColor="#06b6d4" stopOpacity={0} />
+                <stop offset="5%" stopColor="#737373" stopOpacity={0.2} />
+                <stop offset="95%" stopColor="#737373" stopOpacity={0} />
               </linearGradient>
             </defs>
             <XAxis
               dataKey="name"
-              tick={{ fontSize: 11, fill: "var(--color-text-ghost)" }}
+              tick={{ fontSize: 12, fill: "var(--color-text-ghost)" }}
               axisLine={false}
               tickLine={false}
             />
             <YAxis hide />
             <Tooltip
               contentStyle={{
-                backgroundColor: "rgba(15,15,30,0.9)",
-                border: "1px solid rgba(139,92,246,0.2)",
+                backgroundColor: "rgba(10,10,10,0.95)",
+                border: "1px solid rgba(255,255,255,0.1)",
                 borderRadius: 12,
-                fontSize: 12,
+                fontSize: 13,
                 color: "#fff",
               }}
             />
             <Area
               type="monotone"
               dataKey="projects"
-              stroke="#8b5cf6"
+              stroke="#ffffff"
               strokeWidth={2}
               fill="url(#colorProjects)"
               name="Projeler"
@@ -131,7 +131,7 @@ export function DashboardCharts() {
             <Area
               type="monotone"
               dataKey="videos"
-              stroke="#06b6d4"
+              stroke="#737373"
               strokeWidth={2}
               fill="url(#colorVideos)"
               name="Videolar"
@@ -141,26 +141,27 @@ export function DashboardCharts() {
       </div>
 
       {/* Proje Durumu */}
-      <div className="card p-5">
-        <h3 className="text-sm font-semibold text-[var(--color-text-secondary)] mb-4">
+      <div className="card-surface p-6 md:p-8">
+        <h3 className="text-base font-semibold text-[var(--color-text-secondary)] mb-6">
           Proje Durumu
         </h3>
         {pieData.length === 0 ? (
-          <div className="flex items-center justify-center h-[200px] text-sm text-[var(--color-text-ghost)]">
+          <div className="flex items-center justify-center h-[220px] text-sm text-[var(--color-text-ghost)]">
             Henüz proje verisi yok
           </div>
         ) : (
-          <div className="flex items-center gap-4">
-            <ResponsiveContainer width="50%" height={200}>
+          <div className="flex items-center gap-6">
+            <ResponsiveContainer width="50%" height={220}>
               <PieChart>
                 <Pie
                   data={pieData}
                   cx="50%"
                   cy="50%"
-                  outerRadius={70}
-                  innerRadius={40}
+                  outerRadius={80}
+                  innerRadius={50}
                   dataKey="value"
-                  stroke="none"
+                  stroke="var(--color-bg-surface)"
+                  strokeWidth={2}
                 >
                   {pieData.map((_: unknown, index: number) => (
                     <Cell key={index} fill={COLORS[index % COLORS.length]} />
@@ -168,10 +169,10 @@ export function DashboardCharts() {
                 </Pie>
                 <Tooltip
                   contentStyle={{
-                    backgroundColor: "rgba(15,15,30,0.9)",
-                    border: "1px solid rgba(139,92,246,0.2)",
+                    backgroundColor: "rgba(10,10,10,0.95)",
+                    border: "1px solid rgba(255,255,255,0.1)",
                     borderRadius: 12,
-                    fontSize: 12,
+                    fontSize: 13,
                     color: "#fff",
                   }}
                 />
diff --git a/src/components/dashboard/recent-projects.tsx b/src/components/dashboard/recent-projects.tsx
index 83b8ae0..3b7e859 100644
--- a/src/components/dashboard/recent-projects.tsx
+++ b/src/components/dashboard/recent-projects.tsx
@@ -44,7 +44,7 @@ export function RecentProjects() {
         </h3>
         <Link
           href="/dashboard/projects"
-          className="text-xs text-violet-400 hover:text-violet-300 flex items-center gap-1 transition-colors"
+          className="text-xs text-neutral-400 hover:text-neutral-300 flex items-center gap-1 transition-colors"
         >
           Tümü <ExternalLink size={12} />
         </Link>
@@ -61,7 +61,7 @@ export function RecentProjects() {
           </p>
           <Link
             href="/dashboard/projects/new"
-            className="mt-3 text-xs text-violet-400 hover:text-violet-300"
+            className="mt-3 text-xs text-neutral-400 hover:text-neutral-300"
           >
             İlk projenizi oluşturun →
           </Link>
@@ -89,7 +89,7 @@ export function RecentProjects() {
                     <StIcon size={14} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-violet-300 transition-colors">
+                    <p className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-neutral-300 transition-colors">
                       {project.title}
                     </p>
                     <p className="text-[10px] text-[var(--color-text-ghost)]">
diff --git a/src/components/dashboard/tweet-import-card.tsx b/src/components/dashboard/tweet-import-card.tsx
index 00ac56b..125c402 100644
--- a/src/components/dashboard/tweet-import-card.tsx
+++ b/src/components/dashboard/tweet-import-card.tsx
@@ -100,8 +100,8 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
     <div className="card-surface overflow-hidden">
       {/* Header */}
       <div className="flex items-center gap-3 p-4 md:p-5 border-b border-[var(--color-border-faint)]">
-        <div className="w-9 h-9 rounded-xl bg-sky-500/15 flex items-center justify-center">
-          <XIcon size={18} className="text-sky-400" />
+        <div className="w-9 h-9 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] flex items-center justify-center">
+          <XIcon size={18} className="text-neutral-300" />
         </div>
         <div>
           <h3 className="font-[family-name:var(--font-display)] text-sm font-semibold">
@@ -128,7 +128,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
             }}
             onKeyDown={handleKeyDown}
             placeholder="https://x.com/user/status/123..."
-            className="w-full h-11 pl-10 pr-24 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:border-sky-500/50 focus:ring-1 focus:ring-sky-500/25 outline-none transition-all"
+            className="w-full h-11 pl-10 pr-24 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:border-neutral-500/50 focus:ring-1 focus:ring-neutral-500/25 outline-none transition-all"
           />
           <button
             onClick={preview ? handleCreate : handlePreview}
@@ -136,7 +136,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
             className={cn(
               "absolute right-1.5 top-1/2 -translate-y-1/2 h-8 px-3 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5",
               isUrlValid && !isLoadingPreview && !isCreatingProject
-                ? "bg-sky-500 text-white hover:bg-sky-400 shadow-sm"
+                ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] hover:bg-neutral-800 shadow-sm"
                 : "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] cursor-not-allowed"
             )}
           >
@@ -200,7 +200,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
                         className="w-full h-full object-cover"
                       />
                     ) : (
-                      <XIcon size={16} className="text-sky-400" />
+                      <XIcon size={16} className="text-neutral-400" />
                     )}
                   </div>
                   <div>
@@ -211,7 +211,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
                       {preview.tweet.author.verified && (
                         <CheckCircle2
                           size={13}
-                          className="text-sky-400 fill-sky-400"
+                          className="text-neutral-400 fill-neutral-400"
                         />
                       )}
                     </div>
@@ -304,18 +304,18 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
 
               {/* Info badges */}
               <div className="flex flex-wrap gap-1.5">
-                <span className="badge badge-cyan text-[10px]">
+                <span className="bg-neutral-500/10 text-neutral-400 border border-neutral-500/20 px-2 py-0.5 rounded-md text-[10px]">
                   {preview.contentType === "thread"
                     ? "Thread"
                     : preview.contentType === "quote_tweet"
                       ? "Alıntı"
                       : "Tweet"}
                 </span>
-                <span className="badge badge-violet text-[10px]">
+                <span className="bg-neutral-500/10 text-neutral-400 border border-neutral-500/20 px-2 py-0.5 rounded-md text-[10px]">
                   ~{preview.estimatedDuration}s video
                 </span>
                 {preview.tweet.media.length > 0 && (
-                  <span className="badge badge-amber text-[10px]">
+                  <span className="bg-neutral-500/10 text-neutral-400 border border-neutral-500/20 px-2 py-0.5 rounded-md text-[10px]">
                     {preview.tweet.media.length} medya
                   </span>
                 )}
@@ -327,7 +327,7 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
                 value={customTitle}
                 onChange={(e) => setCustomTitle(e.target.value)}
                 placeholder={preview.suggestedTitle}
-                className="w-full h-10 px-3 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)]/50 focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/25 outline-none transition-all"
+                className="w-full h-10 px-3 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)]/50 focus:border-neutral-500/50 focus:ring-1 focus:ring-neutral-500/25 outline-none transition-all"
               />
 
               {/* Create Button */}
@@ -337,8 +337,8 @@ export function TweetImportCard({ onProjectCreated }: TweetImportCardProps) {
                 className={cn(
                   "w-full h-11 rounded-xl text-sm font-semibold shadow-sm transition-all flex items-center justify-center gap-2",
                   isCreatingProject
-                    ? "bg-violet-600/50 text-violet-200 cursor-not-allowed"
-                    : "bg-gradient-to-r from-violet-600 to-purple-600 text-white hover:from-violet-500 hover:to-purple-500 hover:shadow-lg hover:shadow-violet-500/25 active:scale-[0.98]"
+                    ? "bg-[var(--color-bg-surface)] text-[var(--color-text-ghost)] cursor-not-allowed"
+                    : "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] hover:bg-neutral-800 active:scale-[0.98]"
                 )}
               >
                 {isCreatingProject ? (
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index dc598a9..7fe00dc 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -41,23 +41,23 @@ export function MobileNav() {
               key={item.href}
               href={item.href}
               className={cn(
-                "relative flex flex-col items-center gap-0.5 py-1.5 px-3 rounded-xl min-w-[4rem] transition-colors",
+                "relative flex flex-col items-center gap-1 py-2 px-3 rounded-xl min-w-[4.5rem] transition-colors",
                 isActive
-                  ? "text-violet-400"
-                  : "text-[var(--color-text-muted)] active:text-[var(--color-text-secondary)]"
+                  ? "text-white"
+                  : "text-[var(--color-text-muted)] active:text-[var(--color-text-primary)]"
               )}
             >
               <div className="relative">
-                <Icon size={22} strokeWidth={isActive ? 2.2 : 1.8} />
+                <Icon size={24} strokeWidth={isActive ? 2.5 : 1.8} />
                 {isActive && (
                   <motion.div
                     layoutId="nav-indicator"
-                    className="absolute -inset-2 rounded-xl bg-violet-500/10"
+                    className="absolute -inset-2 rounded-xl bg-white/10"
                     transition={{ type: "spring", bounce: 0.2, duration: 0.5 }}
                   />
                 )}
               </div>
-              <span className="text-[10px] font-medium tracking-wide">
+              <span className="text-xs font-semibold tracking-wide mt-1">
                 {item.label}
               </span>
             </Link>
@@ -80,12 +80,12 @@ function CreditCard() {
   const pct = isAdmin ? 100 : (total > 0 ? Math.round((remaining / total) * 100) : 0);
 
   return (
-    <div className="mx-3 mb-4 p-4 rounded-xl bg-gradient-to-br from-violet-500/8 to-cyan-400/5 border border-[var(--color-border-faint)]">
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-xs text-[var(--color-text-muted)]">Kalan Kredi</span>
-        <span className="badge badge-violet">{planName}</span>
+    <div className="mx-4 mb-6 p-5 rounded-2xl bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] shadow-sm">
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm font-medium text-[var(--color-text-muted)]">Kalan Kredi</span>
+        <span className="badge bg-white/10 text-white border border-white/20">{planName}</span>
       </div>
-      <div className="text-2xl font-bold font-[family-name:var(--font-display)] text-[var(--color-text-primary)]">
+      <div className="text-3xl font-bold font-[family-name:var(--font-display)] text-[var(--color-text-primary)]">
         {isLoading ? "..." : isAdmin ? "∞" : remaining}
       </div>
       <div className="progress-bar mt-2">
@@ -94,7 +94,7 @@ function CreditCard() {
           style={{ width: `${pct}%` }}
         />
       </div>
-      <p className="text-[10px] text-[var(--color-text-ghost)] mt-1.5">
+      <p className="text-xs text-[var(--color-text-ghost)] mt-2">
         {isAdmin ? "Sınırsız admin erişimi" : `${total} kredilik planınızın ${remaining}'${remaining === 1 ? "i" : "si"} kaldı`}
       </p>
     </div>
@@ -108,7 +108,7 @@ export function DesktopSidebar() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const user = (data as any)?.data ?? data;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const roles: string[] = (user?.roles ?? []).map((r: any) => r?.role?.name ?? r?.name ?? "");
+  const roles: string[] = (user?.roles ?? []).map((r: any) => typeof r === "string" ? r : (r?.role?.name ?? r?.name ?? ""));
   const isAdmin = roles.includes("admin") || roles.includes("superadmin");
 
   const handleLogout = () => {
@@ -116,24 +116,24 @@ export function DesktopSidebar() {
   };
 
   return (
-    <aside className="hidden md:flex md:w-64 lg:w-72 flex-col h-screen sticky top-0 border-r border-[var(--color-border-faint)] bg-[var(--color-bg-deep)]">
+    <aside className="hidden md:flex md:w-72 lg:w-80 flex-col h-screen sticky top-0 border-r border-[var(--color-border-faint)] bg-[var(--color-bg-deep)]">
       {/* Logo */}
-      <div className="flex items-center gap-3 px-6 py-5 border-b border-[var(--color-border-faint)]">
-        <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500 to-cyan-400 flex items-center justify-center shadow-lg">
-          <Sparkles size={18} className="text-white" />
+      <div className="flex items-center gap-4 px-8 py-6 border-b border-[var(--color-border-faint)]">
+        <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-md">
+          <Sparkles size={20} className="text-black" />
         </div>
         <div>
-          <h1 className="font-[family-name:var(--font-display)] text-lg font-bold tracking-tight text-[var(--color-text-primary)]">
+          <h1 className="font-[family-name:var(--font-display)] text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
             ContentGen
           </h1>
-          <p className="text-[10px] text-[var(--color-text-muted)] uppercase tracking-widest">
+          <p className="text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-[0.2em]">
             AI Studio
           </p>
         </div>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 px-3 py-4 space-y-1">
+      <nav className="flex-1 px-4 py-6 space-y-1.5">
         {navItems.map((item) => {
           const isActive =
             localePath === item.href ||
@@ -145,20 +145,20 @@ export function DesktopSidebar() {
               key={item.href}
               href={item.href}
               className={cn(
-                "relative flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200",
+                "relative flex items-center gap-4 px-4 py-3 rounded-xl text-base font-semibold transition-all duration-200",
                 isActive
-                  ? "text-white bg-violet-500/12 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
-                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-surface)]"
+                  ? "text-white bg-white/5"
+                  : "text-[var(--color-text-muted)] hover:text-white hover:bg-[var(--color-bg-surface)]"
               )}
             >
               {isActive && (
                 <motion.div
                   layoutId="sidebar-active"
-                  className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-6 rounded-r-full bg-gradient-to-b from-violet-400 to-violet-600"
+                  className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 rounded-r-full bg-white"
                   transition={{ type: "spring", bounce: 0.2, duration: 0.5 }}
                 />
               )}
-              <Icon size={18} strokeWidth={isActive ? 2.2 : 1.6} />
+              <Icon size={20} strokeWidth={isActive ? 2.5 : 2} />
               <span>{item.label}</span>
             </Link>
           );
@@ -170,29 +170,29 @@ export function DesktopSidebar() {
 
       {/* Admin Panel Linki (sadece admin) */}
       {isAdmin && (
-        <div className="px-3 pb-3">
+        <div className="px-4 pb-4">
           <Link
             href={adminNavItem.href}
             className={cn(
-              "relative flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200",
+              "relative flex items-center gap-4 px-4 py-3 rounded-xl text-base font-semibold transition-all duration-200",
               localePath.startsWith("/dashboard/admin")
-                ? "text-rose-300 bg-rose-500/10"
-                : "text-[var(--color-text-muted)] hover:text-rose-300 hover:bg-rose-500/8"
+                ? "text-white bg-white/10"
+                : "text-[var(--color-text-ghost)] hover:text-white hover:bg-white/5"
             )}
           >
-            <ShieldCheck size={18} strokeWidth={1.8} />
+            <ShieldCheck size={20} strokeWidth={2} />
             <span>{adminNavItem.label}</span>
           </Link>
         </div>
       )}
 
       {/* Çıkış Butonu */}
-      <div className="px-3 pb-4">
+      <div className="px-4 pb-6">
         <button
           onClick={handleLogout}
-          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-[var(--color-text-muted)] hover:text-red-400 hover:bg-red-500/8 transition-all duration-200"
+          className="w-full flex items-center gap-4 px-4 py-3 rounded-xl text-base font-semibold text-[var(--color-text-ghost)] hover:text-white hover:bg-white/5 transition-all duration-200"
         >
-          <LogOut size={18} strokeWidth={1.6} />
+          <LogOut size={20} strokeWidth={2} />
           <span>Çıkış Yap</span>
         </button>
       </div>
@@ -208,7 +208,7 @@ function UserAvatar() {
 
   return (
     <button
-      className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-600 to-cyan-500 flex items-center justify-center text-white text-sm font-semibold shadow-md"
+      className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-black text-sm font-bold shadow-sm border border-white/20"
       aria-label="Profil"
     >
       {initial}
@@ -221,11 +221,11 @@ export function TopBar() {
     <header className="sticky top-0 z-40 glass">
       <div className="flex items-center justify-between px-4 md:px-6 h-14 md:h-16">
         {/* Mobil logo */}
-        <div className="flex items-center gap-2.5 md:hidden">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-cyan-400 flex items-center justify-center">
-            <Sparkles size={16} className="text-white" />
+        <div className="flex items-center gap-3 md:hidden">
+          <div className="w-8 h-8 rounded-lg bg-white flex items-center justify-center">
+            <Sparkles size={16} className="text-black" />
           </div>
-          <span className="font-[family-name:var(--font-display)] font-bold text-base">
+          <span className="font-[family-name:var(--font-display)] font-bold text-lg">
             ContentGen
           </span>
         </div>
diff --git a/src/components/project/render-progress.tsx b/src/components/project/render-progress.tsx
index 107daa7..ffbc9b5 100644
--- a/src/components/project/render-progress.tsx
+++ b/src/components/project/render-progress.tsx
@@ -7,11 +7,11 @@ import type { RenderProgressState } from '@/hooks/use-render-progress';
 const STAGE_ORDER = ['tts', 'image_generation', 'music_generation', 'compositing', 'encoding'];
 
 const STAGE_DETAILS: Record<string, { label: string; icon: string; color: string }> = {
-  tts: { label: 'Seslendirme', icon: '🔊', color: 'from-violet-500 to-violet-600' },
-  image_generation: { label: 'Görsel Üretim', icon: '🎨', color: 'from-cyan-500 to-cyan-600' },
-  music_generation: { label: 'Müzik Üretim', icon: '🎵', color: 'from-amber-500 to-amber-600' },
-  compositing: { label: 'Birleştirme', icon: '🎬', color: 'from-emerald-500 to-emerald-600' },
-  encoding: { label: 'Kodlama', icon: '📦', color: 'from-rose-500 to-rose-600' },
+  tts: { label: 'Seslendirme', icon: '🔊', color: 'from-neutral-500 to-neutral-600' },
+  image_generation: { label: 'Görsel Üretim', icon: '🎨', color: 'from-neutral-400 to-neutral-500' },
+  music_generation: { label: 'Müzik Üretim', icon: '🎵', color: 'from-neutral-600 to-neutral-700' },
+  compositing: { label: 'Birleştirme', icon: '🎬', color: 'from-neutral-500 to-neutral-600' },
+  encoding: { label: 'Kodlama', icon: '📦', color: 'from-neutral-400 to-neutral-500' },
 };
 
 interface RenderProgressProps {
@@ -62,7 +62,7 @@ export function RenderProgress({ renderState, projectStatus }: RenderProgressPro
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2.5">
           {status === 'rendering' && (
-            <Loader2 size={18} className="animate-spin text-violet-400" />
+            <Loader2 size={18} className="animate-spin text-neutral-400" />
           )}
           {status === 'completed' && (
             <CheckCircle2 size={18} className="text-emerald-400" />
@@ -100,7 +100,7 @@ export function RenderProgress({ renderState, projectStatus }: RenderProgressPro
         </div>
         <div className="h-2.5 w-full rounded-full bg-[var(--color-bg-deep)] overflow-hidden">
           <motion.div
-            className="h-full rounded-full bg-gradient-to-r from-violet-500 via-cyan-400 to-emerald-400"
+            className="h-full rounded-full bg-gradient-to-r from-neutral-500 via-neutral-400 to-neutral-300"
             initial={{ width: 0 }}
             animate={{ width: `${progress}%` }}
             transition={{ duration: 0.5, ease: 'easeOut' }}
@@ -123,9 +123,9 @@ export function RenderProgress({ renderState, projectStatus }: RenderProgressPro
                 key={s}
                 className={`flex flex-col items-center gap-1 py-2 px-1 rounded-lg transition-all ${
                   isCurrent
-                    ? 'bg-violet-500/10 border border-violet-500/20'
+                    ? 'bg-[var(--color-bg-elevated)] border border-neutral-500/20'
                     : isDone
-                    ? 'bg-emerald-500/5'
+                    ? 'bg-neutral-500/10'
                     : 'opacity-40'
                 }`}
               >
@@ -133,8 +133,8 @@ export function RenderProgress({ renderState, projectStatus }: RenderProgressPro
                 <span className="text-[9px] text-center text-[var(--color-text-ghost)] leading-tight">
                   {detail.label}
                 </span>
-                {isDone && <CheckCircle2 size={10} className="text-emerald-400" />}
-                {isCurrent && <Loader2 size={10} className="animate-spin text-violet-400" />}
+                {isDone && <CheckCircle2 size={10} className="text-neutral-300" />}
+                {isCurrent && <Loader2 size={10} className="animate-spin text-neutral-400" />}
               </div>
             );
           })}
diff --git a/src/components/project/scene-card.tsx b/src/components/project/scene-card.tsx
index 311ee43..01d5715 100644
--- a/src/components/project/scene-card.tsx
+++ b/src/components/project/scene-card.tsx
@@ -74,12 +74,12 @@ export function SceneCard({
       transition={{ delay: scene.order * 0.05, duration: 0.4 }}
       className="relative group"
     >
-      <div className="card-surface p-4 md:p-5 hover:border-violet-500/20 transition-all duration-300">
+      <div className="card-surface p-4 md:p-5 hover:border-neutral-500/20 transition-all duration-300">
         {/* Header */}
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2.5">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500/20 to-violet-600/10 flex items-center justify-center">
-              <span className="text-xs font-bold text-violet-400">{scene.order}</span>
+            <div className="w-8 h-8 rounded-lg bg-[var(--color-bg-elevated)] flex items-center justify-center border border-[var(--color-border-faint)]">
+              <span className="text-xs font-bold text-neutral-400">{scene.order}</span>
             </div>
             <div>
               <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
@@ -101,7 +101,7 @@ export function SceneCard({
             <div className="flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
               <button
                 onClick={() => setIsEditing(true)}
-                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-violet-400 hover:bg-violet-500/10 transition-colors"
+                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800 transition-colors"
                 title="Düzenle"
               >
                 <Pencil size={13} />
@@ -109,7 +109,7 @@ export function SceneCard({
               <button
                 onClick={() => onRegenerate?.(scene.id)}
                 disabled={!isEditable || isRendering || isRegenerating}
-                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                 title="AI ile yeniden üret"
               >
                 <RefreshCw size={13} className={isRegenerating ? 'animate-spin' : ''} />
@@ -136,7 +136,7 @@ export function SceneCard({
                   value={editNarration}
                   onChange={(e) => setEditNarration(e.target.value)}
                   rows={3}
-                  className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] resize-none focus:outline-none focus:ring-1 focus:ring-violet-500/40 transition-all"
+                  className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] resize-none focus:outline-none focus:ring-1 focus:ring-neutral-500/40 transition-all"
                 />
               </div>
 
@@ -149,7 +149,7 @@ export function SceneCard({
                   value={editVisual}
                   onChange={(e) => setEditVisual(e.target.value)}
                   rows={2}
-                  className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-secondary)] resize-none focus:outline-none focus:ring-1 focus:ring-cyan-500/40 transition-all"
+                  className="w-full px-3 py-2 rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-secondary)] resize-none focus:outline-none focus:ring-1 focus:ring-neutral-500/40 transition-all"
                 />
               </div>
 
@@ -157,7 +157,7 @@ export function SceneCard({
               <div className="flex items-center gap-2 pt-1">
                 <button
                   onClick={handleSave}
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-violet-500/15 text-violet-400 text-xs font-medium hover:bg-violet-500/25 transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-xs font-medium hover:bg-neutral-800 transition-colors"
                 >
                   <Check size={13} /> Kaydet
                 </button>
@@ -173,8 +173,8 @@ export function SceneCard({
             <motion.div key="viewing" className="space-y-2.5">
               {/* Narrasyon */}
               <div className="flex gap-2">
-                <div className="w-5 h-5 rounded-md bg-violet-500/10 flex items-center justify-center shrink-0 mt-0.5">
-                  <Mic size={11} className="text-violet-400" />
+                <div className="w-5 h-5 rounded-md bg-[var(--color-bg-elevated)] flex items-center justify-center shrink-0 mt-0.5 border border-[var(--color-border-faint)]">
+                  <Mic size={11} className="text-neutral-400" />
                 </div>
                 <p className="text-sm text-[var(--color-text-secondary)] leading-relaxed">
                   {scene.narrationText}
@@ -183,8 +183,8 @@ export function SceneCard({
 
               {/* Görsel Prompt */}
               <div className="flex gap-2">
-                <div className="w-5 h-5 rounded-md bg-cyan-500/10 flex items-center justify-center shrink-0 mt-0.5">
-                  <ImageIcon size={11} className="text-cyan-400" />
+                <div className="w-5 h-5 rounded-md bg-[var(--color-bg-elevated)] flex items-center justify-center shrink-0 mt-0.5 border border-[var(--color-border-faint)]">
+                  <ImageIcon size={11} className="text-neutral-400" />
                 </div>
                 <div className="flex-1 group/prompt relative">
                   <p className="text-xs text-[var(--color-text-ghost)] leading-relaxed italic pr-6">
@@ -194,7 +194,7 @@ export function SceneCard({
                     onClick={() => {
                       navigator.clipboard.writeText(scene.visualPrompt);
                     }}
-                    className="absolute top-0 right-0 p-1 opacity-0 group-hover/prompt:opacity-100 transition-opacity bg-[var(--color-bg-elevated)] rounded-md text-[var(--color-text-muted)] hover:text-cyan-400 hover:bg-cyan-500/10"
+                    className="absolute top-0 right-0 p-1 opacity-0 group-hover/prompt:opacity-100 transition-opacity bg-[var(--color-bg-elevated)] rounded-md text-[var(--color-text-muted)] hover:text-neutral-300 hover:bg-neutral-800"
                     title="Prompt'u Kopyala"
                   >
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
diff --git a/src/components/projects/ProjectConfiguration.tsx b/src/components/projects/ProjectConfiguration.tsx
new file mode 100644
index 0000000..e1e96e4
--- /dev/null
+++ b/src/components/projects/ProjectConfiguration.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Monitor,
+  Smartphone,
+  Square,
+  Search,
+  ChevronDown,
+  Clock,
+  Palette,
+  Languages,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// --- CONSTANTS ---
+
+export const languages = [
+  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
+  { code: "en", label: "English", flag: "🇺🇸" },
+  { code: "es", label: "Español", flag: "🇪🇸" },
+  { code: "de", label: "Deutsch", flag: "🇩🇪" },
+  { code: "fr", label: "Français", flag: "🇫🇷" },
+  { code: "ar", label: "العربية", flag: "🇸🇦" },
+  { code: "pt", label: "Português", flag: "🇧🇷" },
+  { code: "ja", label: "日本語", flag: "🇯🇵" },
+];
+
+export const videoStyles = [
+  // Film & Sinema
+  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
+  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
+  { id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
+  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
+  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
+  { id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
+  { id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
+  // Animasyon
+  { id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
+  { id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
+  { id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
+  { id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
+  { id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
+  { id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
+  { id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
+  { id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
+  { id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
+  // Eğitim & Bilgi
+  { id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
+  { id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
+  { id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
+  { id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
+  { id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
+  // Retro & Nostaljik
+  { id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
+  { id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
+  { id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
+  { id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
+  { id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
+  // Sanat Akımları
+  { id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
+  { id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
+  { id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
+  { id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
+  { id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
+  { id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
+  { id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
+  { id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
+  { id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
+  // Modern & Minimal
+  { id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
+  { id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
+  { id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
+  { id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
+  { id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
+  { id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
+  // Fotoğrafik
+  { id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
+  { id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
+  { id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
+  { id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
+  { id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
+];
+
+export const aspectRatios = [
+  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
+  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
+  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
+];
+
+// --- COMPONENTS ---
+
+export function LanguageSelector({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+}) {
+  return (
+    <div>
+      <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
+        <Languages size={14} className="inline mr-1.5 text-cyan-400" />
+        Video Dili
+      </label>
+      <div className="grid grid-cols-4 gap-2">
+        {languages.map((lang) => (
+          <button
+            key={lang.code}
+            onClick={() => onChange(lang.code)}
+            className={cn(
+              "flex flex-col items-center gap-1 py-3 px-2 rounded-xl text-xs transition-all",
+              value === lang.code
+                ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
+                : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
+            )}
+          >
+            <span className="text-lg">{lang.flag}</span>
+            <span className="font-medium">{lang.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function StyleSelector({
+  value,
+  onChange,
+  cinematicReference,
+  onCinematicReferenceChange,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  cinematicReference: string;
+  onCinematicReferenceChange: (val: string) => void;
+}) {
+  const [styleSearch, setStyleSearch] = useState("");
+  const [expandedCategory, setExpandedCategory] = useState<string | null>("Film & Sinema");
+
+  const filteredStyles = useMemo(() => {
+    return videoStyles.filter(
+      (s) =>
+        s.label.toLowerCase().includes(styleSearch.toLowerCase()) ||
+        s.desc.toLowerCase().includes(styleSearch.toLowerCase())
+    );
+  }, [styleSearch]);
+
+  const groupedStyles = useMemo(() => {
+    return filteredStyles.reduce((acc, curr) => {
+      const cat = curr.category || "Diğer";
+      if (!acc[cat]) acc[cat] = [];
+      acc[cat].push(curr);
+      return acc;
+    }, {} as Record<string, typeof videoStyles>);
+  }, [filteredStyles]);
+
+  return (
+    <div>
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
+        <label className="text-sm font-medium text-[var(--color-text-secondary)] block">
+          <Palette size={14} className="inline mr-1.5 text-violet-400" />
+          Video Stili
+        </label>
+        <div className="relative w-full sm:w-56">
+          <div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
+            <Search size={14} className="text-[var(--color-text-ghost)]" />
+          </div>
+          <input
+            type="text"
+            placeholder="Stil ara..."
+            value={styleSearch}
+            onChange={(e) => setStyleSearch(e.target.value)}
+            className="w-full pl-8 pr-3 py-1.5 bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-md text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-[var(--color-border-default)]"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-3 max-h-[360px] overflow-y-auto pr-1 custom-scrollbar">
+        {Object.entries(groupedStyles).map(([category, items]) => {
+          const isExpanded = styleSearch ? true : expandedCategory === category;
+          return (
+            <div
+              key={category}
+              className="bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl overflow-hidden"
+            >
+              <button
+                onClick={() =>
+                  !styleSearch && setExpandedCategory(isExpanded ? null : category)
+                }
+                className="w-full flex items-center justify-between p-3 bg-[var(--color-bg-elevated)] hover:bg-[var(--color-bg-surface-hover)] transition-colors"
+              >
+                <span className="text-sm font-medium text-[var(--color-text-secondary)]">
+                  {category}{" "}
+                  <span className="text-[11px] text-[var(--color-text-ghost)] ml-1">
+                    ({items.length})
+                  </span>
+                </span>
+                {!styleSearch && (
+                  <ChevronDown
+                    size={16}
+                    className={cn(
+                      "text-[var(--color-text-ghost)] transition-transform duration-200",
+                      isExpanded && "rotate-180"
+                    )}
+                  />
+                )}
+              </button>
+
+              <AnimatePresence initial={false}>
+                {isExpanded && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <div className="p-3 pt-0 mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2">
+                      {items.map((s) => (
+                        <button
+                          key={s.id}
+                          onClick={() => onChange(s.id)}
+                          className={cn(
+                            "flex flex-col items-start gap-1 p-2.5 rounded-xl text-left transition-all",
+                            value === s.id
+                              ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
+                              : "bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]"
+                          )}
+                        >
+                          <span className="text-xl mb-0.5">{s.emoji}</span>
+                          <span className="text-xs font-semibold leading-tight">
+                            {s.label}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-[10px] leading-tight",
+                              value === s.id
+                                ? "text-[var(--color-text-inverted)]/70"
+                                : "text-[var(--color-text-ghost)]"
+                            )}
+                          >
+                            {s.desc}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          );
+        })}
+        {Object.keys(groupedStyles).length === 0 && (
+          <div className="text-center py-8 text-[var(--color-text-ghost)] text-sm">
+            "{styleSearch}" için sonuç bulunamadı.
+          </div>
+        )}
+      </div>
+      {value === "CINEMATIC" && (
+        <div className="pt-3 mt-3 border-t border-[var(--color-border-faint)]">
+          <label className="text-xs font-medium text-[var(--color-text-secondary)] mb-2 block">
+            Özel Sinematik Referans (Opsiyonel)
+          </label>
+          <input
+            type="text"
+            placeholder="Örn: Wes Anderson, Matrix, Neon Cyberpunk..."
+            value={cinematicReference}
+            onChange={(e) => onCinematicReferenceChange(e.target.value)}
+            className="w-full bg-[var(--color-bg-elevated)] border border-[var(--color-border-faint)] rounded-md py-1.5 px-3 text-sm focus:border-[var(--color-border-default)] outline-none transition-colors"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function DurationSelector({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (val: number) => void;
+}) {
+  return (
+    <div>
+      <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
+        <Clock size={14} className="inline mr-1.5 text-cyan-400" />
+        Hedef Süre:{" "}
+        <span className="text-[var(--color-text-primary)] font-bold">{value}s</span>
+      </label>
+      <input
+        type="range"
+        min={15}
+        max={180}
+        step={5}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className={cn(
+          "w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer",
+          "[&::-webkit-slider-thumb]:appearance-none",
+          "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
+          "[&::-webkit-slider-thumb]:rounded-full",
+          "[&::-webkit-slider-thumb]:bg-[var(--color-bg-inverted)]",
+          "[&::-webkit-slider-thumb]:shadow-md",
+          "[&::-webkit-slider-thumb]:cursor-grab"
+        )}
+      />
+      <div className="flex justify-between text-[10px] text-[var(--color-text-ghost)] mt-1">
+        <span>15s</span>
+        <span>60s</span>
+        <span>120s</span>
+        <span>180s</span>
+      </div>
+    </div>
+  );
+}
+
+export function AspectRatioSelector({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+}) {
+  return (
+    <div>
+      <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
+        En-Boy Oranı
+      </label>
+      <div className="flex gap-2">
+        {aspectRatios.map((ar) => {
+          const Icon = ar.icon;
+          return (
+            <button
+              key={ar.id}
+              onClick={() => onChange(ar.id)}
+              className={cn(
+                "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
+                value === ar.id
+                  ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)]"
+                  : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
+              )}
+            >
+              <Icon size={20} />
+              <span className="font-semibold">{ar.label}</span>
+              <span
+                className={cn(
+                  "text-[10px]",
+                  value === ar.id
+                    ? "text-[var(--color-text-inverted)]/70"
+                    : "text-[var(--color-text-ghost)]"
+                )}
+              >
+                {ar.desc}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 1b985b1..7309f18 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -16,17 +16,17 @@ const customConfig: SystemConfig = {
       },
       colors: {
         primary: {
-          50: { value: '#E6FFFA' },
-          100: { value: '#B2F5EA' },
-          200: { value: '#81E6D9' },
-          300: { value: '#4FD1C5' },
-          400: { value: '#38B2AC' },
-          500: { value: '#319795' },
-          600: { value: '#2C7A7B' },
-          700: { value: '#285E61' },
-          800: { value: '#234E52' },
-          900: { value: '#1D4044' },
-          950: { value: '#132E30' },
+          50: { value: '#fafafa' },
+          100: { value: '#f5f5f5' },
+          200: { value: '#e5e5e5' },
+          300: { value: '#d4d4d4' },
+          400: { value: '#a3a3a3' },
+          500: { value: '#737373' },
+          600: { value: '#525252' },
+          700: { value: '#404040' },
+          800: { value: '#262626' },
+          900: { value: '#171717' },
+          950: { value: '#0a0a0a' },
         },
       },
     },
@@ -35,20 +35,20 @@ const customConfig: SystemConfig = {
         primary: {
           solid: {
             value: {
-              _light: '{colors.primary.600}',
-              _dark: '{colors.primary.600}',
+              _light: '{colors.primary.900}',
+              _dark: '{colors.primary.100}',
             },
           },
           contrast: {
             value: {
               _light: '{colors.white}',
-              _dark: '{colors.white}',
+              _dark: '{colors.black}',
             },
           },
           fg: {
             value: {
-              _light: '{colors.primary.700}',
-              _dark: '{colors.primary.300}',
+              _light: '{colors.primary.900}',
+              _dark: '{colors.primary.100}',
             },
           },
           muted: {