/* UNISTAFF Modern UI Kit */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    /* Renk Paleti */
    --primary-orange: #FF7A00;       /* Enerjik Turuncu */
    --primary-red: #FF3D00;          /* Canlı Kızıl (Gradient Bitişi) */
    --navy-blue: #002D72;            /* Lacivert (Logo/Başlık) */
    --accent-yellow: #FFC300;        /* Altın Sarı (Highlight - Görseldeki sarı tonu esas alındı) */
    --bg-light: #F9FAFC;             /* Çok açık gri/mavi arka plan */
    --text-dark: #1A1A1A;
    --white: #FFFFFF;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* HEADER */
.navbar {
    background-color: var(--white);
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 45, 114, 0.08); /* Hafif Lacivert Gölge */
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy-blue);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links a {
    text-decoration: none;
    color: var(--navy-blue);
    font-weight: 600;
    margin-left: 30px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary-orange);
}

/* HERO SECTION (Ana Arama Alanı) */
.hero {
    background: var(--navy-blue); /* Arka plan lacivert */
    background: linear-gradient(135deg, #002D72 0%, #001A45 100%);
    color: var(--white);
    padding: 80px 20px;
    text-align: center;
    border-radius: 0 0 30px 30px; /* Alt köşeleri yuvarla */
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 10px;
    font-weight: 700;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* ARAMA KUTUSU TASARIMI */
.search-box {
    background: var(--white);
    padding: 10px;
    border-radius: 50px; /* Hap şeklinde tasarım */
    display: inline-flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 800px;
    width: 100%;
}

.search-input, .filter-select {
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.search-input {
    flex: 2; /* Geniş alan */
    border-radius: 50px 0 0 50px;
}

.filter-select {
    flex: 1;
    border-left: 1px solid #eee;
    color: #666;
    background-color: transparent;
}

.search-btn {
    background: linear-gradient(90deg, var(--primary-orange), var(--primary-red));
    color: var(--white);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-right: 5px;
}

.search-btn:hover {
    transform: translateY(-2px); /* Buton yukarı kalkar */
    box-shadow: 0 5px 15px rgba(255, 61, 0, 0.4); /* Glow efekti */
}

/* KARTLAR */
.container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.section-title {
    color: var(--navy-blue);
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.business-card {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border-top: 5px solid var(--primary-orange);
}

.business-card:hover {
    transform: translateY(-10px);
}

.card-header h3 {
    margin: 0;
    color: var(--navy-blue);
    font-size: 20px;
}

.card-tag {
    display: inline-block;
    background-color: #FFF3E0; /* Açık turuncu zemin */
    color: var(--primary-orange);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

.card-body p {
    color: #666;
    font-size: 14px;
    margin: 10px 0;
}

.btn-contact {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--accent-yellow);
    color: var(--navy-blue);
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 15px;
    transition: opacity 0.2s;
}

.btn-contact:hover {
    opacity: 0.8;
}

/* FOOTER */
footer {
    background-color: var(--navy-blue);
    color: var(--white);
    text-align: center;
    padding: 30px;
    margin-top: 60px;
    font-size: 14px;
}

/* assets/css/style.css */
/* LOGO VE HEADER DÜZENLEMELERİ */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px; /* Logo resmi ile yazı arasındaki boşluk */
}

.logo-img {
    height: 50px; /* Navbar boyuna uygun yükseklik */
    width: 50px;
    border-radius: 50%; /* Logoyu yuvarlak yapar */
    object-fit: cover;
    border: 2px solid var(--primary-orange); /* Etrafına ince turuncu bir halka */
}

.logo-text {
    font-size: 24px;
    font-weight: 800; /* Kalın font */
    color: var(--navy-blue);
    letter-spacing: -0.5px;
}

.login-link {
    color: var(--primary-orange) !important; /* Giriş yap yazısı turuncu olsun */
    font-weight: 700 !important;
    border: 1px solid var(--primary-orange);
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.login-link:hover {
    background-color: var(--primary-orange);
    color: white !important;
}






/* --- SEARCH.PHP ÖZEL STİLLERİ --- */

/* Sonuç Başlık Alanı */
.search-results-header {
    background-color: var(--navy-blue);
    color: white;
    padding: 40px 0;
    text-align: center;
    border-bottom: 5px solid var(--primary-orange);
}

.search-results-header h2 {
    color: white; /* Lacivert zemin üstüne beyaz yazı */
    margin: 0;
    font-size: 32px;
}

.result-count {
    color: var(--accent-yellow); /* Altın sarı ile sayı vurgusu */
    font-weight: 600;
    margin-top: 10px;
}

/* Grid Yapısı (Yan Yana Kartlar) */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Ekrana sığdığı kadar yan yana koy */
    gap: 30px;
}

/* Kart İçi Düzenlemeler */
.card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.category-badge {
    background-color: #FFF3E0;
    color: var(--primary-orange);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.city-badge {
    background-color: #E3F2FD;
    color: var(--navy-blue);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.card-title {
    font-size: 22px;
    margin: 10px 0;
    color: var(--navy-blue);
}

.address-text {
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
}

/* Aksiyon Butonu (Ara) */
.btn-call {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(90deg, var(--primary-orange), var(--primary-red));
    color: white;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3);
    transition: transform 0.2s;
}

.btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 122, 0, 0.5);
    color: white;
}

/* Sonuç Yok Alanı */
.no-results {
    grid-column: 1 / -1; /* Tüm genişliği kapla */
    text-align: center;
    padding: 50px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
    border: 2px solid var(--navy-blue);
    color: var(--navy-blue);
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-back:hover {
    background-color: var(--navy-blue);
    color: white;
}





/* =========================================
   MOBİL UYUMLULUK (RESPONSIVE) AYARLARI
   ========================================= */

/* Tablet ve Telefon Ekranları (768px ve altı) */
@media screen and (max-width: 768px) {

    /* 1. HEADER (Menü) Düzenlemesi */
    .navbar {
        flex-direction: column; /* Yan yana değil, alt alta diz */
        padding: 15px 20px;
        position: relative;
    }

    .logo {
        margin-bottom: 15px; /* Logo ile menü arasına boşluk */
        width: 100%;
        justify-content: center; /* Logoyu ortala */
    }

    .nav-links {
        width: 100%;
        display: flex;
        flex-direction: column; /* Linkleri alt alta diz */
        align-items: center;
        gap: 15px; /* Linkler arası boşluk */
    }

    .nav-links a {
        margin-left: 0; /* Masaüstü boşluğunu sıfırla */
        font-size: 16px;
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
        background-color: #f8f9fa; /* Linklerin arkasına hafif fon */
        border-radius: 8px;
    }

    .login-link {
        width: auto !important; /* Giriş butonu tam genişlik olmasın */
        display: inline-block !important;
        background-color: transparent !important;
    }

    /* 2. HERO ve ARAMA KUTUSU Düzenlemesi */
    .hero {
        padding: 40px 15px; /* Boşlukları azalt */
        border-radius: 0 0 20px 20px;
    }

    .hero h1 {
        font-size: 28px; /* Başlığı küçült */
    }

    .search-box {
        flex-direction: column; /* Arama kutusu elemanlarını alt alta diz */
        border-radius: 20px; /* Hap şeklini boz, köşeli yap */
        padding: 15px;
        gap: 10px;
    }

    .search-input {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #eee;
        text-align: center;
    }

    .filter-select {
        width: 100%;
        border-left: none;
        border: 1px solid #eee;
        border-radius: 10px;
        text-align: center;
        margin-bottom: 5px;
    }

    .search-btn {
        width: 100%;
        margin-right: 0;
        border-radius: 10px;
        padding: 12px;
    }

    /* 3. KARTLAR ve GRID SİSTEMİ */
    .container {
        padding: 0 15px; /* Yan boşlukları azalt */
    }
    
    .card-grid, .results-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun olsun */
    }

    /* 4. LOGO YAZISI */
    .logo-text {
        font-size: 20px; /* Mobilde logo yazısını biraz küçült */
    }
}







/* =========================================
   HAMBURGER MENÜ VE MOBİL TASARIM
   ========================================= */

/* Hamburger İkonu (Varsayılan olarak gizli - Masaüstünde görünmez) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--navy-blue);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* MOBİL EKRANLAR İÇİN KURALLAR (768px ve altı) */
@media screen and (max-width: 768px) {

    /* 1. Navbar Düzeni */
    .navbar {
        padding: 15px 20px;
        justify-content: space-between; /* Logo solda, Hamburger sağda */
        align-items: center;
        position: relative; /* Menü buna göre konumlanacak */
    }

    /* 2. Hamburger İkonunu Göster */
    .hamburger {
        display: flex; /* Artık görünür */
    }

    /* 3. Menü Linklerini Gizle/Şekillendir */
    .nav-links {
        display: none; /* Varsayılan olarak GİZLİ */
        position: absolute;
        top: 100%; /* Navbar'ın hemen altına yapış */
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 20px 0;
        z-index: 999; /* Her şeyin üstünde dursun */
        border-top: 3px solid var(--primary-orange); /* Turuncu çizgi detayı */
    }

    /* JavaScript ile 'active' sınıfı eklenince GÖSTER */
    .nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease-in-out forwards;
    }

    /* Menü Linkleri */
    .nav-links a {
        margin: 10px 0; /* Dikey boşluk */
        font-size: 18px;
        width: 80%;
        text-align: center;
        padding: 10px;
        border-radius: 8px;
    }
    
    .nav-links a:hover {
        background-color: #f0f4f8;
    }

    /* Giriş Butonu Mobilde */
    .login-link {
        width: 80% !important; /* Geniş buton */
        text-align: center;
        background-color: var(--primary-orange);
        color: white !important;
    }

    /* Arama Kutusu Mobilde */
    .search-box {
        flex-direction: column;
        border-radius: 15px;
        gap: 10px;
    }
    
    .search-input, .filter-select, .search-btn {
        width: 100%;
        border-radius: 10px;
        margin: 0;
        text-align: center;
    }
    
    /* Logo Yazısı */
    .logo-text {
        font-size: 20px;
    }
}

/* Menü Açılma Animasyonu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hamburger İkonu Açıldığında (X şeklini alması için opsiyonel) */
.hamburger.open .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
.hamburger.open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger.open .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}











