Update dependencies, enhance AI integration, and improve email content

- Added @google/genai dependency for enhanced AI capabilities.
- Updated CI workflow to include new environment variables for AI integration.
- Refactored AI client to support multiple providers and improved key management.
- Enhanced email templates for better user engagement and clarity.
- Updated error handling in AI-related functions to provide clearer feedback.
- Made various improvements to the application structure and code clarity.

src/lib/eposta.ts

@@ -3,14 +3,15 @@
  *
  * Kurallar: mail istemcileri harici CSS, <style> kuralı, flexbox ve SVG
  * desteğini güvenilir biçimde sunmaz — bu yüzden düzen tablo tabanlı ve tüm
- * stiller satır içi. Logo işareti de SVG yerine renkli hücrelerle yeniden
- * çizilir (Outlook masaüstü border-radius'u yok sayar; kareler köşeli görünür,
- * kabul edilebilir bozulma).
+ * stiller satır içi. Logo işareti sitedeki SVG'nin raster kopyası olan
+ * `/kolay-tercih-mark.png` ile gösterilir (SVG'yi Gmail/Outlook engeller).
+ * Web fontları (Bricolage Grotesque, Cal Sans) <link> ile progresif olarak
+ * yüklenir; desteklemeyen istemciler sistem yazı tipine düşer.
  */
 
+import { SITE_URL } from "./seo";
+
 const MAVI = "#3b82f6";
-const SEFTALI = "#fdc7a7";
-const TURUNCU = "#ff5a00";
 const LACIVERT = "#0f172b";
 const GRI = "#475569";
 const KENAR = "#e2e8f0";
@@ -18,6 +19,10 @@ const ZEMIN = "#f8fafc";
 
 const YAZI_TIPI =
   "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+/** Sitedeki başlıklar Cal Sans (--font-heading); destekleyen istemcide o görünür. */
+const BASLIK_TIPI = `'Cal Sans', ${YAZI_TIPI}`;
+/** Sitedeki kelime markası Bricolage Grotesque (font-bricolage). */
+const MARKA_TIPI = `'Bricolage Grotesque', ${YAZI_TIPI}`;
 
 export type EpostaIcerik = {
   subject: string;
@@ -34,33 +39,15 @@ function kacir(deger: string): string {
     .replace(/"/g, "&quot;");
 }
 
-/** Logo işareti: üç yuvarlak kare + KolayTercih kelime markası. */
+/** Logo: sitedeki işaretin raster kopyası + KolayTercih kelime markası. */
 function baslik(): string {
   return `
     <table role="presentation" cellpadding="0" cellspacing="0" border="0">
       <tr>
-        <td style="padding-right:8px;">
-          <table role="presentation" cellpadding="0" cellspacing="0" border="0">
-            <tr>
-              <td width="19" height="19" style="width:19px;height:19px;background-color:${MAVI};border-radius:5px;font-size:0;line-height:0;">&nbsp;</td>
-              <td width="4" style="width:4px;font-size:0;line-height:0;">&nbsp;</td>
-              <td>
-                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
-                  <tr>
-                    <td width="18" height="18" style="width:18px;height:18px;background-color:${SEFTALI};border-radius:5px;font-size:0;line-height:0;">&nbsp;</td>
-                  </tr>
-                  <tr>
-                    <td height="4" style="height:4px;font-size:0;line-height:0;">&nbsp;</td>
-                  </tr>
-                  <tr>
-                    <td width="18" height="18" style="width:18px;height:18px;background-color:${TURUNCU};border-radius:5px;font-size:0;line-height:0;">&nbsp;</td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
+        <td style="padding-right:6px;">
+          <img src="${SITE_URL}/kolay-tercih-mark.png" width="36" height="36" alt="" style="display:block;width:36px;height:36px;border:0;">
         </td>
-        <td style="font-family:${YAZI_TIPI};font-size:20px;letter-spacing:-0.5px;color:${LACIVERT};">
+        <td style="font-family:${MARKA_TIPI};font-size:22px;letter-spacing:-0.05em;color:${LACIVERT};">
           <span style="font-weight:300;">Kolay</span><span style="font-weight:600;">Tercih</span>
         </td>
       </tr>
@@ -84,7 +71,9 @@ function kabuk({
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="color-scheme" content="light">
-<title>KolayTercih</title>
+<title>Merhaba, giriş bağlantını gönderdik</title>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,600&family=Cal+Sans&display=swap" rel="stylesheet">
 </head>
 <body style="margin:0;padding:0;background-color:${ZEMIN};">
   <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;font-size:1px;line-height:1px;">${onizleme}</div>
@@ -129,8 +118,8 @@ function buton(url: string, etiket: string): string {
 export function magicLinkEpostasi(url: string): EpostaIcerik {
   const guvenliUrl = kacir(url);
   const govde = `
-    <h1 style="margin:0 0 12px;font-family:${YAZI_TIPI};font-size:22px;line-height:1.35;font-weight:700;color:${LACIVERT};">
-      Giriş bağlantın hazır
+    <h1 style="margin:0 0 12px;font-family:${BASLIK_TIPI};font-size:22px;line-height:1.35;font-weight:700;color:${LACIVERT};">
+      Merhaba, giriş bağlantını gönderdik
     </h1>
     <p style="margin:0 0 24px;">
       Aşağıdaki butona tıklayarak KolayTercih hesabına giriş yapabilirsin.
@@ -148,13 +137,13 @@ export function magicLinkEpostasi(url: string): EpostaIcerik {
     </div>`;
 
   return {
-    subject: "KolayTercih giriş bağlantın",
+    subject: "Merhaba, giriş bağlantını gönderdik",
     html: kabuk({
       onizleme: "Giriş bağlantın 5 dakika geçerli.",
       govde,
     }),
     text: [
-      "KolayTercih giriş bağlantın",
+      "Merhaba, giriş bağlantını gönderdik",
       "",
       "Hesabına giriş yapmak için bu adresi tarayıcında aç:",
       url,