/* =====================================================================
   FLEET 2026 — araç kartı sistemi (flt-*)
   Tamamen bağımsız isim alanı: eski .ccm-* / .car-list-single kuralları
   (ki bunlar !important ile yazılmış) bu tasarıma dokunmaz.
   Kullanım: container .flt-grid, hücre .flt-cell, kart .flt-card
   ===================================================================== */

.flt-grid {
  --flt-ink: #0c0e12;
  --flt-ink-2: #5b6270;
  --flt-ink-3: #8d94a1;
  --flt-line: #e7e9ee;
  --flt-line-2: #f0f2f5;
  --flt-surface: #ffffff;
  --flt-tint: #f6f7f9;
  --flt-accent: var(--theme-primary, #d6001c);
  --flt-radius: 18px;

  display: grid;
  /* Kolon sayısı viewport'a değil KONTEYNER genişliğine göre belirlenir:
     dar bir alana konsa da kartlar ezilmez, sadece kolon sayısı düşer. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 22px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* PHP notice / whitespace yüzünden oluşan hayalet grid hücrelerini gizle */
.flt-grid > *:empty,
.flt-grid > br,
.flt-grid > p:empty { display: none; }

/* Hücre: filtre scriptleri bu elemanı display:none yapabildiği için
   grid item olarak sade tutuluyor. */
.flt-grid > .flt-cell {
  display: flex;
  min-width: 0;
  container-type: inline-size;
}
.flt-grid > .flt-cell > * { width: 100%; }

/* ------------------------------- KART ------------------------------- */
.flt-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  background: var(--flt-surface);
  border: 1px solid var(--flt-line);
  border-radius: var(--flt-radius);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.flt-card:hover {
  border-color: #d3d7df;
  box-shadow: 0 18px 40px -22px rgba(12, 14, 18, .38);
  transform: translateY(-2px);
}

/* ------------------------------ MEDYA ------------------------------- */
.flt-media {
  position: relative;
  display: block;
  background: #eef0f3;
  overflow: hidden;
}
.flt-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flt-track::-webkit-scrollbar { display: none; }

.flt-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  background: #eef0f3;
}
.flt-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.flt-card:hover .flt-slide img { transform: scale(1.035); }

.flt-noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b9bfc9;
  font-size: 42px;
}

/* Rozetler: küçük, tipografik, gradient yok */
.flt-tag {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 14, 18, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  max-width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.flt-year {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--flt-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Vurgulu bayrak (indirim vb.) — sağ üst */
.flt-flag {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--flt-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.flt-dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.flt-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(12, 14, 18, .18);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.flt-dot.active { width: 18px; background: #fff; }

/* ------------------------------ GÖVDE ------------------------------- */
.flt-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 16px 16px;
  gap: 14px;
}

/* Başlık satırı: model adı + sağda detay bağlantısı */
.flt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.flt-name {
  margin: 0;
  min-width: 0;
  color: var(--flt-ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  /* Uzun model adlarında kart yüksekliğini sabit tut */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.2em);
}

/* Spec tablosu: ikon-çip yerine mikro-tipografili veri satırı */
.flt-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--flt-line-2);
  border-bottom: 1px solid var(--flt-line-2);
}
.flt-spec {
  min-width: 0;
  padding: 10px 8px;
  border-left: 1px solid var(--flt-line-2);
}
.flt-spec:first-child { border-left: 0; padding-left: 0; }
.flt-spec dt {
  margin: 0 0 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flt-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flt-spec dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--flt-ink);
  line-height: 1.2;
  /* "Manuel / Otomatik" gibi uzun değerler kesilmek yerine iki satıra sarsın */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Fiyat bandı */
.flt-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--flt-tint);
  min-width: 0;
}
.flt-price__col { min-width: 0; }
.flt-price__col--alt { text-align: right; }
.flt-price__lbl {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--flt-ink-3);
  margin-bottom: 3px;
  white-space: nowrap;
}
.flt-price__big {
  display: block;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--flt-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flt-price__sm {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--flt-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.flt-price__old {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--flt-ink-3);
  text-decoration: line-through;
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Bilgi bağlantıları satırı (kasko / depozito) */
.flt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: -4px 0 0;
  min-width: 0;
}
.flt-links button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--flt-ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  line-height: 1.3;
}
.flt-links button:hover { color: var(--flt-ink); border-bottom-color: currentColor; }

