<?php
/**
 * Veritabanı Bağlantı Ayarları
 */
$host = 'localhost';
$dbname = 'univs';
$username = 'root';
$password = 'Z15454drfdll8r8drtG';

/**
 * Türkçe karakterleri temizleyip URL dostu (slug) yapan fonksiyon
 */
function createSlug($str) {
    $turkce = array("ş", "Ş", "ı", "ü", "Ü", "ö", "Ö", "ç", "Ç", "ş", "Ş", "ı", "ğ", "Ğ", "İ", "ö", "Ö", "Ç", "ç", "ü", "Ü");
    $duzgun = array("s", "s", "i", "u", "u", "o", "o", "c", "c", "s", "s", "i", "g", "g", "i", "o", "o", "c", "c", "u", "u");
    $str = str_replace($turkce, $duzgun, $str);
    $str = mb_strtolower($str, 'UTF-8');
    $str = preg_replace('/[^a-z0-9]/', '-', $str);
    $str = preg_replace('/-+/', '-', $str);
    return trim($str, '-');
}

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // İlk yükleme için (sayfa 1) verileri çekiyoruz
    $stmt = $pdo->query("SELECT Adi, EgitimTuru, ID FROM Meslekler ORDER BY Adi ASC LIMIT 20");
    $meslekler = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $error = "Veritabanı bağlantı hatası: " . $e->getMessage();
    $meslekler = [];
}
?>
<!doctype html>
<html lang="tr">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1345582547235607"
     crossorigin="anonymous"></script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Meslekler - 2026 Tercih Robotu</title>
  <meta name="description" content="Meslek listesi ve detaylı bilgiler." />
  <meta name="theme-color" content="#0b2a5b" />

<link rel="icon" href="https://tercihrobotu.com.tr/duyurular/wp-content/uploads/2026/01/ico.png" sizes="32x32" />
<link rel="icon" href="https://tercihrobotu.com.tr/duyurular/wp-content/uploads/2026/01/ico.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://tercihrobotu.com.tr/duyurular/wp-content/uploads/2026/01/ico.png" />
<meta name="msapplication-TileImage" content="https://tercihrobotu.com.tr/duyurular/wp-content/uploads/2026/01/ico.png" />
  
  <link rel="stylesheet" href="/css/styles.css?v=8" />
  <script defer src="/css/main.js?v=8"></script>

  <style>
    .meslek-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    .meslek-card-link {
        text-decoration: none !important;
        color: inherit !important;
        display: block !important;
        cursor: pointer !important;
    }
    .meslek-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 20px;
        text-align: left;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .meslek-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        border-color: #0b2a5b;
        background-color: #fcfcfc;
    }
    .meslek-name {
        font-size: 16px;
        font-weight: bold;
        color: #0b2a5b;
        margin: 0;
    }
    .meslek-type-label {
        font-size: 13px;
        color: #666;
        margin-top: 8px;
        display: inline-block;
        background: #f0f4f8;
        padding: 2px 8px;
        border-radius: 4px;
    }
    .error-msg {
        color: #721c24;
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        padding: 10px;
        border-radius: 4px;
    }
    .filter-section {
        margin: 20px 0;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #eee;
    }
    .search-box {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 15px;
        margin-bottom: 15px;
        outline: none;
        transition: border-color 0.2s;
    }
    .search-box:focus {
        border-color: #0b2a5b;
    }
    .filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
    }
    .filter-item {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 8px 15px;
        border-radius: 20px;
        border: 1px solid #ddd;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;
        font-size: 14px;
    }
    .filter-item:hover {
        border-color: #0b2a5b;
        background: #f0f4f8;
    }
    .filter-item input {
        margin-right: 10px;
        cursor: pointer;
    }
    .filter-item.active {
        background: #0b2a5b;
        color: #fff;
        border-color: #0b2a5b;
    }
    .loading-spinner {
        text-align: center;
        padding: 20px;
        display: none;
    }
  </style>
</head>

