<?php 
require_once __DIR__ . '/../layouts/header.php'; 

// Ana Sayfa için Veritabanından Son 6 Aktif İlanı Çekelim
if (!isset($ilanlar)) {
    global $db;
    if (file_exists(__DIR__ . '/../../models/PropertyModel.php')) {
        require_once __DIR__ . '/../../models/PropertyModel.php';
        $propertyModel = new PropertyModel($db);
        $allProperties = $propertyModel->getFiltered(['status' => 'approved']); 
        $ilanlar = array_slice($allProperties, 0, 6);
    } else {
        $ilanlar = [];
    }
}
?>

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
    
    /* Responsive Hero Yüksekliği */
    .hero-section {
        position: relative;
        min-height: 550px; /* Mobil için başlangıç */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #0f172a;
    }

    @media (min-width: 768px) {
        .hero-section { min-height: 750px; }
    }

    .hero-bg-image {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: url('https://images.unsplash.com/photo-1600596542815-2a4d9f6facb8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        z-index: 1;
        animation: kenBurns 20s infinite alternate ease-in-out;
    }

    .hero-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 2;
        background: linear-gradient(-45deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.7), rgba(13, 148, 136, 0.6), rgba(15, 23, 42, 0.9));
        background-size: 400% 400%;
        animation: gradientMove 15s ease infinite;
    }

    @keyframes kenBurns {
        0% { transform: scale(1); }
        100% { transform: scale(1.15); }
    }

    @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Glassmorphism Arama Kutusu */
    .glass-search {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .cat-toggle {
        border: none;
        background: transparent;
        color: #64748b;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }

    .cat-toggle.active {
        color: #ffffff !important;
        background-color: #2563eb !important;
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
    }

    .property-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .property-card:hover {
        transform: translateY(-10px);
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>

<section class="hero-section tw-py-12 md:tw-py-0">
    <div class="hero-bg-image"></div>
    <div class="hero-overlay"></div>

    <div class="container tw-relative tw-z-10">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center text-white">
                
                <div class="tw-inline-flex tw-items-center tw-gap-2 tw-bg-white/10 tw-border tw-border-white/20 tw-text-blue-50 tw-px-4 md:tw-px-5 tw-py-2 tw-rounded-full tw-text-[10px] md:tw-text-sm tw-font-bold tw-mb-6 md:tw-mb-8 backdrop-blur-md">
                    <span class="tw-relative tw-flex tw-h-2 md:tw-h-3 tw-w-2 md:tw-w-3">
                      <span class="tw-animate-ping tw-absolute tw-inline-flex tw-h-full tw-w-full tw-rounded-full tw-bg-emerald-400 tw-opacity-75"></span>
                      <span class="tw-relative tw-inline-flex tw-rounded-full tw-h-2 md:tw-h-3 tw-w-2 md:tw-w-3 tw-bg-emerald-500"></span>
                    </span>
                    Yeni Nesil Gayrimenkul Deneyimi
                </div>

                <h1 class="tw-text-3xl md:tw-text-7xl tw-font-black tw-mb-4 md:tw-mb-6 tw-leading-tight tw-tracking-tighter">
                    Hayalinizdeki Yaşam <br class="d-none d-md-block"> 
                    <span class="tw-text-transparent tw-bg-clip-text tw-bg-gradient-to-r tw-from-blue-400 tw-via-teal-300 tw-to-emerald-400">Burada Başlıyor</span>
                </h1>
                
                <p class="tw-text-sm md:tw-text-lg tw-text-gray-300 tw-mb-8 md:tw-mb-12 tw-max-w-2xl tw-mx-auto tw-font-medium tw-leading-relaxed tw-px-4">
                    <?php echo isset($globalSettings->site_title) ? $globalSettings->site_title : 'Emlak Web'; ?> kalitesiyle seçkin ilanlar arasından yaşam tarzınıza en uygun olanı bugün keşfedin.
                </p>

                <div class="glass-search tw-rounded-[2rem] md:tw-rounded-[2.5rem] tw-p-4 md:tw-p-5 tw-mx-4 md:tw-mx-auto tw-max-w-5xl tw-text-left">
                    <div class="tw-flex tw-justify-center md:tw-justify-start tw-gap-2 tw-mb-4 md:tw-mb-5 tw-px-2">
                        <button type="button" onclick="setCategory('sale', this)" class="cat-toggle active tw-rounded-full tw-px-6 md:tw-px-10 tw-py-2.5 md:tw-py-3 tw-text-[10px] md:tw-text-[11px]">
                            Satılık
                        </button>
                        <button type="button" onclick="setCategory('rent', this)" class="cat-toggle tw-rounded-full tw-px-6 md:tw-px-10 tw-py-2.5 md:tw-py-3 tw-text-[10px] md:tw-text-[11px] hover:tw-bg-gray-100">
                            Kiralık
                        </button>
                    </div>

                    <div class="tw-bg-white tw-rounded-[1.2rem] md:tw-rounded-[1.5rem] tw-p-2 tw-border tw-border-gray-100">
                        <form action="<?php echo BASE_URL; ?>/properties" method="GET" class="row g-2 align-items-center">
                            <input type="hidden" name="category" id="categoryInput" value="sale">

                            <div class="col-12 col-md-4">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-z-10 tw-text-blue-500">
                                        <i class="fa-solid fa-location-dot"></i>
                                    </div>
                                    <input type="text" name="location" 
                                        class="tw-block tw-w-full tw-pl-11 tw-pr-4 tw-py-3.5 md:tw-py-4 tw-bg-gray-50 tw-border-0 tw-rounded-xl tw-text-xs md:tw-text-sm tw-font-bold tw-text-gray-800 focus:tw-bg-gray-100 shadow-none" 
                                        placeholder="İlçe, Mahalle ara...">
                                </div>
                            </div>

                            <div class="col-6 col-md-3">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-z-10 tw-text-blue-500 d-none d-md-block">
                                        <i class="fa-solid fa-house-user"></i>
                                    </div>
                                    <select name="type" class="tw-block tw-w-full md:tw-pl-11 tw-px-4 tw-py-3.5 md:tw-py-4 tw-bg-gray-50 tw-border-0 tw-rounded-xl tw-text-xs md:tw-text-sm tw-font-bold tw-text-gray-800 shadow-none cursor-pointer appearance-none">
                                        <option value="">Emlak Tipi</option>
                                        <option value="Daire">Daire</option>
                                        <option value="Villa">Villa</option>
                                        <option value="Arsa">Arsa</option>
                                        <option value="Ofis">Ofis</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-6 col-md-3">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-z-10 tw-text-emerald-500 d-none d-md-block">
                                        <i class="fa-solid fa-wallet"></i>
                                    </div>
                                    <select name="max_price" class="tw-block tw-w-full md:tw-pl-11 tw-px-4 tw-py-3.5 md:tw-py-4 tw-bg-gray-50 tw-border-0 tw-rounded-xl tw-text-xs md:tw-text-sm tw-font-bold tw-text-gray-800 shadow-none cursor-pointer appearance-none">
                                        <option value="">Bütçe Aralığı</option>
                                        <option value="1000000">0 - 1M TL</option>
                                        <option value="3000000">1M - 3M TL</option>
                                        <option value="5000000">3M - 5M TL</option>
                                        <option value="10000000">5M - 10M TL</option>
                                        <option value="25000000">10M TL +</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-12 col-md-2">
                                <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-white tw-text-white hover:tw-text-blue-700 tw-border-2 tw-border-blue-600 w-100 tw-py-3 md:tw-py-4 tw-rounded-xl tw-font-black tw-text-[10px] md:tw-text-xs tw-uppercase tw-tracking-widest tw-shadow-lg tw-transition-all">
                                    <i class="fa-solid fa-magnifying-glass tw-mr-1"></i> BUL
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<section class="container tw-relative tw-z-10 tw-mt-[-40px] md:tw-mt-[-50px] tw-mb-16 md:tw-mb-24">
    <div class="row text-center g-3 md:g-4 justify-content-center">
        <div class="col-6 col-md-3">
            <a href="<?php echo BASE_URL; ?>/properties?type=daire" class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[1.5rem] md:tw-rounded-[2.5rem] tw-shadow-xl tw-p-4 md:tw-p-8 tw-group tw-block text-decoration-none tw-transition-all hover:tw--translate-y-2">
                <div class="tw-w-12 md:tw-w-20 tw-h-12 md:tw-h-20 tw-mx-auto tw-bg-blue-50 tw-text-blue-600 tw-rounded-xl md:tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-mb-3 md:tw-mb-5 group-hover:tw-bg-blue-600 group-hover:tw-text-white tw-transition-all">
                    <i class="fa-solid fa-building tw-text-xl md:tw-text-3xl"></i>
                </div>
                <h3 class="tw-font-black tw-text-sm md:tw-text-lg tw-text-gray-800 tw-mb-1">Daire</h3>
                <p class="tw-text-[9px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest mb-0">Şehir Yaşamı</p>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="<?php echo BASE_URL; ?>/properties?type=villa" class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[1.5rem] md:tw-rounded-[2.5rem] tw-shadow-xl tw-p-4 md:tw-p-8 tw-group tw-block text-decoration-none tw-transition-all hover:tw--translate-y-2">
                <div class="tw-w-12 md:tw-w-20 tw-h-12 md:tw-h-20 tw-mx-auto tw-bg-emerald-50 tw-text-emerald-600 tw-rounded-xl md:tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-mb-3 md:tw-mb-5 group-hover:tw-bg-emerald-600 group-hover:tw-text-white tw-transition-all">
                    <i class="fa-solid fa-house-chimney tw-text-xl md:tw-text-3xl"></i>
                </div>
                <h3 class="tw-font-black tw-text-sm md:tw-text-lg tw-text-gray-800 tw-mb-1">Villa</h3>
                <p class="tw-text-[9px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest mb-0">Özel Bahçeli</p>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="<?php echo BASE_URL; ?>/properties?type=ofis" class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[1.5rem] md:tw-rounded-[2.5rem] tw-shadow-xl tw-p-4 md:tw-p-8 tw-group tw-block text-decoration-none tw-transition-all hover:tw--translate-y-2">
                <div class="tw-w-12 md:tw-w-20 tw-h-12 md:tw-h-20 tw-mx-auto tw-bg-purple-50 tw-text-purple-600 tw-rounded-xl md:tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-mb-3 md:tw-mb-5 group-hover:tw-bg-purple-600 group-hover:tw-text-white tw-transition-all">
                    <i class="fa-solid fa-briefcase tw-text-xl md:tw-text-3xl"></i>
                </div>
                <h3 class="tw-font-black tw-text-sm md:tw-text-lg tw-text-gray-800 tw-mb-1">Ofis</h3>
                <p class="tw-text-[9px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest mb-0">Prestijli Konum</p>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="<?php echo BASE_URL; ?>/properties?type=arsa" class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[1.5rem] md:tw-rounded-[2.5rem] tw-shadow-xl tw-p-4 md:tw-p-8 tw-group tw-block text-decoration-none tw-transition-all hover:tw--translate-y-2">
                <div class="tw-w-12 md:tw-w-20 tw-h-12 md:tw-h-20 tw-mx-auto tw-bg-orange-50 tw-text-orange-600 tw-rounded-xl md:tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-mb-3 md:tw-mb-5 group-hover:tw-bg-orange-600 group-hover:tw-text-white tw-transition-all">
                    <i class="fa-solid fa-map-location-dot tw-text-xl md:tw-text-3xl"></i>
                </div>
                <h3 class="tw-font-black tw-text-sm md:tw-text-lg tw-text-gray-800 tw-mb-1">Arsa</h3>
                <p class="tw-text-[9px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest mb-0">Gelecek Yatırımı</p>
            </a>
        </div>
    </div>
</section>

<section id="ilanlar" class="tw-py-16 md:tw-py-24 tw-bg-white">
    <div class="container">
        
        <div class="d-flex justify-content-between align-items-end tw-mb-10 md:tw-mb-16 tw-px-2">
            <div>
                <div class="tw-flex tw-items-center tw-gap-2 tw-mb-2 md:tw-mb-3">
                    <span class="tw-w-8 md:tw-w-10 tw-h-1 tw-bg-blue-600 tw-rounded-full"></span>
                    <span class="tw-text-blue-600 tw-font-black tw-uppercase tw-tracking-[0.2em] tw-text-[9px] md:tw-text-[10px]">Günün Fırsatları</span>
                </div>
                <h2 class="tw-text-2xl md:tw-text-5xl tw-font-black tw-text-gray-900 tw-tracking-tight">Öne Çıkan Portföyler</h2>
            </div>
            <a href="<?php echo BASE_URL; ?>/properties" class="btn tw-bg-gray-50 tw-text-gray-800 tw-border tw-border-gray-100 tw-rounded-xl md:tw-rounded-2xl tw-px-5 md:tw-px-8 tw-py-2.5 md:tw-py-3.5 tw-font-black tw-text-[10px] md:tw-text-xs tw-uppercase tw-tracking-widest hover:tw-bg-blue-600 hover:tw-text-white tw-transition-all d-none d-md-inline-flex tw-items-center">
                Tümünü Gör <i class="fa-solid fa-arrow-right tw-ml-3"></i>
            </a>
        </div>

        <div class="row g-4 md:g-5">
            <?php if (!empty($ilanlar)) : ?>
                <?php foreach ($ilanlar as $ilan) : 
                    $feats = json_decode($ilan->features ?? '{}');
                    $isSale = (strtolower($ilan->category) == 'sale' || $ilan->category == 'satilik');
                    $catColor = $isSale ? 'tw-bg-red-500' : 'tw-bg-blue-600';
                    $catText  = $isSale ? 'SATILIK' : 'KİRALIK';
                    $imagePath = !empty($ilan->image) ? BASE_URL . '/' . $ilan->image : 'https://placehold.co/600x400?text=Gorsel+Yok';
                ?>
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="property-card tw-bg-white tw-rounded-[1.5rem] md:tw-rounded-[2rem] tw-shadow-lg tw-border tw-border-gray-50 tw-overflow-hidden group">
                            <div class="tw-relative tw-h-56 md:tw-h-72 tw-overflow-hidden">
                                <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $ilan->slug; ?>" class="tw-block tw-h-full">
                                    <img src="<?php echo $imagePath; ?>" class="tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-1000 group-hover:tw-scale-110" alt="Gayrimenkul">
                                    <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/80 tw-via-transparent tw-to-transparent"></div>
                                </a>
                                <span class="tw-absolute tw-top-3 md:tw-top-4 tw-left-3 md:tw-left-4 <?php echo $catColor; ?> tw-text-white tw-text-[8px] md:tw-text-[9px] tw-font-black tw-uppercase tw-tracking-widest tw-px-3 md:tw-px-4 tw-py-1.5 md:tw-py-2 tw-rounded-full tw-shadow-lg">
                                    <?php echo $catText; ?>
                                </span>
                                <div class="tw-absolute tw-bottom-3 md:tw-bottom-4 tw-left-4 md:tw-left-6">
                                    <h4 class="tw-text-white tw-font-black tw-text-xl md:tw-text-3xl tw-mb-0"><?php echo number_format($ilan->price, 0, ',', '.'); ?> ₺</h4>
                                </div>
                            </div>
                            <div class="tw-p-5 md:tw-p-7">
                                <h5 class="tw-font-black tw-text-base md:tw-text-xl tw-text-gray-900 tw-mb-2 md:tw-mb-3 line-clamp-2">
                                    <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $ilan->slug; ?>" class="text-decoration-none text-inherit hover:tw-text-blue-600">
                                        <?php echo htmlspecialchars($ilan->title); ?>
                                    </a>
                                </h5>
                                <div class="tw-flex tw-items-center tw-text-gray-400 tw-text-[10px] md:tw-text-xs tw-font-bold tw-uppercase tw-tracking-wider tw-mb-4 md:tw-mb-6">
                                    <i class="fa-solid fa-location-dot tw-mr-2 tw-text-blue-500"></i>
                                    <?php echo htmlspecialchars($ilan->location); ?>
                                </div>
                                <div class="tw-flex tw-items-center tw-gap-2 md:tw-gap-3 tw-flex-wrap">
                                    <?php if(isset($feats->oda)): ?>
                                    <div class="tw-bg-gray-50 tw-px-3 md:tw-px-4 tw-py-1.5 md:tw-py-2 tw-rounded-lg md:tw-rounded-xl tw-text-[9px] md:tw-text-[11px] tw-font-black tw-text-gray-600">
                                        <i class="fa-solid fa-bed tw-text-blue-500 tw-mr-1.5"></i> <?php echo $feats->oda; ?>
                                    </div>
                                    <?php endif; ?>
                                    <?php if(isset($feats->m2)): ?>
                                    <div class="tw-bg-gray-50 tw-px-3 md:tw-px-4 tw-py-1.5 md:tw-py-2 tw-rounded-lg md:tw-rounded-xl tw-text-[9px] md:tw-text-[11px] tw-font-black tw-text-gray-600">
                                        <i class="fa-solid fa-maximize tw-text-blue-500 tw-mr-1.5"></i> <?php echo $feats->m2; ?> m²
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <div class="tw-px-5 md:tw-px-7 tw-py-4 md:tw-py-5 tw-bg-gray-50/50 tw-border-t tw-border-gray-50 d-flex justify-content-between align-items-center">
                                <span class="tw-text-[9px] md:tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest">Danışman</span>
                                <a href="<?php echo BASE_URL; ?>/properties/detail?slug=<?php echo $ilan->slug; ?>" class="tw-text-[10px] md:tw-text-xs tw-font-black tw-text-blue-600 tw-uppercase tw-tracking-widest text-decoration-none hover:tw-text-blue-800">
                                    İncele <i class="fa-solid fa-chevron-right tw-ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else : ?>
                <div class="col-12 text-center tw-py-20">
                    <h4 class="tw-font-black tw-text-gray-400">Aktif ilan bulunmuyor.</h4>
                </div>
            <?php endif; ?>
        </div>
        
        <div class="text-center tw-mt-10 d-md-none">
            <a href="<?php echo BASE_URL; ?>/properties" class="btn tw-bg-blue-600 tw-text-white tw-w-full tw-py-4 tw-rounded-2xl tw-font-black tw-text-xs tw-uppercase tw-tracking-widest shadow-lg">
                Tüm İlanları Gör <i class="fa-solid fa-arrow-right tw-ml-2"></i>
            </a>
        </div>
    </div>
</section>

<section class="tw-py-16 md:tw-py-24 tw-bg-[#0f172a] tw-text-white tw-relative">
    <div class="tw-absolute tw-inset-0 tw-opacity-10" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 40px 40px;"></div>
    <div class="container tw-relative tw-z-10">
        <div class="row text-center g-4 md:g-5">
            <div class="col-6 col-md-3">
                <div class="tw-font-black tw-text-3xl md:tw-text-6xl tw-text-blue-500 tw-mb-2 md:tw-mb-4"><?php echo $globalSettings->stat_years ?? '12'; ?>+</div>
                <div class="tw-text-gray-500 tw-uppercase tw-tracking-[0.2em] md:tw-tracking-[0.3em] tw-font-black tw-text-[8px] md:tw-text-[9px]">Yıllık Tecrübe</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="tw-font-black tw-text-3xl md:tw-text-6xl tw-text-emerald-400 tw-mb-2 md:tw-mb-4"><?php echo $globalSettings->stat_sales ?? '1500'; ?>+</div>
                <div class="tw-text-gray-500 tw-uppercase tw-tracking-[0.2em] md:tw-tracking-[0.3em] tw-font-black tw-text-[8px] md:tw-text-[9px]">Satılan Emlak</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="tw-font-black tw-text-3xl md:tw-text-6xl tw-text-purple-400 tw-mb-2 md:tw-mb-4"><?php echo $globalSettings->stat_customers ?? '950'; ?>+</div>
                <div class="tw-text-gray-500 tw-uppercase tw-tracking-[0.2em] md:tw-tracking-[0.3em] tw-font-black tw-text-[8px] md:tw-text-[9px]">Mutlu Müşteri</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="tw-font-black tw-text-3xl md:tw-text-6xl tw-text-orange-400 tw-mb-2 md:tw-mb-4"><?php echo $globalSettings->stat_awards ?? '20'; ?></div>
                <div class="tw-text-gray-500 tw-uppercase tw-tracking-[0.2em] md:tw-tracking-[0.3em] tw-font-black tw-text-[8px] md:tw-text-[9px]">Sektörel Ödül</div>
            </div>
        </div>
    </div>
</section>

<section class="tw-py-16 md:tw-py-20 tw-bg-blue-600 tw-relative tw-overflow-hidden">
    <div class="tw-absolute tw-right-0 tw-top-0 tw-w-64 md:tw-w-96 tw-h-64 md:tw-h-96 tw-bg-white/10 tw-rounded-full tw-blur-3xl tw-translate-x-1/2 tw--translate-y-1/2"></div>
    <div class="container tw-relative tw-z-10">
        <div class="row align-items-center">
            <div class="col-md-8 text-center text-md-start tw-mb-8 md:tw-mb-0">
                <h3 class="tw-font-black tw-text-white tw-text-2xl md:tw-text-5xl tw-mb-3 md:tw-mb-4 tw-tracking-tight">Evinizi Değerinde Satın!</h3>
                <p class="tw-text-blue-100 tw-text-base md:tw-text-xl tw-font-medium mb-0">Hemen bizimle iletişime geçin, ilanınızı profesyonelce yönetelim.</p>
            </div>
            <div class="col-md-4 text-center text-md-end">
                <a href="<?php echo BASE_URL; ?>/contact" class="btn tw-bg-white tw-text-blue-600 tw-px-8 md:tw-px-12 tw-py-4 md:tw-py-5 tw-rounded-xl md:tw-rounded-2xl tw-font-black tw-text-[10px] md:tw-text-sm tw-uppercase tw-tracking-widest hover:tw-scale-105 tw-transition-all shadow-xl">
                    Ücretsiz Ekspertiz <i class="fa-solid fa-arrow-right tw-ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<script>
    function setCategory(cat, btn) {
        document.getElementById('categoryInput').value = cat;
        const buttons = document.querySelectorAll('.cat-toggle');
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    }
</script>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>