/* --- TEMA RENKLERİ VE STANDARTLARI --- */
:root {
  --renk1: #26ae61;
  --primary-dark-green: #0a873c;
  --brand-dark-green: #235c33;
  --soft-green-bg: #e6f4ea;
  --active-item-bg: #eef7f2;
  --text-dark: #1c231f;
  --text-gray: #6b7280;
  --border-color: #e5e7eb;
  --border-light: #f1f5f9;
  --border-renk1: #ddece4;
  --renk1-light: #eef7f2;
  --danger-red: #ef4444;
  --bg-light: #f9fafb;
  --bg-page: #f8fafc;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-tam: 50%;
  --font1: "Lexend", sans-serif;
  --transition: all 0.3s ease;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font1);
  background-color: #fff;
  /* Top Notch (Üst Çentik/Durum Çubuğu) Koruması */
  padding-top: calc(70px + env(safe-area-inset-top, 0px));
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- HEADER (SAFE AREA DESTEKLİ) --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(70px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background-color: #ffffff;
  z-index: 1030;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  border-bottom: 1px solid var(--border-color);
}

.site-header.is-hidden {
  transform: translate3d(0, -100%, 0);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}

.header-logo-area {
  justify-self: start;
}

.header-logo-img {
  height: 32px;
  object-fit: contain;
  display: block;
}

.header-nav-area {
  justify-self: center;
}

.nav-links-list {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links-list a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s ease;
}

.nav-links-list a:hover {
  color: var(--renk1);
}

.header-action-area {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Butonlar & İkonlar */
.btn-custom-solid {
  background-color: var(--renk1);
  color: white;
  border: none;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-custom-solid:hover {
  background-color: var(--primary-dark-green);
  color: white;
}

.btn-custom-outline {
  background: transparent;
  color: var(--renk1);
  border: 1px solid var(--renk1);
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-custom-outline:hover {
  background-color: var(--renk1);
  color: white;
}

/* Mobil Uygulama Stili Geri Butonu (Native App Feel) */
.app-back-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1040;
  -webkit-tap-highlight-color: transparent;
}

.app-back-btn:hover {
  background-color: #f1f5f9;
  color: var(--renk1, #26ae61);
}

.app-back-btn:active {
  transform: translateY(-50%) scale(0.92);
  background-color: var(--soft-green-bg, #e6f4ea);
  color: var(--renk1, #26ae61);
}

/* İç Sayfalarda Logoyu Ortala */
.header-ic-sayfa .header-logo-area {
  justify-self: center;
}

@media (max-width: 1199px) {
  .header-ic-sayfa .header-logo-area {
    margin: 0 auto;
  }
}

.action-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  transition: background 0.2s;
}

.action-icon-btn.bell {
  background-color: #e6f6eb;
  color: var(--renk1);
}

.action-icon-btn.bell:hover {
  background-color: #d1f0db;
}

.action-icon-btn.favorite {
  background-color: #f3f4f6;
  color: var(--text-dark);
}

.action-icon-btn.favorite:hover {
  background-color: #fee2e2;
  color: var(--danger-red);
}

/* Zil üzerindeki dinamik sayı balonu */
.notification-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  background-color: var(--danger-red);
  color: white;
  border-radius: 10px;
  border: 2px solid white;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  transition: all 0.2s ease;
  pointer-events: none;
  /* Tıklamayı engellememesi için */
}

/* Dropdown Başlığı İçindeki Sayı Balonu */
.bell-dropdown-header h5 span {
  color: var(--text-gray);
  font-size: 13px;
  font-weight: 500;
  margin-left: 4px;
}

/* Profil Dropdown */
.user-profile-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}

.user-profile-trigger {
  background-color: var(--renk1);
  color: white;
  height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.user-profile-dropdown {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  background: white;
  min-width: 250px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
}

.user-profile-wrapper:hover .user-profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-profile-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 15px;
}

.user-profile-header {
  padding: 20px 20px 11px 20px;
  border-bottom: 1px solid var(--border-color);
}

.user-profile-phone {
  color: var(--text-dark);
  margin: 0 0 1px 0;
  font-size: 17px;
  font-weight: 700;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-gray);
  font-weight: 500;
  font-size: 13px;
}

.user-profile-menu {
  padding: 10px 0;
  list-style: none;
  margin: 0;
}

.user-profile-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0px;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
}

.user-profile-menu li a:hover {
  background-color: var(--bg-light);
  color: var(--renk1);
}

.user-profile-logout {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: 5px;
}

.user-profile-logout a {
  color: var(--danger-red) !important;
}

/* --- PROFİL MENÜSÜ MOBİL YATAY KAYDIRMA YAPISI --- */

.profile-nav-kapsayici {
  position: relative;
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
}

/* Ok Tasarımları (Başlangıçta gizli) */
.profil-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.profil-ok:hover {
  background: var(--renk1);
  color: #fff;
  border-color: var(--renk1);
}

.profil-ok.goster {
  opacity: 1;
  visibility: visible;
}

.profil-ok-sol {
  left: 0;
}

.profil-ok-sag {
  right: 0;
}

/* Kenar Gölgeleri */
.profile-nav-kapsayici::before,
.profile-nav-kapsayici::after {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-nav-kapsayici::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-light), transparent);
}

.profile-nav-kapsayici::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-light), transparent);
}

.profile-nav-kapsayici.sol-golge::before {
  opacity: 1;
}

.profile-nav-kapsayici.sag-golge::after {
  opacity: 1;
}

/* Masaüstü Görünüm (Dikey Liste - Oklar İptal) */
@media (min-width: 1200px) {
  .profil-ok,
  .profile-nav-kapsayici::before,
  .profile-nav-kapsayici::after {
    display: none !important;
  }
}

/* İkon ve Nokta için Kapsayıcı */
.menu-item-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* İkon üzerindeki küçük kırmızı bildirim noktası */
.unread-dot-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background-color: var(--danger-red);
  border-radius: 50%;
  border: 1.5px solid white;
  /* İkon ile arasını açarak derinlik kazandırır */
  animation: subtle-pulse 2s infinite;
}

/* Sağ tarafa yaslanan sayı balonu */
.unread-count-badge {
  margin-left: auto;
  /* Sayıyı otomatik olarak en sağa yaslar */
  background-color: var(--soft-green-bg);
  color: var(--primary-dark-green);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* Hover durumunda sayı balonunun renk değişimi */
.user-profile-menu li a:hover .unread-count-badge {
  background-color: var(--renk1);
  color: white;
}

/* --- ANIMASYONLAR --- */

/* Nabız animasyonu (Kırmızı nokta için) */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Zil sallanma animasyonu (Sadece hover anında çalışır) */
@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(15deg);
  }

  40%,
  80% {
    transform: rotate(-15deg);
  }
}

.user-profile-menu li.has-unread:hover i.ph-bell {
  display: inline-block;
  animation: bell-ring 0.6s ease-in-out;
}

/* Auth Görünümleri */
.auth-guest-view {
  display: flex;
  align-items: center;
  gap: 15px;
}

.auth-user-view {
  display: none;
  align-items: center;
  gap: 15px;
}

body.is-logged-in .auth-guest-view {
  display: none !important;
}

body.is-logged-in .auth-user-view {
  display: flex !important;
}

/* Ortadaki arama çubuğunun genişleyebilmesi için kolon yapısını güncelliyoruz */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Yanlar içeriğe göre, orta kısım esnek */
  gap: 40px;
  /* Logoyla ve sağ butonlarla arasına boşluk */
  align-items: center;
  height: 100%;
}

/* --- ARAMA ÇUBUĞU (YENİ) --- */
.header-search-area {
  justify-self: center;
  max-width: 560px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--kart-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.3s ease;
}

.header-search-form {
  width: 100%;
  display: flex;
}

/* Tıklanınca dışarıya hafif gölge ve yeşil kenarlık efekti */
.header-search-form:focus-within {
  border-color: var(--renk1);
  box-shadow: 0 0 0 4px rgba(38, 174, 97, 0.15);
  /* Temanızın soft yeşil gölgesi */
}

.header-search-input {
  flex: 1;
  border: none;
  padding: 0 20px;
  height: 44px;
  /* Buton ve kutu yüksekliği */
  font-size: 14px;
  color: var(--text-dark);
  font-family: inherit;
  outline: none;
}

.header-search-input::placeholder {
  color: var(--text-gray);
  font-weight: 400;
}

.header-search-btn {
  background-color: var(--renk1);
  /* Temanızın ana rengi */
  color: #ffffff;
  border: none;
  width: 55px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.2s;
}

.header-search-btn:hover {
  background-color: var(--primary-dark-green);
}

/* header son */

.test-state-btn {
  position: fixed;
  bottom: 90px;
  right: 30px;
  background: #111827;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 9999;
}

.page-icerik {
  width: 100%;
  height: auto;
  padding: 25px 0px;
  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.page-content {
  border: solid 1px var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
}

.page-content-body {
  padding: 15px;
}

.page-content-body,
.page-content-header {
  padding: 15px;
}

.page-content-header {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: solid 1px var(--border-color);
}

/* ====================================================
   İLAN LİSTELEME SAYFASI - CSS GRID DÜZENİ
==================================================== */

.listing-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}

/* Mobilde sıralama (İçerik üstte, Sol alan altta) */
.sol-kolon-sidebar {
  order: 2;
  width: 100%;
}

.sag-kolon-icerik {
  order: 1;
  min-width: 0;
  /* CSS Grid taşma (overflow) sorunlarını engeller */
}

/* MASAÜSTÜ (1200px ve üzeri) */
@media (min-width: 1200px) {
  .listing-page-grid {
    /* SOL: Tam 256px, SAĞ: Kalan tüm otomatik alan */
    grid-template-columns: 256px 1fr;
    gap: 24px;
  }

  .sol-kolon-sidebar {
    order: 1;
    max-width: 256px;
    width: 256px;
  }
}

/**/

@media (min-width: 1200px) {
  .sticky-sol-menu {
    /* Safari tarayıcı desteği için */
    position: -webkit-sticky;

    /* Kaydırma esnasında yapışkan olmasını sağlar */
    position: sticky;

    /* Üstten ne kadar boşluk kalacağını belirler.
           Eğer sitenizin üst kısmında sabit (fixed) bir menü/header varsa,
           bu değeri header yüksekliği kadar (örneğin: 100px) artırmalısınız. */
    top: 30px;

    /* Menünün diğer elemanların altında kalmaması için */
    z-index: 10;

    /* Geçişlerde yumuşaklık sağlaması için */
    transition: top 0.3s ease-in-out;
  }

}

/* ====================================================
   YUMUŞAK (SOFT) VE MODERN KATEGORİ MENÜSÜ
==================================================== */