<body>
  <div class="topbar">
    <div class="container">
     <div class="topbar-inner">
        <a class="brand" href="/" aria-label="Tercih Robotu Ana Sayfa">
          <img class="brand-logo" src="/css/logo.png" alt="Tercih Robotu Logo" loading="eager" />
        </a>

        <div class="topbar-ad" aria-label="Sponsor">
          <a class="topbar-ad-link" href="/step1.php" aria-label="Sponsor - Step 1"><img class="topbar-ad-img" src="/a.png" alt="Sponsor" loading="eager" /></a>
        </div>

        <div class="social" aria-label="Sosyal Medya">
                  <a href="https://www.instagram.com/tercihrobotucom/" target="_blank" rel="noopener" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.2A3.8 3.8 0 1 1 8.2 12 3.8 3.8 0 0 1 12 8.2zm0 2A1.8 1.8 0 1 0 13.8 12 1.8 1.8 0 0 0 12 10.2zM17.6 6.7a.8.8 0 1 1-.8-.8.8.8 0 0 1 .8.8z"/></svg>
                  </a>
                  <a href="https://x.com/tercihrobotucom/" target="_blank" rel="noopener" aria-label="X">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.9 2H22l-6.8 7.8L23 22h-6.7l-5.2-6.4L5.6 22H2l7.3-8.4L1.5 2h6.8l4.7 5.7L18.9 2zm-1.2 18h1.7L6.2 3.9H4.4L17.7 20z"/></svg>
                  </a>
                  <a href="https://www.youtube.com/user/tercihrobotu/" target="_blank" rel="noopener" aria-label="YouTube">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21.6 7.2a3 3 0 0 0-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8zM10 15.2V8.8L16 12l-6 3.2z"/></svg>
                  </a>
                  <a href="https://www.facebook.com/tercihrobotucom/" target="_blank" rel="noopener" aria-label="Facebook">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.5 1.6-1.5h1.6V4.9c-.3 0-1.4-.1-2.7-.1-2.7 0-4.6 1.6-4.6 4.6V11H7v3h2.8v8h3.7z"/></svg>
                  </a>
                </div>
      </div>
    </div>
  </div>

 <!-- Mobilde: logo + sosyal aynı kalsın, sponsor (a.png) menünün üstünde görünsün -->
  <div class="mobile-top-ad" aria-label="Sponsor">
    <div class="container">
      <div class="mobile-top-ad-inner">
        <a class="mobile-top-ad-link" href="/step1.php" aria-label="Sponsor - Step 1"><img class="mobile-top-ad-img" src="/a.png" alt="Sponsor" loading="eager" /></a>
      </div>
    </div>
  </div>

  <nav class="nav" aria-label="Ana Menü">
    <div class="container">
      <div class="nav-inner">
        <button class="hamburger" id="hamburger" aria-controls="menu" aria-expanded="false">Menü</button>
        <div class="menu" id="menu">
          <a href="/" aria-current="page">Ana Sayfa</a>
    
		    <a href="/universiteler/">Üniversiteler</a>
          <a href="/bolumler/">Bölümler</a>
          <a href="/meslekler/">Meslekler</a>
          <a href="/tercihte-12-kural/">Tercihte 12 Kural</a>

        </div>
      </div>
    </div>
  </nav>




  <!-- MOBIL SPONSORLAR (Menünün hemen altında) -->
  <div class="mobile-sponsors" aria-label="Sponsorlar">
    <div class="container">
      <div class="mobile-sponsors-grid">
        <div class="ad-box">
          <div class="sponsor-badge" role="note" aria-label="Sponsor"><span>SPONSOR</span></div>
          <div class="ad-slot">
            <a class="ad-img-link" href="https://aday.esenyurt.edu.tr/?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Mobil Sponsor 1">
              <img src="/1-m.jpg" alt="Mobil Sponsor 1" loading="lazy">
            </a>
          </div>
        </div>

        <div class="ad-box">
          <div class="sponsor-badge" role="note" aria-label="Sponsor"><span>SPONSOR</span></div>
          <div class="ad-slot">
            <a class="ad-img-link" href="https://www.emu.edu.tr/ogrenciadaylari?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Mobil Sponsor 2">
              <img src="/2-m.jpg" alt="Mobil Sponsor 2" loading="lazy">
            </a>
          </div>
        </div>

        <div class="ad-box">
          <div class="sponsor-badge" role="note" aria-label="Sponsor"><span>SPONSOR</span></div>
          <div class="ad-slot">
            <a class="ad-img-link" href="https://aday.sanko.edu.tr/?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Mobil Sponsor 3">
              <img src="/3-m.jpg" alt="Mobil Sponsor 3" loading="lazy">
            </a>
          </div>
        </div>

        <div class="ad-box">
          <div class="sponsor-badge" role="note" aria-label="Sponsor"><span>SPONSOR</span></div>
          <div class="ad-slot">
            <a class="ad-img-link" href="https://run.admost.com/adx/goto.ashx?pbk=532117-379644-65342" aria-label="Mobil Sponsor 4">
              <img src="/4-m.jpg" alt="Mobil Sponsor 4" loading="lazy">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

