// ════════════════════════════════════════════════════════════════════
// features-page/Visuals.jsx — Her feature için CSS-rendered mini UI
// ════════════════════════════════════════════════════════════════════
// Tasarım dili Features.jsx'teki visual'lara uyumlu. Hepsi navy + bordo +
// olive aksanları, JetBrains Mono kicker'lar, ince border'lar.

// ─── ortak yardımcı stiller ──────────────────────────────────────────
const _box = {
  background: 'var(--bg-elev)',
  border: '1px solid var(--line-2)',
  borderRadius: 8,
  overflow: 'hidden',
};
const _mono = { fontFamily: 'var(--font-mono)' };

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 1: DOSYA YÖNETİMİ
// ════════════════════════════════════════════════════════════════════

function VDosyaList() {
  const rows = [
    { n: '2024/3312', t: 'Karadeniz İnş.',  s: 'Tazminat',  a: 'Aktif',     c: 'var(--olive)' },
    { n: '2024/2891', t: 'Yılmaz, Ahmet',   s: 'İş Davası', a: 'Bilirkişi', c: 'var(--accent-hover)' },
    { n: '2024/1547', t: 'Demir Tic. A.Ş.', s: 'Ticari',    a: 'İstinaf',   c: 'var(--bordo)' },
    { n: '2023/9988', t: 'Kara, Mehmet',    s: 'Boşanma',   a: 'Kapatıldı', c: 'var(--ink-dim)' },
  ];
  return (
    <div style={_box}>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto auto',
          gap: 10, padding: '11px 14px',
          borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
          fontSize: 12.5, alignItems: 'center'
        }}>
          <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.02em' }}>{r.n}</div>
          <div style={{ fontWeight: 600, color: 'var(--ink)' }}>{r.t}</div>
          <span className="dash-pill">{r.s}</span>
          <span className="dash-pill" style={{ background: 'transparent', color: r.c, borderColor: r.c }}>{r.a}</span>
        </div>
      ))}
    </div>
  );
}

