<?php
/**
 * ceviri.php - aahaber.com Anında Çoklu Çeviri Servisi 1.0 (SEO & Dil Çifti Uyumlu)
 * 
 * Google, Yandex, Bing, Lingva ve Cambridge/ECDict Sözlük motorlarını tek
 * arayüzde birleştiren, otomatik dil algılamalı, sesli tercüme ve dinamik URL SEO aracı.
 */

// 1. Slug Temizleme Fonksiyonu
if (!function_exists('aahaber_slugify')) {
    function aahaber_slugify($text) {
        $char_map = [
            'İ' => 'i', 'I' => 'i', 'ı' => 'i',
            'Ğ' => 'g', 'ğ' => 'g',
            'Ü' => 'u', 'ü' => 'u',
            'Ş' => 's', 'ş' => 's',
            'Ö' => 'o', 'ö' => 'o',
            'Ç' => 'c', 'ç' => 'c'
        ];
        $text = strtr($text, $char_map);
        $text = strtolower($text);
        $text = preg_replace('/[^a-z0-9]+/i', '-', $text);
        return trim($text, '-');
    }
}

// 2. 100+ Dil Tanımları (Popüler Diller En Başta)
$popular_languages = [
    'tr' => 'Türkçe',
    'en' => 'İngilizce (English)',
    'de' => 'Almanca (Deutsch)',
    'ru' => 'Rusça (Русский)',
    'fr' => 'Fransızca (Français)',
    'es' => 'İspanyolca (Español)',
    'ar' => 'Arapça (العربية)',
    'it' => 'İtalyanca (Italiano)',
    'az' => 'Azerbaycan Türkçesi',
    'fa' => 'Farsça (فارسی)',
    'pt' => 'Portekizce (Português)',
    'zh' => 'Çince (Basitleştirilmiş)',
    'ja' => 'Japonca (日本語)',
    'ko' => 'Korece (한국어)',
    'nl' => 'Felemenkçe (Nederlands)',
    'el' => 'Yunanca (Ελληνικά)',
    'uk' => 'Ukraynaca (Українська)'
];

$world_languages = [
    'af' => 'Afrikaans',
    'sq' => 'Arnavutça (Shqip)',
    'am' => 'Amharca',
    'hy' => 'Ermenice',
    'eu' => 'Baskça',
    'be' => 'Belarusça',
    'bn' => 'Bengalce',
    'bs' => 'Boşnakça',
    'bg' => 'Bulgarca',
    'my' => 'Burmaca (Myanmar)',
    'ca' => 'Katalanca',
    'ceb' => 'Sebuanca',
    'co' => 'Korsikaca',
    'hr' => 'Hırvatça',
    'cs' => 'Çekçe',
    'da' => 'Danca',
    'eo' => 'Esperanto',
    'et' => 'Estonca',
    'fi' => 'Fince',
    'fy' => 'Frizce',
    'gl' => 'Galiçyaca',
    'ka' => 'Gürcüce',
    'gu' => 'Guceratça',
    'ht' => 'Haiti Kreyolu',
    'ha' => 'Hausaca',
    'haw' => 'Hawaiice',
    'he' => 'İbranice',
    'hi' => 'Hintçe',
    'hmn' => 'Hmongca',
    'hu' => 'Macarca',
    'is' => 'İzlandaca',
    'ig' => 'İgboca',
    'id' => 'Endonezce',
    'ga' => 'İrlandaca',
    'jw' => 'Cava Dili',
    'kn' => 'Kannada',
    'kk' => 'Kazakça',
    'km' => 'Kmer Dili',
    'rw' => 'Kinyarwanda',
    'ku' => 'Kürtçe (Kurmanji)',
    'ky' => 'Kırgızca',
    'lo' => 'Laoca',
    'la' => 'Latince',
    'lv' => 'Letonca',
    'lt' => 'Litvanca',
    'lb' => 'Lüksemburgca',
    'mk' => 'Makedonca',
    'mg' => 'Malgaşça',
    'ms' => 'Malayca',
    'ml' => 'Malayalam',
    'mt' => 'Maltaca',
    'mi' => 'Maorice',
    'mr' => 'Marathice',
    'mn' => 'Moğolca',
    'ne' => 'Nepalce',
    'no' => 'Norveççe',
    'ny' => 'Nyanja',
    'or' => 'Oriyaca',
    'ps' => 'Peştuca',
    'pl' => 'Lehçe (Polonyaca)',
    'pa' => 'Pencapça',
    'ro' => 'Romence',
    'sm' => 'Samoaca',
    'gd' => 'İskoçça (Kelt)',
    'sr' => 'Sırpça',
    'st' => 'Sesothoca',
    'sn' => 'Şonaca',
    'sd' => 'Sindhice',
    'si' => 'Seylanca (Sinhala)',
    'sk' => 'Slovakça',
    'sl' => 'Slovence',
    'so' => 'Somalice',
    'su' => 'Sundaca',
    'sw' => 'Svahili',
    'sv' => 'İsveççe',
    'tl' => 'Tagalogca (Filipince)',
    'tg' => 'Tacikçe',
    'ta' => 'Tamilce',
    'tt' => 'Tatarca',
    'te' => 'Teluguca',
    'th' => 'Tayca',
    'tk' => 'Türkmence',
    'ug' => 'Uygurca',
    'ur' => 'Urduca',
    'uz' => 'Özbekçe',
    'vi' => 'Vietnamca',
    'cy' => 'Galce',
    'xh' => 'Xhosaca',
    'yi' => 'Yidiş',
    'yo' => 'Yorubaca',
    'zu' => 'Zuluca'
];

$all_languages = array_merge($popular_languages, $world_languages);