/* Rezervasyon: kart tıklanabilir */
.flt-card.vehicle-tile { cursor: pointer; }
.flt-card.vehicle-tile.is-selected {
  border-color: var(--flt-ink);
  box-shadow: 0 0 0 2px var(--flt-ink) inset;
}

/* Depozito gibi ikincil bilgi satırı */
.flt-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--flt-ink-2);
  min-width: 0;
}
.flt-note i { font-size: 14px; color: var(--flt-ink-3); }

/* Aksiyonlar */
.flt-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
}

.flt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  min-width: 0;
}
.flt-btn:active { transform: translateY(1px); }
.flt-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flt-btn--primary { background: var(--flt-ink); color: #fff; }
.flt-btn--primary:hover { background: var(--flt-accent); color: #fff; }

.flt-btn--ghost {
  background: #fff;
  color: var(--flt-ink);
  border-color: var(--flt-line);
  width: 46px;
  padding: 0;
  font-size: 19px;
}
.flt-btn--ghost:hover { border-color: var(--flt-ink); }
.flt-btn--wa:hover { border-color: #25d366; color: #128c3e; }

/* Detay bağlantısı: başlık satırının sağında ince metin */
.flt-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--flt-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}
.flt-detail:hover { color: var(--flt-ink); border-bottom-color: currentColor; }

/* Dar kartta spec tablosunu 2x2'ye düşür (taşma yerine sarma).
   Kart genişliğine bakar, ekran genişliğine değil. */
@container (max-width: 360px) {
  .flt-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flt-spec:nth-child(odd) { border-left: 0; padding-left: 0; }
  .flt-spec:nth-child(n+3) { border-top: 1px solid var(--flt-line-2); }
  .flt-price__big { font-size: 22px; }
  .flt-name { font-size: 18px; }
  .flt-body { padding: 14px; gap: 12px; }
}

/* =====================================================================
   V2 — index.php / araclar.php araç kartı
   Ad ve teknik bilgiler görselin üzerinde, altta iki fiyatlı denk band.
   Tüm kurallar .flt-card--v2 kapsamında: reservation.php'nin varyantsız
   .flt-card kutuları bu bloktan etkilenmez.
   ===================================================================== */
.flt-card--v2 { position: relative; }
.flt-card--v2 .flt-slide { aspect-ratio: 4 / 3; }

/* Filo fotoğraflarının üst şeridi açık gri showroom tavanı olduğu için
   beyaz başlığın altındaki koyu perde opsiyonel değil, zorunlu. */
.flt-card--v2 .flt-scrim {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 84%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 8, 12, .90) 0%,
    rgba(6, 8, 12, .82) 22%,
    rgba(6, 8, 12, .68) 36%,
    rgba(6, 8, 12, .34) 52%,
    rgba(6, 8, 12, .08) 72%,
    rgba(6, 8, 12, 0) 100%);
}

