function Imza() {
  return (
    <section className="section container" id="imza">
      <div className="imza-grid">
        <div>
          <span className="kicker">uyap otomatik imza</span>
          <h2 style={{marginTop:16,marginBottom:20}}>USB e-imza ofiste, avukatlar her yerde</h2>
          <p style={{fontSize:17,marginBottom:16}}>Ofiste bir bilgisayara takılı bir e-imza yeter. Titan Agent, LAN'daki tüm avukatların dilekçelerini arka planda UYAP standardında imzalar ve UYAP'a iletir. İmza panosu gibi özel cihazlara ihtiyaç duymaz.</p>
          <ul style={{listStyle:'none',padding:0,margin:'28px 0 0',display:'flex',flexDirection:'column',gap:12}}>
            <li style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:14.5}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{color:'var(--accent)',flexShrink:0,marginTop:2}}><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span><strong>Beş kişi aynı anda çalışır.</strong> LAN'daki beş avukat eş zamanlı UYAP oturumu açabilir. USB e-imza ofiste tek noktada kalır.</span>
            </li>
            <li style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:14.5}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{color:'var(--accent)',flexShrink:0,marginTop:2}}><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span><strong>Kullanıcı butona basmaz.</strong> Dilekçe yükleyince agent otomatik imzalar, UYAP'a iletir. Ekstra adım yok.</span>
            </li>
            <li style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:14.5}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{color:'var(--accent)',flexShrink:0,marginTop:2}}><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span><strong>90 gün iz takibi.</strong> Her imzalama kaydedilir: hangi kullanıcı, hangi dilekçe, ne zaman. Admin panelden görülür.</span>
            </li>
            <li style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:14.5}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{color:'var(--accent)',flexShrink:0,marginTop:2}}><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span><strong>Bireysel avukat hesapları.</strong> Her avukat kendi kullanıcı adıyla girer, şifresiyle işlem yapar. Kaba kuvvet saldırısına karşı koruma.</span>
            </li>
          </ul>
        </div>

        <div className="imza-diagram">
          <span className="mono" style={{marginBottom:16,display:'block',color:'var(--bordo)'}}>§ Akış</span>
          <div className="imza-stage">
            <div className="imza-node">
              <div className="imza-node-icon" style={{color:'var(--ink-body)',background:'var(--bg-elev)',borderColor:'var(--line-2)'}}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M8 21h8M12 17v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </div>
              <div className="imza-node-main">
                <div className="imza-node-title">Avukat · LAN'daki 5 bilgisayar</div>
                <div className="imza-node-meta">dilekçe.udf yükleniyor</div>
              </div>
              <span className="imza-node-count">5</span>
            </div>
            <div className="imza-arrow">
              <svg width="22" height="28" viewBox="0 0 24 32" fill="none"><path d="M12 2v26M6 22l6 6 6-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span className="imza-arrow-label">LAN üzerinden</span>
            </div>
            <div className="imza-node center">
              <div className="imza-node-icon">
                <TitanHelmet size={22} />
              </div>
              <div className="imza-node-main">
                <div className="imza-node-title">Titan Agent · Ofis bilgisayarı</div>
                <div className="imza-node-meta">hash → e-imza → iletim</div>
              </div>
              <span className="live-dot"></span>
            </div>
            <div className="imza-arrow">
              <svg width="22" height="28" viewBox="0 0 24 32" fill="none"><path d="M12 2v26M6 22l6 6 6-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span className="imza-arrow-label">HTTPS</span>
            </div>
            <div className="imza-node">
              <div className="imza-node-icon" style={{color:'var(--bordo)',background:'var(--bordo-dim)',borderColor:'rgba(114,47,55,0.25)'}}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/><path d="M3 12h18M12 3c2.5 2.8 3.5 5.8 3.5 9S14.5 18.2 12 21c-2.5-2.8-3.5-5.8-3.5-9S9.5 5.8 12 3z" stroke="currentColor" strokeWidth="1.5"/></svg>
              </div>
              <div className="imza-node-main">
                <div className="imza-node-title">UYAP Avukat Portal</div>
                <div className="imza-node-meta">imzalı dilekçe · <span style={{color:'var(--olive)'}}>200 OK</span></div>
              </div>
            </div>
          </div>
          <div style={{marginTop:24,paddingTop:18,borderTop:'1px solid var(--line-3)',display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
            <div>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'var(--ink)',letterSpacing:'-0.01em'}}>~3sn</div>
              <div className="mono" style={{fontSize:10}}>imza süresi</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'var(--ink)',letterSpacing:'-0.01em'}}>5</div>
              <div className="mono" style={{fontSize:10}}>eş zamanlı oturum</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'var(--ink)',letterSpacing:'-0.01em'}}>90gün</div>
              <div className="mono" style={{fontSize:10}}>iz takip</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Imza = Imza;