// 3. Dil Kodu <-> Slug Eşleştirmesi (SEO URL'ler için)
$lang_slug_map = [
    'tr' => 'turkce',
    'en' => 'ingilizce',
    'de' => 'almanca',
    'tt' => 'tatarca',
    'ru' => 'rusca',
    'fr' => 'fransizca',
    'es' => 'ispanyolca',
    'ar' => 'arapca',
    'it' => 'italyanca',
    'az' => 'azerice',
    'fa' => 'farsca',
    'pt' => 'portekizce',
    'zh' => 'cince',
    'ja' => 'japonca',
    'ko' => 'korece',
    'nl' => 'felemenkce',
    'el' => 'yunanca',
    'uk' => 'ukraynaca',
    'ku' => 'kurtce',
    'hy' => 'ermenice',
    'ka' => 'gurcuce',
    'bg' => 'bulgarca',
    'pl' => 'lehce',
    'ro' => 'romence',
    'sv' => 'isvecce',
    'no' => 'norvecce',
    'da' => 'danca',
    'fi' => 'fince',
    'hu' => 'macarca',
    'cs' => 'cekce',
    'sk' => 'slovakca',
    'sr' => 'sirpca',
    'hr' => 'hirvatca',
    'bs' => 'bosnakca',
    'sq' => 'arnavutca',
    'he' => 'ibranice',
    'hi' => 'hintce',
    'id' => 'endonezce',
    'vi' => 'vietnamca'
];

$slug_to_lang_code = array_flip($lang_slug_map);
// Otomatik yedek sluglar
foreach ($all_languages as $c => $n) {
    if (!isset($lang_slug_map[$c])) {
        $c_name = preg_replace('/\s*\(.*?\)/', '', $n);
        $s = aahaber_slugify($c_name);
        $lang_slug_map[$c] = $s;
        if (!isset($slug_to_lang_code[$s])) {
            $slug_to_lang_code[$s] = $c;
        }
    }
    $slug_to_lang_code[$c] = $c;
}

// 4. URL Parametrelerini Çözümle (pair / slug / sl / tl)
$raw_pair = trim($_GET['pair'] ?? $_GET['slug'] ?? $_GET['p'] ?? '');
if (empty($raw_pair) && !empty($_SERVER['REQUEST_URI'])) {
    if (preg_match('#/ceviri/([a-zA-Z0-9_-]+)#i', $_SERVER['REQUEST_URI'], $m)) {
        $raw_pair = $m[1];
    }
}

$active_sl = 'auto';
$active_tl = 'en';

if (!empty($raw_pair)) {
    $clean_pair = preg_replace('/-ceviri$/i', '', $raw_pair);
    $parts = explode('-', $clean_pair);
    if (count($parts) >= 2) {
        $s_slug = $parts[0];
        $t_slug = $parts[1];
        if (isset($slug_to_lang_code[$s_slug])) {
            $active_sl = $slug_to_lang_code[$s_slug];
        }
        if (isset($slug_to_lang_code[$t_slug])) {
            $active_tl = $slug_to_lang_code[$t_slug];
        }
    } elseif (count($parts) === 1 && isset($slug_to_lang_code[$parts[0]])) {
        $active_tl = $slug_to_lang_code[$parts[0]];
    }
} else {
    if (!empty($_GET['sl'])) {
        $s_code = strtolower(trim($_GET['sl']));
        if (isset($all_languages[$s_code]) || $s_code === 'auto') {
            $active_sl = $s_code;
        }
    }
    if (!empty($_GET['tl'])) {
        $t_code = strtolower(trim($_GET['tl']));
        if (isset($all_languages[$t_code])) {
            $active_tl = $t_code;
        }
    }
}

// 5. Dinamik SEO Başlık, Açıklama, Canonical & Karşılama Cümlesi
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
$host = $_SERVER['HTTP_HOST'] ?? 'localhost:8095';

$source_name = ($active_sl === 'auto') ? 'Otomatik Algıla' : ($all_languages[$active_sl] ?? strtoupper($active_sl));
$source_clean_name = preg_replace('/\s*\(.*?\)/', '', $source_name);

$target_name = $all_languages[$active_tl] ?? strtoupper($active_tl);
$target_clean_name = preg_replace('/\s*\(.*?\)/', '', $target_name);

$sample_greetings = [
    'tr' => 'merhaba. sitemize hoş geldiniz.',
    'en' => 'hello. welcome to our website.',
    'de' => 'Hallo, wie geht es dir?',
    'tt' => 'Сәлам, хәлләр ничек?',
    'ru' => 'Привет, как дела?',
    'fr' => 'Bonjour, comment allez-vous?',
    'es' => 'Hola, ¿cómo estás?',
    'ar' => 'مرحبا، كيف حالك؟',
    'it' => 'Ciao, come stai?',
    'az' => 'Salam, xoş gəlmisiniz.'
];

$initial_source_text = $sample_greetings[$active_sl] ?? ($sample_greetings['tr'] ?? 'merhaba. sitemize hoş geldiniz.');

$is_custom_pair = ($active_sl !== 'auto' || $active_tl !== 'en');

if ($is_custom_pair && $active_sl !== 'auto') {
    $pair_slug = ($lang_slug_map[$active_sl] ?? $active_sl) . '-' . ($lang_slug_map[$active_tl] ?? $active_tl);
    $page_title = "{$source_clean_name} {$target_clean_name} Çeviri — AAHaber Çeviri Servisi 1.0";
    $page_desc = "{$source_clean_name}'den {$target_clean_name}'ye anında online çeviri yapın. Google, Yandex, Bing ve Sözlük motorlarıyla karşılaştırmalı sonuçlar, sesli telaffuz ve sözlük karşılıkları.";
    $page_keywords = "{$source_clean_name} {$target_clean_name} çeviri, {$source_clean_name}ce {$target_clean_name}ce tercüme, {$pair_slug}-ceviri, online sözlük";
    $canonical_url = $protocol . $host . '/ceviri.php?pair=' . $pair_slug . '-ceviri';
    $breadcrumb_title = "{$source_clean_name} - {$target_clean_name} Çeviri";
} else {
    $pair_slug = 'turkce-ingilizce';
    $page_title = "Anında Çoklu Çeviri — AAHaber Çeviri Servisi 1.0";
    $page_desc = "Google, Yandex, Bing ve Sözlük motorlarıyla 100+ dilde anında metin çevirisi, otomatik dil algılama ve sesli okuma.";
    $page_keywords = "aahaber çeviri, anında çeviri, google translate, yandex çeviri, bing çeviri, sözlük, ingilizce türkçe çeviri";
    $canonical_url = $protocol . $host . '/ceviri.php';
    $breadcrumb_title = "AAHaber Çeviri Servisi 1.0";
}