<main class="container">
    <div class="layout">
      <div class="maincol">
          <div class="hero-decor" aria-hidden="true"></div>

          <br><br>

          <h1>Meslekler</h1>

          <div class="filter-section">
              <input type="text" id="search-box" class="search-box" placeholder="Meslek adını veya puan türünü giriniz.">
              
              <strong>Eğitim Türü Seçin:</strong>
              <div class="filter-group" id="type-filters">
                  <label class="filter-item"><input type="checkbox" class="meslek-type-cb" value="Lisans"> Lisans</label>
                  <label class="filter-item"><input type="checkbox" class="meslek-type-cb" value="Önlisans"> Önlisans</label>
              </div>
          </div>

       <?php if (isset($error)): ?>
              <div class="error-msg"><?php echo $error; ?></div>
          <?php endif; ?>

          <div class="meslek-list" id="meslek-list">
              <?php if (!empty($meslekler)): ?>
                  <?php foreach ($meslekler as $m): ?>
                      <?php 
                        $slug = createSlug($m['Adi']);
                        $link = "https://tercihrobotu.com.tr/" . $slug . "-meslegi-" . $m['ID'] . "/";
                      ?>
                      <a href="<?php echo $link; ?>" class="meslek-card-link">
                          <div class="meslek-card">
                              <p class="meslek-name"><?php echo htmlspecialchars($m['Adi']); ?></p>
                              <p class="meslek-type-label"><?php echo htmlspecialchars($m['EgitimTuru']); ?></p>
                          </div>
                      </a>
                  <?php endforeach; ?>
              <?php else: ?>
                  <p>Henüz meslek kaydı bulunamadı.</p>
              <?php endif; ?>
          </div>

          <div id="loading" class="loading-spinner">
              <p>Daha fazla meslek yükleniyor...</p>
          </div>
      </div>
     <aside class="sidebar" aria-label="Sponsor Alanları">
        <div class="ad-box">
                            <div class="sponsor-badge" role="note" aria-label="Sponsor">
                <span>SPONSOR</span>
              </div>

<div class="ad-slot">
  <a class="ad-img-link" href="https://aday.esenyurt.edu.tr/?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Sponsor 1">
    <img src="/1.jpg" alt="Sponsor 1" loading="lazy">
  </a>
</div>
        </div>

        <div class="ad-box">
                            <div class="sponsor-badge" role="note" aria-label="Sponsor">
                <span>SPONSOR</span>
              </div>

<div class="ad-slot">
  <a class="ad-img-link" href="https://www.emu.edu.tr/ogrenciadaylari?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Sponsor 2">
    <img src="/2.jpg" alt="Sponsor 2" loading="lazy">
  </a>
</div>
        </div>

        <div class="ad-box">
                            <div class="sponsor-badge" role="note" aria-label="Sponsor">
                <span>SPONSOR</span>
              </div>

<div class="ad-slot">
  <a class="ad-img-link" href="https://aday.sanko.edu.tr/?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Sponsor 3">
    <img src="/3.jpg" alt="Sponsor 3" loading="lazy">
  </a>
</div>
        </div>

        <div class="ad-box">
                            <div class="sponsor-badge" role="note" aria-label="Sponsor">
                <span>SPONSOR</span>
              </div>

<div class="ad-slot">
  <a class="ad-img-link" href="https://run.admost.com/adx/goto.ashx?pbk=532117-379644-65342" aria-label="Sponsor 4">
    <img src="/4.jpg" alt="Sponsor 4" loading="lazy">
  </a>
</div>
        </div>

        <div class="ad-box">
                            <div class="sponsor-badge" role="note" aria-label="Sponsor">
                <span>SPONSOR</span>
              </div>

<div class="ad-slot">
  <a class="ad-img-link" href="https://ciu.edu.tr/tr/aday-ogrenci/tc-adaylar?utm_source=TercihRobotu&utm_medium=Banner&utm_campaign=YKS2025" aria-label="Sponsor 5">
    <img src="/5.jpg" alt="Sponsor 5" loading="lazy">
  </a>