function VDosyaDetail() {
  return (
    <div style={{ ..._box, padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
        <span style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.04em' }}>2024/3312</span>
        <span className="dash-pill" style={{ background: 'var(--olive-dim)', color: 'var(--olive)', borderColor: 'rgba(16,185,129,0.25)' }}>Aktif</span>
      </div>
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', marginBottom: 8 }}>Karadeniz İnşaat Tic. Ltd. Şti.</div>
      <div style={{ display: 'flex', gap: 18, fontSize: 11, color: 'var(--ink-mute)', borderBottom: '1px solid var(--line)', paddingBottom: 10, marginBottom: 8 }}>
        <span>İstanbul 4. Asliye Hukuk</span>
        <span>2024/E. 1457</span>
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Taraflar', 'Notlar', 'İş Takibi', 'Evraklar', 'UYAP', 'Tahsilat', 'Masraflar', 'AI'].map((t, i) => (
          <span key={i} className="dash-pill" style={{ fontSize: 10, padding: '3px 8px', borderColor: i === 2 ? 'var(--accent)' : 'var(--line-2)', background: i === 2 ? 'var(--accent-dim)' : 'transparent', color: i === 2 ? 'var(--bordo)' : 'var(--ink-mute)' }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function VTahsilat() {
  return (
    <div style={{ ..._box, padding: '14px 16px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Tahsilatlar — bu ay</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
        <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--ink)' }}>₺48.500</span>
        <span style={{ fontSize: 11, color: 'var(--olive)' }}>↑ 3 tahsilat</span>
      </div>
      {[
        { d: '12.04', m: 'Yılmaz A.', t: 'Vekalet', a: '20.000' },
        { d: '08.04', m: 'Demir Tic.', t: 'Peşinat', a: '18.500' },
        { d: '02.04', m: 'Karadeniz', t: 'Bakiye', a: '10.000' },
      ].map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr auto auto', gap: 10, fontSize: 11.5, padding: '5px 0', borderTop: i ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
          <span style={{ ..._mono, color: 'var(--ink-dim)', fontSize: 10 }}>{r.d}</span>
          <span style={{ color: 'var(--ink)' }}>{r.m}</span>
          <span style={{ color: 'var(--ink-mute)', fontSize: 10 }}>{r.t}</span>
          <span style={{ ..._mono, color: 'var(--olive)', fontWeight: 600 }}>+₺{r.a}</span>
        </div>
      ))}
    </div>
  );
}

function VMasraf() {
  return (
    <div style={{ ..._box, padding: '14px 16px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Masraflar / Avans</div>
      {[
        { k: 'Avans alındı', a: '+5.000', c: 'var(--olive)' },
        { k: 'Harç + posta', a: '-1.240', c: 'var(--bordo)' },
        { k: 'Bilirkişi avansı', a: '-2.500', c: 'var(--bordo)' },
        { k: 'Kalan', a: '1.260', c: 'var(--ink)', bold: true },
      ].map((r, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '5px 0', borderTop: i ? (r.bold ? '1px solid var(--line-2)' : '1px solid var(--line)') : 'none' }}>
          <span style={{ color: r.bold ? 'var(--ink)' : 'var(--ink-mute)', fontWeight: r.bold ? 600 : 400 }}>{r.k}</span>
          <span style={{ ..._mono, color: r.c, fontWeight: r.bold ? 700 : 500 }}>₺{r.a}</span>
        </div>
      ))}
    </div>
  );
}

function VTaraflar() {
  return (
    <div style={{ ..._box, padding: '14px 16px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div>
          <div style={{ fontSize: 9, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Müvekkil</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Yılmaz, Ahmet</div>
          <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)', marginTop: 2 }}>TC 12345678901</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-mute)', marginTop: 1 }}>0532 *** ** 47</div>
          <span className="dash-pill" style={{ fontSize: 8.5, padding: '1px 6px', marginTop: 6, display: 'inline-block', background: 'var(--olive-dim)', color: 'var(--olive)', borderColor: 'rgba(16,185,129,0.25)' }}>Vekalet ✓</span>
        </div>
        <div>
          <div style={{ fontSize: 9, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Karşı Taraf</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Karadeniz İnş. Ltd.</div>
          <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)', marginTop: 2 }}>VKN 1234567890</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-mute)', marginTop: 1 }}>İstanbul, Şişli</div>
          <span className="dash-pill" style={{ fontSize: 8.5, padding: '1px 6px', marginTop: 6, display: 'inline-block' }}>Av. Demir B.</span>
        </div>
      </div>
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {[
          { l: 'Soruşturma', d: true },
          { l: 'İlk Derece', d: true },
          { l: 'İstinaf', a: true },
          { l: 'Yargıtay', d: false },
        ].map((s, i) => (
          <span key={i} className="dash-pill" style={{
            fontSize: 9, padding: '2px 7px',
            background: s.a ? 'var(--accent-dim)' : 'transparent',
            color: s.a ? 'var(--bordo)' : s.d ? 'var(--ink-dim)' : 'var(--line-hover)',
            borderColor: s.a ? 'var(--accent-soft)' : 'var(--line-2)',
            textDecoration: s.d && !s.a ? 'line-through' : 'none',
          }}>{s.l}</span>
        ))}
      </div>
    </div>
  );
}

function VChat() {
  return (
    <div style={{ ..._box, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12.5, lineHeight: 1.6 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)', minWidth: 32 }}>sen</div>
        <div style={{ color: 'var(--ink-body)' }}>Karşı taraf hangi tutarı kabul etmiş?</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <div style={{ ..._mono, fontSize: 10, color: 'var(--bordo)', minWidth: 32, fontWeight: 600 }}>Titan</div>
        <div style={{ color: 'var(--ink)' }}>
          18.250 TL’yi kabul etmiş, fakat <strong>kdv hariç</strong> ifadesi eklemiş.{' '}
          <span style={{ color: 'var(--accent-hover)', fontStyle: 'italic' }}>(Bkz: Cevap Dilekçesi - 14.03.2025)</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, paddingTop: 6, borderTop: '1px solid var(--line)' }}>
        {['Formal', 'Sade', 'Kısa'].map((s, i) => (
          <span key={i} className="dash-pill" style={{ fontSize: 9, padding: '2px 6px', background: i === 0 ? 'var(--accent-dim)' : 'transparent', color: i === 0 ? 'var(--bordo)' : 'var(--ink-mute)', borderColor: i === 0 ? 'var(--accent-soft)' : 'var(--line-2)' }}>{s}</span>
        ))}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 2: İŞ TAKİBİ
// ════════════════════════════════════════════════════════════════════

function VChain() {
  const items = [
    { d: '12.03', s: 'done',    t: 'Cevap dilekçesi sunuldu' },
    { d: '24.03', s: 'done',    t: 'Bilirkişi raporu talep edildi' },
    { d: '08.04', s: 'done',    t: 'Rapor tarafımıza tebliğ' },
    { d: '15.04', s: 'active',  t: 'Rapora itiraz dilekçesi hazırla' },
    { d: '—',     s: 'pending', t: '⋯' },
  ];
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Cevap dilekçesi zinciri</div>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0', fontSize: 12, color: it.s === 'done' ? 'var(--ink-dim)' : it.s === 'active' ? 'var(--ink)' : 'var(--ink-dim)' }}>
          <span style={{ ..._mono, fontSize: 9, color: 'var(--ink-dim)', minWidth: 30 }}>{it.d}</span>
          <span style={{
            width: 8, height: 8, borderRadius: '50%',
            background: it.s === 'done' ? 'var(--olive)' : it.s === 'active' ? 'var(--accent)' : 'var(--line-hover)',
            flexShrink: 0,
            boxShadow: it.s === 'active' ? '0 0 0 3px rgba(59,130,246,0.18)' : 'none',
          }} />
          <span style={{ textDecoration: it.s === 'done' ? 'line-through' : 'none', fontWeight: it.s === 'active' ? 600 : 400 }}>{it.t}</span>
        </div>
      ))}
    </div>
  );
}

function VTaskGroups() {
  const groups = [
    { ico: '🔴', l: 'Gecikmiş', n: 2 },
    { ico: '🟠', l: 'Bugün · 30 Nisan Çar', n: 4 },
    { ico: '🟡', l: 'Yarın · 1 Mayıs Per', n: 3 },
    { ico: '🟢', l: '5 Mayıs Pazartesi', n: 1 },
    { ico: '🟢', l: '8 Mayıs Perşembe', n: 2 },
  ];
  return (
    <div style={{ ..._box }}>
      {groups.map((g, i) => (
        <div key={i} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '10px 14px',
          borderBottom: i < groups.length - 1 ? '1px solid var(--line)' : 'none',
          background: i === 0 ? 'rgba(239,68,68,0.04)' : i === 1 ? 'rgba(245,158,11,0.04)' : 'transparent',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-body)' }}>
            <span style={{ fontSize: 10 }}>{g.ico}</span>
            <span>{g.l}</span>
          </div>
          <span style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)' }}>{g.n} iş</span>
        </div>
      ))}
    </div>
  );
}