/* =========================================
   YENİ MOBİL MENÜ TASARIMI
   ========================================= */

/* Masaüstü Linkleri Kutusu */
.desktop-links {
    display: flex;
    align-items: center;
}

/* --- TAM EKRAN MOBİL MENÜ (Overlay) --- */
.mobile-menu-overlay {
    position: fixed; /* Sayfada sabit dur */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F8F9FA; /* Görseldeki açık gri arka plan */
    z-index: 1000; /* En üstte görünsün */
    
    /* Esnek kutu yapısı */
    display: flex;
    flex-direction: column;
    align-items: center; /* Yatayda ortala */
    padding-top: 20px;

    /* Görseldeki üst turuncu çizgi */
    border-top: 5px solid var(--primary-orange);

    /* Varsayılan olarak GİZLİ */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out; /* Açılma efekti */
}

/* Menü Aktif Olduğunda (JavaScript ile eklenir) */
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Menü Üst Kısım (Logo ve X) */
.menu-header {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Logo sola, X sağa */
    align-items: center;
    padding: 0 20px; /* Yanlardan boşluk */
    margin-bottom: 40px; /* Butonlarla arası boşluk */
}

/* Kapatma Butonu (X) */
.close-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* Menü Butonları Konteyneri */
.menu-links-container {
    width: 85%; /* Görseldeki gibi genişlik */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Butonlar arası boşluk */
}

