/* ============ GENEL ============ */
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

.container-detail {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ============ CAR_DETAIL.PHP ============ */
/* Ana ve Yan Resimler (Detay Sayfası) */
.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.thumb-image {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/*
  Araç Bilgileri Kartı (Tablo gibi)
  .car-info-card => tablo
  .car-info-item => satır
  label, span => hücre
*/
.car-info-card {
  display: table;          
  width: 100%;            
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px; 
}

.car-info-item {
  display: table-row; 
}

.car-info-item label,
.car-info-item span {
  display: table-cell;  
  vertical-align: middle;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.car-info-item label {
  font-weight: bold;
  text-align: right; 
  width: 100px;        /* Dilerseniz 120px yapabilirsiniz. */
  white-space: nowrap;
  padding-right: 15px;
}

.car-info-item span {
  text-align: left;
  width: auto;
}

/* Fiyat kırmızı göstermek için (span.price) */
.car-info-item span.price {
  color: #f00;
  font-weight: bold;
  font-size: 1.1rem;
}

/* ============ PARÇA LİSTESİ (Detay) ============ */
.section-title {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
.check-list {
  list-style: none;
  padding-left: 0;
}
.check-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
}

/* ============ MARQUEE BAR (KIRMIZI ŞERİT) ============ */
.marquee-bar {
  background-color: #b00; /* koyu kırmızı */
  color: #fff;
  padding: 25px;
}
.marquee-link {
  color: #fff;
  text-decoration: none;
}
.marquee-link:hover {
  color: #ff0;
  text-decoration: underline;
}

/* ============ ALL_CARS.PHP (KART SİSTEMİ) ============ */
.car-card {
  border: 1px solid #ddd;
  background-color: #fff;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 20px;  /* Kartlar arasında dikey boşluk */
}

.car-card:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Kartın tamamı link olsun diye a etiketine özel stil */
.car-card-link {
  text-decoration: none;  
  color: inherit;         /* Link rengi normal metin rengiyle aynı */
}
.car-card-link:hover {
  text-decoration: none;  
  color: inherit;
}

/* Kart resmi - hoş bir büyüme efekti */
.car-card-img {
  overflow: hidden;
}
.car-card-img img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* büyüme animasyonu */
}
.car-card:hover .car-card-img img {
  transform: scale(1.10); /* Hover'da %110 büyüt */
}

/* Kart gövdesi */
.car-card-body {
  padding: 10px;
}

/* Başlık */
.car-card-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Alt başlık (vites, km, yakıt vb. metin) - opsiyonel */
.car-card-subtitle {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 5px;
}

/* Fiyat yazısı */
.car-card-price {
  font-size: 1.1rem;
  color: #f00;  /* Kırmızı */
  font-weight: 600;
  margin-bottom: 0; /* Ekstra alt boşluk istemiyorsanız 0 bırakın */
}

/* ============ FOOTER ============ */
.page-footer {
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
}

/* 
  ============ MOBİL DÜZENLEMELER ============ 
  Ekran 576px ve altında:
  - Body: yatay kaydırma gizlenir
  - car-info-card, car-info-item, label, span => display:block (alt alta gelir)
*/
@media (max-width: 576px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
  }

  .car-info-card {
    display: block; /* tablo yerine block */
  }
  .car-info-item {
    display: block;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
  }
  .car-info-item label,
  .car-info-item span {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal; /* Uzun metin satır kaydırsın */
    padding: 6px 0;
    border-bottom: none;
  }
  .car-info-item label {
    font-weight: bold;
    margin-bottom: 4px; /* label ile değer arasında boşluk */
  }
  .car-info-item span.price {
    font-size: 1.1rem;
    color: #f00;
    font-weight: bold;
  }

  /* Kartlarda min-height vs. gerekmez, dar ekranda otomatik hizalanır */
}