/* =========================================================
   VEHICLE DETAIL UI (Page Scoped)
   Requires wrapper: .vehicle-detail on the page container
   ========================================================= */

.vehicle-detail{
  /* Brand -> only accents */
  --vd-primary: var(--primary-color, #3e6964);
  --vd-accent:  var(--accent-color,  #00bfa5);

  /* Neutral soft surfaces */
  --vd-bg:      #f6f7f9;
  --vd-surface: #ffffff;
  --vd-surface2:#f1f5f9;
  --vd-border:  rgba(15,23,42,.10);

  /* Text */
  --vd-text:    #0f172a;
  --vd-muted:   #64748b;

  /* Radius & shadows */
  --vd-radius:  18px;
  --vd-radius2: 22px;
  --vd-shadow-sm: 0 10px 26px rgba(15,23,42,.06);
  --vd-shadow:    0 18px 50px rgba(15,23,42,.10);

  /* Focus ring */
  --vd-ring: 0 0 0 .22rem rgba(0,191,165,.22);

  /* Page background feel */
  position: relative;
}

.vehicle-detail::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1;
  background:
    radial-gradient(800px 420px at 12% 0%, rgba(0,191,165,.10), transparent 60%),
    radial-gradient(640px 360px at 92% 14%, rgba(62,105,100,.10), transparent 55%),
    linear-gradient(180deg, var(--vd-bg), #ffffff);
}

/* Typography polish */
.vehicle-detail h1{
  color: var(--vd-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.35rem);
}
.vehicle-detail p{
  color: var(--vd-muted);
}

/* Generic card upgrade (only inside this page) */
.vehicle-detail .card{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border) !important;
  border-radius: var(--vd-radius2) !important;
  box-shadow: var(--vd-shadow-sm) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.vehicle-detail .card:hover{
  transform: translateY(-2px);
  box-shadow: var(--vd-shadow) !important;
  border-color: rgba(0,191,165,.22) !important;
}

/* Image card */
.vehicle-detail .card-img-top{
  border-top-left-radius: var(--vd-radius2) !important;
  border-top-right-radius: var(--vd-radius2) !important;
}
.vehicle-detail .position-relative::after{
  /* subtle image overlay for premium */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(2,6,23,0) 50%, rgba(2,6,23,.10) 100%);
}

/* "Yeni" badge -> pill, soft, not screaming yellow */
.vehicle-detail .badge.bg-warning{
  background: rgba(245,158,11,.16) !important;
  color: #7c4a00 !important;
  border: 1px solid rgba(245,158,11,.20) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
  backdrop-filter: blur(6px);
}

/* Info card title ("Araç Bilgileri") */
.vehicle-detail .card-body h5.text-primary{
  color: var(--vd-text) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom: 1rem !important;
}
.vehicle-detail .card-body h5.text-primary i{
  color: var(--vd-accent);
}

/* Info list (icon chips + clean rows) */
.vehicle-detail ul.list-unstyled.vstack > li{
  gap: .9rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(241,245,249,.55));
  border-radius: 16px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.vehicle-detail ul.list-unstyled.vstack > li:hover{
  border-color: rgba(0,191,165,.22);
  transform: translateY(-1px);
}
.vehicle-detail ul.list-unstyled.vstack > li i{
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(0,191,165,.12);
  color: var(--vd-accent) !important;
  flex-shrink: 0;
  font-size: 1.05rem !important;
}
.vehicle-detail ul.list-unstyled.vstack > li .text-muted{
  color: var(--vd-muted) !important;
  font-weight: 700;
  letter-spacing: .01em;
}
.vehicle-detail ul.list-unstyled.vstack > li .fw-semibold{
  color: var(--vd-text);
  font-weight: 800 !important;
}

/* Firma card polish */
.vehicle-detail .card-body img[alt]{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.vehicle-detail .badge.bg-warning-subtle{
  background: rgba(245,158,11,.14) !important;
  border: 1px solid rgba(245,158,11,.18) !important;
  color: #7c4a00 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.vehicle-detail .badge.border-secondary-subtle{
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.18) !important;
  color: var(--vd-muted) !important;
  border-radius: 999px !important;
  font-weight: 800;
}

/* Comments area */
.vehicle-detail #yorumlar .card-body > .d-flex h5{
  color: var(--vd-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Each comment item (currently: .border.rounded-3.p-3.shadow-sm) */
.vehicle-detail #yorumlar .vstack > div{
  background: var(--vd-surface);
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.vehicle-detail #yorumlar .vstack > div:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(15,23,42,.10) !important;
  border-color: rgba(0,191,165,.22) !important;
}
.vehicle-detail #yorumlar .vstack > div .fw-semibold{
  color: var(--vd-text);
  font-weight: 900 !important;
}
.vehicle-detail #yorumlar .vstack > div p{
  margin-top: .65rem !important;
  color: #334155 !important;
}

/* Stars */
.vehicle-detail #yorumlar .bi-star-fill.text-warning{
  color: #f59e0b !important;
}
.vehicle-detail #yorumlar .bi-star.text-muted{
  color: rgba(100,116,139,.55) !important;
}

