/* ════════════════════════════════════════════════════
   bagajhacmi v2  —  Bootstrap 5 Override Sheet
   Sadece Bootstrap'ın karşılayamadığı şeyler burada.
   Font: Inter  |  Accent: #D90000  |  Dark: #0f172a
════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Bootstrap Token Override ────────────────────── */
:root {
  --bs-primary:          #D90000;
  --bs-primary-rgb:      217,0,0;
  --bs-link-color:       #0f172a;
  --bs-link-color-rgb:   15,23,42;
  --bs-link-hover-color: #D90000;
  --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --bs-body-font-size:   15px;
  --bs-body-bg:          #f1f4f8;
  --bs-body-color:       #0f172a;
  --bs-border-color:     #e2e8f0;
  --bs-border-radius:    10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 14px;
  --bs-card-border-color:     transparent;
  --bs-card-box-shadow:       0 2px 10px rgba(15,23,42,.08);
  --bs-card-cap-bg:           #0f172a;
  --bs-card-cap-color:        #fff;
  --bs-table-striped-bg:      #f8fafc;
  --bs-table-bg:              #fff;

  /* Project tokens */
  --v2-dark:   #0f172a;
  --v2-dark2:  #1e293b;
  --v2-red:    #D90000;
  --v2-red-dk: #b50000;

  /* Skeleton */
  --sk-a: #e2e8f0;
  --sk-b: #f8fafc;
}

