feat(arayüz): logo ve uygulama ikonları

- Logo: indigo zemin, spiral defter ve ¥ (frontend/brand/*.svg)
- scripts/icons.sh (npm run icons): favicon (svg/ico), PWA 192/512, maskable, Apple touch icon, Tauri 1024
- Logo bileşeni (components/logo.tsx)
- index.html: ikon bağlantıları, theme-color, açıklama

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CLAUDE.md

@@ -57,6 +57,7 @@ npm run db:seed
 npm run db:reset     # kakeibo_dev + artık kakeibo_test_* veritabanlarını siler
 npm test             # backend (cargo test, MongoDB açık olmalı) + frontend (vitest)
 npm run lint         # clippy + oxlint
+npm run icons        # frontend/brand/*.svg → favicon, PWA, Apple, Tauri ikonları (rsvg-convert + magick)
 ```
 - `npm run dev` öncesinde DB otomatik başlar (`predev`).
 - Yerel MongoDB host portu **27020** (27017 sistem mongod, 27018/27019 diğer projeler).

docs/MEMORY.md

@@ -1,7 +1,7 @@
 # 🧠 Proje Hafızası
 
 ## ▶️ Sıradaki Adım
-**Faz 2 – Adım 2:** Logo + uygulama ikonu (SVG, defter + yen/para teması), favicon, PWA ikonları (192/512, maskable), Apple touch icon. PNG üretimi için araç seçimi (rsvg-convert / sharp).
+**Faz 2 – Adım 3:** `lib/api.ts` (fetch sarmalayıcı, `{error:{code,message}}` → `ApiError`), TanStack Query kurulumu, ts-rs ile Rust DTO → `frontend/src/types/` tip üretimi, oturum durumu (`useMe` / auth context).
 
 ## 📌 Alınan Kararlar
 - Sürüm kontrolü: Gitea (`https://gitea.ta1sph.info/suphicakir/kakeibo.git`), dal `main`.
@@ -22,6 +22,7 @@
 - Tasarım: ana renk indigo (`oklch(0.42 0.13 268)`), grup renkleri Okabe-Ito (needs #0072b2, wants #cc79a7, culture #009e73, unexpected #d55e00), *-fg tonları AA (açık ≥5.0, koyu ≥9) hesaplanarak doğrulandı. Gelir #15803d, gider #c62828, uyarı #b45309.
 - Tema seçimi localStorage (`kakeibo-theme`), yalnızca cihaz kolaylığı; ileride `users.preferences.theme` ile senkron olabilir.
 - `parseMoney`: virgül varsa ondalık; virgül yoksa son noktadan sonra 1–2 rakam → ondalık ("1.25" = 1,25 ₺; "1.250" = 1250 ₺).
+- Logo: Taslak A (indigo zemin, spiral krem defter, ¥) seçildi. Kaynak `frontend/brand/logo.svg` + `logo-fullbleed.svg` (maskable/Apple, içerik %82). Uygulama içi `components/logo.tsx` aynı çizim (elle senkron tutulmalı). Manifest Faz 10'da (vite-plugin-pwa).
 - Sürümler: Rust 1.99.1 (edition 2024), Axum 0.8, React 19, Vite 8, TypeScript 7, Tailwind 4.3, shadcn 4.23, Vitest 5.
 
 ## ❓ Açık Konular
@@ -49,3 +50,4 @@
 
 ### 2026-11-12 — Faz 2
 - **Adım 1:** Tailwind v4 (@tailwindcss/vite), shadcn init (radix, preset nova; `cn` paketi = shadcn'in clsx+tailwind-merge yerine geçeni, incelendi), Inter (@fontsource-variable, çevrimdışı). `index.css`: grup + durum token'ları, odak halkası, `money` utility, reduced-motion. `lib/format.ts` (+22 vitest), `lib/theme.tsx`, `lib/groups.ts`, `components/theme-toggle.tsx`. Butonlar 44/48 px'e büyütüldü. Geçici önizleme ekranı (App.tsx), 375 px headless ekran görüntüsüyle iki temada kontrol edildi.
+- **Adım 2:** 3 logo taslağı (A indigo defter, B açık defter + para, C hanko) 512/64/32/16 px önizlemeyle sunuldu; kullanıcı A'yı seçti. `scripts/icons.sh` (`npm run icons`): favicon.svg/.ico, icon-192/512, icon-maskable-512, apple-touch-icon (180), brand/icon-1024 (Tauri). Maskable güvenli alan görsel olarak doğrulandı. `index.html`: ikon linkleri, theme-color, description.

docs/PHASES.md

@@ -33,7 +33,7 @@
 
 ## Faz 2 Adımları
 - ✅ 1. Tailwind v4 + shadcn/ui (radix, nova), tasarım token'ları (4 grup + durum renkleri, AA doğrulandı), Inter, tema (aydınlık/karanlık/sistem), `lib/format.ts` + Vitest
-- ⏳ 2. Logo ve uygulama ikonu (SVG), favicon, PWA/Apple ikonları
+- ✅ 2. Logo ve uygulama ikonu (SVG), favicon, PWA/Apple ikonları
-- ⏳ 3. `lib/api.ts`, TanStack Query, ts-rs tip üretimi, oturum durumu
+- 🔄 3. `lib/api.ts`, TanStack Query, ts-rs tip üretimi, oturum durumu
 - ⏳ 4. Router (react-router), korumalı sayfalar, layout: mobil alt menü / masaüstü sol menü
 - ⏳ 5. Giriş / kayıt ekranları (react-hook-form + zod, beni hatırla, davet kodu), arayüz metinleri tek dosyada

frontend/brand/logo-fullbleed.svg

@@ -0,0 +1,24 @@
+<!-- Köşesiz kare sürüm: Android "maskable" ve Apple touch icon (sistem kendi şekliyle kırpar).
+     İçerik %82'ye küçültülmüştür → maskable güvenli alanı (merkezde %80 çaplı daire) içinde kalır. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3b4aa8"/>
+      <stop offset="1" stop-color="#26307a"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" fill="url(#kakeibo-bg)"/>
+  <g transform="translate(256 256) scale(0.82) translate(-260 -256)">
+    <rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
+    <rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
+    <rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
+    <g fill="#26307a">
+      <circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
+      <circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
+    </g>
+    <g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
+      <path d="M250 266 H334"/><path d="M250 304 H334"/>
+    </g>
+  </g>
+</svg>

frontend/brand/logo.svg

@@ -0,0 +1,23 @@
+<!-- Kakeibo logosu (ana kaynak). Değiştirirseniz: scripts/icons.sh -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3b4aa8"/>
+      <stop offset="1" stop-color="#26307a"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#kakeibo-bg)"/>
+  <g id="mark">
+    <rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
+    <rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
+    <rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
+    <g fill="#26307a">
+      <circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
+      <circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
+    </g>
+    <g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
+      <path d="M250 266 H334"/><path d="M250 304 H334"/>
+    </g>
+  </g>
+</svg>

frontend/index.html

@@ -5,6 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="color-scheme" content="light dark" />
     <title>Kakeibo</title>
+    <meta name="description" content="Kakeibo — hane bazlı kişisel ev finans defteri" />
+    <!-- İkonlar: scripts/icons.sh ile frontend/brand/*.svg kaynaklarından üretilir -->
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Mobil tarayıcı çubuğu rengi (tema arka planıyla aynı) -->
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
     <!-- Tema: React yüklenmeden önce uygulanır → ilk açılışta "beyaz parlama" olmaz (lib/theme.tsx ile aynı mantık) -->
     <script>
       try {

frontend/public/favicon.svg

@@ -0,0 +1,23 @@
+<!-- Kakeibo logosu (ana kaynak). Değiştirirseniz: scripts/icons.sh -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3b4aa8"/>
+      <stop offset="1" stop-color="#26307a"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#kakeibo-bg)"/>
+  <g id="mark">
+    <rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
+    <rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
+    <rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
+    <g fill="#26307a">
+      <circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
+      <circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
+    </g>
+    <g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
+      <path d="M250 266 H334"/><path d="M250 304 H334"/>
+    </g>
+  </g>
+</svg>

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Plus } from 'lucide-react'
+import { Logo } from '@/components/logo'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
 import { formatDate, formatMoney, formatQuantity, toIsoDate } from '@/lib/format'
@@ -25,7 +26,9 @@ export default function App() {
     <main className="mx-auto flex max-w-3xl flex-col gap-8 px-4 py-8">
       <header className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">📒 Kakeibo</h1>
+          <h1>
+            <Logo size={44} withText />
+          </h1>
           <p className="text-muted-foreground">Tasarım sistemi önizlemesi</p>
         </div>
         <ThemeToggle />

frontend/src/components/logo.tsx

@@ -0,0 +1,67 @@
+import { useId } from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Kakeibo logosu (kaynak: `frontend/brand/logo.svg` — ikisi aynı tutulmalı).
+ * `withText` ile yanında "Kakeibo" yazısı gösterilir.
+ */
+export function Logo({
+  size = 32,
+  withText = false,
+  className,
+}: {
+  size?: number
+  withText?: boolean
+  className?: string
+}) {
+  // Sayfada birden fazla logo olursa gradient kimlikleri çakışmasın
+  const gradientId = useId()
+
+  return (
+    <span className={cn('inline-flex items-center gap-2.5', className)}>
+      <svg
+        viewBox="0 0 512 512"
+        width={size}
+        height={size}
+        role="img"
+        aria-label={withText ? undefined : 'Kakeibo'}
+        aria-hidden={withText || undefined}
+        className="shrink-0"
+      >
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopColor="#3b4aa8" />
+            <stop offset="1" stopColor="#26307a" />
+          </linearGradient>
+        </defs>
+        <rect width="512" height="512" rx="112" fill={`url(#${gradientId})`} />
+        <rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea" />
+        <rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf" />
+        <rect x="166" y="92" width="26" height="328" fill="#e6dfcf" />
+        <g fill="#26307a">
+          <circle cx="140" cy="150" r="13" />
+          <circle cx="140" cy="220" r="13" />
+          <circle cx="140" cy="290" r="13" />
+          <circle cx="140" cy="360" r="13" />
+        </g>
+        <g
+          fill="none"
+          stroke="#26307a"
+          strokeWidth="22"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M238 178 L292 254 L346 178" />
+          <path d="M292 254 V342" />
+          <path d="M250 266 H334" />
+          <path d="M250 304 H334" />
+        </g>
+      </svg>
+      {withText && (
+        <span className="font-bold tracking-tight" style={{ fontSize: size * 0.6 }}>
+          Kakeibo
+        </span>
+      )}
+    </span>
+  )
+}

package.json

@@ -15,7 +15,8 @@
     "db:seed": "echo 'Seed betiği Faz 1-4 arasında eklenecek.'",
     "db:reset": "docker exec kakeibo-mongo mongosh --quiet --eval \"db.getSiblingDB('kakeibo_dev').dropDatabase(); db.adminCommand({listDatabases:1}).databases.filter(d => d.name.startsWith('kakeibo_test_')).forEach(d => db.getSiblingDB(d.name).dropDatabase()); print('kakeibo_dev ve test veritabanları sıfırlandı.')\"",
     "test": "cd backend && cargo test && cd .. && npm --prefix frontend test",
-    "lint": "cd backend && cargo clippy && cd .. && npm --prefix frontend run lint"
+    "lint": "cd backend && cargo clippy && cd .. && npm --prefix frontend run lint",
+    "icons": "bash scripts/icons.sh"
   },
   "devDependencies": {
     "concurrently": "^10.0.7"

scripts/icons.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# Logo kaynaklarından (frontend/brand/*.svg) tüm ikonları üretir.
+# Gerekenler: rsvg-convert (librsvg), magick (ImageMagick)
+#   Arch/CachyOS: sudo pacman -S librsvg imagemagick
+# Kullanım: npm run icons
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+BRAND=frontend/brand
+OUT=frontend/public
+
+for tool in rsvg-convert magick; do
+  command -v "$tool" >/dev/null || { echo "Eksik araç: $tool"; exit 1; }
+done
+
+png() { rsvg-convert -w "$2" -h "$2" "$BRAND/$1" -o "$3"; }
+
+# Tarayıcı sekmesi
+cp "$BRAND/logo.svg" "$OUT/favicon.svg"
+tmp=$(mktemp -d)
+for s in 16 32 48; do png logo.svg $s "$tmp/$s.png"; done
+magick "$tmp/16.png" "$tmp/32.png" "$tmp/48.png" "$OUT/favicon.ico"
+rm -rf "$tmp"
+
+# PWA (Faz 10'da manifest'e bağlanacak)
+png logo.svg 192 "$OUT/icon-192.png"
+png logo.svg 512 "$OUT/icon-512.png"
+png logo-fullbleed.svg 512 "$OUT/icon-maskable-512.png"
+
+# iOS ana ekran (iOS köşeleri kendisi yuvarlar → köşesiz sürüm)
+png logo-fullbleed.svg 180 "$OUT/apple-touch-icon.png"
+
+# Tauri (Faz 11: `npx tauri icon frontend/brand/icon-1024.png`)
+png logo.svg 1024 "$BRAND/icon-1024.png"
+
+echo "İkonlar üretildi:"
+ls -la "$OUT"/favicon.* "$OUT"/icon-*.png "$OUT"/apple-touch-icon.png "$BRAND"/icon-1024.png | awk '{print "  " $5 "\t" $9}'