/* Genel Menü Butonu */
.menu-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--white); /* Beyaz zemin */
    color: var(--navy-blue); /* Lacivert yazı */
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 12px; /* Köşeleri yuvarla */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Hafif gölge */
    transition: transform 0.2s;
}

.menu-btn:active {
    transform: scale(0.98); /* Tıklanınca hafif küçülme efekti */
}

/* Giriş Yap Butonu (Görseldeki gibi içi boş) */
.login-btn-mobile {
    background-color: transparent;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    box-shadow: none;
}


/* =========================================
   MEDIA QUERIES (Cihaza Göre Görünüm Ayarları)
   ========================================= */

/* MASAÜSTÜ EKRANLAR (769px ve üstü) */
@media screen and (min-width: 769px) {
    /* Mobil menüyü ve hamburgeri gizle */
    .mobile-menu-overlay, .hamburger {
        display: none !important;
    }
}

/* MOBİL VE TABLET EKRANLAR (768px ve altı) */
@media screen and (max-width: 768px) {
    /* Navbar düzeni */
    .navbar {
        padding: 15px 20px;
        justify-content: space-between;
    }
    
    /* Masaüstü linklerini gizle */
    .desktop-links {
        display: none;
    }

    /* Hamburger ikonunu göster */
    .hamburger {
        display: flex;
    }

    /* Logo yazısını biraz küçült */
    .logo-text {
        font-size: 20px;
    }

    /* Arama kutusu düzenlemeleri (Eski koddan kalma, gerekliyse kalsın) */
    .search-box { flex-direction: column; gap: 10px; }
    .search-input, .filter-select, .search-btn { width: 100%; margin: 0; text-align: center; }
}