.kategori-menu {
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.kategori-menu .kategori-icerik {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0px;
  margin-bottom: 10px;
}

/* --- ANA BAŞLIKLAR (SATILIK / KİRALIK) --- */
.kategori-baslik {
  padding: 8px 12px;
  display: flex;
  text-decoration: none;
  color: var(--text-dark);
  border-radius: var(--radius-sm);
  align-items: center;
}

.kategori-baslik:hover {
  color: var(--text-dark);
}

.kategori-baslik:hover {
  background-color: #f0fdf4;
  color: var(--renk1, #26ae61);
}

.kategori-baslik h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.kategori-baslik-ikon {
  font-size: 20px;
  margin-right: 8px;
  color: var(--renk1, #26ae61);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.kategori-baslik-ikon i {
  font-weight: 600;
}

.kategori-baslik:hover .kategori-baslik-ikon {
  transform: scale(1.1);
}

.mt-kiralik {
  margin-top: 25px;
  border-top: 1px dashed #e2e8f0;
  /* Kiralık öncesi ince, zarif, kesik çizgi */
  padding-top: 20px;
}

/* --- GRUPLAR (Konut, İş Yeri vb.) --- */
.kategori-grup {
  margin-top: 0px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 5px;
  padding-bottom: 5px;
}

.kategori-grup:first-child {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: 0px;
}

/* --- ANA LİNKLER (Konut, İş Yeri) --- */
.kategori-ana-link {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  /* İçeriden nefes alma boşluğu */
  text-decoration: none;
  color: var(--text-dark);
  /* Soft gri-siyah */
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-sm);
  /* Hover olduğunda köşeleri ovalleşecek */
  transition: all 0.2s ease;
}

/* HOVER (ÜZERİNE GELİNCE) EFEKTİ - ÇOK SOFT */
.kategori-ana-link:hover {
  background-color: #f0fdf4;
  /* Temanıza uygun çok açık, transparan yeşil */
  color: var(--renk1, #26ae61);
}

/* İkon Ayarları (İçi Boş / Zarif İkonlar) */
.kategori-ana-link i {
  color: var(--renk1);
  /* Pasifken gri kalsın, göz yormasın */
  font-size: 20px;
  /* İçi boş olduğu için biraz daha büyük ve belirgin */
  margin-right: 12px;
  transition: all 0.2s ease;
  font-weight: 500;
}

/* Hover durumunda ikon da yeşil olsun */
.kategori-ana-link:hover i {
  color: var(--renk1, #26ae61);
}

/* --- ALT LİNKLER LİSTESİ (Daire, Villa vb.) --- */
.kategori-alt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kategori-alt-liste li a {
  display: flex;
  align-items: center;
  /* 44px padding-left -> Yukarıdaki ikona göre kusursuz dikey hizalama */
  padding: 1px 12px 1px 44px;
  margin-bottom: 0px;
  text-decoration: none;
  color: #334155;
  /* Soft gri */
  font-size: 13px;
  font-weight: 400;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* ALT LİNK HOVER EFEKTİ */
.kategori-alt-liste li a:hover {
  background-color: #f8fafc;
  /* Çok hafif grimsi beyaz zemin */
  color: var(--renk1, #26ae61);
  font-weight: 500;
}

/* --- SAYILAR (201) --- */
.kategori-sayi {
  font-size: 12px;
  font-weight: 400;
  margin-left: auto;
  transition: color 0.2s ease;
  color: #b6b7b8;
  /* Soft gri */
}

/* Fareyle üzerine gelince sayıların rengi de canlansın */
.kategori-ana-link:hover .kategori-sayi,
.kategori-alt-liste li a:hover .kategori-sayi,
.kategori-alt-liste li a.aktif-link .kategori-sayi {
  color: var(--renk1);
}

/* --- İNCE AYIRICI (Devren kategorisinden önce) --- */
.kategori-cizgi {
  height: 1px;
  background-color: #e2e8f0;
  margin: 15px 10px;
}

/* ====================================================
   İÇ SAYFA KATEGORİ AĞACI (APPLE / SAHİBİNDEN TARZI)
   Bu kodlar sadece iç sayfalarda devreye girer!
==================================================== */

/* Dış Kutu - Ultra Ferah */

.kategori-menu.ic-sayfa-agaci {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px 13px 13px 20px;
}

.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool {
  max-height: 284px;
  overflow-y: auto;
  padding-right: 9px;
}

/* Özel Zarif Scrollbar (Kaydırma Çubuğu) */
.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar {
  width: 6px;
}

.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar-track {
  background: transparent;
}

.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

.kategori-menu.ic-sayfa-agaci
  .kategori-menu-scrool::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* İçerik Kutularını Sıfırla */
.ic-sayfa-agaci .kategori-icerik {
  border: none !important;
  background: transparent !important;
}

.ic-sayfa-agaci .kategori-icerik:last-child {
  margin-bottom: 0px !important;
}

/* ANA BAŞLIKLAR (Satılık, Kiralık vb.) */
.ic-sayfa-agaci .kategori-baslik {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Eğer o ana kategoride isek başlık yeşil olsun */
.ic-sayfa-agaci .kategori-baslik.baslik-aktif h3 {
  color: var(--renk1, #26ae61) !important;
}

/* Tıklanmayan Grupları Gizle (PHP'den gelen class) */
.ic-sayfa-agaci .grup-kapali {
  display: none !important;
}

/* Tıklanan Grupları Göster (PHP'den gelen class) */
.ic-sayfa-agaci .grup-acik {
  display: block !important;
  border: none !important;
  padding: 0 0 0 15px !important;
  /* Birinci Girinti (Konut, İş Yeri) */
}

/* İkonları Gizle */
.ic-sayfa-agaci .kategori-ana-link i {
  display: none !important;
}

/* Ana Link (Örn: Konut yazısı) */
.ic-sayfa-agaci .kategori-ana-link {
  padding: 0px 0 4px 0px !important;
  background: transparent !important;
}

.ic-sayfa-agaci .kategori-ana-link:hover,
.ic-sayfa-agaci .kategori-grup.aktif > .kategori-ana-link {
  color: var(--renk1, #26ae61) !important;
}

/* Alt Liste (Örn: Daire, Villa) */
.ic-sayfa-agaci .kategori-alt-liste {
  display: none;
  padding-left: 15px !important;
  /* İkinci Girinti (Daire, Villa) */
  margin-top: 0px !important;
  margin-bottom: 5px !important;
}

/* Seçili Olan (Aktif) Grubun Alt Menüsünü Aç */
.ic-sayfa-agaci .kategori-grup.aktif .kategori-alt-liste {
  display: block !important;
}

/* Alt Liste Linkleri */
.ic-sayfa-agaci .kategori-alt-liste li a {
  padding: 1px 0 !important;
  background: transparent !important;
}

.ic-sayfa-agaci .kategori-alt-liste li a:hover,
.ic-sayfa-agaci .kategori-alt-liste li a.aktif-link {
  color: var(--renk1, #26ae61) !important;
  font-weight: 600 !important;
}

.ic-sayfa-agaci .kategori-sayi {
  margin-right: 6px !important;
}


/* ====================================================
   İÇ SAYFA KATEGORİ AĞACI (ACCORDION TASARIMI)
   (Sadece iç sayfalarda devreye girer!)
==================================================== */

/* Dış Kutu - Yuvarlak hatlı beyaz kart */
.kategori-menu.ic-sayfa-agaci {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); /* Tasarımdaki gibi yuvarlatılmış köşeler */
  padding: 0px 0;
}

.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 0 15px;
}

/* Özel Zarif Scrollbar */
.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar { width: 6px; }
.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar-track { background: transparent; }
.kategori-menu.ic-sayfa-agaci .kategori-menu-scrool::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }

/* Ana Bloklar */
.ic-sayfa-agaci .kategori-icerik {
  border: none !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important; /* Bloklar arası ince yatay çizgi */
}
.ic-sayfa-agaci .kategori-icerik:last-child {
  border-bottom: none !important;
}

/* ANA BAŞLIKLAR (Satılık, Kiralık) */
.ic-sayfa-agaci .kategori-baslik {
  padding: 10px 0px !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
}

/* Orijinal ikon ve ilan sayılarını gizle (Ekran Görüntüsü Tasarımı) */
.ic-sayfa-agaci .kategori-baslik-ikon,
.ic-sayfa-agaci .kategori-sayi {
}

.ic-sayfa-agaci .kategori-baslik-ikon {
    display: none;
}

/* CSS ile Sol Ok (Chevron) Çizimi ( > şekli) */
.ic-sayfa-agaci .kategori-baslik::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid transparent;  /* Başlangıçta şeffaf (Ok yok gibi görünür) */
  border-bottom: 2px solid transparent; /* Başlangıçta şeffaf */
  transform: rotate(-45deg);
  margin-right: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* SADECE Alt kategorisi olanlarda oku boya ve görünür yap */
.ic-sayfa-agaci .kategori-baslik.has-children::before {
  border-color: var(--text-dark) !important;
}

/* Aktif olan ana başlığın oku aşağı ( v ) baksın */
.ic-sayfa-agaci .kategori-baslik.has-children.baslik-aktif::before {
  transform: rotate(45deg); /* Açıkken aşağı bakar */
}

/* ---------------------------------------------------- */

/* Alt Kategori İçin CSS Küçük Ok (Sağa) */
.ic-sayfa-agaci .kategori-ana-link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 2px solid transparent; /* Başlangıçta şeffaf */
  border-bottom: 2px solid transparent; /* Başlangıçta şeffaf */
  transform: rotate(-45deg); /* Sağa bakar */
  margin-right: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* SADECE Alt kategorisi olanlarda oku boya (Gri renk) */
.ic-sayfa-agaci .kategori-ana-link.has-children::before {
  border-color: #94a3b8 !important;
}

/* Açılmış Alt Kategorinin Oku Kutu Gibi Aşağı Döner (Ekran Görüntüsü 2'deki gibi) */
.ic-sayfa-agaci .kategori-grup.aktif > .kategori-ana-link.has-children::before {
  transform: rotate(45deg); /* Aşağı bakar */
  border-color: var(--text-dark) !important; /* Koyu renk alır */
}

.ic-sayfa-agaci .kategori-baslik h3 {
  color: var(--text-dark) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0;
}

/* ==========================================
   ACCORDION MANTIĞI
   Sadece aktif olan grubun alt kategorilerini gösterir.
   Kiralık'a tıklayınca Satılık otomatik gizlenir.
========================================== */
.ic-sayfa-agaci .kategori-icerik:not(.icerik-aktif) .kategori-grup {
  display: none !important;
}


/* ALT GRUPLAR (Konut, İş Yeri) */
.ic-sayfa-agaci .kategori-grup {
  padding: 0 0 0 25px !important; /* Alt liste girintisi */
  border: none !important;
  margin: 0 !important;
  display: block !important;
}


/* Orijinal Phospor İkonlarını Gizle */
.ic-sayfa-agaci .kategori-ana-link i {
  display: none !important;
}

/* Alt Kategori İçin CSS Küçük Ok (Sağa) */
.ic-sayfa-agaci .kategori-ana-link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 2px solid #94a3b8; /* Normalde gri renkli ok */
  border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg); /* Sağa bakar */
  margin-right: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Açılmış Alt Kategori (Seçili Olan - Örn: Konut) */
.ic-sayfa-agaci .kategori-grup.aktif > .kategori-ana-link {
  color: var(--primary-dark-green, #0a873c) !important; /* Koyu Yeşil ve Kalın Yazı */
  font-weight: 700 !important;
}

/* Açılmış Alt Kategorinin Oku Kutu Gibi Aşağı Döner (Ekran Görüntüsü 2'deki gibi) */
.ic-sayfa-agaci .kategori-grup.aktif > .kategori-ana-link::before {
  transform: rotate(45deg); /* Aşağı bakar */
  border-color: var(--text-dark); /* Koyu renk alır */
}

/* ALT-ALT LİSTELER (Bina, Çiftlik Evi vb.) */
.ic-sayfa-agaci .kategori-alt-liste {
  display: none; /* Varsayılan gizlidir */
  padding-left: 20px !important; /* Konut kelimesine göre hizalanma girintisi */
  margin: 0 0 10px 0 !important;
  list-style: none;
}

/* Yalnızca Açık Olan Grubun Alt Listesini Göster (Konut -> Bina, Daire) */
.ic-sayfa-agaci .kategori-grup.aktif .kategori-alt-liste {
  display: block !important;
}

.icerik-aktif {
    padding-bottom: 10px!important;
}

/* SOl Kategori Son*/

.py-7 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* --- Temel Yapı ve Başlıklar --- */
.ilan-listele {
  position: relative;
}

.ilan-listele .ilan-baslik-alani {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 20px;
}

.ilan-listele .head-title h2.title-baslik {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark, #1e293b);
  margin: 0 0 2px 0;
}

.ilan-listele .head-title p.title-text {
  font-size: 13px;
  color: var(--text-gray, #64748b);
  margin: 0;
  font-weight: 400;
}

/* --- Filtre Alanı --- */
.ilan-listele .ilan-filtre-kapsayici {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.ilan-listele .ilan-filtre-kapsayici::before,
.ilan-listele .ilan-filtre-kapsayici::after {
  content: "";
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ilan-listele .ilan-filtre-kapsayici::before {
  left: 0;
  background: linear-gradient(to right, #f8fafc, transparent);
}

.ilan-listele .ilan-filtre-kapsayici::after {
  right: 0;
  background: linear-gradient(to left, #f8fafc, transparent);
}

.ilan-listele .ilan-filtre-kapsayici.sol-golge::before {
  opacity: 1;
}

.ilan-listele .ilan-filtre-kapsayici.sag-golge::after {
  opacity: 1;
}

.ilan-listele .ilan-filtreler {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
  width: 100%;
}

.ilan-listele .ilan-filtreler::-webkit-scrollbar {
  display: none;
}

.ilan-listele .ilan-filtre-btn {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-dark, #1e293b);
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ilan-listele .ilan-filtre-btn:hover,
.ilan-listele .ilan-filtre-btn.aktif {
  background: var(--active-item-bg, #f1f5f9);
  border-color: var(--renk1, #3b82f6);
  color: var(--renk1, #3b82f6);
}

.ilan-listele .filtre-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-tam, 50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--text-dark, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.ilan-listele .filtre-ok:hover {
  background: var(--renk1, #3b82f6);
  color: #ffffff;
  border-color: var(--renk1, #3b82f6);
  transform: translateY(-50%) scale(1.1);
}

.ilan-listele .filtre-ok.goster {
  opacity: 1;
  visibility: visible;
}

.ilan-listele .filtre-ok-sol {
  left: 0;
}

.ilan-listele .filtre-ok-sag {
  right: 0;
}

.search-ilan .search-ilan-kart.dopingli a.search-ilan-detay-alani:hover,
.search-ilan .search-ilan-kart.dopingli a.search-ilan-sag-panel:hover {
  color: #92400e !important;
}

.ilanlar-gosterim {
  background: #fff;
  border: solid 1px var(--border-color);
  padding: 15px;
  border-radius: var(--radius-sm);
}

.head-title .title-baslik {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 25px;
  margin-bottom: 7px;
}

.head-title .title-text {
  color: var(--text-gray);
  font-size: 14px;
  margin-bottom: 0;
  font-weight: 400;
}

.btn-genel-tumu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--renk1);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--renk1);
  background: transparent;
  transition: all 0.3s ease;
}

.btn-genel-tumu:hover {
  background: var(--renk1);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(38, 174, 97, 0.2);
}

/**/
/* ====================================================
   SOL FİLTRE MODÜLÜ - TÜM STİLLER (.sol-filtre SCOPE)
==================================================== */

/* Arka Plan Kilit Sınıfı */
body.sf-scroll-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* Ana Kapsayıcı */
.sol-filtre {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  margin-top: 12px;
}

/* Kart Modülleri */
.sol-filtre .sf-kart {
  background: #ffffff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-sm, 16px);
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* Lokasyon Alanı */
.sol-filtre .sf-lokasyon-grup {
  margin-top: 14px;
}

.sol-filtre .sf-lokasyon-grup:first-child {
  margin-top: 0;
}

.sol-filtre .sf-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sol-filtre .sf-label-row label {
  font-weight: 700;
  color: var(--text-dark, #231f20);
  margin: 0;
}

/* Filtre Kart Üst Başlık & Tümünü Temizle */
.sol-filtre .sf-header-kart {
  padding: 12px 14px;
  margin-bottom: 12px;
}

.sol-filtre .sf-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sol-filtre .sf-main-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #231f20);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sol-filtre .sf-btn-tumunu-temizle {
  font-size: 12px;
  font-weight: 700;
  color: var(--renk1, #26ae61);
  background: #f0fdf4;
  border: 1px solid rgba(38, 174, 97, 0.25);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sol-filtre .sf-btn-tumunu-temizle:hover {
  background: var(--renk1, #26ae61);
  color: #ffffff;
}

/* Yeşil Temizle Butonu */
.sol-filtre .sf-btn-temizle {
  font-size: 12px;
  font-weight: 700;
  color: var(--renk1, #26ae61);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  display: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.sol-filtre .sf-btn-temizle:hover {
  text-decoration: underline;
  background-color: #f0fdf4;
}

.sol-filtre .sf-acc-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sol-filtre .sf-acc-count-badge {
  background: var(--renk1, #26ae61);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* ====================================================
   KONUM ALMA BUTONU VE YÜKLENİYOR İKONU
==================================================== */

/* Yükleniyor İkonu Dönme Animasyonu */
@keyframes sfSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.sf-konum-btn .spinner {
  animation: sfSpin 1s linear infinite;
  color: var(--renk1, #26ae61);
}

/* Konum Başarıyla Alındığında Buton Stili */
.sf-konum-btn.is-success {
  background-color: #f0fdf4 !important;
  border-color: var(--renk1, #26ae61) !important;
  color: var(--renk1, #26ae61) !important;
  font-weight: 700 !important;
}

.sf-konum-btn.is-success i {
  color: var(--renk1, #26ae61) !important;
}

/* İnput / Buton Kutusu */
.sol-filtre .sf-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-sm, 10px);
  padding: 10px 14px;
  color: var(--text-dark, #231f20);
  cursor: pointer;
  transition: border-color 0.2s ease;
  outline: none;
}

.sol-filtre .sf-select-btn:hover {
  border-color: var(--renk1, #26ae61);
}

.sol-filtre .sf-select-btn span {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-filtre .sf-select-btn i {
  font-size: 14px;
  color: var(--text-gray, #6b7280);
}

/* Akordeon Yapısı */
.sol-filtre .sf-acc-item {
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
}

.sol-filtre .sf-acc-item:last-child {
  border-bottom: none;
}

.sol-filtre .sf-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--text-dark, #231f20);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
}

.sol-filtre .sf-acc-item.is-open .sf-acc-header {
  background-color: #f0fdf4;
}

.sol-filtre .sf-acc-item.is-open .sf-acc-header i {
  transform: rotate(180deg);
  color: var(--renk1, #26ae61);
}

.sol-filtre .sf-acc-body {
  display: none;
  padding: 12px 8px 16px 8px;
  background: #ffffff;
}

.sol-filtre .sf-acc-item.is-open .sf-acc-body {
  display: block;
}

/* Checkbox (Boş Başlar, Tıklanınca Seçilir) */
.sol-filtre .sf-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sol-filtre .sf-checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: var(--text-dark, #231f20);
}

.sol-filtre .sf-checkbox-item input {
  display: none !important;
}

.sol-filtre .sf-custom-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sol-filtre .sf-custom-check i {
  font-size: 12px;
  color: #ffffff;
  opacity: 0 !important;
  /* Başlangıçta gizli */
  transform: scale(0.4);
  transition: all 0.15s ease-in-out;
}

.sol-filtre .sf-checkbox-item:hover .sf-custom-check {
  border-color: var(--renk1, #26ae61);
}

.sol-filtre .sf-checkbox-item input:checked + .sf-custom-check {
  background-color: var(--renk1, #26ae61);
  border-color: var(--renk1, #26ae61);
}

.sol-filtre .sf-checkbox-item input:checked + .sf-custom-check i {
  opacity: 1 !important;
  transform: scale(1);
}

.sol-filtre .sf-show-more-btn {
  background: transparent;
  border: none;
  color: var(--renk1, #26ae61);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0 0 0;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sol-filtre .sf-more-items {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.sol-filtre .sf-more-items.is-expanded {
  display: flex;
}

.sol-filtre .sf-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
  border: 1px solid #c7d2fe;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  margin-left: 6px;
}

.sol-filtre .sf-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sol-filtre .sf-range-inputs input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  outline: none;
}

/* Fiyat Çift Yönlü Slider Stil */
.sol-filtre .sf-price-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.sol-filtre .sf-price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray, #64748b);
}

.sol-filtre .sf-dual-slider {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.sol-filtre .sf-slider-track-bg {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e2e8f0;
  border-radius: 4px;
  z-index: 1;
}

.sol-filtre .sf-slider-track-fill {
  position: absolute;
  height: 4px;
  background-color: var(--renk1, #26ae61);
  border-radius: 4px;
  z-index: 2;
}

.sol-filtre .sf-dual-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 4px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
  margin: 0;
  outline: none;
}

.sol-filtre .sf-dual-slider input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--renk1, #26ae61);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  transition: transform 0.15s ease;
}

.sol-filtre .sf-price-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sol-filtre .sf-price-inputs input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-sm, 10px);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dark, #231f20);
  outline: none;
}

.sol-filtre .sf-price-inputs .dash {
  color: var(--text-gray, #94a3b8);
  font-weight: 600;
}

/* ====================================================
   POPUP MODAL (BLURSUZ, DÜZ SİYAH SAYDAM ARKA PLAN)
==================================================== */

.sol-filtre-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 999999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.sol-filtre-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sol-filtre-popup-card {
  background: #ffffff;
  width: 300px;
  border-radius: var(--radius-sm, 12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #e5e7eb);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 480px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease !important;
}

.sol-filtre-popup-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  position: relative;
}

.sf-popup-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sf-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  text-align: center;
  display: block;
}

.sf-popup-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sf-popup-search-row .input-box,
.sf-search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--renk1, #26ae61);
  border-radius: 8px;
  padding: 7px 12px;
  gap: 8px;
}

.sf-popup-search-row input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  background: transparent;
}

.sol-filtre-popup-close,
.sf-popup-close {
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-gray, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sol-filtre-popup-close:hover,
.sf-popup-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.sol-filtre-popup-list,
.sol-filtre-popup-body {
  padding: 8px;
  overflow-y: auto;
  max-height: 340px;
  flex: 1;
}

.sol-filtre-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text-dark, #1e293b);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.sol-filtre-popup-item:hover {
  background: var(--bg-light, #f8fafc);
}

.sol-filtre-popup-item.is-selected {
  background-color: #f0fdf4 !important;
  color: var(--renk1, #26ae61) !important;
  font-weight: 700;
}

/* Mahalle Çoklu Seçim (Checkbox) Özel Stilleri */
.sf-checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-checkbox-custom {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sol-filtre-popup-item.is-checked .sf-checkbox-custom {
  background: var(--renk1, #26ae61);
  border-color: var(--renk1, #26ae61);
  color: #ffffff;
}

.sf-checkbox-custom i {
  font-size: 12px;
  display: none;
}

.sol-filtre-popup-item.is-checked .sf-checkbox-custom i {
  display: block;
}

/* Tümünü Seç / Temizle Başlık Satırı */
.sf-tumunu-sec-row {
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 6px;
  padding-bottom: 8px;
  font-weight: 600;
}

/* Alt Aksiyon Çubuğu */
.sf-popup-footer {
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.sf-btn-apply {
  width: 100%;
  padding: 11px 16px;
  background-color: var(--renk1, #26ae61);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sf-btn-apply:hover {
  background-color: var(--primary-dark-green, #1e8e4f);
}

/* MOBİLDE EKRAINI %100 KAPLAYAN FULL-SCREEN POPUP */
@media (max-width: 768px) {
  .sol-filtre-popup-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .sol-filtre-popup-card {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1000000 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .sol-filtre-popup-header {
    padding: 14px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .sf-popup-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .sf-popup-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    display: block !important;
  }

  .sf-popup-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sol-filtre-popup-list,
  .sol-filtre-popup-body {
    flex: 1 !important;
    max-height: none !important;
    padding: 12px 16px !important;
  }

  .sf-popup-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--border-color, #e5e7eb) !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.06) !important;
    /* Telefon alt çizgisine göre otomatik boşluk */
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px !important;
  }

  .sol-filtre-popup-item {
    padding: 13px 14px !important;
    font-size: 14.5px !important;
    border-bottom: 1px solid #f1f5f9;
  }

  .sol-filtre-popup-item:last-child {
    border-bottom: none;
  }
}

/* Scroll ile alt sınırda yapışan, en sona gelince normal yerine oturan kapsayıcı */
.sol-filtre .sf-submit-wrapper {
  position: -webkit-sticky;
  position: sticky;
  bottom: 10px;
  /* Ekranın altından 20px yukarıda yapışır */
  z-index: 20;
  padding-top: 0px;
  margin-top: 0px;
  display: flex;
  gap: 5px;
}

/* Buton Tasarımı */
.sol-filtre .sf-btn-ara {
  width: 100%;
  background-color: var(--renk1, #26ae61);
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-sm, 10px);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(38, 174, 97, 0.35);
  /* Hafif yeşil gölge */
  transition: all 0.2s ease;
}

.sol-filtre .sf-btn-ara i {
  font-weight: 600;
}

.sol-filtre .sf-btn-ara:hover {
  background-color: var(--primary-dark-green, #0a873c);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(38, 174, 97, 0.45);
}

.sol-filtre .sf-btn-ara:active {
  transform: translateY(0);
}

/* ====================================================
   İLAN LİSTELEME MODÜLÜ (.search-ilan) - SOFT MODERN
==================================================== */

.search-ilan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}

.search-data {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-data i {
  font-weight: 600;
  color: var(--renk1);
}

.search-data strong {
  color: var(--renk1);
  font-weight: 600;
}

/* SONUÇ BULUNAMADI - BENZER İLAN BİLDİRİMİ */
.benzer-ilan-bildirim {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #eef6ee, #f9fbf9);
  border: 1px solid var(--renk1);
  border-radius: var(--radius-sm, 14px);
  padding: 18px 20px;
  margin-bottom: 6px;
}

.benzer-ilan-bildirim-ikon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--renk1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.benzer-ilan-bildirim-metin h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.benzer-ilan-bildirim-metin p {
  font-size: 14px;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.5;
}

.benzer-ilan-baslik {
  margin-top: 14px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
}

/* GENEL KART YAPISI (SOFT YUVARLATILMIŞ KÖŞELER VE İNCE BORDER) */
.search-ilan .search-ilan-kart {
  background-color: #ffffff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-sm, 14px);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  position: relative;
}

.search-ilan .search-ilan-kart:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

/* ----------------------------------------------------
   SOFT DOPİNGLİ / VIP İLAN TASARIMI
---------------------------------------------------- */
.search-ilan .search-ilan-kart.dopingli {
  background: linear-gradient(135deg, #fffdf7 0%, #ffffff 100%);
  border: 1px solid #fde68a;
  /* Soft krem/altın kenarlık */
}

.search-ilan .search-ilan-kart.dopingli:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.08);
}

.search-ilan .search-ilan-kart.dopingli .search-ilan-baslik a {
  color: #92400e;
}

.search-ilan .search-ilan-kart.dopingli:hover .search-ilan-baslik a {
  color: #d97706;
}

.search-ilan .search-ilan-kart.dopingli .search-ilan-fiyat {
  color: #b45309;
}

.search-ilan .search-ilan-kart.dopingli .search-ilan-meta-bar {
  color: rgba(138, 70, 30, 0.752);
}

.search-ilan .ilan-doping-etiket {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 800;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* 1. SOL GÖRSEL ALANI */
.search-ilan .search-ilan-gorsel-alani {
  position: relative;
  width: 190px;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 140px;
}

.search-ilan .search-ilan-gorsel-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.search-ilan .search-ilan-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.search-ilan .search-ilan-kart:hover .search-ilan-img {
  transform: scale(1.05);
}

/* Favori Butonu */
.search-ilan .ilan-favori-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--text-gray, #64748b);
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.search-ilan .ilan-favori-btn:hover {
  transform: scale(1.1);
  color: var(--danger-red, #ef4444);
}

.search-ilan .ilan-favori-btn.aktif,
.favori-ekle-js.aktif {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.search-ilan .ilan-favori-btn.aktif i,
.favori-ekle-js.aktif i {
  color: #ef4444 !important;
}

/* 2. ORTA DETAY ALANI */
.search-ilan .search-ilan-detay-alani {
  flex: 1;
  padding: 11px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Üst Meta Bandı (İlan No & Tarih) */
.search-ilan .search-ilan-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 6px;
}

.search-ilan .search-ilan-meta-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-ilan .search-ilan-baslik {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Maksimum 2 satır */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.search-ilan .search-ilan-baslik a {
  color: var(--text-dark, #1e293b);
  text-decoration: none;
  transition: color 0.2s;
}

.search-ilan .search-ilan-baslik a:hover {
  color: var(--renk1, #26ae61);
}

/* ÖZELLİKLER (NOKTASIZ - SOFT PILL BADGE TASARIMI) */
.search-ilan .search-ilan-ozellikler {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.search-ilan .ozellik-pill {
      display: inline-flex;
    align-items: center;
    gap: 5px;
    border: solid 1px;
    border-color: #26ae6133;
    color: var(--primary-dark-green);
    background: #f5faf7c2;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.search-ilan .ozellik-pill i {
  color: var(--renk1, #26ae61);
  font-size: 14px;
}

/* Dopingli Kartta Pill Renkleri */
.search-ilan .search-ilan-kart.dopingli .ozellik-pill {
  background-color: #fffdf5;
  border-color: #fef08a;
  color: #92400e;
}

.search-ilan .search-ilan-kart.dopingli .ozellik-pill i {
  color: #d97706;
}

.search-ilan .search-ilan-fiyat {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark, #26ae61);
  line-height: 1;
}

/* 3. EN SAĞ PANEL (SOFT & EŞSİZ ADRES KARTI) */
.search-ilan .search-ilan-sag-panel {
  width: 200px;
  flex-shrink: 0;
  padding: 14px;
  border-left: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfcfd;
}

.search-ilan .search-ilan-kart.dopingli .search-ilan-sag-panel {
  background-color: #fffdf5;
  border-left-color: #fef08a;
}

/* Adres Kartı Kutusu */
.search-ilan .search-ilan-adres-kutu {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.search-ilan .adres-pin-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e6f4ea;
  color: var(--renk1, #26ae61);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.search-ilan .search-ilan-kart.dopingli .adres-pin-icon {
  color: #d97706;
  background: #fff4e6;
}

.search-ilan .search-ilan-kart.dopingli .mahalle-badge {
  color: #d97706;
  background: #fff4e6;
}

.search-ilan .search-ilan-kart.dopingli .search-ilan-adres-kutu {
  border-color: #fef08a;
}

.search-ilan .adres-detay-metin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.search-ilan .adres-detay-metin strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark, #1e293b);
  line-height: 1.2;
}

.search-ilan .mahalle-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-gray, #64748b);
  background-color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 2px;
}

/* Grid modunda Kart Yapısı (Dikey Dizilim) */
.search-ilan.view-grid .search-ilan-kart {
  flex-direction: column;
  height: 100%;
}

.search-ilan.view-grid .search-ilan-gorsel-alani {
  width: 100%;
  height: 170px;
  /* 4'lü yapıda ideal resim yüksekliği */
}

.search-ilan.view-grid .search-ilan-detay-alani {
  padding: 12px;
  flex: 1;
  /* İçeriğin yukarı yaslanması ve alt paneli aşağı itmesi için */
}

.search-ilan-detay-alani,
.search-ilan-sag-panel {
  text-decoration: none !important;
  color: inherit;
}

a.search-ilan-detay-alani:hover,
a.search-ilan-sag-panel:hover {
  color: var(--renk1);
}

/* Başlık iki satırda kesilir */
.search-ilan.view-grid .search-ilan-baslik {
  font-size: 13px;
  min-height: 35px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.search-ilan.view-grid .search-ilan-meta-bar {
  font-size: 10px;
  margin-bottom: 8px;
}

/* --- KARE GÖRÜNÜMDE SADECE İLK 2 ÖZELLİĞİ GÖSTER (3+1 ve M2) --- */
.search-ilan.view-grid .search-ilan-ozellikler {
  margin-bottom: 10px;
  gap: 4px;
}

/* 3. ve sonrasındaki pill (hap) özellikleri gizle */
.search-ilan.view-grid .ozellik-pill:nth-child(n + 3) {
  display: none !important;
}

.search-ilan.view-grid .ozellik-pill {
  font-size: 10px;
  padding: 2px 6px;
}

.search-ilan.view-grid .search-ilan-fiyat {
  font-size: 18px;
}

/* Grid Modunda Sağ Panel (Adres Kutusu) En Alt Kısma Yerleşir */
.search-ilan.view-grid .search-ilan-sag-panel {
  width: 100%;
  border-left: none;
  border-top: 1px solid #f1f5f9;
  padding: 4px 12px;
  background-color: #fcfcfd;
}

.search-ilan.view-grid .search-ilan-adres-kutu {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 4px 0;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 6px;
}

.search-ilan.view-grid .adres-pin-icon {
  width: auto;
  height: auto;
  font-size: 12px;
  background: transparent;
}

/* Grid Modunda Sağ Panel (Adres Kutusu) */
.search-ilan.view-grid .adres-detay-metin {
  text-align: left;
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-direction: row;
  gap: 5px;
}

/* Sadece Galeri (Grid) Modunda Şehir İsmini Gizle */

.search-ilan.view-grid .adres-detay-metin strong,
.search-ilan.view-grid .mahalle-badge {
  font-size: 11.5px;
  /* Dar alanda fontu biraz küçültüyoruz */
  font-weight: 500;
  color: var(--text-dark);
}

.search-ilan.view-grid .mahalle-badge {
  display: none;
}

.search-ilan.view-grid .mahalle-badge {
  background: transparent;
  border-radius: 0px;
  padding: 0;
  margin-top: 0px;
}

/* anasayfa ilanlar vitrin */

@media (min-width: 1200px) {

    .kategori-baslik-ikon {
display: none;
}

  /* Ana kapsayıcıyı 4 kolonlu grid düzenine alır */
  .search-ilan.home-ilan {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    gap: 20px;
    /* Kartlar arasındaki boşluk ayarı */
  }

  /* YAPSAL EKLEME: Kartın yatay satır yerine dikey (grid) formda çalışmasını sağlar */
  .search-ilan.home-ilan .search-ilan-kart {
    flex-direction: column;
    height: 100%;
    position: relative;
  }

  /* YAPISAL EKLEME: Detay alanının görselin altında düzgünce esnemesini sağlar */
  .search-ilan.home-ilan .search-ilan-detay-alani {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }

  /* ====================================================
     SİZİN ÖZEL İNCE AYARLARINIZ (AYNEN KORUNDU)
     ==================================================== */
  .search-ilan.home-ilan .search-ilan-ozellikler,
  .search-ilan.home-ilan .search-ilan-meta-bar {
    display: none;
  }

  .search-ilan.home-ilan .search-ilan-gorsel-alani {
    width: 100%;
    height: 140px;
  }

  /* Görselin sol-alt köşesinde yüzen adres rozeti tasarımınız */
  .search-ilan.home-ilan .search-ilan-sag-panel {
    position: absolute;
    top: 115px;
    width: auto;
    left: 10px;
    border-radius: var(--radius-sm);
    padding: 4px 4px;
    border: none;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 5;
  }

  .search-ilan.home-ilan .adres-pin-icon {
    margin-top: 1px;
  }

  .search-ilan.home-ilan .search-ilan-adres-kutu {
    padding: 0px;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 4px;
    flex-direction: row;
  }

  .search-ilan.home-ilan .mahalle-badge {
    display: none;
  }

  .search-ilan.home-ilan .search-ilan-baslik {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
  }

  .search-ilan.home-ilan .search-ilan-fiyat {
    font-size: 14px;
    color: var(--renk1);
  }

  .search-ilan.home-ilan .adres-detay-metin strong {
    font-size: 10.5px;
    line-height: 1;
  }

  .search-ilan.home-ilan .adres-pin-icon {
    width: auto;
    height: auto;
    font-size: 10px;
    background: transparent !important;
  }

  .search-ilan.home-ilan
    .search-ilan-kart.dopingli
    .search-ilan-adres-kutu
    strong {
    color: #92400e;
  }

  .search-ilan.home-ilan .ilan-doping-etiket {
    font-size: 9.5px;
  }

  .search-ilan.home-ilan .search-ilan-fiyat-satir {
    line-height: 1;
  }
}

/* ====================================================
   ÜST BAR VE GÖRÜNÜM DEĞİŞTİRİCİ (VIEW TOGGLES)
==================================================== */

.search-ilan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 12px;
}

.view-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid #e2e8f0;
}

.view-toggles .v-btn {
  border: none;
  background: transparent;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-toggles .v-btn:hover {
  color: var(--text-dark, #1e293b);
}

.view-toggles .v-btn.active {
  background-color: #ffffff;
  color: var(--renk1, #26ae61);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/**/

/* ====================================================
   EKRAN GÖRÜNTÜSÜNDEKİ BİREBİR KART STİLLERİ (FAVORİ-KART)
   ==================================================== */
.search-ilan-kart.favori-kart {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: none;
  /* Arama sayfasındaki kutu çerçevesini sıfırlar */
  border: 1px solid var(--border-color);
  box-shadow: none;
  /* Kutu gölgeleri sıfırlanır */
  padding: 0;
  transition:
    background-color 0.25s ease,
    opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.search-ilan-kart.favori-kart:hover {
  background-color: var(--bg-light);
  transform: none;
  /* Sıçramayı önler */
  box-shadow: none;
}

/* Sol Resim Alanı */
.search-ilan-kart.favori-kart .search-ilan-gorsel-alani {
  position: relative;
  width: 150px;
}

.search-ilan-kart.favori-kart .search-ilan-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.search-ilan-kart.favori-kart:hover .search-ilan-img {
  transform: scale(1.04);
}

/* Satılık / Kiralık Rozetleri */
.fav-item-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.fav-item-badge.satilik {
  background-color: var(--renk1);
}

.fav-item-badge.kiralik {
  background-color: var(--brand-dark-green);
}

/* Orta Detay Alanı */
.search-ilan-kart.favori-kart .search-ilan-detay-alani {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.search-ilan-kart.favori-kart .search-ilan-baslik {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-ilan-kart.favori-kart .search-ilan-baslik:hover {
  color: var(--renk1);
}

/* Özellik Hapları (Specs) */
.search-ilan-kart.favori-kart .search-ilan-ozellikler {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  margin-top: 25px;
  margin-bottom: 10px;
}

/* Alt Bölüm (Konum & Fiyat) */
.fav-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fav-item-loc {
  font-size: 11px;
  color: var(--text-gray);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fav-item-loc i {
  color: #94a3b8;
}

.fav-item-price-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-ilan-kart.favori-kart .search-ilan-fiyat {
  font-size: 15px;
  font-weight: 800;
  color: var(--renk1);
}

/* Fiyatı Düşen İlan Rozeti */
.fav-price-drop-badge {
  background: #fff4e6;
  color: #d97706;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 9;
}

/* Sağ Hızlı İşlem Paneli */
.fav-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid var(--border-light);
  padding: 0 15px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-fav-item-view:hover {
  background: var(--soft-green-bg);
  color: var(--renk1);
  border-color: rgba(38, 174, 97, 0.2);
}

.btn-fav-item-delete,
.btn-fav-item-view {
  gap: 6px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.btn-fav-item-delete {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: var(--danger-red);
  border: 1px solid rgba(239, 68, 68, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-fav-item-delete:hover {
  background: var(--danger-red);
  color: #ffffff;
  border-color: var(--danger-red);
}

/* Boş Durum (Empty State) */
.fav-page-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.fav-page-empty-icon {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.fav-page-empty h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px 0;
}

.fav-page-empty p {
  font-size: 13px;
  color: var(--text-gray);
  margin: 0;
}

/* --- FOOTER ANA YAPI (Premium Grid) --- */
.footer-emlak {
  background-color: #ffffff;
  font-family: inherit;
  border-top: 1px solid var(--border-color);
}

.footer-emlak .footer-logo-wrapper  {
    text-align: center;
}

.footer-emlak .footer-logo-wrapper img {
  height: 38px;
}

.footer-emlak .footer-logo-text {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 1.8rem;
  margin: 0;
}

.footer-emlak .footer-logo-text span {
  color: var(--renk1, #26ae61);
}

.footer-emlak .footer-slogan {
  font-size: 14px;
  color: var(--text-gray, #6b7280);
  margin-top: 4px;
  text-align: center;
}

.footer-emlak .micro-title {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  text-align: center;
}

/* --- YAN YANA APP BUTONLARI (Daha Kompakt) --- */
.footer-emlak .app-btn-soft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm, 12px);
  padding:10px 10px 8px 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-emlak .app-btn-soft:hover {
  background-color: #fff;
  border-color: var(--renk1, #26ae61);
  box-shadow: 0 4px 12px rgba(38, 174, 97, 0.08);
}

.footer-emlak .app-btn-soft .app-icon {
  font-size: 1.5rem;
  color: var(--text-dark);
  transition: color 0.3s;
}

.footer-emlak .app-btn-soft:hover .app-icon {
  color: var(--renk1, #26ae61);
}

.footer-emlak .app-btn-text {
  display: flex;
  flex-direction: column;
}

.footer-emlak .app-btn-text strong {
  font-size:13px;
  /* Yan yana sığması için font bir tık küçültüldü */
  color: var(--text-dark);
  line-height: 1.1;
}

.footer-emlak .app-btn-text span {
  font-size: 0.65rem;
  color: var(--text-gray, #6b7280);
}

/* Powered By Modülü */
.footer-emlak .powered-by-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm, 12px);
  padding: 13px;
  text-align: center;
}

.footer-emlak .btn-kurumsal-giris {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #1e293b;
  color: #fff;
  border-radius: var(--radius-sm, 8px);
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.footer-emlak .btn-kurumsal-giris:hover {
  background-color: #0f172a;
  color: #fff;
}

.footer-emlak .btn-kurumsal-giris i {
  color: #facc15;
}

/* --- SAĞ SÜTUN MÖNÜLER --- */
.footer-emlak .menu-baslik {
  font-size: 14px;
  font-weight: 700;
  color: var(--renk1, #235c33);
  margin-bottom: 15px;
}

.footer-emlak .menu-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-emlak .menu-liste li {
  margin-bottom: 6px;
}

.footer-emlak .menu-liste a {
  color: var(--text-gray, #6b7280);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-emlak .menu-liste a:hover {
  color: var(--renk1, #26ae61);
}

/* --- YATAY BİLGİ KUTUSU (Estetik Dokunuşlar) --- */
.footer-emlak .footer-info-box {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm, 16px);
  padding: 20px;
}




/* Sütunlar arasına masaüstünde kesik dikey çizgi (divider) ekler */
@media (min-width: 768px) {
  .footer-emlak .info-row-divider .info-col:not(:last-child) {
    border-right: 1px dashed #cbd5e1;
  }

  .footer-emlak .info-row-divider .info-col:nth-child(2) {
    padding-left: 30px;
  }

  .footer-emlak .info-row-divider .info-col:nth-child(3) {
    padding-left: 30px;
  }
}

.footer-emlak .info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

.footer-emlak .info-label i {
  font-size: 1rem;
  color: var(--renk1, #26ae61);
  /* İkonlara marka rengi verildi */
}

.footer-emlak .info-phone {
  font-size: 24px;
  font-weight: 700;
  color: var(--renk1);
  text-decoration: none;
  letter-spacing: 0;
  display: inline-block;
  margin-top: 5px;
}

.footer-emlak .info-phone:hover {
  color: var(--renk1, #26ae61);
}

.footer-emlak .info-val-text:hover {
  color: var(--renk1, #26ae61) !important;
}

.footer-emlak .info-text {
  font-size: 0.85rem;
  color: var(--text-gray, #6b7280);
  line-height: 1.6;
  margin: 0;
}

.footer-emlak .info-text strong {
  color: #475569;
}

/* --- EN ALT BAR --- */
.footer-emlak .disclaimer-text {
  font-size: 0.8rem;
  line-height: 1.6;
}

.footer-emlak .copyright-text {
  font-size: 0.85rem;
}


/* ====================================================
   FOOTER - SOSYAL MEDYA (ZARİF & YAN YANA)
==================================================== */
.footer-social-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px; /* Bulunduğu yere göre boşluğu ayarlayabilirsiniz */
    justify-content: center;
}

.social-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark, #1e293b);
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray, #64748b);
    font-size: 22px; /* İkon boyutu */
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover (Üzerine gelme) - Sadece renk değişir ve çok hafif yukarı kalkar */
.social-link:hover {
    transform: translateY(-2px);
}

/* Sadece ikon rengi değişir, arka plan falan olmaz (Kibar Görünüm) */
.social-link.instagram:hover {
    color: #E1306C; /* Instagram Pembesi */
}

.social-link.facebook:hover {
    color: #1877F2; /* Facebook Mavisi */
}

/* Mobil Görünümde Ortalama (İsteğe bağlı) */
@media (max-width: 768px) {
    .footer-social-inline {
        justify-content: center;
    }
}

/* ==========================================================================
   MOBİL TASARIM & RESPONSIVE EKRAN AYARLARI (SAYFA SONU)
   (App Görünümü, Bottom Navigasyon, Kategori Modalı ve Breakpoint'ler)
   ========================================================================== */

/* 1. MOBİL AKILLI KATEGORİ OVERLAY */
.mobile-cat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--bg-page);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}

.mobile-cat-overlay.is-active {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.mobile-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 15px 10px 15px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  min-height: calc(60px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.mobile-cat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  flex-grow: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-cat-back,
.mobile-cat-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--text-dark);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.mobile-cat-body {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  background: #ffffff;
}

.mobile-cat-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.25s ease;
  will-change: transform, opacity;
  -webkit-overflow-scrolling: touch;
}

.panel-next {
  transform: translate3d(100%, 0, 0);
}

.panel-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.panel-prev {
  transform: translate3d(-30%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.m-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-cat-item {
  border-bottom: 1px solid var(--border-light);
}

.m-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  text-align: left;
}

.m-cat-btn:active {
  background: var(--active-item-bg);
}

.m-cat-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
}

.m-cat-badge {
  background: var(--bg-page);
  color: var(--text-gray);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

/* 2. MOBİL BOTTOM NAVİGASYON (Safe Area & Notch Korumalı) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1020;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  height: calc(65px + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  gap: 4px;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
  cursor: pointer;
}

.mobile-bottom-nav .nav-item i {
  font-size: 24px;
  transition: transform 0.2s;
}

.mobile-bottom-nav .nav-item:active i {
  transform: scale(0.9);
}

.mobile-bottom-nav .nav-item.center-btn {
  position: relative;
}

.mobile-bottom-nav .center-btn-inner {
  background: linear-gradient(135deg, var(--renk1) 0%, #0a873c 100%);
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: absolute;
  top: -32px;
  box-shadow: 0 8px 20px rgba(38, 174, 97, 0.35);
  border: 3px solid #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav .nav-item.center-btn:active .center-btn-inner {
  transform: scale(0.92) translateY(2px);
}

.mobile-bottom-nav .nav-item.center-btn span {
  margin-top: 30px;
  color: var(--renk1);
}

/* 3. BOTTOM SHEET MENÜLERİ (Safe Area Korumalı) */
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  touch-action: none;
}

.bottom-sheet-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.bottom-sheet-overlay.is-active .bottom-sheet-container {
  transform: translate3d(0, 0, 0);
}

.bottom-sheet-drag-handle {
  width: 45px;
  height: 5px;
  background: #d1d5db;
  border-radius: 10px;
  margin: 12px auto 5px auto;
}

.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px 15px 24px;
  border-bottom: 1px solid var(--border-light);
}

.bottom-sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.bottom-sheet-close {
  background: #f3f4f6;
  border: none;
  font-size: 20px;
  color: var(--text-dark);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Mobil Arama Kutusu (Bottom Sheet İçi) */
.mobil-alani-arama {
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 6px 6px 16px;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.mobil-alani-arama:focus-within {
  border-color: var(--renk1);
  background-color: #ffffff;
}

.mobil-alani-arama input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-dark);
  width: 100%;
}

.mobil-alani-arama input::placeholder {
  color: #9ca3af;
}

.mobil-alani-btn-ara {
  flex-shrink: 0;
  background-color: var(--renk1);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.mobil-alani-btn-ara:active {
  transform: scale(0.92);
  background-color: var(--primary-dark-green);
}

.bottom-sheet-content {
  padding: 5px 24px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.bs-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
}

.bs-menu-item:last-child {
  border-bottom: none;
}

.bs-icon {
  font-size: 24px;
  color: var(--text-gray);
  width: 44px;
  height: 44px;
  background: var(--bg-page);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.bs-text {
  display: flex;
  flex-direction: column;
}

.bs-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.bs-text span {
  font-size: 12px;
  color: var(--text-gray);
  margin-top: 2px;
}

/* Hesabım Profil Tasarımı */
.bs-profile-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.bs-profile-phone {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 6px 0;
}

.bs-profile-badge {
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bs-profile-menu {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.bs-profile-menu a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bs-profile-menu a i {
  font-size: 22px;
  color: #475569;
}

.bs-profile-logout {
  padding: 10px 0 20px 0;
}

.bs-profile-logout a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  color: var(--danger-red);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.bs-profile-logout a i {
  font-size: 22px;
  color: var(--danger-red);
}

.auth-user-view-bs {
  display: none;
}

.auth-guest-view-bs {
  display: block;
}

body.is-logged-in .auth-guest-view-bs {
  display: none !important;
}

body.is-logged-in .auth-user-view-bs {
  display: block !important;
}

body.bottom-sheet-open {
  overflow: hidden;
}

/* Masaüstü görünümde (1200px ve üzeri) mobil menülerin gizlenmesi */
@media (min-width: 1200px) {
  .blog-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    transform: none !important;
  }

  .blog-swiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }

  .mobile-bottom-nav,
  .bottom-sheet-overlay,
  .mobile-cat-overlay {
    display: none !important;
  }
}

/* TABLET (iPad Yatay dahil) VE ALTI İÇİN ORTAK APP GÖRÜNÜMÜ (max-width: 1199px) */
@media (max-width: 1199px) {


  .active-filters-scroll {
    display: block;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .blog-swiper .swiper-slide {
    height: auto;
    /* Kartların yüksekliğinin esnek olması için */
  }

  .blog-swiper .blog-card {
    flex-direction: column;
    height: 100%;
    /* Tüm kartların eşit boyda olması için */
  }

  .blog-swiper .blog-image {
    width: 100%;
    flex: none;
  }

  .blog-swiper .blog-image img {
    aspect-ratio: 16 / 9;
  }

  /* Container'ları %100 genişlik yaparak ekranı tam kullanalım (Kenarlardan Safe Area koruması ile) */
  .container {
    max-width: 100% !important;
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
  }

  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  }

  /* Header düzenlemesi: Masaüstü linklerini gizleyip yalnızca logoyu ortalıyoruz */
  .header-inner {
    display: flex;
    justify-content: center;
  }

  .header-nav-area,
  .header-action-area {
    display: none !important;
    /* Alt menü(bottom nav) kullanılacağı için gizlendi */
  }

  .header-logo-area {
    justify-self: auto;
  }

  .header-logo-img {
    height: 29px;
  }

  /* Banner Alanı */
  .banner-alani {
    padding: 30px 0;
  }

  .banner-alani h1 {
    font-size: 24px;
  }

  .banner-alani-sekmeler {
    overflow-x: auto;
    border-radius: 12px 12px 0 0;
  }

  .banner-alani-sekme {
    white-space: nowrap;
  }

  .banner-alani-arama {
    flex-wrap: wrap;
    border-radius: 0 12px 12px 12px;
    padding: 10px;
  }

  .banner-alani-arama input {
    width: 100%;
    margin-bottom: 8px;
    padding-left: 8px;
  }

  .banner-alani-btn-ara,
  .banner-alani-btn-harita {
    flex: 1;
    justify-content: center;
    background: var(--renk1);
    border: none;
    color: #fff;
    border-radius: 50%;
  }

  .banner-alani-deger-kutu {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    padding: 20px;
  }

  /* Sorgu Butonları Grid */
  .banner-sorgu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Kategori Dropdown'ları iptal, çünkü Mobile JS Override var */
  .sol-kategori-alt-sarmal {
    display: none !important;
  }

  .sol-kategori-item.aktif .sol-kategori-ok {
    transform: rotate(-90deg);
  }

  /* İlan Vitrin */
  .ilan-listele .ilan-baslik-alani {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .ilan-listele .ilan-filtre-kapsayici {
    max-width: 100%;
    margin-right: calc(-15px - env(safe-area-inset-right, 0px));
    padding-right: calc(15px + env(safe-area-inset-right, 0px));
  }

  .ilan-listele .swiper-button-next,
  .ilan-listele .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .ilan-listele .swiper-button-next:after,
  .ilan-listele .swiper-button-prev:after {
    font-size: 14px;
  }

  .firma-ok-btn.sol-ok {
    left: 0;
  }

  .firma-ok-btn.sag-ok {
    right: 0;
  }

  /* Blog Kartları Tablet ve Mobilde "Swipe" (Kaydırmalı) */
  .blog-liste-yatay {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    margin-right: calc(-15px - env(safe-area-inset-right, 0px));
    padding-right: calc(30px + env(safe-area-inset-right, 0px));
    padding-bottom: 15px;
  }

  .blog-liste-yatay::-webkit-scrollbar {
    display: none;
  }

  .blog-card {
    flex: 0 0 60%;
    scroll-snap-align: start;
    flex-direction: column;
  }

  .blog-image {
    flex: none;
    width: 100%;
  }

  .blog-image img {
    aspect-ratio: 16 / 9;
  }

  /* Bölge Kartları */
  .bolge-kart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Footer'ı 2 sütuna düşür */
  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .ilanlar-gosterim {
    border: 0;
    padding: 0;
    border-radius: var(--radius-sm);
  }

  .mobile-kategori-top-area .kategori-menu {
    background: #ffffff;
    border: 0;
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: none;
  }
}

/* MOBİL (max-width: 768px) */
@media (max-width: 768px) {
  .blog-card {
    flex: 0 0 85%;
  }

  .bolge-kart-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(-15px - env(safe-area-inset-right, 0px));
    padding-right: calc(30px + env(safe-area-inset-right, 0px));
    padding-bottom: 10px;
    gap: 15px;
  }

  .bolge-kart-grid::-webkit-scrollbar {
    display: none;
  }

  .bolge-kart {
    flex: 0 0 85%;
    scroll-snap-align: start;
    margin-bottom: 0;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-desc {
    padding-right: 0;
    margin: 0 auto 30px auto;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .app-badge-btn {
    max-width: 250px;
    margin: 0 auto;
  }

  .footer-nav-col,
  .footer-brand-col,
  .footer-app-col {
    text-align: center;
  }

  .social-links-modern {
    justify-content: center;
  }

  .footer-list a:hover {
    padding-left: 0;
    color: var(--renk1);
  }

  .footer-list a::before {
    display: none;
  }
}

/* KÜÇÜK MOBİL EKRANLAR (max-width: 576px) */
@media (max-width: 576px) {
  .banner-sorgu-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(-15px - env(safe-area-inset-right, 0px));
    padding-right: calc(15px + env(safe-area-inset-right, 0px));
    padding-bottom: 5px;
  }

  .banner-sorgu-grid::-webkit-scrollbar {
    display: none;
  }

  .sorgu-kutu {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }

  .blog-card,
  .bolge-kart {
    flex: 0 0 88%;
  }
}

/* ==========================================================================
   İLAN LİSTELEME SAYFASI (SATILIK / KİRALIK vb.) ÖZEL CSS
   Önekler: .sol-filtre- (Sol Alan), .sag-liste- (Sağ Alan)
   ========================================================================== */

/* --- SOL FİLTRE ALANI --- */
.sol-filtre-kapsayici {
  background-color: var(--kart-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  padding: 0;
  overflow: hidden;
}

.sol-filtre-grup {
  border-bottom: 1px solid var(--border-light);
  padding: 16px 20px;
}

.sol-filtre-grup:last-child {
  border-bottom: none;
}

.sol-filtre-baslik {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.sol-filtre-baslik i {
  color: var(--text-gray);
  transition: transform 0.3s ease;
}

.sol-filtre-baslik.kapali i {
  transform: rotate(-90deg);
}

.sol-filtre-icerik {
  margin-top: 15px;
  transition: all 0.3s ease;
}

.sol-filtre-baslik.kapali + .sol-filtre-icerik {
  display: none;
}

/* Lokasyon Select Benzeri Butonlar */
.sol-filtre-lokasyon-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.sol-filtre-lokasyon-btn:hover {
  border-color: var(--renk1);
}

/* Fiyat ve m2 Input Alanları */
.sol-filtre-input-grup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sol-filtre-input-grup input {
  flex: 1;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border 0.2s;
}

.sol-filtre-input-grup input:focus {
  border-color: var(--renk1);
}

.sol-filtre-input-ayirici {
  color: var(--text-gray);
  font-weight: bold;
}

/* Checkbox (Özel Tasarım) */
.sf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-dark);
}

.sf-checkbox-label:last-child {
  margin-bottom: 0;
}

.sf-checkbox-label input {
  display: none;
}

.sf-checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sf-checkbox-box i {
  color: white;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s;
}

.sf-checkbox-label input:checked + .sf-checkbox-box {
  background-color: var(--renk1);
  border-color: var(--renk1);
}

.sf-checkbox-label input:checked + .sf-checkbox-box i {
  opacity: 1;
  transform: scale(1);
}

.sf-checkbox-count {
  margin-left: auto;
  color: var(--text-gray);
  font-size: 13px;
}

/* --- SAĞ LİSTE ALANI --- */
.sag-liste-baslik-alani {
  margin-bottom: 20px;
}

.sl-breadcrumb {
  font-size: 13px;
  color: var(--text-gray);
  margin-bottom: 5px;
}

.sl-breadcrumb a {
  color: var(--text-gray);
  text-decoration: none;
}

.sl-baslik {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.sl-baslik span {
  font-weight: 400;
  color: var(--text-gray);
  font-size: 16px;
}

/* Aktif Filtre Etiketleri */
.sl-aktif-filtreler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.sl-filtre-etiket {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-filtre-etiket i {
  cursor: pointer;
  color: var(--danger-red);
  font-size: 14px;
}

.sl-temizle-btn {
  color: var(--danger-red);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Tab & Sıralama Barı */
.sl-kontrol-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--kart-bg);
  border: 1px solid var(--border-color);
  padding: 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.sl-sekmeler {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sl-sekmeler::-webkit-scrollbar {
  display: none;
}

.sl-sekme-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.sl-sekme-btn.aktif {
  background: var(--soft-green-bg);
  color: var(--renk1);
}

/* Masaüstü Özel Dropdown (Select Yerine) */
.sl-masaustu-araclar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-dropdown {
  position: relative;
}

.sl-dropdown-btn {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sl-dropdown-btn:hover {
  border-color: var(--renk1);
}

.sl-dropdown-icerik {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  min-width: 250px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.sl-dropdown.acik .sl-dropdown-icerik {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sl-dropdown-icerik a {
  display: block;
  padding: 10px 15px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
}

.sl-dropdown-icerik a:hover {
  background: var(--bg-light);
  color: var(--renk1);
}

.sl-gorunum-btn {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  font-size: 20px;
  cursor: pointer;
}

.sl-gorunum-btn.aktif {
  background: var(--renk1);
  color: white;
  border-color: var(--renk1);
}

/* --- MOBİL AKSİYON BARI (FİLTRELE, SIRALA, GÖRÜNÜM) --- */
.mobil-filtre-bar {
  display: flex;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.mobil-filtre-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-light);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.mobil-filtre-btn:last-child {
  border-right: none;
}

.mobil-filtre-btn i {
  color: var(--renk1);
  font-size: 18px;
}

.mobil-filtre-btn .badge {
  background: var(--danger-red);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TAM EKRAN (FULLSCREEN) BOTTOM SHEET ÖZEL SINIFI */
.bottom-sheet-fullscreen .bottom-sheet-container {
  height: 95vh;
  /* Mobilde neredeyse tam ekran */
  max-height: 95vh;
  border-radius: 20px 20px 0 0;
}

.bs-arama-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}

.bs-liste-icerik {
  padding: 0;
}

.bs-liste-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
}

.bs-liste-item:hover {
  background: var(--bg-light);
}

.bs-liste-item span {
  color: var(--text-gray);
  font-size: 13px;
}

/* üst filtre alanı */

.sol-kategori-alt-icerik {
  overflow-y: auto;
  max-height: 448px;
}

.filtre-header {
  background-color: var(--kart-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 2rem;
}

.breadcrumb {
  margin-bottom: 10px;
}

.breadcrumb-item {
  font-size: 13px;
  display: flex;
  align-items: center;
}

.breadcrumb-item.active {
  color: var(--renk1);
}

/* TİPOGRAFİ & BREADCRUMB */
.breadcrumb-link {
  color: var(--text-gray);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.breadcrumb-link i {
  font-weight: 800;
  font-size: 14px;
}

.breadcrumb-link:hover {
  color: var(--text-dark);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 10px 0px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.page-text {
  font-size: 13px;
  color: var(--text-gray);
  margin: 0;
}

.result-badge {
  background: var(--bg-light);
  color: var(--text-gray);
  border: 1px solid var(--border-color);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}

.page-subtitle {
  color: var(--text-gray);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

/* =========================================
       MASAÜSTÜ: KAYDIRMALI FİLTRE (Görsel 1 Çözümü)
       ========================================= */
.active-filters-row {
  align-items: center;
  gap: 12px;
  width: 100%;
}

.filter-label-text {
  font-size: 13px;
  color: var(--text-gray);
  font-weight: 600;
  flex-shrink: 0;
}

.filter-scroll-wrapper {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.active-filters-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.active-filters-scroll::-webkit-scrollbar {
  display: none;
}

/* OKLAR */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-tam);
  background: var(--kart-bg);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.scroll-btn:hover {
  background: var(--bg-light);
  color: var(--renk1);
  border-color: var(--renk1);
}

.scroll-btn.show {
  display: flex;
}

.scroll-btn.left-btn {
  left: -10px;
}

.scroll-btn.right-btn {
  right: -10px;
}

/* GÜNCELLENMİŞ ETİKET YAPISI (ÇARPISI KESİLMEYEN) */
.magic-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* overflow:hidden kaldırıldı */
}

.magic-tag-val {
  color: var(--renk1);
  margin-left: 4px;
}

.tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 0;
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  color: var(--danger-red);
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

/* Hover Durumu */
.magic-tag:hover {
  background: var(--kart-bg);
  border-color: var(--renk1);
  box-shadow: 0 4px 12px rgba(10, 135, 60, 0.1);
}

.magic-tag:hover .tag-icon {
  max-width: 20px;
  /* Genişliği yavaşça açar */
  opacity: 1;
  transform: scale(1) rotate(0);
  margin-left: 2px;
  /* Boşluğu hover anında ekler */
}

.clear-all-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--danger-red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.clear-all-btn i {
  font-size: 14px;
}

.clear-all-btn:hover {
  background-color: #fef2f2;
}

.soft-divider {
  height: 1px;
  background-color: #cfcfcf;
  border: none;
  margin: 6px 0;
}

/* MASAÜSTÜ: SIRALAMA VE GÖRÜNÜM PANELİ */
.controls-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.exposed-sort-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sort-chip {
  background: var(--kart-bg);
  border: 1px solid var(--border-color);
  color: var(--text-gray);
  padding: 0.42rem 0.82rem;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1;
}

.sort-chip i {
  font-size: 1.15rem;
}

.sort-chip:hover {
  border-color: var(--renk1);
  color: var(--primary-dark-green);
  background: var(--soft-green-bg);
}

.sort-chip.active {
  background: var(--renk1);
  color: #ffffff;
  border-color: var(--renk1);
}

.sort-chip.active i {
  color: #ffffff;
}

.view-toggles {
  display: flex;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 2px;
}

.v-btn {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  color: var(--text-gray);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}

.v-btn.active {
  background: var(--kart-bg);
  color: var(--renk1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* GÖRÜNÜM BUTONLARI TIKLANMASIN KURALI */
.unclickable-view {
  pointer-events: none;
  opacity: 0.9;
}

/* =========================================
       MOBİL GÖRÜNÜM TASARIMI (Görsel 2)
       ========================================= */
.mobile-actions-panel {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 4px 0;
}

.mobile-actions-panel::-webkit-scrollbar {
  display: none;
}

.m-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-dark-green);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.m-action-btn i {
  color: var(--brand-dark-green);
  font-size: 1.2rem;
}

.m-action-btn:hover {
  background: var(--bg-light);
  border-color: var(--renk1);
}

.m-badge {
  background-color: var(--dark-red-badge);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* sol filtre alanı */

/* --- SOL MENÜ HIZLI SORGULAMA KARTI (MODERN 2x2 GRID TASARIMI) --- */

.faydali-servisler-kutu {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-top: 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.faydali-header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.faydali-baslik-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faydali-header-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--soft-green-bg, #e6f4ea);
  color: var(--renk1, #26ae61);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.faydali-servisler-kutu .faydali-baslik {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.faydali-subtext {
  font-size: 11px;
  color: #94a3b8;
  margin: 2px 0 0 0;
  font-weight: 500;
}

/* 2x2 Izgara (Grid) Düzeni */
.faydali-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.faydali-grid-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 100px;
}

.faydali-grid-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.fg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fg-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Özel Soft Renk Temaları */
.faydali-grid-card.theme-blue .fg-icon {
  background-color: #eff6ff;
  color: #2563eb;
}

.faydali-grid-card.theme-emerald .fg-icon {
  background-color: #ecfdf5;
  color: #059669;
}

.faydali-grid-card.theme-indigo .fg-icon {
  background-color: #f5f3ff;
  color: #4f46e5;
}

.faydali-grid-card.theme-amber .fg-icon {
  background-color: #fff7ed;
  color: #d97706;
}

.fg-arrow {
  font-size: 13px;
  color: #94a3b8;
  transition: all 0.25s ease;
}

.faydali-grid-card:hover .fg-arrow {
  transform: translate(2px, -2px);
  color: var(--renk1, #26ae61);
}

.fg-content strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fg-content span {
  display: block;
  font-size: 10px;
  color: #64748b;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alt Bilgi Etiketi */
.faydali-footer-info {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

.faydali-footer-info i {
  color: #10b981;
  font-size: 13px;
}

/* --- FİRMALAR --- */
.firmalar-swiper-kapsayici {
  position: relative;
  padding: 0 5px;
  overflow: hidden;
}

.firma-ok-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #ffffff;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-tam);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-color);
  color: var(--text-dark) !important;
  margin-top: -24px !important;
  z-index: 10;
}

.firma-ok-btn::after {
  font-size: 18px !important;
  font-weight: bold;
}

.firmalar-swiper-kapsayici:hover .firma-ok-btn {
  opacity: 1;
  visibility: visible;
}

.firma-premium-kart {
  background-color: var(--kart-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.firma-premium-kart:hover {
  transform: translateY(-3px);
}

.fp-ust-arka-plan {
  height: 76px;
  width: 100%;
  background-color: #e1ebe5;
}

.fp-logo-kapsayici {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-tam);
  background: #ffffff;
  padding: 6px;
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.fp-logo-kapsayici img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-tam);
}

.fp-icerik {
  padding: 48px 20px 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fp-isim {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.fp-unvan {
  font-size: 13px;
  color: var(--text-gray);
  margin-bottom: 12px;
}

.fp-konum-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-page);
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray);
  margin: 0 auto 20px auto;
}

.fp-konum-rozet i {
  color: var(--danger-red);
}

.fp-istatistik-alani {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.fp-stat-kutu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-stat-kutu strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--renk1);
  line-height: 1.2;
}

.fp-stat-kutu span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.fp-ayirici {
  width: 1px;
  height: 32px;
  background: var(--border-color);
}

.fp-buton {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--soft-green-bg);
  color: var(--renk1);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  margin-top: auto;
  border: 1px solid transparent;
}

.fp-buton:hover {
  background: var(--renk1);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(38, 174, 97, 0.2);
}

/* --- BÖLGE KARTLARI --- */
.bolge-kesif-wrapper {
  width: 100%;
  overflow: hidden;
}

.bolge-kart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.bolge-kart {
  background-color: var(--kart-bg);
  border-radius: var(--radius-sm);
  padding: 30px 30px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bolge-kart:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(28, 72, 15, 0.1);
}

.bolge-kart-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}

.bolge-ikon-kutu {
  width: 43px;
  height: 43px;
  background-color: var(--bg-light);
  color: var(--renk1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: solid 1px var(--border-light);
}

.bolge-kart-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.bolge-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bolge-liste li {
  border-bottom: 1px solid var(--border-color);
}

.bolge-liste li:last-child {
  border-bottom: none;
}

.bolge-liste li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.bolge-liste li:last-child a {
  padding-bottom: 0px;
}

.bolge-link-isim {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  transition: all 0.3s ease;
}

.bolge-link-isim i {
  font-size: 18px;
  color: var(--text-gray);
  transition: all 0.3s ease;
}

.bolge-link-sayi {
  background-color: var(--bg-light);
  color: var(--text-gray);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.bolge-liste li a:hover .bolge-link-isim {
  color: var(--renk1);
  transform: translateX(6px);
}

.bolge-liste li a:hover .bolge-link-isim i {
  color: var(--renk1);
}

.bolge-liste li a:hover .bolge-link-sayi {
  background-color: var(--bg-light);
  color: var(--renk1);
}

/* --- BLOG --- */
.emlak-blog-section {
  position: relative;
  width: 100%;
}

.blog-liste-yatay {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: solid 1px var(--border-color);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  align-items: stretch;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.blog-image {
  flex: 0 0 30%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.blog-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-date {
  font-size: 12px;
  color: var(--renk1);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-title {
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
}

.blog-title a {
  color: #222;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-title a:hover {
  color: var(--renk1);
}

.blog-excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--renk1);
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-read-more:hover {
  gap: 12px;
  color: #1a1a1a;
}

.blog-read-more i {
  font-size: 15px;
}

/**/

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

/* --- İZOLASYON --- */
.ilan-detay-wrapper {
  color: var(--text-dark);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* --- BAŞLIK ALANI --- */
.ilan-detay-header-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  gap: 20px;
}

.ilan-detay-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}

/* --- YERLEŞİM (3 KOLON MASAÜSTÜ) --- */
.ilan-detay-grid {
  display: grid;
  grid-template-columns: 2.6fr 1.2fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.ilan-detay-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 15px;
}

.ilan-detay-card-gallery {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================================
               2. RESİM ÜSTÜ FLOATING MEDYA BUTONLARI
            ========================================= */
.ilan-detay-swiper-main {
  width: 100%;
  height: 460px;
  position: relative;
  background: #000;
}

.ilan-detay-swiper-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  transition: opacity 0.3s;
}

.ilan-detay-photo-counter {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.ilan-detay-expand-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-tam);
  font-size: 20px;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.ilan-detay-floating-media {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.floating-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.floating-media-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.floating-media-btn-video:hover i {
  color: var(--renk1);
}

.floating-media-btn-tour:hover i {
  color: #00bcd4;
}

/* Ana Görsel Okları */
.ilan-detay-swiper-main .swiper-button-next,
.ilan-detay-swiper-main .swiper-button-prev {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.ilan-detay-swiper-main:hover .swiper-button-next,
.ilan-detay-swiper-main:hover .swiper-button-prev {
  opacity: 1;
  visibility: visible;
}

/* THUMBNAILS */
.ilan-detay-thumbs-wrapper {
  position: relative;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--border-color);
  padding: 12px;
}

.ilan-detay-swiper-thumbs {
  height: 75px;
}

.ilan-detay-swiper-thumbs .swiper-slide {
  width: 110px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.5;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.ilan-detay-swiper-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--renk1);
}

.ilan-detay-swiper-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ilan-detay-thumbs-wrapper .thumbs-btn-prev,
.ilan-detay-thumbs-wrapper .thumbs-btn-next {
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  font-size: 20px;
  z-index: 10;
  cursor: pointer;
  transition: var(--transition);
  margin: 0;
}

.ilan-detay-thumbs-wrapper .thumbs-btn-prev {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 0)
  );
}

.ilan-detay-thumbs-wrapper .thumbs-btn-next {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 0)
  );
}

/* --- 2. KOLON: FİYAT VE ÖZELLİKLER --- */
.ilan-detay-price {
  font-size: 23px;
  font-weight: 700;
  color: var(--renk1);
  margin-bottom: 6px;
}

.ilan-detay-loc {
  font-size: 12px;
  color: var(--text-gray);
  margin-bottom: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
}

.ilan-detay-features {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.ilan-detay-feature-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.ilan-detay-feature-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ilan-detay-f-label {
  font-weight: 500;
  color: var(--text-gray);
}

.ilan-detay-f-val {
  font-weight: 600;
  color: var(--text-dark);
  text-align: right;
}

/* --- 3. KOLON: DANIŞMAN VE EİDS --- */
.ilan-detay-agency-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.ilan-detay-agency-logo {
  width: 120px;
  height: 90px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
}

.ilan-detay-agency-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ilan-detay-agency-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-dark);
}

.ilan-detay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid transparent;
}

/* --- BUTON GRUPLARI VE AKILLI FLEX DUZENI --- */
.ilan-detay-btn-group {
  display: flex;
  flex-direction: column;
  /* Masaüstü varsayılan: Alt alta */
  gap: 8px;
  margin-bottom: 8px;
}

.ilan-detay-btn-group .ilan-detay-btn {
  margin-bottom: 0 !important;
  flex: 1;
}

.ilan-detay-btn-light {
  background: var(--bg-page);
  border-color: var(--border-color);
  color: var(--text-dark);
}

.ilan-detay-btn-light:hover {
  background: var(--bg-light);
  border-color: var(--text-gray);
}

.ilan-detay-divider {
  height: 1px;
  background: var(--border-color);
  margin: 13px 0;
}

.ilan-detay-agent-info {
  text-align: center;
  margin-bottom: 15px;
}

.ilan-detay-agent-info h3 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-weight: 600;
}

.ilan-detay-agent-info p {
  font-size: 13px;
  color: var(--text-gray);
  font-weight: 300;
}

.ilan-detay-btn-whatsapp {
  background: var(--renk1);
  color: #fff;
}

.ilan-detay-btn-whatsapp:hover {
  background: #1fae51;
  color: #fff;
}

.ilan-detay-btn-primary {
  background: #fff;
  color: var(--renk1);
  border-color: var(--renk1);
}

.ilan-detay-btn-primary:hover {
  background: var(--soft-green-bg);
}

.ilan-detay-eids-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
}

.ilan-detay-eids-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.ilan-detay-eids-text {
  font-size: 12px;
  color: var(--text-gray);
  line-height: 1.5;
}

.ilan-detay-eids-text strong {
  display: block;
  margin-top: 6px;
  color: var(--text-dark);
  font-size: 13px;
}

/* =========================================
               İLAN AÇIKLAMASI SEKSİYONU
            ========================================= */
.ilan-detay-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.ilan-detay-sec-title i {
  color: var(--renk1);
  font-size: 17px;
}

.aciklama-metin {
  line-height: 1.7;
  color: #444;
  font-size: 14px;
}

.aciklama-vurgu-red {
  background-color: #ff0000;
  color: #ffffff;
  font-weight: 700;
  padding: 3px 8px;
  display: inline-block;
  margin: 4px 0;
  border-radius: 3px;
}

/* =========================================
               3. İLAN ÖZELLİKLERİ
            ========================================= */
.emlak-ozellikler-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ozellik-kategori-block {
  padding-bottom: 15px;
}

.ozellik-kategori-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ozellik-kat-baslik-yatay {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 7px 12px 6px;
  border-radius: 2px;
  border-left: 3px solid #003399;
  background: var(--active-item-bg, #f1f5f9);
  border-color: var(--renk1, #3b82f6);
  color: var(--renk1, #3b82f6);
}

.ozellik-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  list-style: none;
  padding: 0 8px;
  margin: 0;
}

.ozellik-items-grid li {
  font-size: 13px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* AKTİF (VAR) İTEMLER - Yeşil Onay İkonlu ve Koyu Renk */
.ozellik-items-grid li.var {
  color: #1a1a1a;
  font-weight: 700;
}

.ozellik-items-grid li.var i {
  color: var(--renk1);
  font-size: 15px;
  font-weight: bold;
}

/* PASİF (YOK) İTEMLER - Gri X İkonlu ve Açık Gri Renk */
.ozellik-items-grid li.yok {
  color: #b5b5b5;
  font-weight: 400;
}

.ozellik-items-grid li.yok i {
  color: #d0d0d0;
  font-size: 13px;
}

/* =========================================
   MOBİL SABİT ALT AKSİYON BARI (BOTTOM BAR)
========================================= */
.ilan-detay-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  display: none;
  /* Masaüstünde gizli */
  align-items: center;
  gap: 8px;
}

/* Aksiyon Butonları Genel */
.m-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  flex: 1;
  /* Butonların eşit yayılması için */
  border: none;
}

.m-bottom-btn i {
  font-size: 18px;
}

/* 1. Ara Butonu */
.m-btn-call {
  background: var(--renk1, #0d6efd);
  color: #fff;
}

.m-btn-call:hover {
  background: #0b5ed7;
  color: #fff;
}

/* 2. WhatsApp Butonu */
.m-btn-whatsapp {
  background: #25d366;
  color: #fff;
}

.m-btn-whatsapp:hover {
  background: #1eb857;
  color: #fff;
}

/* 3. Mesaj Butonu */
.m-btn-msg {
  background: #f1f5f9;
  color: var(--text-dark, #1e293b);
  border: 1px solid var(--border-color, #e2e8f0);
}

.m-btn-msg:hover {
  background: #e2e8f0;
}

/* 4. En Sağdaki Anasayfa Butonu */
.m-btn-home {
  flex: 0 0 44px;
  /* Sabit kare buton */
  width: 44px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid var(--border-color, #e2e8f0);
  padding: 0;
}

.m-btn-home:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Sol Profil Özet Kartı */
.profile-summary-card {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
}

.profile-avatar-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 16px;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--renk1-light);
  color: var(--renk1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.profile-avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: var(--renk1);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.profile-avatar-edit-btn:hover {
  transform: scale(1.1);
}

.profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.profile-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--renk1-light);
  color: var(--renk1);
  margin-bottom: 16px;
}

.profile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  text-align: left;
}

.profile-nav-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.profile-nav-menu li a:hover,
.profile-nav-menu li.active a {
  background: #ffffff;
  color: var(--renk1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Sağ Form Kartları */

.form-group-custom {
  margin-bottom: 20px;
}

.form-group-custom label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon i {
  position: absolute;
  left: 14px;
  font-size: 18px;
  color: var(--text-gray);
  pointer-events: none;
  z-index: 2;
}

/* Akıllı Dinamik İkon Kaydırma */
.input-custom,
.select-custom {
  width: 100%;
  padding: 12px 16px;
  /* Varsayılan olarak ikonsuz sola hizalı */
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  background-color: #fff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* İkon İçeren Kutularda Sol Boşluk Otomatik Eklenir */
.input-with-icon .input-custom,
.input-with-icon .select-custom {
  padding-left: 42px;
}

.input-custom:focus,
.select-custom:focus {
  border-color: var(--renk1);
  box-shadow: 0 0 0 4px rgba(38, 174, 97, 0.12);
}

/* Özel Select Kutusu */
.select-custom {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,49.66,90.34L128,168.69l78.34-78.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.textarea-custom {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  min-height: 90px;
  resize: vertical;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.textarea-custom:focus {
  border-color: var(--renk1);
  box-shadow: 0 0 0 4px rgba(38, 174, 97, 0.12);
}

/* GSM Doğrulanmış Özel Uyarısı */
.gsm-verified-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(38, 174, 97, 0.08);
  border: 1px solid rgba(38, 174, 97, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 10px;
  color: #1b7a43;
  font-size: 13px;
  font-weight: 600;
}

.gsm-verified-alert i {
  font-size: 20px;
  color: var(--renk1);
  flex-shrink: 0;
}

.gsm-verified-badge-pill {
  margin-left: auto;
  background: var(--renk1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Değişiklikleri Kaydet Butonu */
.btn-save-settings {
  background: var(--renk1);
  color: #ffffff;
  border: none;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(38, 174, 97, 0.25);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.btn-save-settings:hover {
  background: #1f9451;
  transform: translateY(-1px);
}

/* Cihaz Kartları Tasarımı */
.settings-form-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-bottom: 15px;
}

.settings-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 20px;
}

.settings-card-title i {
  font-size: 20px;
  color: var(--renk1);
}

.device-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #ffffff;
  margin-bottom: 12px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.device-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.device-item-card.current-device {
  background: rgba(38, 174, 97, 0.04);
  border-color: rgba(38, 174, 97, 0.25);
}

.device-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-light);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.device-item-card.current-device .device-icon-box {
  background: var(--renk1-light);
  color: var(--renk1);
}

.device-info {
  flex-grow: 1;
}

.device-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.device-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.current-badge {
  background: var(--renk1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.device-meta {
  font-size: 12.5px;
  color: var(--text-gray);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.device-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-revoke-device {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #ef4444;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-revoke-device:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Tehlikeli Bölge (Danger Zone) */
.danger-zone-card {
  background: #fff5f5;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 24px;
}

.danger-zone-title {
  font-size: 16px;
  font-weight: 700;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.danger-zone-desc {
  font-size: 13.5px;
  color: #7f1d1d;
  line-height: 1.5;
  margin-bottom: 16px;
}

.btn-delete-account {
  background: #dc2626;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.btn-delete-account:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

/* ====================================================
   İLAN BULUNAMADI (EMPTY STATE) ÖZEL TASARIMI
==================================================== */
.ilan-bulunamadi-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1.5px dashed #cbd5e1; /* Kesik çizgili zarif kenarlık */
  border-radius: var(--radius-sm, 16px);
  padding: 50px 20px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  animation: fadeInSoft 0.4s ease-out forwards;
}

/* Ev İkonu Çerçevesi */
.ib-ikon {
  position: relative;
  width: 76px;
  height: 76px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #94a3b8;
  margin-bottom: 20px;
}

/* Ev İkonunun Üzerindeki Kırmızı Çarpı Rozeti */
.ib-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--danger-red, #ef4444);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 3px solid #ffffff;
}

/* Başlık */
.ib-baslik {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark, #1e293b);
  margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}

/* Açıklama Metni */
.ib-metin {
  font-size: 14px;
  color: var(--text-gray, #64748b);
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: 620px;
}

/* Soft Yüklenme Animasyonu */
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
           MOBİL/TABLET PORTRE GÖRÜNÜMÜ (< 1200px dikey)
        ========================================= */
@media (max-width: 1199px) {
  .page-content-body,
  .page-content-header {
    padding: 15px;
  }

  .header-search-area {
    max-width: 100%;
  }

  .ilan-detay-bottom-bar {
    display: flex;
  }

  .breadcrumb {
    margin-bottom: 5px;
  }

  .title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0 0px;
  }

  /* Alt bar içeriği kapatmasın diye sayfa altına boşluk */
  body {
    padding-top: calc(46px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  }

  .ilan-detay-header-area {
    flex-direction: column;
    text-align: center;
    margin-bottom: 15px;
  }

  .ilan-detay-title {
    font-size: 18px;
  }

  /* Tüm kartlar tek sütunda alt alta sıralanır */
  .ilan-detay-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ilan-detay-card-gallery {
    grid-column: auto;
    grid-row: auto;
  }

  .ilan-detay-grid > section:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }

  aside.ilan-detay-card {
    grid-column: auto;
    grid-row: auto;
  }

  .ilan-detay-swiper-main {
    height: 320px;
  }

  .ilan-detay-floating-media {
    bottom: 10px;
    right: 10px;
  }

  .floating-media-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Tablet ve Geniş Mobillerde Butonları Yan Yana Hizala */
  .ilan-detay-btn-group {
    flex-direction: row;
    gap: 10px;
  }
}

/* Tablet Portre İçin (768px - 1199px dikey ekranlar) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .ilan-detay-grid {
    grid-template-columns: 1.1fr 1fr;
    /* Portre tabletlerde yan yana iki sütun */
    gap: 20px;
  }

  /* Sol Kolon: Galeri + Danışman */
  .ilan-detay-card-gallery {
    grid-column: 1;
    grid-row: 1;
  }

  aside.ilan-detay-card {
    grid-column: 1;
    grid-row: 2;
  }

  /* Sağ Kolon: Fiyat ve Özellikler (Boylu boyunca uzanır) */
  .ilan-detay-grid > section:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ilan-detay-swiper-main {
    height: 280px;
  }
}

/* =========================================
           MOBİL VE TABLET YATAY (LANDSCAPE) EKRAN DÜZENİ (< 1200px yatay)
        ========================================= */
@media (max-width: 1199px) and (orientation: landscape) {
  body {
    padding-bottom: 55px !important;
    /* Yatay ekranda ince alt boşluk */
  }

  /* Alt aksiyon barını yatayda ince ve derli toplu yap */
  .ilan-detay-bottom-bar {
    padding: 6px 14px;
  }

  .m-bottom-btn {
    height: 36px;
    font-size: 12px;
    border-radius: 8px;
  }

  .m-btn-home {
    flex: 0 0 36px;
    width: 36px;
  }

  .breadcrumb {
    margin-bottom: 8px !important;
  }

  .ilan-detay-header-area {
    flex-direction: row;
    text-align: center;
    margin-bottom: 10px;
    justify-content: center;
  }

  .ilan-detay-title {
    font-size: 16px;
  }

  /* 2 Dengeli Kolon: Sol tarafta Galeri ve Danışman alt alta; Sağ tarafta tall Özellikler Kartı */
  .ilan-detay-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
  }

  /* Sol Kolon Üstü: Galeri */
  .ilan-detay-card-gallery {
    grid-column: 1;
    grid-row: 1;
  }

  /* Sol Kolon Altı: Danışman Kartı (Galerinin hemen altına boşluksuz yapışır) */
  aside.ilan-detay-card {
    grid-column: 1;
    grid-row: 2;
  }

  /* Sağ Kolon: Fiyat ve Özellikler Kartı (Boylu boyunca sağda uzanır) */
  .ilan-detay-grid > section:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* Görselin yatayda aşırı uzayıp ekran dışına taşmasını önle */
  .ilan-detay-swiper-main {
    height: 250px;
    /* Yatayda ekranı kaplamayan ideal yükseklik */
  }

  /* Küçük resimleri yatayda küçült */
  .ilan-detay-swiper-thumbs {
    height: 55px;
  }

  .ilan-detay-swiper-thumbs .swiper-slide {
    width: 80px;
  }

  .ilan-detay-thumbs-wrapper {
    padding: 8px;
  }

  /* Floating Medya Butonları */
  .ilan-detay-floating-media {
    bottom: 8px;
    right: 8px;
    gap: 6px;
  }

  .floating-media-btn {
    padding: 5px 10px;
    font-size: 10.5px;
  }

  /* Sağ kısımdaki Danışman alanının iç boşluklarını yatay ekrana uydur */
  .ilan-detay-agency-top {
    margin-bottom: 12px;
  }

  .ilan-detay-agency-logo {
    width: 100px;
    height: 70px;
    margin-bottom: 8px;
  }

  .ilan-detay-agency-name {
    font-size: 14px;
  }

  .ilan-detay-btn {
    padding: 6px;
    font-size: 12px;
    margin-bottom: 0;
  }

  .ilan-detay-divider {
    margin: 8px 0;
  }

  .ilan-detay-agent-info {
    margin-bottom: 8px;
  }

  .ilan-detay-agent-info h3 {
    font-size: 14px;
  }

  .ilan-detay-eids-box {
    margin-top: 8px;
    padding-top: 8px;
  }

  /* Yatay Modda Butonları Yan Yana Hizala */
  .ilan-detay-btn-group {
    flex-direction: row;
    gap: 8px;
  }
}

/* =========================================
           ÇOK KÜÇÜK MOBİL EKRANLAR (< 576px) İÇİN KORUMA AYARI
        ========================================= */
@media (max-width: 575px) {
  /* Yazıları uzun olan Firma ve Favori butonları dikey telefonlarda alt alta kalsın */
  .ilan-detay-btn-group-info {
    flex-direction: row;
    gap: 7px;
  }

  /* İletişim butonları (WhatsApp ve Arama) her durumda yan yana kalarak alan kazansın */
  .ilan-detay-btn-group-contact {
    flex-direction: row;
    gap: 7px;
  }

  /* Çok dar dikey ekranlarda buton metinleri taşmasın diye hafifçe küçültelim */
  .ilan-detay-btn-group-contact .ilan-detay-btn {
    font-size: 12px;
    padding: 8px 4px;
  }
}

/* =========================================
   MOBİL/TABLET: TAMAMEN PASİF, METİN TABANLI DÜZEN
========================================= */
@media (max-width: 1199px) {

    .footer-emlak {
  margin-bottom: 50px;
}

  /* 1. "Yok" olan özellikleri gizle */
  .emlak-ozellikler-wrapper .ozellik-items-grid li.yok {
    display: none !important;
  }

  /* 2. Boş kalan kategori başlıklarını gizle */
  .emlak-ozellikler-wrapper .ozellik-kategori-block:not(:has(li.var)) {
    display: none !important;
  }

  /* 3. Kategori başlığını küçük, kalın ve sade bir metin yap */
  .emlak-ozellikler-wrapper .ozellik-kat-baslik-yatay {
    font-size: 11.5px;
    font-weight: 700;
    background: none !important;
    /* Arka planı kaldır */
    border-left: 2px solid var(--renk1);
    /* Sadece solda ince renk çizgisi */
    color: var(--text-dark, #0f172a);
    padding: 2px 0 2px 8px;
    margin-bottom: 8px;
    border-radius: 0;
  }

  /* 4. Özellikleri bir paragraf metni gibi yan yana akıt (Flexbox) */
  .emlak-ozellikler-wrapper .ozellik-items-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    /* Satırlar arası minik boşluk */
    column-gap: 0;
    /* Sütun boşluğunu kendimiz nokta ile ayarlayacağız */
    padding: 0;
    list-style: none;
  }

  /* 5. Özellikleri düz metin yap (Arka plan, kenarlık ve padding yok) */
  .emlak-ozellikler-wrapper .ozellik-items-grid li.var {
    font-size: 11.5px;
    color: #475569;
    /* Okunaklı koyu gri düz yazı */
    font-weight: 500;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
  }

  /* 6. YALNIZCA arkasından başka bir aktif özellik (li.var) gelen elemanların sonuna nokta koy */
  .emlak-ozellikler-wrapper .ozellik-items-grid li.var:has(~ li.var)::after {
    content: "•";
    margin: 0 8px;
    /* Noktanın sağ-sol boşluğu */
    color: #cbd5e1;
    /* Hafif silik gri nokta */
    font-weight: bold;
  }

  /* 7. Tik ikonlarını (i etiketlerini) tamamen temizle */
  .emlak-ozellikler-wrapper .ozellik-items-grid li.var i {
    display: none !important;
  }

  .emlak-ozellikler-wrapper .ozellik-kategori-block {
    padding-bottom: 12px;
  }
}

/* Zil kapsayıcısını relative yapıyoruz */
.action-icon-btn.bell {
  position: relative;
}

/* Bildirim Dropdown Ana Kutusu Güncellemesi */
.bell-dropdown {
  position: absolute;
  top: calc(100% + 15px);
  right: -80px;
  /* Sağa hizalama dengesi */
  background: white;
  width: 320px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  cursor: default;
  z-index: 1040;
  /* Z-index güvenceye alındı */
}

/* Üst Kısımdaki Küçük Üçgen Ok (Yeni) */
.bell-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 94px;
  /* Zil ikonunun tam merkezine hizalanmıştır */
  width: 12px;
  height: 12px;
  background: white;
  transform: rotate(45deg);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  z-index: -1;
  /* İçeriğin arkasında kalması için */
}

/* Bildirim Listesi Scrollbar Tasarımı (Yeni) */
.bell-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.bell-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.bell-dropdown-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.bell-dropdown-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* JS ile "active" sınıfı eklenince gösterilecek */
.bell-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Başlık Alanı */
.bell-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}

.bell-dropdown-header h5 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--text-dark);
}

.bell-dropdown-header a {
  font-size: 11px;
  font-weight: 600;
  color: var(--renk1);
  text-decoration: none;
}

/* Liste Alanı */
.bell-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}

.bell-dropdown-list li a {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s;
}

.bell-dropdown-list li a:hover {
  background-color: var(--bg-light);
}

.bell-dropdown-list li.unread {
  background-color: var(--active-item-bg);
  /* Okunmamışlara hafif yeşil zemin */
}

/* Okunmamış işareti */
.bell-icon-unread {
  color: var(--renk1);
  font-size: 8px;
  margin-top: 4px;
}

/* Bildirim Metin Yapısı */
.bell-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.bell-item-text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.bell-item-text span {
  font-size: 11.5px;
  color: var(--text-gray);
  line-height: 1.3;
}

.bell-item-text small {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Alt Kısım */
.bell-dropdown-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid var(--border-light);
}

.bell-dropdown-footer a {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
}

.bell-dropdown-footer a:hover {
  color: var(--renk1);
}

/* Perde aktifleştiğinde */
.header-overlay.active {
  opacity: 1;
  visibility: visible;
}

.btn-noti-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  transition: var(--transition);
  cursor: pointer;
}

.btn-noti-action:hover {
  background: var(--bg-light);
  border-color: #cbd5e1;
}

.btn-noti-action.primary-action {
  background: var(--soft-green-bg);
  border-color: var(--renk1);
  color: var(--renk1);
}

.btn-noti-action.primary-action:hover {
  background: var(--renk1);
  color: #ffffff;
}

.noti-page-actions {
  display: flex;
  gap: 10px;
}

/* Filtre Sekmeleri (Tabs) */
.noti-page-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid var(--border-color);
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Mobil cihazlarda yumuşak kaydırma */
}

.noti-page-tabs::-webkit-scrollbar {
  display: none;
}

.noti-tab-btn {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: all 0.2s;
}

.noti-tab-btn:hover {
  color: var(--text-dark);
}

.noti-tab-btn.active {
  color: var(--renk1);
}

.noti-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--renk1);
  border-radius: 10px;
}

.noti-tab-count {
  font-size: 11px;
  background: var(--border-light);
  color: var(--text-gray);
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 700;
}

.noti-tab-btn.active .noti-tab-count {
  background: var(--soft-green-bg);
  color: var(--renk1);
}

/* Bildirim Akışı ve Akıllı Kart Yapıları */
.noti-page-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.noti-page-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-left: 4px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  cursor: pointer;
  transition:
    background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-left-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
}

.noti-page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

/* OKUNMAMIŞ BİLDİRİM STİLİ */
.noti-page-card.unread {
  background-color: var(--active-item-bg);
  border-color: rgba(38, 174, 97, 0.12);
  border-left-color: var(--renk1);
}

/* Sol İkon Alanı */
.noti-page-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.noti-page-icon-box.new-ad {
  background: var(--soft-green-bg);
  color: var(--renk1);
}

.noti-page-icon-box.price-down {
  background: #fff4e6;
  color: #d97706;
}

.noti-page-icon-box.system {
  background: #e0f2fe;
  color: #0284c7;
}

/* Orta İçerik Alanı */
.noti-page-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.noti-page-title-row {
  display: flex;
  align-items: center;
}

.noti-page-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* AKILLI NABIZ NOKTASI (PULSING DOT) */
.noti-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--renk1);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.4s ease,
    width 0.4s ease,
    height 0.4s ease,
    margin-right 0.4s ease;
}

.noti-pulse-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--renk1);
  animation: notiPulseGlow 2s infinite;
}

@keyframes notiPulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* OKUNMUŞ BİLDİRİMLERDE NOKTAYI TAMAMEN DARALTARAK SIFIRLA (BOŞLUK KALMAZ) */
.noti-page-card:not(.unread) .noti-pulse-dot {
  width: 0px;
  height: 0px;
  margin-right: 0px;
  opacity: 0;
  transform: scale(0);
}

.noti-page-card-desc {
  font-size: 13px;
  color: var(--text-gray);
  line-height: 1.5;
  margin: 0;
}

.noti-page-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.noti-page-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Sağ Hızlı Aksiyon Butonları */
.noti-page-opt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-noti-circle-opt {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease,
    background-color 0.2s,
    color 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-noti-circle-opt:hover {
  background: #ffffff;
  color: var(--text-dark);
  border-color: #cbd5e1;
}

.btn-noti-circle-opt.check:hover {
  background: var(--soft-green-bg);
  color: var(--renk1);
  border-color: rgba(38, 174, 97, 0.2);
}

/* Tıklandığında butonun küçülerek kaybolma efekti */
.btn-noti-circle-opt.is-read-anim {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.btn-noti-circle-opt.delete:hover {
  background: #fef2f2;
  color: var(--danger-red);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Boş Durum (Empty State) */
.noti-page-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.noti-page-empty-icon {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.noti-page-empty h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px 0;
}

.noti-page-empty p {
  font-size: 13px;
  color: var(--text-gray);
  margin: 0;
}

.fav-page-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

/* Mobil Üst Kategori Kart Alanı (Vitrin İlanları Üstü) */
.mobile-kategori-top-area .kategori-menu {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.mobile-kategori-top-area .kategori-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--text-dark);
  transition: all 0.2s ease;
}

.mobile-kategori-top-area .kategori-baslik:hover {
  background: #ffffff;
  border-color: var(--renk1);
}

.mobile-kategori-top-area .kategori-baslik h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.mobile-kategori-top-area .kategori-baslik .kategori-sayi {
  background: #ffffff;
  color: var(--renk1);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid rgba(38, 174, 97, 0.2);
}

/* Emlak Ofisleri Sayfası Özel Stilleri - Kibar Hero Tasarımı */
.ofisler-hero-section {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color, #e2e8f0);
}

.ofisler-hero-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ofisler-hero-title-area {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ofisler-hero-title-area i {
  font-size: 1.35rem;
  color: #10b981;
  background: #ecfdf5;
  padding: 0.45rem;
  border-radius: var(--radius-sm);
}

.ofisler-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
}

.ofisler-hero-desc {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 0;
}

/* Filtreleme ve Arama Çubuğu */
.ofisler-filter-bar {
  background: #f8fafc;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.ofisler-search-box {
  flex: 1 1 260px;
  position: relative;
}

.ofisler-search-box input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.4rem;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  background: #ffffff;
}

.ofisler-search-box input:focus {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
  outline: none;
}

.ofisler-search-box i {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.1rem;
}

.ofisler-select-box {
  flex: 0 0 170px;
}

@media (max-width: 576px) {
  .ofisler-select-box {
    flex: 1 1 40%;
  }
}

.ofisler-select-box select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
  background-color: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ofisler-select-box select:focus {
  border-color: #10b981;
  background: #ffffff;
  outline: none;
}

/* Sonuç Bilgisi */
.ofisler-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.ofisler-stats-count {
  font-weight: 600;
  color: #334155;
  font-size: 0.95rem;
}

.ofisler-stats-count span {
  color: #10b981;
  font-weight: 700;
}

/* Grid Layout */
.ofisler-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Kart Özelleştirmeleri */
.ofisler-grid .firma-premium-kart {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.ofisler-grid .firma-premium-kart:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
}

.fp-onay-rozet {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(16, 185, 129, 0.92);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Pagination Stili */
.emlak-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

.emlak-pagination .page-link-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  color: #475569;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.emlak-pagination .page-link-btn:hover {
  border-color: #10b981;
  color: #10b981;
  background: #f0fdf4;
}

.emlak-pagination .page-link-btn.active {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

/* Boş Arama Sonucu */
.ofis-bulunamadi {
  display: none;
  text-align: center;
  padding: 3.5rem 2rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  margin-top: 1.5rem;
  grid-column: 1 / -1;
}

.ofis-bulunamadi i {
  font-size: 3.5rem;
  color: #94a3b8;
  margin-bottom: 0.75rem;
}

.ofis-bulunamadi h4 {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.ofis-bulunamadi p {
  color: #64748b;
  margin-bottom: 0;
}


.haber-detay-section h2,.haber-detay-section h3{
font-size: 20px;
font-weight: 700;
}

.haber-detay-section p{
font-size: 15px;
font-weight: 300;
line-height: 1.7;
}


/* MOBİL UYARLAMA (MİNİMAL & ŞIK LİSTE VE GRID DÜZENİ) */
/* MOBİL UYARLAMA (MİNİMAL & ŞIK LİSTE VE GRID DÜZENİ) */
@media (max-width: 768px) {
  /* --- 1. MOBİL LİSTE GÖRÜNÜMÜ (.search-ilan.view-list) --- */
  .search-ilan.view-list .search-ilan-kart {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
  }

  /* Sol Görsel: 110px Kare */
  .search-ilan.view-list .search-ilan-gorsel-alani {
    grid-column: 1 !important;
    width: 110px !important;
    height: 100% !important;
    min-height: 115px !important;
    position: relative !important;
  }

  .search-ilan.view-list .search-ilan-gorsel-link,
  .search-ilan.view-list .search-ilan-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 50px;
  }

  .search-ilan.view-list .ilan-doping-etiket {
    font-size: 8px !important;
    padding: 2px 4px !important;
    top: 4px !important;
    left: 4px !important;
  }

  .search-ilan.view-list .ilan-favori-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
    bottom: 6px !important;
    right: 6px !important;
  }

  /* Sağ Taraf Detay Alanı */
  .search-ilan.view-list .search-ilan-detay-alani {
    grid-column: 2 !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }

  .search-ilan.view-list .search-ilan-meta-bar {
    display: none !important;
  }

  .search-ilan.view-list .search-ilan-baslik {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: var(--text-dark, #1e293b) !important;
  }

  .search-ilan.view-list .search-ilan-ozellikler {
    margin: auto 0 6px 0 !important;
    gap: 4px !important;
  }

  .search-ilan.view-list .ozellik-pill {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }

  .search-ilan.view-list .ozellik-pill:nth-child(n + 3) {
    display: none !important;
  }

  /* ALT SATIR SOLDA FİYAT */
  .search-ilan.view-list .search-ilan-fiyat-satir {
    margin-top: 0px !important;
    display: inline-flex !important;
  }

  .search-ilan.view-list .search-ilan-fiyat {
    font-size: 13px !important;
    white-space: nowrap !important;
    font-weight: 600;
  }

  /* ALT SATIR SAĞDA AYNI HİZADA ADRES (Sadece İl ve İlçe, Mahalle Yok) */
  .search-ilan.view-list .search-ilan-sag-panel {
    position: absolute !important;
    bottom: 8px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 55% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .search-ilan.view-list .search-ilan-adres-kutu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  .search-ilan.view-list .adres-pin-icon {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    font-size: 12px !important;
  }

  .search-ilan.view-list .adres-detay-metin {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 11px !important;
    color: var(--text-gray, #64748b) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .search-ilan.view-list .sehir-isim {
    display: inline !important;
  }

  .search-ilan.view-list .adres-detay-metin strong {
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Mahalle Bilgisini Mobilde Gizle */
  .search-ilan.view-list .mahalle-badge {
    display: none !important;
  }

  .search-ilan .search-ilan-kart.dopingli strong {
    color: #d97706;
  }
}

/* ====================================================
   KARE / GRID GÖRÜNÜM TASARIMI (.view-grid) - 4'LÜ GALERİ
==================================================== */
.search-ilan.view-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (max-width: 767.98px) {
  .search-ilan.view-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .search-ilan.view-grid .search-ilan-kart {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
  }

  .search-ilan.view-grid .search-ilan-gorsel-alani {
    width: 100% !important;
    height: 125px !important;
  }

  .search-ilan.view-grid .search-ilan-detay-alani {
    padding: 8px !important;
  }

  .search-ilan.view-grid .search-ilan-baslik {
    font-size: 11.5px !important;
    min-height: 30px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .search-ilan.view-grid .search-ilan-meta-bar {
    display: none !important;
  }

  .search-ilan.view-grid .ozellik-pill {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  .search-ilan.view-grid .search-ilan-fiyat {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .search-ilan.view-grid .search-ilan-sag-panel {
    padding: 4px 8px !important;
  }

  .search-ilan.view-grid .adres-detay-metin strong,
  .search-ilan.view-grid .mahalle-badge {
    font-size: 10.5px !important;
  }
}

@media (min-width: 768px) {
  .search-ilan.view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .search-ilan.view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .search-ilan.view-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================================= */
/* KAPSAMLI RESPONSIVE MEDIA QUERIES (EN ALT BÖLÜM)          */
/* ========================================================= */

/* 1. MASAÜSTÜ & LAPTOP GEÇİŞİ (< 1200px) */
@media (max-width: 1199.98px) {
  .breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important; /* Alt satıra inmeyi engeller */
    overflow-x: auto !important; /* Yatay kaydırmayı açar */
    white-space: nowrap !important; /* Metinlerin kırılmasını engeller */
    -webkit-overflow-scrolling: touch !important; /* Telefondan kaydırırken yağ gibi akmasını sağlar */
    scrollbar-width: none !important; /* Firefox için kaydırma çubuğunu gizler */
    -ms-overflow-style: none !important; /* IE/Edge için kaydırma çubuğunu gizler */
    justify-content: flex-start !important; /* Ortalamayı iptal edip soldan başlatır */
    padding-bottom: 5px !important; /* Alta minik bir nefes boşluğu bırakır */
    mask-image: linear-gradient(
      to right,
      black 85%,
      transparent 100%
    ); /* En sağa doğru hafifçe silinerek kaybolma efekti (Zariflik katar) */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .page-title {
    white-space: nowrap !important; /* Metnin alt satıra geçmesini kesinlikle engeller */
    overflow-x: auto !important; /* Sağa doğru yatay kaydırmayı açar */
    -webkit-overflow-scrolling: touch !important; /* Telefondan kaydırırken yağ gibi akmasını sağlar */
    scrollbar-width: none !important; /* Firefox için kaydırma çubuğunu gizler */
    -ms-overflow-style: none !important; /* IE/Edge için çubuğu gizler */
  }

  /* Chrome, Safari ve iOS için çirkin kaydırma çubuğunu tamamen gizler */
  .page-title::-webkit-scrollbar {
    display: none !important;
  }

  /* Chrome, Safari ve iOS için çirkin kaydırma çubuğunu (scrollbar) gizler */
  .breadcrumb::-webkit-scrollbar {
    display: none !important;
  }

  /* Linklerin ve ikonların daralıp ezilmesini engeller */
  .breadcrumb-item {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .profile-nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 5px 0;
    margin: 0;
  }

  .profile-nav-menu::-webkit-scrollbar {
    display: none;
  }

  .profile-nav-menu li {
    flex-shrink: 0;
    /* Daralmayı engeller */
  }

  .profile-nav-menu li a {
    white-space: nowrap;
    /* Metni alt satıra atmaz */
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    /* Buton hissiyatı verir */
    background-color: #fff;
  }

  .profile-nav-menu li.active a {
    background-color: var(--soft-green-bg);
    border-color: var(--renk1);
  }

  .profile-summary-card {
    padding: 16px;
    text-align: left;
    /* Metinleri sola hizala */
    display: grid;
    grid-template-columns: auto 1fr;
    /* Sol kolon avatar boyutunda, sağ kolon kalanı kaplar */
    grid-template-areas:
      "avatar isim"
      "avatar rozet"
      "menu menu";
    /* Menü en altta boydan boya uzanır */
    column-gap: 16px;
    /* Fotoğraf ile yazılar arası boşluk */
    row-gap: 4px;
    /* İsim ile rozet arası boşluk */
    align-items: center;
    /* Dikeyde ortala */
  }

  /* 1. Avatarı Küçült ve Sola Al */
  .profile-avatar-wrapper {
    grid-area: avatar;
    /* Izgarada "avatar" alanına yerleştir */
    width: 65px;
    height: 65px;
    margin: 0;
    /* Ortalamayı iptal et */
  }

  .profile-avatar-img {
    font-size: 30px;
    /* İçindeki ikonu küçült */
    border-width: 2px;
  }

  .profile-avatar-edit-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-width: 1.5px;
  }

  /* 2. İsmi Konumlandır ve Boyutlandır */
  .profile-name {
    grid-area: isim;
    margin: 0;
    font-size: 16px;
    align-self: end;
    /* Altındaki rozete yakın dursun */
  }

  /* 3. Rozeti Konumlandır */
  .profile-type-badge {
    grid-area: rozet;
    margin: 0;
    justify-self: start;
    /* Sadece kendi boyutu kadar yer kaplasın */
    padding: 2px 10px;
    font-size: 11px;
    align-self: start;
    /* Üstündeki isme yakın dursun */
  }

  /* 4. Kaydırmalı Menü Alanı */
  .profile-nav-kapsayici {
    grid-area: menu;
    margin-top: 12px;
    /* Üst kısımla arasına minik bir boşluk */
  }

  .site-header {
    height: calc(46px + env(safe-area-inset-top, 0px));
  }

  .section-head-title {
    justify-content: center !important;
  }

  .head-title .title-baslik {
    font-size: 20px;
  }

  .header-search-btn {
    background: transparent;
    position: absolute;
    right: 10px;
    color: var(--renk1);
  }

  .header-search-btn i {
    font-weight: 700;
  }

  .header-search-input {
    padding: 12px 16px;
    height: auto;
    font-size: 14px;
    color: var(--text-dark);
    font-family: inherit;
    outline: none;
  }

  .home-arama {
    background: var(--renk1);
    text-align: center;
    padding-bottom: 130px;
    padding-top: 20px;
    margin-bottom: -100px;
  }

  .site-header {
    border: none !important;
    background: var(--renk1);
  }

  .home-arama h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .home-arama p {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
  }

  .kategori-menu .kategori-icerik {
    margin-bottom: 6px;
  }

  .kategori-baslik {
    padding: 16px 16px;
  }

  .page-title {
    font-size: 17px;
  }

  .header-overlay {
    z-index: 1055;
  }

  .sag-kolon-icerik {
    width: 100% !important;
  }

  .kategori-menu:not(.ic-sayfa-agaci) .kategori-grup {
    display: none !important;
  }

  .search-data {
    font-size: 13px;
  }

  /* Mobil Aksiyon Paneli (Eşit Genişlik 3 Buton & Sticky Top Under Site Header) */
  .mobile-actions-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    position: sticky !important;
    top: 46px !important;
    z-index: 999 !important;
    background: #ffffff !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0px;
  }

  .m-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    background: var(--bg-light, #f8fafc) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-dark, #1e293b) !important;
    cursor: pointer !important;
    width: 100% !important;
    min-width: 0 !important;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease !important;
    position: relative;
  }

  .m-action-btn span.sayi {
    width: 14px;
    height: 14px;
    background: #d90000;
    color: #fff;
    border-radius: var(--radius-tam);
    display: inline-flex;
    align-items: center;
    position: absolute;
    justify-content: center;
    right: 4px;
    top: 4px;
    font-size: 9px;
    font-weight: 700;
  }

  .m-action-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    text-align: left;
    line-height: 1.25;
    width: 100%;
    min-width: 0;
  }

  .m-action-btn-text > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .m-btn-subtext {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-gray, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
  }

  .m-action-btn:hover,
  .m-action-btn:active {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
  }

  .m-action-btn i {
    font-size: 18px !important;
    color: var(--renk1, #26ae61) !important;
    flex-shrink: 0;
  }

  .m-badge {
    background: var(--renk1, #26ae61);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
  }

  /* Mobil/Tablet sol-kolon-sidebar Offcanvas Çekmece Düzenlemeleri */
  .sol-kolon-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* Eski height: 100vh yerine aşağıdakileri ekleyin: */
    height: 100vh !important; /* Eski tarayıcılar için yedek */
    height: 100dvh !important; /* Modern çözüm */
    z-index: 1060 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform;
    margin: 0 !important;
  }

  .sol-kolon-sidebar.is-mobile-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-sidebar-header {
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
    flex-shrink: 0;
  }

  .btn-sidebar-reset {
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--danger-red);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
  }

  .btn-sidebar-reset:hover {
    background-color: #fef2f2;
  }

  .btn-sidebar-close {
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--text-dark);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .sol-kolon-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sol-kolon-sidebar .sol-filtre,
  .sol-kolon-sidebar .sf-kart {
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .sol-kolon-sidebar .sf-submit-wrapper {
    position: sticky !important;
    bottom: -16px !important; /* Kutunun 16px'lik alt boşluğunu sıfırlar */
    margin: auto -16px -16px -16px !important; /* Sağa, sola ve en alta tam yapışmasını sağlar */
    padding: 12px 16px !important; /* Ekstra boşlukları sildik, normal hale getirdik */
    background: #ffffff !important;
    border-top: 1px solid var(--border-color) !important;
    z-index: 1040 !important;
  }

  .search-ilan-kart.favori-kart {
    flex-direction: column;
  }

  .search-ilan-kart.favori-kart .search-ilan-gorsel-alani {
    width: 100%;
    height: 180px;
  }

  /* Aksiyon butonlarını yatay ve en alta al */
  .search-ilan-kart.favori-kart .fav-item-actions {
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding: 12px 15px;
    justify-content: space-between;
    gap: 10px;
  }

  .btn-fav-item-view,
  .btn-fav-item-delete {
    flex: 1;
    /* Butonlar %50 - %50 eşit uzar */
    padding: 10px;
  }
}

/* 2. TABLET DİKEY EKRANLAR (< 992px) */
@media (max-width: 991.98px) {
  .filtre-header {
    padding: 0px !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 7px !important;
  }

  .ilan-detay-grid {
    grid-template-columns: 1fr !important;
  }

  .fav-page-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ilan-detay-title {
    font-size: 16px;
  }

  .fav-page-list {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* CSS Grid ile harika mobil yerleşim */
  .search-ilan-kart.favori-kart {
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "gorsel detay"
      "aksiyon aksiyon";
    /* Butonlar en altı tam kaplar */
  }

  .search-ilan-kart.favori-kart .search-ilan-gorsel-alani {
    grid-area: gorsel;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px;
  }

  .search-ilan-kart.favori-kart .search-ilan-detay-alani {
    grid-area: detay;
    padding: 12px 16px;
  }

  .search-ilan-kart.favori-kart .fav-item-actions {
    grid-area: aksiyon;
    padding: 10px;
  }
}

/* 3. MOBİL YATAY & BÜYÜK TELEFONLAR (< 768px) */
@media (max-width: 767.98px) {
  .fav-page-list {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .site-header {
    padding: 10px 0;
  }

  .footer-left-sidebar {
    text-align: center;
  }

  .app-download-section .d-flex {
    justify-content: center;
  }

  .search-ilan-kart.favori-kart {
    grid-template-columns: 130px 1fr;
    /* Görseli biraz daralt */
  }

  .search-ilan-kart.favori-kart .search-ilan-baslik {
    font-size: 13.5px;
    margin-bottom: 8px;
  }

  .search-ilan-kart.favori-kart .search-ilan-fiyat {
    font-size: 15px;
  }

  .search-ilan-kart.favori-kart .fav-item-loc {
    font-size: 11px;
  }
}

/* 4. MOBİL DİKEY TELEFONLAR (< 576px) */
@media (max-width: 575.98px) {
  .mobile-bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .ilan-grid-alani {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .device-item-card {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon info"
      "btn btn";
    /* Buton en altta tam genişlik kaplar */
    gap: 12px;
    padding: 14px;
  }

  .device-icon-box {
    grid-area: icon;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .device-info {
    grid-area: info;
    min-width: 0;
    /* Taşkınlıkları önler */
  }

  /* İsim ve Rozeti alt alta alıyoruz */
  .device-name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
  }

  .device-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .current-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .device-meta {
    gap: 6px;
  }

  /* Araya koyduğunuz Noktaları (•) mobilde gizle */
  .device-meta span:nth-child(even) {
    display: none !important;
  }

  /* Bilgileri küçük şık etiketler (pill) haline getir */
  .device-meta span:nth-child(odd) {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Kapat Butonunu tam ekran yap */
  .btn-revoke-device {
    grid-area: btn;
    width: 100%;
    justify-content: center;
    padding: 10px;
    margin-top: 4px;
    font-size: 13px;
  }

  /* Başlık ve Butonu Alt Alta Al */
  .settings-card-title {
    flex-direction: column;
    align-items: flex-start !important;
    /* d-flex align-items-center sınıfını ezer */
    gap: 12px;
    padding-bottom: 16px;
  }

  /* Başlık Metni */
  .settings-card-title > div {
    font-size: 15px;
    /* Mobilde fontu bir tık küçültür */
    width: 100%;
  }

  /* Diğer Oturumları Kapat Butonu */
  .settings-card-title .btn-noti-action {
    width: 100%;
    /* Butonu tam ekran yapar */
    justify-content: center;
    /* İkon ve metni ortalar */
    padding: 10px;
  }

  .search-ilan-kart.favori-kart {
    grid-template-columns: 110px 1fr;
    /* Görseli minimum seviyeye indir */
    border-radius: var(--radius-sm);
  }

  .search-ilan-kart.favori-kart .search-ilan-gorsel-alani {
    min-height: 115px;
  }

  /* Badge'leri küçük ekrana uyarla */
  .fav-item-badge {
    font-size: 8px;
    padding: 2px 6px;
    top: 6px;
    left: 6px;
  }

  .fav-price-drop-badge {
    font-size: 8px;
    padding: 2px 6px;
    bottom: 6px;
    left: 6px;
  }

  .search-ilan-kart.favori-kart .search-ilan-detay-alani {
    padding: 8px 10px;
  }

  .search-ilan-kart.favori-kart .search-ilan-baslik {
    font-size: 12.5px;
    line-height: 1.35;
    margin-bottom: 6px;
    /* Sadece 2 satır gösterip sonuna üç nokta koyar */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .search-ilan-kart.favori-kart .ozellik-pill {
    font-size: 9.5px;
    padding: 2px 5px;
  }

  /* Mobilde Fiyat ve Konumu Alt Alta Al */
  .fav-item-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
  }

  .search-ilan-kart.favori-kart .search-ilan-fiyat {
    font-size: 14px;
    font-weight: 800;
  }

  /* Butonları İyice Sıkıştır */
  .search-ilan-kart.favori-kart .fav-item-actions {
    padding: 8px;
    gap: 8px;
  }

  .btn-fav-item-view,
  .btn-fav-item-delete {
    font-size: 11.5px;
    padding: 8px 4px;
    border-radius: 6px;
  }
}

/* 5. CİHAZ YAN ÇEVİRME (ORIENTATION: LANDSCAPE) KORUMA AYARLARI */
@media (max-width: 991.98px) and (orientation: landscape) {
  .page-title {
    font-size: 16px;
  }

  .mobile-cat-overlay {
    height: 100vh;
  }

  .mobile-cat-header {
    height: 48px;
    padding: 0 12px;
  }

  .bottom-sheet-container {
    max-height: 88vh !important;
    overflow-y: auto !important;
  }

  .mobile-bottom-nav {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    height: auto;
  }

  .m-cat-btn {
    padding: 10px 16px;
  }

  .search-ilan-kart.favori-kart {
    grid-template-columns: 140px 1fr;
  }

  .search-ilan-kart.favori-kart .search-ilan-gorsel-alani {
    min-height: 100px;
    height: 100%;
  }

  .search-ilan-kart.favori-kart .search-ilan-detay-alani {
    padding: 8px 12px;
  }

  .search-ilan-kart.favori-kart .fav-item-actions {
    padding: 6px 12px;
  }

  .btn-fav-item-view,
  .btn-fav-item-delete {
    padding: 6px 10px;
  }
}

.renkbg,
button.renkbg,
a.renkbg {
  background-color: var(--renk1) !important;
  color: #ffffff !important;
  border: none !important;
}

.renkbg:hover,
button.renkbg:hover,
a.renkbg:hover {
  background-color: var(--primary-dark-green) !important;
  color: #ffffff !important;
}

/* ====================================================
   NATIVE APP (WEBVIEW) ADAPTASYONLARI
==================================================== */

/* 1. iOS Sekme (Rubber-Band) Etkisini İptal Etme */
html.is-webview,
html.is-webview body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* 2. Modallar açıkken arkadaki sayfanın kaymasını KESİNLİKLE engelle */
.bottom-sheet-content,
.sol-kolon-body,
.mobile-cat-panel,
.sol-filtre-popup-list,
.sol-filtre-popup-body {
  overscroll-behavior: contain; /* Kaydırma zincirini (scroll-chaining) kırar */
}

/* 3. Tıklama gecikmelerini ve mavi highlight'ı tüm listelerde kaldır */
.sol-filtre-popup-item,
.m-cat-btn,
.bs-menu-item,
.noti-page-card,
.device-item-card,
.kategori-ana-link,
.kategori-baslik {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none; /* Metin seçme/kopyalama baloncuğunu engeller */
  -webkit-user-select: none;
}

@media (max-width: 1199px) {

      .tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    opacity: 1;
    transform: scale(1) rotate(-90deg);
    color: var(--danger-red);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    margin-left: 8px;
  }

  .magic-tag {
    padding: 0.4rem 0.5rem;
    margin: 3px 0px;
  }

  /* 1. Mobil cihazlardaki "Transform" katman hapsini kırıyoruz */
  .sol-kolon-sidebar.is-mobile-open {
    transform: none !important;
    left: 0 !important;
  }

  /* 2. İOS / ANDROİD KESİLME (CLIPPING) SORUNU ÇÖZÜMÜ */
  /* İl Seçim popup'ı açıldığında, ana gövdenin taşma/kesme sınırlarını geçici olarak kaldırıyoruz */
  .sol-kolon-body:has(.sol-filtre-popup-overlay.is-open) {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* 3. Popup açıldığında soruna yol açan "Filtrele" başlığını görünmez yapıyoruz (Zaten popup tam ekran olacak) */
  .sol-kolon-sidebar:has(.sol-filtre-popup-overlay.is-open)
    .mobile-sidebar-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 4. İl seçim penceresini gerçek anlamda tam ekran (Viewport) yapıyoruz */
  .sol-filtre-popup-overlay.is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999999 !important;
  }
}
/* ====================================================
   MASAÜSTÜ (WEB): İLANLARI ARA BUTONU SABİTLEMESİ
==================================================== */
@media (min-width: 1200px) {
    /* 1. Sticky'i (yapışmayı) bozan engelleri masaüstü için kaldırıyoruz */
    .page-icerik,
    .sol-filtre-kapsayici,
    .sol-kolon-sidebar {
        overflow: visible !important;
    }

    /* 2. Butonu alanın en altına kesin olarak mühürlüyoruz */
    .sol-filtre .sf-submit-wrapper {
        position: sticky !important;
        bottom: 0 !important;
        background: #ffffff !important; /* Altından yazı geçmesini engeller */
        padding: 10px 0 !important;
        margin-bottom: 0 !important;
        z-index: 999 !important;
    }
}