/* Pagination -> modern pills */
.vehicle-detail .pagination{
  gap: .35rem;
}
.vehicle-detail .page-link{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: var(--vd-text) !important;
  background: var(--vd-surface) !important;
  font-weight: 800;
  padding: .45rem .85rem;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.vehicle-detail .page-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,191,165,.22) !important;
  background: rgba(0,191,165,.06) !important;
}
.vehicle-detail .page-item.active .page-link{
  background: var(--vd-primary) !important;
  border-color: var(--vd-primary) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(62,105,100,.22);
}
.vehicle-detail .page-item.disabled .page-link{
  opacity: .55;
  box-shadow: none;
}

/* Focus ring inside this page */
.vehicle-detail .page-link:focus,
.vehicle-detail a:focus,
.vehicle-detail button:focus,
.vehicle-detail input:focus,
.vehicle-detail select:focus,
.vehicle-detail textarea:focus{
  outline: none;
  box-shadow: var(--vd-ring) !important;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .vehicle-detail ul.list-unstyled.vstack > li{
    padding: .7rem .75rem;
  }
  .vehicle-detail ul.list-unstyled.vstack > li i{
    width: 38px;
    height: 38px;
  }
}


/* =========================================================
   Typography Rebalance Patch (append to end)
   Daha estetik, daha az bold
   ========================================================= */

/* Sayfa içindeki Bootstrap weight sınıflarını yumuşat */
.vehicle-detail .fw-bold{ font-weight: 650 !important; }
.vehicle-detail .fw-semibold{ font-weight: 600 !important; }

/* Başlık daha modern: biraz daha az “çığlık” */
.vehicle-detail h1{
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Kart başlıkları (Araç Bilgileri / Yorumlar) */
.vehicle-detail .card-body h5,
.vehicle-detail #yorumlar .card-body > .d-flex h5{
  font-weight: 650 !important;
  letter-spacing: -0.01em;
}

/* Bilgi satırları: label daha küçük + değer orta kalın */
.vehicle-detail ul.list-unstyled.vstack > li .text-muted{
  font-weight: 600 !important;
  font-size: .82rem !important;
  color: rgba(71,85,105,.92) !important; /* slate-600 */
}
.vehicle-detail ul.list-unstyled.vstack > li .fw-semibold{
  font-weight: 600 !important;          /* önce çok yüksekti */
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #0f172a !important;
}

/* Açıklama metnini rahat okut */
.vehicle-detail ul.list-unstyled.vstack > li:last-child .fw-semibold{
  font-weight: 500 !important;
  line-height: 1.6;
  color: rgba(30,41,59,.95) !important; /* slate-800 */
}

/* Yorum kartları: isim orta-bold, yorum metni normal */
.vehicle-detail #yorumlar .vstack > div .fw-semibold{
  font-weight: 650 !important;
}
.vehicle-detail #yorumlar .vstack > div p{
  font-weight: 400 !important;
  line-height: 1.7;
  color: rgba(30,41,59,.92) !important;
}

/* Genel secondary/muted tonlarını biraz daha “soft” yap */
.vehicle-detail .text-secondary,
.vehicle-detail .text-muted{
  color: rgba(71,85,105,.90) !important;
}

/* =========================================================
   MOBILE SPACING FIX (append to end)
   Mobilde kenar boşluklarını azaltır
   ========================================================= */

@media (max-width: 576px){

  /* 1) Sayfanın genel sağ/sol boşluklarını azalt */
  .vehicle-detail{
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* 2) g-4 çok geniş → mobilde gutter küçült */
  .vehicle-detail .row.g-4{
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .85rem;
  }

  /* 3) Kart iç paddingleri azalt */
  .vehicle-detail .card-body.p-4{
    padding: 1rem !important;
  }
  .vehicle-detail .card-body.p-3{
    padding: .95rem !important;
  }

  /* 4) Görsel yüksekliği mobilde biraz düşsün (daha az boşluk hissi) */
  .vehicle-detail .card-img-top{
    height: 290px !important;
  }

  /* 5) Bilgi satırları iç padding azalt */
  .vehicle-detail ul.list-unstyled.vstack > li{
    padding: .6rem .65rem !important;
    border-radius: 14px !important;
  }

  /* 6) "Yeni" badge margin küçült */
  .vehicle-detail .badge{
    margin: .65rem !important;
    padding: .35rem .65rem !important;
  }

  /* 7) Yorum kartları iç padding (senin item'lar p-3 olduğu için) */
  .vehicle-detail #yorumlar .vstack > div.p-3{
    padding: .95rem !important;
  }

  /* 8) Pagination pill’ler mobilde kompakt */
  .vehicle-detail .page-link{
    padding: .38rem .68rem !important;
    font-size: .9rem;
  }
}

/* Çok küçük ekranlar için ekstra sıkılaştırma */
@media (max-width: 420px){
  .vehicle-detail{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  .vehicle-detail .card-img-top{
    height: 265px !important;
  }
}