/* =========================================
   1. GENEL AYARLAR ve RENKLER
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --primary-orange: #FF7A00;
    --navy-blue: #002D72;
    --white: #FFFFFF;
    --bg-light: #F9FAFC;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
}

/* =========================================
   2. NAVBAR (HEADER) DÜZELTİLMİŞ HALİ
   ========================================= */
.navbar {
    background-color: var(--white);
    height: 80px; /* Sabit yükseklik */
    padding: 0 50px;
    display: flex; /* Yan yana diz */
    justify-content: space-between; /* Sağa ve sola yasla */
    align-items: center; /* Dikey ortala */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo Ayarları */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}
.logo-img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.logo-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--navy-blue);
}

/* Masaüstü Linkleri */
.desktop-links a {
    text-decoration: none;
    color: var(--navy-blue);
    font-weight: 600;
    margin-left: 30px;
    transition: color 0.3s;
}
.desktop-links a:hover { color: var(--primary-orange); }

.login-link {
    border: 2px solid var(--primary-orange);
    padding: 8px 20px;
    border-radius: 20px;
    color: var(--primary-orange) !important;
}
.login-link:hover {
    background-color: var(--primary-orange);
    color: white !important;
}

/* Hamburger İkonu (Masaüstünde Gizli) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--navy-blue);
    border-radius: 5px;
}

/* =========================================
   3. HERO SECTION (FOTOĞRAFLI ARAMA ALANI)
   ========================================= */