/* ── Base ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img  { max-width: 100%; height: auto; }
a    { transition: color .18s; }

/* ── Page Transition Overlay ─────────────────────── */
@keyframes sk-shimmer  { 0%{background-position:-700px 0} 100%{background-position:700px 0} }
@keyframes sk-fadeup   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes sk-pulse    { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes sk-slide    { 0%{transform:translateX(-100%)} 100%{transform:translateX(600%)} }


/* ── Skip Link ───────────────────────────────────── */
.v2-skip {
  position: absolute; top: -50px; left: 12px; z-index: 10000;
  background: var(--v2-red); color: #fff;
  padding: 8px 18px; border-radius: 0 0 6px 6px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.v2-skip:focus { top: 0; color: #fff; }

/* ── Header ──────────────────────────────────────── */
.v2-topbar {
  background: var(--v2-dark);
  padding: 7px 0 5px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.v2-logo { display: inline-flex; align-items: center; }
.v2-logo svg { height: 46px; width: auto; transition: opacity .18s; }
.v2-logo:hover svg { opacity: .88; }

.v2-tagline {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  letter-spacing: .2px;
}

.v2-topbar .bagaj-lang-switch__link {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
}
.v2-topbar .bagaj-lang-switch__link:hover { color: #fff; }
.v2-topbar .bagaj-lang-switch__link[aria-current="page"] { color: #fff; text-decoration: underline !important; }

#v2-mobile-menu .bagaj-lang-switch__link {
  color: rgba(255,255,255,.92);
}
#v2-mobile-menu .bagaj-lang-switch__link:hover { color: #fff; }
#v2-mobile-menu .bagaj-lang-switch__sep { opacity: .55 !important; }

.v2-navbar {
  background: var(--v2-red);
  height: 40px;
  display: flex; align-items: stretch;
  box-shadow: 0 2px 8px rgba(217,0,0,.3);
}
.v2-navbar .container-xl { display: flex; align-items: stretch; gap: 0; }
.v2-navbar a {
  color: rgba(255,255,255,.92); font-size: 13px; font-weight: 600;
  padding: 0 20px; display: inline-flex; align-items: center;
  letter-spacing: .2px; text-decoration: none;
  transition: background .15s, color .15s;
  border-right: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.v2-navbar a::after {
  content: ''; position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px; background: #fff;
  transition: left .2s, right .2s;
  border-radius: 2px 2px 0 0;
}
.v2-navbar a:hover { background: rgba(0,0,0,.15); color: #fff; }
.v2-navbar a:hover::after { left: 12px; right: 12px; }
.v2-navbar a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

#v2-nav-links.flex-grow-1 { min-width: 0; scrollbar-width: thin; }
.v2-navbar #v2-nav-links .v2-nav-rehber { padding: 0 10px !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
@media (max-width: 1199.98px) {
  .v2-navbar #v2-nav-links .v2-nav-rehber-xl { padding: 0 14px !important; opacity: .95; }
}

/* Rehber hub içerik */
.v2-rehber-article .rehber-prose { font-size: 14px; line-height: 1.62; color: #475569; }
.v2-rehber-article .rehber-prose strong { color: #0f172a; font-weight: 700; }
.v2-rehber-article .rehber-prose p:last-child { margin-bottom: 0; }
.v2-rehber-link { font-weight: 600 !important; }
.v2-rehber-article .table thead th { font-weight: 700; white-space: nowrap; }

.v2-rehber-fuel-tabs .nav-link {
  border-radius: 999px;
  padding: 0.42rem 1.1rem;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.v2-rehber-fuel-tabs .nav-link:hover {
  border-color: #cbd5e1;
  color: #0f172a;
  background: #f8fafc;
}
.v2-rehber-fuel-tabs .nav-link.active {
  background: var(--v2-red);
  border-color: var(--v2-red);
  color: #fff !important;
}

.v2-rehber-hero {
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 48%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
}
.v2-rehber-hero__img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.v2-rehber-seg-hero.bg-gradient-soft { background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 52%, #f1f5f9 100%); border-radius: .6rem !important; }
.v2-rehber-seg-label { letter-spacing: .04em; font-size: .68rem; }
.v2-rehber-seg-pill { padding: .35rem .7rem !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; line-height: 1.35; transition: border-color .15s ease, box-shadow .15s ease; }
.v2-rehber-seg-pill:hover { border-color: #94a3b8 !important; box-shadow: 0 2px 6px rgba(15,23,42,.06); color: #0f172a !important; }
.v2-rehber-seg-aside .v2-rehber-seg-card { border-radius: .55rem !important; }
.v2-rehber-seg-mini li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .28rem 0; border-bottom: 1px solid #f1f5f9; }
.v2-rehber-seg-mini li:last-child { border-bottom: 0; }
.v2-rehber-seg-mini li span:first-child { min-width: 0; flex: 1 1 auto; padding-right: .25rem; }
.v2-rehber-seg-metric { font-variant-numeric: tabular-nums; color: #64748b; font-size: .78rem; white-space: nowrap; }
@media (min-width: 992px) {
  .v2-rehber-seg-aside { position: sticky; top: 104px; align-self: flex-start; }
  body.v2-body--nav-static .v2-rehber-seg-aside { top: 12px; }
}
.v2-rehber-govde-accent.bg-gradient-soft { background: linear-gradient(145deg, #f8fafc 0%, #ecfdf5 54%, #f1f5f9 100%); }

/* Sticky padding helper */
.v2-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }

/* Sabit header altındaki ana içerik boşluğu */
.v2-sticky-pad { padding-top: 106px; }

/* Hamburger hover */
.v2-hamburger:hover { background: rgba(0,0,0,.2) !important; border-radius: 4px; }
.v2-hamburger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* ── Sidebar sticky ──────────────────────────────── */
@media (min-width: 992px) {
  .v2-side-sticky { position: sticky; top: 106px; }
  /* Karşılaştırma / araç sayfası: sabit navbar yok, yapışırken gereksiz boşluk bırakma */
  body.v2-body--nav-static .v2-side-sticky { top: 12px; }
}

/* ── Card Header (dark override) ─────────────────── */
.card-header.v2-dark-head {
  background: var(--v2-dark);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
}
.card-header.v2-dark-head::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--v2-red);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Card base overrides ──────────────────────────── */
.card {
  border-radius: var(--bs-border-radius) !important;
  box-shadow: 0 1px 6px rgba(15,23,42,.07) !important;
  transition: box-shadow .2s;
}

/* ── Homepage hero band ──────────────────────────── */
.v2-hero-band {
  background: linear-gradient(135deg, var(--v2-dark) 0%, var(--v2-dark2) 100%);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  position: relative; overflow: hidden;
}
.v2-hero-band::after {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 140px; height: 140px;
  background: var(--v2-red);
  border-radius: 50%;
  opacity: .07;
}
.v2-hero-title {
  font-size: 20px; font-weight: 800;
  color: #fff; letter-spacing: -.4px;
}
.v2-hero-sub {
  font-size: 13px; color: #64748b; font-weight: 400;
}

/* Anasayfa arama kutusu */
.v2-home-search .form-control:focus {
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 0.2rem rgba(239,68,68,.14);
}

/* ── Skeleton Shimmer ────────────────────────────── */
.sk {
  background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%);
  background-size: 700px 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}
.sk * { visibility: hidden !important; }
.sk-line  { display: block; height: 13px; margin-bottom: 7px; border-radius: 6px; }
.sk-thumb { width: 52px; height: 52px; border-radius: 6px; flex-shrink: 0; display: block; }
.sk-badge { display: inline-block; height: 22px; width: 70px; border-radius: 20px; }

/* Lazy image shimmer */
img.lazyload, img[data-src]:not([src]) {
  background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%);
  background-size: 700px 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
  min-height: 50px;
}
img.lazyloaded { background: none; animation: sk-fadeup .3s ease both; }

/* ── Reveal animation ────────────────────────────── */
.v2-reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s ease, transform .38s ease;
}
.v2-visible { opacity: 1; transform: translateY(0); }

/* ── Tables (override Bootstrap default) ─────────── */
.table > :not(caption) > * > * { padding: 10px 14px; }
.table thead th {
  background: var(--v2-dark2) !important;
  color: #fff !important;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  border-color: var(--v2-dark2) !important;
}
.table td:first-child { color: #475569; font-weight: 500; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #f8fafc; }

/* ── Section title strip ─────────────────────────── */
.v2-section-head {
  display: block; padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  color: var(--v2-dark); letter-spacing: .3px;
  border-left: 4px solid var(--v2-red);
  background: #f8fafc;
  text-transform: uppercase;
}

/* ── H2 title band (existing PHP output) ─────────── */
h2.h2-title {
  float: left; width: 98%; clear: both;
  position: relative; text-align: center; margin: 18px 0 12px;
}
h2.h2-title::before {
  content: ''; position: absolute;
  left: 0; bottom: 50%; width: 100%; height: 1px;
  background: #e2e8f0; z-index: 0;
}
span.h2-title {
  position: relative; z-index: 1;
  display: inline-block;
  background: var(--v2-red); color: #fff;
  font-size: 13.5px; font-weight: 700;
  padding: 6px 20px; border-radius: 20px;
}
h2.h2-title-right {
  float: left; width: 98%; clear: both;
  position: relative; text-align: center; margin: 18px 0 12px;
}
h2.h2-title-right::before {
  content: ''; position: absolute;
  left: 0; bottom: 50%; width: 100%; height: 2px;
  background: var(--v2-red); z-index: 0;
}
span.h2-title-right {
  position: relative; z-index: 1;
  display: inline-block;
  background: #fff; color: var(--v2-dark);
  font-size: 13.5px; font-weight: 700;
  padding: 6px 20px; border-radius: 20px;
  border: 1.5px solid #e2e8f0;
}
h2.compare_title {
  float: left; width: 98%; clear: both;
  position: relative; text-align: left; margin: 18px 0 12px;
}
h2.compare_title::before {
  content: ''; position: absolute;
  left: 0; bottom: 50%; width: 100%; height: 1px;
  background: #475569; z-index: 0;
}
span.compare_title {
  position: relative; z-index: 1;
  display: inline-block;
  background: var(--v2-red); color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 7px 20px; border-radius: 20px;
}
.compare h2 { color: #334155; font-size: 19px; padding: 0; margin: 4px 0 4px 6px; }

/* ── Car photo gallery (ul.foto) ─────────────────── */
ul.foto {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px; padding: 14px; margin: 0; list-style: none;
}
ul.foto li .img_list {
  display: flex; flex-direction: column; gap: 4px;
  height: 295px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
ul.foto li span.list img {
  width: 100%; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color .15s;
  aspect-ratio: 16/10; object-fit: cover;
}
ul.foto li span.list img:hover,
ul.foto li span.list img.active { border-color: var(--v2-red); }
ul.foto li .display {
  height: 308px; overflow: hidden;
  border-radius: 10px; background: #f8fafc;
}
ul.foto li .display img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 576px) {
  ul.foto { grid-template-columns: 1fr; }
  ul.foto li .img_list { height: 70px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  ul.foto li span.list { width: 90px; flex-shrink: 0; }
  ul.foto li .display { height: 200px; }
}

/* ── Spec blocks (ul.spec) ───────────────────────── */
ul.spec {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 10px 14px 14px; list-style: none;
}
ul.spec li { display: flex; }
ul.spec li h2:nth-child(1) {
  flex: 1; background: var(--v2-dark2); color: #cbd5e1;
  padding: 9px 8px; font-size: 11.5px; font-weight: 500;
  line-height: 1.4; border-radius: 6px 0 0 6px;
  min-height: 40px; display: flex; align-items: center;
}
ul.spec li h2:nth-child(2) {
  flex: 1; background: #fff; color: var(--v2-dark);
  padding: 4px 8px; font-size: 15px; font-weight: 700;
  border: 1px solid #e2e8f0; border-left: 0;
  border-bottom: 3px solid var(--v2-red);
  border-radius: 0 6px 6px 0;
  min-height: 40px; display: flex; align-items: center;
}

/* ── Similar cars (ul.special_ul) ───────────────── */
ul.special_ul {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px; list-style: none;
}
ul.special_ul li {
  padding: 7px 13px; border-radius: 20px;
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  font-size: 13px; transition: background .15s, border-color .15s;
}
ul.special_ul li:hover { background: #fff1f1; border-color: var(--v2-red); }
ul.special_ul li a { color: var(--v2-dark); }
ul.special_ul li:hover a { color: var(--v2-red); }

/* ── Versus list (ul.v) ──────────────────────────── */
ul.v { list-style: none; }
ul.v li {
  padding: 9px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px; transition: background .12s;
}
ul.v li:nth-child(even) { background: #fff; }
ul.v li:nth-child(odd)  { background: #f8fafc; }
ul.v li.green { background: #f0fdf4; }
ul.v li:last-child { border-bottom: 0; }

/* ── Breadcrumb ──────────────────────────────────── */
.bread {
  display: block; padding: 8px 14px; font-size: 12.5px;
  color: #94a3b8; white-space: nowrap;
  overflow-x: auto; background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.bread::-webkit-scrollbar { display: none; }
.bread a { color: #94a3b8; }
.bread a:hover { color: var(--v2-red); }

/* ── Pagination override ─────────────────────────── */
.page-link { color: var(--v2-dark); border-color: #e2e8f0; font-size: 14px; }
.page-link:hover { background: var(--v2-red); border-color: var(--v2-red); color: #fff; }
.page-item.active .page-link { background: var(--v2-red); border-color: var(--v2-red); }

ul.pag { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 8px; list-style: none; }
ul.pag li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 10px;
  border-radius: 6px; border: 1.5px solid #e2e8f0;
  color: var(--v2-dark); font-size: 14px; text-decoration: none;
  transition: all .15s;
}
ul.pag li a:hover  { background: var(--v2-red); border-color: var(--v2-red); color: #fff; }
ul.pag li.active a { background: var(--v2-red); border-color: var(--v2-red); color: #fff; font-weight: 700; }

/* ── Form overrides ──────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--v2-red);
  box-shadow: 0 0 0 .22rem rgba(217,0,0,.13);
}
.btn-primary { background: var(--v2-red); border-color: var(--v2-red); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus {
  background: var(--v2-red-dk); border-color: var(--v2-red-dk);
}
.btn-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(217,0,0,.35); }

/* ── Brand grid tweaks (firmalar() output) ────────── */
.v2-brand-wrap .col a {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  padding: 12px 6px 10px !important;
  border: 1.5px solid #f1f5f9 !important;
  border-radius: 10px !important; background: #fff !important;
  text-decoration: none !important; color: var(--v2-dark) !important;
  transition: border-color .2s, box-shadow .2s, transform .18s !important;
  min-height: 88px !important;
}
.v2-brand-wrap .col a:hover {
  border-color: var(--v2-red) !important;
  box-shadow: 0 6px 20px rgba(217,0,0,.13) !important;
  transform: translateY(-3px) !important;
}
.v2-brand-wrap .col a small {
  font-size: 10.5px; font-weight: 700; color: #64748b;
  margin-top: 6px; max-width: 84px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .1px;
}
/* Brand wrap section title */
.v2-brand-wrap > h1,
.v2-brand-wrap > .px-3 > h1 {
  font-size: 17px !important;
  letter-spacing: -.3px;
}

/* ── Sprite logos ─────────────────────────────────── */
.marka_alfa-romano,.marka_alfa-romeo,.marka_aston-martin,.marka_audi,.marka_bmw,.marka_chery,.marka_chevrolet,.marka_citroen,.marka_cupra,.marka_dacia,.marka_ds,.marka_fiat,.marka_ford,.marka_honda,.marka_hyundai,.marka_isuzu,.marka_jaguar,.marka_jeep,.marka_kia
{ display:inline-block; background-image:url('/images2/sprite_1.png'); background-repeat:no-repeat; overflow:hidden; text-indent:-9999px; text-align:left; }
.marka_alfa-romeo{background-position:-1px 0;width:75px;height:75px}
.marka_aston-martin{background-position:-77px 0;width:75px;height:75px}
.marka_audi{background-position:-153px 0;width:75px;height:75px}
.marka_bmw{background-position:-229px 0;width:75px;height:75px}
.marka_chery{background-position:-1px -76px;width:75px;height:75px}
.marka_chevrolet{background-position:-77px -76px;width:75px;height:75px}
.marka_citroen{background-position:-153px -76px;width:75px;height:75px}
.marka_cupra{background-position:-229px -76px;width:75px;height:75px}
.marka_dacia{background-position:-1px -152px;width:75px;height:75px}
.marka_ds{background-position:-77px -152px;width:75px;height:75px}
.marka_fiat{background-position:-153px -152px;width:75px;height:75px}
.marka_ford{background-position:-229px -152px;width:75px;height:75px}
.marka_honda{background-position:-1px -228px;width:75px;height:75px}
.marka_hyundai{background-position:-77px -228px;width:75px;height:75px}
.marka_isuzu{background-position:-153px -228px;width:75px;height:75px}
.marka_jaguar{background-position:-229px -228px;width:75px;height:75px}
.marka_jeep{background-position:-1px -304px;width:75px;height:75px}
.marka_kia{background-position:-77px -304px;width:75px;height:75px}

.marka_lada,.marka_lamborghini,.marka_land-rover,.marka_lexus,.marka_mazda,.marka_mercedes,.marka_mg,.marka_mini,.marka_mitsubishi,.marka_nissan,.marka_opel,.marka_peugeot,.marka_porsche,.marka_renault,.marka_seat
{ display:inline-block; background-image:url('/images2/sprite_2.png'); background-repeat:no-repeat; overflow:hidden; text-indent:-9999px; text-align:left; }
.marka_lada{background-position:-1px 0;width:75px;height:75px}
.marka_lamborghini{background-position:-77px 0;width:75px;height:75px}
.marka_land-rover{background-position:-153px 0;width:75px;height:75px}
.marka_lexus{background-position:-1px -76px;width:75px;height:75px}
.marka_mazda{background-position:-77px -76px;width:75px;height:75px}
.marka_mercedes{background-position:-153px -76px;width:75px;height:75px}
.marka_mg{background-position:-1px -152px;width:75px;height:75px}
.marka_mini{background-position:-77px -152px;width:75px;height:75px}
.marka_mitsubishi{background-position:-153px -152px;width:75px;height:75px}
.marka_nissan{background-position:-1px -228px;width:75px;height:75px}
.marka_opel{background-position:-77px -228px;width:75px;height:75px}
.marka_peugeot{background-position:-153px -228px;width:75px;height:75px}
.marka_porsche{background-position:-1px -304px;width:75px;height:75px}
.marka_renault{background-position:-77px -304px;width:75px;height:75px}
.marka_seat{background-position:-153px -304px;width:75px;height:75px}

.marka_skoda,.marka_skywell,.marka_smart,.marka_ssangyong,.marka_subaru,.marka_suzuki,.marka_tesla,.marka_togg,.marka_toyota,.marka_volvo,.marka_vw
{ display:inline-block; background-image:url('/images2/sprite_3.png'); background-repeat:no-repeat; overflow:hidden; text-indent:-9999px; text-align:left; }
.marka_skoda{background-position:-1px 0;width:75px;height:75px}
.marka_skywell{background-position:-77px 0;width:75px;height:75px}
.marka_smart{background-position:-153px 0;width:75px;height:75px}
.marka_ssangyong{background-position:-1px -76px;width:75px;height:75px}
.marka_subaru{background-position:-77px -76px;width:75px;height:75px}
.marka_suzuki{background-position:-153px -76px;width:75px;height:75px}
.marka_tesla{background-position:-1px -152px;width:75px;height:75px}
.marka_togg{background-position:-77px -152px;width:75px;height:75px}
.marka_toyota{background-position:-153px -152px;width:75px;height:75px}
.marka_volvo{background-position:-1px -228px;width:75px;height:75px}
.marka_vw{background-position:-77px -228px;width:75px;height:75px}

/* ── Sidebar marka grid (v2 right.html) — 3 sütun, logo üstte ── */
.v2-side-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.v2-side-brands--skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.v2-side-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  padding: 9px 5px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  text-decoration: none;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, color .12s ease, transform .12s ease;
  min-height: 94px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.v2-side-brand:hover {
  border-color: rgba(220, 38, 38, .38);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .09);
  transform: translateY(-1px);
  color: var(--v2-red);
}
.v2-side-brand:focus-visible {
  outline: 2px solid var(--v2-red);
  outline-offset: 2px;
}
.v2-side-brand__media {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.v2-side-brand__media--ph {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.v2-side-brand__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.v2-side-brand__name {
  min-width: 0;
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}

/* ── Sidebar brand links (legacy — v2 right artık v2-side-brand) ── */
.v2-marka-link {
  display: block; padding: 9px 14px; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid #f1f5f9; color: var(--v2-dark);
  text-decoration: none; transition: color .12s, background .12s;
  min-height: 38px; display: flex; align-items: center;
}
.v2-marka-link:hover { color: var(--v2-red); background: #fff8f8; }

/* ── Model list override ─────────────────────────── */
ul.model { list-style: none; padding: 0; margin: 0; }
ul.model li { border-bottom: 1px solid #f1f5f9; transition: background .12s; }
ul.model li:last-child { border: 0; }
ul.model li:hover { background: #f8fafc; }
ul.model li a {
  display: flex; align-items: center;
  padding: 11px 16px; color: var(--v2-dark);
  font-size: 14.5px; min-height: 44px;
  text-decoration: none;
}
ul.model li a:hover { color: var(--v2-red); }

/* ── No-image placeholder ────────────────────────── */
.no-image {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9; background: #f1f5f9;
  color: #94a3b8; font-size: 12px;
  border-radius: 6px; border: 1.5px dashed #e2e8f0;
}

/* ── Comment / SEO ───────────────────────────────── */
.seotext { padding: 14px 16px; color: #94a3b8; font-size: 13.5px; line-height: 1.75; border-top: 1px solid #f1f5f9; }
.seotext h2 { color: #94a3b8; font-size: 15px; }

.comment { margin: 8px 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.comment div { font-weight: 700; margin-bottom: 4px; font-size: 13.5px; }
.comment small { float: right; font-size: 12px; color: #94a3b8; }

/* ── News lists ──────────────────────────────────── */
ul.son_haber { list-style: none; }
ul.son_haber li { border-bottom: 1px solid #f1f5f9; padding: 10px 14px; transition: background .12s; }
ul.son_haber li:hover { background: #f8fafc; }
ul.haber { list-style: none; }
ul.haber li {
  border: 1px solid #e2e8f0; border-left: 4px solid var(--v2-red);
  padding: 10px; margin: 10px 4px; background: #fff;
  border-radius: 8px; transition: box-shadow .18s;
}
ul.haber li:hover { box-shadow: 0 2px 10px rgba(15,23,42,.08); }

/* ── Versus form ─────────────────────────────────── */
.v2-vs-hero {
  background: linear-gradient(135deg, var(--v2-dark) 0%, var(--v2-dark2) 100%);
  padding: 20px 20px 16px;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.v2-vs-h1 { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -.3px; }
.v2-vs-sub { font-size: 13px; color: #64748b; margin: 0; }

.v2-vs-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.v2-vs-card-head {
  background: var(--v2-dark2);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 9px 14px;
}
.v2-vs-badge {
  width: 52px; height: 52px;
  background: var(--v2-red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: .5px;
  box-shadow: 0 4px 16px rgba(217,0,0,.35);
}

.v2-vs-steps {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px 14px;
}
.v2-vs-step-num {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v2-dark2);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.v2-vs-step-t {
  font-size: 11px;
  line-height: 1.25;
  color: #475569;
  font-weight: 600;
}
@media (min-width: 768px) {
  .v2-vs-step-t { font-size: 12px; }
}

.v2-vs-hub-grid .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.5rem; }
.v2-vs-hub-block .v2-vs-hub-lead { max-width: 42rem; }
.v2-vs-hub-card {
  border: 1px solid #e5eaf0;
  border-radius: 12px;
  background: #fafbfc;
  box-shadow: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.v2-vs-hub-card:hover {
  border-color: #d0d8e2;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.v2-vs-hub-cta {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.v2-vs-hub-cta:hover {
  border-color: var(--v2-red);
  color: var(--v2-red);
  background: #fffafa;
}
.v2-vs-hub-details { padding: 0; }
.v2-vs-hub-details-sum {
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
}
.v2-vs-hub-details-sum::-webkit-details-marker { display: none; }
.v2-vs-hub-details-sum::after {
  content: '+';
  display: inline-block;
  margin-left: 0.35rem;
  font-weight: 800;
  color: var(--v2-red);
  transition: transform 0.15s ease;
}
.v2-vs-hub-details[open] .v2-vs-hub-details-sum::after {
  transform: rotate(45deg);
}
.v2-vs-hub-pair { min-height: 72px; }
.v2-vs-hub-img {
  width: 100%;
  max-width: 112px;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: #f1f5f9;
}
.v2-vs-hub-img-ph {
  width: 100%;
  max-width: 112px;
  aspect-ratio: 3 / 2;
  background: #e2e8f0;
  margin: 0 auto;
}
.v2-vs-hub-vs {
  font-size: 11px;
  font-weight: 800;
  color: var(--v2-red);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.v2-vs-hub-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}
.v2-vs-landing-ul li { margin-bottom: 0.35rem; }
.v2-vs-landing .v2-versus-intro-img img {
  max-height: min(320px, 46vw);
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .12);
}
.v2-vs-landing .v2-versus-intro-text { font-size: 15px; line-height: 1.55; color: #334155; }

/* ── Comparison table (versus2.php) ──────────────── */
.cmp-table { table-layout: fixed; width: 100%; font-size: 14px; }
.cmp-table thead th {
  background: var(--v2-dark) !important;
  color: #fff !important;
  text-align: center;
  font-size: 13px; font-weight: 700;
  padding: 12px 10px;
  border-color: var(--v2-dark2) !important;
  vertical-align: middle;
}
.cmp-table thead th:first-child { width: 34%; }
.cmp-table td {
  text-align: center;
  padding: 10px 8px;
  vertical-align: middle;
  border-color: #f1f5f9 !important;
}
.cmp-table td:first-child {
  font-weight: 600; color: #475569;
  text-align: left; background: #f8fafc;
  font-size: 13px;
}
.cmp-table tbody tr:hover td { background: #fff8f8 !important; }
/* Section headers */
.cmp-table .cmp-section td {
  background: var(--v2-dark2) !important;
  color: #e2e8f0 !important;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 14px;
  text-align: left !important;
}
/* Winner cell highlight */
.cmp-table td.cmp-win {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  font-weight: 700;
}
.cmp-table td.cmp-lose {
  background: #fff7f7 !important;
  color: #dc2626;
}

/* ── Sidebar karşılaştırma listesi (son_karsilastirmalar / popular_vs) ──
   v2 right.html bu sınıfları kullanır; desk/right ile aynı düzen. */
.skc-list { padding: 4px 0; }

.skc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease;
  position: relative;
  min-height: 52px;
}
.skc-item:last-child { border-bottom: none; }
.skc-item:hover {
  background: linear-gradient(90deg, rgba(217, 0, 0, .04), transparent);
  text-decoration: none;
}
.skc-item:hover .skc-img-wrap {
  box-shadow:
    0 2px 10px rgba(15, 23, 42, .08),
    0 0 0 1px rgba(217, 0, 0, .16);
}

.skc-rank {
  font-size: 11px;
  font-weight: 800;
  color: var(--v2-red);
  min-width: 20px;
  text-align: center;
  opacity: .88;
  flex-shrink: 0;
}

.skc-car {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.skc-car-right { }

.skc-img-wrap {
  width: 96px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(165deg, #f8fafc 0%, #e8ecf1 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 0 0 1px rgba(15, 23, 42, .07);
  transition: box-shadow .16s ease;
}
.skc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.skc-img-wrap img.lazyload { min-height: 0; }
.skc-img-ph {
  width: 96px;
  height: 64px;
  background: linear-gradient(145deg, #ebeff5, #d8dce3);
  border-radius: 8px;
}

.skc-name {
  font-size: 11px;
  color: #334155;
  text-align: center;
  line-height: 1.32;
  max-width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 500;
}
.skc-item:hover .skc-name { color: var(--v2-red); }

.skc-badge {
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(145deg, var(--v2-red) 0%, #a80000 100%);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(217, 0, 0, .35);
}

/* ════════════════════════════════════════════════════
   PHP’den taşınan sayfa stilleri (araba3, model, marka, haber, listele, versus)
════════════════════════════════════════════════════ */

/* ── Araç detay (araba3.php) ─────────────────────── */
.ad3-bread { font-size: 13px; color: #888; padding: 10px 14px 4px; overflow-x: auto; white-space: nowrap; }
.ad3-bread a { color: #888; }
.ad3-bread a:hover { color: var(--primary, var(--v2-red, #D90000)); }
.ad3-bread span { margin: 0 4px; }

.ad3-hero { padding: 14px 14px 0; }
.ad3-hero-main {
  width: 100%; border-radius: 10px; overflow: hidden; background: #f0f0f0; line-height: 0;
  aspect-ratio: 16/9;
}
.ad3-hero-main img { width: 100%; height: 100%; display: block; border-radius: 10px; object-fit: cover; }
.ad3-hero-thumbs {
  display: flex; flex-direction: row; gap: 8px; margin-top: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: #bbb transparent;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.ad3-hero-thumbs:active { cursor: grabbing; }
.ad3-hero-thumbs img {
  width: 100px; height: 68px; object-fit: cover; border-radius: 7px;
  cursor: pointer; border: 2px solid transparent; flex-shrink: 0;
  transition: border-color 0.2s, opacity 0.2s; opacity: 0.72;
  scroll-snap-align: start;
}
.ad3-hero-thumbs img:hover,
.ad3-hero-thumbs img.ad3-thumb-active { border-color: var(--primary, var(--v2-red, #D90000)); opacity: 1; }
.ad3-hero-thumbs::-webkit-scrollbar { height: 4px; }
.ad3-hero-thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
@media (max-width: 600px) {
  .ad3-hero-main { aspect-ratio: 4/3; }
  .ad3-hero-thumbs img { width: 80px; height: 54px; }
}

.ad3-title-block { padding: 12px 14px 8px; }
.ad3-title-block h1 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.3; }
.ad3-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ad3-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; }
.ad3-badge-red { background: #D90000; color: #fff; }
.ad3-badge-electric { background: #0a7a3b; color: #fff; }
.ad3-badge-fuel { background: #e67e00; color: #fff; }
.ad3-badge-gray { background: #495057; color: #fff; }

.ad3-section { margin: 18px 14px 0; }
.ad3-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: #1a1a1a;
  border-left: 4px solid var(--primary, var(--v2-red, #D90000));
  padding: 6px 12px; background: #f8f9fa;
  border-radius: 0 6px 6px 0; margin-bottom: 10px;
}

.ad3-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e9ecef; border-radius: 8px; overflow: hidden; }
.ad3-spec-grid.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 480px) { .ad3-spec-grid { grid-template-columns: 1fr; } }
.ad3-spec-item { display: flex; background: #fff; }
.ad3-spec-label { flex: 0 0 52%; padding: 10px 12px; font-size: 13px; color: #555; background: #fafafa; border-right: 1px solid #e9ecef; }
.ad3-spec-value { flex: 1; padding: 10px 12px; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.ad3-spec-item.highlight .ad3-spec-label { background: #fff3cd; }
.ad3-spec-item.highlight .ad3-spec-value { color: var(--primary, var(--v2-red, #D90000)); font-size: 16px; }

.ad3-similar { margin: 18px 14px 0; }
.ad3-similar-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ad3-similar-list a {
  display: inline-block; padding: 8px 14px; border-radius: 20px;
  background: #f0f2f4; border: 1px solid #dee2e6;
  font-size: 13px; color: #333; text-decoration: none;
  transition: all 0.2s;
}
.ad3-similar-list a:hover {
  background: var(--primary, var(--v2-red, #D90000));
  border-color: var(--primary, var(--v2-red, #D90000));
  color: #fff;
  text-decoration: none;
}

.ad3-comment-section { margin: 20px 14px 14px; }
.ad3-comment-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-left: 0; color: #1a1a1a; }
.ad3-comment-form { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 18px; }
.ad3-comment-form label { font-size: 13px; font-weight: 600; color: #555; display: block; margin-bottom: 4px; }
.ad3-comment-form input[type="text"],
.ad3-comment-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #dee2e6; border-radius: 6px;
  font-size: 14px; margin-bottom: 12px; background: #fff;
  transition: border-color 0.2s; outline: none; box-sizing: border-box;
}
.ad3-comment-form input[type="text"]:focus,
.ad3-comment-form textarea:focus { border-color: var(--primary, var(--v2-red, #D90000)); }
.ad3-comment-form textarea { height: 90px; resize: vertical; }
.ad3-comment-btn {
  background: var(--primary, var(--v2-red, #D90000)); color: #fff; border: none;
  padding: 10px 24px; border-radius: 6px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.ad3-comment-btn:hover { background: var(--primary-dark, var(--v2-red-dk, #b50000)); }
#ad3-message { margin-top: 10px; font-size: 13px; font-weight: 600; color: #0a7a3b; }

.ad3-bread-ol { list-style: none; margin: 0; padding: 0; display: inline; }

/* ── Karşılaştırma sonuç (versus2.php) ───────────── */
.vs-bread { font-size: 13px; color: #888; padding: 10px 14px 4px; overflow-x: auto; white-space: nowrap; }
.vs-bread a { color: #888; }
.vs-bread a:hover { color: var(--primary, #D90000); }

.vs-h1 { font-size: 19px; font-weight: 700; color: #1a1a1a; padding: 10px 14px 6px; margin: 0; line-height: 1.35; }

.vs-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px 8px; }
.vs-hero-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; text-align: center; }
.vs-hero-card > a { display: block; text-decoration: none; color: inherit; }
.vs-hero-img { aspect-ratio: 16/9; overflow: hidden; background: #eee; }
.vs-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-hero-img img.lazyload { min-height: 0; }
.vs-hero-name { font-size: 12px; font-weight: 700; color: #333; padding: 8px 8px 12px; line-height: 1.5; }
.vs-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  background: var(--primary, #D90000); color: #fff; margin-bottom: 5px;
}

.vs-yorum { padding: 0 14px 8px; font-size: 14px; color: #555; line-height: 1.7; }

.vs-table-wrap {
  padding: 0 14px 14px;
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.vs-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 320px; }
.vs-table col:first-child { width: 36%; }
.vs-table col:nth-child(2),
.vs-table col:nth-child(3) { width: 32%; }

.vs-table tr td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.vs-table tr:not(.vs-section):nth-child(even) td { background: #fafafa; }
.vs-table tr:not(.vs-section):nth-child(odd) td { background: #fff; }
.vs-table tr.vs-section td {
  background: linear-gradient(90deg, #D90000 0%, #a00 100%) !important;
  color: #fff !important; font-weight: 700 !important; font-size: 12px;
  padding: 7px 10px; letter-spacing: 0.4px; text-transform: uppercase;
}
.vs-table td:first-child { color: #777; font-size: 13px; }
.vs-table td:nth-child(2),
.vs-table td:nth-child(3) { font-weight: 600; color: #1a1a1a; text-align: center; }
.vs-table a.vs-link { color: var(--primary, #D90000); font-weight: 700; font-size: 12px; text-decoration: none; white-space: nowrap; }
.vs-table a.vs-link:hover { text-decoration: underline; }
.vs-win { background: #fff8e1 !important; color: #9a7000 !important; }
.vs-win::after { content: " ★"; color: #f5a623; font-size: 11px; }

/* vs2 — koyu + yapışkan thead (overflow görünür: üst scrollbar yok → viewport’a göre sticky çalışır) */
.vs-table thead.vs-sticky-head th {
  position: sticky;
  top: clamp(68px, 11vw, 106px);
  z-index: 8;
  background: linear-gradient(180deg, var(--v2-dark) 0%, var(--v2-dark2) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 12px 10px !important;
  border: none !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .2);
  border-bottom: 2px solid var(--v2-red, #D90000) !important;
  vertical-align: middle !important;
}
@media (max-width: 991.98px) {
  .vs-table thead.vs-sticky-head th {
    top: clamp(52px, 14vw, 88px);
    padding: 10px 6px !important;
    font-size: 11px !important;
  }
}
/* Çok dar: yatay taşmayı rahatça kaydırmak için wrap’e scrollbar; sticky Chromium’da kırılıyor */
@media (max-width: 379.98px) {
  .vs-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }
  .vs-table thead.vs-sticky-head th {
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: inset 0 -2px 0 var(--v2-red, #D90000);
    border-bottom: none !important;
  }
}

/* Karşılaştırma (/vs, POST): navbar kaydırmalı — sticky top sabit şerit yüksekliği olmasın */
body.v2-body--nav-static .vs-table thead.vs-sticky-head th {
  top: env(safe-area-inset-top, 0px);
}

.vs-comment-wrap { margin: 4px 14px 16px; }
.vs-comment-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: #1a1a1a;
  border-left: 4px solid var(--primary, #D90000);
  padding: 6px 12px; background: #f8f9fa;
  border-radius: 0 6px 6px 0; margin-bottom: 12px;
}
.vs-comment-form { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 18px; }
.vs-comment-form label { font-size: 13px; font-weight: 600; color: #555; display: block; margin-bottom: 4px; }
.vs-comment-form input[type="text"],
.vs-comment-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #dee2e6; border-radius: 6px;
  font-size: 14px; margin-bottom: 12px; background: #fff; box-sizing: border-box;
  transition: border-color 0.2s; outline: none;
}
.vs-comment-form input[type="text"]:focus,
.vs-comment-form textarea:focus { border-color: var(--primary, #D90000); }
.vs-comment-form textarea { height: 90px; resize: vertical; }
.vs-comment-btn {
  background: var(--primary, #D90000); color: #fff; border: none;
  padding: 10px 24px; border-radius: 6px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.vs-comment-btn:hover { background: #b30000; }
#vs-uyari { margin-top: 10px; font-size: 13px; font-weight: 600; color: #0a7a3b; }

@media (max-width: 480px) {
  .vs-h1 { font-size: 15px; }
  .vs-table { font-size: 12px; }
  .vs-table td { padding: 7px 6px; }
  .vs-heroes { gap: 8px; padding: 10px 10px 6px; }
}

/* ── Model liste (model.php) — yıl akordeon ─────── */
.mdl-bread { font-size: 13px; color: #64748b; padding: 10px 14px 4px; }
.mdl-bread a { color: #64748b; }
.mdl-bread a:hover { color: var(--v2-red, #D90000); }

.mdl-year-block {
  margin: 0 14px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .07);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mdl-year-block:has(.year-header:hover) {
  border-color: rgba(217, 0, 0, .32);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .1);
}
.mdl-year-block:has(.year-header:focus-visible) {
  border-color: rgba(217, 0, 0, .4);
  box-shadow: 0 0 0 3px rgba(217, 0, 0, .12), 0 6px 20px rgba(15, 23, 42, .08);
}

.year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(217, 0, 0, .12);
  touch-action: manipulation;
  border: none;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--v2-dark, #0f172a);
  transition: background .2s ease, box-shadow .2s ease;
  user-select: none;
  position: relative;
}
.year-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--v2-red, #D90000);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  border-radius: 12px 0 0 12px;
}
.year-header:hover::after,
.year-header:focus-visible::after {
  opacity: 1;
}
.year-header:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}
.year-header:active {
  background: linear-gradient(180deg, #fef2f2 0%, #f8fafc 100%);
}
.year-header:focus { outline: none; }
.year-header:focus-visible {
  outline: 2px solid var(--v2-red, #D90000);
  outline-offset: 2px;
}
.year-header.open {
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 55%);
  box-shadow: inset 0 -1px 0 #e2e8f0;
}
.year-header.open::after {
  opacity: 1;
}

.year-header .yh-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.yh-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  color: var(--v2-red, #D90000);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
  border: 1px solid #e2e8f0;
}
.year-header.open .yh-icon {
  background: #fff;
  border-color: rgba(217, 0, 0, .22);
  color: var(--v2-red-dk, #b50000);
}
.yh-ico-cal,
.yh-ico-chev { display: block; }
.yh-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.yh-label-year {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.yh-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: #334155;
  border: 1px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.year-header:hover .yh-arrow {
  color: var(--v2-red-dk, #b50000);
  border-color: rgba(217, 0, 0, .45);
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  box-shadow: 0 2px 8px rgba(217, 0, 0, .15);
}
.year-header.open .yh-arrow {
  transform: rotate(180deg);
  color: var(--v2-red, #D90000);
  border-color: rgba(217, 0, 0, .45);
  background: linear-gradient(180deg, #fff8f8 0%, #ffecec 100%);
  box-shadow: 0 2px 8px rgba(217, 0, 0, .12);
}

.year-content {
  display: none;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}
.year-content.open { display: block; }

.year-content ul { list-style: none; margin: 0; padding: 0; }
.year-content ul li { border-bottom: 1px solid #f1f5f9; }
.year-content ul li:last-child { border-bottom: none; }
.year-content ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--v2-dark, #0f172a);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.year-content ul li a:hover {
  background: #fff8f8;
  color: var(--v2-red, #D90000);
  text-decoration: none;
}
.year-content ul li a::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid #cbd5e1;
  border-bottom: 2px solid #cbd5e1;
  transform: rotate(-45deg);
  margin-left: 6px;
  transition: border-color .15s ease;
}
.year-content ul li a:hover::after {
  border-color: var(--v2-red, #D90000);
}

@media (max-width: 480px) {
  .mdl-year-block { margin-left: 10px; margin-right: 10px; }
  .year-header { padding: 12px 12px; }
  .yh-icon { width: 36px; height: 36px; }
  .yh-label-year { font-size: 15px; }
  .yh-arrow { width: 38px; height: 38px; }
}

/* ── Marka grid (marka.php) ──────────────────────── */
.marka-page-breadcrumb { display: block; margin: 5px; padding: 5px; text-decoration: none; color: #000; }

.car-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
}
@media (max-width: 768px) {
  .car-card-container { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
}
@media (max-width: 480px) {
  .car-card-container { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }
}

.car-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.car-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.car-card a { display: block; text-decoration: none; color: inherit; }

.car-card-img {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
}
.car-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.car-card-img .no-image {
  width: 100%; height: 100%; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 12px;
}

.car-card-body { padding: 10px 12px 14px; }
.car-card h3 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.3; }

.car-card-btn {
  display: inline-block; padding: 5px 16px;
  background: var(--primary, #D90000); color: #fff;
  border: none; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.car-card:hover .car-card-btn { background: #b30000; }

/* ── Haber içerik (haber.php) ────────────────────── */
.v2-haber-article .v2-haber-meta { font-size: 16px; }
.v2-haber-article .v2-haber-line { line-height: 30px; font-size: 18px; }
.v2-haber-article .v2-haber-line h2 { margin-top: 20px; margin-bottom: 5px; border-left: 6px solid var(--v2-red); padding: 5px 10px; }
.v2-haber-article .v2-haber-line h3 { margin-top: 20px; margin-bottom: 5px; border-left: 4px solid var(--v2-red); padding: 5px 10px; }
.v2-haber-time { font-size: 11px; }
.v2-haber-time time { font-size: 11px; font-weight: bold; text-decoration: underline; }

.v2-news-button {
  border: 1px dashed #94a3b8; border-radius: 5px; font-size: 15px;
  box-shadow: 5px 4px 3px #a5a5a5;
  background: transparent;
  padding: 0;
}
.v2-news-button:hover { background: #fff; border-color: #0f172a; }
.v2-news-button a { display: block; padding: 10px 14px; text-decoration: none; color: inherit; }
.v2-news-button .v2-news-x { color: var(--v2-red); }

/* ── Kategori liste (listele.php) ──────────────── */
ul.haber.v2-listele-haber {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-listele-left1,
.v2-listele-left2 {
  display: block; margin: 4px; padding: 4px; border: 0 solid #ddd;
  width: 100%; max-width: 100%; box-sizing: border-box;
}

ul.haber.v2-listele-haber li {
  display: block; width: 100%; border: 1px solid #ebebeb; padding: 4px; margin: 15px 3px;
  background: #fff; border-left: 5px solid #333;
}
ul.haber.v2-listele-haber li div.image .tarih { background: #333; color: #000; padding: 3px; }
ul.haber.v2-listele-haber u { font-size: 12px; color: #333; }

.v2-listele-pag li a { color: #333; text-decoration: none; padding: 5px; }
.v2-listele-pag li { float: left; display: inline-block; padding: 3px; margin: 3px; border: 1px solid #eee; }
.v2-listele-pag li.active { background: #333; color: #fff; }
.v2-listele-pag li.active a { color: #fff; text-decoration: none; padding: 5px; }

.v2-listele-haber .one_1 { display: block; }

/* ── Eski karşılaştırma tablosu (versus.php) ────── */
.vs-legacy-compare table.compare_table tr td,
.vs-legacy-compare table.compare_table tr th { text-align: center; }
.vs-legacy-compare table.compare_table {
  table-layout: fixed;
  display: table;
  width: 100%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0 3px;
}

.vs-legacy-compare table {
  box-sizing: border-box;
  border-collapse: collapse;
  margin-bottom: 2em;
  width: 100%;
  background: #fff;
}
.vs-legacy-compare td,
.vs-legacy-compare th {
  padding: 14px;
  text-align: center;
  width: 33%;
}

.vs-legacy-compare table.compare_table td:first-child { font-weight: bold; }

/* Başlık satırı: site koyusu + yapışkan (navbar yüksekliği ile uyumlu top) */
.vs-legacy-compare table.compare_table thead th {
  position: sticky;
  top: clamp(68px, 11vw, 106px);
  z-index: 8;
  background: linear-gradient(180deg, var(--v2-dark) 0%, var(--v2-dark2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  padding: 14px 10px;
  vertical-align: middle;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .2);
  border-bottom: 2px solid var(--v2-red);
}
@media (max-width: 991.98px) {
  .vs-legacy-compare table.compare_table thead th {
    top: clamp(52px, 14vw, 88px);
    font-size: 12px;
    padding: 10px 6px;
  }
}

/* Karşılaştırma (POST): navbar kaydırmalı — tablo thead viewport üstüne yapışır */
body.v2-body--nav-static .vs-legacy-compare table.compare_table thead th {
  top: env(safe-area-inset-top, 0px);
}

/* Lazysizes shim’in sabit olmayan yüksekliği tablodaki araç fotoğrafında küçük kaymalara izin vermesin */
.vs-legacy-compare table.compare_table img.lazyload {
  min-height: 0;
  max-width: min(260px, 100%);
  height: auto;
}

.vs-legacy-compare td.err {
  background-color: #e992b9;
  color: #fff;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}
.vs-legacy-compare thead th:first-child {
  background: linear-gradient(180deg, var(--v2-dark2) 0%, var(--v2-dark) 100%);
}
.vs-legacy-compare tbody tr:nth-child(2n-1) { background-color: #f8fafc; }
.vs-legacy-compare tbody tr:hover { background-color: #fff5f5; }

.vs-legacy-link { color: #0068c1; }

/* ── Sidebar haber özetleri (db2.php) ───────────── */
ul.son_haber.v2-son-haber--cards,
ul.son_haber.v2-son-haber--transparent {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.son_haber.v2-son-haber--cards li {
  display: block; width: 100%; border: 1px solid #ebebeb; padding: 4px; margin: 3px; background: #fff;
}
ul.son_haber.v2-son-haber--transparent li {
  display: block; width: 100%; border: 1px solid transparent; padding: 4px; margin: 3px; background: #fff;
}
ul.son_haber.v2-son-haber--cards li div.image,
ul.son_haber.v2-son-haber--transparent li div.image {
  position: relative; width: 100%;
}
ul.son_haber.v2-son-haber--cards li .image img,
ul.son_haber.v2-son-haber--transparent li .image img {
  display: block; width: 100%; border: 2px solid #ddd; padding: 2px; box-sizing: border-box; margin: 3px 0; height: auto !important;
}
ul.son_haber.v2-son-haber--transparent li .image img {
  border: 2px solid transparent; border-radius: 9px;
}
ul.son_haber.v2-son-haber--cards div.image h2,
ul.son_haber.v2-son-haber--transparent div.image h2 {
  position: absolute; top: 10px; left: 7px; width: 84%; padding: 0 2px;
}
ul.son_haber.v2-son-haber--cards div.image h2 span,
ul.son_haber.v2-son-haber--transparent div.image h2 span {
  color: #fff;
  font: bold 15px/15px Helvetica, "Segoe UI", sans-serif;
  letter-spacing: -1px;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 10px; display: inline-block; line-height: 20px; border-radius: 3px;
}
ul.son_haber.v2-son-haber--cards div.image .tarih,
ul.son_haber.v2-son-haber--transparent div.image .tarih { background: #333; color: #fff; padding: 3px; }
ul.son_haber.v2-son-haber--cards u,
ul.son_haber.v2-son-haber--transparent u { font-size: 12px; color: #fff; }

.v2-versus-intro-img { padding-top: 7px; }
.v2-versus-intro-text { padding: 5px; }
.v2-vs-col-vs { padding-top: 2.5rem; }

/* ── Footer ──────────────────────────────────────── */
.v2-footer {
  background: var(--v2-dark);
  border-top: 3px solid var(--v2-red);
  margin-top: 24px; color: #94a3b8;
}
.v2-footer a { color: #94a3b8; font-size: 13.5px; display: block; margin-bottom: 6px; text-decoration: none; }
.v2-footer a:hover { color: #f1f5f9; }
.v2-footer strong { color: #e2e8f0; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; display: block; margin-bottom: 10px; }
.v2-footer .bagaj-lang-switch { font-size: 13px; }
.v2-footer .bagaj-lang-switch__link { display: inline !important; margin-bottom: 0 !important; }

/* ── Accessibility ───────────────────────────────── */
:focus-visible { outline: 3px solid var(--v2-red); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sk { animation: none; background: var(--sk-a); }
  img.lazyload { animation: none; }
  .v2-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 991.98px) {
  .v2-side-sticky { position: static !important; top: auto !important; }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 767.98px) {
  .v2-sticky-pad { padding-top: 114px; }
  .v2-navbar { min-height: 48px; height: auto; }
  .v2-hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px !important;
    align-self: center;
  }
  .v2-logo svg {
    max-width: min(210px, calc(100vw - 118px));
    height: auto;
    max-height: 42px;
  }
  .v2-vs-h1 { font-size: 18px; }
  #v2-mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .cmp-table { font-size: 13px; }
  .cmp-table thead th,
  .cmp-table td { padding: 8px 6px; }
}

@media (max-width: 576px) {
  h1 { font-size: 18px !important; }
  .table > :not(caption) > * > * { padding: 8px 10px; font-size: 13px; }
  ul.spec { grid-template-columns: 1fr; }
  .skc-item { gap: 6px; padding: 9px 6px; }
  .skc-img-wrap,
  .skc-img-ph { width: 76px; height: 51px; }
  .skc-img-ph { border-radius: 7px; }
  .skc-img-wrap { border-radius: 7px; }
  .skc-name { max-width: 82px; font-size: 10px; }
  .skc-badge { width: 26px; height: 26px; font-size: 9px; }
}

/* ── Print ───────────────────────────────────────── */
@media print {
  .v2-topbar, .v2-navbar, #v2-overlay, .v2-footer { display: none !important; }
  body { background: #fff !important; }
}