<?php
require_once 'includes/security.php';
require_once 'config/veritabani.php';
secureSessionStart();
require_once __DIR__ . '/includes/i18n.php';
require_once __DIR__ . '/includes/seo.php';
$L = $TP_I18N[$tp_lang];
$db = getDBConnection();

// PERFORMANCE HEADERS
if (!ob_start("ob_gzhandler")) ob_start();
header("Cache-Control: public, max-age=3600");
header("X-Cache: MISS");

// Profil Resmi Check
$user_pp = null;
if (isset($_SESSION['musteri_id'])) {
    $pp_stmt = $db->prepare("SELECT profil_resmi FROM musteriler WHERE id = ?");
    $pp_stmt->execute([$_SESSION['musteri_id']]);
    $user_pp = $pp_stmt->fetchColumn();
}

// Metro Tiles Verileri
$metro_tours = [];
$metro_hotels = [];
$metro_bungalows = [];
$metro_isletmeler = [];

function tp_img_for_tile(?string $img, string $prefixDir): string
{
    $img = trim((string)($img ?? ''));
    if ($img === '') return '';
    if (stripos($img, 'http') === 0) return $img;
    if (stripos($img, 'gorsel/') === 0) return $img;
    return rtrim($prefixDir, '/') . '/' . ltrim($img, '/');
}

try {
    $t_res = $db->query("SELECT id, tur_adi, slug, indirimli_fiyat, normal_fiyat, kapak_resmi FROM turlar WHERE durum='aktif' AND (onerilen=1 OR one_cikar_durum='onaylandi') AND EXISTS (SELECT 1 FROM tur_tarihleri tt WHERE tt.tur_id = turlar.id AND tt.durum='aktif' AND tt.baslangic_tarihi >= CURDATE()) ORDER BY id DESC LIMIT 10");
    while ($r = $t_res->fetch()) {
        $f = ($r['indirimli_fiyat'] > 0) ? $r['indirimli_fiyat'] : $r['normal_fiyat'];
        $metro_tours[] = [
            'name' => $r['tur_adi'],
            'price' => number_format($f, 0, ',', '.') . ' TL',
            'img' => tp_img_for_tile($r['kapak_resmi'] ?? '', 'gorsel/turlar'),
            // Tur kartları "incele" ekranına gitsin
            'link' => 'turlar/tur-incele.php?id=' . (int)$r['id']
        ];
    }

    $h_res = $db->query("SELECT o.id, o.otel_adi, o.kapak_resmi, (SELECT MIN(normal_fiyat) FROM otel_oda_tipleri WHERE otel_id = o.id) as fiyat FROM oteller o WHERE o.durum='aktif' AND o.onay_durumu='onaylandi' AND o.otel_tipi='otel' ORDER BY id DESC LIMIT 8");
    while ($r = $h_res->fetch()) {
        $metro_hotels[] = [
            'name' => $r['otel_adi'],
            'price' => ($r['fiyat'] > 0 ? number_format($r['fiyat'], 0, ',', '.') . ' TL' : 'Fiyat Sorunuz'),
            'img' => tp_img_for_tile($r['kapak_resmi'] ?? '', 'gorsel/oteller'),
            'link' => 'oteller/otel-incele.php?id=' . (int)$r['id']
        ];
    }

    $b_res = $db->query("SELECT o.id, o.otel_adi, o.kapak_resmi, (SELECT MIN(normal_fiyat) FROM otel_oda_tipleri WHERE otel_id = o.id) as fiyat FROM oteller o WHERE o.durum='aktif' AND o.onay_durumu='onaylandi' AND o.otel_tipi='bungalov' ORDER BY id DESC LIMIT 10");
    while ($r = $b_res->fetch()) {
        $metro_bungalows[] = [
            'name' => $r['otel_adi'],
            'price' => ($r['fiyat'] > 0 ? number_format($r['fiyat'], 0, ',', '.') . ' TL' : 'Fiyat Sorunuz'),
            'img' => tp_img_for_tile($r['kapak_resmi'] ?? '', 'gorsel/oteller'),
            'link' => 'oteller/otel-incele.php?id=' . (int)$r['id']
        ];
    }

    $i_res = $db->query("SELECT id, isletme_adi, kapak_resmi, kategori FROM isletmeler WHERE durum='aktif' AND onay_durumu='onaylandi' ORDER BY id DESC LIMIT 10");
    while ($r = $i_res->fetch()) {
        $cat = mb_convert_case($r['kategori'], MB_CASE_TITLE, "UTF-8");
        $metro_isletmeler[] = [
            'name' => $r['isletme_adi'],
            'price' => $cat,
            'img' => tp_img_for_tile($r['kapak_resmi'] ?? '', 'gorsel/isletmeler'),
            'link' => 'isletmeler/isletme-incele.php?id=' . (int)$r['id']
        ];
    }

    $e_res = $db->query("SELECT id, ad, mekan, kapak_resmi, fiyat, tip FROM etkinlikler WHERE durum='aktif' AND onay_durumu='onaylandi' AND onerilen=1 ORDER BY id DESC LIMIT 10");
    $metro_events = [];
    while ($r = $e_res->fetch()) {
        $img = $r['kapak_resmi'];
        if (strpos($img, 'http') !== 0) {
            $img = 'gorsel/etkinlikler/' . $img;
        }
        $metro_events[] = [
            'name' => $r['ad'],
            'price' => ($r['fiyat'] > 0 ? number_format($r['fiyat'], 0, ',', '.') . ' TL' : 'Ücretsiz'),
            'img' => $img,
            'type' => $r['tip'],
            'link' => 'konser-tiyatro/etkinlik-detay.php?id=' . (int)$r['id']
        ];
    }
} catch (Exception $e) {
    // Metro tile hataları sayfayı durdurmasın
    
}
?>
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="/gorsel/girislogo/1.svg">
    <title>NEX14 — Turlar, Oteller, Uçak Bileti, Etkinlikler</title>
    <?php
    $nex14_public_base = rtrim($_ENV['BASE_URL'] ?? 'http://localhost/touriumprime/', '/');
    echo seo_meta([
        'title'       => 'NEX14 — Turlar, Oteller, Uçak Bileti, Etkinlikler',
        'description' => 'Yurt içi ve yurt dışı turlar, otel rezervasyonu, uçak bileti, araç kiralama ve etkinlik biletleri. NEX14 ile seyahatini planla.',
        'url'         => $nex14_public_base . '/',
    ]);
    ?>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/comfortaa.css?v=1.1">
    <!-- Base Layout Styles -->
    <link rel="stylesheet" href="stil/mosaic.css">
    
    <!-- PC Specific Styles -->
    <link rel="stylesheet" href="stil/pc/style.css?v=1.1">
    <link rel="stylesheet" href="stil/pc/search_bar.css?v=1.1">
    <link rel="stylesheet" href="stil/pc/footer.css?v=1.1">
    <link rel="stylesheet" href="stil/pc/rehberler.css?v=<?php echo filemtime(__DIR__ . '/stil/pc/rehberler.css'); ?>">
    <link rel="stylesheet" href="stil/pc/navigation_extras.css?v=1.1">

    <!-- Mobile Styles -->
    <link rel="stylesheet" href="stil/mobil/mobile-main.css?v=<?php echo filemtime(__DIR__ . '/stil/mobil/mobile-main.css'); ?>">
    <link rel="stylesheet" href="stil/mobil/mobile_footer.css?v=1.1">
    <link rel="stylesheet" href="stil/mobil/metro_tiles_mobile.css?v=<?php echo time(); ?>">
    <!-- Tabler Icons -->
    <link rel="stylesheet" href="/assets/css/tabler-icons.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/assets/css/fontawesome.local.css">
    <style>
        /* Ana sayfa — mobil header / hero ile uyum (header_index_sync: pc/mobil görünürlük) */
        @media only screen and (max-width: 1024px) {
            /* Mobil header - turlar sayfasıyla aynı */
            .mobile-header {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                background: transparent !important;
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                box-shadow: none !important;
                z-index: 9999 !important;
            }
            .mobile-header .mobile-logo img {
                filter: brightness(0) invert(1) !important;
            }
            .mobile-header .mobile-menu-toggle,
            .mobile-header .h-app-circle,
            .mobile-header .header-lang-trigger {
                color: #fff !important;
            }
            .mobile-header .h-app-circle {
                background: rgba(255,255,255,0.15) !important;
                border: 1px solid rgba(255,255,255,0.2) !important;
            }
            .mobile-header .header-lang-flag-pill {
                background: rgba(255,255,255,0.15) !important;
                border: 1px solid rgba(255,255,255,0.2) !important;
                color: #fff !important;
            }

            /* FIX: Content clearance for fixed bottom nav */
            body {
                padding-bottom: 100px !important;
            }

            /* FIX: Story Viewer must be hidden by default */
            #storyViewer {
                display: none !important;
            }

            /* Only show when active class is added by JS */
            #storyViewer.active {
                display: block !important;
            }

            /* Discovery (Keşfet) Toggles Style for Mobile */
            .discovery-tabs {
                display: flex;
                background: rgba(255,255,255,0.1);
                border-radius: 12px;
                padding: 4px;
                margin-bottom: 12px;
                width: fit-content;
                border: 1px solid rgba(255,255,255,0.1);
            }
            .discovery-tab {
                padding: 8px 18px;
                border-radius: 10px;
                font-weight: 700;
                font-size: 13px;
                cursor: pointer;
                border: none;
                background: transparent;
                color: rgba(255,255,255,0.6);
                transition: all 0.3s;
                -webkit-appearance: none;
                appearance: none;
            }
            .discovery-tab.active {
                background: #ecad29 !important;
                color: #fff !important;
                box-shadow: 0 4px 12px rgba(236,173,41,0.3);
            }

        }
    </style>
</head>