function VAiOner() {
  return (
    <div style={{ ..._box, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Yapılan İş</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, color: 'var(--bordo)', padding: '2px 8px', border: '1px solid var(--accent-soft)', borderRadius: 4, background: 'var(--accent-dim)' }}>✦ AI Öner</span>
      </div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', fontStyle: 'italic', borderLeft: '2px solid var(--line-2)', paddingLeft: 8 }}>rapor bekliyoruz</div>
      <div style={{ fontSize: 11.5, color: 'var(--ink)', borderLeft: '2px solid var(--accent)', paddingLeft: 8, lineHeight: 1.55 }}>
        ATK'ya dosya gönderilmiştir. Tıbbi hata tespiti için bilirkişi raporu talep edilmiştir. Raporun gelmesi beklenmektedir.
      </div>
    </div>
  );
}

function VBatchTask() {
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Toplu görev — 12 dosya</div>
      {[
        { c: true, t: 'Cevap dilekçesi süresi takibi', d: '15 gün' },
        { c: true, t: 'Tebligat zarfı kontrolü', d: '5 gün' },
        { c: false, t: 'Ön inceleme duruşması', d: '30 gün' },
      ].map((r, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 11.5, borderTop: i ? '1px solid var(--line)' : 'none' }}>
          <span style={{ width: 12, height: 12, border: '1.5px solid var(--line-hover)', borderRadius: 3, background: r.c ? 'var(--accent)' : 'transparent', flexShrink: 0 }} />
          <span style={{ flex: 1, color: r.c ? 'var(--ink)' : 'var(--ink-mute)' }}>{r.t}</span>
          <span style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)' }}>{r.d}</span>
        </div>
      ))}
    </div>
  );
}