$page_active = "ceviri";
$search_placeholder = "Çevrilecek kelime veya metin ara...";

$schema_json = [
    "@context" => "https://schema.org",
    "@type" => "WebApplication",
    "name" => $page_title,
    "url" => $canonical_url,
    "description" => $page_desc,
    "applicationCategory" => "UtilitiesApplication",
    "operatingSystem" => "All",
    "offers" => [
        "@type" => "Offer",
        "price" => "0",
        "priceCurrency" => "TRY"
    ]
];

$extra_js = ['ceviri.js?v=3.0'];

require_once __DIR__ . '/ust.php';
?>

<div class="pot-translate-page">

  <!-- Üst Bilgi ve Breadcrumb Şeridi -->
  <div class="pot-page-header">
    <div class="pot-breadcrumb">
      <a href="index.php">Haberler</a>
      <span>&rsaquo;</span>
      <span class="active-crumb"><?= htmlspecialchars($breadcrumb_title) ?></span>
    </div>

    <div class="pot-badges-row">
      <span class="pot-badge pot-badge-multi">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
        Çoklu Motor: Google, Yandex, Bing, Lingva &amp; Sözlük
      </span>
      <span class="pot-badge pot-badge-auto">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"></path></svg>
        Auto Detect (Otomatik Dil Tespiti)
      </span>
      <span class="pot-badge pot-badge-tts">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
        100+ Dilde Doğal Sesli Dinleme (TTS)
      </span>
    </div>
  </div>

  <!-- Ana İki Kolonlu Düzen -->
  <div class="pot-main-layout">

    <!-- SOL / ORTA: Pot Pencere Kartı -->
    <div class="pot-window-wrapper">
      <div class="pot-window-card" id="potWindowCard">

        <!-- Pencere Üst Barı (Pin & Pencere Butonları) -->
        <div class="pot-window-header">
          <div class="pot-window-header-left">
            <button type="button" class="pot-win-btn pot-pin-btn" id="potPinBtn" title="Pencereyi Sabitle / Pinle" aria-label="Sabitle">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                <line x1="12" y1="17" x2="12" y2="22"></line>
                <path d="M5 17h14v-2l-2-3V5a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7l-2 3v2z"></path>
              </svg>
            </button>
            <div class="pot-win-title">
              <span class="pot-mini-logo">AA</span>
              <span class="pot-win-name"><?= htmlspecialchars($is_custom_pair && $active_sl !== 'auto' ? $source_clean_name . ' ➔ ' . $target_clean_name : 'AAHaber Çeviri Servisi') ?></span>
              <span class="pot-ver-pill">v1.0</span>
            </div>
          </div>

          <div class="pot-window-header-right">
            <!-- Doğrudan Çeviri Motoru Seçicisi (Tek Tıkla Doğrudan Seçim) -->
            <div class="pot-engine-inline-toggles" id="potEngineInlineToggles" role="group" aria-label="Çeviri Motorları">
              <button type="button" class="pot-engine-pill active" data-engine="google" title="Google Translate (Aç / Kapat)">
                <span class="pot-pill-dot dot-google"></span>
                <span class="pot-pill-name">Google</span>
              </button>
              <button type="button" class="pot-engine-pill active" data-engine="yandex" title="Yandex Çeviri (Aç / Kapat)">
                <span class="pot-pill-dot dot-yandex"></span>
                <span class="pot-pill-name">Yandex</span>
              </button>
              <button type="button" class="pot-engine-pill" data-engine="bing" title="Microsoft Bing Translator (Aç / Kapat)">
                <span class="pot-pill-dot dot-bing"></span>
                <span class="pot-pill-name">Bing</span>
              </button>
              <button type="button" class="pot-engine-pill" data-engine="lingva" title="Lingva Açık Motor (Aç / Kapat)">
                <span class="pot-pill-dot dot-lingva"></span>
                <span class="pot-pill-name">Lingva</span>
              </button>
            </div>

            <!-- Temizle Butonu -->
            <button type="button" class="pot-win-btn" id="potClearAllBtn" title="Girdiyi ve Sonuçları Temizle" aria-label="Temizle">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
              </svg>
            </button>
          </div>
        </div>

        <!-- Çeviri Modu Seçici (Çoklu Motor vs Çoklu Dil) -->
        <div class="pot-mode-nav-bar">
          <div class="pot-mode-tabs" role="tablist" aria-label="Çeviri Modları">
            <button type="button" class="pot-mode-tab active" id="potModeEngineTab" data-mode="engine" role="tab" aria-selected="true" title="Google, Yandex, Bing ve Lingva motorlarını karşılaştır">
              <span class="pot-mode-icon">⚡</span>
              <span class="pot-mode-title">Çoklu Motor</span>
              <span class="pot-mode-hint">(Google, Yandex, Bing, Lingva)</span>
            </button>
            <button type="button" class="pot-mode-tab" id="potModeMultiLangTab" data-mode="multilang" role="tab" aria-selected="false" title="Aynı metni 5 dünya diline anında çevir">
              <span class="pot-mode-icon">🌐</span>
              <span class="pot-mode-title">Çoklu Dil Modu</span>
              <span class="pot-mode-hint">(5 Dile Anında Çeviri)</span>
              <span class="pot-mode-new-pill">YENİ</span>
            </button>
          </div>
        </div>

        <!-- 1. Kaynak Metin Alanı (Source Box) -->
        <div class="pot-source-box">
          <textarea 
            id="potSourceInput" 
            class="pot-source-textarea" 
            placeholder="Çevrilecek metni veya kelimeyi buraya yazın ya da yapıştırın... (Enter ile çevir)"
            rows="3"
            maxlength="5000"
            spellcheck="false"
          ><?= htmlspecialchars($initial_source_text) ?></textarea>

          <!-- Kaynak Alt Araç Çubuğu -->
          <div class="pot-source-toolbar">
            <div class="pot-source-tools-left">
              <!-- Sesli Oku -->
              <button type="button" class="pot-tool-btn" id="potSourceTtsBtn" title="Kaynak Metni Sesli Dinle" aria-label="Sesli Dinle">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
              </button>
              <!-- Kopyala -->
              <button type="button" class="pot-tool-btn" id="potSourceCopyBtn" title="Metni Panoya Kopyala" aria-label="Kopyala">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
              </button>
              <!-- Temizle (Backspace ikonu) -->
              <button type="button" class="pot-tool-btn" id="potSourceEraseBtn" title="Metni ve Sonuçları Temizle" aria-label="Temizle">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                  <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
                  <line x1="18" y1="9" x2="12" y2="15"></line>
                  <line x1="12" y1="9" x2="18" y2="15"></line>
                </svg>
              </button>

              <!-- Tespit Edilen Dil Rozeti (Pill) -->
              <div class="pot-detected-badge" id="potDetectedBadge" title="Otomatik Algılanan Dil">
                <span class="pot-dot-indicator"></span>
                <span id="potDetectedText"><?= htmlspecialchars($source_clean_name) ?></span>
              </div>
            </div>

            <div class="pot-source-tools-right">
              <span class="pot-char-count" id="potCharCount"><?= mb_strlen($initial_source_text, 'UTF-8') ?>/5000</span>
              <button type="button" class="pot-translate-btn" id="potTranslateSubmitBtn" title="Çeviriyi Başlat">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15">
                  <path d="m5 8 6 6"></path>
                  <path d="m4 14 6-6 2-3"></path>
                  <path d="M2 5h12"></path>
                  <path d="M7 2h1"></path>
                  <path d="m22 22-5-10-5 10"></path>
                  <path d="M14 18h6"></path>
                </svg>
                <span>Çevir</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 2. Dil Seçim & Değiştirme Barı -->
        <div class="pot-lang-bar">
          <!-- Kaynak Dil Dropdown -->
          <div class="pot-lang-select-wrap">
            <select id="potSourceLangSelect" class="pot-lang-select" aria-label="Kaynak Dil">
              <option value="auto" <?= $active_sl === 'auto' ? 'selected' : '' ?>>Auto Detect (Otomatik Algıla)</option>
              <optgroup label="⭐ Popüler Diller">
                <?php foreach ($popular_languages as $code => $name): ?>
                  <option value="<?= $code ?>" <?= $active_sl === $code ? 'selected' : '' ?>><?= htmlspecialchars($name) ?></option>
                <?php endforeach; ?>
              </optgroup>
              <optgroup label="🌐 Tüm Dünya Dilleri">
                <?php foreach ($world_languages as $code => $name): ?>
                  <option value="<?= $code ?>" <?= $active_sl === $code ? 'selected' : '' ?>><?= htmlspecialchars($name) ?></option>
                <?php endforeach; ?>
              </optgroup>
            </select>
          </div>

          <!-- Dil Değiştir (Swap) Butonu (Sadece Çoklu Motor Modunda) -->
          <button type="button" class="pot-swap-btn" id="potSwapBtn" title="Dilleri Değiştir (Ctrl+Shift+S)" aria-label="Dilleri Değiştir">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
              <line x1="20" y1="17" x2="4" y2="17"></line>
              <polyline points="10 21 4 17 10 13"></polyline>
              <line x1="4" y1="7" x2="20" y2="7"></line>
              <polyline points="14 3 20 7 14 11"></polyline>
            </svg>
          </button>

          <!-- Hedef Dil Dropdown (Çoklu Motor Modunda) -->
          <div class="pot-lang-select-wrap" id="potTargetSelectWrap">
            <select id="potTargetLangSelect" class="pot-lang-select" aria-label="Hedef Dil">
              <optgroup label="⭐ Popüler Diller">
                <?php foreach ($popular_languages as $code => $name): ?>
                  <option value="<?= $code ?>" <?= $active_tl === $code ? 'selected' : '' ?>><?= htmlspecialchars($name) ?></option>
                <?php endforeach; ?>
              </optgroup>
              <optgroup label="🌐 Tüm Dünya Dilleri">
                <?php foreach ($world_languages as $code => $name): ?>
                  <option value="<?= $code ?>" <?= $active_tl === $code ? 'selected' : '' ?>><?= htmlspecialchars($name) ?></option>
                <?php endforeach; ?>
              </optgroup>
            </select>
          </div>

          <!-- Çoklu Dil Modu Hedef Seçici Hapları (Pills) -->
          <div class="pot-multilang-bar-wrap" id="potMultiLangBarWrap">
            <div class="pot-multilang-pills-row">
              <span class="pot-multilang-pill-label">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                Hedef Diller (4-5 Dil):
              </span>
              <button type="button" class="pot-multilang-pill active" data-lang="en">
                <span>🇬🇧 İngilizce</span>
                <span class="pot-pill-check">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill active" data-lang="de">
                <span>🇩🇪 Almanca</span>
                <span class="pot-pill-check">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill active" data-lang="ru">
                <span>🇷🇺 Rusça</span>
                <span class="pot-pill-check">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill active" data-lang="fr">
                <span>🇫🇷 Fransızca</span>
                <span class="pot-pill-check">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill active" data-lang="es">
                <span>🇪🇸 İspanyolca</span>
                <span class="pot-pill-check">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill" data-lang="ar">
                <span>🇸🇦 Arapça</span>
                <span class="pot-pill-check" style="display:none;">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill" data-lang="it">
                <span>🇮🇹 İtalyanca</span>
                <span class="pot-pill-check" style="display:none;">✓</span>
              </button>
              <button type="button" class="pot-multilang-pill" data-lang="az">
                <span>🇦🇿 Azerice</span>
                <span class="pot-pill-check" style="display:none;">✓</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 3. Sonuç Kartları (Result Engine Cards) -->
        <div class="pot-results-container" id="potResultsContainer">

          <!-- KART 1: Google Çeviri (Varsayılan Açık) -->
          <div class="pot-engine-card pot-engine-expanded" id="potGoogleCard" data-engine-id="google">
            <div class="pot-engine-header" data-toggle="potGoogleCard">
              <div class="pot-engine-header-left">
                <!-- Google Renkli Logo -->
                <span class="pot-engine-icon pot-google-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <path fill="#4285F4" d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.665-5.17 3.665-9.17z"/>
                    <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.25v3.15C3.26 21.36 7.33 24 12 24z"/>
                    <path fill="#FBBC05" d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.25C.45 8.18 0 9.99 0 12s.45 3.82 1.25 5.42l4.03-3.15z"/>
                    <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.33 0 3.26 2.64 1.25 6.58l4.03 3.15c.95-2.83 3.6-4.98 6.72-4.98z"/>
                  </svg>
                </span>
                <span class="pot-engine-title">Google</span>
                <span class="pot-engine-status-tag" id="potGoogleStatusTag">Hazır</span>
              </div>
              <div class="pot-engine-header-right">
                <button type="button" class="pot-chevron-btn" aria-label="Genişlet / Daralt">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg>
                </button>
              </div>
            </div>

            <div class="pot-engine-body">
              <div class="pot-output-text" id="potGoogleOutput">
                Can we add an online translation system to our php site? just like the program called pot
              </div>
              <div class="pot-engine-footer">
                <div class="pot-engine-footer-left">
                  <button type="button" class="pot-tool-btn" id="potGoogleTtsBtn" title="Sesli Oku" aria-label="Sesli Oku">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potGoogleCopyBtn" title="Çeviriyi Kopyala" aria-label="Kopyala">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potGoogleRetryBtn" title="Yeniden Çevir" aria-label="Yeniden Çevir">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polyline points="23 4 23 10 17 10"></polyline>
                      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                  </button>
                </div>
                <div class="pot-engine-footer-right">
                  <span class="pot-engine-badge-sub">Google Translate</span>
                </div>
              </div>
            </div>
          </div>

          <!-- KART 2: Yandex Çeviri (Varsayılan Açık) -->
          <div class="pot-engine-card pot-engine-expanded" id="potYandexCard" data-engine-id="yandex">
            <div class="pot-engine-header" data-toggle="potYandexCard">
              <div class="pot-engine-header-left">
                <!-- Yandex Kırmızı Logo -->
                <span class="pot-engine-icon pot-yandex-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <rect width="24" height="24" rx="4" fill="#fc3f1d"/>
                    <text x="4" y="17" font-family="'Plus Jakarta Sans', sans-serif" font-weight="900" font-size="14" fill="#ffffff">A</text>
                    <text x="12" y="17" font-family="'Plus Jakarta Sans', sans-serif" font-weight="900" font-size="11" fill="#ffffff">文</text>
                  </svg>
                </span>
                <span class="pot-engine-title">Yandex</span>
                <span class="pot-engine-status-tag" id="potYandexStatusTag">Hazır</span>
              </div>
              <div class="pot-engine-header-right">
                <button type="button" class="pot-chevron-btn" aria-label="Genişlet / Daralt">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg>
                </button>
              </div>
            </div>

            <div class="pot-engine-body">
              <div class="pot-output-text" id="potYandexOutput">
                can we add an online translation system to our php site? just like the program called pot
              </div>
              <div class="pot-engine-footer">
                <div class="pot-engine-footer-left">
                  <button type="button" class="pot-tool-btn" id="potYandexTtsBtn" title="Sesli Oku" aria-label="Sesli Oku">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potYandexCopyBtn" title="Çeviriyi Kopyala" aria-label="Kopyala">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potYandexRetryBtn" title="Yeniden Çevir" aria-label="Yeniden Çevir">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polyline points="23 4 23 10 17 10"></polyline>
                      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                  </button>
                </div>
                <div class="pot-engine-footer-right">
                  <span class="pot-engine-badge-sub">Yandex Engine</span>
                </div>
              </div>
            </div>
          </div>

          <!-- KART 3: Bing Translator (İsteğe Bağlı Açılır) -->
          <div class="pot-engine-card pot-engine-expanded" id="potBingCard" data-engine-id="bing" style="display: none;">
            <div class="pot-engine-header" data-toggle="potBingCard">
              <div class="pot-engine-header-left">
                <!-- Bing Mavi Logo -->
                <span class="pot-engine-icon pot-bing-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <path fill="#008373" d="M3.5 2v20l6.5-3.8 6.5 3.8V9.8l4 2.4V6.5L3.5 2z"/>
                    <path fill="#00a4ef" d="M10 5.8l6.5 4v8.4l-6.5-3.8V5.8z"/>
                  </svg>
                </span>
                <span class="pot-engine-title">Bing</span>
                <span class="pot-engine-status-tag" id="potBingStatusTag">Hazır</span>
              </div>
              <div class="pot-engine-header-right">
                <button type="button" class="pot-chevron-btn" aria-label="Genişlet / Daralt">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg>
                </button>
              </div>
            </div>

            <div class="pot-engine-body">
              <div class="pot-output-text" id="potBingOutput"></div>
              <div class="pot-engine-footer">
                <div class="pot-engine-footer-left">
                  <button type="button" class="pot-tool-btn" id="potBingTtsBtn" title="Sesli Oku" aria-label="Sesli Oku">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potBingCopyBtn" title="Çeviriyi Kopyala" aria-label="Kopyala">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potBingRetryBtn" title="Yeniden Çevir" aria-label="Yeniden Çevir">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polyline points="23 4 23 10 17 10"></polyline>
                      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                  </button>
                </div>
                <div class="pot-engine-footer-right">
                  <span class="pot-engine-badge-sub">Microsoft Translator</span>
                </div>
              </div>
            </div>
          </div>

          <!-- KART 4: Lingva Open Engine (İsteğe Bağlı Açılır) -->
          <div class="pot-engine-card pot-engine-expanded" id="potLingvaCard" data-engine-id="lingva" style="display: none;">
            <div class="pot-engine-header" data-toggle="potLingvaCard">
              <div class="pot-engine-header-left">
                <!-- Lingva Yeşil Logo -->
                <span class="pot-engine-icon pot-lingva-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <circle cx="12" cy="12" r="11" fill="#10b981"/>
                    <text x="6" y="16" font-family="'Plus Jakarta Sans', sans-serif" font-weight="900" font-size="12" fill="#ffffff">L</text>
                    <text x="13" y="16" font-family="'Plus Jakarta Sans', sans-serif" font-weight="900" font-size="10" fill="#ffffff">语</text>
                  </svg>
                </span>
                <span class="pot-engine-title">Lingva</span>
                <span class="pot-engine-status-tag" id="potLingvaStatusTag">Hazır</span>
              </div>
              <div class="pot-engine-header-right">
                <button type="button" class="pot-chevron-btn" aria-label="Genişlet / Daralt">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg>
                </button>
              </div>
            </div>

            <div class="pot-engine-body">
              <div class="pot-output-text" id="potLingvaOutput"></div>
              <div class="pot-engine-footer">
                <div class="pot-engine-footer-left">
                  <button type="button" class="pot-tool-btn" id="potLingvaTtsBtn" title="Sesli Oku" aria-label="Sesli Oku">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potLingvaCopyBtn" title="Çeviriyi Kopyala" aria-label="Kopyala">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                  </button>
                  <button type="button" class="pot-tool-btn" id="potLingvaRetryBtn" title="Yeniden Çevir" aria-label="Yeniden Çevir">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                      <polyline points="23 4 23 10 17 10"></polyline>
                      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                  </button>
                </div>
                <div class="pot-engine-footer-right">
                  <span class="pot-engine-badge-sub">Lingva Open Engine</span>
                </div>
              </div>
            </div>
          </div>

        </div> <!-- /#potResultsContainer -->

        <!-- 4. Çoklu Dil Sonuç Konteyneri (Multi-Language Mode) -->
        <div class="pot-multilang-container" id="potMultiLangContainer" style="display: none;">
          <!-- Dinamik olarak 5 dilde kartlar buraya render edilir -->
        </div>

      </div> <!-- /.pot-window-card -->
    </div> <!-- /.pot-window-wrapper -->

    <!-- SAĞ: Sözlük & Bilgi Yan Paneli -->
    <aside class="pot-side-panel">

      <!-- 1. ÜST: AAHaber Akıllı Çok Dilli Sözlük Kartı -->
      <div class="pot-dict-sidebar-card" id="potDictSidebarCard">
        <div class="pot-dict-sidebar-header">
          <div class="pot-dict-header-title">
            <span class="pot-dict-header-icon">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                <line x1="8" y1="6" x2="16" y2="6"></line>
                <line x1="8" y1="10" x2="14" y2="10"></line>
              </svg>
            </span>
            <span>AAHaber Sözlük</span>
          </div>
          <span class="pot-dict-badge" id="potDictBadge">Canlı Sözlük</span>
        </div>

        <div class="pot-dict-sidebar-body" id="potDictSidebarBody">
          <!-- Dinamik Kelime Başlığı & Fonetik & Ses -->
          <div class="pot-dict-word-hero" id="potDictWordHero" style="display: none;">
            <div class="pot-dict-word-meta">
              <span class="pot-dict-word-title" id="potDictWordTitle"></span>
              <span class="pot-dict-phonetic-badge" id="potDictPhonetic" style="display: none;"></span>
            </div>
            <button type="button" class="pot-dict-tts-btn" id="potDictTtsBtn" title="Kelimeyi Seslendir" aria-label="Seslendir">
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
              </svg>
            </button>
          </div>

          <!-- Sözlük Anlamları ve Eşanlamlılar Konteyneri -->
          <div class="pot-dict-entries" id="potDictEntries">
            <div class="pot-dict-placeholder" id="potDictPlaceholder">
              <div class="pot-dict-placeholder-icon">📖</div>
              <div class="pot-dict-placeholder-text">
                Detaylı sözlük karşılıkları, sözcük türü (isim, fiil, sıfat), fonetik okunuş ve eşanlamlılar için kelime girin.
              </div>
            </div>
          </div>

          <!-- Cümle Modu veya Hızlı Keşif Çipleri -->
          <div class="pot-dict-discovery" id="potDictDiscovery">
            <div class="pot-dict-discovery-title">Örnek Kelimeler:</div>
            <div class="pot-dict-sample-chips">
              <button type="button" class="pot-sample-chip" data-word="merhaba">merhaba</button>
              <button type="button" class="pot-sample-chip" data-word="haber">haber</button>
              <button type="button" class="pot-sample-chip" data-word="geliştirici">geliştirici</button>
              <button type="button" class="pot-sample-chip" data-word="özgürlük">özgürlük</button>
              <button type="button" class="pot-sample-chip" data-word="resilience">resilience</button>
              <button type="button" class="pot-sample-chip" data-word="innovation">innovation</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 2. ALT: AAHaber Çeviri Hakkında & Kısayollar Kartı -->
      <div class="pot-about-card">
        <div class="pot-about-hero">
          <div class="pot-about-big-logo">
            <span class="pot-logo-gradient">
              <svg viewBox="0 0 64 64" width="56" height="56">
                <defs>
                  <linearGradient id="potGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#14b8a6"/>
                    <stop offset="50%" stop-color="#3b82f6"/>
                    <stop offset="100%" stop-color="#eab308"/>
                  </linearGradient>
                </defs>
                <rect width="64" height="64" rx="18" fill="url(#potGrad)"/>
                <text x="11" y="44" font-family="'Outfit', sans-serif" font-weight="900" font-size="32" fill="#ffffff">AA</text>
              </svg>
            </span>
          </div>
          <h2 class="pot-about-title">AAHaber Çeviri Servisi</h2>
          <span class="pot-about-ver">Sürüm 1.0 • Web Edition</span>
          <p class="pot-about-desc">
            Çoklu servis mimarisi ile Google, Yandex ve Bing çeviri sonuçlarını tek ekranda anında karşılaştırın.
          </p>
        </div>

        <!-- Hızlı Kısayollar Listesi (Düzenli Boşluklar) -->
        <div class="pot-shortcuts-box">
          <div class="pot-shortcuts-title">Klavyeden Hızlı Kısayollar</div>
          <ul class="pot-shortcuts-list">
            <li>
              <div class="pot-keys-combo">
                <kbd>Ctrl</kbd>
                <span class="pot-key-plus">+</span>
                <kbd>Enter</kbd>
              </div>
              <span class="pot-key-desc">Anında Çevir</span>
            </li>
            <li>
              <div class="pot-keys-combo">
                <kbd>Ctrl</kbd>
                <span class="pot-key-plus">+</span>
                <kbd>Shift</kbd>
                <span class="pot-key-plus">+</span>
                <kbd>S</kbd>
              </div>
              <span class="pot-key-desc">Dilleri Değiştir (⇄)</span>
            </li>
            <li>
              <div class="pot-keys-combo">
                <kbd>Esc</kbd>
              </div>
              <span class="pot-key-desc">Metni Temizle</span>
            </li>
          </ul>
        </div>
      </div>

    </aside>

  </div> <!-- /.pot-main-layout -->

  <?php
  $seo_pair_groups = [
      [
          'title' => '🇹🇷 Türkçe Çeviri Varyasyonları',
          'desc' => 'En popüler Türkçe kaynaklı ve Türkçe hedefli çeviri çiftleri',
          'pairs' => [
              ['sl' => 'tr', 'tl' => 'en', 'name' => 'Türkçe ➔ İngilizce', 'slug' => 'turkce-ingilizce'],
              ['sl' => 'en', 'tl' => 'tr', 'name' => 'İngilizce ➔ Türkçe', 'slug' => 'ingilizce-turkce'],
              ['sl' => 'tr', 'tl' => 'de', 'name' => 'Türkçe ➔ Almanca', 'slug' => 'turkce-almanca'],
              ['sl' => 'de', 'tl' => 'tr', 'name' => 'Almanca ➔ Türkçe', 'slug' => 'almanca-turkce'],
              ['sl' => 'tr', 'tl' => 'ru', 'name' => 'Türkçe ➔ Rusça', 'slug' => 'turkce-rusca'],
              ['sl' => 'ru', 'tl' => 'tr', 'name' => 'Rusça ➔ Türkçe', 'slug' => 'rusca-turkce'],
              ['sl' => 'tr', 'tl' => 'fr', 'name' => 'Türkçe ➔ Fransızca', 'slug' => 'turkce-fransizca'],
              ['sl' => 'fr', 'tl' => 'tr', 'name' => 'Fransızca ➔ Türkçe', 'slug' => 'fransizca-turkce'],
              ['sl' => 'tr', 'tl' => 'ar', 'name' => 'Türkçe ➔ Arapça', 'slug' => 'turkce-arapca'],
              ['sl' => 'ar', 'tl' => 'tr', 'name' => 'Arapça ➔ Türkçe', 'slug' => 'arapca-turkce'],
              ['sl' => 'tr', 'tl' => 'es', 'name' => 'Türkçe ➔ İspanyolca', 'slug' => 'turkce-ispanyolca'],
              ['sl' => 'es', 'tl' => 'tr', 'name' => 'İspanyolca ➔ Türkçe', 'slug' => 'ispanyolca-turkce'],
              ['sl' => 'tr', 'tl' => 'it', 'name' => 'Türkçe ➔ İtalyanca', 'slug' => 'turkce-italyanca'],
              ['sl' => 'tr', 'tl' => 'az', 'name' => 'Türkçe ➔ Azerbaycan Türkçesi', 'slug' => 'turkce-azerice'],
              ['sl' => 'tr', 'tl' => 'tt', 'name' => 'Türkçe ➔ Tatarca', 'slug' => 'turkce-tatarca'],
              ['sl' => 'tt', 'tl' => 'tr', 'name' => 'Tatarca ➔ Türkçe', 'slug' => 'tatarca-turkce'],
              ['sl' => 'tr', 'tl' => 'zh', 'name' => 'Türkçe ➔ Çince', 'slug' => 'turkce-cince'],
              ['sl' => 'tr', 'tl' => 'fa', 'name' => 'Türkçe ➔ Farsça', 'slug' => 'turkce-farsca'],
              ['sl' => 'tr', 'tl' => 'uk', 'name' => 'Türkçe ➔ Ukraynaca', 'slug' => 'turkce-ukraynaca']
          ]
      ],
      [
          'title' => '🌐 Dünya Dilleri Varyasyonları',
          'desc' => 'Dünya dilleri arası doğrudan ve çapraz çeviri kombinasyonları',
          'pairs' => [
              ['sl' => 'en', 'tl' => 'de', 'name' => 'İngilizce ➔ Almanca', 'slug' => 'ingilizce-almanca'],
              ['sl' => 'de', 'tl' => 'en', 'name' => 'Almanca ➔ İngilizce', 'slug' => 'almanca-ingilizce'],
              ['sl' => 'de', 'tl' => 'tt', 'name' => 'Almanca ➔ Tatarca', 'slug' => 'almanca-tatarca'],
              ['sl' => 'tt', 'tl' => 'de', 'name' => 'Tatarca ➔ Almanca', 'slug' => 'tatarca-almanca'],
              ['sl' => 'en', 'tl' => 'tt', 'name' => 'İngilizce ➔ Tatarca', 'slug' => 'ingilizce-tatarca'],
              ['sl' => 'tt', 'tl' => 'en', 'name' => 'Tatarca ➔ İngilizce', 'slug' => 'tatarca-ingilizce'],
              ['sl' => 'ru', 'tl' => 'tt', 'name' => 'Rusça ➔ Tatarca', 'slug' => 'rusca-tatarca'],
              ['sl' => 'tt', 'tl' => 'ru', 'name' => 'Tatarca ➔ Rusça', 'slug' => 'tatarca-rusca'],
              ['sl' => 'en', 'tl' => 'ru', 'name' => 'İngilizce ➔ Rusça', 'slug' => 'ingilizce-rusca'],
              ['sl' => 'ru', 'tl' => 'en', 'name' => 'Rusça ➔ İngilizce', 'slug' => 'rusca-ingilizce'],
              ['sl' => 'en', 'tl' => 'fr', 'name' => 'İngilizce ➔ Fransızca', 'slug' => 'ingilizce-fransizca'],
              ['sl' => 'fr', 'tl' => 'en', 'name' => 'Fransızca ➔ İngilizce', 'slug' => 'fransizca-ingilizce'],
              ['sl' => 'en', 'tl' => 'es', 'name' => 'İngilizce ➔ İspanyolca', 'slug' => 'ingilizce-ispanyolca'],
              ['sl' => 'es', 'tl' => 'en', 'name' => 'İspanyolca ➔ İngilizce', 'slug' => 'ispanyolca-ingilizce'],
              ['sl' => 'en', 'tl' => 'ar', 'name' => 'İngilizce ➔ Arapça', 'slug' => 'ingilizce-arapca'],
              ['sl' => 'en', 'tl' => 'zh', 'name' => 'İngilizce ➔ Çince', 'slug' => 'ingilizce-cince'],
              ['sl' => 'en', 'tl' => 'ja', 'name' => 'İngilizce ➔ Japonca', 'slug' => 'ingilizce-japonca'],
              ['sl' => 'de', 'tl' => 'ru', 'name' => 'Almanca ➔ Rusça', 'slug' => 'almanca-rusca'],
              ['sl' => 'fr', 'tl' => 'de', 'name' => 'Fransızca ➔ Almanca', 'slug' => 'fransizca-almanca'],
              ['sl' => 'es', 'tl' => 'fr', 'name' => 'İspanyolca ➔ Fransızca', 'slug' => 'ispanyolca-fransizca']
          ]
      ]
  ];
  ?>

  <!-- SEO Dil Çiftleri ve Varyasyonlar Bölümü -->
  <section class="pot-seo-pairs-section" aria-label="Popüler Çeviri Çiftleri ve Dil Varyasyonları">
    <div class="pot-seo-header">
      <div class="pot-seo-header-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="2" y1="12" x2="22" y2="12"></line>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
        </svg>
      </div>
      <div class="pot-seo-header-text">
        <h2 class="pot-seo-title">Popüler Çeviri Çiftleri ve Dil Varyasyonları</h2>
        <p class="pot-seo-subtitle">Türkçe ve dünya dilleri arasında tek tıkla anında ve karşılaştırmalı çeviri yapın. Her dil çifti kendi özgün URL adresiyle indekslenir.</p>
      </div>
    </div>

    <div class="pot-seo-groups-grid">
      <?php foreach ($seo_pair_groups as $group): ?>
        <div class="pot-seo-group-card">
          <div class="pot-seo-group-header">
            <h3 class="pot-seo-group-title"><?= htmlspecialchars($group['title']) ?></h3>
            <span class="pot-seo-group-desc"><?= htmlspecialchars($group['desc']) ?></span>
          </div>
          <div class="pot-seo-chips-grid">
            <?php foreach ($group['pairs'] as $p): 
              $is_active_chip = ($active_sl === $p['sl'] && $active_tl === $p['tl']);
              $pair_url = 'ceviri.php?pair=' . urlencode($p['slug'] . '-ceviri');
            ?>
              <a href="<?= htmlspecialchars($pair_url) ?>" 
                 class="pot-seo-pair-link <?= $is_active_chip ? 'active-pair' : '' ?>"
                 data-sl="<?= htmlspecialchars($p['sl']) ?>"
                 data-tl="<?= htmlspecialchars($p['tl']) ?>"
                 data-slug="<?= htmlspecialchars($p['slug']) ?>"
                 title="<?= htmlspecialchars($p['name']) ?> Çeviri Servisi">
                <span class="pot-seo-pair-name"><?= htmlspecialchars($p['name']) ?></span>
                <span class="pot-seo-pair-badge"><?= $is_active_chip ? 'Aktif' : 'Çevir' ?></span>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      <?php endforeach; ?>
    </div>

    <!-- SEO Bilgi & Özellikler Kutusu -->
    <div class="pot-seo-features-banner">
      <div class="pot-seo-feature-item">
        <span class="pot-feat-icon">⚡</span>
        <div>
          <strong>Dinamik SEO URL Yapısı</strong>
          <p>Çeviri dili değiştikçe URL adresi anında güncellenir ve doğrudan paylaşılabilir.</p>
        </div>
      </div>
      <div class="pot-seo-feature-item">
        <span class="pot-feat-icon">🎯</span>
        <div>
          <strong>Çoklu Motor Doğrulaması</strong>
          <p>Google, Yandex, Bing ve Lingva motorlarından tek ekranda eş zamanlı sonuç.</p>
        </div>
      </div>
      <div class="pot-seo-feature-item">
        <span class="pot-feat-icon">🔊</span>
        <div>
          <strong>Doğal Sesli Telaffuz</strong>
          <p>Tüm kaynak ve hedef dillerde Web Speech API ile anında canlı telaffuz dinleme.</p>
        </div>
      </div>
      <div class="pot-seo-feature-item">
        <span class="pot-feat-icon">📚</span>
        <div>
          <strong>Entegre Akıllı Sözlük</strong>
          <p>Kelime türü (isim, fiil), fonetik okunuş ve eşanlamlı sözcük kartları.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Toast Bildirim Kutusu -->
  <div class="pot-toast" id="potToast" role="alert" aria-live="polite">Metin panoya kopyalandı!</div>

</div> <!-- /.pot-translate-page -->

<?php
require_once __DIR__ . '/alt.php';
