<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Natal Soul AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="app-shell">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="brand">
<div class="brand-mark">✦</div>
<div>
<div class="brand-name">Natal Soul</div>
<div class="brand-sub">ASTROLOGY · AI</div>
</div>
</div>
<nav class="nav">
<a href="/" class="nav-item active">
<span>⌂</span>
<span>Dashboard</span>
</a>
<a href="#" class="nav-item">
<span>♙</span>
<span>Müşteriler</span>
</a>
<a href="#" class="nav-item">
<span>✦</span>
<span>Yeni Harita</span>
</a>
<a href="#" class="nav-item">
<span>✧</span>
<span>AI Analiz</span>
</a>
<a href="#" class="nav-item">
<span>▤</span>
<span>Raporlar</span>
</a>
<div class="nav-divider"></div>
<a href="#" class="nav-item">
<span>◇</span>
<span>Natal Soul Hafızası</span>
</a>
<a href="#" class="nav-item">
<span>✎</span>
<span>Merve'nin Düzeltmeleri</span>
</a>
<a href="#" class="nav-item">
<span>⚙</span>
<span>Ayarlar</span>
</a>
</nav>
<div class="sidebar-status">
<div class="status-dot"></div>
<div>
<strong>AI Motoru Aktif</strong>
<small>GPT-OSS 120B</small>
</div>
</div>
</aside>
<!-- MAIN -->
<main class="main">
<!-- TOP BAR -->
<header class="topbar">
<div>
<div class="eyebrow">NATAL SOUL CONTROL CENTER</div>
<h1>İyi akşamlar, Emrah.</h1>
<p>Bugün hangi haritayı keşfediyoruz?</p>
</div>
<div class="top-actions">
<div class="ai-online">
<span></span>
AI Online
</div>
<button class="icon-btn">☾</button>
<div class="profile">
<div class="avatar">EC</div>
<div>
<strong>Emrah</strong>
<small>Administrator</small>
</div>
</div>
</div>
</header>
<!-- STATS -->
<section class="stats">
<div class="stat-card">
<div class="stat-icon">♙</div>
<div>
<small>Toplam Müşteri</small>
<strong>0</strong>
<span>Müşteri veritabanı</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">✦</div>
<div>
<small>Oluşturulan Harita</small>
<strong>0</strong>
<span>Swiss Ephemeris</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">✧</div>
<div>
<small>AI Raporları</small>
<strong>0</strong>
<span>GPT-OSS 120B</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">◇</div>
<div>
<small>Hafıza Kayıtları</small>
<strong>0</strong>
<span>Natal Soul Memory</span>
</div>
</div>
</section>
<!-- WORKSPACE -->
<section class="workspace">
<!-- LEFT -->
<div class="workspace-left">
<div class="panel natal-panel">
<div class="panel-head">
<div>
<span class="panel-kicker">AKTİF HARİTA</span>
<h2>Doğum Haritası</h2>
</div>
<button class="small-btn">Detayları Gör</button>
</div>
<div class="chart-area">
<div class="chart-wheel">
<div class="orbit orbit-1"></div>
<div class="orbit orbit-2"></div>
<div class="orbit orbit-3"></div>
<div class="axis axis-x"></div>
<div class="axis axis-y"></div>
<div class="chart-center">
<span>✦</span>
<strong>NATAL</strong>
<small>SOUL</small>
</div>
<span class="planet p1">☉</span>
<span class="planet p2">☽</span>
<span class="planet p3">♀</span>
<span class="planet p4">♂</span>
<span class="planet p5">♃</span>
<span class="planet p6">♄</span>
</div>
<div class="chart-info">
<div class="empty-state">
<div class="empty-icon">✦</div>
<h3>Henüz aktif harita yok</h3>
<p>
Yeni bir müşteri ekleyerek doğum haritasını
hesaplayabilir ve AI analizini başlatabilirsiniz.
</p>
<button class="primary-btn">
+ Yeni Harita Oluştur
</button>
</div>
</div>
</div>
</div>
<!-- RECENT -->
<div class="panel">
<div class="panel-head">
<div>
<span class="panel-kicker">CRM</span>
<h2>Son Müşteriler</h2>
</div>
<button class="small-btn">Tümünü Gör</button>
</div>
<div class="empty-list">
<div>♙</div>
<strong>Henüz müşteri bulunmuyor</strong>
<span>İlk müşterinizi eklediğinizde burada görünecek.</span>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="workspace-right">
<!-- AI -->
<div class="panel ai-panel">
<div class="ai-head">
<div class="ai-symbol">✦</div>
<div>
<span>NATAL SOUL AI</span>
<h2>AI Yorumu</h2>
</div>
</div>
<p class="ai-description">
Natal haritayı GPT-OSS 120B ile profesyonel
astroloji yorumuna dönüştür.
</p>
<div class="field">
<label>Rapor Dili</label>
<div class="segmented">
<button class="selected">Türkçe</button>
<button>English</button>
</div>
</div>
<div class="field">
<label>Rapor Türü</label>
<select>
<option>Tam Doğum Haritası</option>
<option>Karakter ve İç Dünya</option>
<option>İlişkiler</option>
<option>Kariyer ve Yetenekler</option>
<option>Gölge Temalar</option>
</select>
</div>
<button class="generate-btn" disabled>
✦ AI Yorumu Oluştur
</button>
<div class="ai-meta">
<span class="green-dot"></span>
GPT-OSS 120B hazır
</div>
</div>
<!-- QUICK ACTIONS -->
<div class="panel">
<div class="panel-head">
<div>
<span class="panel-kicker">ARAÇLAR</span>
<h2>Hızlı İşlemler</h2>
</div>
</div>
<div class="quick-grid">
<button>
<span>✦</span>
Yeni Harita
</button>
<button>
<span>♙</span>
Müşteri Ekle
</button>
<button>
<span>▤</span>
Raporlar
</button>
<button>
<span>◇</span>
Hafıza
</button>
</div>
</div>
<!-- MEMORY -->
<div class="memory-card">
<div class="memory-glow"></div>
<span class="panel-kicker">NATAL SOUL MEMORY</span>
<h3>Her raporla biraz daha gelişen bir sistem.</h3>
<p>
Onaylanan raporlar ve Merve'nin düzeltmeleri,
gelecekteki yorumların kalitesini geliştirmek
için kullanılacak.
</p>
<div class="memory-stats">
<div>
<strong>0</strong>
<span>Onaylı Rapor</span>
</div>
<div>
<strong>0</strong>
<span>Düzeltme</span>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>