</div>
        </div>
      </aside>

    </div>
  </main>


  <footer>
    <div class="container">
      <div class="footer-links" aria-label="Alt Menü">
        <a href="/hakkimizda/">Hakkımızda</a>
        <a href="/kullanim-kosullari/">Kullanım Koşulları</a>
        <a href="/gizlilik-bildirimi/">Gizlilik Bildirimi</a>
        <a href="/sss/">Sıkça Sorulan Sorular</a>
        <a href="/yasal-uyari/">Yasal Uyarı</a>
        <a href="/bize-ulasin/">Bize Ulaşın</a>
      </div>

      <div class="footer-meta">
        <div class="footer-brand">Tercih Robotu bir Es Eğitim Danışmanlık markasıdır.</div>
        <div class="copyright">Copyright © 2026</div>
      </div>
    </div>
  </footer>

  <button class="to-top" id="toTop" aria-label="Yukarı çık">⬆️</button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
        const meslekList = document.getElementById('meslek-list');
        const loading = document.getElementById('loading');
        const checkboxes = document.querySelectorAll('.meslek-type-cb');
        const searchBox = document.getElementById('search-box');
        
        let page = 2; 
        let isLoading = false;
        let hasMore = true;
        let searchTimeout;

        function createSlug(text) {
            const trMap = {
                'ş': 's', 'Ş': 's', 'ı': 'i', 'I': 'i', 'ü': 'u', 'Ü': 'u', 'ö': 'o', 'Ö': 'o', 'ç': 'c', 'Ç': 'c', 'ğ': 'g', 'Ğ': 'g', 'İ': 'i'
            };
            for (let key in trMap) {
                text = text.replace(new RegExp(key, 'g'), trMap[key]);
            }
            return text.toLowerCase()
                .replace(/[^-a-zA-Z0-9\s]+/g, '') 
                .replace(/\s+/g, '-') 
                .replace(/-+/g, '-') 
                .trim();
        }

        function getSelectedTypes() {
            let selected = [];
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    selected.push(cb.value);
                }
            });
            return selected;
        }

        async function loadMeslekler() {
            if (isLoading || !hasMore) return;
            
            isLoading = true;
            loading.style.display = 'block';

            try {
                const selectedTypes = getSelectedTypes();
                const typesParam = selectedTypes.join(',');
                const searchParam = searchBox.value;
                
                const response = await fetch(`get_meslekler.php?page=${page}&types=${encodeURIComponent(typesParam)}&search=${encodeURIComponent(searchParam)}`);
                const data = await response.json();

                if (data && data.length > 0) {
                    data.forEach(m => {
                        const slug = createSlug(m.Adi);
                        const link = `https://tercihrobotu.com.tr/${slug}-meslegi-${m.ID}/`;
                        const cardHtml = `
                            <a href="${link}" class="meslek-card-link">
                                <div class="meslek-card">
                                    <p class="meslek-name">${m.Adi}</p>
                                    <p class="meslek-type-label">${m.EgitimTuru}</p>
                                </div>
                            </a>
                        `;
                        meslekList.insertAdjacentHTML('beforeend', cardHtml);
                    });
                    page++;
                    setTimeout(checkAndLoadMore, 50);
                } else {
                    hasMore = false;
                    if (page === 1 && meslekList.children.length === 0) {
                        meslekList.innerHTML = '<p style="grid-column: 1/-1; text-align: center; padding: 20px;">Aranan kriterlere uygun meslek bulunamadı.</p>';
                    }
                }
            } catch (error) {
                console.error('Hata:', error);
            } finally {
                isLoading = false;
                loading.style.display = 'none';
            }
        }

        function checkAndLoadMore() {
            if (!hasMore || isLoading) return;

            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = document.documentElement.clientHeight;
            const scrollPos = window.innerHeight + window.scrollY;
            
            if (scrollHeight <= clientHeight + 100 || scrollPos >= scrollHeight - 1200) {
                loadMeslekler();
            }
        }

        function resetAndLoad() {
            page = 1;
            hasMore = true;
            meslekList.innerHTML = '';
            loadMeslekler();
        }

        window.addEventListener('scroll', checkAndLoadMore);
        window.addEventListener('resize', checkAndLoadMore);

        checkboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                if (this.checked) {
                    this.parentElement.classList.add('active');
                } else {
                    this.parentElement.classList.remove('active');
                }
                resetAndLoad();
            });
        });

        searchBox.addEventListener('input', () => {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(resetAndLoad, 500);
        });

        const initialLoadInterval = setInterval(() => {
            if (!hasMore || page > 5) {
                clearInterval(initialLoadInterval);
            }
            checkAndLoadMore();
        }, 300);

        setTimeout(() => clearInterval(initialLoadInterval), 5000);
    });
  </script>
  
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TLZ841LTVZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TLZ841LTVZ');
</script>
</body>
</html>
