/* css/style.css */

/* Genel Stiller ve Temel Ayarlar */
:root {
  /* Ana renk paletini burada tanımlayabilirsiniz */
  --primary-color: #0d6efd; /* Bootstrap'in varsayılan mavisi, bunu değiştirebilirsiniz */
  --secondary-color: #6c757d;
  --success-color: #198754;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --link-color: #E67E22; /* Örnek özel link rengi */
}

html {
  scroll-behavior: smooth; /* Sayfa içi linklerde yumuşak kaydırma */
}

body {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Örnek Font */
  line-height: 1.6;
  color: #333; /* Ana metin rengi */
}

a {
  color: var(--link-color);
  text-decoration: none; /* Varsayılan alt çizgiyi kaldır */
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: darken(var(--link-color), 10%); /* Hover rengini biraz koyulaştır */
  text-decoration: underline; /* Hover'da alt çizgi ekle */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* Başlıkları biraz daha kalın yap */
}


/* Navbar Özelleştirmeleri */
.navbar {
  border-bottom: 1px solid #eee;
}

.navbar .nav-link {
  font-weight: 500;
  color: #555 !important; /* Navbar link rengi */
  padding-left: 1rem;
  padding-right: 1rem;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--primary-color) !important; /* Aktif ve hover link rengi */
}

/* Dil seçici dropdown */
#languageDropdown img {
  margin-bottom: 2px; /* Bayrak ile metin arasını ayarla */
}

.dropdown-menu {
  border-radius: 0.5rem; /* Dropdown kenarlarını yuvarlat */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Dropdown gölgesi */
}

.dropdown-item img {
   margin-right: 0.5rem;
}

/* Hero / Arama Bölümü */
.hero-section { /* HTML'de bu class yoktu, gerekirse section'a ekleyebilirsiniz */
  background-color: var(--light-color); /* Açık gri arka plan */
}

.hero-section .display-5 {
  color: var(--dark-color);
}

.hero-section .form-control-lg {
  border-radius: 0.5rem 0 0 0.5rem; /* Arama kutusu sol kenarları */
}
.hero-section .btn-lg {
  border-radius: 0 0.5rem 0.5rem 0; /* Arama butonu sağ kenarları */
}


/* Kategori Kartları */
.category-link {
  display: block;
  height: 100%;
}

.category-card {
  border: 1px solid #eee;
  border-radius: 0.75rem; /* Daha yuvarlak kenarlar */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #fff;
}

.category-card:hover {
  transform: translateY(-5px); /* Hafif yukarı kalkma efekti */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Daha belirgin gölge */
  border-color: var(--primary-color);
}

.category-card i {
  transition: color 0.2s ease-in-out;
  /* Farklı ikon renkleri için HTML'de text-* sınıfları kullanıldı,
     burada genel bir renk de atanabilir veya hover'da değiştirilebilir */
  color: var(--secondary-color); /* Varsayılan ikon rengi */
}

.category-card:hover i {
   color: var(--primary-color); /* Hover'da ikon rengini değiştir */
}

.category-card h6 {
  margin-bottom: 0;
  font-size: 0.9rem;
}


/* İlan Kartları (Vitrin) */
.listing-card {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden; /* Resmin karttan taşmasını önle */
  transition: box-shadow 0.3s ease-in-out;
}

.listing-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.listing-card .card-img-top {
  width: 100%;
  height: 180px; /* Resim yüksekliğini sabitle */
  object-fit: cover; /* Resmin orantısını koruyarak alanı kaplamasını sağla */
}

.listing-card .card-body {
  padding: 1rem;
}

.listing-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  /* Uzun başlıklar için iki satır sınırı ve ... */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em; /* Yaklaşık 2 satır yükseklik */
}

.listing-card .card-text.small {
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.listing-card .card-text.fs-5 { /* Fiyat */
  color: var(--primary-color);
}

.listing-card .badge {
  font-size: 0.7rem;
  padding: 0.4em 0.6em;
}


/* Buton Özelleştirmeleri */
.btn {
  border-radius: 0.3rem; /* Buton kenar yuvarlaklığı */
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.btn-lg {
   padding: 0.75rem 1.5rem;
   font-size: 1.1rem;
}

.btn-primary {
  background-color: var(--link-color); /* Ana butonu link rengi yap */
  border-color: var(--link-color);
}

.btn-primary:hover {
  background-color: darken(var(--link-color), 10%);
  border-color: darken(var(--link-color), 12%);
}

.btn-warning {
  /* İsterseniz sarı butonu da özelleştirin */
  /* background-color: #f39c12; */
  /* border-color: #f39c12; */
  color: #333; /* Sarı üzerine koyu renk metin daha okunaklı olabilir */
}


/* Footer Stilleri */
footer {
  background-color: var(--dark-color); /* Koyu footer */
}

footer h5 {
  color: var(--warning-color); /* Footer başlıkları için uyarı rengi */
  margin-bottom: 1.25rem;
}

footer p, footer a {
  color: rgba(255, 255, 255, 0.7); /* Soluk beyaz metin ve linkler */
  font-size: 0.9rem;
}

footer a:hover {
  color: #fff; /* Hover'da tam beyaz */
  text-decoration: none; /* Footer linklerinde alt çizgiyi kaldır */
}

footer hr {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .list-inline-item a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem; /* Sosyal medya ikon boyutu */
  transition: color 0.2s ease;
}

footer .list-inline-item a:hover {
  color: #fff;
}


/* Yardımcı Sınıflar (İsteğe bağlı) */
.sticky-lg-top { /* ilan-detay sayfasındaki sağ sütun için */
    @media (min-width: 992px) { /* Sadece large ekranlarda sticky */
        position: sticky;
        top: 80px; /* Navbar yüksekliğine göre ayarlayın */
        z-index: 1019; /* Navbarın altında kalmaması için */
    }
}

/* Daha küçük ekranlar için responsive ayarlamalar (Gerekirse) */
/* @media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }
} */