.hero {
    /* Arka Plan Resmi + Lacivert Filtre */
    background: linear-gradient(rgba(0, 45, 114, 0.7), rgba(0, 45, 114, 0.8)), 
                url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;     /* Resmi alana yay */
    background-position: center; /* Resmi ortala */
    background-repeat: no-repeat;
    
    height: 60vh; /* Ekranın %60'ını kapla (Fat Foto) */
    min-height: 400px;
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikey ortala */
    align-items: center;     /* İçeriği yatay ortala */
    text-align: center;
    color: white;
    padding: 20px;
    border-radius: 0 0 30px 30px;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Arama Kutusu Tasarımı */
.search-box {
    background: white;
    padding: 10px;
    border-radius: 50px;
    display: flex;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.search-input, .filter-select {
    border: none;
    padding: 15px;
    outline: none;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
}
.search-input { flex: 2; border-radius: 50px 0 0 50px; padding-left: 25px; }
.filter-select { flex: 1; border-left: 1px solid #eee; }
.search-btn {
    background: var(--primary-orange);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

/* =========================================
   4. MOBİL UYUMLULUK (MEDIA QUERIES)
   ========================================= */
@media screen and (max-width: 768px) {
    .navbar { padding: 0 20px; }
    .desktop-links { display: none; } /* Masaüstü menüyü gizle */
    .hamburger { display: flex; }     /* Hamburgeri göster */
    
    .hero { height: auto; padding: 60px 20px; }
    .hero h1 { font-size: 28px; }
    
    .search-box {
        flex-direction: column;
        border-radius: 20px;
        background: transparent;
        box-shadow: none;
        gap: 10px;
    }
    .search-input, .filter-select, .search-btn {
        width: 100%;
        border-radius: 10px;
        text-align: center;
        background: white;
        margin: 0;
        box-sizing: border-box; /* Taşmayı önler */
    }
}

/* =========================================
   5. MOBİL MENÜ OVERLAY (Senin Yolladığın Tasarım)
   ========================================= */
.mobile-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #F8F9FA; z-index: 2000;
    display: flex; flex-direction: column; align-items: center;
    border-top: 5px solid var(--primary-orange);
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.menu-header {
    width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center;
    box-sizing: border-box;
}
.close-menu-btn { background: none; border: none; cursor: pointer; }

.menu-links-container { width: 90%; display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.menu-btn {
    background: white; padding: 15px; text-align: center; font-weight: bold;
    color: var(--navy-blue); text-decoration: none; border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.login-btn-mobile {
    background: transparent; border: 2px solid var(--primary-orange); color: var(--primary-orange); box-shadow: none;
}





/* =========================================
   MOBİL İÇİN DÜZELTME (768px ve altı)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. NAVBAR DÜZENİ (Jilet Gibi Hizalama) */
    .navbar {
        display: flex !important;
        flex-direction: row !important; /* Yan yana zorla */
        justify-content: space-between !important; /* Biri sağa biri sola */
        align-items: center !important;
        padding: 15px 20px !important;
        height: auto;
    }

    .logo {
        margin: 0; /* Gereksiz boşlukları sil */
        width: auto;
        justify-content: flex-start;
    }

    .hamburger {
        display: flex; /* Görünür yap */
        margin: 0; /* Kaymayı önle */
    }

    /* Masaüstü linklerini gizle */
    .desktop-links { display: none !important; }


    /* 2. HERO ve ARAMA KUTUSU (Derli Toplu Görünüm) */
    .hero {
        padding: 80px 20px 40px 20px; /* Üstten boşluk bırak ki header'a girmesin */
        height: auto; /* Ekranı zorlamasın */
        min-height: 50vh;
    }

    .hero h1 {
        font-size: 26px; /* Başlığı mobilde küçült */
        line-height: 1.3;
    }

    /* Arama Kutusunu Şeffaf Yap ve Sırala */
    .search-box {
        background: transparent !important; /* Arkadaki beyazlığı kaldır */
        box-shadow: none !important; /* Gölgeyi kaldır */
        flex-direction: column !important; /* Alt alta diz */
        gap: 15px; /* Kutular arası boşluk */
        padding: 0;
        margin-top: 20px;
    }

    /* Inputlar ve Buton Standart Olsun */
    .search-input, .filter-select, .search-btn {
        width: 100% !important;
        height: 55px !important; /* Yükseklik standardı */
        border-radius: 12px !important; /* Köşeleri hafif yuvarla */
        margin: 0 !important;
        font-size: 16px;
        border: none;
    }

    /* Inputların İçi */
    .search-input {
        text-align: center; /* Yazıyı ortala */
        padding: 0 15px;
    }
    
    .filter-select {
        text-align: center;
        background-color: white;
    }

    /* KAYIP BUTONU GERİ GETİRME */
    .search-btn {
        background-color: var(--primary-orange) !important; /* Turuncu renk zorunlu */
        color: white !important; /* Yazı beyaz */
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(255, 122, 0, 0.4); /* Hafif turuncu gölge */
    }
}





/* =========================================
   FONT AYARLARI (ZORUNLU POPPINS)
   ========================================= */

/* Fontu yükle (Yedek olarak CSS içinde de dursun) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Tüm siteye uygula */
body {
    font-family: 'Poppins', sans-serif;
}

/* ÖNEMLİ: Form elemanları genelde fontu miras almaz, elle zorluyoruz */
input, 
button, 
select, 
textarea, 
optgroup, 
option {
    font-family: 'Poppins', sans-serif !important;
}

/* Başlıkların kalınlığını ayarla */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Kalın */
}

/* Normal yazılar */
p, a, span, label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Normal */
}




/* =========================================
   ADMIN / İŞLETME EKLEME SAYFASI
   ========================================= */

.admin-container {
    background-color: var(--bg-light);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.admin-card {
    background: white;
    width: 100%;
    max-width: 600px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid var(--navy-blue);
}

.form-title {
    color: var(--navy-blue);
    text-align: center;
    margin-bottom: 10px;
    font-size: 28px;
}

.form-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

/* Form Elemanları */
.admin-form .form-group {
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--navy-blue);
    font-size: 14px;
}

.admin-form input, 
.admin-form select, 
.admin-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    box-sizing: border-box; /* Kutudan taşmayı önler */
}

.admin-form input:focus, 
.admin-form select:focus, 
.admin-form textarea:focus {
    border-color: var(--primary-orange);
    outline: none;
    background-color: #fffaf5; /* Çok açık turuncu */
}

/* Yan Yana Duran Alanlar */
.form-group-row {
    display: flex;
    gap: 20px;
}
.form-group-row .form-group {
    flex: 1;
}

/* Kaydet Butonu */
.submit-btn {
    width: 100%;
    background: linear-gradient(90deg, var(--navy-blue), #004494);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 45, 114, 0.3);
}

/* Başarı Mesajı */
.alert {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}
.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Mobil Uyumluluk */
@media screen and (max-width: 768px) {
    .form-group-row {
        flex-direction: column; /* Mobilde yan yana değil alt alta */
        gap: 0;
    }
    .admin-card {
        padding: 20px;
    }
}





/* =========================================
   İŞLETME DETAY SAYFASI
   ========================================= */

/* Üst Başlık Alanı (Lacivert) */
.detail-header {
    background-color: var(--navy-blue);
    color: white;
    padding: 60px 0;
    text-align: center;
    border-bottom: 5px solid var(--primary-orange);
}

.detail-header h1 {
    font-size: 36px;
    margin: 10px 0;
}

.detail-category {
    background-color: var(--primary-orange);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.detail-location {
    font-size: 18px;
    opacity: 0.9;
}

/* İçerik Düzeni */
.detail-container {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.detail-content {
    flex: 2; /* Sol taraf daha geniş */
}

.detail-sidebar {
    flex: 1; /* Sağ taraf daha dar */
}

/* Bilgi Kutusu */
.info-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.info-box h3 {
    color: var(--navy-blue);
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-orange);
    padding-left: 10px;
}

.info-box hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

/* Büyük Arama Butonu */
.call-btn-large {
    display: block;
    background: linear-gradient(90deg, #25D366, #128C7E); /* WhatsApp/Tel Yeşili */
    color: white;
    text-align: center;
    padding: 18px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 20px;
    transition: transform 0.2s;
}

.call-btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

/* Yan Görsel */
.detail-img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* MOBİL UYUM */
@media screen and (max-width: 768px) {
    .detail-container {
        flex-direction: column-reverse; /* Mobilde görsel üstte, yazı altta olsun istersen column, tersi için column-reverse */
    }
    
    .detail-header {
        padding: 40px 20px;
    }
    
    .detail-header h1 {
        font-size: 28px;
    }
}






/* =========================================
   GİRİŞ VE KAYIT SAYFALARI
   ========================================= */

.auth-container {
    min-height: 80vh; /* Ekranı kaplasın */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f4f7f9 0%, #e3e9f0 100%);
    padding: 20px;
}

.auth-card {
    background: white;
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 45, 114, 0.1); /* Hafif Lacivert Gölge */
    text-align: center;
    border-top: 5px solid var(--primary-orange);
}

.auth-card h2 {
    color: var(--navy-blue);
    margin-bottom: 10px;
}

.auth-card p {
    color: #666;
    margin-bottom: 30px;
}

.auth-form .form-group {
    text-align: left;
    margin-bottom: 20px;
}

.auth-footer {
    margin-top: 25px;
    font-size: 14px;
}

.auth-footer a {
    color: var(--primary-orange);
    font-weight: bold;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}




/* =========================================
   GİRİŞ VE KAYIT FORMU DÜZELTMESİ
   ========================================= */

/* 1. Form Grubu: Etiket ve Kutuyu Kapsar */
.auth-form .form-group {
    margin-bottom: 20px;
    text-align: left; /* Yazıları sola yasla */
}

/* 2. Etiketler (Email, Şifre yazısı) */
.auth-form label {
    display: block; /* Kesinlikle alt satıra geçsin */
    margin-bottom: 8px; /* Kutuyla arasına boşluk */
    font-weight: 600;
    color: var(--navy-blue);
    font-size: 14px;
}

/* 3. Inputlar (Yazı Kutuları) */
.auth-form input, 
.auth-form select {
    width: 100%; /* Kutuyu tam genişlet */
    padding: 14px 15px; /* İç boşluk ver ki şişman dursun */
    border: 2px solid #e0e0e0; /* Hafif gri kenarlık */
    border-radius: 10px; /* Köşeleri yuvarla */
    font-size: 16px;
    background-color: #f9f9f9; /* Çok hafif gri arka plan */
    box-sizing: border-box; /* Taşmayı engelle */
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
}

/* Tıklayınca (Focus) */
.auth-form input:focus,
.auth-form select:focus {
    border-color: var(--primary-orange); /* Turuncu kenarlık */
    background-color: #fff; /* Beyaz yap */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1); /* Hafif turuncu gölge */
}

/* 4. Giriş Yap Butonu */
.submit-btn {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    font-size: 16px;
    border-radius: 10px;
    background-color: var(--navy-blue);
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover {
    background-color: #001a45; /* Daha koyu lacivert */
}




/* =========================================
   ANA SAYFA HIZLI KATEGORİLER
   ========================================= */

.category-scroll {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow-x: auto; /* Yanlamasına kaydırma (Scroll) */
    white-space: nowrap; /* Alt satıra geçmesin */
    
    /* Kaydırma çubuğunu gizle (Estetik için) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.category-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px; /* Her butonun genişliği */
    text-decoration: none;
    color: var(--navy-blue);
    transition: transform 0.2s;
}

.category-card:hover {
    transform: translateY(-5px); /* Üzerine gelince zıplasın */
}

.cat-icon {
    width: 60px;
    height: 60px;
    background-color: #f0f4f8; /* Açık gri zemin */
    border-radius: 50%; /* Tam yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* Emoji boyutu */
    margin-bottom: 8px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

/* Aktif veya Hover olunca renkli olsun */
.category-card:hover .cat-icon {
    background-color: #fff3e0;
    border-color: var(--primary-orange);
}

.category-card span {
    font-weight: 600;
    font-size: 14px;
}



/* WhatsApp Butonu */
.whatsapp-btn {
    display: block;
    background-color: #25D366; /* WhatsApp Yeşili */
    color: white;
    text-align: center;
    padding: 18px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    transition: transform 0.2s;
}

.whatsapp-btn:hover {
    background-color: #128C7E; /* Koyu Yeşil */
    transform: translateY(-3px);
}

/* Eski Arama Butonunu Mavi Yapalım (Karışmasın) */
.call-btn-large {
    background: var(--navy-blue) !important; /* Lacivert olsun */
}




/* KATEGORİ KAYDIRMA ALANI */
.category-scroll {
    display: flex;
    gap: 20px; /* Araları biraz açalım ferah olsun */
    padding: 25px 20px;
    background: white;
    border-radius: 50px; /* Daha yuvarlak modern kenarlar */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    
    /* MASAÜSTÜNDE ORTALA */
    justify-content: center; 
    
    /* MOBİLDE KAYDIRMA (Scroll) */
    overflow-x: auto; 
    white-space: nowrap; 
    
    /* Scroll çubuğunu gizle */
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 900px; /* Çok yayılmasın */
    margin: 0 auto; /* Kutunun kendisini ortala */
}

/* Mobilde (Dar ekranda) sola yaslansın ki kaydırma bozulmasın */
@media screen and (max-width: 768px) {
    .category-scroll {
        justify-content: flex-start; /* Mobilde baştan başla */
        border-radius: 20px; /* Mobilde çok yuvarlak olmasın */
    }
}



/* =========================================
   SAYFALAMA (PAGINATION) TASARIMI
   ========================================= */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
}

.page-btn {
    display: inline-block;
    padding: 10px 18px;
    background-color: white;
    color: var(--navy-blue);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.page-btn:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
    transform: translateY(-3px);
}

/* Aktif Sayfa (Hangi sayfadaysak o renkli olsun) */
.page-btn.active {
    background-color: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
    box-shadow: 0 5px 15px rgba(255, 122, 0, 0.3);
}