<body class="home-page">
    <script>
        window.TP_LANG = <?php echo json_encode($TP_I18N[$tp_lang], JSON_UNESCAPED_UNICODE); ?>;
    </script>
    <?php
    $tp_base = '';
    $tp_active_menu = 'ana-sayfa';
    $tp_header_style = 'hero';
    $tp_header_transparent = true;
    include __DIR__ . '/includes/components/header/common_header.php';
    ?>

    <!-- MOBILE SEARCH & FILTER AREA (REDIESIGNED) -->
    <section class="mobile-filter-area mobile-only">
        <!-- 1. Category Tabs at TOP -->
        <div class="explorer-chips" id="mobileFilterTabs">
            <button class="explorer-chip active" onclick="switchFilterTab(this, 'tur')">
                <i class="fas fa-globe-americas"></i> <?php echo tp_tr('chip_tur'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'otel')">
                <i class="fas fa-hotel"></i> <?php echo tp_tr('chip_otel'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'ucak')">
                <i class="fas fa-plane"></i> <?php echo tp_tr('chip_ucak'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'konser')">
                <i class="fas fa-music"></i> <?php echo tp_tr('chip_konser'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'otobus')">
                <i class="fas fa-bus"></i> <?php echo tp_tr('chip_otobus'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'arac')">
                <i class="fas fa-car"></i> <?php echo tp_tr('chip_arac'); ?>
            </button>
            <button class="explorer-chip" onclick="switchFilterTab(this, 'kesfet')">
                <i class="fas fa-compass"></i> <?php echo tp_tr('chip_kesfet'); ?>
            </button>
            <button class="explorer-chip tp-chip-rota" onclick="switchFilterTab(this, 'rota')">
                <img src="gorsel/olustur.svg" alt="" class="tp-chip-svg" aria-hidden="true" loading="lazy">
                <span class="tp-chip-label"><?php echo tp_tr('chip_rota'); ?></span>
            </button>
        </div>

        <!-- 2. Dynamic Search Widget BELOW -->
        <div class="mobile-search-widget" style="display: block;">
            <form id="mobileSearchForm" action="turlar/turlar.php" method="GET">
                <input type="hidden" name="type" id="filterType" value="tur">
                <input type="hidden" name="otel_tipi" id="otelTipiInput" value="otel">

                <!-- Accommodation Type Toggle (For Hotel Tab) -->
                <div id="accommodationTypeSelector" style="display: none; margin-bottom: 10px;">
                    <div style="display: flex; background: #eee; border-radius: 8px; padding: 3px;">
                        <div onclick="setAccommodationType('otel')" id="accTypeOtel" style="flex: 1; text-align: center; padding: 8px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; background: white; color: #ecad29; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s;">
                            <i class="fas fa-hotel"></i> <?php echo tp_tr('label_otel'); ?>
                        </div>
                        <div onclick="setAccommodationType('bungalov')" id="accTypeBungalov" style="flex: 1; text-align: center; padding: 8px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; color: #666; transition: all 0.3s;">
                            <i class="fas fa-home"></i> <?php echo tp_tr('label_bungalov'); ?>
                        </div>
                    </div>
                </div>

                <div class="widget-row main-input" id="locationRow">
                    <!-- From Block (Hareket Noktası) -->
                    <div class="widget-block" id="fromBlock" style="display: none;">
                        <i class="fas fa-map-marker-alt block-icon"></i>
                        <div class="block-content">
                            <label id="fromLabel"><?php echo tp_tr('label_nereden'); ?></label>
                            <input type="text" name="from" id="fromInput" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_sehir_seciniz')); ?>" list="tr-cities-list">
                        </div>
                    </div>
                    <!-- To Block (Varış Noktası / Nereye) -->
                    <div class="widget-block" id="toBlock">
                        <i class="fas fa-route block-icon" id="locIcon"></i>
                        <div class="block-content">
                            <label id="locationLabel"><?php echo tp_tr('label_nereye_gitmek'); ?></label>
                            <input type="text" name="q" id="toInput" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_sehir_bolge_tur')); ?>" required list="tr-cities-list">
                            <!-- Regional Select (Initially Hidden) -->
                            <select name="bolge" id="regionSelect" style="display: none; background: transparent; border: none; font-size: 14px; font-weight: 600; width: 100%; outline: none;">
                                <option value=""><?php echo htmlspecialchars(tp_tr('option_bolge_seciniz')); ?></option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="widget-row secondary-inputs">
                    <div class="widget-block half" id="dateBlock">
                        <i class="far fa-calendar-alt block-icon"></i>
                        <div class="block-content">
                            <label id="dateLabel"><?php echo tp_tr('label_tur_tarihi'); ?></label>
                            <input type="text" name="date" id="dateInput" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_seciniz')); ?>" onfocus="(this.type='date')" onblur="(this.type='text')">
                            <!-- Period Select (Initially Hidden) -->
                            <select name="period" id="periodSelect" style="display: none; background: transparent; border: none; font-size: 14px; font-weight: 600; width: 100%; outline: none;">
                                <option value=""><?php echo tp_tr('option_donem'); ?></option>
                            </select>
                        </div>
                    </div>
                    <div class="widget-block half" id="guestBlock">
                        <i class="fas fa-user-friends block-icon"></i>
                        <div class="block-content">
                            <label id="guestLabel">Kişi Sayısı</label>
                            <input type="number" name="guests" value="2" min="1" max="20" style="width: auto;">
                        </div>
                    </div>
                </div>

                <!-- Datalist for Turkish Cities -->
                <datalist id="tr-cities-list">
                    <?php
                    $cities = [
                        'Adana',
                        'Adıyaman',
                        'Afyonkarahisar',
                        'Ağrı',
                        'Amasya',
                        'Ankara',
                        'Antalya',
                        'Artvin',
                        'Aydın',
                        'Balıkesir',
                        'Bilecik',
                        'Bingöl',
                        'Bitlis',
                        'Bolu',
                        'Burdur',
                        'Bursa',
                        'Çanakkale',
                        'Çankırı',
                        'Çorum',
                        'Denizli',
                        'Diyarbakır',
                        'Edirne',
                        'Elazığ',
                        'Erzincan',
                        'Erzurum',
                        'Eskişehir',
                        'Gaziantep',
                        'Giresun',
                        'Gümüşhane',
                        'Hakkari',
                        'Hatay',
                        'Isparta',
                        'Mersin',
                        'İstanbul',
                        'İzmir',
                        'Kars',
                        'Kastamonu',
                        'Kayseri',
                        'Kırklareli',
                        'Kırşehir',
                        'Kocaeli',
                        'Konya',
                        'Kütahya',
                        'Malatya',
                        'Manisa',
                        'Kahramanmaraş',
                        'Mardin',
                        'Muğla',
                        'Muş',
                        'Nevşehir',
                        'Niğde',
                        'Ordu',
                        'Rize',
                        'Sakarya',
                        'Samsun',
                        'Siirt',
                        'Sinop',
                        'Sivas',
                        'Tekirdağ',
                        'Tokat',
                        'Trabzon',
                        'Tunceli',
                        'Şanlıurfa',
                        'Uşak',
                        'Van',
                        'Yozgat',
                        'Zonguldak',
                        'Aksaray',
                        'Bayburt',
                        'Karaman',
                        'Kırıkkale',
                        'Batman',
                        'Şırnak',
                        'Bartın',
                        'Ardahan',
                        'Iğdır',
                        'Yalova',
                        'Karabük',
                        'Kilis',
                        'Osmaniye',
                        'Düzce'
                    ];
                    $special_suggestions = [
                        'GAP Turu', 'GAP', 'Adana Kalkışlı', 'Adana Turu', 
                        'Gaziantep', 'Kapadokya Turu', 'Karadeniz Turu', 
                        'Ege Turu', 'Likya Yolu', 'İzmir Kalkışlı', 
                        'İstanbul Kalkışlı', 'Ankara Kalkışlı'
                    ];
                    $combined_list = array_unique(array_merge($cities, $special_suggestions));
                    foreach ($combined_list as $item) {
                        echo "<option value=\"$item\">";
                    }
                    ?>
                </datalist>

                <button type="submit" class="widget-search-btn" style="margin-top: 0;">
                    <i class="fas fa-search"></i> <?php echo tp_tr('btn_hemen_ara'); ?>
                </button>
            </form>
        </div>

        <!-- 3. MOBILE DISCOVERY WIDGET (Initially Hidden) -->
        <div class="mobile-search-widget" id="mobileDiscoveryWidget" style="display: none;">
            <div class="discovery-tabs">
                <button type="button" class="discovery-tab active" onclick="switchDiscoveryType('yurtici')"><?php echo tp_tr('tab_yurtici'); ?></button>
                <button type="button" class="discovery-tab" onclick="switchDiscoveryType('yurtdisi')"><?php echo tp_tr('tab_yurtdisi'); ?></button>
            </div>

            <div class="widget-row main-input">
                <div class="widget-block" style="width: 100%;">
                    <i class="fas fa-search block-icon"></i>
                    <div class="block-content">
                        <label><?php echo tp_tr('label_sehir_ulke_ara'); ?></label>
                        <input type="text" id="discoveryInput" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_gitmek_istediginiz')); ?>" onkeyup="filterDiscoveryList()">
                    </div>
                </div>
            </div>

            <div id="discoveryResults" style="max-height: 250px; overflow-y: auto; margin-top: 10px; display: none;">
                <!-- Results injected via JS -->
            </div>
        </div>
    </section>

    <!-- MOBILE 81 CITIES SCROLLER REMOVED FROM HERE -->

    <script>
        function setAccommodationType(type) {
            document.getElementById('otelTipiInput').value = type;
            const otelBtn = document.getElementById('accTypeOtel');
            const bungalovBtn = document.getElementById('accTypeBungalov');
            const toInput = document.getElementById('toInput');

            if (type === 'otel') {
                otelBtn.style.background = 'white';
                otelBtn.style.color = '#ecad29';
                otelBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

                bungalovBtn.style.background = 'transparent';
                bungalovBtn.style.color = '#666';
                bungalovBtn.style.boxShadow = 'none';

                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_otel_ara) || 'Otel Ara';
            } else {
                bungalovBtn.style.background = 'white';
                bungalovBtn.style.color = '#ecad29';
                bungalovBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

                otelBtn.style.background = 'transparent';
                otelBtn.style.color = '#666';
                otelBtn.style.boxShadow = 'none';

                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_bungalov_ara) || 'Bungalov Ara';
            }
        }

        function switchFilterTab(el, type) {
            // Rota Oluştur (ekranı sonra yapacağız)
            if (type === 'rota') {
                window.location.href = 'rota-olustur.php';
                return;
            }

            // Remove active class from all chips
            document.querySelectorAll('.explorer-chip').forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            if (el) el.classList.add('active');

            // Update form logic
            const form = document.getElementById('mobileSearchForm');
            const typeInput = document.getElementById('filterType');
            const fromBlock = document.getElementById('fromBlock');
            const fromLabel = document.getElementById('fromLabel');
            const toBlock = document.getElementById('toBlock');
            const locLabel = document.getElementById('locationLabel');
            const locIcon = document.getElementById('locIcon');
            const toInput = document.getElementById('toInput');
            const regionSelect = document.getElementById('regionSelect');
            const dateBlock = document.getElementById('dateBlock');
            const dateLabel = document.getElementById('dateLabel');
            const dateInput = document.getElementById('dateInput');
            const periodSelect = document.getElementById('periodSelect');
            const guestBlock = document.getElementById('guestBlock');
            const guestLabel = document.getElementById('guestLabel');
            const accSelector = document.getElementById('accommodationTypeSelector');

            typeInput.value = type;

            const normalWidget = document.querySelector('.mobile-search-widget:not(#mobileDiscoveryWidget)');
            const discoveryWidget = document.getElementById('mobileDiscoveryWidget');

            if (type === 'kesfet') {
                normalWidget.style.display = 'none';
                discoveryWidget.style.display = 'block';
                return;
            } else {
                normalWidget.style.display = 'block';
                discoveryWidget.style.display = 'none';
            }

            // Default Resets
            accSelector.style.display = 'none';
            locLabel.classList.remove('slogan-heybetli');
            dateLabel.classList.remove('slogan-heybetli');
            locLabel.style.display = 'block';
            dateLabel.style.display = 'block';
            fromBlock.style.display = 'none';
            fromBlock.classList.remove('half');
            toBlock.classList.remove('half');
            toBlock.style.width = '100%';
            toInput.style.display = 'block';
            regionSelect.style.display = 'none';
            dateInput.style.display = 'block';
            periodSelect.style.display = 'none';
            locIcon.className = 'fas fa-map-marker-alt block-icon';
            dateBlock.style.display = 'flex';
            guestBlock.style.display = 'flex';

            if (type === 'tur') {
                form.action = 'turlar/filtre.php';
                fromBlock.style.display = 'none';
                fromBlock.classList.remove('half');
                toBlock.classList.remove('half');
                toBlock.style.width = '100%';
                locLabel.style.display = 'none';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_erken_al) || 'Erken Al, Az Öde!';
                locIcon.className = 'fas fa-search block-icon';

                // Fetch dynamic options (Regions, Tour Names and Periods)
                fetch('ajax/get_tur_search_options.php')
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            // 1. Populate Regions and Tour Names into the City Datalist
                            const datalist = document.getElementById('tr-cities-list');
                            if (datalist) {
                                const keywords = [...(data.regions || []), ...(data.tour_names || [])];
                                keywords.forEach(k => {
                                    const exists = Array.from(datalist.options).some(opt => opt.value === k);
                                    if (!exists) {
                                        const opt = document.createElement('option');
                                        opt.value = k;
                                        datalist.appendChild(opt);
                                    }
                                });
                            }

                            // 2. Populate Periods
                            if (periodSelect && data.periods) {
                                periodSelect.innerHTML = '<option value="">' + (window.TP_LANG ? window.TP_LANG.option_donem : 'Dönem Seçiniz') + '</option>';
                                data.periods.forEach(p => {
                                    const opt = document.createElement('option');
                                    opt.value = p.value;
                                    opt.textContent = p.label;
                                    periodSelect.appendChild(opt);
                                });
                            }
                        }
                    })
                    .catch(err => console.error("Search options fetch error:", err));

                dateLabel.style.display = 'none';
                dateInput.style.display = 'none';
                periodSelect.style.display = 'block';
                guestBlock.style.display = 'none'; // Hide person count for tours as requested
            } else if (type === 'otel') {
                form.action = 'oteller/filtre.php';
                accSelector.style.display = 'block';
                locLabel.style.display = 'none';
                locIcon.className = 'fas fa-hotel block-icon';

                // Initialize toggle state
                const currentType = document.getElementById('otelTipiInput').value;
                setAccommodationType(currentType);

                // Hide Date and Guest for simple search
                dateBlock.style.display = 'none';
                guestBlock.style.display = 'none';

                // Fetch Hotel Options
                fetch('ajax/get_otel_search_options.php')
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            const datalist = document.getElementById('tr-cities-list');
                            if (datalist) {
                                // Combined list (Cities and Hotel Names)
                                const keywords = [...(data.cities || []), ...(data.hotels || [])];
                                keywords.forEach(k => {
                                    const exists = Array.from(datalist.options).some(opt => opt.value === k);
                                    if (!exists) {
                                        const opt = document.createElement('option');
                                        opt.value = k;
                                        datalist.appendChild(opt);
                                    }
                                });
                            }
                        }
                    });

            } else if (type === 'lokasyon') {
                form.action = 'isletmeler.php';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.label_mekan_sehir_ara) || 'Mekan veya Şehir Ara';
                locIcon.className = 'fas fa-utensils block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_mekan_sehir) || 'Mekan ismi veya kategori...';
                dateBlock.style.display = 'none';
                guestBlock.style.display = 'none';
            } else if (type === 'konser' || type === 'tiyatro') {
                form.action = 'konser-tiyatro/konser-tiyatro.php';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.placeholder_etkinlik_sanatci) || 'Etkinlik veya Sanatçı Ara';
                locIcon.className = 'fas fa-microphone block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_konser_tiyatro) || 'Konser, tiyatro veya mekan...';
                dateLabel.innerText = (window.TP_LANG && window.TP_LANG.label_etkinlik_tarihi) || 'Etkinlik Tarihi';
                guestBlock.style.display = 'none';
            } else if (type === 'tur') {
                form.action = 'turlar/turlar.php';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.label_nereye_gitmek) || 'Nereye gitmek istersin?';
                locIcon.className = 'fas fa-route block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_sehir_bolge_tur) || 'Şehir, bölge veya tur adı...';
                dateLabel.innerText = (window.TP_LANG && window.TP_LANG.label_tarih) || 'Tarih';
                guestBlock.style.display = 'flex';
            } else if (type === 'arac') {
                form.action = 'arac/filtre.php';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.label_teslim_alinacak) || 'Teslim Alınacak Yer';
                locIcon.className = 'fas fa-car block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_havalimanı_sehir) || 'Havalimanı veya şehir...';
                dateLabel.innerText = (window.TP_LANG && window.TP_LANG.label_alis_iade) || 'Alış - İade';
                guestBlock.style.display = 'none';
            } else if (type === 'ucak') {
                form.action = 'ucak/filtre.php';
                fromBlock.style.display = 'flex';
                fromBlock.classList.add('half');
                toBlock.classList.add('half');
                fromLabel.innerText = (window.TP_LANG && window.TP_LANG.label_nereden) || 'Nereden?';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.label_nereye) || 'Nereye?';
                locIcon.className = 'fas fa-plane-arrival block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_havalimanı_sehir) || 'Havalimanı veya şehir...';
                dateLabel.innerText = (window.TP_LANG && window.TP_LANG.label_gidis_donus) || 'Gidiş - Dönüş';
            } else if (type === 'otobus') {
                form.action = 'otobus/filtre.php';
                fromBlock.style.display = 'flex';
                fromBlock.classList.add('half');
                toBlock.classList.add('half');
                fromLabel.innerText = (window.TP_LANG && window.TP_LANG.label_nereden) || 'Nereden?';
                locLabel.innerText = (window.TP_LANG && window.TP_LANG.label_nereye) || 'Nereye?';
                locIcon.className = 'fas fa-bus block-icon';
                toInput.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_varis_noktasi) || 'Varış noktası...';
                dateLabel.innerText = (window.TP_LANG && window.TP_LANG.label_gidis_tarihi) || 'Gidiş Tarihi';
            }
        }

        // --- DISCOVERY LOGIC ---
        const trCities = [
            'Adana', 'Adıyaman', 'Afyonkarahisar', 'Ağrı', 'Amasya', 'Ankara', 'Antalya', 'Artvin', 'Aydın', 'Balıkesir',
            'Bilecik', 'Bingöl', 'Bitlis', 'Bolu', 'Burdur', 'Bursa', 'Çanakkale', 'Çankırı', 'Çorum', 'Denizli',
            'Diyarbakır', 'Edirne', 'Elazığ', 'Erzincan', 'Erzurum', 'Eskişehir', 'Gaziantep', 'Giresun', 'Gümüşhane', 'Hakkari',
            'Hatay', 'Isparta', 'Mersin', 'İstanbul', 'İzmir', 'Kars', 'Kastamonu', 'Kayseri', 'Kırklareli', 'Kırşehir',
            'Kocaeli', 'Konya', 'Kütahya', 'Malatya', 'Manisa', 'Kahramanmaraş', 'Mardin', 'Muğla', 'Muş', 'Nevşehir',
            'Niğde', 'Ordu', 'Rize', 'Sakarya', 'Samsun', 'Siirt', 'Sinop', 'Sivas', 'Tekirdağ', 'Tokat',
            'Trabzon', 'Tunceli', 'Şanlıurfa', 'Uşak', 'Van', 'Yozgat', 'Zonguldak', 'Aksaray', 'Bayburt', 'Karaman',
            'Kırıkkale', 'Batman', 'Şırnak', 'Bartın', 'Ardahan', 'Iğdır', 'Yalova', 'Karabük', 'Kilis', 'Osmaniye', 'Düzce'
        ];

        // Mapping Countries to Cities
        const internationalData = {
            'Almanya': ['Berlin', 'Münih', 'Hamburg', 'Frankfurt', 'Köln'],
            'Amerika': ['New York', 'Los Angeles', 'Chicago', 'Miami', 'Las Vegas', 'San Francisco'],
            'Arjantin': ['Buenos Aires', 'Córdoba', 'Mendoza'],
            'Avustralya': ['Sydney', 'Melbourne', 'Brisbane', 'Perth'],
            'Avusturya': ['Viyana', 'Salzburg', 'Innsbruck'],
            'Belçika': ['Brüksel', 'Brugge', 'Antwerp'],
            'Bosna Hersek': ['Saraybosna', 'Mostar'],
            'Brezilya': ['Rio de Janeiro', 'Sao Paulo'],
            'Bulgaristan': ['Sofya', 'Varna', 'Plovdiv'],
            'Çekya': ['Prag', 'Brno'],
            'Çin': ['Pekin', 'Şanghay', 'Guangzhou'],
            'Danimarka': ['Kopenhag', 'Aarhus'],
            'Endonezya': ['Bali', 'Cakarta'],
            'Fas': ['Marakeş', 'Kazablanka', 'Fes'],
            'Finlandiya': ['Helsinki', 'Lapland', 'Rovaniemi'],
            'Fransa': ['Paris', 'Nice', 'Lyon', 'Marsilya', 'Strazburg'],
            'Güney Afrika': ['Cape Town', 'Johannesburg'],
            'Güney Kore': ['Seul', 'Busan'],
            'Hindistan': ['Yeni Delhi', 'Mumbai', 'Jaipur'],
            'Hollanda': ['Amsterdam', 'Rotterdam', 'Lahey'],
            'İngiltere': ['Londra', 'Manchester', 'Liverpool', 'Oxford'],
            'İrlanda': ['Dublin', 'Cork'],
            'İspanya': ['Barselona', 'Madrid', 'Sevilla', 'Valensiya', 'Ibiza'],
            'İsveç': ['Stokholm', 'Göteborg'],
            'İsviçre': ['Zürih', 'Cenevre', 'Basel'],
            'İtalya': ['Roma', 'Venedik', 'Milano', 'Floransa', 'Napoli', 'Amalfi'],
            'İzlanda': ['Reykjavik'],
            'Japonya': ['Tokyo', 'Kyoto', 'Osaka'],
            'Kanada': ['Toronto', 'Vancouver', 'Montreal'],
            'Makedonya': ['Üsküp', 'Ohrid'],
            'Malezya': ['Kuala Lumpur'],
            'Meksika': ['Mexico City', 'Cancun', 'Tulum'],
            'Mısır': ['Kahire', 'Şarm El-Şeyh', 'Hurgada', 'Luksor'],
            'Norveç': ['Oslo', 'Bergen', 'Tromso'],
            'Polonya': ['Varşova', 'Krakow'],
            'Portekiz': ['Lizbon', 'Porto'],
            'Romanya': ['Bükreş', 'Braşov'],
            'Rusya': ['Moskova', 'St. Petersburg'],
            'Singapur': ['Singapur'],
            'Sırbistan': ['Belgrad', 'Novi Sad'],
            'Tayland': ['Bangkok', 'Phuket', 'Pattaya'],
            'Yeni Zelanda': ['Auckland', 'Wellington'],
            'Yunanistan': ['Atina', 'Selanik', 'Santorini', 'Mykonos']
        };
        const countries = Object.keys(internationalData).sort();

        let currentDiscoveryMode = 'yurtici'; // 'yurtici' or 'yurtdisi'
        let currentStep = 'city'; // 'country' or 'city'
        let selectedForeignCountry = null;

        function switchDiscoveryType(mode) {
            currentDiscoveryMode = mode;

            // Tabs UI
            const tabs = document.querySelectorAll('.discovery-tab');
            tabs.forEach(t => t.classList.remove('active'));
            // Find the clicked tab by its onclick mode or event
            event.target.classList.add('active');

            // Logic Reset
            const input = document.getElementById('discoveryInput');
            const resultsDiv = document.getElementById('discoveryResults');

            if (mode === 'yurtici') {
                currentStep = 'city';
                selectedForeignCountry = 'Türkiye';
                input.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_sehir_ara) || 'Şehir ara... (örn: Adana)';
                input.value = '';
                resultsDiv.style.display = 'none';
            } else {
                // Yurtdışı
                currentStep = 'country';
                selectedForeignCountry = null;
                input.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_ulke_ara) || 'Ülke ara... (örn: İtalya)';
                input.value = '';
                // Render countries immediately
                renderList(countries, 'country');
                resultsDiv.style.display = 'block';
            }
        }

        function handleDiscoverySelection(name, type) {
            const input = document.getElementById('discoveryInput');

            if (type === 'country') {
                selectedForeignCountry = name;
                currentStep = 'city';
                input.value = '';
                input.placeholder = name + ' ' + (window.TP_LANG ? window.TP_LANG.placeholder_ulke_icinde_sehir : 'içindeki şehirleri ara...');

                const cityList = internationalData[name] || [];
                renderList(cityList, 'city');
            }
        }

        function goBackToCountries() {
            currentStep = 'country';
            selectedForeignCountry = null;
            const input = document.getElementById('discoveryInput');
            input.value = '';
            input.placeholder = (window.TP_LANG && window.TP_LANG.placeholder_ulke_ara_short) || 'Ülke ara...';
            renderList(countries, 'country');
        }

        function filterDiscoveryList() {
            const input = document.getElementById('discoveryInput');
            const filter = input.value.toLowerCase();
            const resultsDiv = document.getElementById('discoveryResults');

            if (currentDiscoveryMode === 'yurtici') {
                if (filter.length === 0) {
                    resultsDiv.style.display = 'none';
                    return;
                }
                const matches = trCities.filter(item => item.toLowerCase().startsWith(filter));
                renderList(matches, 'city');
                resultsDiv.style.display = 'block';
            } else {
                if (currentStep === 'country') {
                    const matches = countries.filter(item => item.toLowerCase().startsWith(filter));
                    renderList(matches, 'country');
                    resultsDiv.style.display = 'block';
                } else {
                    if (filter.length === 0 && selectedForeignCountry) {
                        renderList(internationalData[selectedForeignCountry] || [], 'city');
                        resultsDiv.style.display = 'block';
                        return;
                    }
                    const cityList = internationalData[selectedForeignCountry] || [];
                    const matches = cityList.filter(item => item.toLowerCase().startsWith(filter));
                    renderList(matches, 'city');
                    resultsDiv.style.display = 'block';
                }
            }
        }

        function renderList(items, type) {
            const resultsDiv = document.getElementById('discoveryResults');
            let html = '';

            if (currentDiscoveryMode === 'yurtdisi' && type === 'city' && selectedForeignCountry) {
                html += `<div onclick="goBackToCountries()" style="padding: 10px; color: #ecad29; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 13px;">
                    <i class="fas fa-arrow-left"></i> Ülke Seçimine Dön
                 </div>`;
                html += `<a href="sehir-kesfet.php?q=${encodeURIComponent(selectedForeignCountry)}" style="display:block; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ecad29; text-decoration: none; font-weight: bold;">
                    <i class="fas fa-flag" style="margin-right:10px;"></i> ${selectedForeignCountry} (Tümü)
                 </a>`;
            }

            if (items.length > 0) {
                items.forEach(m => {
                    if (type === 'country') {
                        html += `<div onclick="handleDiscoverySelection('${m}', 'country')" style="cursor: pointer; display:block; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff;">
                            <i class="fas fa-flag" style="color:#ecad29; margin-right:10px;"></i> ${m}
                            <i class="fas fa-chevron-right" style="float: right; opacity: 0.5; font-size: 12px; margin-top: 4px;"></i>
                        </div>`;
                    } else {
                        html += `<a href="sehir-kesfet.php?q=${encodeURIComponent(m)}" style="display:block; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; text-decoration: none;">
                            <i class="fas fa-map-marker-alt" style="color:#ecad29; margin-right:10px;"></i> ${m}
                        </a>`;
                    }
                });
            } else {
                html += '<div style="padding:15px; color:#999; text-align:center;">Sonuç bulunamadı</div>';
            }
            resultsDiv.innerHTML = html;
        }

        // Initialize the default tab on load to fetch regions/periods
        document.addEventListener('DOMContentLoaded', () => {
            const activeChip = document.querySelector("#mobileFilterTabs .explorer-chip.active");
            if (activeChip) {
                switchFilterTab(activeChip, 'tur');
            }
        });
    </script>

    <!-- MOBILE STORIES SECTION (Circular Labels Below) -->
    <section class="mobile-stories mobile-only">
        <!-- Story 1 -->
        <div class="story-item" onclick="openStory(0)">
            <div class="story-ring">
                <div class="story-circle">
                    <img src="https://picsum.photos/200/200?random=1" alt="Story 1" loading="lazy">
                </div>
            </div>
            <span class="story-name"><?php echo tp_tr('story_populer'); ?></span>
        </div>
        <!-- Story 2 -->
        <div class="story-item" onclick="openStory(1)">
            <div class="story-ring">
                <div class="story-circle">
                    <img src="https://picsum.photos/200/200?random=2" alt="Story 2" loading="lazy">
                </div>
            </div>
            <span class="story-name"><?php echo tp_tr('story_firsatlar'); ?></span>
        </div>
        <!-- Story 3 -->
        <div class="story-item" onclick="openStory(2)">
            <div class="story-ring">
                <div class="story-circle">
                    <img src="https://picsum.photos/200/200?random=3" alt="Story 3" loading="lazy">
                </div>
            </div>
            <span class="story-name"><?php echo tp_tr('story_yeni'); ?></span>
        </div>
        <!-- Story 4 -->
        <div class="story-item" onclick="openStory(3)">
            <div class="story-ring">
                <div class="story-circle">
                    <img src="https://picsum.photos/200/200?random=5" alt="Story 5" loading="lazy">
                </div>
            </div>
            <span class="story-name"><?php echo tp_tr('story_vize'); ?></span>
        </div>
        <!-- Story 5 -->
        <div class="story-item" onclick="openStory(4)">
            <div class="story-ring">
                <div class="story-circle">
                    <img src="https://picsum.photos/200/200?random=6" alt="Story 6" loading="lazy">
                </div>
            </div>
            <span class="story-name">Etkinlik</span>
        </div>
    </section>

    <!-- MOBILE 81 CITIES SCROLLER (NEW) -->
    <?php include 'includes/components/city_scroller/city_scroller_mobile.php'; ?>

    <!-- WINDOWS PHONE STYLE DYNAMIC LIVE TILES -->
    <section class="metro-tiles-section mobile-only">
        <div class="metro-grid">
            <!-- TOUR TILE -->
            <div class="metro-tile-container" id="tile-tours-wrapper">
                <div class="metro-tile flipping-tile tile-tours" id="tile-tours">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-map-marked-alt"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_turlar')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-tours">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- HOTEL TILE -->
            <div class="metro-tile-container" id="tile-hotels-wrapper">
                <div class="metro-tile flipping-tile tile-hotels" id="tile-hotels">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-hotel"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_oteller')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-hotels">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- BUNGALOW TILE -->
            <div class="metro-tile-container" id="tile-bungalows-wrapper">
                <div class="metro-tile flipping-tile tile-bungalows" id="tile-bungalows">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-home"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_bungalovlar')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-bungalows">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- FLIGHTS TILE -->
            <div class="metro-tile-container" id="tile-flights-wrapper">
                <div class="metro-tile flipping-tile tile-flights" id="tile-flights">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-plane"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_ucak_bileti')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-flights">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- EVENTS TILE -->
            <div class="metro-tile-container" id="tile-events-wrapper">
                <div class="metro-tile flipping-tile tile-events" id="tile-events">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-ticket-alt"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_konser_tiyatro')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-events">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- BUSINESS (LOKASYON) TILE -->
            <div class="metro-tile-container" id="tile-isletmeler-wrapper">
                <div class="metro-tile flipping-tile tile-isletmeler" id="tile-isletmeler">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-map-marker-alt"></i>
                            <span class="tile-label"><?php echo htmlspecialchars(tp_tr('tile_mekanlar')); ?></span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-isletmeler">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- BUS TILE -->
            <div class="metro-tile-container" id="tile-bus-wrapper">
                <div class="metro-tile flipping-tile tile-bus" id="tile-bus">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-bus"></i>
                            <span class="tile-label">OTOBÜS</span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-bus">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>

            <!-- FERRY TILE -->
            <div class="metro-tile-container" id="tile-ferry-wrapper">
                <div class="metro-tile flipping-tile tile-ferry" id="tile-ferry">
                    <div class="tile-face tile-front">
                        <div class="tile-content">
                            <i class="fas fa-ship"></i>
                            <span class="tile-label">FERİBOT</span>
                        </div>
                    </div>
                    <div class="tile-face tile-back" id="back-ferry">
                        <!-- Content injected by JS -->
                    </div>
                </div>
            </div>
        </div>

        <style>
            /* fix for event tile transparency */
            #tile-events .tile-front {
                background-color: #ff126e !important;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const featuredTours = <?php echo json_encode($metro_tours); ?>;
                const featuredHotels = <?php echo json_encode($metro_hotels); ?>;
                const featuredBungalows = <?php echo json_encode($metro_bungalows); ?>;
                const featuredIsletmeler = <?php echo json_encode($metro_isletmeler); ?>;
                const featuredEvents = <?php echo json_encode($metro_events); ?>;

                const fallback = {
                    name: 'Mevcut Değil',
                    price: '-',
                    img: ''
                };
                if (featuredTours.length === 0) featuredTours.push(fallback);
                if (featuredHotels.length === 0) featuredHotels.push(fallback);
                if (featuredBungalows.length === 0) featuredBungalows.push(fallback);
                if (featuredIsletmeler.length === 0) featuredIsletmeler.push(fallback);
                if (featuredEvents.length === 0) featuredEvents.push(fallback);

                let tourIdx = 0,
                    hotelIdx = 0,
                    bungalowIdx = 0,
                    isletmeIdx = 0,
                    eventIdx = 0;

                function updateBackContent(tileType, data) {
                    const backFace = document.getElementById('back-' + tileType);
                    if (!backFace) return;

                    let tagText = "";
                    switch (tileType) {
                        case 'tours':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_turlar) || "TURLAR";
                            break;
                        case 'hotels':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_oteller) || "OTELLER";
                            break;
                        case 'bungalows':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_bungalovlar) || "BUNGALOVLAR";
                            break;
                        case 'flights':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_ucak_bileti) || "UÇAK BİLETİ";
                            break;
                        case 'events':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_konser_tiyatro) || "Konser & Tiyatro";
                            break;
                        case 'isletmeler':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_mekanlar) || "MEKANLAR";
                            break;
                        case 'bus':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_otobus) || "OTOBÜS";
                            break;
                        case 'ferry':
                            tagText = (window.TP_LANG && window.TP_LANG.tile_feribot) || "FERİBOT";
                            break;
                    }

                    backFace.innerHTML = `
                        <img src="${data.img}" alt="${data.name}" class="tile-bg-img" onerror="this.src='gorsel/hero/hero_concert.jpg'" loading="lazy">
                        <div class="tile-tag-label">${tagText}</div>
                        <div class="tile-overlay">
                            <span class="item-name">${data.name}</span>
                            <span class="item-price">${data.price}</span>
                        </div>
                    `;
                }

                function triggerFlip(tileId, tileType, dataArr, getIdx, setIdx) {
                    const tile = document.getElementById(tileId);
                    if (!tile || dataArr.length === 0) return;

                    // 1. Get current item
                    const currentItem = dataArr[getIdx()];
                    tile.dataset.backHref = (currentItem && currentItem.link) ? currentItem.link : '';

                    // 2. Update Back Face
                    updateBackContent(tileType, currentItem);

                    // 3. Increment Index IMMEDIATELY for next round
                    // This ensures even if animation lags, logic state is correct
                    const nextIdx = (getIdx() + 1) % dataArr.length;
                    setIdx(nextIdx);

                    // 4. Perform Animation
                    const direction = Math.random() > 0.5 ? 'flip-v' : 'flip-h';
                    tile.classList.add(direction);

                    setTimeout(() => {
                        tile.classList.remove(direction);
                    }, 6500); // Wait longer on the back face (image)
                }

                // Remove the immediate updateBackContent calls that might cause flickering or pre-loading issues
                // updateBackContent(...) calls removed

                function setupTileNav(wrapperId, tileId, frontHref) {
                    const wrapper = document.getElementById(wrapperId);
                    const tile = document.getElementById(tileId);
                    if (!wrapper || !tile) return;
                    wrapper.style.cursor = 'pointer';
                    wrapper.addEventListener('click', (e) => {
                        // If user clicks while back face is shown (during flip animation), go to the featured item
                        const isOnBack = tile.classList.contains('flip-v') || tile.classList.contains('flip-h');
                        const backHref = tile.dataset.backHref || '';
                        const href = (isOnBack && backHref) ? backHref : frontHref;

                        if (!href) return;
                        if (href === '__FERIBOT__') {
                            alert('Feribot seferleri entegrasyonu yakında!');
                            return;
                        }
                        window.location.href = href;
                    });
                }

                // Front: category pages. Back: featured item (when flipping)
                setupTileNav('tile-tours-wrapper', 'tile-tours', 'turlar/turlar.php');
                setupTileNav('tile-hotels-wrapper', 'tile-hotels', 'oteller/filtre.php?otel_tipi=otel');
                setupTileNav('tile-bungalows-wrapper', 'tile-bungalows', 'oteller/filtre.php?otel_tipi=bungalov');
                setupTileNav('tile-flights-wrapper', 'tile-flights', 'ucak/index.php');
                setupTileNav('tile-events-wrapper', 'tile-events', 'konser-tiyatro/konser-tiyatro.php');
                setupTileNav('tile-isletmeler-wrapper', 'tile-isletmeler', 'lokasyonlar.php');
                setupTileNav('tile-bus-wrapper', 'tile-bus', 'otobus/otobus.php');
                setupTileNav('tile-ferry-wrapper', 'tile-ferry', '__FERIBOT__');

                // Sequence: 0s, 1.5s, 3s, 4.5s (Cycle every 6s)
                // Sequence: Cycle every 9s for a slower, premium experience
                setInterval(() => triggerFlip('tile-tours', 'tours', featuredTours, () => tourIdx, (v) => tourIdx = v), 9000);
                setTimeout(() => setInterval(() => triggerFlip('tile-hotels', 'hotels', featuredHotels, () => hotelIdx, (v) => hotelIdx = v), 9000), 2000);
                setTimeout(() => setInterval(() => triggerFlip('tile-bungalows', 'bungalows', featuredBungalows, () => bungalowIdx, (v) => bungalowIdx = v), 9000), 4000);
                setTimeout(() => setInterval(() => triggerFlip('tile-isletmeler', 'isletmeler', featuredIsletmeler, () => isletmeIdx, (v) => isletmeIdx = v), 9000), 6000);
                setTimeout(() => setInterval(() => triggerFlip('tile-events', 'events', featuredEvents, () => eventIdx, (v) => eventIdx = v), 9000), 3000);
            });
        </script>
    </section>

    <!-- STORY VIEWER OVERLAY -->
    <div id="storyViewer" class="story-viewer mobile-only" style="display: none;">
        <div class="story-progress-bar">
            <!-- Bars will be injected dynamically -->
        </div>
        <div class="story-header">
            <div class="story-user">
                <img id="storyUserImg" src="" alt="" loading="lazy">
                <span id="storyUserName">NEX14</span>
                <span class="story-time">12s</span>
            </div>
            <button class="story-close" onclick="closeStory()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="story-image-container" onclick="handleStoryTap(event)">
            <img id="storyMainImg" src="" alt="Story" loading="lazy">
            <div class="story-caption" id="storyCaption"></div>
        </div>
    </div>

    <script>
        // Story Data (Using Placeholders for Demo)
        const stories = [{
                img: 'https://picsum.photos/600/1000?random=1',
                name: 'Popüler',
                caption: 'En popüler turlarımızı keşfedin! 🔥'
            },
            {
                img: 'https://picsum.photos/600/1000?random=2',
                name: 'Fırsatlar',
                caption: 'Bu haftaya özel Antalya fırsatları! 🏖️'
            },
            {
                img: 'https://picsum.photos/600/1000?random=3',
                name: 'Yeni',
                caption: 'Kapadokya balon turları başladı! 🎈'
            },
            {
                img: 'https://picsum.photos/600/1000?random=4',
                name: 'Vize',
                caption: 'Vize işlemlerinizde yanınızdayız. 🌍'
            },
            {
                img: 'https://picsum.photos/600/1000?random=6',
                name: 'Etkinlik',
                caption: 'Konser ve tiyatro biletleri burada! 🎭'
            }
        ];

        let currentStoryIndex = 0;
        let storyTimer;
        const STORY_DURATION = 5000;

        function openStory(index) {
            currentStoryIndex = index;
            document.getElementById('storyViewer').classList.add('active'); // Use class for !important override
            showStory();
            document.body.style.overflow = 'hidden';
        }

        function closeStory() {
            document.getElementById('storyViewer').classList.remove('active');
            clearTimeout(storyTimer);
            document.body.style.overflow = '';
        }

        function showStory() {
            const story = stories[currentStoryIndex];

            // Update UI
            document.getElementById('storyMainImg').src = story.img;
            document.getElementById('storyMainImg').onerror = function() {
                this.src = 'gorsel/logo.png';
            }; // Fallback
            document.getElementById('storyUserImg').src = story.img;
            document.getElementById('storyUserImg').onerror = function() {
                this.src = 'gorsel/logo.png';
            };
            document.getElementById('storyUserName').textContent = story.name;
            document.getElementById('storyCaption').textContent = story.caption || "";

            // Reset Bars
            updateProgressBars();

            // Auto Advance
            clearTimeout(storyTimer);
            storyTimer = setTimeout(nextStory, STORY_DURATION);

            // Animate Current Bar
            animateProgressBar(currentStoryIndex);
        }

        function nextStory() {
            if (currentStoryIndex < stories.length - 1) {
                currentStoryIndex++;
                showStory();
            } else {
                closeStory(); // End of stories
            }
        }

        function prevStory() {
            if (currentStoryIndex > 0) {
                currentStoryIndex--;
                showStory();
            } else {
                // Restart first story or close? usually stays on first
                showStory();
            }
        }

        function handleStoryTap(e) {
            const width = window.innerWidth;
            const x = e.clientX;

            if (x < width / 3) {
                prevStory();
            } else {
                nextStory();
            }
        }

        function updateProgressBars() {
            const container = document.querySelector('.story-progress-bar');
            container.innerHTML = '';
            stories.forEach((_, idx) => {
                const bar = document.createElement('div');
                bar.className = 'progress-segment';
                const inner = document.createElement('div');
                inner.className = 'progress-fill';

                if (idx < currentStoryIndex) {
                    inner.style.width = '100%';
                } else if (idx === currentStoryIndex) {
                    inner.style.width = '0%'; // Will animate
                    inner.classList.add('animating');
                } else {
                    inner.style.width = '0%';
                }

                bar.appendChild(inner);
                container.appendChild(bar);
            });
        }

        function animateProgressBar(index) {
            // Trigger reflow to restart CSS animation if needed, or simple timeout logic
            // CSS animation on .animating class handles the visual width 0->100% over 5s
            const fill = document.querySelectorAll('.progress-fill')[index];
            if (fill) {
                fill.style.transition = 'none';
                fill.style.width = '0%';
                setTimeout(() => {
                    fill.style.transition = `width ${STORY_DURATION}ms linear`;
                    fill.style.width = '100%';
                }, 50);
            }
        }
    </script>

    <!-- Moved Bottom Nav to footer area -->

    <!-- PC CONTENT WRAPPER (Hidden on Mobile) -->
    <div class="pc-only" id="pc-root-tasarim">
        <style>
            /* ========================================================== */
            /* NEX14 BEYAZ TEMA (PC) — header common_header.php           */
            /* ========================================================== */
            @media only screen and (min-width: 1025px) {
                /* Bütün arkaplanı komple beyaz yapıyoruz */
                body.home-page {
                    background-color: #ffffff !important;
                    background-image: none !important;
                    color: #222222 !important;
                    font-family: 'Comfortaa', sans-serif !important;
                    margin: 0;
                    padding: 0;
                }
                
                #pc-root-tasarim {
                    background-color: #ffffff;
                    min-height: 200vh; /* Scroll'u görmek için şimdilik uzun kalsın */
                    position: relative;
                }

                /* PC header stilleri: includes/components/header/common_header.php (.pc-classic-header) */

                /* ========================================================== */
                /* 4.5. 3D STACK KAMPANYA ALANI (SOL BOŞLUK)                  */
                /* ========================================================== */
                .hero-master-wrapper {
                    position: relative; 
                    width: 75%; 
                    max-width: 1400px; /* PC Header ile tamamen aynı ölçü, taşma önlendi */
                    margin: 0 auto; 
                }

                .camp-widget-area {
                    position: absolute;
                    left: 0; /* Wrapper'ın (Header'ın) sol çizgisine tam hizalı */
                    top: 50%;
                    transform: translateY(-50%);
                    width: 380px; 
                    height: 520px;
                    z-index: 50;
                    perspective: 1500px; /* Derin 3D algısı */
                    transform-style: preserve-3d;
                }
                
                .camp-card-item {
                    position: absolute;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    background: #111;
                    border-radius: 20px;
                    box-shadow: -15px 15px 35px rgba(0,0,0,0.4);
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    text-decoration: none;
                    transform-origin: center center;
                    backface-visibility: hidden;
                    /* Kartlar birbirine 3D boyutta süzülerek geçecek */
                    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s ease, filter 0.6s ease, z-index 0s;
                }
                
                /* Arkaya doğru diziliş (Stacking Waterfall Effect) */
                .pos-0 { transform: translate3d(0, 0, 0) scale(1); z-index: 10; opacity: 1; filter: brightness(1); }
                .pos-1 { transform: translate3d(-30px, -30px, -100px) scale(0.95); z-index: 9; opacity: 1; filter: brightness(0.8); }
                .pos-2 { transform: translate3d(-60px, -60px, -200px) scale(0.90); z-index: 8; opacity: 1; filter: brightness(0.6); }
                .pos-3 { transform: translate3d(-90px, -90px, -300px) scale(0.85); z-index: 7; opacity: 1; filter: brightness(0.4); }
                .pos-4 { transform: translate3d(-120px, -120px, -400px) scale(0.80); z-index: 6; opacity: 0; filter: brightness(0.2); }
                
                /* Değişim animasyonu esnasında en öndeki kart sola doğru kayarak (Swipe Left) ekranı terk eder */
                .pos-drop {
                    transform: translate3d(-400px, 0, 0) rotateY(-20deg) scale(0.9) !important;
                    z-index: 11 !important;
                    opacity: 0 !important;
                    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease-out !important;
                }

                .camp-c-img {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    position: relative;
                }
                .camp-c-badge {
                    position: absolute;
                    top: 20px; left: 20px;
                    background: #ff3b3b;
                    color: #fff;
                    padding: 8px 18px;
                    border-radius: 30px;
                    font-size: 13px;
                    font-weight: 900;
                    text-transform: uppercase;
                    box-shadow: 0 10px 20px rgba(255,59,59,0.4);
                }
                .camp-c-glass-body {
                    position: absolute;
                    bottom: 0; left: 0;
                    width: 100%;
                    padding: 40px 25px 30px 25px;
                    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                }
                .camp-c-title {
                    font-size: 26px;
                    font-weight: 900;
                    color: #fff;
                    margin-bottom: 8px;
                    line-height: 1.2;
                    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
                }
                .camp-c-desc {
                    font-size: 15px;
                    color: #ccc;
                    line-height: 1.4;
                    text-shadow: 0 5px 10px rgba(0,0,0,0.5);
                }

                /* ========================================================== */
                /* 5. GÖSTERİŞLİ 3 ÇUBUKLU (PILLS) SLIDER HERO ALANI          */
                /* ========================================================== */
                .premium-hero-slider {
                    width: calc(100% - 350px); /* Kalan alanı slider doldursun */
                    max-width: 1000px; 
                    height: 70vh;
                    min-height: 550px;
                    margin: 200px 0 50px auto; /* Kampanyaları ve Hero alanını kendi orjinal asilliğine geri itiyoruz, sırf filtre tek başına yukarıda kalsın diye */
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                }

                /* --- SOL: METİN ALANI --- */
                .hero-content-left {
                    flex: 0 0 45%;
                    padding-left: 20px;
                    opacity: 1;
                    transform: translateY(0);
                    transition: opacity 0.5s ease, transform 0.5s ease;
                }
                .hero-content-left.animating {
                    opacity: 0;
                    transform: translateY(30px);
                }

                .hero-subtitle {
                    color: #ecad29;
                    font-size: 14px;
                    text-transform: uppercase;
                    letter-spacing: 4px;
                    font-weight: 800;
                    margin-bottom: 20px;
                    display: inline-block;
                    background: rgba(236,173,41,0.1);
                    padding: 8px 20px;
                    border-radius: 30px;
                }

                .hero-title {
                    font-size: 34px; /* Başlık daha da küçültüldü */
                    font-weight: 900;
                    color: #111;
                    line-height: 1.3;
                    margin-bottom: 15px;
                    letter-spacing: -1px;
                }

                .hero-desc {
                    font-size: 17px;
                    color: #666;
                    line-height: 1.7;
                    margin-bottom: 40px;
                    max-width: 90%;
                }

                .hero-price-tag {
                    display: flex;
                    align-items: baseline;
                    gap: 10px;
                    margin-bottom: 40px;
                }
                .hero-price-tag .price-val {
                    font-size: 38px;
                    font-weight: 900;
                    color: #000;
                }
                .hero-price-tag .price-suffix {
                    font-size: 15px;
                    color: #888;
                    font-weight: 600;
                }

                .hero-actions {
                    display: flex;
                    align-items: center;
                    gap: 40px;
                }

                .btn-hero-primary {
                    background: #222;
                    color: #fff;
                    padding: 18px 40px;
                    border-radius: 50px;
                    font-size: 15px;
                    font-weight: 800;
                    text-transform: uppercase;
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    gap: 12px;
                    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
                    transition: all 0.3s ease;
                }
                .btn-hero-primary:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
                    background: #ecad29;
                    color: #000;
                }

                .hero-nav-dots {
                    display: flex;
                    gap: 12px;
                }
                .nav-dot {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: #ddd;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                .nav-dot.active {
                    background: #ecad29;
                    transform: scale(1.4);
                }

                /* --- SAĞ: 3 EĞİK ÇUBUK (PILL) GÖRSEL ALANI --- */
                .hero-visual-right {
                    flex: 0 0 50%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    position: relative;
                }

                .pill-group {
                    display: flex;
                    gap: 15px;
                    transform: rotate(30deg); /* Tam senin fotoğraftaki o eğik duruş */
                    height: 110%; /* Kutudan taşmasın, hafif kısaldı */
                    align-items: center;
                    justify-content: center;
                }

                .pill-item {
                    width: 125px; /* Daha narin ve ince (150'den 125'e kısıldı) */
                    border-radius: 120px;
                    overflow: hidden;
                    position: relative;
                    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
                    background: #eee;
                    /* Keskinlik ve Kalite için donanım ivmelendirmesi ekledik (Ters Rotate'in Blur sorununu çözer) */
                    will-change: transform, opacity;
                    backface-visibility: hidden;
                    transform-style: preserve-3d;
                    /* Dönüş (Geri Geliş) yavaş ve zarif, Çıkış (Gidiş) hızlı olacak */
                    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s ease-in;
                }

                /* Boyutlar ve kaydırmalar sayesinde ortadaki uzun, yanlar kısa asimetrik durur */
                .pill-1 { height: 60%; transform: translateY(-50px); }
                .pill-2 { height: 85%; }
                .pill-3 { height: 60%; transform: translateY(50px); }

                /* === DİNAMİK DEĞİŞİM (GİDİP GELME) ANİMASYON SINIFLARI === */
                /* Giderken ok gibi fırlasınlar diye animasyonu o an eziyoruz */
                .pill-item.changing-up {
                    transform: translateY(-400px) scale(0.9) !important;
                    opacity: 0 !important;
                    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.3s ease-out;
                }
                .pill-item.changing-down {
                    transform: translateY(400px) scale(0.9) !important;
                    opacity: 0 !important;
                    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.3s ease-out;
                }

                /* OLAĞANÜSTÜ CSS SİHİRİ: "Tek Bir Resmi 3'e Bölmüş Gibi" Kusursuz İlüzyon */
                /* Arka plan ebatını 1200'den 900px'e çektik ki fotoğraf orijinal kalitesini korusun, çok gerinip bulanıklaşmasın! */
                .pill-bg {
                    width: 900px; 
                    height: 900px; 
                    position: absolute;
                    /* Merkez (Pill 2) için varsayılan koordinat */
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(-30deg); /* Çubuğun 30 derece eğikliğini geri al */
                    background-size: cover;
                    background-position: center;
                    /* Pikselleri jilet gibi tutan HD Keskinlik kilitleri: */
                    image-rendering: high-quality;
                    -webkit-font-smoothing: antialiased;
                    transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), left 0.6s cubic-bezier(0.25, 1, 0.5, 1);
                }

                /* Kusursuz İlüzyon Kilidi: Yanlardaki hapların resimlerini, hapların merkezden uzaklaştığı piksel kadar TERS yöne matematiksel olarak itiyoruz! 
                   Genişlik=150px, Gap=15px -> Mesafe tam 165px. */
                /* Pill 1: sola 165px ve yukarı 50px kaydı. O zaman içindeki resim matrisi sağa 165px, aşağı 50px kaymalı! */
                .pill-1 .pill-bg {
                    left: calc(50% + 165px);
                    top: calc(50% + 50px);
                }
                /* Pill 3: sağa 165px ve aşağı 50px kaydı. O zaman içindeki resim matrisi sola 165px, yukarı 50px kaymalı! */
                .pill-3 .pill-bg {
                    left: calc(50% - 165px);
                    top: calc(50% - 50px);
                }

                /* Üzerine gelince çubuklar hafif oynarken resim İÇERİDE de senkronize TERS oynasın! (Tek parça bütünlüğü ASLA bozulmaz) */
                .pill-group:hover .pill-1 { transform: translateY(-80px); }
                .pill-group:hover .pill-1 .pill-bg { top: calc(50% + 80px); }
                
                .pill-group:hover .pill-3 { transform: translateY(80px); }
                .pill-group:hover .pill-3 .pill-bg { top: calc(50% - 80px); }
                
                .pill-group:hover .pill-2 { transform: scale(1.03); }
                /* Scale işleminde çok ufak bir boyut değişimi olur ama fark edilmeyecek kadar tatlı bir 3D pencere hissi verir. */
                /* ========================================================== */
                /* 6. GELİŞMİŞ PREMIUM ARAMA FİLTRELEME KARTI                 */
                /* ========================================================== */
                .hero-search-overlay {
                    position: absolute;
                    top: -90px;
                    left: -15px; /* Shifted slightly to the right */
                    transform: none;
                    width: 950px; /* Fixed width for rock-solid stability */
                    z-index: 100;
                    background: #fdfaf5;
                    border: 1px solid rgba(236, 173, 41, 0.4);
                    border-radius: 20px;
                    padding: 20px 25px;
                    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,1);
                    display: flex;
                    flex-direction: column;
                    justify-content: center; /* Centers content vertically */
                    gap: 12px;
                    min-height: 145px; /* Fixed minimum height to prevent jumping */
                }
                
                /* Üst: Menü Sekmeleri (Floating Top Tabs) */
                .hs-tabs {
                    position: absolute;
                    top: -20px; /* <--- Eski mesafeye geri çekildi */
                    left: 50%; /* <--- Kartı baştan başa ortalamak için merkeze alındı (Korundu) */
                    transform: translateX(-50%); /* <--- Merkezlemek için (Korundu) */
                    background: #fff;
                    display: flex;
                    align-items: center;
                    gap: 5px; /* <--- Eski şirin aralığına döndü */
                    padding: 4px; /* <--- Eski şık ince paddingine döndü */
                    border-radius: 50px;
                    box-shadow: 0 8px 15px rgba(0,0,0,0.06);
                }
                .hs-tab {
                    border: none; background: transparent;
                    font-size: 13px; font-weight: 700; color: #555; /* <--- Eski ince font boyutu! */
                    cursor: pointer; padding: 6px 8px; border-radius: 30px; /* <--- SAĞ SOL BOŞLUĞU İYİCE KISILDI! (14'ten 8'e) */
                    transition: all 0.3s ease; display: flex; align-items: center; gap: 4px; /* <--- İkon ve yazı birbirine çok yakınlaştı! */
                }
                .hs-tab.active {
                    color: #000;
                    background: rgba(236,173,41,0.15); 
                }
                .hs-tab.active i { color: #ecad29; } 
                
                /* Sol Taraf: Trip Type Radio */
                .hs-radio-wrap {
                    display: flex; gap: 15px; font-size: 13px; font-weight: 800; color: #777; margin-top: -5px;
                }
                .hs-radio-wrap label { cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.3s; }
                .hs-radio-wrap input { accent-color: #ecad29; transform: scale(1.1); }
                .hs-radio-wrap label.active-radio { color: #111; }
                
                /* Ortadaki Form ve Inputlar */
                .hs-main-bar {
                    display: flex; align-items: center; justify-content: space-between; gap: 10px;
                    height: 60px; /* Fixed height for stability */
                }
                .hs-inp-box {
                    background: #fff; height: 60px; /* <--- Eskiden 75'ti, inceltildi */
                    border-radius: 12px; flex: 1;
                    display: flex; flex-direction: column; justify-content: center; padding: 0 15px;
                    position: relative; box-shadow: 0 3px 8px rgba(0,0,0,0.02);
                    border: 1px solid rgba(0,0,0,0.03);
                }
                .hs-inp-box.group { flex-direction: row; padding: 0; align-items: center; flex: 1.2; }
                
                .hs-inp-box label { font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; margin-bottom: 2px;}
                .hs-inp-box input { border: none; outline: none; font-size: 14px; font-weight: 700; color: #111; font-family: inherit; width: 100%;}
                .hs-inp-box input::placeholder { color: #ccc; font-weight: 600; }
                
                .hs-swap-btn {
                    position: absolute; right: -15px; top: 50%; transform: translateY(-50%);
                    width: 30px; height: 30px; border-radius: 50%; background: #f0f0f0; border: 3px solid #fdfaf5;
                    display: flex; align-items: center; justify-content: center; color: #777; cursor: pointer; z-index: 5;
                    font-size: 12px;
                }
                
                .hs-sub-group { flex: 1; padding: 0 15px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
                .hs-divider { width: 1px; height: 60%; background: #eaeaea; }
                
                /* Kurumsal Sarı Ara Butonu */
                .hs-submit {
                    min-width: 60px; width: auto; padding: 0 25px; height: 60px; background: #ecad29; border-radius: 12px; border: none;
                    color: #000; font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.3s ease;
                    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 15px rgba(236,173,41,0.3);
                    text-transform: uppercase;
                }
                .hs-submit:hover { transform: scale(1.05); }
                
                /* Alt Footer (Switch) */
                .hs-footer { display: flex; align-items: center; margin-top: -2px; }
                .hs-switch-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #555; cursor: pointer;}
                .hs-switch { position: relative; width: 40px; height: 22px; }
                .hs-switch input { opacity: 0; width: 0; height: 0; }
                .hs-switch .s-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: .4s; border-radius: 24px; }
                .hs-switch .s-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
                .hs-switch input:checked + .s-slider { background-color: #ecad29; }
                .hs-switch input:checked + .s-slider:before { transform: translateX(18px); }

                /* Autocomplete Dropdown - KNKCIM PREMIUM ULTRA */
                .hs-autocomplete-dropdown {
                    position: absolute;
                    top: 62px;
                    left: 0;
                    right: 0;
                    background: #fff;
                    border-radius: 12px;
                    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
                    z-index: 2147483647 !important;
                    max-height: 350px;
                    overflow-y: auto;
                    display: none;
                    border: 1px solid rgba(236,173,41,0.2);
                }
                .hs-autocomplete-dropdown.active {
                    display: block !important;
                }
                .hs-autocomplete-item {
                    padding: 12px 18px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 14px;
                    font-weight: 700;
                    color: #111;
                    transition: all 0.2s ease;
                    border-bottom: 1px solid rgba(0,0,0,0.03);
                    text-align: left;
                }
                .hs-autocomplete-item:hover {
                    background: #fff9eb;
                    color: #ecad29;
                }
                .hs-autocomplete-item i {
                    color: #ecad29;
                    font-size: 15px;
                    opacity: 0.8;
                }
                .hs-autocomplete-item .type-badge {
                    font-size: 9px;
                    background: rgba(236,173,41,0.1);
                    color: #ecad29;
                    padding: 2px 7px;
                    border-radius: 4px;
                    margin-left: auto;
                    font-weight: 800;
                    text-transform: uppercase;
                }
            }
        </style>


        <!-- ============================================== -->
        <!-- DEV EĞİK ÇUBUKLU SLIDER VE KAMPANYA WRAPPER    -->
        <!-- ============================================== -->
        <div class="hero-master-wrapper">
            
            <!-- YAPRAK SAAT KAMPANYA WIDGET'I (SOL BOŞLUK İÇİN) -->
            <div class="camp-widget-area" id="campFlipWidget">
                <!-- Javascript dinamik 3D yaprak kartlarını döndürecek -->
            </div>

            <section class="premium-hero-slider" id="mainHeroSlider">
            
            <div class="hero-content-left">
                <span class="hero-subtitle" id="heroSubtitle"><?php echo tp_tr('label_onerilen_tur'); ?></span>
                <h1 class="hero-title" id="heroTitle"><?php echo tp_tr('label_yukleniyor'); ?>...</h1>
                <p class="hero-desc" id="heroDesc"><?php echo tp_tr('msg_lutfen_bekleyin'); ?></p>
                <div class="hero-price-tag">
                    <span class="price-val" id="heroPrice">0 ₺</span>
                    <span class="price-suffix"><?php echo tp_tr('label_kisi_basi'); ?></span>
                </div>
                <div class="hero-actions">
                    <a href="#" class="btn-hero-primary" id="heroLink"><?php echo tp_tr('home_hero_cta'); ?> <i class="fas fa-arrow-right"></i></a>
                    <div class="hero-nav-dots" id="heroNavDots">
                        <!-- Javascript dinamik olarak bu kısmı döşeyecek (Kaç tur varsa o kadar yuvarlak eklenecek) -->
                    </div>
                </div>
            </div>
            
            <div class="hero-visual-right">
                <div class="pill-group">
                    <div class="pill-item pill-1">
                        <div class="pill-bg" id="pillBg1"></div>
                    </div>
                    <div class="pill-item pill-2">
                        <div class="pill-bg" id="pillBg2"></div>
                    </div>
                    <div class="pill-item pill-3">
                        <div class="pill-bg" id="pillBg3"></div>
                    </div>
                </div>
            </div>

        </section>
        
            <!-- ============================================== -->
            <!-- PREMIUM ARAMA FİLTRELEME KARTI (OVERLAY)       -->
            <!-- ============================================== -->
            <div class="hero-search-overlay">
                
                <!-- Üst Taraf (Havada Kesişen Sekmeler) -->
                <div class="hs-tabs" style="width: max-content; max-width: 95%; overflow-x: auto;">
                    <button class="hs-tab active" data-type="tur"><i class="fas fa-globe-americas"></i> <?php echo tp_tr('chip_tur'); ?></button>
                    <button class="hs-tab" data-type="otel"><i class="fas fa-hotel"></i> <?php echo tp_tr('chip_otel'); ?></button>
                    <button class="hs-tab" data-type="ucak"><i class="fas fa-plane"></i> <?php echo tp_tr('chip_ucak'); ?></button>
                    <button class="hs-tab" data-type="etkinlik"><i class="fas fa-music"></i> <?php echo tp_tr('chip_konser'); ?></button>
                    <button class="hs-tab" data-type="otobus"><i class="fas fa-bus"></i> <?php echo tp_tr('chip_otobus'); ?></button>
                    <button class="hs-tab" data-type="arac"><i class="fas fa-car"></i> <?php echo tp_tr('chip_arac'); ?></button>
                    <button class="hs-tab" data-type="kesfet"><i class="fas fa-compass"></i> <?php echo tp_tr('chip_kesfet'); ?></button>
                </div>


                <!-- Ana Kutu: Filtreler (Input) -->
                <form action="turlar/filtre.php" method="GET" class="hs-main-bar" id="hsMainForm">
                    
                    <!-- [TUR GRUBU] -->
                    <div class="hs-group" id="hs-group-tur" style="display: flex; flex: 1; align-items: center; gap: 10px;">
                        <!-- Search Input -->
                        <div class="hs-inp-box" style="flex: 2.5; position: relative; overflow: visible !important;">
                            <label><i class="fas fa-search" style="color:#ecad29;"></i> <?php echo tp_tr('label_sehir_ulke_ara'); ?></label>
                            <input type="text" name="q" id="pc-tur-input" placeholder="<?php echo tp_tr('placeholder_erken_al'); ?>" autocomplete="off" oninput="handleTurAutocomplete(this)" onfocus="handleTurAutocomplete(this)">
                            <!-- Autocomplete Dropdown -->
                            <div class="hs-autocomplete-dropdown" id="pc-tur-results"></div>
                        </div>
                        
                        <!-- Dönem Seçiniz (Dropdown) -->
                        <div class="hs-inp-box" style="flex: 1.5; cursor: pointer;">
                            <label><i class="fas fa-calendar-alt" style="color:#ecad29;"></i> <?php echo tp_tr('label_tur_tarihi'); ?></label>
                            <select name="period" id="pc-tur-period" style="border:none; outline:none; font-size:14px; font-weight:700; background:none; width:100%; cursor:pointer; padding:0; -webkit-appearance:none; appearance:none;">
                                <option value=""><?php echo tp_tr('option_donem'); ?></option>
                                <?php 
                                try {
                                    $monthsArr = [1=>'Ocak',2=>'Şubat',3=>'Mart',4=>'Nisan',5=>'Mayıs',6=>'Haziran',7=>'Temmuz',8=>'Ağustos',9=>'Eylül',10=>'Ekim',11=>'Kasım',12=>'Aralık'];
                                    // Sadece aktif olan ayları çekelim
                                    $monthStmt = $db->query("SELECT DISTINCT MONTH(baslangic_tarihi) as ay FROM tur_tarihleri WHERE durum = 'aktif' ORDER BY ay ASC");
                                    $activeMonths = $monthStmt->fetchAll(PDO::FETCH_COLUMN);
                                    
                                    if (empty($activeMonths)) {
                                        // Eğer veri yoksa, tüm ayları listele (veya boş bırakılabilir)
                                        foreach($monthsArr as $mNum => $mName) {
                                            echo '<option value="'.$mNum.'">'.$mName.'</option>';
                                        }
                                    } else {
                                        foreach($activeMonths as $mNum) {
                                            echo '<option value="'.$mNum.'">'.$monthsArr[$mNum].'</option>';
                                        }
                                    }
                                } catch(Exception $e) {
                                    // Hata durumunda varsayılan aylar
                                    echo '<option value="all">Tüm Aylar</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>

                    <!-- [UÇAK GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-ucak" style="display: none; flex: 1; align-items: center; gap: 8px;">
                         <!-- Nereden -->
                         <div class="hs-inp-box" style="flex: 1; z-index: 2;">
                            <label><i class="fas fa-plane-departure" style="color:#ecad29;"></i> <?php echo tp_tr('label_nereden_upper'); ?></label>
                            <input type="text" name="from" id="ucak-from" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_sehir_havalimani')); ?>">
                            <div class="hs-swap-btn" onclick="let f=document.getElementById('ucak-from'), t=document.getElementById('ucak-to'), v=f.value; f.value=t.value; t.value=v;"><i class="fas fa-exchange-alt"></i></div>
                        </div>
                        <!-- Nereye -->
                        <div class="hs-inp-box" style="flex: 1; margin-left: 5px;">
                            <label><i class="fas fa-plane-arrival" style="color:#ecad29;"></i> <?php echo tp_tr('label_nereye_upper'); ?></label>
                            <input type="text" name="to" id="ucak-to" placeholder="<?php echo htmlspecialchars(tp_tr('placeholder_sehir_havalimani')); ?>">
                        </div>
                        <!-- Tarihler -->
                        <div class="hs-inp-box group" style="flex: 1.5;">
                            <div class="hs-sub-group">
                                <label><?php echo tp_tr('label_gidis'); ?></label>
                                <input type="text" name="date" placeholder="<?php echo htmlspecialchars(tp_tr('label_gidis_ellipsis')); ?>" onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'">
                            </div>
                            <div class="hs-divider"></div>
                            <div class="hs-sub-group">
                                <label><?php echo tp_tr('label_donus'); ?></label>
                                <input type="text" name="return_date" placeholder="<?php echo htmlspecialchars(tp_tr('label_donus_ellipsis')); ?>" onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'">
                            </div>
                        </div>
                        <!-- Yolcular -->
                        <div class="hs-inp-box" style="flex: 0.8;">
                            <label><span style="color:#888; font-size:10px; text-transform:uppercase; margin-bottom:1px; display:block;"><?php echo tp_tr('label_yolcu'); ?></span></label>
                            <input type="number" name="adults" min="1" max="10" value="1" style="font-size: 14px; font-weight: 800; color: #111; border: none; background: transparent; outline: none; padding: 0; width: 100%; font-family: 'Comfortaa', sans-serif;">
                        </div>
                    </div>

                    <!-- [OTEL GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-otel" style="display: none; flex: 1; align-items: center; gap: 8px; position: relative;">
                        <!-- Üst Seçici: Otel / Bungalov (Absolute positioned for stability) -->
                        <div style="position: absolute; top: -45px; left: 0; display: flex; background: #eee; border-radius: 10px; padding: 3px;">
                            <div class="hs-sub-tab active" id="hs-otel-btn" style="padding: 6px 15px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; background: white; color: #ecad29; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                                <i class="fas fa-hotel"></i> <?php echo tp_tr('label_otel'); ?>
                            </div>
                            <div class="hs-sub-tab" id="hs-bungalov-btn" style="padding: 6px 15px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #777;">
                                <i class="fas fa-home"></i> <?php echo tp_tr('label_bungalov'); ?>
                            </div>
                        </div>
                        <input type="hidden" name="otel_tipi" id="pc-otelTipiInput" value="otel">
                        
                        <!-- Row -->
                        <div class="hs-inp-box" style="flex: 2; position: relative; overflow: visible !important;">
                            <label><i class="fas fa-hotel" style="color:#ecad29;"></i> Otel Ara</label>
                            <input type="text" name="q" id="pc-otel-input" placeholder="Nereye gitmek istersin?" autocomplete="off" oninput="handleOtelAutocomplete(this)" onfocus="handleOtelAutocomplete(this)">
                            <!-- Autocomplete Dropdown -->
                            <div class="hs-autocomplete-dropdown" id="pc-otel-results"></div>
                        </div>
                        <div class="hs-inp-box group" style="flex: 1.5;">
                            <div class="hs-sub-group">
                                <label>Giriş</label>
                                <input type="text" name="checkin" placeholder="Giriş..." onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'">
                            </div>
                            <div class="hs-divider"></div>
                            <div class="hs-sub-group">
                                <label>Çıkış</label>
                                <input type="text" name="checkout" placeholder="Çıkış..." onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'">
                            </div>
                        </div>
                        <div class="hs-inp-box" style="flex: 0.8;">
                            <label><i class="fas fa-user-friends" style="color:#ecad29;"></i> Misafir</label>
                            <input type="number" name="adults" min="1" max="10" value="2" style="font-size: 14px; font-weight: 800; color: #111; border: none; background: transparent; outline: none; padding: 0; width: 100%; font-family: 'Comfortaa', sans-serif;">
                        </div>
                    </div>

                    <!-- [ETKİNLİK GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-etkinlik" style="display: none; flex: 1; align-items: center; gap: 10px;">
                        <!-- Event/Artist Search -->
                        <div class="hs-inp-box" style="flex: 2;">
                            <label><i class="fas fa-microphone" style="color:#ecad29;"></i> ETKİNLİK VEYA SANATÇI ARA</label>
                            <input type="text" name="q" placeholder="Konser, tiyatro veya mekan...">
                        </div>
                        <!-- Event Date -->
                        <div class="hs-inp-box" style="flex: 1.2;">
                            <label><i class="fas fa-calendar-day" style="color:#ecad29;"></i> ETKİNLİK TARİHİ</label>
                            <input type="text" placeholder="Seçiniz" readonly>
                        </div>
                    </div>

                    <!-- [OTOBÜS GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-otobus" style="display: none; flex: 1; align-items: center; gap: 8px;">
                         <!-- Nereden -->
                         <div class="hs-inp-box" style="z-index: 2;">
                            <label><i class="fas fa-map-marker-alt" style="color:#ecad29;"></i> NEREDEN?</label>
                            <input type="text" name="from" placeholder="Şehir Seçiniz">
                            <div class="hs-swap-btn"><i class="fas fa-exchange-alt"></i></div>
                        </div>
                        <!-- Nereye -->
                        <div class="hs-inp-box" style="margin-left: 5px;">
                            <label><i class="fas fa-bus" style="color:#ecad29;"></i> NEREYE?</label>
                            <input type="text" name="to" placeholder="Varış noktası...">
                        </div>
                        <!-- Gidiş Tarihi -->
                        <div class="hs-inp-box" style="flex: 0.8;">
                            <label><i class="fas fa-calendar-alt" style="color:#ecad29;"></i> GİDİŞ TARİHİ</label>
                            <input type="text" placeholder="Seçiniz" readonly>
                        </div>
                        <!-- Kişi Sayısı -->
                        <div class="hs-inp-box" style="flex: 0.6;">
                            <span style="font-size: 14px; font-weight: 800; color: #111; display:flex; flex-direction: column; justify-content:center; height:100%;"><span style="color:#888; font-size:10px; text-transform:uppercase; margin-bottom:1px;"><i class="fas fa-users" style="color:#ecad29; font-size:12px;"></i> Kişi Sayısı</span> 2</span>
                        </div>
                    </div>

                    <!-- [ARAÇ GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-arac" style="display: none; flex: 1; align-items: center; gap: 10px;">
                        <!-- Pickup Location -->
                        <div class="hs-inp-box" style="flex: 2;">
                            <label><i class="fas fa-car" style="color:#ecad29;"></i> TESLİM ALINACAK YER</label>
                            <input type="text" name="location" placeholder="Havalimanı veya şehir...">
                        </div>
                        <!-- Dates -->
                        <div class="hs-inp-box" style="flex: 1.2;">
                            <label><i class="fas fa-calendar-check" style="color:#ecad29;"></i> ALIŞ - İADE</label>
                            <input type="text" placeholder="Seçiniz" readonly>
                        </div>
                    </div>

                    <!-- [KEŞFET GRUBU] (Hidden by default) -->
                    <div class="hs-group" id="hs-group-kesfet" style="display: none; flex: 1; align-items: center; gap: 10px; position: relative;">
                        <!-- Üst Seçici: Yurt İçi / Yurt Dışı -->
                        <div style="position: absolute; top: -45px; left: 0; display: flex; background: #eee; border-radius: 10px; padding: 3px;">
                            <div class="hs-sub-tab active" id="hs-yurtici-btn" style="padding: 6px 15px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; background: white; color: #ecad29; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                                Yurt İçi
                            </div>
                            <div class="hs-sub-tab" id="hs-yurtdisi-btn" style="padding: 6px 15px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #777;">
                                Yurt Dışı
                            </div>
                        </div>
                        
                        <!-- Search Input (Stretched to match full width theme) -->
                        <div class="hs-inp-box" style="flex: 1;">
                            <label><i class="fas fa-search" style="color:#ecad29;"></i> ŞEHİR VEYA ÜLKE ARA</label>
                            <input type="text" name="q" placeholder="Gitmek istediğiniz yeri yazın...">
                        </div>
                    </div>

                    <!-- Ortak Sarı Ara Butonu -->
                    <button type="submit" class="hs-submit" style="gap: 10px;">
                        <i class="fas fa-search"></i>
                        <span id="hs-submit-text">HEMEN ARA</span>
                    </button>

                </form>

                <!-- Gövde Altı Ekstra Seçenekler (Uçak için) -->
                <div class="hs-extra-options" id="hs-extra-ucak" style="display: none; margin-top: 10px;">
                    <div class="hs-radio-wrap" style="margin-bottom: 10px;">
                        <label class="active-radio"><input type="radio" name="yon" checked> Gidiş - Dönüş</label>
                        <label><input type="radio" name="yon"> Tek Yön</label>
                    </div>
                    <div class="hs-footer">
                        <label class="hs-switch-wrap">
                            <div class="hs-switch">
                                <input type="checkbox">
                                <span class="s-slider"></span>
                            </div>
                            Sadece Direkt Uçuşlar
                        </label>
                    </div>
                </div>

                <script>
                    // PC Tab Switching Logic (HS-TAB)
                    document.addEventListener('DOMContentLoaded', () => {
                        const hsTabs = document.querySelectorAll('.hs-tab');
                        const turGroup = document.getElementById('hs-group-tur');
                        const ucakGroup = document.getElementById('hs-group-ucak');
                        const otelGroup = document.getElementById('hs-group-otel');
                        const etkinlikGroup = document.getElementById('hs-group-etkinlik');
                        const otobusGroup = document.getElementById('hs-group-otobus');
                        const aracGroup = document.getElementById('hs-group-arac');
                        const kesfetGroup = document.getElementById('hs-group-kesfet');
                        const extraUcak = document.getElementById('hs-extra-ucak');
                        const submitText = document.getElementById('hs-submit-text');
                        const hsForm = document.getElementById('hsMainForm');

                        hsTabs.forEach(tab => {
                            tab.addEventListener('click', (e) => {
                                hsTabs.forEach(t => t.classList.remove('active'));
                                tab.classList.add('active');
                                
                                // Tüm grup inputlarını devre dışı bırak (URL'de kirlilik ve çakışma olmaması için)
                                hsForm.querySelectorAll('.hs-group input, .hs-group select').forEach(el => el.disabled = true);
                                
                                const type = tab.dataset.type;
                                
                                if (type === 'tur') {
                                    turGroup.style.display = 'flex';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = window.TP_LANG['home_search_tur_btn'];
                                    hsForm.action = 'turlar/filtre.php';
                                    turGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else if (type === 'ucak') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'flex';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'block';
                                    submitText.textContent = window.TP_LANG && window.TP_LANG['home_search_ucak_btn'] ? window.TP_LANG['home_search_ucak_btn'] : 'UÇAK BİLETİ BUL';
                                    hsForm.action = 'ucak/';
                                    ucakGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                    extraUcak.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else if (type === 'otel') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'flex';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = window.TP_LANG['home_search_otel_btn'];
                                    hsForm.action = 'oteller/filtre.php';
                                    otelGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                    if (typeof window.checkOtelSubTab === 'function') window.checkOtelSubTab(); // Alt tab desteği için
                                } else if (type === 'etkinlik') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'flex';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = window.TP_LANG['home_search_etkinlik_btn'];
                                    hsForm.action = 'etkinlikler/etkinlikler.php';
                                    etkinlikGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else if (type === 'otobus') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'flex';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = window.TP_LANG['home_search_otobus_btn'];
                                    hsForm.action = 'biletler/otobus.php';
                                    otobusGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else if (type === 'arac') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'flex';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = window.TP_LANG['home_search_arac_btn'];
                                    hsForm.action = 'arac/kiralama.php';
                                    aracGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else if (type === 'kesfet') {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'none';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'flex';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = 'KEŞFETMEYE BAŞLA';
                                    hsForm.action = 'kesfet/arama.php';
                                    kesfetGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);
                                } else {
                                    turGroup.style.display = 'none';
                                    ucakGroup.style.display = 'flex';
                                    otelGroup.style.display = 'none';
                                    etkinlikGroup.style.display = 'none';
                                    otobusGroup.style.display = 'none';
                                    aracGroup.style.display = 'none';
                                    kesfetGroup.style.display = 'none';
                                    extraUcak.style.display = 'none';
                                    submitText.textContent = 'ARA';
                                    hsForm.action = 'arama.php';
                                }
                            });
                        });
                        // Sayfa yüklendiğinde varsayılan olarak TUR dışındaki tüm grupları pasif yap
                        hsForm.querySelectorAll('.hs-group input, .hs-group select').forEach(el => el.disabled = true);
                        turGroup.querySelectorAll('input, select').forEach(el => el.disabled = false);

                        // Otel / Bungalov Sub-tabs
                        const otelBtn = document.getElementById('hs-otel-btn');
                        const bungalovBtn = document.getElementById('hs-bungalov-btn');
                        const otelTipiInput = document.getElementById('pc-otelTipiInput');
                        if(otelBtn && bungalovBtn) {
                            otelBtn.onclick = () => {
                                otelBtn.style.background = 'white'; otelBtn.style.color = '#ecad29'; otelBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.05)';
                                bungalovBtn.style.background = 'none'; bungalovBtn.style.color = '#777'; bungalovBtn.style.boxShadow = 'none';
                                document.querySelector('#hs-group-otel label i').className = 'fas fa-hotel';
                                document.querySelector('#hs-group-otel input[name="q"]').placeholder = "<?php echo tp_tr('placeholder_sehir_seciniz'); ?>";
                                if(otelTipiInput) otelTipiInput.value = 'otel';
                            };
                            bungalovBtn.onclick = () => {
                                bungalovBtn.style.background = 'white'; bungalovBtn.style.color = '#ecad29'; bungalovBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.05)';
                                otelBtn.style.background = 'none'; otelBtn.style.color = '#777'; otelBtn.style.boxShadow = 'none';
                                document.querySelector('#hs-group-otel label i').className = 'fas fa-home';
                                document.querySelector('#hs-group-otel input[name="q"]').placeholder = "<?php echo tp_tr('placeholder_villa_otel_bungalov_adi'); ?>";
                                if(otelTipiInput) otelTipiInput.value = 'bungalov';
                            };
                        }
                    });

                    // --- PC TUR AUTOCOMPLETE - KNKCIM ULTRA RELIABLE ---
                    const searchSuggestions = <?php 
                        $cities = ['Adana','Adıyaman','Afyonkarahisar','Ağrı','Amasya','Ankara','Antalya','Artvin','Aydın','Balıkesir','Bilecik','Bingöl','Bitlis','Bolu','Burdur','Bursa','Çanakkale','Çankırı','Çorum','Denizli','Diyarbakır','Edirne','Elazığ','Erzincan','Erzurum','Eskişehir','Gaziantep','Giresun','Gümüşhane','Hakkari','Hatay','Isparta','Mersin','İstanbul','İzmir','Kars','Kastamonu','Kayseri','Kırklareli','Kırşehir','Kocaeli','Konya','Kütahya','Malatya','Manisa','Kahramanmaraş','Mardin','Muğla','Muş','Nevşehir','Niğde','Ordu','Rize','Sakarya','Samsun','Siirt','Sinop','Sivas','Tekirdağ','Tokat','Trabzon','Tunceli','Şanlıurfa','Uşak','Van','Yozgat','Zonguldak','Aksaray','Bayburt','Karaman','Kırıkkale','Batman','Şırnak','Bartın','Ardahan','Iğdır','Yalova','Karabük','Kilis','Osmaniye','Düzce'];
                        $special_suggestions = ['GAP Turu', 'GAP', 'Adana Kalkışlı', 'Adana Turu', 'Gaziantep', 'Kapadokya Turu', 'Karadeniz Turu', 'Ege Turu', 'Likya Yolu', 'İzmir Kalkışlı', 'İstanbul Kalkışlı', 'Ankara Kalkışlı'];
                        echo json_encode(array_values(array_unique(array_merge($cities, $special_suggestions))), JSON_UNESCAPED_UNICODE); 
                    ?>;

                    function handleTurAutocomplete(input) {
                        const resultsDiv = document.getElementById('pc-tur-results');
                        if (!resultsDiv) return;

                        let val = input.value.trim().toLowerCase();
                        if (val.length < 1) {
                            resultsDiv.style.display = 'none';
                            return;
                        }

                        // Turkish locale support fallback
                        const valTr = input.value.trim().toLocaleLowerCase('tr-TR');
                        
                        const matches = searchSuggestions.filter(item => {
                            const itemTr = item.toLocaleLowerCase('tr-TR');
                            const itemEn = item.toLowerCase();
                            return itemTr.includes(valTr) || itemEn.includes(val);
                        }).slice(0, 10);

                        if (matches.length > 0) {
                            resultsDiv.innerHTML = matches.map(m => {
                                let icon = 'fa-map-marker-alt';
                                let type = 'Şehir';
                                if (m.includes('Turu') || m.includes('GAP')) { icon = 'fa-route'; type = 'Tur'; }
                                else if (m.includes('Kalkışlı')) { icon = 'fa-plane-departure'; type = 'Kalkış'; }

                                return `
                                    <div class="hs-autocomplete-item" onmousedown="selectTurSuggestion('${m.replace(/'/g, "\\'")}')">
                                        <i class="fas ${icon}"></i>
                                        <span>${m}</span>
                                        <span class="type-badge">${type}</span>
                                    </div>
                                `;
                            }).join('');
                            resultsDiv.style.display = 'block';
                            resultsDiv.classList.add('active');
                        } else {
                            resultsDiv.style.display = 'none';
                        }
                    }

                    function selectTurSuggestion(val) {
                        const input = document.getElementById('pc-tur-input');
                        const resultsDiv = document.getElementById('pc-tur-results');
                        if (input) {
                            input.value = val;
                            if (resultsDiv) {
                                resultsDiv.style.setProperty('display', 'none', 'important');
                                resultsDiv.classList.remove('active');
                            }
                            // Dönemleri güncelle
                            updateAvailablePeriods(val);
                        }
                    }

                    // Dinamik Dönem Güncelleme Fonksiyonu
                    let periodTimeout = null;
                    function updateAvailablePeriods(q) {
                        const periodSelect = document.getElementById('pc-tur-period');
                        if (!periodSelect) return;

                        fetch(`ajax/get_active_months.php?q=${encodeURIComponent(q)}`)
                            .then(res => res.json())
                            .then(data => {
                                if (data.success) {
                                    // Mevcut seçimi koru (eğer hala seçenekler arasındaysa)
                                    const currentVal = periodSelect.value;
                                    
                                    // Varsayılan "Dönem Seçiniz" kalsın
                                    let html = `<option value=""><?php echo tp_tr('option_donem'); ?></option>`;
                                    
                                    if (data.months && data.months.length > 0) {
                                        data.months.forEach(m => {
                                            const selected = (m.value == currentVal) ? 'selected' : '';
                                            html += `<option value="${m.value}" ${selected}>${m.label}</option>`;
                                        });
                                    } else {
                                        // Eğer bu şehir için hiç tur yoksa hepsi kapalı göründüğünde kafa karışmasın
                                        // Boş kalsın veya bir uyarı eklenebilir
                                    }
                                    
                                    periodSelect.innerHTML = html;
                                }
                            });
                    }

                    // Arama kutusuna yazarken de dönemleri güncelle (debounce ile)
                    document.getElementById('pc-tur-input')?.addEventListener('input', (e) => {
                        clearTimeout(periodTimeout);
                        periodTimeout = setTimeout(() => {
                            updateAvailablePeriods(e.target.value);
                        }, 500);
                    });

                    // --- PC OTEL AUTOCOMPLETE ---
                    function handleOtelAutocomplete(input) {
                        const resultsDiv = document.getElementById('pc-otel-results');
                        if (!resultsDiv) return;

                        let val = input.value.trim().toLowerCase();
                        if (val.length < 1) {
                            resultsDiv.style.display = 'none';
                            return;
                        }

                        const valTr = input.value.trim().toLocaleLowerCase('tr-TR');
                        
                        const matches = searchSuggestions.filter(item => {
                            // Tur ve Kalkışlı önerilerini otelde gösterme
                            if(item.includes('Turu') || item.includes('Kalkışlı') || item.includes('GAP')) return false;

                            const itemTr = item.toLocaleLowerCase('tr-TR');
                            const itemEn = item.toLowerCase();
                            return itemTr.includes(valTr) || itemEn.includes(val);
                        }).slice(0, 10);

                        if (matches.length > 0) {
                            resultsDiv.innerHTML = matches.map(m => {
                                return `
                                    <div class="hs-autocomplete-item" onmousedown="selectOtelSuggestion('${m.replace(/'/g, "\\'")}')">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>${m}</span>
                                        <span class="type-badge">Şehir</span>
                                    </div>
                                `;
                            }).join('');
                            resultsDiv.style.display = 'block';
                            resultsDiv.classList.add('active');
                        } else {
                            resultsDiv.style.display = 'none';
                        }
                    }

                    function selectOtelSuggestion(val) {
                        const input = document.getElementById('pc-otel-input');
                        const resultsDiv = document.getElementById('pc-otel-results');
                        if (input) {
                            input.value = val;
                            if (resultsDiv) {
                                resultsDiv.style.setProperty('display', 'none', 'important');
                                resultsDiv.classList.remove('active');
                            }
                        }
                    }

                    document.addEventListener('mousedown', function(e) {
                        // Tur kapatma
                        const resultsDiv = document.getElementById('pc-tur-results');
                        const input = document.getElementById('pc-tur-input');
                        if (resultsDiv && input && !resultsDiv.contains(e.target) && !input.contains(e.target)) {
                            resultsDiv.style.setProperty('display', 'none', 'important');
                            resultsDiv.classList.remove('active');
                        }
                        // Otel kapatma
                        const otelResultsDiv = document.getElementById('pc-otel-results');
                        const otelInput = document.getElementById('pc-otel-input');
                        if (otelResultsDiv && otelInput && !otelResultsDiv.contains(e.target) && !otelInput.contains(e.target)) {
                            otelResultsDiv.style.setProperty('display', 'none', 'important');
                            otelResultsDiv.classList.remove('active');
                        }
                    });
                </script>
                
            </div> <!-- ARAMA KARTI BİTİŞİ -->

            <style>
                @media only screen and (min-width: 1025px) {
                    .hero-search-overlay {
                        top: -150px !important; /* Header ile arasına daha fazla (30px) boşluk koyduk */
                    }
                    .hero-scroller-layout {
                        opacity: 1 !important;
                        visibility: visible !important;
                        z-index: 9999 !important;
                        top: 45px !important; /* Perfect balance between 30px and 65px */
                        left: -35px !important;
                        transform: none !important;
                        width: 100% !important;
                        max-width: 950px !important;
                    }
                    /* Kampanya ve Hero'yu şehirlerin altında ezilmemesi için bir tık aşağı ittirdik */
                    .premium-hero-slider {
                        margin-top: 295px !important; 
                    }
                    /* Hero Alanı (Sağ Taraf) metin ve butonları biraz ufalttık */
                    .hero-title { font-size: 28px !important; margin-bottom: 10px !important; }
                    .hero-desc { font-size: 14px !important; margin-bottom: 25px !important; line-height: 1.5 !important; }
                    .hero-subtitle { font-size: 11px !important; padding: 6px 15px !important; margin-bottom: 15px !important; }
                    .hero-price-tag .price-val { font-size: 28px !important; }
                    .hero-price-tag { margin-bottom: 25px !important; }
                    .btn-hero-primary { font-size: 14px !important; padding: 12px 28px !important; }

                    .camp-widget-area {
                        margin-top: 40px !important;
                        width: 320px !important; /* Kart eni küçültüldü */
                        height: 440px !important; /* Kart boyu küçültüldü */
                    }
                    /* Kampanya kartı yazıları da yeni boyuta göre ufaltıldı */
                    .camp-c-title {
                        font-size: 20px !important;
                    }
                    .camp-c-desc {
                        font-size: 13px !important;
                    }
                    .city-scroller-header-pc {
                        text-align: center !important; 
                        padding-left: 0 !important;
                        margin-bottom: 5px !important;
                    }
                    .city-scroller-header-pc h2 {
                        font-size: 10px !important; 
                        font-weight: 800 !important;
                        letter-spacing: 3px !important;
                        color: #111 !important; 
                        text-shadow: none !important; 
                        border-bottom: 1px solid #ecad29 !important;
                        padding-bottom: 5px !important;
                        opacity: 0.7 !important;
                    }
                    .city-scroller-section-pc {
                        width: 100% !important;
                        margin: 0 !important;
                        gap: 10px !important;
                    }
                    .city-marquee-mask-pc {
                        height: 42px !important; 
                        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) !important;
                    }
                    .city-search-trigger-pc {
                        height: 42px !important; /* Bir tık büyütüldü denge için */
                        background: #111 !important; /* Premium Siyah */
                        color: #fff !important;
                        font-size: 11px !important;
                        padding: 0 20px !important;
                        border-radius: 30px !important;
                        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
                        text-transform: uppercase !important;
                        letter-spacing: 1px !important;
                    }
                    .city-search-trigger-pc i {
                        color: #ecad29 !important; /* Sarı büyüteç */
                        margin-right: 8px !important;
                    }
                    .city-chip-pc {
                        background: #fff !important; /* Temiz Beyaz */
                        color: #444 !important; /* Soft Siyah/Gri */
                        border: 1px solid rgba(0,0,0,0.06) !important;
                        height: 40px !important; 
                        font-size: 13px !important; 
                        font-weight: 700 !important;
                        padding: 0 20px !important;
                        border-radius: 30px !important;
                        box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
                    }
                    .city-chip-pc i {
                        color: #ecad29 !important; /* Turuncu/Sarı ikonlar */
                        font-size: 12px !important;
                    }
                    .city-chip-pc:hover {
                        background: #ecad29 !important;
                        color: #000 !important;
                        border-color: #ecad29 !important;
                        box-shadow: 0 8px 20px rgba(236,173,41,0.2) !important;
                    }
                    .city-chip-pc:hover i {
                        color: #000 !important;
                    }
                }

                /* ============================================== */
                /* ÖNERİLEN TURLAR - BENTO GRID TASARIMI          */
                /* ============================================== */
                .section-header-premium {
                    text-align: center;
                    margin: 80px 0 40px;
                    font-family: 'Comfortaa', sans-serif;
                }
                .section-header-premium h2 {
                    font-size: 32px;
                    font-weight: 700; /* Capped at 700 to prevent synthetic bold */
                    color: #111;
                    margin-bottom: 10px;
                    position: relative;
                    display: inline-block;
                }
                .section-header-premium h2::after {
                    content: '';
                    position: absolute;
                    bottom: -8px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 60px;
                    height: 4px;
                    background: #ecad29;
                    border-radius: 2px;
                }
                .section-header-premium p {
                    font-size: 15px;
                    color: #777;
                    font-weight: 500;
                }

                .premium-tabs-wrap {
                    display: flex;
                    justify-content: center;
                    gap: 12px;
                    margin-bottom: 40px;
                    flex-wrap: wrap;
                }
                .p-tab-btn {
                    padding: 8px 22px;
                    border-radius: 30px;
                    border: 1px solid rgba(0,0,0,0.06);
                    background: #fff;
                    color: #555;
                    font-size: 13px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
                }
                .p-tab-btn:hover, .p-tab-btn.active {
                    background: #111;
                    color: #fff;
                    border-color: #111;
                    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
                }
 
                /* ========================================================== */
                /* PREMIUM GLASS GUIDES SECTION                              */
                /* ========================================================== */
                .tasarim-guide-section {
                    margin: 150px 0;
                    padding: 150px 0;
                    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
                    position: relative;
                    overflow: hidden;
                }
                .tasarim-guide-section::before {
                    content: '';
                    position: absolute;
                    top: -100px;
                    right: -100px;
                    width: 400px;
                    height: 400px;
                    background: radial-gradient(circle, rgba(236, 173, 41, 0.05) 0%, transparent 70%);
                    border-radius: 50%;
                }
                .tasarim-guide-title-box {
                    text-align: center;
                    margin-bottom: 90px;
                    position: relative;
                    z-index: 2;
                }
                .tasarim-guide-title-box span {
                    display: block;
                    color: #ecad29;
                    font-size: 14px;
                    font-weight: 700; /* Capped at 700 for exact Comfortaa match */
                    letter-spacing: 3px;
                    text-transform: uppercase;
                    margin-bottom: 15px;
                }
                .tasarim-guide-title-box h2 {
                    font-size: 50px; /* Slightly reduced for better fit with the correct font weight */
                    font-weight: 700; /* Capped at 700 for exact Comfortaa match */
                    color: #0f172a;
                    text-transform: uppercase;
                    letter-spacing: -0.5px; /* Removed extreme negative spacing */
                    line-height: 1.2; /* Better breathing room */
                    margin: 0;
                }
                .tasarim-guide-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 35px;
                    max-width: 1300px;
                    margin: 0 auto;
                    padding: 0 40px;
                    position: relative;
                    z-index: 2;
                }
                .tasarim-guide-card {
                    background: rgba(255, 255, 255, 0.6);
                    -webkit-backdrop-filter: blur(25px);
                    backdrop-filter: blur(25px);
                    border: 1px solid rgba(255, 255, 255, 1);
                    border-radius: 50px;
                    padding: 50px 30px;
                    text-align: center;
                    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.03);
                    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .tasarim-guide-card:hover {
                    transform: translateY(-20px);
                    background: #fff;
                    box-shadow: 0 45px 100px rgba(15, 23, 42, 0.1);
                    border-color: #ecad29;
                }
                .tasarim-guide-pp {
                    width: 150px;
                    height: 150px;
                    margin: 0 auto 35px;
                    border-radius: 50%;
                    padding: 6px;
                    background: linear-gradient(135deg, #ecad29, #bc8a20);
                    box-shadow: 0 15px 35px rgba(236, 173, 41, 0.25);
                }
                .tasarim-guide-pp img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                    border: 4px solid #fff;
                }
                .tasarim-guide-card h3 {
                    font-size: 26px;
                    font-weight: 900;
                    color: #0f172a;
                    margin: 0 0 10px 0;
                }
                .tasarim-guide-card p {
                    font-size: 14px;
                    font-weight: 700;
                    color: #ecad29;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    margin-bottom: 25px;
                }
                .tasarim-guide-tags {
                    display: flex;
                    justify-content: center;
                    gap: 10px;
                    margin-bottom: 35px;
                }
                .tasarim-guide-pill {
                    padding: 7px 16px;
                    background: #f1f5f9;
                    color: #64748b;
                    font-size: 11px;
                    font-weight: 800;
                    border-radius: 30px;
                    text-transform: uppercase;
                }
                .tasarim-card-link {
                    display: inline-flex;
                    align-items: center;
                    gap: 12px;
                    color: #0f172a !important;
                    font-weight: 900;
                    font-size: 15px;
                    text-decoration: none;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    padding-bottom: 5px;
                    border-bottom: 2px solid #ecad29;
                    transition: all 0.3s ease;
                }
                .tasarim-card-link:hover {
                    gap: 18px;
                    color: #ecad29 !important;
                }
                @media (max-width: 1200px) {
                    .tasarim-guide-grid { grid-template-columns: repeat(2, 1fr); }
                }
                @media (max-width: 600px) {
                    .tasarim-guide-grid { grid-template-columns: 1fr; }
                    .tasarim-guide-title-box h2 { font-size: 38px; }
                }


                /* Bento Grid Layout */
                .bento-grid-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-auto-rows: 220px;
                    gap: 20px;
                    padding: 0 20px 100px;
                }

                .bento-item {
                    position: relative;
                    border-radius: 24px;
                    overflow: hidden;
                    text-decoration: none;
                    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .bento-item:hover {
                    transform: translateY(-8px) scale(1.02);
                    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
                }

                /* Bento Sizes */
                .bento-v { grid-row: span 2; } /* Vertical Large */
                .bento-h { grid-column: span 2; } /* Horizontal Wide */
                .bento-big { grid-column: span 2; grid-row: span 2; } /* Large Square */

                /* Content Styling */
                .bento-img {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    transition: transform 0.8s ease;
                }
                .bento-item:hover .bento-img {
                    transform: scale(1.1);
                }

                .bento-overlay {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    padding: 30px;
                    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    box-sizing: border-box;
                    color: #fff;
                }

                .bento-category {
                    font-size: 10px;
                    font-weight: 800;
                    text-transform: uppercase;
                    color: #ecad29;
                    margin-bottom: 5px;
                    letter-spacing: 1.5px;
                }
                .bento-title {
                    font-size: 20px;
                    font-weight: 800;
                    margin: 0;
                    line-height: 1.2;
                }
                .bento-meta {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    margin-top: 10px;
                    font-size: 13px;
                    font-weight: 600;
                    opacity: 0.9;
                }
                .bento-price {
                    padding: 4px 12px;
                    background: #ecad29;
                    color: #000;
                    backdrop-filter: blur(10px);
                    border-radius: 8px;
                }

                @media (max-width: 1024px) {
                    .bento-grid-container {
                        grid-template-columns: repeat(2, 1fr);
                        grid-auto-rows: 200px;
                    }
                    .bento-big { grid-column: span 2; grid-row: span 2; }
                    .bento-h { grid-column: span 2; }
                }

                @media (max-width: 768px) {
                    .bento-grid-container {
                        display: flex;
                        flex-direction: column;
                    }
                    .bento-item { height: 250px; }
                }
            </style>
            <!-- City Scroller PC Removed by KNKCIM -->

        </div> <!-- HERO MASTER WRAPPER BİTİŞİ -->

        <section class="section-header-premium">
            <h2><?php echo tp_tr('turlar_yurtici'); ?></h2>
            <p>Ruhunuzu besleyecek en popüler tur rotalarını ve deneyimleri keşfedin.</p>
        </section>

        <div class="premium-tabs-wrap">
            <button class="p-tab-btn active" onclick="filterBento(this, 'all')">Tümü</button>
            <?php
            // Mevcut tur kategorilerini çekelim
            try {
                if (isset($db)) {
                    $catStmt = $db->query("SELECT DISTINCT kategori FROM turlar WHERE durum='aktif' AND kategori != '' AND EXISTS (SELECT 1 FROM tur_tarihleri tt WHERE tt.tur_id = turlar.id AND tt.durum='aktif' AND tt.baslangic_tarihi >= CURDATE()) LIMIT 8");
                    while($cat = $catStmt->fetch(PDO::FETCH_ASSOC)) {
                        $kat_map = ['kultur_tarih'=>'Kültür & Tarih','doga_trekking'=>'Doğa & Trekking','macera_aktivite'=>'Macera & Aktivite','gastronomi_lezzet'=>'Gastronomi & Lezzet','tekne_deniz'=>'Tekne & Deniz','inanc_hacilik'=>'İnanç & Hacılık','saglik_termal'=>'Sağlık & Termal','fotografcilik'=>'Fotoğrafçılık','eko_turizm'=>'Eko Turizm','luks_vip'=>'Lüks & VIP','aile_cocuk'=>'Aile & Çocuk','genclik_backpacker'=>'Gençlik & Backpacker','romantik_balayi'=>'Romantik & Balayı','gunluk_kisa'=>'Günlük & Kısa','uzun_sureli'=>'Uzun Süreli','kulturel_etkinlik'=>'Kültürel Etkinlik','spor_aktif'=>'Spor & Aktif','egitim_workshop'=>'Eğitim & Workshop','endustriyel_is'=>'Endüstriyel & İş','tema_park'=>'Tema Park','alisveris_outlet'=>'Alışveriş & Outlet','kirsal_agro'=>'Kırsal & Agro','tarihi_miras'=>'Tarihi Miras','ozel_tematik'=>'Özel Tematik'];
                        $displayCat = $kat_map[$cat['kategori']] ?? mb_convert_case(str_replace('_', ' ', $cat['kategori']), MB_CASE_TITLE, "UTF-8");
                        echo '<button class="p-tab-btn" onclick="filterBento(this, \''.htmlspecialchars($cat['kategori']).'\')">'.htmlspecialchars($displayCat).'</button>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div class="bento-grid-container" id="bentoGrid">
            <?php
            // Bento Grid için 7 özel tur çekiyoruz (Grid tam dolması için 6 yetmiyordu, 7 yaptık)
            try {
                if (isset($db)) {
                    $bentoSQL = "
                        SELECT t.id, t.tur_adi, t.kategori, t.kapak_resmi, t.indirimli_fiyat, t.normal_fiyat,
                        COALESCE(t.kapak_resmi, (SELECT g.resim_yolu FROM tur_galeri g WHERE g.tur_id = t.id ORDER BY g.siralama ASC LIMIT 1)) as fallback_img
                        FROM turlar t
                        WHERE t.durum='aktif'
                        AND EXISTS (SELECT 1 FROM tur_tarihleri tt WHERE tt.tur_id = t.id AND tt.durum='aktif' AND tt.baslangic_tarihi >= CURDATE())
                        ORDER BY t.onerilen DESC, t.id DESC
                        LIMIT 7";
                    
                    $bentoStmt = $db->query($bentoSQL);
                    $bentoTours = $bentoStmt->fetchAll(PDO::FETCH_ASSOC);
                    
                    $layouts = ['bento-big', 'bento-h', 'bento-v', 'bento-item', 'bento-item', 'bento-item', 'bento-item'];
                    
                    foreach ($bentoTours as $index => $bt) {
                        $layoutClass = isset($layouts[$index]) ? $layouts[$index] : 'bento-item';
                        $imgKey = trim((string)$bt['fallback_img'] ?? '');
                        
                        // Akıllı Görsel Yolu Belirleyici
                        $imgPath = 'gorsel/placeholder.jpg';
                        if (!empty($imgKey)) {
                            if (strpos($imgKey, 'http') === 0) {
                                $imgPath = $imgKey;
                            } elseif (strpos($imgKey, 'gorsel/') === 0) {
                                $imgPath = $imgKey;
                            } else {
                                // Hem turlar hem de tur_gorselleri (galeri) klasörlerini deniyoruz
                                if (file_exists(__DIR__ . '/gorsel/turlar/' . $imgKey)) {
                                    $imgPath = 'gorsel/turlar/' . $imgKey;
                                } elseif (file_exists(__DIR__ . '/gorsel/tur_gorselleri/' . $imgKey)) {
                                    $imgPath = 'gorsel/tur_gorselleri/' . $imgKey;
                                } else {
                                    // Bulunamadıysa turlar varsayılan kalsın ama gorsel de olabilir doğrudan
                                    $imgPath = 'gorsel/turlar/' . $imgKey;
                                }
                            }
                        }
                        
                        $price = ($bt['indirimli_fiyat'] > 0) ? $bt['indirimli_fiyat'] : $bt['normal_fiyat'];
                        $priceText = number_format((float)$price, 0, ',', '.') . ' ₺';
                        $bento_kat_map = ['kultur_tarih'=>'Kültür & Tarih','doga_trekking'=>'Doğa & Trekking','macera_aktivite'=>'Macera & Aktivite','gastronomi_lezzet'=>'Gastronomi & Lezzet','tekne_deniz'=>'Tekne & Deniz','inanc_hacilik'=>'İnanç & Hacılık','saglik_termal'=>'Sağlık & Termal','fotografcilik'=>'Fotoğrafçılık','eko_turizm'=>'Eko Turizm','luks_vip'=>'Lüks & VIP','aile_cocuk'=>'Aile & Çocuk','genclik_backpacker'=>'Gençlik & Backpacker','romantik_balayi'=>'Romantik & Balayı','gunluk_kisa'=>'Günlük & Kısa','uzun_sureli'=>'Uzun Süreli','kulturel_etkinlik'=>'Kültürel Etkinlik','spor_aktif'=>'Spor & Aktif','egitim_workshop'=>'Eğitim & Workshop','endustriyel_is'=>'Endüstriyel & İş','tema_park'=>'Tema Park','alisveris_outlet'=>'Alışveriş & Outlet','kirsal_agro'=>'Kırsal & Agro','tarihi_miras'=>'Tarihi Miras','ozel_tematik'=>'Özel Tematik'];
                        $cat = !empty($bt['kategori']) ? ($bento_kat_map[$bt['kategori']] ?? mb_convert_case(str_replace('_', ' ', $bt['kategori']), MB_CASE_TITLE, "UTF-8")) : 'Tur Paketi';
                        
                        echo '
                        <a href="turlar/tur-incele.php?id='.(int)$bt['id'].'" class="bento-item '.$layoutClass.'" data-category="'.htmlspecialchars($bt['kategori']).'">
                            <div class="bento-img" style="background-image: url(\''.$imgPath.'\')"></div>
                            <div class="bento-overlay">
                                <span class="bento-category">'.$cat.'</span>
                                <h3 class="bento-title">'.htmlspecialchars($bt['tur_adi']).'</h3>
                                <div class="bento-meta">
                                    <span class="bento-price">'.$priceText.'</span>
                                    <span><i class="far fa-clock" style="color: #ecad29;"></i> Tur Paketi</span>
                                </div>
                            </div>
                        </a>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <!-- Tüm Turlar Butonu -->
        <div style="text-align: center; margin-bottom: 80px;">
            <a href="turlar/turlar.php" class="btn-hero-primary" style="display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 40px !important;">
                <span>TÜM TURLARI KEŞFET</span>
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        <!-- ============================================== -->
        <!-- KONSER & TİYATRO BÖLÜMÜ                        -->
        <!-- ============================================== -->
        <section class="section-header-premium" style="margin-top: 120px;">
            <h2><?php echo tp_tr('dot_etkinlikler'); ?></h2>
            <p>Konserlerden tiyatrolara, sanatın ve eğlencenin en iyileri burada!</p>
        </section>

        <div class="premium-tabs-wrap">
            <button class="p-tab-btn active" onclick="filterBentoEvents(this, 'all')">Tümü</button>
            <?php
            // Mevcut etkinlik tiplerini çekelim
            try {
                if (isset($db)) {
                    $eTypeStmt = $db->query("SELECT DISTINCT tip FROM etkinlikler WHERE durum='aktif' AND onay_durumu='onaylandi'");
                    while($tp = $eTypeStmt->fetch(PDO::FETCH_ASSOC)) {
                        echo '<button class="p-tab-btn" onclick="filterBentoEvents(this, \''.htmlspecialchars($tp['tip']).'\')">'.htmlspecialchars($tp['tip']).'</button>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div class="bento-grid-container" id="eventsGrid">
            <?php
            // Etkinlikler için 7 parça çekiyoruz
            try {
                if (isset($db)) {
                    $eventSQL = "
                        SELECT id, ad, mekan, tarih, fiyat, tip, kapak_resmi
                        FROM etkinlikler 
                        WHERE durum='aktif' AND onay_durumu='onaylandi' 
                        ORDER BY onerilen DESC, tarih ASC 
                        LIMIT 7";
                    
                    $eventStmt = $db->query($eventSQL);
                    $eventsData = $eventStmt->fetchAll(PDO::FETCH_ASSOC);
                    
                    $eLayouts = ['bento-h', 'bento-big', 'bento-v', 'bento-item', 'bento-item', 'bento-item', 'bento-item'];
                    
                    foreach ($eventsData as $index => $ev) {
                        $lClass = isset($eLayouts[$index]) ? $eLayouts[$index] : 'bento-item';
                        $imgKey = trim((string)$ev['kapak_resmi'] ?? '');
                        
                        // Akıllı Görsel Yolu Belirleyici
                        $imgPath = 'gorsel/placeholder.jpg';
                        if (!empty($imgKey)) {
                            if (strpos($imgKey, 'http') === 0) {
                                $imgPath = $imgKey;
                            } elseif (strpos($imgKey, 'gorsel/') === 0) {
                                $imgPath = $imgKey;
                            } else {
                                $imgPath = 'gorsel/etkinlikler/' . $imgKey;
                            }
                        }
                        
                        $priceText = ($ev['fiyat'] > 0) ? number_format((float)$ev['fiyat'], 0, ',', '.') . ' ₺\'den' : 'Ücretsiz';
                        $dateText = !empty($ev['tarih']) ? date('d.m.Y', strtotime($ev['tarih'])) : 'Gelecek Tarih';
                        
                        echo '
                        <a href="konser-tiyatro/etkinlik-detay.php?id='.(int)$ev['id'].'" class="bento-item event-bento-item '.$lClass.'" data-category="'.htmlspecialchars($ev['tip']).'">
                            <div class="bento-img" style="background-image: url(\''.$imgPath.'\')"></div>
                            <div class="bento-overlay">
                                <span class="bento-category">'.htmlspecialchars($ev['tip']).'</span>
                                <h3 class="bento-title" style="margin-top: 5px;">'.htmlspecialchars($ev['ad']).'</h3>
                                <div class="bento-meta">
                                    <span class="bento-price">'.$priceText.'</span>
                                    <span><i class="fas fa-map-marker-alt" style="color: #ecad29;"></i> '.htmlspecialchars($ev['mekan']).'</span>
                                </div>
                                <div style="font-size: 13px; margin-top: 8px; font-weight: 700; opacity: 0.9;">
                                    <i class="far fa-calendar-alt" style="color: #ecad29;"></i> '.$dateText.'
                                </div>
                            </div>
                        </a>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div style="text-align: center; margin-bottom: 120px;">
            <a href="konser-tiyatro/filtre.php" class="btn-hero-primary" style="display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 40px !important;">
                <span>TÜM ETKİNLİKLERİ GÖR</span>
                <i class="fas fa-ticket-alt"></i>
            </a>
        </div>

        </div>

        <div class="pc-only">
        <!-- ============================================== -->
        <!-- OTELLER BÖLÜMÜ                                 -->
        <!-- ============================================== -->
        <section class="section-header-premium" style="margin-top: 120px;">
            <h2><?php echo tp_tr('dot_oteller'); ?></h2>
            <p>Dünya standartlarında konfor ve ayrıcalıklı hizmet sunan en özel oteller.</p>
        </section>

        <div class="bento-grid-container" id="hotelsGrid">
            <?php
            // Sadece Otelleri çekiyoruz (otel_tipi = 'otel')
            try {
                if (isset($db)) {
                    $hotelSQL = "
                        SELECT o.id, o.otel_adi, o.lokasyon, o.kapak_resmi, o.otel_tipi, o.yildiz,
                        (SELECT MIN(normal_fiyat) FROM otel_oda_tipleri WHERE otel_id = o.id) as min_fiyat
                        FROM oteller o
                        WHERE o.durum='aktif' AND o.onay_durumu='onaylandi' AND o.otel_tipi='otel'
                        ORDER BY o.onerilen DESC, o.id DESC 
                        LIMIT 8";
                    
                    $hotelStmt = $db->query($hotelSQL);
                    $hotelsData = $hotelStmt->fetchAll(PDO::FETCH_ASSOC);
                    
                    $hLayouts = ['bento-big', 'bento-h', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item'];
                    
                    foreach ($hotelsData as $index => $ot) {
                        $lClass = isset($hLayouts[$index]) ? $hLayouts[$index] : 'bento-item';
                        $imgKey = trim((string)$ot['kapak_resmi'] ?? '');
                        
                        $imgPath = 'gorsel/placeholder.jpg';
                        if (!empty($imgKey)) {
                            if (strpos($imgKey, 'http') === 0) $imgPath = $imgKey;
                            elseif (strpos($imgKey, 'gorsel/') === 0) $imgPath = $imgKey;
                            else $imgPath = 'gorsel/oteller/' . $imgKey;
                        }
                        
                        $priceText = ($ot['min_fiyat'] > 0) ? number_format((float)$ot['min_fiyat'], 0, ',', '.') . ' ₺\'den' : 'Fiyat Sorunuz';
                        $stars = (int)$ot['yildiz'];
                        $starHtml = str_repeat('<i class="fas fa-star" style="color: #ecad29; font-size: 10px;"></i> ', $stars);
                        
                        echo '
                        <a href="oteller/otel-incele.php?id='.(int)$ot['id'].'" class="bento-item hotel-bento-item '.$lClass.'">
                            <div class="bento-img" style="background-image: url(\''.$imgPath.'\')"></div>
                            <div class="bento-overlay">
                                <span class="bento-category">'.$starHtml.'</span>
                                <h3 class="bento-title" style="margin-top: 5px;">'.htmlspecialchars($ot['otel_adi']).'</h3>
                                <div class="bento-meta">
                                    <span class="bento-price">'.$priceText.'</span>
                                    <span><i class="fas fa-map-marker-alt" style="color: #ecad29;"></i> '.htmlspecialchars($ot['lokasyon']).'</span>
                                </div>
                            </div>
                        </a>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div style="text-align: center; margin-bottom: 80px;">
            <a href="oteller/filtre.php?tip=otel" class="btn-hero-primary" style="display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 40px !important;">
                <span>TÜM OTELLERİ İNCELE</span>
                <i class="fas fa-hotel"></i>
            </a>
        </div>

        <!-- ============================================== -->
        <!-- BUNGALOVLAR BÖLÜMÜ                             -->
        <!-- ============================================== -->
        <section class="section-header-premium" style="margin-top: 120px;">
            <h2><?php echo tp_tr('dot_bungalovlar'); ?></h2>
            <p>Doğa ile iç içe, huzur dolu ve masalsı bir konaklama deneyimi.</p>
        </section>

        <div class="bento-grid-container" id="bungalowGrid">
            <?php
            // Sadece Bungalovları çekiyoruz (otel_tipi = 'bungalov')
            try {
                if (isset($db)) {
                    $bungalowSQL = "
                        SELECT o.id, o.otel_adi, o.lokasyon, o.kapak_resmi, o.otel_tipi, o.yildiz,
                        (SELECT MIN(normal_fiyat) FROM otel_oda_tipleri WHERE otel_id = o.id) as min_fiyat
                        FROM oteller o
                        WHERE o.durum='aktif' AND o.onay_durumu='onaylandi' AND o.otel_tipi='bungalov'
                        ORDER BY o.onerilen DESC, o.id DESC 
                        LIMIT 8";
                    
                    $bungalowStmt = $db->query($bungalowSQL);
                    $bungalowsData = $bungalowStmt->fetchAll(PDO::FETCH_ASSOC);
                    
                    // Farklı dizilim: Yatay ağırlıklı
                    $bgLayouts = ['bento-h', 'bento-big', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item'];
                    
                    foreach ($bungalowsData as $index => $bg) {
                        $lClass = isset($bgLayouts[$index]) ? $bgLayouts[$index] : 'bento-item';
                        $imgKey = trim((string)$bg['kapak_resmi'] ?? '');
                        
                        $imgPath = 'gorsel/placeholder.jpg';
                        if (!empty($imgKey)) {
                            if (strpos($imgKey, 'http') === 0) $imgPath = $imgKey;
                            elseif (strpos($imgKey, 'gorsel/') === 0) $imgPath = $imgKey;
                            else $imgPath = 'gorsel/oteller/' . $imgKey;
                        }
                        
                        $priceText = ($bg['min_fiyat'] > 0) ? number_format((float)$bg['min_fiyat'], 0, ',', '.') . ' ₺\'den' : 'Fiyat Sorunuz';
                        $stars = (int)$bg['yildiz'];
                        $starHtml = str_repeat('<i class="fas fa-star" style="color: #ecad29; font-size: 10px;"></i> ', $stars);
                        
                        echo '
                        <a href="oteller/otel-incele.php?id='.(int)$bg['id'].'" class="bento-item bungalow-bento-item '.$lClass.'">
                            <div class="bento-img" style="background-image: url(\''.$imgPath.'\')"></div>
                            <div class="bento-overlay">
                                <span class="bento-category">'.$starHtml.'</span>
                                <h3 class="bento-title" style="margin-top: 5px;">'.htmlspecialchars($bg['otel_adi']).'</h3>
                                <div class="bento-meta">
                                    <span class="bento-price">'.$priceText.'</span>
                                    <span><i class="fas fa-map-marker-alt" style="color: #ecad29;"></i> '.htmlspecialchars($bg['lokasyon']).'</span>
                                </div>
                            </div>
                        </a>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div style="text-align: center; margin-bottom: 120px;">
            <a href="oteller/filtre.php?tip=bungalov" class="btn-hero-primary" style="display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 40px !important;">
                <span>TÜM BUNGALOVLARI KEŞFET</span>
                <i class="fas fa-tree"></i>
            </a>
        </div>

        <!-- ============================================== -->
        <!-- İŞLETMELER BÖLÜMÜ (LEZZET DURAKLARI)           -->
        <!-- ============================================== -->
        <section class="section-header-premium" style="margin-top: 120px;">
            <h2><?php echo tp_tr('dot_mekanlar'); ?></h2>
            <p>Şehrin en iyi lezzet noktaları, tarihi çarşıları ve keyifli mekanları.</p>
        </section>

        <div class="bento-grid-container" id="isletmeGrid">
            <?php
            // İşletmeleri çekiyoruz
            try {
                if (isset($db)) {
                    // Kullanıcının bahsettiği Fıstıkzade, Diyar Burma vb. bu tabloda (ID 33-38 arası)
                    $isletmeSQL = "
                        SELECT id, isletme_adi, sehir, kategori, kapak_resmi
                        FROM isletmeler 
                        WHERE durum='aktif' AND onay_durumu='onaylandi' 
                        ORDER BY onerilen DESC, id DESC 
                        LIMIT 8";
                    
                    $isletmeStmt = $db->query($isletmeSQL);
                    $isletmeler = $isletmeStmt->fetchAll(PDO::FETCH_ASSOC);
                    
                    // 8 parça için tam dikdörtgen dizilim
                    $iLayouts = ['bento-big', 'bento-h', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item', 'bento-item'];
                    
                    foreach ($isletmeler as $index => $isl) {
                        $lClass = isset($iLayouts[$index]) ? $iLayouts[$index] : 'bento-item';
                        $imgKey = trim((string)$isl['kapak_resmi'] ?? '');
                        
                        $imgPath = 'gorsel/placeholder.jpg';
                        if (!empty($imgKey)) {
                            if (strpos($imgKey, 'http') === 0) $imgPath = $imgKey;
                            elseif (strpos($imgKey, 'gorsel/') === 0) $imgPath = $imgKey;
                            else $imgPath = 'gorsel/isletmeler/' . $imgKey;
                        }
                        
                        $catText = !empty($isl['kategori']) ? mb_convert_case(str_replace('_', ' ', $isl['kategori']), MB_CASE_TITLE, "UTF-8") : 'Mekan';
                        
                        echo '
                        <a href="isletmeler/isletme-incele.php?id='.(int)$isl['id'].'" class="bento-item isletme-bento-item '.$lClass.'">
                            <div class="bento-img" style="background-image: url(\''.$imgPath.'\')"></div>
                            <div class="bento-overlay">
                                <span class="bento-category" style="color: #ecad29;">'.$catText.'</span>
                                <h3 class="bento-title" style="margin-top: 5px;">'.htmlspecialchars($isl['isletme_adi']).'</h3>
                                <div class="bento-meta">
                                    <span><i class="fas fa-map-marker-alt" style="color: #ecad29;"></i> '.htmlspecialchars($isl['sehir']).'</span>
                                </div>
                            </div>
                        </a>';
                    }
                }
            } catch(Exception $e) {}
            ?>
        </div>

        <div style="text-align: center; margin-bottom: 120px;">
            <a href="isletmeler/isletmeler.php" class="btn-hero-primary" style="display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 40px !important;">
                <span>TÜM MEKANLARI KEŞFET</span>
                <i class="fas fa-utensils"></i>
            </a>
        </div>

        <script>
            function filterBentoHotels(btn, cat) {
                btn.parentElement.querySelectorAll('.p-tab-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                const items = document.querySelectorAll('.hotel-bento-item');
                items.forEach(item => {
                    const itemCat = item.getAttribute('data-category');
                    if(cat === 'all' || itemCat === cat) item.style.display = "block";
                    else item.style.display = "none";
                });
            }
            function filterBentoEvents(btn, cat) {
                btn.parentElement.querySelectorAll('.p-tab-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                const items = document.querySelectorAll('.event-bento-item');
                items.forEach(item => {
                    const itemCat = item.getAttribute('data-category');
                    if(cat === 'all' || itemCat === cat) item.style.display = "block";
                    else item.style.display = "none";
                });
            }
            function filterBento(btn, cat) {
                // Tab aktiflik değişimi
                document.querySelectorAll('.p-tab-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // Grid filtreleme
                const items = document.querySelectorAll('.bento-item');
                items.forEach(item => {
                    const itemCat = item.getAttribute('data-category');
                    if(cat === 'all' || itemCat === cat) {
                        item.style.display = "block";
                    } else {
                        item.style.display = "none";
                    }
                });
            }
        </script>

        <?php
        // KAMPANYALAR: Veritabanından Yaprak Saat (Sol Alan) için Dinamik Çekiyoruz!
        $campArr = [];
        try {
            if (isset($db)) {
                $cStmt = $db->query("SELECT * FROM kampanyalar WHERE durum='aktif' ORDER BY RAND() LIMIT 5");
                while($c = $cStmt->fetch(PDO::FETCH_ASSOC)) {
                    // Sütun isimlendirme varyasyonlarına karşı sağlam yedekli başlık çekimi:
                    $title = isset($c['baslik']) ? $c['baslik'] : (isset($c['kampanya_adi']) ? $c['kampanya_adi'] : 'Eşsiz Kampanya');
                    $descRaw = isset($c['aciklama']) ? strip_tags(trim($c['aciklama'])) : 'Muhteşem fırsatlar ve detaylar için incele.';
                    $desc = mb_strlen($descRaw, 'UTF-8') > 70 ? mb_substr($descRaw, 0, 67, 'UTF-8') . '...' : $descRaw;
                    
                    $img = !empty($c['gorsel']) ? $c['gorsel'] : 'gorsel/placeholder.jpg';
                    $link = !empty($c['link']) ? $c['link'] : '#';
                    
                    $campArr[] = [
                        'title' => htmlspecialchars($title),
                        'desc' => htmlspecialchars($desc),
                        'img' => $img,
                        'link' => $link
                    ];
                }
            }
        } catch(Exception $e) {}

        // 3D Stacking Carousel için her zaman en az 5 karta ihtiyaç var, eksik olanları sahte lüks 4K verilerle tamamlıyoruz:
        $placeholders = ($tp_lang === 'en') ? [
            ['title' => 'Summer Special Selection!', 'desc' => 'Instant 30% net discount on early booking.', 'img' => 'https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?q=80&w=800', 'link' => '#'],
            ['title' => 'Last Minute Tours', 'desc' => 'Only 3 seats left for weekend nature tickets!', 'img' => 'https://images.unsplash.com/photo-1502602898657-3e90760b3746?q=80&w=800', 'link' => '#'],
            ['title' => 'European Dream Campaign', 'desc' => 'Enjoy visa-free travel to the fullest, very advantageous.', 'img' => 'https://images.unsplash.org/photo-1447752875215-b2761acb3c5d?q=80&w=800', 'link' => '#'],
            ['title' => 'Winter Discovery', 'desc' => 'A magical and luxurious weekend under the snow!', 'img' => 'https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96?q=80&w=800', 'link' => '#'],
            ['title' => 'Autumn Festival', 'desc' => 'Those unique orange colors of the forest in a single route.', 'img' => 'https://images.unsplash.com/photo-1498307833015-e7b400441eb8?q=80&w=800', 'link' => '#']
        ] : [
            ['title' => 'Yaz Özel Seçimi!', 'desc' => 'Erken rezervasyonda anında %30 net indirim.', 'img' => 'https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?q=80&w=800', 'link' => '#'],
            ['title' => 'Son Dakika Turları', 'desc' => 'Hafta sonu doğa biletlerinde son 3 koltuk kaldı!', 'img' => 'https://images.unsplash.com/photo-1502602898657-3e90760b3746?q=80&w=800', 'link' => '#'],
            ['title' => 'Avrupa Rüyası Kampanyası', 'desc' => 'Vizesiz seyahatin tadını doyasıya çıkarın, çok avantajlı.', 'img' => 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=80&w=800', 'link' => '#'],
            ['title' => 'Kış Keşfi', 'desc' => 'Karlar altında masalsı ve lüks bir hafta sonu!', 'img' => 'https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96?q=80&w=800', 'link' => '#'],
            ['title' => 'Güz Festivali', 'desc' => 'Ormanın o eşsiz turuncu renkleri tek bir rotada.', 'img' => 'https://images.unsplash.com/photo-1498307833015-e7b400441eb8?q=80&w=800', 'link' => '#']
        ];
        
        $pIdx = 0;
        while(count($campArr) < 5 && $pIdx < count($placeholders)) {
            $campArr[] = $placeholders[$pIdx];
            $pIdx++;
        }

        // Veritabanından Önerilen Turları Çekiyoruz! (Tamamen Dinamik)
        $heroTours = [];
        try {
            if (isset($db)) {
                $heroStmt = $db->query("SELECT id, tur_adi, aciklama, indirimli_fiyat, normal_fiyat, kapak_resmi FROM turlar WHERE durum='aktif' AND (onerilen=1 OR one_cikar_durum='onaylandi') AND EXISTS (SELECT 1 FROM tur_tarihleri tt WHERE tt.tur_id = turlar.id AND tt.durum='aktif' AND tt.baslangic_tarihi >= CURDATE()) ORDER BY RAND() LIMIT 8");
                while($r = $heroStmt->fetch(PDO::FETCH_ASSOC)) {
                    $fiyat = ($r['indirimli_fiyat'] > 0) ? $r['indirimli_fiyat'] : $r['normal_fiyat'];
                    $fiyatText = number_format((float)$fiyat, 0, ',', '.') . ' ₺';
                    
                    // Görseli doğrudan veritabanından orijinal haliyle alıyoruz (Panelden yüklenen halleriyle).
                    $img = !empty($r['kapak_resmi']) ? $r['kapak_resmi'] : 'gorsel/placeholder.jpg';
                    
                    // Açıklama zengin metin (HTML) olabileceği için önce "strip_tags" ile salt metne (düz yazıya) çevirip budadık:
                    $descRaw = !empty($r['aciklama']) ? strip_tags(trim($r['aciklama'])) : "Bu harika macerayı hemen inceleyin ve eşsiz anılar biriktirin.";
                    $desc = mb_strlen($descRaw) > 130 ? mb_substr($descRaw, 0, 127) . '...' : $descRaw;
                    
                    $heroTours[] = [
                        'title' => htmlspecialchars($r['tur_adi']),
                        'desc' => htmlspecialchars($desc),
                        'price' => $fiyatText,
                        'img' => $img,
                        'url' => 'turlar/tur-incele.php?id=' . (int)$r['id']
                    ];
                }
            }
        } catch(Exception $e) {}

        // Eğer veritabanından (henüz) hiç tur gelmezse veya bağlantı koparsa tasarımın patlamaması için Yedek Tur ataması:
        if (count($heroTours) === 0) {
            $heroTours = ($tp_lang === 'en') ? [
                [
                    "title" => "Cappadocia Fairy Tale",
                    "desc" => "Rest your soul in our Cappadocia tours with the perfect harmony of nature and history.",
                    "price" => "3.500 ₺",
                    "img" => "https://images.unsplash.com/photo-1627896157732-f38bde6b12a8?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ],
                [
                    "title" => "Blue Fethiye Bays",
                    "desc" => "Sail in the turquoise waters of the Aegean and reach the peaks of holiday under the Mediterranean sun.",
                    "price" => "4.200 ₺",
                    "img" => "https://images.unsplash.com/photo-1541359927273-d76820fc43f9?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ],
                [
                    "title" => "Lush Black Sea",
                    "desc" => "Foggy highlands, flowing waterfalls and endless peace. A wonderful Black Sea adventure in touch with nature.",
                    "price" => "2.800 ₺",
                    "img" => "https://images.unsplash.com/photo-1498307833015-e7b400441eb8?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ]
            ] : [
                [
                    "title" => "Kapadokya Peri Masalı",
                    "desc" => "Doğanın ve tarihin mükemmel uyumuyla Kapadokya turlarımızda ruhunuzu dinlendirin.",
                    "price" => "3.500 ₺",
                    "img" => "https://images.unsplash.com/photo-1627896157732-f38bde6b12a8?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ],
                [
                    "title" => "Masmavi Fethiye Koyları",
                    "desc" => "Ege'nin turkuaz sularında yelken açıp, Akdeniz güneşinin altında tatilin doruklarına ulaşın.",
                    "price" => "4.200 ₺",
                    "img" => "https://images.unsplash.com/photo-1541359927273-d76820fc43f9?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ],
                [
                    "title" => "Yemyeşil Karadeniz",
                    "desc" => "Sisli yaylalar, akan şelaleler ve bitmeyen bir huzur. Doğa ile iç içe harika bir Karadeniz serüveni.",
                    "price" => "2.800 ₺",
                    "img" => "https://images.unsplash.com/photo-1498307833015-e7b400441eb8?q=80&w=1200", 
                    "url" => "turlar/turlar.php"
                ]
            ];
        }
        ?>
        <script>
            // Dinamik 3'lü Çubuk (Pills) Slider Mantığı
            document.addEventListener("DOMContentLoaded", () => {
                // PHP üzerinden JSON'a dönüştürülmüş VERİTABANI turlarını Javascript'e enjekte ettik!
                const tours = <?php echo json_encode($heroTours, JSON_UNESCAPED_UNICODE); ?>;

                let currentIndex = 0;
                const titleEl = document.getElementById('heroTitle');
                const descEl = document.getElementById('heroDesc');
                const priceEl = document.getElementById('heroPrice');
                const linkEl = document.getElementById('heroLink');
                const leftContent = document.querySelector('.hero-content-left');
                const pBg1 = document.getElementById('pillBg1');
                const pBg2 = document.getElementById('pillBg2');
                const pBg3 = document.getElementById('pillBg3');
                
                // Kaç tur varsa o kadar beyaz/sarı geçiş noktasını dinamik üretelim:
                const dotsContainer = document.getElementById('heroNavDots');
                let dots = [];
                tours.forEach((tour, idx) => {
                    const dot = document.createElement('span');
                    dot.className = 'nav-dot';
                    if(idx === 0) dot.classList.add('active');
                    
                    dot.addEventListener('click', () => {
                        if(currentIndex === idx) return; // Aynı slayta tıklarsa işlem yapma
                        currentIndex = idx;
                        updateSlide(currentIndex);
                        if(typeof rotateCampaignStack === 'function') rotateCampaignStack(); // SOL BÖLÜMÜ DE MANUEL OLARAK ANINDA SENKRONİZE ET
                        
                        clearInterval(slideInterval);
                        slideInterval = setInterval(() => {
                            currentIndex = (currentIndex + 1) % tours.length;
                            updateSlide(currentIndex);
                            if(typeof rotateCampaignStack === 'function') rotateCampaignStack(); // OTOMATİK SENKRON DÖNGÜYE GERİ GİR
                        }, 6000);
                    });
                    dotsContainer.appendChild(dot);
                    dots.push(dot);
                });
                
                function updateSlide(index) {
                    leftContent.classList.add('animating'); // Eski yazıyı gizle
                    
                    // ŞİMDİ ÇUBUKLARA (PILLS) JENERİK AŞAĞI/YUKARI SAVRULMA VE KAYBOLMA ANİMASYONUNU BASALIM
                    const pill1 = document.querySelector('.pill-1');
                    const pill2 = document.querySelector('.pill-2');
                    const pill3 = document.querySelector('.pill-3');
                    
                    if (pill1 && pill2 && pill3) {
                        // Kenardakileri yukarıya şutla, ortadakini aşağıya şutla
                        pill1.classList.add('changing-up');
                        pill2.classList.add('changing-down');
                        pill3.classList.add('changing-up');
                    }
                    
                    setTimeout(() => {
                        const tour = tours[index];
                        titleEl.textContent = tour.title;
                        descEl.textContent = tour.desc;
                        priceEl.textContent = tour.price;
                        linkEl.href = tour.url;
                        
                    }, 400); // 400ms'da yazı gizlenmişken datayı değiştir.

                    // Fotoğrafları tam çubuklar zıplayıp EN ZİRVEDE kaybolduğunda (500ms anında) anında değiştir!
                    setTimeout(() => {
                        const imgSrc = tours[index].img;
                        pBg1.style.backgroundImage = `url('${imgSrc}')`;
                        pBg2.style.backgroundImage = `url('${imgSrc}')`;
                        pBg3.style.backgroundImage = `url('${imgSrc}')`;
                    }, 500); 

                    // Tüm arka planlar yenilendiğinde (700ms), sınırların dışından yeni resimleriyle süzülerek GERİ dönsünler!
                    setTimeout(() => {
                        if (pill1 && pill2 && pill3) {
                            pill1.classList.remove('changing-up');
                            pill2.classList.remove('changing-down');
                            pill3.classList.remove('changing-up');
                        }
                        // Yazı da mükemmel senkronizasyonla onlarla birlikte merkeze otursun
                        leftContent.classList.remove('animating'); 
                    }, 650);

                    // Dot aktifliği
                    dots.forEach(dot => dot.classList.remove('active'));
                    dots[index].classList.add('active');
                }

                // Sayfa Yüklenince İlk Turu Bas
                updateSlide(0);

                /* ========================================================== */
                /* 3D STACK KAMPANYA MANTIĞI                                  */
                /* ========================================================== */
                const campaignData = <?php echo json_encode($campArr, JSON_UNESCAPED_UNICODE); ?>;
                const campWidget = document.getElementById('campFlipWidget');
                
                // DOM'a kalıcı olarak ekle
                let campCardsDOM = [];
                campaignData.forEach((camp, index) => {
                    const el = document.createElement('a');
                    el.href = camp.link || '#';
                    
                    // Başlangıç stili: İlk 4 tanesi arka arkaya dizili (pos-0,1,2,3), kalanı gizli (pos-4)
                    let posClass = index < 4 ? 'pos-' + index : 'pos-4';
                    el.className = 'camp-card-item ' + posClass;
                    
                    // Tam Boy Arka Plan + Altta Karartmalı Text (Glassmorphism)
                    el.innerHTML = `
                        <div class="camp-c-img" style="background-image: url('${camp.img}')">
                            <div class="camp-c-badge">${window.TP_LANG['home_campaign_tag']}</div>
                            <div class="camp-c-glass-body">
                                <h3 class="camp-c-title">${camp.title}</h3>
                                <p class="camp-c-desc">${camp.desc}</p>
                            </div>
                        </div>
                    `;
                    campWidget.appendChild(el);
                    campCardsDOM.push(el);
                });

                // Kampanya İstifini Kaydıran Ana Fonksiyon
                function rotateCampaignStack() {
                    if (campCardsDOM.length <= 1) return;
                    
                    let droppingCard = campCardsDOM[0];
                    droppingCard.className = 'camp-card-item pos-drop'; 
                    
                    // Diziden çıkart ve mantıksal olarak en sona at
                    campCardsDOM.push(campCardsDOM.shift());
                    
                    setTimeout(() => {
                        droppingCard.className = 'camp-card-item pos-4'; // Bekleme süresini arkada doldursun
                    }, 600); 
                    
                    campCardsDOM.forEach((el, index) => {
                        if (index === campCardsDOM.length - 1) return; // Animasyondan düşmekte olana dokunma
                        
                        if (index < 4) {
                            el.className = 'camp-card-item pos-' + index;
                        } else {
                            el.className = 'camp-card-item pos-4';
                        }
                    });
                }

                // Sürekli Dönen Otomatik Ana Zamanlayıcı (EŞZAMANLI - KUSURSUZ SENKRON)
                let slideInterval = setInterval(() => {
                    currentIndex = (currentIndex + 1) % tours.length;
                    updateSlide(currentIndex);
                    rotateCampaignStack(); // İKİSİNİ AYNI ANDA TETİKLE, KAOS VE GÖZ YORGUNLUĞUNU BİTİR
                }, 6000); // Her şey tek kalp atışında 6 saniyede bir eş zamanlı hareket edecek
            });
        </script>
        
        <script>
            // Sadece PC için çalışan header scroll dinleyicisi
            document.addEventListener('DOMContentLoaded', () => {
                const header = document.getElementById('pcHeaderTasarim');
                if(header && window.innerWidth > 1024) {
                    window.addEventListener('scroll', () => {
                        if (window.scrollY > 50) {
                            header.classList.add('scrolled');
                        } else {
                            header.classList.remove('scrolled');
                        }
                    });
                }
            });
        </script>

        <!-- ============================================== -->
        <!-- PREMIUM GLASS GUIDES SECTION                  -->
        <!-- ============================================== -->
        <section class="tasarim-guide-section">
            <div class="section-header-premium">
                <h2><?php echo tp_tr('footer_turlarimiz_rehberler'); ?></h2>
                <p>Güvenilir Yerel Uzmanlar</p>
            </div>

            <div class="tasarim-guide-grid">
                <?php
                try {
                    if (isset($db)) {
                        $guidesSQL = "
                            SELECT CONCAT(r.ad, ' ', r.soyad) as adi_soyadi, r.id as rehber_id, rp.* 
                            FROM roller r
                            LEFT JOIN rehber_profilleri rp ON r.id = rp.rehber_id
                            WHERE r.rol='Rehber' AND r.durum='aktif' 
                            ORDER BY id DESC LIMIT 4";
                        
                        $guidesStmt = $db->query($guidesSQL);
                        while($g = $guidesStmt->fetch(PDO::FETCH_ASSOC)) {
                            $gImg = !empty($g['profil_resmi']) ? $g['profil_resmi'] : 'gorsel/default_user.jpg';
                            $gExp = !empty($g['deneyim']) ? $g['deneyim'] : '5 Yıl+';
                            $gLoc = !empty($g['mezuniyet']) ? $g['mezuniyet'] : 'Şehir Kültürü';
                ?>
                <div class="tasarim-guide-card">
                    <div class="tasarim-guide-pp">
                        <img src="<?= htmlspecialchars($gImg) ?>" alt="<?= htmlspecialchars($g['adi_soyadi']) ?>" onerror="this.src='gorsel/default_user.jpg'">
                    </div>
                    <h3><?= htmlspecialchars($g['adi_soyadi']) ?></h3>
                    <p><?= htmlspecialchars($gLoc) ?></p>
                    
                    <div class="tasarim-guide-tags">
                        <div class="tasarim-guide-pill"><?= htmlspecialchars($gExp) ?></div>
                        <div class="tasarim-guide-pill">AKTİF</div>
                    </div>

                    <a href="rehber_detay.php?id=<?= (int)$g['rehber_id'] ?>" class="tasarim-card-link">
                        AYRINTILAR <i class="fas fa-chevron-right" style="font-size: 12px; margin-left: 5px;"></i>
                    </a>
                </div>
                <?php
                        }
                    }
                } catch(Exception $e) {}
                ?>
            </div>
        </section>
        </div><!-- pc-only sections end -->

    </div> <!-- PC WRAPPER END -->


    <?php include 'includes/components/footer/common_footer.php'; ?>

    <!-- MOBILE BOTTOM NAVIGATION -->
    <?php
    $tp_base = '';
    $tp_bottom_nav_active = 'ana-sayfa';
    include 'includes/components/mobil/bottom_nav.php';
    ?>

    <script>
        // PC Ultimate Header Scroll Effect
        document.addEventListener('DOMContentLoaded', () => {
            const pcHeader = document.querySelector('nav.pc-only');
            if (pcHeader && document.body.classList.contains('home-page')) {
                window.addEventListener('scroll', () => {
                    if (window.scrollY > 50) {
                        pcHeader.classList.add('scrolled');
                    } else {
                        pcHeader.classList.remove('scrolled');
                    }
                });
            }
        });

        // PC Hamburger Menu Toggle Action
        document.addEventListener('DOMContentLoaded', () => {
            const toggleBtn = document.getElementById('pcHamburgerToggle');
            const body = document.body;

            if (toggleBtn) {
                toggleBtn.addEventListener('click', (e) => {
                    e.preventDefault();
                    body.classList.toggle('menu-open');
                    
                    // Stop background scrolling when open
                    if (body.classList.contains('menu-open')) {
                        body.style.overflow = 'hidden';
                    } else {
                        body.style.overflow = '';
                    }
                });
            }
        });
    </script>

</body>

</html>