.flt-card--v2 .flt-tag,
.flt-card--v2 .flt-year { pointer-events: none; }
.flt-card--v2 .flt-tag--accent {
  background: var(--flt-accent);
  backdrop-filter: none;
}
.flt-card--v2 .flt-year {
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Görsel üzerindeki ad + teknik çipler */
.flt-card--v2 .flt-over {
  position: absolute;
  z-index: 3;
  top: 46px;
  left: 15px;
  right: 15px;
  pointer-events: none;
}
/* Tek satırlık adlarda ikinci satırı boş tutmuyoruz: çipler perdenin
   koyu bölgesinden çıkıp aracın gövdesi üzerine düşmesin. */
.flt-card--v2 .flt-name {
  margin: 0 0 9px;
  min-height: 0;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.flt-card--v2 .flt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flt-card--v2 .flt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(255, 255, 255, .94);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.flt-card--v2 .flt-chips i { flex: 0 0 auto; font-size: 13px; opacity: .82; }
.flt-card--v2 .flt-chips span {
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flt-card--v2 .flt-dots { z-index: 4; }
.flt-card--v2 .flt-body { padding: 15px 16px 16px; gap: 12px; }

/* Fiyat bandı: etiketler tek satırda, tutarlar ortak taban çizgisinde.
   Satır hizası garanti olsun diye hücreler açıkça yerleştiriliyor. */
.flt-card--v2 .flt-pricebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  /* Kutu altı yerine gerçek yazı çizgisi: iki farklı punto tutar aynı
     çizgiye oturur, aksi halde büyük punto 3-4 px aşağı kayıyor. */
  align-items: baseline;
  text-align: center;
  padding: 2px 0 4px;
}
.flt-card--v2 .flt-pricebar--single { grid-template-columns: minmax(0, 1fr); }
.flt-card--v2 .flt-pb-l1 { grid-area: 1 / 1; }
.flt-card--v2 .flt-pb-v1 { grid-area: 2 / 1; }
.flt-card--v2 .flt-pb-l2 { grid-area: 1 / 3; }
.flt-card--v2 .flt-pb-v2 { grid-area: 2 / 3; }
.flt-card--v2 .flt-pricebar__sep {
  grid-area: 1 / 2 / 3 / 3;
  width: 1px;
  justify-self: center;
  align-self: stretch;
  background: var(--flt-line);
}
.flt-card--v2 .flt-price__lbl { margin-bottom: 5px; }
.flt-card--v2 .flt-price__big { font-size: 27px; color: var(--flt-accent); }
.flt-card--v2 .flt-price__mid {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--flt-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Depozito: kart genişliğinde, içeriği ortalı şerit */
.flt-card--v2 .flt-dep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* İç boşluk genişliğe eklenmesin: aksi halde şerit gövdeyi taşırıyor. */
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--flt-line);
  border-radius: 10px;
  background: var(--flt-tint);
  color: var(--flt-ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.flt-card--v2 .flt-dep i { font-size: 14px; color: var(--flt-ink-3); }

/* Detay bağlantısı: ana aksiyonun altında üçüncül, ortalı */
.flt-card--v2 .flt-detail {
  position: relative;
  z-index: 3;
  align-self: center;
  margin-top: -2px;
  font-size: 12px;
}

.flt-card--v2 .flt-actions { position: relative; z-index: 3; }
.flt-card--v2 .flt-btn--primary {
  min-height: 48px;
  background: var(--flt-accent);
  color: #fff;
}
.flt-card--v2 .flt-btn--primary:hover { background: var(--flt-ink); }

/* Kartın tamamını tıklanabilir yapan şeffaf katman. Nokta göstergeleri,
   detay bağlantısı ve aksiyon butonları daha üstte kalır. */
.flt-card--v2 .flt-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  font-size: 0;
}

@container (max-width: 360px) {
  .flt-card--v2 .flt-name { font-size: 18px; }
  .flt-card--v2 .flt-chips { gap: 5px 9px; }
  .flt-card--v2 .flt-chips li { font-size: 11px; }
  .flt-card--v2 .flt-price__big { font-size: 24px; }
  .flt-card--v2 .flt-price__mid { font-size: 18px; }
  .flt-card--v2 .flt-dep { padding: 7px 10px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .flt-card, .flt-slide img, .flt-btn { transition: none; }
  .flt-card:hover { transform: none; }
}