function VCompletedFeed() {
  return (
    <div style={{ ..._box }}>
      {[
        { day: 'Bugün · 30 Nisan', items: [{ t: 'İcra dosyası açıldı', u: 'Ali M.', tm: '14:32' }, { t: 'Vekaletname taranıp yüklendi', u: 'Gizem E.', tm: '11:08' }] },
        { day: 'Dün · 29 Nisan',   items: [{ t: 'Cevap dilekçesi sunuldu', u: 'Ali M.', tm: '17:54' }] },
      ].map((g, i) => (
        <div key={i}>
          <div style={{ padding: '8px 14px', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-dim)', background: 'var(--bg-deep)', borderBottom: '1px solid var(--line)' }}>{g.day}</div>
          {g.items.map((it, j) => (
            <div key={j} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 14px', fontSize: 11.5, borderBottom: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--olive)' }} />
                <span style={{ color: 'var(--ink)' }}>{it.t}</span>
                <span style={{ fontSize: 10, color: 'var(--ink-dim)' }}>· {it.u}</span>
              </div>
              <span style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)' }}>{it.tm}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 3: TAKVİM & DURUŞMA
// ════════════════════════════════════════════════════════════════════

function VCalendarMonth() {
  const days = Array.from({ length: 35 }, (_, i) => i - 1);
  return (
    <div style={{ ..._box, padding: 8 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', fontSize: 8, color: 'var(--ink-dim)', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'center', marginBottom: 4 }}>
        {['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'].map(d => <div key={d}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 1, background: 'var(--line-2)', border: '1px solid var(--line-2)' }}>
        {days.map((d, i) => {
          const dn = ((d - 1) % 30) + 1;
          const today = i === 9;
          const hasHearing = [3, 12, 18, 24].includes(i);
          const hasTask = [5, 7, 14, 20, 27].includes(i);
          return (
            <div key={i} style={{ background: today ? 'rgba(59,130,246,0.12)' : 'var(--bg-elev)', minHeight: 36, padding: '3px 4px', position: 'relative' }}>
              <div style={{ ..._mono, fontSize: 9, color: today ? 'var(--accent)' : 'var(--ink-dim)', fontWeight: today ? 700 : 400 }}>{dn}</div>
              {hasHearing && <div style={{ position: 'absolute', bottom: 3, left: 4, right: 4, height: 3, background: 'var(--bordo)', borderRadius: 2 }} />}
              {hasTask && <div style={{ position: 'absolute', bottom: 8, left: 4, right: 4, height: 3, background: 'var(--accent)', borderRadius: 2 }} />}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function VCalendarWeek() {
  const days = ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'];
  return (
    <div style={{ ..._box }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)' }}>
        {days.map((d, i) => (
          <div key={i} style={{ borderRight: i < 6 ? '1px solid var(--line-2)' : 'none', padding: '8px 6px', minHeight: 130 }}>
            <div style={{ textAlign: 'center', marginBottom: 6 }}>
              <div style={{ fontSize: 8, color: 'var(--ink-dim)', textTransform: 'uppercase' }}>{d}</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: i === 2 ? 'var(--accent)' : 'var(--ink)' }}>{20 + i}</div>
            </div>
            {/* Cards */}
            {i === 0 && <div style={{ background: 'var(--bordo-dim)', color: 'var(--bordo)', fontSize: 8.5, padding: '3px 4px', borderRadius: 3, marginBottom: 3, borderLeft: '2px solid var(--bordo)' }}>⚖ 09:30</div>}
            {(i === 1 || i === 4) && <div style={{ background: 'var(--accent-dim)', color: 'var(--bordo)', fontSize: 8.5, padding: '3px 4px', borderRadius: 3, marginBottom: 3, borderLeft: '2px solid var(--accent)' }}>📁 İş</div>}
            {i === 3 && <div style={{ background: 'var(--bordo-dim)', color: 'var(--bordo)', fontSize: 8.5, padding: '3px 4px', borderRadius: 3, marginBottom: 3, borderLeft: '2px solid var(--bordo)' }}>⚖ 14:00</div>}
            {i === 4 && <div style={{ background: 'var(--accent-dim)', color: 'var(--bordo)', fontSize: 8.5, padding: '3px 4px', borderRadius: 3, marginBottom: 3, borderLeft: '2px solid var(--accent)' }}>📁 Cevap</div>}
            {i === 5 && <div style={{ background: 'var(--bg-deep)', fontSize: 8, color: 'var(--ink-dim)', padding: '3px 4px', textAlign: 'center', borderRadius: 3 }}>—</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function VDragDrop() {
  return (
    <div style={{ ..._box, padding: '12px 14px', position: 'relative' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Tarihi Değiştir</div>
      <div style={{
        background: 'var(--accent-dim)', borderLeft: '2px solid var(--accent)',
        padding: '6px 10px', fontSize: 11.5, marginBottom: 6, color: 'var(--ink)',
        cursor: 'grabbing', boxShadow: '0 8px 16px -8px rgba(0,0,0,0.4)',
        transform: 'rotate(-1deg)',
      }}>📁 2024/3312 · Cevap dilekçesi</div>
      <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-mute)', marginTop: 6 }}>
        15.04 → <span style={{ color: 'var(--olive)' }}>22.04</span>
      </div>
      <div style={{ marginTop: 8, padding: '8px 10px', background: 'var(--bg-deep)', border: '1px solid var(--line-2)', borderRadius: 4, fontSize: 10.5 }}>
        <div style={{ color: 'var(--ink-dim)', marginBottom: 3 }}>Erteleme nedeni:</div>
        <div style={{ color: 'var(--ink-body)', fontStyle: 'italic' }}>"Müvekkil ile görüşme ertelendi"</div>
      </div>
    </div>
  );
}

function VHearing() {
  return (
    <div style={{ ..._box, padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{ ..._mono, fontSize: 10, color: 'var(--bordo)', fontWeight: 600 }}>14:00</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>Ön İnceleme Duruşması</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginBottom: 10 }}>İstanbul 4. Asliye · 2024/E. 1457</div>
      <div style={{ background: 'var(--bg-deep)', border: '1px solid var(--accent-soft)', borderRadius: 6, padding: '10px 12px', fontSize: 11, color: 'var(--ink-body)', lineHeight: 1.55 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 9, color: 'var(--bordo)', marginBottom: 4 }}>✦ AI Hazırlık</div>
        Bilirkişi raporuna karşı itiraz dilekçesi sunulması gerekmekte. Karşı tarafın 14.03 tarihli beyanına atıfla, KDV hariç ifadesinin geçersizliği vurgulanmalı.
      </div>
    </div>
  );
}

function VTaskBadges() {
  const items = [
    { ico: '✓', l: 'İş Takibi', n: 12, c: 'var(--accent)' },
    { ico: '⚖', l: 'Duruşmalar', n: 3,  c: 'var(--bordo)' },
    { ico: '✉', l: 'Tebligatlar', n: 2,  c: 'var(--olive)' },
    { ico: '📅', l: 'Takvim', n: 8,  c: 'var(--ink-mute)' },
  ];
  return (
    <div style={{ ..._box, padding: 10 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '7px 8px', borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none', borderRadius: 4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-body)', fontSize: 11.5 }}>
            <span style={{ width: 18, textAlign: 'center', color: it.c }}>{it.ico}</span>
            <span>{it.l}</span>
          </div>
          <span style={{ ..._mono, fontSize: 10, padding: '1px 7px', background: 'var(--accent-dim)', color: 'var(--bordo)', borderRadius: 8, fontWeight: 600 }}>{it.n}</span>
        </div>
      ))}
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 4: UYAP & TEBLİGAT
// ════════════════════════════════════════════════════════════════════

function VAgentLog() {
  return (
    <div style={{ ..._box, padding: '12px 14px', ..._mono, fontSize: 11, color: 'var(--ink-mute)', lineHeight: 1.7 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, paddingBottom: 8, borderBottom: '1px solid var(--line)' }}>
        <span className="live-dot" />
        <span style={{ fontSize: 9.5, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-dim)' }}>Titan Agent · ofis PC</span>
      </div>
      <div>→ login <span style={{ color: 'var(--olive)' }}>✓</span> · 5/5 oturum aktif</div>
      <div>→ sorgu <span style={{ color: 'var(--ink)' }}>2024/3312</span> bulundu</div>
      <div>→ 8 evrak indiriliyor <span style={{ color: 'var(--accent-hover)' }}>3/8</span></div>
      <div>→ OCR queue · 3 paralel worker</div>
    </div>
  );
}

function VBackendAgent() {
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
        <span style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Otomasyon · Gece 00:30</span>
        <span style={{ fontSize: 9, color: 'var(--olive)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>● Çalışıyor</span>
      </div>
      <div style={{ ..._mono, fontSize: 10.5, color: 'var(--ink-mute)', lineHeight: 1.7 }}>
        <div>→ 142 dosya tarandı · <span style={{ color: 'var(--olive)' }}>34 yeni evrak</span></div>
        <div>→ <span style={{ color: 'var(--bordo)' }}>2 yeni tebligat</span> · görev oluşturuldu</div>
        <div>→ OCR + özet pipeline · 89% bitti</div>
        <div>→ Sonraki çalışma: <span style={{ color: 'var(--ink)' }}>yarın 00:30</span></div>
      </div>
    </div>
  );
}

function VTebligat() {
  return (
    <div style={{ ..._box }}>
      {[
        { d: '29.04', t: 'Bilirkişi Raporu Tebliği', f: '2024/3312 · Karadeniz İnş.', dl: '5 iş günü', n: true },
        { d: '24.04', t: 'Cevap Süresi Tebliği',     f: '2024/2891 · Yılmaz A.',     dl: '15 gün',    n: false },
      ].map((t, i) => (
        <div key={i} style={{ padding: '12px 14px', borderBottom: i ? 'none' : '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            {t.n && <span style={{ background: 'var(--bordo)', color: 'white', fontSize: 8, padding: '1px 6px', borderRadius: 8, fontWeight: 700, letterSpacing: '0.05em' }}>YENİ</span>}
            <span style={{ ..._mono, fontSize: 10, color: 'var(--ink-dim)' }}>{t.d}</span>
            <span style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 600 }}>{t.t}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--ink-mute)' }}>
            <span>{t.f}</span>
            <span style={{ color: 'var(--bordo)' }}>⏱ {t.dl}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function VUdfImza() {
  return (
    <div style={{ ..._box, padding: '14px 16px', ..._mono, fontSize: 11, color: 'var(--ink-mute)', lineHeight: 1.8 }}>
      <div>→ dilekce.udf · <span style={{ color: 'var(--ink)' }}>yüklendi</span></div>
      <div>→ content.xml çıkarıldı <span style={{ color: 'var(--olive)' }}>✓</span></div>
      <div>→ SHA-256 hash hesaplandı <span style={{ color: 'var(--olive)' }}>✓</span></div>
      <div>→ ArkSigner · USB e-imza <span style={{ color: 'var(--olive)' }}>✓</span></div>
      <div>→ CAdES-BES paketlendi <span style={{ color: 'var(--olive)' }}>✓</span></div>
      <div>→ UYAP'a iletildi · <span style={{ color: 'var(--accent-hover)' }}>200 OK</span></div>
    </div>
  );
}

function VEvrakTree() {
  return (
    <div style={{ ..._box, padding: 10, ..._mono, fontSize: 10.5, color: 'var(--ink-body)', lineHeight: 1.7 }}>
      <div>📁 <span style={{ color: 'var(--ink)' }}>2024/3312 — Hukuk Tevzi</span></div>
      <div style={{ paddingLeft: 14 }}>├ 01 · Dava Dilekçesi <span style={{ color: 'var(--ink-dim)' }}>(12.01.24)</span></div>
      <div style={{ paddingLeft: 14 }}>├ 02 · Cevap Dilekçesi <span style={{ color: 'var(--ink-dim)' }}>(02.03.24)</span></div>
      <div style={{ paddingLeft: 14, color: 'var(--bordo)' }}>├ 03 · Bilirkişi Raporu <span style={{ color: 'var(--ink-dim)' }}>(28.04.24)</span></div>
      <div style={{ paddingLeft: 28 }}>└ 03.1 · Ek-1 Hesap Tablosu</div>
      <div style={{ paddingLeft: 14 }}>└ 04 · Tebliğ Mazbatası</div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 5: AI MODÜLLERİ
// ════════════════════════════════════════════════════════════════════

function VKararV3() {
  const dbs = [
    { n: 'Yargıtay', c: 'yuksek' }, { n: 'BAM HK', c: 'yuksek' }, { n: 'Danıştay', c: 'yuksek' },
    { n: 'Anayasa', c: 'yuksek' }, { n: 'Rekabet', c: 'kurum' }, { n: 'KVKK', c: 'kurum' },
    { n: 'Sayıştay', c: 'yuksek' }, { n: 'BDDK', c: 'kurum' }, { n: 'Sigorta T.', c: 'kurum' },
  ];
  const cm = {
    yuksek: { bg: 'var(--accent-dim)', c: 'var(--bordo)', bd: 'var(--accent-soft)' },
    kurum:  { bg: 'var(--bordo-dim)', c: 'var(--bordo)', bd: 'rgba(96,165,250,0.25)' },
  };
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Karar Arama V3 · Agentic</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 10 }}>
        {dbs.map((d, i) => {
          const c = cm[d.c];
          return <span key={i} className="dash-pill" style={{ fontSize: 9.5, padding: '2px 7px', background: c.bg, color: c.c, borderColor: c.bd }}>{d.n}</span>;
        })}
        <span className="dash-pill" style={{ fontSize: 9.5, padding: '2px 7px' }}>+5</span>
      </div>
      <div style={{ ..._mono, fontSize: 10, color: 'var(--ink-mute)', borderTop: '1px solid var(--line)', paddingTop: 8 }}>
        <div>→ 4 ardışık tool call</div>
        <div>→ <span style={{ color: 'var(--olive)' }}>14 karar</span> bulundu, 9'u tezi destekliyor</div>
        <div>→ Rapor üretiliyor...</div>
      </div>
    </div>
  );
}

function VTezDog() {
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Tez Doğrulama</div>
      <div style={{ background: 'var(--bg-deep)', borderLeft: '2px solid var(--ink-dim)', padding: '6px 10px', fontSize: 11, color: 'var(--ink-body)', fontStyle: 'italic', marginBottom: 10 }}>
        "İşçinin haklı feshinde 6 aylık ücret tutarında ihbar talep edilebilir."
      </div>
      {[
        { l: 'Doğrudan destek', n: 4, c: 'var(--olive)' },
        { l: 'Dolaylı destek',  n: 7, c: 'var(--accent)' },
        { l: 'Karşı görüş',     n: 2, c: 'var(--bordo)' },
        { l: 'Hakem skoru',     n: '78/100', c: 'var(--ink)', big: true },
      ].map((r, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, padding: '4px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
          <span style={{ color: 'var(--ink-mute)' }}>{r.l}</span>
          <span style={{ color: r.c, fontWeight: r.big ? 700 : 600, ..._mono, fontSize: r.big ? 12 : 11 }}>{r.n}</span>
        </div>
      ))}
    </div>
  );
}

function VFloatingChat() {
  return (
    <div style={{ position: 'relative', height: 160 }}>
      <div style={{ position: 'absolute', bottom: 0, right: 0, width: 220, ..._box, background: 'var(--bg-deep)', boxShadow: '0 12px 32px -8px rgba(0,0,0,0.4)' }}>
        <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--line-2)', fontSize: 10, color: 'var(--ink-dim)', display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ ..._mono, color: 'var(--bordo)' }}>2024/3312 · Karadeniz</span>
          <span>⋯</span>
        </div>
        <div style={{ padding: '10px 12px', fontSize: 11, color: 'var(--ink-body)', lineHeight: 1.5 }}>
          Karşı tarafın <strong>kdv hariç</strong> ifadesi taraflarca onaylandı.{' '}
          <span style={{ color: 'var(--accent-hover)', fontStyle: 'italic' }}>(Bkz: Beyan - 02.04)</span>
        </div>
        <div style={{ padding: '8px 10px', borderTop: '1px solid var(--line-2)', fontSize: 10, color: 'var(--ink-dim)' }}>Mesaj yaz...</div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, right: 0, transform: 'translate(50%, 50%)', width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-btn)', color: 'white', fontSize: 16 }}>✦</div>
    </div>
  );
}

function VSummary() {
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <span style={{ ..._mono, fontSize: 9, color: 'var(--ink-dim)' }}>📄</span>
        <span style={{ fontSize: 11, color: 'var(--ink)', fontWeight: 600 }}>Bilirkişi Raporu</span>
        <span style={{ ..._mono, fontSize: 9, color: 'var(--ink-dim)', marginLeft: 'auto' }}>28.04.24</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-body)', lineHeight: 1.55, marginBottom: 8 }}>
        Müvekkilin uğradığı zarar <strong style={{ color: 'var(--ink)' }}>184.250 TL</strong> olarak hesaplanmış. Karşı tarafın savunmasındaki indirim talebi reddedilmiş. Sorumluluk oranı %80 müvekkil lehine.
      </div>
      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
        {['184.250 TL', 'Av. Ahmet Yılmaz', '12.04.2024', '%80 lehe'].map((t, i) => (
          <span key={i} className="dash-pill" style={{ fontSize: 9, padding: '2px 6px' }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function VPdf() {
  // Tema uyumlu: var token'larla render, sağ üstte kırmızı PDF rozeti gerçek hissi verir
  return (
    <div style={{ ..._box, padding: 0, position: 'relative' }}>
      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ ..._mono, fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-dim)' }}>İçtihat Raporu · 30.04.2025</div>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', marginTop: 4 }}>İşçi Alacakları — Yargıtay 9. HD</div>
      </div>
      <div style={{ padding: '10px 16px', fontSize: 10, color: 'var(--ink-body)', lineHeight: 1.65 }}>
        <div style={{ fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--olive)', marginBottom: 4, fontWeight: 600 }}>Lehe Kararlar (5)</div>
        <div style={{ marginBottom: 2 }}>• 2023/14528 · 6 aylık ihbar tazminatı <em style={{ color: 'var(--ink)', fontStyle: 'normal', fontWeight: 600 }}>kabul edildi</em>...</div>
        <div>• 2022/8932 · İşçinin <em style={{ color: 'var(--ink)', fontStyle: 'normal', fontWeight: 600 }}>haklı feshi</em> tespiti...</div>
        <div style={{ fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bordo)', marginTop: 8, marginBottom: 4, fontWeight: 600 }}>Aleyhe Görüşler (2)</div>
        <div>• 2023/991 · Sözleşmenin nitelendirilmesi...</div>
      </div>
      <div style={{ position: 'absolute', top: 10, right: 10, ..._mono, fontSize: 8.5, padding: '2px 7px', background: 'var(--crit)', color: 'white', borderRadius: 3, fontWeight: 700, letterSpacing: '0.05em' }}>PDF</div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// KATEGORİ 6: YÖNETİM & GÜVENLİK
// ════════════════════════════════════════════════════════════════════

function VYzKullanim() {
  return (
    <div style={{ ..._box, padding: '12px 14px' }}>
      <div style={{ fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>YZ Kullanımı · Bu Ay</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
        <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>$24.50</span>
        <span style={{ fontSize: 11, color: 'var(--ink-mute)' }}>/ $30 limit</span>
      </div>
      <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-deep)', overflow: 'hidden', marginBottom: 10 }}>
        <div style={{ height: '100%', width: '82%', background: 'var(--warn)', borderRadius: 3 }} />
      </div>
      {[
        { l: 'Karar Arama V3', n: '$14.20', p: 58 },
        { l: 'Floating Chat',  n: '$5.40',  p: 22 },
        { l: 'OCR + özet',     n: '$3.10',  p: 13 },
        { l: 'Diğer',          n: '$1.80',  p: 7 },
      ].map((r, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, padding: '3px 0' }}>
          <span style={{ color: 'var(--ink-mute)' }}>{r.l}</span>
          <span style={{ ..._mono, color: 'var(--ink-body)' }}>{r.n}</span>
        </div>
      ))}
    </div>
  );
}

function VRoles() {
  const roles = [
    { r: 'Admin',    p: 'Tüm yetki — sistem ayarları, loglar', c: 'var(--bordo)' },
    { r: 'Yönetici', p: 'Silme + kullanıcı yönetimi (admin hariç)', c: 'var(--warn)' },
    { r: 'Avukat',   p: 'Oluşturma + düzenleme. Silme yok.', c: 'var(--accent)' },
  ];
  return (
    <div style={{ ..._box }}>
      {roles.map((r, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '11px 14px', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
          <span style={{ width: 4, alignSelf: 'stretch', background: r.c, borderRadius: 2 }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>{r.r}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-mute)', marginTop: 2 }}>{r.p}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function VAuditLog() {
  return (
    <div style={{ ..._box, padding: 10, ..._mono, fontSize: 10, color: 'var(--ink-mute)', lineHeight: 1.7 }}>
      <div><span style={{ color: 'var(--ink-dim)' }}>14:32</span> · ali.m · <span style={{ color: 'var(--bordo)' }}>record_delete</span> · 2024/E.892</div>
      <div><span style={{ color: 'var(--ink-dim)' }}>14:18</span> · gizem.e · <span style={{ color: 'var(--accent-hover)' }}>user_create</span> · onur.o</div>
      <div><span style={{ color: 'var(--ink-dim)' }}>13:54</span> · ali.m · <span style={{ color: 'var(--olive)' }}>login</span> · 192.168.1.43</div>
      <div><span style={{ color: 'var(--ink-dim)' }}>13:12</span> · ali.m · <span style={{ color: 'var(--bordo)' }}>uyap_archive_delete</span> · 2023/12</div>
      <div><span style={{ color: 'var(--ink-dim)' }}>11:08</span> · gizem.e · <span style={{ color: 'var(--warn)' }}>automation_trigger</span></div>
    </div>
  );
}

function VBildirimler() {
  return (
    <div style={{ ..._box }}>
      {[
        { i: '⚖', t: 'Yarın duruşma', s: '2024/3312 — 14:00', c: 'var(--bordo)', d: 'şimdi' },
        { i: '✉', t: 'Yeni tebligat', s: 'Bilirkişi raporu — Karadeniz', c: 'var(--accent)', d: '2 sa.' },
        { i: '✓', t: 'OCR tamamlandı', s: '8 evrak işlendi', c: 'var(--olive)', d: '5 sa.' },
      ].map((n, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '10px 14px', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
          <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--accent-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: n.c, fontSize: 12, flexShrink: 0 }}>{n.i}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11.5, color: 'var(--ink)', fontWeight: 600 }}>{n.t}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-mute)' }}>{n.s}</div>
          </div>
          <span style={{ ..._mono, fontSize: 9, color: 'var(--ink-dim)' }}>{n.d}</span>
        </div>
      ))}
    </div>
  );
}

function VMobile() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div style={{
        width: 120, height: 200,
        background: 'var(--bg-deep)',
        border: '8px solid var(--bg-card-2)',
        borderRadius: 18,
        padding: 8,
        boxShadow: '0 12px 32px -10px rgba(0,0,0,0.4)',
        position: 'relative',
      }}>
        <div style={{ position: 'absolute', top: 4, left: '50%', transform: 'translateX(-50%)', width: 24, height: 4, background: 'var(--bg-card-2)', borderRadius: 2 }} />
        <div style={{ marginTop: 8 }}>
          <div style={{ fontSize: 9, color: 'var(--ink)', fontWeight: 600 }}>İş Takibi</div>
          <div style={{ fontSize: 7, color: 'var(--ink-dim)', marginBottom: 6 }}>12 aktif görev</div>
          {[1, 2, 3, 4].map(i => (
            <div key={i} style={{ background: 'var(--bg-elev)', border: '1px solid var(--line-2)', borderRadius: 3, padding: '4px 6px', marginBottom: 3, fontSize: 7 }}>
              <div style={{ color: 'var(--ink)' }}>📁 2024/{3000 + i}00</div>
              <div style={{ color: 'var(--ink-dim)' }}>Cevap dilekçesi</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── window'a expose et ──────────────────────────────────────────────
Object.assign(window, {
  // Dosya
  VDosyaList, VDosyaDetail, VTahsilat, VMasraf, VTaraflar, VChat,
  // İş Takibi
  VChain, VTaskGroups, VAiOner, VBatchTask, VCompletedFeed,
  // Takvim
  VCalendarMonth, VCalendarWeek, VDragDrop, VHearing, VTaskBadges,
  // UYAP
  VAgentLog, VBackendAgent, VTebligat, VUdfImza, VEvrakTree,
  // AI
  VKararV3, VTezDog, VFloatingChat, VSummary, VPdf,
  // Yönetim
  VYzKullanim, VRoles, VAuditLog, VBildirimler, VMobile,
});