/* ============================================================
   METROPOL FLEET RENTALS — DESIGN SYSTEM / SITE
   Genel sayfa bileşenleri. ds-core.css'ten SONRA yüklenir.
   İmza öğesi: altın "ışık hattı" (lit edge) — otomotiv iç mekân
   trim'inden esinlenen ince altın çizgi + odakta yumuşak parıltı.
   ============================================================ */

/* ============================================================
   1. ÜST ŞERİT + HEADER — logo / menü / telefon / CTA tek grid
   ============================================================ */

.top-bar {
  background: var(--ds-ink-900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: var(--ds-fs-xs) !important;
  padding: 7px 0 !important;
  transition: opacity var(--ds-t), transform var(--ds-t);
}
.top-bar a, .top-bar span { color: var(--ds-text-inv-2) !important; font-weight: 500; }
.top-bar a:hover { color: var(--ds-gold-400) !important; }
.top-bar i { color: var(--ds-gold-500) !important; }

.main-header {
  position: fixed !important;
  top: 34px;
  left: 0; right: 0;
  z-index: 1200 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(7, 19, 34, .82) 0%, rgba(7, 19, 34, .58) 100%) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
  transition: top .32s var(--ds-ease), background .32s var(--ds-ease),
              box-shadow .32s var(--ds-ease), border-color .32s var(--ds-ease);
}

/* Scroll'da: üst şerit gizlenir, header yapışır, beyazlar ve küçülür */
body.ds-scrolled .top-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.main-header.scrolled, body.ds-scrolled .main-header {
  top: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom-color: var(--ds-line) !important;
  box-shadow: 0 6px 26px -18px rgba(11, 27, 46, .55) !important;
}

.main-header .container { max-width: var(--ds-container); }

/* TEK GRID: logo | menü | telefon+CTA */
.main-nav {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ds-6);
  height: var(--ds-header-h);
  transition: height .32s var(--ds-ease);
}
.main-header.scrolled .main-nav, body.ds-scrolled .main-nav { height: 62px; }

.main-nav .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.main-nav .logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: height .32s var(--ds-ease), filter .32s var(--ds-ease);
}
.main-header.scrolled .logo img, body.ds-scrolled .logo img { height: 34px; }
.main-nav .brand-fallback { display: none; }

/* Menü — grid'in orta sütununda ortalanır */
.nav-menu {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .84);
  border-radius: var(--ds-r-xs);
  position: relative;
  transition: color var(--ds-t-fast), background var(--ds-t-fast);
  white-space: nowrap;
}
.nav-menu a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-menu a.active { color: var(--ds-gold-400); }
.nav-menu a.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-gold-500);
}
.main-header.scrolled .nav-menu a, body.ds-scrolled .nav-menu a { color: var(--ds-text-2); }
.main-header.scrolled .nav-menu a:hover, body.ds-scrolled .nav-menu a:hover {
  color: var(--ds-ink-800); background: var(--ds-subtle);
}
.main-header.scrolled .nav-menu a.active, body.ds-scrolled .nav-menu a.active { color: var(--ds-ink-800); }

/* Sağ blok: telefon + hesap + CTA — dengeli buton boyutları */
.nav-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  font-family: var(--ds-font-display);
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  border-radius: var(--ds-r-sm);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  transition: all var(--ds-t-fast);
}
.nav-phone i { color: var(--ds-gold-400); font-size: 13px; }
.nav-phone:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }
.main-header.scrolled .nav-phone, body.ds-scrolled .nav-phone {
  color: var(--ds-ink-800);
  border-color: var(--ds-line);
  background: var(--ds-canvas);
}
.main-header.scrolled .nav-phone i, body.ds-scrolled .nav-phone i { color: var(--ds-gold-600); }

.nav-actions .btn, .btn-nav, .btn-account-cta {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: var(--ds-r-sm);
}
.btn-account-cta {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}
.btn-account-cta:hover { background: rgba(255, 255, 255, .15) !important; border-color: rgba(255, 255, 255, .34) !important; }
.main-header.scrolled .btn-account-cta, body.ds-scrolled .btn-account-cta {
  background: var(--ds-canvas) !important;
  color: var(--ds-ink-800) !important;
  border-color: var(--ds-line) !important;
}
.main-header.scrolled .btn-account-cta:hover, body.ds-scrolled .btn-account-cta:hover {
  background: var(--ds-subtle) !important;
}

/* Hamburger */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
}
.mobile-menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--ds-t), opacity var(--ds-t-fast);
}
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.ds-scrolled .mobile-menu-toggle { background: var(--ds-canvas); border-color: var(--ds-line); }
body.ds-scrolled .mobile-menu-toggle span { background: var(--ds-ink-800); }

/* ============================================================
   2. MOBİL ÇEKMECE MENÜ
   ============================================================ */

.mobile-menu {
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px) !important;
  left: auto !important;
  z-index: 1400 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 84px 20px calc(28px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(165deg, var(--ds-ink-850) 0%, var(--ds-ink-900) 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, .1);
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .7);
  transform: translateX(102%) !important;
  transition: transform .38s var(--ds-ease-out) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.active { transform: translateX(0) !important; }

.mobile-menu > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  font-family: var(--ds-font-display);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, .9) !important;
  border-radius: var(--ds-r-sm);
  border: 1px solid transparent;
  transition: all var(--ds-t-fast);
}
.mobile-menu > a:hover, .mobile-menu > a:active {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
  color: #fff !important;
}
.mobile-menu > a.btn { margin-top: 10px; justify-content: center; }
.mobile-menu .btn-primary { color: var(--ds-ink-900) !important; }

.mobile-menu-close {
  position: absolute;
  top: 22px; right: 20px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
}
.mobile-menu-close:hover { background: rgba(255, 255, 255, .2); }

.ds-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1350;
  background: rgba(7, 19, 34, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-t), visibility var(--ds-t);
}
.ds-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
body.ds-drawer-open { overflow: hidden; }

/* ============================================================
   3. HERO — arama kutusu ilk ekranda TAM görünür
   ============================================================ */

.hero {
  position: relative;
  /* Üst şerit sayfa akışında yer kapladığı için ondan düşülür;
     böylece hero gerçekten tek ekrana sığar. */
  min-height: calc(100svh - var(--ds-topbar-h, 34px)) !important;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ds-ink-900);
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(105deg, rgba(7, 19, 34, .95) 0%, rgba(7, 19, 34, .82) 42%, rgba(7, 19, 34, .58) 100%),
    linear-gradient(0deg, rgba(7, 19, 34, .9) 0%, transparent 42%);
}
.hero-slide { filter: saturate(1.05) contrast(1.04); }

/* Üstte ince altın ışık hattı — imza öğesi */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 6;
  background: linear-gradient(90deg, transparent, rgba(30, 155, 255, .5), transparent);
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: calc(var(--ds-header-h) + 26px) 0 26px !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 468px !important;
  gap: var(--ds-9) !important;
  /* Arama kutusu her zaman ızgaranın tepesinden başlar; sol sütun
     uzasa bile kutu aşağı itilmez. Uzun ekranlarda ortalanır. */
  align-items: start;
}
@media (min-height: 960px) {
  .hero-grid { align-items: center; }
}

.hero-text { text-align: left !important; color: #fff; }

.hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px !important;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--ds-gold-300) !important;
  background: rgba(30, 155, 255, .11) !important;
  border: 1px solid rgba(30, 155, 255, .3) !important;
  border-radius: var(--ds-r-pill) !important;
  backdrop-filter: blur(10px);
  margin-bottom: 20px !important;
}
.hero-badge i { color: var(--ds-gold-400) !important; font-size: 12px; }

.hero-title {
  font-family: var(--ds-font-display) !important;
  font-size: clamp(34px, 3.5vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -.036em !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  text-wrap: balance;
}
.hero-title span {
  color: var(--ds-gold-400) !important;
  display: inline;
  position: relative;
}

.hero-desc {
  font-size: 16.5px !important;
  line-height: 1.62 !important;
  color: rgba(255, 255, 255, .8) !important;
  max-width: 54ch !important;
  margin: 0 0 22px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 0 0 24px !important;
}
.hero-actions .btn { min-height: var(--ds-h-lg) !important; padding: 0 26px !important; border-radius: var(--ds-r-sm) !important; font-size: 15px !important; }

/* Hero ikincil içerik bloğu — ilk ekranı boğmayacak kompakt hâl */
.hero-extra {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--ds-5);
}

/* Sol sütun güven rozetleri.
   Masaüstünde arama kutusunun üstündeki güven satırı aynı bilgiyi
   zaten verdiği için tekrar gösterilmez. */
.trust-rail {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-bottom: 18px !important;
}
@media (min-width: 1025px) {
  .trust-rail { display: none !important; }
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px !important;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, .88) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--ds-r-pill) !important;
  backdrop-filter: blur(8px);
}
.trust-pill i { color: var(--ds-gold-400) !important; font-size: 12px; }

/* Kampanya şeridi — ilk ekranı boğmayacak kompakt hâl */
.campaign-slider {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  margin-bottom: 14px !important;
  scrollbar-width: none;
}
.campaign-slider::-webkit-scrollbar { display: none; }
.campaign-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 300px;
  padding: 10px 15px !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: var(--ds-r-sm) !important;
  backdrop-filter: blur(10px);
}
.campaign-card strong {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-sm) !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap;
}
.campaign-card strong i { color: var(--ds-gold-400); }
.campaign-card span {
  font-size: var(--ds-fs-xs) !important;
  color: rgba(255, 255, 255, .6) !important;
  display: none;
}

/* Kompakt istatistik şeridi */
.hero-stats {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: none !important;
}
.hero-stats .stat-item {
  flex: 1;
  padding-right: var(--ds-5);
  text-align: left !important;
}
.hero-stats .stat-item + .stat-item {
  padding-left: var(--ds-5);
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.stat-number {
  display: block;
  font-family: var(--ds-font-display);
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--ds-gold-400) !important;
  line-height: 1.1;
}
.stat-label {
  display: block;
  font-size: var(--ds-fs-xs) !important;
  font-weight: 500;
  color: rgba(255, 255, 255, .6) !important;
  margin-top: 2px;
}

.payment-trust-rail {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--ds-fs-xs) !important;
  color: rgba(255, 255, 255, .6) !important;
}
.payment-trust-rail i.fab { font-size: 25px !important; color: rgba(255, 255, 255, .75) !important; }
.payment-trust-rail span { display: inline-flex; align-items: center; gap: 6px; }
.payment-trust-rail span i { color: var(--ds-gold-400) !important; }
.payment-trust-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }

/* ============================================================
   4. ARAMA KONSOLU — imza bileşen
   ============================================================ */

.hero-search-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-trust-line {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px !important;
  padding: 0 4px;
}
.search-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ds-fs-xs) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, .82) !important;
}
.search-trust-line i { color: var(--ds-gold-400) !important; font-size: 12px; }

.search-box {
  position: relative;
  background: linear-gradient(168deg, rgba(18, 48, 80, .82) 0%, rgba(9, 26, 45, .9) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: var(--ds-r-xl) !important;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  overflow: visible !important;
  padding: 0 !important;
}

/* İmza: üst kenarda altın ışık hattı */
.search-box::before {
  content: '';
  position: absolute;
  top: -1px; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-400), transparent);
  opacity: .85;
  border-radius: 1px;
}

.search-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 0 !important;
  background: none !important;
  border: 0 !important;
}
.search-box-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.024em !important;
  color: #fff !important;
  margin: 0 !important;
}
.search-box-header h2 i { color: var(--ds-gold-400) !important; font-size: 16px; }
.search-box-header::after {
  content: 'Ücretsiz iptal';
  font-size: var(--ds-fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-gold-300);
  background: rgba(30, 155, 255, .13);
  border: 1px solid rgba(30, 155, 255, .28);
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
  white-space: nowrap;
}

.search-box form { padding: 16px 24px 24px !important; }

.search-box .form-group { margin-bottom: 12px !important; }
.search-box .form-group > label {
  font-size: var(--ds-fs-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52) !important;
  margin-bottom: 6px !important;
}
.search-box .form-group > label i { color: var(--ds-gold-400) !important; }

/* Büyük, okunaklı inputlar */
.search-box input[type="text"],
.search-box select,
.search-box .datetime-picker {
  min-height: var(--ds-h-lg) !important;
  padding: 0 16px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: none !important;
  transition: border-color var(--ds-t-fast), background var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
.search-box input::placeholder { color: rgba(255, 255, 255, .42) !important; font-weight: 500; }

.search-box input[type="text"]:hover,
.search-box select:hover,
.search-box .datetime-picker:hover { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .26) !important; }

.search-box input[type="text"]:focus,
.search-box select:focus,
.search-box .datetime-picker:focus,
.search-box .datetime-picker.active {
  background: rgba(255, 255, 255, .12) !important;
  border-color: var(--ds-gold-400) !important;
  box-shadow: 0 0 0 4px rgba(30, 155, 255, .18) !important;
  outline: none !important;
}

.search-box select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
}
.search-box select option { background: var(--ds-ink-800); color: #fff; }

.search-box .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
}

/* Aynı lokasyona dönüş */
.same-location {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin-top: 9px !important;
  padding: 0 !important;
  font-size: var(--ds-fs-sm) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .74) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}
.same-location input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}
.same-location input[type="checkbox"]:checked {
  background: var(--ds-gold-500);
  border-color: var(--ds-gold-500);
}
.same-location input[type="checkbox"]:checked::after { border-color: var(--ds-ink-900); }

/* Ana CTA */
.btn-search, .search-box .btn-search {
  width: 100% !important;
  min-height: var(--ds-h-xl) !important;
  margin-top: 6px !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  border-radius: var(--ds-r-md) !important;
  letter-spacing: -.01em !important;
}

/* Lokasyon önerileri */
.location-suggestions {
  position: absolute;
  z-index: 2600;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-sh-xl);
  display: none;
}
/* SADECE .active sinifi ile acilir. ':not(:empty)' KULLANILMAZ:
   JS secim sonrasi .active'i kaldirir ama icerigi silmez; bu yuzden
   :not(:empty) listeyi acik birakip formu kapatiyordu. */
.location-suggestions.active { display: block; }
.location-suggestions:not(.active) { display: none !important; }
.location-suggestions .location-item,
.location-suggestions .suggestion-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-2);
  border-radius: var(--ds-r-xs);
  cursor: pointer;
  transition: background var(--ds-t-fast);
}
.location-suggestions .location-item:hover,
.location-suggestions .location-item.active,
.location-suggestions .suggestion-item:hover { background: var(--ds-subtle); color: var(--ds-text); }
.location-suggestions i { color: var(--ds-gold-600); }

/* ============================================================
   5. TAKVİM — premium çift ay görünümü (flatpickr)
   ============================================================ */

.flatpickr-calendar {
  width: auto !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xl) !important;
  font-family: var(--ds-font) !important;
  animation: ds-cal-in .26s var(--ds-ease-out);
}
@keyframes ds-cal-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none !important; }

.flatpickr-months {
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--ds-line-soft);
}
.flatpickr-months .flatpickr-month { height: 40px !important; color: var(--ds-text) !important; fill: var(--ds-text) !important; }
.flatpickr-current-month {
  font-family: var(--ds-font-display) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  padding: 0 !important;
  color: var(--ds-text) !important;
}
.flatpickr-current-month .cur-month { font-weight: 800 !important; margin-right: 5px; }
.flatpickr-current-month input.cur-year {
  font-family: var(--ds-font-display) !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  color: var(--ds-text-3) !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.numInputWrapper span { display: none !important; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 2px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-line);
  background: #fff;
  transition: all var(--ds-t-fast);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 12px !important; height: 12px !important; fill: var(--ds-text-2) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ds-gold-400) !important; }

.flatpickr-weekdays { background: transparent !important; height: 32px !important; }
span.flatpickr-weekday {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-text-3) !important;
  background: transparent !important;
}

.dayContainer { padding: 0 !important; }
.flatpickr-day {
  height: 38px !important;
  line-height: 38px !important;
  max-width: 38px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text) !important;
  border: 0 !important;
  border-radius: var(--ds-r-sm) !important;
  transition: background var(--ds-t-fast), color var(--ds-t-fast), transform var(--ds-t-fast);
}
.flatpickr-day:hover:not(.flatpickr-disabled) {
  background: var(--ds-subtle) !important;
  color: var(--ds-ink-800) !important;
  transform: scale(1.06);
}
.flatpickr-day.today:not(.selected) {
  box-shadow: inset 0 0 0 1.5px var(--ds-gold-400) !important;
  color: var(--ds-gold-700) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ds-ink-800) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(11, 27, 46, .7) !important;
}
.flatpickr-day.inRange {
  background: var(--ds-gold-50) !important;
  color: var(--ds-ink-800) !important;
  border-radius: 0 !important;
  box-shadow: -5px 0 0 var(--ds-gold-50), 5px 0 0 var(--ds-gold-50) !important;
}
.flatpickr-day.startRange { border-radius: var(--ds-r-sm) 0 0 var(--ds-r-sm) !important; }
.flatpickr-day.endRange   { border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0 !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--ds-line-strong) !important;
  opacity: .65;
}

/* Çift ay ayırıcı */
.flatpickr-days { border: 0 !important; }
.flatpickr-calendar.multiMonth .dayContainer + .dayContainer {
  box-shadow: -1px 0 0 var(--ds-line-soft) !important;
  padding-left: 12px !important;
  margin-left: 12px !important;
}

/* Saat seçici */
.flatpickr-time {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-line-soft) !important;
  height: 42px !important;
  line-height: 42px !important;
}
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator {
  font-family: var(--ds-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--ds-subtle) !important; }

/* ============================================================
   6. BÖLÜM RİTMİ VE BAŞLIKLAR
   ============================================================ */

section { position: relative; }

.partner-strip, .home-campaigns, .service-matrix, .features,
.location-network, .how-it-works, .testimonials, .faq-section, .cta {
  padding-block: clamp(56px, 6vw, 92px) !important;
}

.section-header, .section-title-wrap { text-align: center; margin-bottom: var(--ds-8); }
.section-title, section > .container > h2, .home-campaigns h2, .features h2,
.how-it-works h2, .testimonials h2, .faq-section h2 {
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-fs-h2) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--ds-text) !important;
  text-wrap: balance;
}
.section-subtitle, .section-desc {
  font-size: var(--ds-fs-lg) !important;
  color: var(--ds-text-2) !important;
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.62;
}

.partner-strip { background: var(--ds-canvas) !important; border-block: 1px solid var(--ds-line); padding-block: 34px !important; }
.partner-strip img { filter: grayscale(1) opacity(.55); transition: filter var(--ds-t); }
.partner-strip img:hover { filter: grayscale(0) opacity(1); }

/* Özellik / adım kartları — tek kart dili */
.feature-card, .step-card, .service-card, .campaign-card-full, .testimonial-card, .faq-item {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xs) !important;
  padding: var(--ds-6) !important;
  transition: box-shadow var(--ds-t), transform var(--ds-t), border-color var(--ds-t) !important;
}
.feature-card:hover, .step-card:hover, .service-card:hover, .campaign-card-full:hover, .testimonial-card:hover {
  box-shadow: var(--ds-sh-md) !important;
  transform: translateY(-3px);
  border-color: var(--ds-line-strong) !important;
}
.feature-icon, .step-icon, .service-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 21px;
  color: var(--ds-gold-600) !important;
  background: var(--ds-gold-50) !important;
  border: 1px solid var(--ds-gold-100);
  border-radius: var(--ds-r-md) !important;
  margin-bottom: var(--ds-4);
}

.faq-item { padding: 0 !important; overflow: hidden; }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-4);
  width: 100%;
  padding: 19px var(--ds-5) !important;
  font-family: var(--ds-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ds-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.faq-question i { color: var(--ds-gold-600); transition: transform var(--ds-t); }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { padding: 0 var(--ds-5) 19px !important; color: var(--ds-text-2); line-height: 1.68; }

.cta { background: linear-gradient(150deg, var(--ds-ink-800) 0%, var(--ds-ink-900) 100%) !important; }
.cta h2 { color: #fff !important; }
.cta p { color: rgba(255, 255, 255, .74) !important; }

/* ============================================================
   7. FOOTER
   ============================================================ */

.footer, footer.footer {
  background: var(--ds-ink-900) !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--ds-text-inv-2);
  padding-block: clamp(48px, 5vw, 72px) 0 !important;
}
.footer h3, .footer h4 {
  font-family: var(--ds-font-display);
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #fff !important;
  margin-bottom: var(--ds-4) !important;
}
.footer a { color: var(--ds-text-inv-2) !important; transition: color var(--ds-t-fast); }
.footer a:hover { color: var(--ds-gold-400) !important; }
.footer li { margin-bottom: 9px; }

/* Ekran görüntüsündeki iletişim kutuları — tek boy, tek hizalama */
.footer-contact, .footer .contact-list { display: grid; gap: 10px; }
.footer-contact a, .footer .contact-item, .footer-contact-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px !important;
  font-size: 14px;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: var(--ds-r-sm) !important;
  transition: all var(--ds-t-fast);
  text-align: left !important;
  justify-content: flex-start !important;
}
.footer-contact a:hover, .footer .contact-item:hover {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(30, 155, 255, .35) !important;
  transform: translateX(2px);
}
.footer-contact i, .footer .contact-item i, .footer-contact-item i {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--ds-ink-900) !important;
  background: var(--ds-gold-500) !important;
  border-radius: var(--ds-r-xs);
}
.footer-bottom {
  margin-top: var(--ds-8);
  padding-block: var(--ds-5);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-inv-3);
  text-align: center;
}

/* WhatsApp yüzen buton */
.whatsapp-float {
  position: fixed !important;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  width: 56px; height: 56px;
  display: grid !important;
  place-items: center;
  font-size: 27px;
  color: #fff !important;
  background: #22C35E !important;
  border-radius: 50% !important;
  box-shadow: 0 14px 30px -10px rgba(34, 195, 94, .6) !important;
  transition: transform var(--ds-t), box-shadow var(--ds-t);
}
.whatsapp-float:hover { transform: scale(1.07) translateY(-2px); box-shadow: 0 18px 38px -10px rgba(34, 195, 94, .7) !important; }

/* ============================================================
   8. ARAMA SONUÇLARI SAYFASI
   ============================================================ */

body.search-page, .search-results-page { background: var(--ds-canvas) !important; }

.search-header {
  background: var(--ds-ink-900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky;
  top: 0;
  z-index: 1200;
}
.search-summary {
  background: #fff !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: var(--ds-sh-xs);
}
.search-edit-form { display: grid; gap: 12px; }
.search-edit-form .form-row { display: grid; gap: 12px; }

.agency-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-3);
  padding: 13px var(--ds-5) !important;
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-sh-xs);
  margin-bottom: var(--ds-4);
}
.toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar-right label { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text-2); display: inline-flex; align-items: center; gap: 6px; }
.toolbar-right label i { color: var(--ds-gold-600); }
.public-price-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-success);
  background: var(--ds-success-bg);
  border: 1px solid var(--ds-success-line);
  padding: 6px 12px;
  border-radius: var(--ds-r-pill);
}
.sort-select { min-width: 178px; }

.stock-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--ds-5) !important;
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  color: var(--ds-warning);
  background: var(--ds-warning-bg) !important;
  border: 1px solid var(--ds-warning-line) !important;
  border-radius: var(--ds-r-md) !important;
  margin-bottom: var(--ds-4);
}

.class-carousel {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: var(--ds-4);
  scrollbar-width: none;
}
.class-carousel::-webkit-scrollbar { display: none; }
.class-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px 9px 9px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  box-shadow: var(--ds-sh-xs);
  transition: all var(--ds-t-fast);
  white-space: nowrap;
}
.class-chip img { width: 36px; height: 26px; object-fit: contain; }
.class-chip span { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text); }
.class-chip strong { font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-gold-700); }
.class-chip:hover { border-color: var(--ds-ink-600); transform: translateY(-2px); box-shadow: var(--ds-sh-sm); }
.class-chip.active { background: var(--ds-ink-800); border-color: var(--ds-ink-800); }
.class-chip.active span { color: #fff; }
.class-chip.active strong { color: var(--ds-gold-400); }

.results-header { margin-bottom: var(--ds-4); }
.results-header h2 {
  font-family: var(--ds-font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.026em !important;
}
.results-header .total-count { font-size: var(--ds-fs-sm) !important; font-weight: 500 !important; color: var(--ds-text-3) !important; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.active-filters > span:first-child { font-size: var(--ds-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-text-3); }
.filter-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 12px;
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  color: var(--ds-ink-800);
  background: var(--ds-gold-50);
  border: 1px solid var(--ds-gold-100);
  border-radius: var(--ds-r-pill);
}
.filter-tag a {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  font-size: 9px;
  color: var(--ds-gold-700);
  background: rgba(30, 155, 255, .16);
  border-radius: 50%;
  transition: all var(--ds-t-fast);
}
.filter-tag a:hover { background: var(--ds-danger); color: #fff; }

/* ---- Filtre paneli ---- */
.filters-sidebar {
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xs) !important;
  overflow: hidden;
  align-self: start;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}
.filters-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--ds-4) var(--ds-5) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  background: var(--ds-canvas);
  position: sticky; top: 0; z-index: 3;
}
.filters-header h3 {
  font-family: var(--ds-font-display);
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
  margin: 0;
}

.filter-group { border-bottom: 1px solid var(--ds-line-soft) !important; padding: 0 !important; }
.filter-group:last-child { border-bottom: 0 !important; }

.filter-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px var(--ds-5) !important;
  font-family: var(--ds-font);
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  text-align: left;
  transition: background var(--ds-t-fast), color var(--ds-t-fast);
}
.filter-toggle:hover { background: var(--ds-canvas) !important; }
.filter-toggle i {
  font-size: 11px;
  color: var(--ds-text-3);
  transition: transform var(--ds-t), color var(--ds-t);
}
.filter-toggle.active { color: var(--ds-ink-800) !important; }
.filter-toggle.active i { transform: rotate(180deg); color: var(--ds-gold-600); }

.filter-content {
  display: grid !important;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .32s var(--ds-ease-out);
}
.filter-content.open { grid-template-rows: 1fr; }
.filter-content > * { min-height: 0; }
.filter-content-inner, .filter-content > div:first-child { overflow: hidden; }
.filter-content.open { padding-bottom: 10px; }

/* Filtre seçenekleri — özel onay kutusu görünümü */
.filter-option {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 9px var(--ds-5) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ds-text-2) !important;
  transition: background var(--ds-t-fast), color var(--ds-t-fast);
  position: relative;
}
.filter-option::before {
  content: '';
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ds-line-strong);
  border-radius: 5px;
  background: #fff;
  transition: all var(--ds-t-fast);
}
.filter-option:hover { background: var(--ds-canvas) !important; color: var(--ds-text) !important; }
.filter-option:hover::before { border-color: var(--ds-ink-600); }
.filter-option.active { color: var(--ds-ink-800) !important; font-weight: 700 !important; background: var(--ds-gold-50) !important; }
.filter-option.active::before {
  background: var(--ds-ink-800);
  border-color: var(--ds-ink-800);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 9px var(--ds-ink-800);
}
.filter-option.active::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 24px;
  font-size: 9.5px;
  color: var(--ds-gold-400);
}
.filter-option .count, .filter-option small { margin-left: auto; font-size: var(--ds-fs-xs); color: var(--ds-text-3); font-weight: 500; }

/* Mobil filtre çekmecesi */
.filter-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1450;
  background: rgba(7, 19, 34, .6);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ds-t), visibility var(--ds-t);
}
body.filter-drawer-open .filter-drawer-backdrop { opacity: 1; visibility: visible; }
.filter-drawer-close {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--ds-text-2);
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
}

/* ---- ARAÇ KARTLARI ---- */
.cars-grid { display: grid; gap: var(--ds-4); }

.car-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 280px 1fr;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xs) !important;
  overflow: hidden;
  transition: box-shadow var(--ds-t), transform var(--ds-t), border-color var(--ds-t) !important;
}
.car-card:hover {
  box-shadow: var(--ds-sh-lg) !important;
  border-color: var(--ds-line-strong) !important;
  transform: translateY(-2px);
}
/* İmza: hover'da üstte altın ışık hattı */
.car-card::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-500), transparent);
  opacity: 0;
  transition: opacity var(--ds-t);
}
.car-card:hover::after { opacity: 1; }
.car-select-box { display: none !important; }

.car-image {
  position: relative;
  background: linear-gradient(160deg, var(--ds-canvas) 0%, var(--ds-subtle) 100%) !important;
  padding: var(--ds-5) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ds-line-soft);
  min-height: 190px;
}
.car-image img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--ds-t-slow);
}
.car-card:hover .car-image img { transform: scale(1.05); }

.car-vendor {
  position: absolute;
  left: var(--ds-4); bottom: var(--ds-4);
  display: flex; align-items: center; gap: 8px;
}
.car-vendor .vendor-logo {
  display: grid; place-items: center;
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 800;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xs);
  box-shadow: var(--ds-sh-xs);
  overflow: hidden;
}
.car-vendor .vendor-logo img { max-height: 20px; width: auto; object-fit: contain; mix-blend-mode: normal; }
.car-vendor > span:last-child { font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-text-3); }

.findeks-badge {
  position: absolute;
  top: var(--ds-3); left: var(--ds-3);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px !important;
  font-size: var(--ds-fs-2xs) !important;
  font-weight: 700 !important;
  color: var(--ds-warning) !important;
  background: var(--ds-warning-bg) !important;
  border: 1px solid var(--ds-warning-line) !important;
  border-radius: var(--ds-r-xs) !important;
}

.car-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--ds-5) !important;
}
.car-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.car-name {
  font-family: var(--ds-font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.026em !important;
  line-height: 1.24 !important;
  color: var(--ds-text) !important;
  margin: 0 !important;
}
.car-class {
  flex: 0 0 auto;
  padding: 4px 10px !important;
  font-size: var(--ds-fs-2xs) !important;
  font-weight: 700 !important;
  color: var(--ds-ink-700) !important;
  background: var(--ds-subtle) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-xs) !important;
}

/* Güven rozetleri şeridi — JS ile eklenir */
.car-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.car-badges .ds-badge { font-size: 10.5px; padding: 3.5px 9px; }

.car-features {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}
.car-features .feature {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px !important;
  font-size: var(--ds-fs-xs) !important;
  font-weight: 600 !important;
  color: var(--ds-text-2) !important;
  background: var(--ds-canvas) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-r-xs) !important;
}
.car-features .feature i { color: var(--ds-text-3); font-size: 11px; }

.car-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding-top: 11px;
  border-top: 1px dashed var(--ds-line);
  font-size: var(--ds-fs-xs) !important;
  color: var(--ds-text-3) !important;
}
.car-meta span { display: inline-flex; align-items: center; gap: 6px; }
.car-meta i { color: var(--ds-gold-600); }

.car-footer {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-4);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line-soft);
}
.price-info { display: flex; flex-direction: column; gap: 1px; }
.price-days { font-size: var(--ds-fs-xs) !important; font-weight: 600; color: var(--ds-text-3) !important; }
.price-total {
  font-family: var(--ds-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.034em !important;
  line-height: 1.1 !important;
  color: var(--ds-ink-800) !important;
}
.price-detail { font-size: var(--ds-fs-xs) !important; color: var(--ds-text-3) !important; }
.free-cancel {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px;
  font-size: var(--ds-fs-xs) !important;
  font-weight: 700 !important;
  color: var(--ds-success) !important;
}
.select-form { flex: 0 0 auto; }
.btn-select { min-height: var(--ds-h-lg) !important; padding: 0 24px !important; font-size: 15px !important; border-radius: var(--ds-r-sm) !important; }

.no-results {
  display: grid;
  place-items: center;
  gap: var(--ds-3);
  padding: var(--ds-11) var(--ds-6) !important;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
}
.no-results > i {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  font-size: 26px;
  color: var(--ds-text-3);
  background: var(--ds-subtle);
  border-radius: 50%;
  margin-bottom: 6px;
}
.no-results p { color: var(--ds-text-2); max-width: 46ch; }

/* Sayfalama */
.search-pagination a {
  min-width: 40px; height: 40px;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 13px !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-2) !important;
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-sm) !important;
  transition: all var(--ds-t-fast);
}
.search-pagination a:hover { border-color: var(--ds-ink-600) !important; color: var(--ds-ink-800) !important; }
.search-pagination a[style*="0f2744"], .search-pagination a.is-current {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800) !important;
  color: #fff !important;
}

/* ============================================================
   9. REZERVASYON AKIŞI — Stepper
   ============================================================ */

.reservation-steps, section.steps {
  background: #fff !important;
  border-bottom: 1px solid var(--ds-line) !important;
  padding-block: var(--ds-5) !important;
}
.steps, .stepbar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.steps::-webkit-scrollbar, .stepbar::-webkit-scrollbar { display: none; }

.step {
  display: flex !important;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: 0 var(--ds-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text-3);
  white-space: nowrap;
  transition: color var(--ds-t);
}
.step-number, .dot {
  display: grid !important;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  font-family: var(--ds-font-display);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ds-text-3);
  background: var(--ds-subtle);
  border: 1.5px solid var(--ds-line);
  border-radius: 50%;
  transition: all .34s var(--ds-ease-out);
}

.step.completed { color: var(--ds-text-2); }
.step.completed .step-number, .dot.done {
  background: var(--ds-success) !important;
  border-color: var(--ds-success) !important;
  color: #fff !important;
  animation: ds-step-pop .38s var(--ds-ease-out);
}
@keyframes ds-step-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.step.active { color: var(--ds-ink-800); font-weight: 700; }
.step.active .step-number, .dot.now {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800) !important;
  color: var(--ds-gold-400) !important;
  box-shadow: 0 0 0 5px rgba(30, 155, 255, .16), 0 8px 20px -8px rgba(11, 27, 46, .55);
  animation: ds-step-glow 2.6s ease-in-out infinite;
}
@keyframes ds-step-glow {
  0%, 100% { box-shadow: 0 0 0 5px rgba(30, 155, 255, .16), 0 8px 20px -8px rgba(11, 27, 46, .55); }
  50%      { box-shadow: 0 0 0 9px rgba(30, 155, 255, .07), 0 8px 20px -8px rgba(11, 27, 46, .55); }
}

.step-line {
  flex: 1 1 40px;
  min-width: 28px;
  max-width: 90px;
  height: 2px;
  background: var(--ds-line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.step-line.filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ds-success), var(--ds-gold-500));
  animation: ds-line-fill .6s var(--ds-ease-out) both;
}
@keyframes ds-line-fill { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* Rezervasyon paneli */
.reservation-page, body.reservation-page { background: var(--ds-canvas) !important; }
.reservation-panel, .booking-card, .summary-card, .panel {
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xs) !important;
  padding: var(--ds-6) !important;
}

/* ============================================================
   10. ÖDEME SAYFASI
   ============================================================ */

.credit-card {
  background: linear-gradient(140deg, var(--ds-ink-700) 0%, var(--ds-ink-900) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-lg) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.credit-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-400), transparent);
}
.credit-card .chip {
  background: linear-gradient(140deg, var(--ds-gold-300), var(--ds-gold-600)) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.card-number {
  font-family: var(--ds-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  font-variant-numeric: tabular-nums;
}

.installments label, .installment-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
  transition: all var(--ds-t-fast);
}
.installments label:hover, .installment-option:hover { border-color: var(--ds-ink-600); background: var(--ds-canvas); }
.installments input:checked + label, .installment-option.selected {
  border-color: var(--ds-gold-500);
  background: var(--ds-gold-50);
  box-shadow: var(--ds-ring);
}

.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px !important;
  font-size: var(--ds-fs-sm);
  color: var(--ds-info) !important;
  background: var(--ds-info-bg) !important;
  border: 1px solid var(--ds-info-line) !important;
  border-radius: var(--ds-r-md) !important;
}

.summary-rows .row, .order-summary .row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ds-text-2);
  border-bottom: 1px dashed var(--ds-line);
}
.summary-rows .row:last-child { border-bottom: 0; }
.row.total {
  margin-top: 6px;
  padding-top: 14px !important;
  border-top: 2px solid var(--ds-line) !important;
  border-bottom: 0 !important;
  font-family: var(--ds-font-display);
  font-size: 17px !important;
  font-weight: 800;
  color: var(--ds-text) !important;
}
.row.total strong { font-size: 24px; color: var(--ds-ink-800); letter-spacing: -.03em; }

.cards, .payment-methods {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--ds-4);
  padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-line-soft);
}
.cards p { width: 100%; font-size: var(--ds-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-3); margin: 0 0 4px; }
.cards i { font-size: 30px; color: var(--ds-text-3); transition: color var(--ds-t-fast); }
.cards i:hover { color: var(--ds-ink-700); }

/* Ödeme güven rozetleri — JS ile eklenir */
.ds-payment-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--ds-4);
}
.ds-payment-trust .ds-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  color: var(--ds-text-2);
  background: var(--ds-canvas);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xs);
}
.ds-payment-trust .ds-trust-item i { color: var(--ds-success); }

/* ============================================================
   11. BAŞARI / HESAP SAYFASI
   ============================================================ */

.success-card {
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-xl) !important;
  box-shadow: var(--ds-sh-lg) !important;
  padding: var(--ds-9) var(--ds-7) !important;
  text-align: center;
}
.success-icon {
  display: grid !important;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto var(--ds-5);
  font-size: 34px;
  color: #fff;
  background: linear-gradient(150deg, #16C088, var(--ds-success)) !important;
  border-radius: 50% !important;
  box-shadow: 0 16px 34px -14px rgba(14, 159, 110, .7) !important;
  animation: ds-step-pop .5s var(--ds-ease-out);
}
.order-details {
  margin: var(--ds-6) 0;
  padding: var(--ds-5);
  background: var(--ds-canvas);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  text-align: left;
}
.detail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  font-size: 14px;
  color: var(--ds-text-2);
  border-bottom: 1px dashed var(--ds-line);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row.total {
  margin-top: 6px; padding-top: 14px;
  border-top: 2px solid var(--ds-line);
  border-bottom: 0;
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ds-text);
}

/* ============================================================
   12. MOBİL ALT CTA ÇUBUĞU
   ============================================================ */

.mobile-reservation-bar, .mobile-pay, .mobile-sticky-cta {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 1150;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--ds-line) !important;
  box-shadow: 0 -12px 34px -20px rgba(11, 27, 46, .5) !important;
}
.mobile-reservation-bar .btn, .mobile-pay .btn {
  width: 100%;
  min-height: 52px !important;
  font-size: 16px !important;
  border-radius: var(--ds-r-sm) !important;
}

/* ============================================================
   13. RESPONSIVE — 320 / 360 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

/* --- Geniş masaüstü --- */
@media (min-width: 1600px) {
  :root { --ds-container: 1400px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 500px !important; gap: var(--ds-11) !important; }
  .car-card { grid-template-columns: 320px 1fr; }
}

/* --- 1280–1440 --- */
@media (max-width: 1440px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 448px !important; gap: var(--ds-8) !important; }
}

/* --- 1024–1279: menü sıkışmaya başlar --- */
@media (max-width: 1279px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 420px !important; gap: var(--ds-7) !important; }
  .nav-menu a { padding: 9px 10px; font-size: 14px; }
  .nav-phone span { display: none; }
  .nav-phone { padding: 0 12px; }
  .car-card { grid-template-columns: 240px 1fr; }
}

/* --- 1024–1099: iki sütun korunur, arama sütunu daraltılır --- */
@media (max-width: 1099px) and (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 396px !important; gap: var(--ds-6) !important; }
  .hero-content { padding: calc(var(--ds-header-h) + 22px) 0 22px !important; }
  .hero-title { font-size: clamp(28px, 3.4vw, 36px) !important; }
  .hero-desc { -webkit-line-clamp: 2; font-size: 15px !important; margin-bottom: 18px !important; }
  .campaign-slider { display: none !important; }
  .payment-trust-rail { display: none !important; }
  .search-box form { padding: 14px 18px 18px !important; }
  .search-box .form-group { margin-bottom: 10px !important; }
  .search-box input[type="text"], .search-box select, .search-box .datetime-picker {
    min-height: 48px !important; font-size: 15px !important;
  }
  .btn-search { min-height: 52px !important; font-size: 15.5px !important; }
  .search-trust-line { grid-template-columns: 1fr 1fr; gap: 4px 10px !important; }
  .car-card { grid-template-columns: 220px 1fr; }
}

/* --- ≤899: tek sütun, arama kutusu başlığın hemen altında --- */
@media (max-width: 899px) {
  .hero { min-height: auto !important; }
  .hero-content { padding: calc(var(--ds-header-h) + 26px) 0 var(--ds-8) !important; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--ds-5) !important;
    align-items: start;
  }
  /* Reklamdan gelen kullanıcı için: arama kutusu metnin hemen altında */
  .hero-text { display: contents; }
  .hero-intro { order: 1; }
  .hero-search-col { order: 2; }
  .hero-extra { order: 3; margin-top: var(--ds-4); }

  .hero-title { font-size: clamp(30px, 5.2vw, 40px) !important; margin-bottom: 12px !important; }
  .hero-desc { -webkit-line-clamp: 2; font-size: 15.5px !important; margin-bottom: 18px !important; }
  .hero-actions { margin-bottom: 0 !important; }
  .search-box { max-width: 620px; }
  .search-trust-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filters-sidebar { position: static; max-height: none; }
  .car-card { grid-template-columns: 220px 1fr; }
}

/* --- ≤900: menü çekmeceye taşınır --- */
@media (max-width: 900px) {
  .nav-menu { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .main-nav { grid-template-columns: auto 1fr auto; }
  .nav-actions .btn-nav, .nav-actions .btn-account-cta { display: none !important; }
  .nav-phone { display: inline-flex; }
  .top-bar { display: none !important; }
  .main-header { top: 0 !important; }
  :root { --ds-header-h: 64px; --ds-topbar-h: 0px; }
  .main-nav { height: 64px; }
}

/* --- Tablet 768 --- */
@media (max-width: 820px) {
  .car-card { grid-template-columns: 1fr !important; }
  .car-image { border-right: 0; border-bottom: 1px solid var(--ds-line-soft); min-height: 160px; }
  .car-footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .select-form { width: 100%; }
  .btn-select { width: 100%; }
  .agency-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { justify-content: space-between; }
  .sort-select { flex: 1; min-width: 0; }
  .steps, .stepbar { justify-content: flex-start; padding-inline: var(--ds-4); }
  .step span, .step > div:not(.step-number) { font-size: 13px; }
}

/* --- Mobil ≤640 --- */
@media (max-width: 640px) {
  :root {
    --ds-fs-h2: 26px;
    --ds-h-lg: 50px;
    --ds-h-xl: 54px;
  }

  .hero-content { padding: calc(var(--ds-header-h) + 24px) 0 var(--ds-7) !important; }
  .hero-badge { font-size: var(--ds-fs-xs) !important; padding: 6px 12px 6px 9px !important; }
  .hero-title { font-size: 30px !important; letter-spacing: -.03em !important; }
  .hero-desc { font-size: 15px !important; -webkit-line-clamp: 3; margin-bottom: 18px !important; }
  .hero-actions { gap: 10px !important; }
  .hero-actions .btn { flex: 1 1 100%; }

  .search-box { border-radius: var(--ds-r-lg) !important; }
  .search-box-header { padding: 16px 16px 0 !important; }
  .search-box-header h2 { font-size: 17px !important; }
  .search-box-header::after { display: none; }
  .search-box form { padding: 14px 16px 18px !important; }
  .search-box .form-row { grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .search-trust-line { grid-template-columns: 1fr 1fr; gap: 5px 10px !important; }

  .campaign-slider { margin-bottom: 14px !important; }
  .campaign-card { padding: 9px 13px !important; }
  .hero-stats .stat-item { padding-right: var(--ds-3); }
  .hero-stats .stat-item + .stat-item { padding-left: var(--ds-3); }
  .stat-number { font-size: 21px !important; }
  .stat-label { font-size: 10.5px !important; }
  .payment-trust-rail { gap: 9px !important; font-size: 10.5px !important; }
  .payment-trust-rail i.fab { font-size: 21px !important; }

  /* Tek elle kullanım: alt CTA çubuğu */
  .mobile-reservation-bar, .mobile-pay { display: block !important; }
  body.has-mobile-cta { padding-bottom: 78px; }
  .whatsapp-float { bottom: 88px; width: 52px; height: 52px; font-size: 25px; }

  .car-content { padding: var(--ds-4) !important; gap: 10px; }
  .car-name { font-size: 17px !important; }
  .price-total { font-size: 25px !important; }
  .car-meta { gap: 5px 12px; }

  .filters-header { padding: var(--ds-3) var(--ds-4) !important; }
  .filter-toggle { padding: 14px var(--ds-4) !important; }
  .filter-option { padding: 10px var(--ds-4) !important; }

  .success-card { padding: var(--ds-7) var(--ds-5) !important; }
  .success-icon { width: 70px; height: 70px; font-size: 28px; }

  .flatpickr-calendar { padding: 10px !important; }
  .flatpickr-day { height: 36px !important; line-height: 36px !important; max-width: 36px !important; }
}

/* --- Küçük mobil 390 / 375 --- */
@media (max-width: 400px) {
  .hero-title { font-size: 27px !important; }
  .search-box .form-row { grid-template-columns: 1fr; }
  .search-trust-line { grid-template-columns: 1fr; }
  .car-features .feature { padding: 5px 9px !important; font-size: 11px !important; }
}

/* --- En küçük 320 --- */
@media (max-width: 340px) {
  .ds-container, .container { padding-inline: 12px; }
  .hero-title { font-size: 24px !important; }
  .hero-desc { font-size: 14px !important; }
  .search-box form { padding: 12px 13px 16px !important; }
  .search-box input[type="text"], .search-box select, .search-box .datetime-picker {
    min-height: 46px !important; font-size: 14.5px !important;
  }
  .btn-search { min-height: 50px !important; font-size: 15px !important; }
  .price-total { font-size: 22px !important; }
  .stat-number { font-size: 19px !important; }
}

/* --- Alçak ekranlar: hero'yu sıkıştır ki arama kutusu görünsün --- */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-content { padding: calc(var(--ds-header-h) + 20px) 0 20px !important; }
  .hero-title { font-size: clamp(28px, 2.8vw, 38px) !important; margin-bottom: 12px !important; }
  .hero-desc { -webkit-line-clamp: 2; margin-bottom: 16px !important; }
  .campaign-slider { display: none !important; }
  .payment-trust-rail { display: none !important; }
  .hero-badge { margin-bottom: 14px !important; }
  .hero-actions { margin-bottom: 18px !important; }
  .search-box form { padding: 12px 20px 16px !important; }
  .search-box-header { padding: 14px 20px 0 !important; }
  .search-box .form-group { margin-bottom: 9px !important; }
  .search-box input[type="text"], .search-box select, .search-box .datetime-picker {
    min-height: 46px !important;
  }
  .btn-search { min-height: 50px !important; margin-top: 4px !important; }
  .same-location { margin-top: 7px !important; }
  .hero-search-col { gap: 9px; }
}

@media (min-width: 900px) and (max-height: 700px) {
  .hero-stats { display: none !important; }
  .hero-desc { display: none !important; }
  .hero-content { padding: calc(var(--ds-header-h) + 14px) 0 14px !important; }
}

/* Çok alçak ekranlar (ör. 1024x600 netbook) */
@media (min-width: 900px) and (max-height: 640px) {
  .search-trust-line { display: none !important; }
  .hero-badge { display: none !important; }
  .search-box-header { padding: 12px 18px 0 !important; }
  .search-box form { padding: 10px 18px 14px !important; }
  .search-box .form-group { margin-bottom: 7px !important; }
  .search-box .form-group > label { margin-bottom: 3px !important; font-size: 10px !important; }
  .search-box input[type="text"], .search-box select, .search-box .datetime-picker {
    min-height: 42px !important; font-size: 14px !important;
  }
  .btn-search { min-height: 46px !important; font-size: 15px !important; }
  .same-location { margin-top: 5px !important; font-size: 12px !important; }
  .hero-title { font-size: 26px !important; }
  .hero-actions { margin-bottom: 12px !important; }
  .hero-actions .btn { min-height: 42px !important; }
}

/* --- Yatay mobil --- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: auto !important; }
  .mobile-menu { padding-top: 68px !important; }
}

/* ============================================================
   14. TUTARLILIK ZORLAMA KATMANI
   Eski stil dosyalarındaki (final-polish, enterprise-responsive,
   admin-enterprise ve sayfa içi <style> blokları) yüksek öncelikli
   kuralları tek tasarım sistemine bağlar.
   Yalnızca görsel özellikler; hiçbir düzen/işlev değişmez.
   ============================================================ */

/* ---- 14.1 Birincil butonlar: her yerde altın ---- */
body .btn-primary,
body .btn-search,
body .btn-select,
body .search-btn,
body .cta-button,
body .book-btn,
body .pay-button,
body #payButton,
body .btn-login,
body .mobile-pay button,
body .mobile-pay .btn,
body .mobile-reservation-bar .btn-primary,
body.admin-portal-page .btn-primary {
  background: linear-gradient(180deg, var(--ds-gold-400) 0%, var(--ds-gold-500) 62%, var(--ds-gold-600) 100%) !important;
  background-image: linear-gradient(180deg, var(--ds-gold-400) 0%, var(--ds-gold-500) 62%, var(--ds-gold-600) 100%) !important;
  color: var(--ds-ink-900) !important;
  border: 1px solid rgba(138, 109, 20, .38) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: var(--ds-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
  font-family: var(--ds-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
}
body .btn-primary:hover,
body .btn-search:hover,
body .btn-select:hover,
body .btn-login:hover,
body.admin-portal-page .btn-primary:hover {
  background-image: linear-gradient(180deg, var(--ds-gold-300) 0%, var(--ds-gold-400) 62%, var(--ds-gold-500) 100%) !important;
  box-shadow: var(--ds-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  color: var(--ds-ink-900) !important;
}

/* ---- 14.2 Çerçeveli butonlar ---- */
body .btn-outline,
body.admin-portal-page .btn-outline {
  background-image: none !important;
  background-color: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: none !important;
  font-family: var(--ds-font-display) !important;
}
body .hero .btn-outline,
body .cta .btn-outline,
body .hero-actions .btn-outline {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .3) !important;
}

/* ---- 14.3 Buton görünümü olmayan <button> öğeleri ----
   Eski katman tüm <button> etiketlerine mavi gradient veriyordu. */
body .filter-toggle,
body .faq-question,
body .mobile-menu-toggle,
body .mobile-menu-close,
body .filter-drawer-close,
body .ds-select__trigger,
body .ds-theme-toggle,
body .ds-sidebar-toggle,
body .flatpickr-prev-month,
body .flatpickr-next-month,
body .fleet-tab,
body .tab-btn {
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--ds-font) !important;
}
body .filter-toggle,
body .faq-question { background-color: transparent !important; color: var(--ds-text) !important; }
body .filter-toggle:hover { background-color: var(--ds-canvas) !important; }
body .mobile-menu-toggle { background-color: rgba(255, 255, 255, .08) !important; }
body.ds-scrolled .mobile-menu-toggle { background-color: var(--ds-canvas) !important; }
body .mobile-menu-close { background-color: rgba(255, 255, 255, .1) !important; color: #fff !important; }
body .ds-select__trigger { background-color: var(--ds-surface) !important; color: var(--ds-text) !important; }
body .search-box .ds-select__trigger,
body [data-ds-dark] .ds-select__trigger {
  background-color: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
body .ds-theme-toggle,
body .ds-sidebar-toggle,
body .filter-drawer-close { background-color: var(--ds-canvas) !important; color: var(--ds-text-2) !important; }
body .flatpickr-prev-month,
body .flatpickr-next-month { background-color: #fff !important; }
body .flatpickr-prev-month:hover,
body .flatpickr-next-month:hover { background-color: var(--ds-ink-800) !important; }

/* ---- 14.4 Köşe yarıçapı: tek ölçek (6 / 10 / 14 / 18 / 24 / pill) ---- */
body .hero-stats,
body .search-info-card,
body .card-scene,
body .campaign-showcase-card,
body .quick-service-card,
body .summary,
body .order-item,
body .search-summary-card,
body .info-card,
body .promo-card { border-radius: var(--ds-r-lg) !important; }

body .campaign-icon,
body .days,
body .sort-select,
body .filter-option,
body .user-menu,
body .logout-btn,
body .badge,
body .tag,
body .chip,
body .pill { border-radius: var(--ds-r-xs) !important; }

body .section-badge,
body .trust-pill,
body .class-chip,
body .filter-tag,
body .ds-chip { border-radius: var(--ds-r-pill) !important; }

body .search-box-header { border-radius: 0 !important; }
body .car-footer { border-radius: 0 !important; }
body .sort-select { border-radius: var(--ds-r-sm) !important; }

/* Görseller tek yarıçap kullansın */
body .car-image img,
body .campaign-showcase-card img,
body .testimonial-card img { border-radius: var(--ds-r-sm) !important; }

/* ---- 14.5 Gölge: mavi tonlu eski gölgeler → lacivert ölçek ---- */
body .search-info-card,
body .campaign-showcase-card,
body .quick-service-card,
body .summary,
body .card-scene,
body .promo-card,
body .info-card { box-shadow: var(--ds-sh-xs) !important; }

body .sort-select,
body .days,
body .user-menu,
body .logout-btn { box-shadow: none !important; }

/* ---- 14.6 Native select görünümünü tamamen kaldır ---- */
body select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C8AA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-sm) !important;
  font-weight: 500 !important;
}
/* JS ile özel açılır listeye dönüşenler gizlenir */
body select.ds-select__native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ---- 14.7 Tipografi: tek aile ---- */
body, body input, body select, body textarea, body button, body a, body p, body span, body div, body li, body td, body th {
  font-family: var(--ds-font);
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .hero-title, body .section-title, body .stat-value, body .stat-number,
body .price-total, body .car-name, body .search-box-header h2 {
  font-family: var(--ds-font-display) !important;
}

/* ---- 14.8 Takvim başlığı: mavi bant → beyaz premium ---- */
body .flatpickr-months {
  background: #fff !important;
  background-image: none !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--ds-line-soft) !important;
}
body .flatpickr-months .flatpickr-month,
body .flatpickr-current-month,
body .flatpickr-current-month input.cur-year { color: var(--ds-text) !important; fill: var(--ds-text) !important; }
body span.flatpickr-weekday { color: var(--ds-text-3) !important; }
body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800) !important;
  color: #fff !important;
}
body .flatpickr-day.inRange { background: var(--ds-gold-50) !important; color: var(--ds-ink-800) !important; }
body .flatpickr-day.today:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--ds-gold-400) !important; color: var(--ds-gold-700) !important; }

/* ============================================================
   15. OTOMATIK NORMALIZASYON
   Eski katmanlarda olcek disi kalan kose yaricaplari ve
   mavi tonlu golgeler tek tasarim sistemine baglanir.
   Bu blok kaynak taramasiyla uretilmistir.
   ============================================================ */

/* -> var(--ds-r-xs) */
body .btn-dark,
body .btn-edit,
body .btn-outline,
body .btn-select,
body .campaign-card,
body .campaign-icon,
body .campaign-showcase-card,
body .car-card,
body .car-footer,
body .car-head,
body .car-head img,
body .car-summary img,
body .car-vendor,
body .card-scene,
body .chip,
body .class-chip,
body .content-card,
body .debug-info pre,
body .enterprise-menu-toggle span,
body .extra-product-item,
body .faq-list details,
body .faq-list summary::after,
body .feature-card,
body .filters-card,
body .filters-sidebar,
body .filters-sidebar::-webkit-scrollbar-thumb,
body .flatpickr-time input,
body .fleet-card,
body .form-group textarea,
body .hero-actions .btn,
body .hero-stats,
body .info,
body .installments,
body .location-item i,
body .login-card,
body .mobile-menu-toggle span,
body .mobile-nav a,
body .nav-item,
body .network-grid div,
body .notice,
body .order-item img,
body .page-alert,
body .panel,
body .partner-logo-card,
body .partner-marquee .partner-logo-card,
body .payment-option-content,
body .public-price-input,
body .public-price-note,
body .quick-service-card span,
body .reservation-form-section,
body .same-location input,
body .search-box-header,
body .search-edit-card,
body .search-edit-close,
body .search-info-card,
body .section-header i,
body .service-matrix-grid article,
body .settings-card,
body .sidebar-logo span,
body .sort-select,
body .stat-card,
body .stat-icon,
body .step-card,
body .stock-banner,
body .sum-car img,
body .summary,
body .summary-card,
body .testimonial-card,
body .trust-pill,
body .vehicle-hero,
body .vehicle-hero img,
body .vendor-logo,
body .vendor-rating strong,
body .whatsapp-tooltip,
body ::-webkit-scrollbar-thumb,
body input,
body select {
  border-radius: var(--ds-r-xs) !important;
}

/* -> var(--ds-r-sm) */
body #payButton,
body .account-alert,
body .account-stats article > i,
body .account-trust-card > div,
body .account-trust-card i,
body .admin-login-page .btn-login,
body .admin-login-page .input-group input,
body .admin-sidebar a,
body .alert,
body .alert-error,
body .book-btn,
body .btn,
body .btn-login,
body .btn-primary,
body .btn-search,
body .card,
body .cta-button,
body .enterprise-mobile-panel nav a,
body .enterprise-mobile-panel nav a i,
body .enterprise-site-header .brand img,
body .enterprise-site-header .logo img,
body .filter-option,
body .filters-header h3 i,
body .footer-contact i,
body .form-group input,
body .form-group select,
body .input-group input,
body .location-suggestions,
body .logout-btn,
body .lookup-result-grid > div,
body .main-header .logo img,
body .mobile-menu-toggle,
body .mobile-pay button,
body .mobile-sticky-cta a,
body .order-details,
body .pagination a,
body .pagination span,
body .partner-logo,
body .pay-button,
body .reservation-detail-item,
body .search-btn,
body .search-edit-field input,
body .search-edit-field select,
body .search-header .logo img,
body .sidebar a,
body .site-footer-contact .site-footer-address,
body .site-footer-contact > a,
body .success-card,
body .table-container,
body .user-menu,
body button,
body textarea,
body.admin-portal-page .alert,
body.admin-portal-page .btn,
body.admin-portal-page .form-group input,
body.admin-portal-page .form-group select,
body.admin-portal-page .form-group textarea,
body.admin-portal-page .logout-btn,
body.admin-portal-page .sidebar-logo i,
body.admin-portal-page .user-menu {
  border-radius: var(--ds-r-sm) !important;
}

/* -> var(--ds-r-md) */
body .account-avatar,
body .admin-card,
body .campaign-showcase-card.has-image,
body .campaign-showcase-card.has-image a,
body .credit-card,
body .data-card,
body .enterprise-menu-toggle,
body .filter-card,
body .filter-card::before,
body .filter-sidebar,
body .filter-sidebar::before,
body .filters,
body .filters::before,
body .flatpickr-calendar,
body .form-card,
body .hero-card,
body .order-summary,
body .payment-card,
body .quick-service-card,
body .quick-service-card > span,
body .reservation-account-image,
body .reservation-card,
body .reservation-detail-car img,
body .result-card,
body .search-panel,
body .social-links a,
body .vehicle-card,
body.admin-portal-page .nav-item {
  border-radius: var(--ds-r-md) !important;
}

/* -> var(--ds-r-lg) */
body .admin-login-page .login-card,
body .footer-brand,
body .footer-card,
body .footer-cta,
body .site-footer-support {
  border-radius: var(--ds-r-lg) !important;
}

/* -> var(--ds-r-xl) */
body .auth-card,
body .login-box,
body .search-box {
  border-radius: var(--ds-r-xl) !important;
}

/* -> var(--ds-r-2xl) */
body .btn-edit-search,
body .car-class,
body .filter-tag,
body .findeks-badge,
body .fleet-badge,
body .fleet-tab,
body .hero-badge,
body .rental-info .days,
body .section-badge {
  border-radius: var(--ds-r-2xl) !important;
}

/* -> var(--ds-r-pill) */
body .badge {
  border-radius: var(--ds-r-pill) !important;
}

/* Mavi tonlu golgeler -> lacivert olcek */
body #payButton,
body #payButton:hover,
body .admin-login-page .btn-login,
body .admin-login-page .input-group input:focus,
body .book-btn,
body .book-btn:hover,
body .btn,
body .btn-primary,
body .btn-primary:hover,
body .btn-select,
body .btn-select:hover,
body .btn:hover,
body .class-chip.active,
body .class-chip:hover,
body .credit-card,
body .cta-button,
body .cta-button:hover,
body .enterprise-menu-toggle,
body .flatpickr-calendar,
body .mobile-menu-toggle,
body .mobile-pay button,
body .pay-button,
body .pay-button:hover,
body .search-btn,
body .search-btn:hover,
body .service-matrix-grid span,
body .site-footer-call,
body .stock-banner,
body button,
body button:hover,
body input.datetime-picker:focus,
body input:focus,
body select:focus,
body.admin-portal-page .btn-primary,
body.admin-portal-page .form-group input:focus,
body.admin-portal-page .form-group select:focus,
body.admin-portal-page .form-group textarea:focus {
  box-shadow: var(--ds-sh-md) !important;
}

/* ============================================================
   16. ESKİ DEĞİŞKEN AİLELERİNİN TOKEN'LARA BAĞLANMASI
   Projede zamanla biriken --mfr-*, --enterprise-*, --admin-* ve
   genel değişken setleri tek tasarım sistemine yönlendirilir.
   Böylece o değişkenleri kullanan YÜZLERCE eski kural, hiçbirine
   tek tek dokunmadan otomatik olarak sisteme uyar.

   Renk disiplini: ALTIN = eylem (CTA, vurgu). LACİVERT = yapı.
   ============================================================ */
:root {
  /* ---- Yapı / marka ---- */
  --primary: var(--ds-ink-900);
  --primary-color: var(--ds-ink-800);
  --primary-dark: var(--ds-ink-900);
  --primary-light: var(--ds-ink-700);
  --secondary-color: var(--ds-ink-700);

  --mfr-navy: var(--ds-ink-900);
  --mfr-deep: var(--ds-ink-900);
  --mfr-deep-2: var(--ds-ink-800);
  --mfr-ink: var(--ds-text);
  --mfr-text: var(--ds-text);
  --mfr-text-soft: var(--ds-text-2);
  --mfr-muted: var(--ds-text-3);

  --enterprise-navy: var(--ds-ink-900);
  --enterprise-ink: var(--ds-text);
  --enterprise-muted: var(--ds-text-3);

  --admin-navy: var(--ds-ink-850);
  --admin-navy-2: var(--ds-ink-700);
  --admin-ink: var(--ds-text);
  --admin-muted: var(--ds-text-3);

  /* ---- Aksiyon rengi: mavi aile → lacivert (CTA'lar altın kalır) ---- */
  --mfr-primary: var(--ds-ink-700);
  --mfr-primary-2: var(--ds-ink-800);
  --mfr-blue: var(--ds-ink-600);
  --enterprise-blue: var(--ds-ink-700);
  --enterprise-blue-dark: var(--ds-ink-800);
  --admin-blue: var(--ds-ink-600);
  --admin-blue-dark: var(--ds-ink-800);

  /* ---- Vurgu: altın ---- */
  --accent: var(--ds-gold-500);
  --accent-color: var(--ds-gold-500);
  --accent-hover: var(--ds-gold-600);
  --mfr-gold: var(--ds-gold-500);
  --mfr-accent: var(--ds-gold-500);
  --mfr-accent-soft: var(--ds-gold-100);
  --enterprise-gold: var(--ds-gold-500);
  --admin-gold: var(--ds-gold-500);

  /* ---- Metin ---- */
  --text: var(--ds-text);
  --text-dark: var(--ds-text);
  --text-light: var(--ds-text-2);
  --text-muted: var(--ds-text-3);

  /* ---- Yüzey / çizgi ---- */
  --bg: var(--ds-canvas);
  --bg-light: var(--ds-canvas);
  --bg-white: var(--ds-surface);
  --white: #ffffff;
  --black: var(--ds-ink-900);
  --border: var(--ds-line);
  --border-color: var(--ds-line);
  --mfr-border: var(--ds-line);
  --mfr-line: var(--ds-line);
  --mfr-soft: var(--ds-canvas);
  --mfr-surface: var(--ds-surface);
  --mfr-surface-2: var(--ds-canvas);
  --enterprise-line: var(--ds-line);
  --enterprise-bg: var(--ds-canvas);
  --enterprise-white: var(--ds-surface);
  --admin-line: var(--ds-line);
  --admin-canvas: var(--ds-canvas);
  --admin-surface: var(--ds-surface);

  /* ---- Durum ---- */
  --success-color: var(--ds-success);
  --warning-color: var(--ds-warning);
  --danger-color: var(--ds-danger);

  /* ---- Köşe yarıçapı: TEK ölçek ---- */
  --radius-sm: var(--ds-r-xs);
  --radius: var(--ds-r-sm);
  --radius-md: var(--ds-r-sm);
  --radius-lg: var(--ds-r-md);
  --radius-xl: var(--ds-r-lg);
  --border-radius-sm: var(--ds-r-xs);
  --border-radius: var(--ds-r-sm);
  --border-radius-lg: var(--ds-r-md);
  --border-radius-xl: var(--ds-r-lg);
  --enterprise-radius: var(--ds-r-sm);

  /* ---- Gölge: TEK ölçek ---- */
  --shadow-sm: var(--ds-sh-xs);
  --shadow: var(--ds-sh-sm);
  --shadow-md: var(--ds-sh-sm);
  --shadow-lg: var(--ds-sh-md);
  --shadow-xl: var(--ds-sh-lg);
  --mfr-shadow: var(--ds-sh-sm);
  --mfr-card-shadow: var(--ds-sh-xs);
  --mfr-card-shadow-hover: var(--ds-sh-md);
  --mfr-focus: var(--ds-ring);
  --enterprise-shadow: var(--ds-sh-sm);
  --admin-shadow: var(--ds-sh-xs);
}

/* Karanlık modda yüzey değişkenleri de takip etsin */
.admin-portal-page.ds-dark {
  --admin-surface: var(--ds-admin-surface);
  --admin-canvas: var(--ds-admin-bg);
  --admin-line: var(--ds-admin-line);
  --admin-ink: var(--ds-admin-text);
  --admin-muted: var(--ds-admin-text-3);
  --bg-white: var(--ds-admin-surface);
  --border: var(--ds-admin-line);
  --text: var(--ds-admin-text);
}

/* ---- Kalan tekil sapmalar ---- */
body .payment-option,
body label.payment-option { border-radius: var(--ds-r-sm) !important; }

body.admin-login-page input,
body.admin-login-page .btn-login,
body .login-card input,
body .login-card .btn-login { border-radius: var(--ds-r-sm) !important; }

body.admin-portal-page .user-menu,
body.admin-portal-page .logout-btn { border-radius: var(--ds-r-sm) !important; }

/* Görsellerde tek yarıçap */
body .car-image img,
body .vehicle-hero img,
body .reservation-detail-car img { border-radius: var(--ds-r-sm) !important; }

/* ============================================================
   17. MOBİL CRO İNCE AYARI
   Reklamdan gelen kullanıcı için arama kutusunu başlığın hemen
   altına alır; ikincil metin ve butonlar aşağı iner.
   ============================================================ */

@media (max-width: 899px) {
  /* Hero metin bloğunun çocukları doğrudan ızgara öğesi olur,
     böylece her biri ayrı sıralanabilir. */
  .hero-intro { display: contents; }

  .hero-badge      { order: 1; }
  .hero-title      { order: 2; }
  .hero-desc       { order: 3; }
  .hero-search-col { order: 4; }
  .hero-actions    { order: 5; }
  .hero-extra      { order: 6; }

  .hero-desc { margin-bottom: 4px !important; }
  .hero-actions { margin-top: 4px !important; }
}

@media (max-width: 640px) {
  /* Küçük ekranda açıklama kısalır; kutu daha da yukarı çıkar */
  .hero-desc { -webkit-line-clamp: 2; font-size: 14.5px !important; margin-bottom: 2px !important; }
  .hero-badge { margin-bottom: 12px !important; }
  .hero-title { margin-bottom: 10px !important; }
  .hero-actions .btn { flex: 1 1 100%; }

  /* Alt sabit CTA çubuğu — tek elle kullanım */
  .mobile-sticky-cta {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1150;
    display: block !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--ds-line) !important;
    box-shadow: 0 -12px 34px -20px rgba(11, 27, 46, .5) !important;
  }
  .mobile-sticky-cta a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px !important;
    font-family: var(--ds-font-display) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--ds-ink-900) !important;
    background: linear-gradient(180deg, var(--ds-gold-400) 0%, var(--ds-gold-500) 62%, var(--ds-gold-600) 100%) !important;
    border: 1px solid rgba(138, 109, 20, .38) !important;
    border-radius: var(--ds-r-sm) !important;
    box-shadow: var(--ds-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
  }
  body.has-mobile-cta { padding-bottom: 80px; }
  .whatsapp-float { bottom: 92px !important; }
}

/* Kampanya kartı: tek yarıçap + hafif gölge */
body .campaign-card {
  border-radius: var(--ds-r-sm) !important;
  box-shadow: none !important;
}

/* ============================================================
   18. SON DÜZELTMELER
   Responsive taramasında tespit edilen üç konu.
   ============================================================ */

/* --- 18.1 Kapalı çekmece: ekran okuyucu ve Tab erişimine kapalı olsun.
   transform ile taşınmış panel görsel olarak gizli ama odaklanılabilir
   kalıyordu; bu erişilebilirlik hatasıdır. --- */
/* Panel acik durumu body.enterprise-nav-open ile yonetilir
   (kaynak: assets/js/enterprise-nav.js). Kapaliyken ekran okuyucu
   ve Tab sirasinin disinda kalmali. */
body:not(.enterprise-nav-open) .enterprise-mobile-panel {
  visibility: hidden;
  pointer-events: none;
}
body.enterprise-nav-open .enterprise-mobile-panel {
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu:not(.active) {
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.active { visibility: visible; pointer-events: auto; }

/* --- 18.2 Partner logo şeridi: kapsayıcıyı taşırmasın --- */
.partner-strip,
.partner-marquee-wrap,
.partner-logos { overflow: hidden; }
.partner-marquee {
  max-width: 100%;
  will-change: transform;
}
@media (max-width: 640px) {
  .partner-marquee { gap: 28px !important; }
}

/* --- 18.3 Mobil dokunma hedefleri: en az 44px.
   Onay kutusunun görsel boyutu 19px kalır; tıklanabilir alan büyür. --- */
@media (max-width: 767px) {
  .extra-product-label,
  .same-location,
  .filter-option,
  .checkbox-label,
  .form-check,
  label.terms-label,
  .payment-option {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Etiketi olmayan tekil onay kutuları için görünmez dokunma alanı */
  input[type="checkbox"],
  input[type="radio"] {
    position: relative;
  }
  input[type="checkbox"]::before,
  input[type="radio"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

/* ============================================================
   19. CANLI ORTAM HATA DÜZELTMELERİ
   Kullanıcının bildirdiği sorunlar.
   ============================================================ */

/* --- 19.1 iOS'ta forma tıklayınca sayfanın yakınlaşması ---
   Safari, yazı boyutu 16px'in altındaki alanlara odaklanınca
   sayfayı otomatik yakınlaştırır. Mobilde tüm alanlar 16px. --- */
@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  input[type="datetime-local"], input[type="search"], input[type="url"],
  select, textarea,
  .search-box input[type="text"], .search-box select,
  .search-box .datetime-picker,
  .ds-select__trigger {
    font-size: 16px !important;
  }
}

/* --- 19.2 Yatay kayma koruması ---
   Sabit konumlu çekmece panelleri bazı tarayıcılarda yatay
   kaydırma yaratıyordu. --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body { position: relative; }

/* --- 19.3 Üst menü "Üye Ol / Giriş Yap" butonu görünmüyordu ---
   Beyaz zeminde beyaz metin kalıyordu. Her iki header durumu
   için de açıkça tanımlandı. --- */
body .nav-actions .btn-account-cta,
body .main-header .btn-account-cta {
  background: rgba(255, 255, 255, .1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
body .nav-actions .btn-account-cta i,
body .main-header .btn-account-cta i { color: var(--ds-gold-400) !important; }

body .nav-actions .btn-account-cta:hover,
body .main-header .btn-account-cta:hover {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  color: #ffffff !important;
}

/* Header beyazladığında (scroll) koyu metin */
body.ds-scrolled .nav-actions .btn-account-cta,
body .main-header.scrolled .btn-account-cta {
  background: #ffffff !important;
  color: var(--ds-ink-800) !important;
  border: 1px solid var(--ds-line-strong) !important;
}
body.ds-scrolled .nav-actions .btn-account-cta i,
body .main-header.scrolled .btn-account-cta i { color: var(--ds-gold-600) !important; }
body.ds-scrolled .nav-actions .btn-account-cta:hover,
body .main-header.scrolled .btn-account-cta:hover {
  background: var(--ds-canvas) !important;
  border-color: var(--ds-ink-600) !important;
  color: var(--ds-ink-800) !important;
}

/* --- 19.4 Hesap sayfası başlığı siyah görünüyordu ---
   Koyu lacivert zeminde koyu metin okunmuyordu. --- */
body .account-hero h1,
body .account-hero h2,
body .account-hero p,
body .account-hero .account-hero-grid > div > h1 {
  color: #ffffff !important;
}
body .account-hero h1 span { color: var(--ds-gold-400) !important; }
body .account-hero p { color: rgba(255, 255, 255, .78) !important; }
body .account-hero .ds-eyebrow,
body .account-hero .account-badge { color: var(--ds-gold-300) !important; }

/* --- 19.5 Tedarikçi logoları renksiz görünüyordu ---
   Gri filtre kaldırıldı; logolar kendi renkleriyle. --- */
body .partner-strip img,
body .partner-marquee img,
body .partner-logos img,
body .supplier-logo img {
  filter: none !important;
  opacity: 1 !important;
}
body .partner-strip img:hover,
body .partner-marquee img:hover { filter: none !important; opacity: 1 !important; }

/* --- 19.6 Filtrede çift onay kutusu ---
   İşaretleme zaten <span class="check"> içeriyor; benim eklediğim
   ikinci kutu kaldırıldı, mevcut olan biçimlendirildi. --- */
body .filter-option::before,
body .filter-option::after { content: none !important; display: none !important; }

body .filter-option {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
body .filter-option .check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ds-line-strong);
  border-radius: 5px;
  background: #fff;
  transition: all var(--ds-t-fast);
}
body .filter-option .check i {
  font-size: 9.5px;
  color: transparent;
  transition: color var(--ds-t-fast);
}
body .filter-option:hover .check { border-color: var(--ds-ink-600); }
body .filter-option.active .check {
  background: var(--ds-ink-800);
  border-color: var(--ds-ink-800);
}
body .filter-option.active .check i { color: var(--ds-gold-400); }
/* Şirket adı her zaman görünür ve taşmasın */
body .filter-option > span:not(.check) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 19.7 Mobilde CTA altındaki alanlar ---
   Güven rozetleri, istatistikler ve ödeme şeridi daha düzenli. --- */
@media (max-width: 640px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 52px !important;
    justify-content: center;
  }

  /* Kampanya kartları: tek sütun, tam genişlik */
  .campaign-slider {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    overflow: visible;
  }
  .campaign-card {
    max-width: none;
    min-height: 46px;
    padding: 9px 11px !important;
  }
  .campaign-card strong { font-size: 12px !important; white-space: normal; line-height: 1.3; }

  /* İstatistikler: üç eşit sütun, ortalı */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    padding: 14px 0 0 !important;
  }
  .hero-stats .stat-item {
    padding: 0 8px !important;
    text-align: center !important;
  }
  .hero-stats .stat-item + .stat-item {
    padding-left: 8px !important;
    border-left: 1px solid rgba(255, 255, 255, .12);
  }
  .stat-number { font-size: 20px !important; }
  .stat-label { font-size: 10px !important; line-height: 1.25; }

  /* Güven rozetleri: iki sütun ızgara */
  .trust-rail {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
  }
  .trust-pill {
    justify-content: center;
    text-align: center;
    font-size: 11.5px !important;
    padding: 8px 10px !important;
    min-height: 40px;
  }
  .trust-pill:nth-child(odd):last-child { grid-column: 1 / -1; }

  /* Ödeme güven şeridi: ortalı ve sarmalı */
  .payment-trust-rail {
    justify-content: center;
    gap: 10px !important;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .campaign-slider { grid-template-columns: 1fr; }
  .trust-rail { grid-template-columns: 1fr; }
}

/* ============================================================
   20. CANLI ORTAM DÜZELTMELERİ — 2. TUR
   ============================================================ */

/* --- 20.1 Mobil menü bembeyaz açılıyordu ---
   Sitenin kendi .mobile-menu kuralı beyaz zemin veriyor ve benim
   lacivert kuralımı eziyordu. Yüksek öncelikle sabitlendi. --- */
body .mobile-menu,
body div.mobile-menu#mobileMenu {
  background: linear-gradient(165deg, #0A1A2C 0%, #071322 100%) !important;
  background-color: #0A1A2C !important;
  border-left: 1px solid rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}
body .mobile-menu a,
body .mobile-menu > a,
body .mobile-menu span,
body .mobile-menu strong,
body .mobile-menu li,
body .mobile-menu p {
  color: rgba(255, 255, 255, .92) !important;
}
body .mobile-menu a i { color: var(--ds-gold-400) !important; }
body .mobile-menu a:hover,
body .mobile-menu a:active {
  background: rgba(255, 255, 255, .09) !important;
  color: #ffffff !important;
}
body .mobile-menu hr,
body .mobile-menu .divider { border-color: rgba(255, 255, 255, .12) !important; }
/* Menü içindeki altın CTA okunur kalsın */
body .mobile-menu .btn-primary,
body .mobile-menu a.btn-primary { color: var(--ds-ink-900) !important; }
body .mobile-menu .btn-outline {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .3) !important;
}

/* --- 20.2 "Üye Ol / Giriş Yap" beyaz zeminde kayboluyordu ---
   Header açık da olsa koyu da olsa okunması için DOLU lacivert
   buton yapıldı. --- */
body .nav-actions .btn-account-cta,
body .main-header .btn-account-cta,
body.ds-scrolled .nav-actions .btn-account-cta,
body .main-header.scrolled .btn-account-cta {
  background: var(--ds-ink-800) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--ds-ink-700) !important;
  box-shadow: var(--ds-sh-xs) !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
body .nav-actions .btn-account-cta i,
body .main-header .btn-account-cta i,
body.ds-scrolled .nav-actions .btn-account-cta i { color: var(--ds-gold-400) !important; }

body .nav-actions .btn-account-cta:hover,
body.ds-scrolled .nav-actions .btn-account-cta:hover {
  background: var(--ds-ink-700) !important;
  border-color: var(--ds-ink-600) !important;
  color: #ffffff !important;
}

/* --- 20.3 Arama sayfası header: logo yanındaki şirket adı görünmüyordu --- */
body .search-header .logo,
body .search-header .logo span,
body .search-header .logo strong,
body .search-header .brand-name,
body .search-header a.logo {
  color: #ffffff !important;
}
body .search-header .logo span,
body .search-header .brand-name {
  font-family: var(--ds-font-display) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  display: inline-block !important;
  opacity: 1 !important;
}
body .search-header .logo img { background: #fff; border-radius: var(--ds-r-xs); padding: 3px; }

/* Rezervasyon / ödeme / başarı sayfalarındaki üst başlık da aynı olsun */
body .reservation-header .logo,
body .reservation-header .logo span,
body .payment-header .logo,
body .payment-header .logo span,
body .checkout-header .logo span { color: #ffffff !important; }

@media (max-width: 640px) {
  body .search-header .logo span,
  body .search-header .brand-name { font-size: 13px !important; }
  body .search-header .logo img { height: 30px !important; }
}

/* --- 20.4 Araç sınıfı şeridinde fiyatlar taşıyordu ---
   İsim ve fiyat üst üste biniyordu; dikey düzene alındı. --- */
body .class-chip {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 9px 16px 9px 10px !important;
  min-width: 0;
}
body .class-chip img {
  flex: 0 0 34px;
  width: 34px !important;
  height: 24px !important;
  object-fit: contain;
}
body .class-chip > span,
body .class-chip .class-chip-text {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}
body .class-chip span {
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
body .class-chip strong {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--ds-gold-700) !important;
  white-space: nowrap;
}
body .class-chip.active strong { color: var(--ds-gold-300) !important; }

@media (max-width: 640px) {
  body .class-chip { padding: 8px 12px 8px 8px !important; }
  body .class-chip img { flex: 0 0 28px; width: 28px !important; height: 20px !important; }
  body .class-chip span { font-size: 12px !important; }
  body .class-chip strong { font-size: 10.5px !important; }
}

/* --- 20.5 Filtre listesi çok uzunsa kendi içinde kayabilsin --- */
body .filter-group .filter-content.open {
  max-height: 320px;
  overflow-y: auto;
}
body .filter-group .filter-content.open::-webkit-scrollbar { width: 6px; }

/* ============================================================
   21. HAMBURGER BUTONU — HER ZEMİNDE GÖRÜNÜR
   Mobilde üst menü beyaz zeminli geliyor (rgba(255,255,255,.98)).
   Buton şeffaf + çubuklar beyaz olduğu için görünmüyordu.
   Artık dolu lacivert: hem beyaz hem koyu header'da okunur.
   ============================================================ */
body .mobile-menu-toggle,
body .main-header .mobile-menu-toggle,
body.ds-scrolled .mobile-menu-toggle,
body .main-header.scrolled .mobile-menu-toggle,
body .nav-actions .mobile-menu-toggle {
  background: var(--ds-ink-800) !important;
  background-color: var(--ds-ink-800) !important;
  background-image: none !important;
  border: 1px solid var(--ds-ink-700) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: var(--ds-sh-xs) !important;
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  opacity: 1 !important;
}

body .mobile-menu-toggle span,
body .main-header .mobile-menu-toggle span,
body.ds-scrolled .mobile-menu-toggle span,
body .main-header.scrolled .mobile-menu-toggle span,
body .nav-actions .mobile-menu-toggle span {
  background: #ffffff !important;
  background-color: #ffffff !important;
  height: 2px !important;
  width: 100% !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  display: block !important;
}

body .mobile-menu-toggle:hover,
body.ds-scrolled .mobile-menu-toggle:hover {
  background: var(--ds-ink-700) !important;
  border-color: var(--ds-ink-600) !important;
}

/* Açıkken çarpı hâline dönüşür */
body .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
body .mobile-menu-toggle.active span:nth-child(2) { opacity: 0 !important; }
body .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* Font Awesome ikonlu varyant kullanılıyorsa o da beyaz olsun */
body .mobile-menu-toggle i,
body .enterprise-menu-toggle i { color: #ffffff !important; }
body .enterprise-menu-toggle {
  background: var(--ds-ink-800) !important;
  border: 1px solid var(--ds-ink-700) !important;
  border-radius: var(--ds-r-sm) !important;
}
body .enterprise-menu-toggle span {
  background: #ffffff !important;
  height: 2px !important;
  border-radius: 2px !important;
}


/* ============================================================
   22. SON RÖTUŞLAR
   ============================================================ */

/* --- 22.1 Üst menü hizası (SADECE MASAÜSTÜ) ---
   Telefon, "Üye Ol / Giriş Yap" ve "Araç Ara" aynı yükseklikte,
   eşit boşlukla hizalanır.
   ÖNEMLİ: Bu blok mobilde çalışırsa .nav-actions çocuklarını
   görünür yapıp hamburger düzenini bozuyordu; bu yüzden
   901px ve üzeriyle sınırlandırıldı. --- */
@media (min-width: 1280px) {
body .main-nav {
  gap: var(--ds-5) !important;
}
body .nav-actions {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  flex: 0 0 auto;
}
body .nav-actions > *,
body .nav-phone,
body .nav-actions .btn,
body .nav-actions .btn-account-cta,
body .nav-actions .btn-nav {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-sm) !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
body .nav-phone { padding: 0 15px !important; }
body .nav-actions .btn-account-cta { padding: 0 17px !important; }
body .nav-actions .btn-nav,
body .nav-actions .btn-primary { padding: 0 19px !important; }

/* Menü ile sağ blok arası nefes payı */
body .nav-menu { gap: 2px !important; padding-inline: var(--ds-3) !important; }
body .nav-menu a { padding: 10px 13px !important; font-size: 14.5px !important; }

/* Ara genişliklerde sığdırma */

/* Ara genişliklerde sığdırma */
@media (max-width: 1360px) {
  body .nav-menu a { padding: 10px 9px !important; font-size: 13.5px !important; }
  body .nav-actions { gap: 8px !important; }
  body .nav-phone { padding: 0 12px !important; }
  body .nav-actions .btn-account-cta { padding: 0 13px !important; font-size: 13.5px !important; }
  body .nav-actions .btn-nav { padding: 0 15px !important; font-size: 13.5px !important; }
}
@media (max-width: 1180px) {
  body .nav-phone span,
  body .nav-actions .btn-account-cta span { display: none; }
  body .nav-phone,
  body .nav-actions .btn-account-cta { padding: 0 13px !important; }
}

} /* @media (min-width: 901px) — 22.1 sonu */

/* --- 22.2 Mobilde arama kutusunun altındaki "Hemen Araç Ara"
   kaldırıldı: kutunun kendi CTA'sı zaten var, çift buton
   kullanıcıyı tereddüde düşürüyordu. --- */
@media (max-width: 899px) {
  body .hero-actions .btn-primary,
  body .hero-actions a.btn-primary { display: none !important; }
  body .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    margin-top: 6px !important;
  }
  body .hero-actions .btn-outline { width: 100%; min-height: 50px !important; }
}

/* --- 22.3 Gerçekçi kart logoları ---
   Font Awesome glifleri yerine kart görselleri. --- */
body .payment-trust-rail i.fab,
body .cards i.fab,
body .payment-methods i.fab {
  display: inline-block !important;
  width: 46px !important;
  height: 31px !important;
  font-size: 0 !important;
  color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border-radius: 4px !important;
  vertical-align: middle;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(11, 27, 46, .18);
}
body .payment-trust-rail i.fa-cc-visa,
body .cards i.fa-cc-visa,
body .payment-methods i.fa-cc-visa { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2032%27%3E%3Crect%20width%3D%2748%27%20height%3D%2732%27%20rx%3D%274%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2747%27%20height%3D%2731%27%20rx%3D%273.5%27%20fill%3D%27none%27%20stroke%3D%27%23E1E7EF%27%2F%3E%3Cpath%20d%3D%27M19.9%2021.6h-2.6l1.6-9.2h2.6l-1.6%209.2z%27%20fill%3D%27%231A1F71%27%2F%3E%3Cpath%20d%3D%27M29.4%2012.6c-.5-.2-1.3-.4-2.3-.4-2.6%200-4.4%201.3-4.4%203.1%200%201.4%201.3%202.1%202.3%202.6%201%20.4%201.3.7%201.3%201.1%200%20.6-.8.9-1.5.9-1%200-1.5-.1-2.3-.5l-.3-.1-.3%202c.6.3%201.7.5%202.8.5%202.7%200%204.5-1.3%204.5-3.2%200-1.1-.7-1.9-2.2-2.6-.9-.4-1.5-.7-1.5-1.1%200-.4.5-.8%201.5-.8.9%200%201.5.2%202%20.4l.2.1.3-2z%27%20fill%3D%27%231A1F71%27%2F%3E%3Cpath%20d%3D%27M34.9%2012.4h-2c-.6%200-1.1.2-1.4.8l-3.9%208.4h2.7l.5-1.5h3.3l.3%201.5h2.4l-2-9.2zm-3.3%205.9l1-2.8.4%202.8h-1.4z%27%20fill%3D%27%231A1F71%27%2F%3E%3Cpath%20d%3D%27M15.9%2012.4l-2.5%206.3-.3-1.4-.9-4.3c-.1-.6-.6-.7-1.1-.7H6.9l-.1.2c.9.2%201.7.5%202.4.9l2.2%208.2h2.7l4.1-9.2h-2.3z%27%20fill%3D%27%231A1F71%27%2F%3E%3C%2Fsvg%3E") !important; }

body .payment-trust-rail i.fa-cc-mastercard,
body .cards i.fa-cc-mastercard,
body .payment-methods i.fa-cc-mastercard { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2032%27%3E%3Crect%20width%3D%2748%27%20height%3D%2732%27%20rx%3D%274%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20x%3D%27.5%27%20y%3D%27.5%27%20width%3D%2747%27%20height%3D%2731%27%20rx%3D%273.5%27%20fill%3D%27none%27%20stroke%3D%27%23E1E7EF%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2716%27%20r%3D%278.5%27%20fill%3D%27%23EB001B%27%2F%3E%3Ccircle%20cx%3D%2729%27%20cy%3D%2716%27%20r%3D%278.5%27%20fill%3D%27%23F79E1B%27%2F%3E%3Cpath%20d%3D%27M24%209.6a8.5%208.5%200%20000%2012.8%208.5%208.5%200%20000-12.8z%27%20fill%3D%27%23FF5F00%27%2F%3E%3C%2Fsvg%3E") !important; }

body .payment-trust-rail i.fa-cc-amex,
body .cards i.fa-cc-amex,
body .payment-methods i.fa-cc-amex { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2032%27%3E%3Crect%20width%3D%2748%27%20height%3D%2732%27%20rx%3D%274%27%20fill%3D%27%232E77BC%27%2F%3E%3Cpath%20d%3D%27M8.6%2012.8h3.1l.7%201.6.6-1.6h8v1.2l.6-1.2h3.3l.6%201.3.6-1.3h7.6v.7c.5-.5%201.1-.7%201.9-.7h3v1.3c.4-.9%201.2-1.3%202.3-1.3h2.1v6.4h-2.1c-.9%200-1.6-.3-2.1-1v1h-3.3c-.5%200-.9-.1-1.2-.3v.3h-5.6v-1.6c0-.2-.1-.2-.2-.2h-.2v1.8h-10.9v-.9l-.4.9H12l-.4-.9v.9H7.2l-.5-1.3H5.4l-.6%201.3H2l3.1-6.4h2.9l.6%201.3v-1.3z%27%20fill%3D%27%23FFFFFF%27%20opacity%3D%27.16%27%2F%3E%3Ctext%20x%3D%2724%27%20y%3D%2719.5%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-size%3D%278.5%27%20font-weight%3D%27700%27%20letter-spacing%3D%27.5%27%20fill%3D%27%23FFFFFF%27%20text-anchor%3D%27middle%27%3EAMEX%3C%2Ftext%3E%3C%2Fsvg%3E") !important; }

@media (max-width: 640px) {
  body .payment-trust-rail i.fab { width: 40px !important; height: 27px !important; }
}

/* --- 22.4 Destek telefonu rozeti (ds.js ile eklenir) --- */
body .trust-pill--phone {
  background: rgba(30, 155, 255, .14) !important;
  border-color: rgba(30, 155, 255, .38) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
body .trust-pill--phone:hover {
  background: rgba(30, 155, 255, .24) !important;
  border-color: var(--ds-gold-400) !important;
}
body .trust-pill--phone i { color: var(--ds-gold-400) !important; }

/* ============================================================
   23. SON TUR DÜZELTMELER
   ============================================================ */

/* --- 23.1 Hamburger düzeni garanti altına alınır ---
   Kırılım 1024px: alttaki enterprise-responsive.css bu noktada
   masaüstü menüyü gizliyor, düzenimiz onunla hizalandı. --- */
@media (max-width: 1279px) {
  body .main-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px !important;
  }
  body .nav-menu { display: none !important; }
  body .nav-actions .btn-nav,
  body .nav-actions .btn-account-cta,
  body .nav-actions .btn-primary,
  body .nav-actions .nav-phone span { display: none !important; }
  body .nav-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end;
  }
  body .mobile-menu-toggle {
    display: flex !important;
    flex: 0 0 46px;
  }
  body .main-nav .logo { min-width: 0; }
  body .main-nav .logo img { height: 34px !important; }
}

/* --- 23.2 Araç sınıfı şeridi: ad ve fiyat üst üste biniyordu ---
   Görsel iki satırı kaplar, ad üstte, fiyat altta. --- */
body .class-chip {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-areas: "img name" "img price" !important;
  align-items: center;
  column-gap: 10px !important;
  row-gap: 1px !important;
  padding: 9px 15px 9px 9px !important;
  min-height: 56px;
}
body .class-chip img {
  grid-area: img;
  align-self: center;
  width: 36px !important;
  height: 26px !important;
  object-fit: contain;
}
body .class-chip span {
  grid-area: name;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .class-chip strong {
  grid-area: price;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--ds-gold-700) !important;
  white-space: nowrap;
}
body .class-chip.active strong { color: var(--ds-gold-300) !important; }

@media (max-width: 640px) {
  body .class-chip {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding: 8px 12px 8px 8px !important;
    min-height: 52px;
  }
  body .class-chip img { width: 30px !important; height: 22px !important; }
  body .class-chip span { font-size: 12px !important; }
  body .class-chip strong { font-size: 10.5px !important; }
}

/* --- 23.3 Ek ürün satırları: uzun adlarda taşma --- */
body .extra-product-item { padding: 12px 14px !important; }
body .extra-product-label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px !important;
}
body .extra-product-info { min-width: 0; }
body .extra-product-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}
body .extra-product-type { font-size: 12px !important; color: var(--ds-text-3) !important; }
body .extra-product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--ds-font-display);
  font-weight: 800;
}

@media (max-width: 640px) {
  body .extra-product-label {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  body .extra-product-price {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed var(--ds-line);
  }
  body .pay-at-office-badge { margin-top: 0 !important; }
}

/* --- 23.4 Sürücü / fatura / ödeme bölümleri mobilde --- */
@media (max-width: 767px) {
  body .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body .reservation-panel,
  body .booking-card,
  body .summary-card,
  body .panel,
  body .card-scene { padding: var(--ds-4) !important; }

  body .section-head,
  body .form-section-title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  body .section-head h3,
  body .form-section-title h3 { font-size: 17px !important; }

  /* Ödeme yöntemi seçenekleri */
  body .payment-option,
  body .payment-method-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px !important;
    padding: 13px !important;
    min-height: 60px;
  }
  body .payment-option img,
  body .payment-option svg { max-width: 42px; height: auto; }

  /* Alt aksiyon butonları alt alta ve tam genişlik */
  body .form-actions,
  body .step-actions,
  body .reservation-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body .form-actions .btn,
  body .step-actions .btn,
  body .reservation-actions .btn {
    width: 100% !important;
    min-height: 52px !important;
  }
  /* Birincil buton üstte dursun */
  body .form-actions .btn-primary,
  body .step-actions .btn-primary { order: -1; }

  /* Fatura bilgileri onay satırı */
  body .checkline,
  body .invoice-same-check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    line-height: 1.45;
  }
}

/* --- 23.5 Ofis / sözleşme bilgi kutusu --- */
body .office-info,
body .rental-conditions {
  padding: var(--ds-4) !important;
  border-radius: var(--ds-r-md) !important;
  overflow-wrap: anywhere;
}
body .office-info a,
body .rental-conditions a { overflow-wrap: anywhere; }

/* ============================================================
   24. SON TUR — KAYDIRMA, ADIM ÇUBUĞU, MOBİL MENÜ
   ============================================================ */

/* --- 24.1 Araç sınıfı şeridi kaydırılamıyordu ---
   Kaynak CSS `repeat(6, minmax(126px, 1fr))` kullanıyordu; `1fr`
   sütunları daralttığı için taşma oluşmuyor, dolayısıyla yatay
   kaydırma da çalışmıyordu. Sabit genişlikli sütun akışına geçildi. --- */
body .class-carousel {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(168px, 168px) !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px !important;
  margin-bottom: var(--ds-4) !important;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
body .class-carousel .class-chip {
  scroll-snap-align: start;
  width: 100% !important;
  min-width: 0 !important;
}
/* İnce, marka renginde kaydırma çubuğu */
body .class-carousel::-webkit-scrollbar { height: 6px; }
body .class-carousel::-webkit-scrollbar-track { background: var(--ds-subtle); border-radius: 3px; }
body .class-carousel::-webkit-scrollbar-thumb { background: var(--ds-line-strong); border-radius: 3px; }
body .class-carousel::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); }

/* Sağda daha fazla içerik olduğunu belli eden yumuşak geçiş */
body .class-carousel-wrap { position: relative; }
body .class-carousel-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 10px;
  width: 42px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ds-canvas) 78%);
}

@media (max-width: 640px) {
  body .class-carousel { grid-auto-columns: minmax(150px, 150px) !important; gap: 8px !important; }
}

/* --- 24.2 Adım çubuğu "Araç SeçimiBilgiler3Rezervasyon Özeti"
   şeklinde bitişik görünüyordu.
   Sebep: reservation-review.php'de adımlar düz metin olarak
   yazılmış; flex düzeni metin aralarındaki boşlukları yok ediyordu.
   Çözüm: .stepbar için satır içi düzen + nokta işaretlerine boşluk. --- */
body .steps .stepbar,
body .wrap.stepbar {
  display: block !important;
  text-align: center;
  white-space: normal;
  line-height: 2.2;
  padding: 14px var(--ds-4) !important;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  word-spacing: .12em;
}
body .stepbar .dot {
  display: inline-grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 9px 0 20px;
  font-family: var(--ds-font-display);
  font-size: 13px;
  font-weight: 800;
  vertical-align: middle;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .28);
  color: #fff;
}
body .stepbar .dot:first-child { margin-left: 0; }
/* Tamamlanan adım */
body .stepbar .dot:has(.fa-check) {
  background: var(--ds-success) !important;
  border-color: var(--ds-success) !important;
}
/* Aktif (son) adım */
body .stepbar .dot:last-of-type {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ds-ink-900) !important;
}

body .steps {
  background: linear-gradient(120deg, var(--ds-ink-800), var(--ds-ink-900)) !important;
  border-radius: 0 !important;
}

@media (max-width: 640px) {
  body .steps .stepbar,
  body .wrap.stepbar {
    font-size: 13px;
    line-height: 2.1;
    padding: 12px var(--ds-3) !important;
  }
  body .stepbar .dot {
    width: 26px; height: 26px;
    margin: 0 7px 0 12px;
    font-size: 12px;
  }
}

/* Numaralı stepper (reservation.php) — bitişme olmasın */
body .reservation-steps .steps,
body section.steps .steps { gap: 4px !important; }
body .step { padding: 0 var(--ds-4) !important; }
body .step span { margin-left: 2px; }

@media (max-width: 640px) {
  body .step { padding: 0 10px !important; }
  body .step span { font-size: 12.5px !important; }
  body .step-line { min-width: 18px; max-width: 34px; }
}

/* --- 24.3 Mobil menü: daha yalın ve premium --- */
body .mobile-menu {
  padding: 84px 18px calc(26px + env(safe-area-inset-bottom)) !important;
  gap: 6px !important;
}
body .mobile-menu > a {
  position: relative;
  padding: 15px 16px !important;
  font-family: var(--ds-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: var(--ds-r-sm) !important;
  background: rgba(255, 255, 255, .035) !important;
  transition: background var(--ds-t-fast), border-color var(--ds-t-fast), transform var(--ds-t-fast);
}
/* Sağ tarafta ince yön oku */
body .mobile-menu > a:not(.btn)::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, .32);
  transition: transform var(--ds-t-fast), color var(--ds-t-fast);
}
body .mobile-menu > a:not(.btn):hover {
  background: rgba(255, 255, 255, .085) !important;
  border-color: rgba(30, 155, 255, .32) !important;
  transform: translateX(2px);
}
body .mobile-menu > a:not(.btn):hover::after { color: var(--ds-gold-400); transform: translateX(2px); }

/* Menü içindeki butonlar */
body .mobile-menu .btn { margin-top: 10px !important; border-radius: var(--ds-r-sm) !important; }
body .mobile-menu .btn-account-cta-mobile {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  justify-content: center;
  min-height: 50px !important;
}
body .mobile-menu .btn-account-cta-mobile i { color: var(--ds-gold-400) !important; }

/* Müşteri hizmetleri kartı */
body .mobile-menu-support {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px !important;
  text-align: left !important;
  min-height: 62px !important;
  padding: 12px 16px !important;
}
body .mobile-menu-support i {
  font-size: 18px !important;
  color: var(--ds-ink-900) !important;
}
body .mobile-menu-support .support-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body .mobile-menu-support .support-text strong {
  font-family: var(--ds-font-display);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ds-ink-900) !important;
  line-height: 1.2;
}
body .mobile-menu-support .support-text small {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(11, 27, 46, .72) !important;
  line-height: 1.2;
}

/* Kapatma butonu */
body .mobile-menu-close {
  top: 20px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--ds-r-sm) !important;
}

/* --- 24.4 Mobil ve masaüstü menü ASLA birlikte görünmesin ---
   Tek kırılım noktası: 1024px --- */
@media (min-width: 1280px) {
  body .mobile-menu,
  body .mobile-menu.active,
  body .ds-drawer-backdrop,
  body .mobile-menu-toggle { display: none !important; }
  body .nav-menu { display: flex !important; }
}
@media (max-width: 1279px) {
  body .nav-menu { display: none !important; }
  body .mobile-menu-toggle { display: flex !important; }
  body .nav-actions .btn-nav,
  body .nav-actions .btn-account-cta,
  body .nav-actions .nav-phone span { display: none !important; }
}

/* --- 24.5 Rezervasyon ve özet sayfaları --- */
body .reservation-review-page .wrap,
body .wrap { max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-6); }

body .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--ds-6);
  align-items: start;
}
body .layout > .panel,
body .layout > aside { min-width: 0; }

body .car-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--ds-5);
  align-items: center;
  padding: var(--ds-5) !important;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
}
body .car-head img { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
body .car-head h2 {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: -.03em;
  margin: 0 0 6px !important;
}
body .inline-vendor-logo {
  height: 30px; width: auto;
  vertical-align: middle;
  margin-right: 8px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xs);
  padding: 3px 6px;
}

@media (max-width: 1024px) {
  body .layout { grid-template-columns: minmax(0, 1fr); }
  body .layout > aside { order: -1; }
}

@media (max-width: 767px) {
  body .wrap { padding-inline: var(--ds-4); }
  body .car-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--ds-4);
    padding: var(--ds-4) !important;
  }
  body .car-head img { max-width: 260px; margin-inline: auto; }
  body .car-head h2 { font-size: 22px !important; }
  body .panel { padding: var(--ds-4) !important; }
  body .panel h1 { font-size: 24px !important; }

  /* Özet satırları */
  body .summary-rows .row,
  body aside .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }
  body .summary-rows .row > span:last-child,
  body aside .row > span:last-child { text-align: right; }

  /* Üst başlık: logo + ad + geri butonu */
  body .review-header,
  body .simple-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px var(--ds-4) !important;
  }
  body .review-header .logo span,
  body .simple-header .logo span { font-size: 13px !important; line-height: 1.25; }
  body .review-header .btn,
  body .simple-header .btn { min-height: 42px !important; padding: 0 13px !important; font-size: 13px !important; }
}

/* --- 24.6 Şerit kaydırma okları (ds.js ile eklenir) --- */
body .class-carousel-wrap { position: relative; }
body .carousel-arrow {
  position: absolute;
  top: calc(50% - 5px);
  transform: translateY(-50%);
  z-index: 4;
  width: 38px;
  height: 38px;
  display: none;
  place-items: center;
  font-size: 13px;
  color: var(--ds-ink-800) !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 50% !important;
  box-shadow: var(--ds-sh-md) !important;
  cursor: pointer;
  transition: background var(--ds-t-fast), border-color var(--ds-t-fast), opacity var(--ds-t-fast);
}
body .class-carousel-wrap.has-overflow .carousel-arrow { display: grid; }
body .carousel-arrow--prev { left: -6px; }
body .carousel-arrow--next { right: -6px; }
body .carousel-arrow:hover:not(:disabled) {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800) !important;
  color: var(--ds-gold-400) !important;
}
body .carousel-arrow:disabled { opacity: 0; pointer-events: none; }

/* Dokunmatik cihazlarda oklar gizli; parmakla kaydırma yeterli */
@media (hover: none), (max-width: 767px) {
  body .class-carousel-wrap.has-overflow .carousel-arrow { display: none; }
}

/* ============================================================
   25. MENÜ GÖRÜNÜRLÜĞÜ — KESİN KURAL
   Tek kırılım: 1280px. Bu blok dosyanın en sonunda yer alır ve
   yüksek özgüllükle yazılır; hiçbir ara genişlikte "menü hiç yok"
   durumu oluşamaz.
   ============================================================ */
@media (max-width: 1279px) {
  html body .main-header .mobile-menu-toggle,
  html body .main-nav .mobile-menu-toggle,
  html body .nav-actions .mobile-menu-toggle,
  html body .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
  }
  html body .main-header .nav-menu,
  html body .main-nav .nav-menu,
  html body .nav-menu { display: none !important; }
}
@media (min-width: 1280px) {
  html body .main-header .mobile-menu-toggle,
  html body .main-nav .mobile-menu-toggle,
  html body .nav-actions .mobile-menu-toggle,
  html body .mobile-menu-toggle { display: none !important; }
  html body .main-header .nav-menu,
  html body .main-nav .nav-menu,
  html body .nav-menu { display: flex !important; }
}

/* ============================================================
   26. HERO VİDEO DESTEĞİ
   Hero arka planı video. Önceki kaplama (overlay) çok koyuydu ve
   videoyu neredeyse görünmez kılıyordu. Artık metnin olduğu sol
   tarafta koyu, ortada şeffaf: video görünür, yazı okunur kalır.
   ============================================================ */

body .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ds-ink-900);
}

body .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  display: block;
  /* Videonun rengi marka paletiyle uyumlu dursun */
  filter: saturate(1.04) contrast(1.03);
}

/* Kaplama: solda koyu (yazı), ortada açık (video görünür),
   sağda hafif koyu (arama kutusu kontrastı) */
body .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg,
      rgba(7, 19, 34, .92) 0%,
      rgba(7, 19, 34, .74) 28%,
      rgba(7, 19, 34, .42) 52%,
      rgba(7, 19, 34, .34) 68%,
      rgba(7, 19, 34, .66) 100%),
    linear-gradient(0deg, rgba(7, 19, 34, .82) 0%, transparent 34%);
}

/* Tek sütuna düşen ekranlarda metin videonun üstünde durur,
   bu yüzden kaplama biraz daha yoğun olmalı */
@media (max-width: 1023px) {
  body .hero-bg::before {
    background:
      linear-gradient(180deg,
        rgba(7, 19, 34, .86) 0%,
        rgba(7, 19, 34, .74) 38%,
        rgba(7, 19, 34, .80) 100%);
  }
  body .hero-video { object-position: center center; }
}

/* Hareket azaltma tercihi: video duraklatılır, poster görünür */
@media (prefers-reduced-motion: reduce) {
  body .hero-video { display: none; }
  body .hero-bg {
    background-image: url('/assets/images/hero-poster.webp');
    background-size: cover;
    background-position: center;
  }
}

/* Eski slider hâlâ varsa (başka sayfalarda) bozulmasın */
body .hero-slide { z-index: 1; }
/* ============================================================
   27. TEDARİKÇİ PUANI (API veri döndürürse görünür)
   ============================================================ */
/* Puan rozeti araç kartındaki tedarikçi satırında yer alır.
   Sitenin mevcut .vendor-rating kuralı mutlak konumluydu; kart
   düzenimizde satır içi durması gerekiyor. */
body .car-vendor .vendor-rating {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ds-text-2) !important;
  white-space: nowrap;
  line-height: 1.4;
}
body .car-vendor .vendor-rating strong {
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff !important;
  background: var(--ds-ink-800) !important;
  border-radius: var(--ds-r-xs);
}
body .car-vendor .vendor-rating .stars { color: var(--ds-gold-500) !important; letter-spacing: .5px; font-size: 11px; }
body .car-vendor .vendor-rating small { font-weight: 600; color: var(--ds-text-3) !important; font-size: 10.5px; }

@media (max-width: 640px) {
  body .car-vendor .vendor-rating { margin-left: 6px; font-size: 10.5px; }
  body .car-vendor .vendor-rating .stars,
  body .car-vendor .vendor-rating small { display: none; }
}

/* ============================================================
   28. MOBİL MENÜ — ÖZGÜLLÜK GÜVENCESİ
   enterprise-responsive.css içinde şu kural var:
       body > .mobile-menu { background: #fff !important; }
   Özgüllüğü (0,1,1). Aşağıdaki seçiciler kasıtlı olarak daha
   yüksek özgüllükte yazıldı; hiçbir koşulda beyaz kalmaz.
   ============================================================ */
html body > .mobile-menu,
html body > div.mobile-menu,
html body > #mobileMenu,
html body div.mobile-menu#mobileMenu {
  background: linear-gradient(165deg, #0A1A2C 0%, #071322 100%) !important;
  background-color: #0A1A2C !important;
  background-image: linear-gradient(165deg, #0A1A2C 0%, #071322 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

/* Bağlantılar: beyaz zeminde beyaz metin riskini tamamen kaldır */
html body > .mobile-menu a,
html body > #mobileMenu a,
html body div.mobile-menu#mobileMenu a {
  color: rgba(255, 255, 255, .92) !important;
  border-bottom-color: rgba(255, 255, 255, .09) !important;
  background-color: rgba(255, 255, 255, .035) !important;
}
html body > .mobile-menu a i,
html body > #mobileMenu a i { color: var(--ds-gold-400) !important; }

/* Altın CTA'da koyu metin kalsın */
html body > .mobile-menu a.btn-primary,
html body > #mobileMenu a.btn-primary,
html body > .mobile-menu .mobile-menu-support,
html body > #mobileMenu .mobile-menu-support {
  color: var(--ds-ink-900) !important;
  background-image: linear-gradient(180deg, var(--ds-gold-400) 0%, var(--ds-gold-500) 62%, var(--ds-gold-600) 100%) !important;
}
html body > .mobile-menu .mobile-menu-support i,
html body > #mobileMenu .mobile-menu-support i,
html body > .mobile-menu .mobile-menu-support strong,
html body > #mobileMenu .mobile-menu-support strong { color: var(--ds-ink-900) !important; }
html body > .mobile-menu .mobile-menu-support small,
html body > #mobileMenu .mobile-menu-support small { color: rgba(11, 27, 46, .72) !important; }

/* Üye Ol / Giriş Yap butonu */
html body > .mobile-menu a.btn-account-cta-mobile,
html body > #mobileMenu a.btn-account-cta-mobile {
  background-color: rgba(255, 255, 255, .07) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}
html body > .mobile-menu a.btn-account-cta-mobile i,
html body > #mobileMenu a.btn-account-cta-mobile i { color: var(--ds-gold-400) !important; }

/* Kapatma düğmesi */
html body > .mobile-menu .mobile-menu-close,
html body > #mobileMenu .mobile-menu-close {
  background-color: rgba(255, 255, 255, .1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

/* Hamburger düğmesi — beyaz header üzerinde de görünür kalsın */
html body .main-header .mobile-menu-toggle,
html body .main-nav .mobile-menu-toggle,
html body .nav-actions .mobile-menu-toggle {
  background-color: var(--ds-ink-800) !important;
  background-image: none !important;
  border: 1px solid var(--ds-ink-700) !important;
}
html body .main-header .mobile-menu-toggle span,
html body .main-nav .mobile-menu-toggle span,
html body .nav-actions .mobile-menu-toggle span {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ============================================================
   29. HERO SADELEŞTİRME + MOBİLDE VİDEO GÖRÜNÜRLÜĞÜ
   ============================================================ */

/* --- 29.1 Mobilde video görünmüyordu ---
   Kaplama opaklığı .74–.86 idi; video neredeyse tamamen kapanıyordu.
   Yeni yaklaşım: metnin olduğu ÜST bölge koyu, ortada video nefes
   alıyor, arama kutusunun arkası tekrar koyulaşıyor. Metin
   okunabilirliği gölge ile destekleniyor. --- */
@media (max-width: 1023px) {
  body .hero-bg::before {
    background:
      linear-gradient(180deg,
        rgba(7, 19, 34, .74) 0%,
        rgba(7, 19, 34, .52) 26%,
        rgba(7, 19, 34, .30) 46%,
        rgba(7, 19, 34, .62) 72%,
        rgba(7, 19, 34, .88) 100%) !important;
  }

  /* Video hareketi görünsün diye hafif canlandırma */
  body .hero-video {
    filter: saturate(1.1) contrast(1.06) brightness(1.04);
    object-position: center 40%;
  }

  /* Kaplama açıldığı için metne gölge desteği */
  body .hero-title,
  body .hero-desc,
  body .search-trust-line span,
  body .hero-badge {
    text-shadow: 0 2px 14px rgba(4, 12, 22, .75), 0 1px 3px rgba(4, 12, 22, .6);
  }
  body .hero-title span { text-shadow: 0 2px 16px rgba(4, 12, 22, .8); }
}

/* iOS'ta video kesinlikle görünür kalsın */
body .hero-video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hareket azaltma tercihinde poster'a düş (video gizlenmez, durdurulur) */
@media (prefers-reduced-motion: reduce) {
  body .hero-video { animation: none !important; }
}

/* --- 29.2 Kampanya kutuları: eşit boy, hizalı --- */
body .campaign-slider {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
  align-items: stretch;
}
body .campaign-card {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100% !important;
  max-width: none !important;
  min-height: 52px;
  padding: 11px 14px !important;
  margin: 0 !important;
}
body .campaign-card strong {
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

@media (max-width: 900px) {
  body .campaign-slider { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Tek kalan kart tam genişlik olsun, boşluk kalmasın */
  body .campaign-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  body .campaign-slider { grid-template-columns: 1fr !important; gap: 8px !important; }
  body .campaign-card:nth-child(odd):last-child { grid-column: auto; }
  body .campaign-card { min-height: 48px; }
}

/* Güven rozetleri de aynı hizada */
body .trust-rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
}
body .trust-pill {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  width: 100%;
  line-height: 1.3;
}
body .trust-pill:nth-child(odd):last-child { grid-column: 1 / -1; }
@media (max-width: 400px) {
  body .trust-rail { grid-template-columns: 1fr !important; }
  body .trust-pill:nth-child(odd):last-child { grid-column: auto; }
}

/* İstatistik şeridi: üç eşit sütun */
body .hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center;
}
body .hero-stats .stat-item {
  text-align: center !important;
  padding: 0 10px !important;
}
body .hero-stats .stat-item + .stat-item {
  border-left: 1px solid rgba(255, 255, 255, .13) !important;
}

/* --- 29.3 Üst menü: nefes payı --- */
@media (min-width: 1280px) {
  body .main-nav { gap: var(--ds-7) !important; }
  body .nav-menu { gap: 6px !important; }
  body .nav-menu a {
    padding: 10px 16px !important;
    font-size: 15px !important;
    letter-spacing: -.005em;
  }
  body .nav-actions { gap: 12px !important; }
}
@media (min-width: 1280px) and (max-width: 1520px) {
  body .nav-menu a { padding: 10px 11px !important; font-size: 14px !important; }
  body .main-nav { gap: var(--ds-5) !important; }
}

/* --- 29.4 Arama kutusu: daha sakin, daha okunur --- */
body .search-box-header h2 { font-size: 20px !important; }
body .search-box .form-group > label {
  font-size: 11px !important;
  letter-spacing: .09em !important;
  color: rgba(255, 255, 255, .58) !important;
}
body .search-box input[type="text"],
body .search-box select,
body .search-box .datetime-picker {
  border-radius: var(--ds-r-sm) !important;
}
/* Alan aralıkları biraz açıldı: sıkışık görünmesin */
body .search-box .form-group { margin-bottom: 14px !important; }
body .search-box .form-row { gap: 12px !important; }

@media (max-width: 640px) {
  body .search-box .form-group { margin-bottom: 11px !important; }
}

/* ============================================================
   30. TAKVİM — SADE VE KOLAY
   Amaç: müşteri düşünmeden tarih seçebilsin.
   Büyük dokunma alanları, net seçili/aralık göstergesi,
   sade tipografi.
   ============================================================ */

body .flatpickr-calendar {
  padding: 16px !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: 0 30px 70px -26px rgba(11, 27, 46, .55), 0 0 0 1px var(--ds-line) !important;
  border: 0 !important;
}

/* Ay başlığı: sade, ortalı */
body .flatpickr-months { padding-bottom: 12px !important; margin-bottom: 8px !important; }
body .flatpickr-current-month,
body .flatpickr-current-month .cur-month,
body .flatpickr-current-month input.cur-year {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ds-ink-900) !important;
}

/* Gezinme okları: büyük ve belirgin */
body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--ds-line) !important;
  background: #fff !important;
}

/* Gün adları */
body span.flatpickr-weekday {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--ds-text-3) !important;
}

/* Günler: daha büyük dokunma alanı */
body .flatpickr-day {
  height: 42px !important;
  line-height: 42px !important;
  max-width: 42px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
body .flatpickr-day:hover:not(.flatpickr-disabled) {
  background: var(--ds-subtle) !important;
  transform: none !important;
}

/* Bugün */
body .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  box-shadow: inset 0 0 0 2px var(--ds-gold-400) !important;
  color: var(--ds-gold-700) !important;
  font-weight: 800 !important;
}

/* Seçili gün ve aralık: net ve anlaşılır */
body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange {
  background: var(--ds-ink-800) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px -8px rgba(11, 27, 46, .7) !important;
}
body .flatpickr-day.inRange {
  background: var(--ds-gold-50) !important;
  color: var(--ds-ink-800) !important;
  box-shadow: -6px 0 0 var(--ds-gold-50), 6px 0 0 var(--ds-gold-50) !important;
}

/* Geçmiş / kapalı günler açıkça pasif */
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay {
  color: #C3CEDC !important;
  opacity: 1 !important;
}

/* Saat seçici: sade ve büyük */
body .flatpickr-time {
  height: 52px !important;
  line-height: 52px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--ds-line-soft) !important;
}
body .flatpickr-time input {
  font-size: 17px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}
body .flatpickr-time input:hover,
body .flatpickr-time input:focus { background: var(--ds-subtle) !important; }
body .flatpickr-time .flatpickr-time-separator { font-size: 17px !important; }

/* Çift ay ayırıcısı */
body .flatpickr-calendar.multiMonth .dayContainer + .dayContainer {
  padding-left: 16px !important;
  margin-left: 16px !important;
  box-shadow: -1px 0 0 var(--ds-line-soft) !important;
}

/* Mobil: tek ay, tam genişlik, parmakla kolay */
@media (max-width: 640px) {
  body .flatpickr-calendar {
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    padding: 14px !important;
  }
  body .flatpickr-day {
    height: 44px !important;
    line-height: 44px !important;
    max-width: 44px !important;
    font-size: 15px !important;
  }
  body .flatpickr-current-month,
  body .flatpickr-current-month .cur-month,
  body .flatpickr-current-month input.cur-year { font-size: 15px !important; }
  body .flatpickr-time { height: 56px !important; line-height: 56px !important; }
  body .flatpickr-time input { font-size: 18px !important; }
}

/* ============================================================================
   METROPOL FLEET RENTALS — NEON ENTERPRISE KATMANI
   ============================================================================
   Bu blok dosyanın EN SONUNDA durur ve tasarımı düz mavi bir renk
   değişiminden, kurumsal araç kiralama markalarının (Sixt, Hertz,
   Europcar) kalite düzeyine taşır.

   Yaklaşım:
     - Tek bir renk yerine KATMANLI derinlik: koyu zemin + ışık
       bloomları + cam (glassmorphism) yüzeyler
     - Parıltı, düz "glow" gölgesi değil; gradyan metin + drop-shadow
       + iç highlight kombinasyonu
     - Tüm ölçüler tek bir tipografi ve boşluk ritmine bağlı
     - Mobil ve masaüstü aynı sistemden türetilir

   API, form alanları ve JavaScript ile hiçbir ilişkisi yoktur.
   ============================================================================ */

:root {
  /* ---- Zemin katmanları ---- */
  --mfr-void:    #050C18;
  --mfr-deep:    #08172B;
  --mfr-surface: #0D2138;
  --mfr-elev:    #14293F;

  /* ---- Neon ölçek ---- */
  --mfr-neon:    #38A9FF;
  --mfr-neon-lt: #7CCBFF;
  --mfr-neon-dp: #0A6FCB;
  --mfr-cyan:    #5FE3FF;

  /* ---- Parıltı ---- */
  --mfr-glow-s: 0 0 0 1px rgba(56,169,255,.22);
  --mfr-glow-m: 0 8px 26px -10px rgba(56,169,255,.75);
  --mfr-glow-l: 0 0 42px -8px rgba(56,169,255,.55);

  /* ---- Cam yüzey ---- */
  --mfr-glass:  rgba(255,255,255,.055);
  --mfr-glass-2: rgba(255,255,255,.10);
  --mfr-glass-line: rgba(140,205,255,.22);
}

/* ============================================================
   1. HERO — katmanlı derinlik
   ============================================================ */

/* Videonun üzerine iki ışık bloomu + dipte koyulaşma.
   Tek renk yerine derinlik hissi veren asıl unsur budur. */
body .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(56,169,255,.30) 0%, rgba(56,169,255,0) 55%),
    radial-gradient(90% 70% at 10% 95%,  rgba(95,227,255,.18) 0%, rgba(95,227,255,0) 60%),
    linear-gradient(180deg, rgba(5,12,24,.55) 0%, rgba(5,12,24,.72) 45%, rgba(5,12,24,.92) 100%);
}
body .hero-content, body .hero-grid { position: relative; z-index: 2; }

/* ---- Başlık: gradyan metin + gerçek ışıma ---- */
body .hero-title span:not(.hero-title-brand) {
  color: #7CCBFF;                                   /* yedek */
  background: linear-gradient(180deg, #F2F9FF 0%, #9BD8FF 46%, #38A9FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(56,169,255,.42))
          drop-shadow(0 2px 10px rgba(5,12,24,.75));
  text-shadow: none !important;
}
body .hero-title-brand {
  color: rgba(198,226,255,.70) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(5,12,24,.7) !important;
}

/* ---- Değer önermesi: cam hap ---- */
body .hero-valueprops li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--mfr-glass);
  border: 1px solid var(--mfr-glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #DCEEFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
body .hero-valueprops li::before { display: none !important; }
body .hero-valueprops li i { color: var(--mfr-cyan) !important; }

/* ---- Hero rozeti ---- */
body .hero-badge {
  background: linear-gradient(180deg, rgba(56,169,255,.20), rgba(56,169,255,.08)) !important;
  border: 1px solid rgba(124,203,255,.42) !important;
  color: #A9DBFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 26px -12px rgba(56,169,255,.9) !important;
}
body .hero-badge i { color: var(--mfr-cyan) !important; }

/* ---- İstatistikler ---- */
body .stat-number {
  background: linear-gradient(180deg, #EAF6FF, #58BBFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(56,169,255,.45));
  text-shadow: none !important;
}
body .stat-label { color: rgba(198,226,255,.62) !important; }

/* ============================================================
   2. ARAMA KUTUSU — cam yüzey
   ============================================================ */

body .search-box {
  position: relative;
  background:
    linear-gradient(165deg, rgba(20,41,63,.82) 0%, rgba(8,23,43,.90) 100%) !important;
  border: 1px solid rgba(124,203,255,.20) !important;
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 30px 70px -30px rgba(3,10,22,.95),
    0 0 60px -30px rgba(56,169,255,.5) !important;
}
/* Üst kenarda ince neon ışık hattı */
body .search-box::before {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mfr-cyan), transparent);
  opacity: .75;
}

body .search-box-header h2 { color: #EAF6FF !important; }
body .search-box-header h2 i { color: var(--mfr-cyan) !important; }

body .search-box .form-group > label {
  color: rgba(198,226,255,.62) !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
}
body .search-box .form-group > label i { color: var(--mfr-neon) !important; }

body .search-box input[type="text"],
body .search-box select,
body .search-box .date-picker,
body .search-box .time-select {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(140,205,255,.20) !important;
  color: #F2F9FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body .search-box input::placeholder { color: rgba(198,226,255,.42) !important; }
body .search-box input[type="text"]:hover,
body .search-box select:hover {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(140,205,255,.36) !important;
}
body .search-box input[type="text"]:focus,
body .search-box select:focus,
body .search-box .date-picker:focus,
body .search-box .time-select:focus {
  background: rgba(255,255,255,.13) !important;
  border-color: var(--mfr-neon) !important;
  box-shadow: 0 0 0 3px rgba(56,169,255,.26), 0 0 22px -6px rgba(56,169,255,.7) !important;
}

/* ============================================================
   3. BUTONLAR — iç highlight + dış ışıma
   ============================================================ */

body .btn-primary,
body .btn-search,
body .nav-actions .btn-nav,
body .mobile-sticky-cta .btn,
body .hero-actions .btn-primary {
  background: linear-gradient(180deg, #4FB6FF 0%, #2E93EA 52%, #0A6FCB 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  text-shadow: 0 1px 2px rgba(3,25,55,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(3,25,55,.30),
    var(--mfr-glow-s),
    var(--mfr-glow-m) !important;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, filter .18s ease;
}
body .btn-primary:hover,
body .btn-search:hover,
body .nav-actions .btn-nav:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 1px rgba(56,169,255,.35),
    0 14px 34px -12px rgba(56,169,255,.95),
    var(--mfr-glow-l) !important;
}
body .btn-primary:active, body .btn-search:active { transform: translateY(0); }

body .btn-outline {
  background: var(--mfr-glass) !important;
  border: 1px solid var(--mfr-glass-line) !important;
  color: #DCEEFF !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body .btn-outline:hover {
  background: var(--mfr-glass-2) !important;
  border-color: rgba(140,205,255,.45) !important;
}

/* ============================================================
   4. ÜST MENÜ — sıkışma ve okunabilirlik düzeltmesi
   ============================================================ */

/* "Üye Olun" / "Üye Ol" ikili etiketi: dar ekranda kısası görünür */
body .nav-cta-short { display: none !important; }
body .nav-cta-full  { display: inline !important; }

body .main-nav {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center;
  gap: 24px !important;
}
body .main-header .nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  min-width: 0;
  margin: 0; padding: 0; list-style: none;
}
body .main-header .nav-menu li { flex: 0 0 auto !important; }
body .main-header .nav-menu a {
  position: relative;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  height: 40px;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em;
  white-space: nowrap !important;
  border-radius: 10px !important;
  color: rgba(232,244,255,.88) !important;
}
body .main-header .nav-menu a::after {
  content: ''; position: absolute;
  left: 14px; right: 14px; bottom: 6px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mfr-cyan), var(--mfr-neon));
  box-shadow: 0 0 10px rgba(56,169,255,.9);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
body .main-header .nav-menu a:hover::after,
body .main-header .nav-menu a.active::after { transform: scaleX(1); }
body .main-header .nav-menu a:hover,
body .main-header .nav-menu a.active { color: #FFFFFF !important; }

body.ds-scrolled .main-header .nav-menu a,
body .main-header.scrolled .nav-menu a { color: #3B4A66 !important; text-shadow: none !important; }
body.ds-scrolled .main-header .nav-menu a.active,
body .main-header.scrolled .nav-menu a.active { color: #0B1D33 !important; }

/* Telefon masaüstünde menüden kaldırıldı — üst şeritte zaten var.
   Bu, menüye ~200px yer açar ve öğelerin üst üste binmesini önler. */
@media (min-width: 901px) {
  body .main-header .nav-phone { display: none !important; }
}

@media (max-width: 1280px) {
  body .main-nav { gap: 18px !important; }
  body .main-header .nav-menu a { padding: 0 11px !important; font-size: 14.2px !important; }
  body .main-header .nav-menu a::after { left: 11px; right: 11px; }
}
@media (max-width: 1150px) {
  body .nav-cta-full  { display: none !important; }
  body .nav-cta-short { display: inline !important; }
}
@media (max-width: 1024px) {
  body .main-header .nav-menu { display: none !important; }
  body .mobile-menu-toggle { display: flex !important; }
}
@media (max-width: 900px) {
  body .main-header .nav-phone { display: inline-flex !important; }
  body .main-header .nav-phone span { display: none !important; }
  body .main-header .btn-account-cta { display: none !important; }
}

/* ============================================================
   5. AÇIK ZEMİNLİ BÖLÜMLER — tutarlı vurgu
   ============================================================ */

body .section-badge {
  background: linear-gradient(180deg, #EAF4FF, #DCEEFF) !important;
  color: #0A4F94 !important;
  border: 1px solid rgba(56,169,255,.28) !important;
  box-shadow: 0 2px 10px -6px rgba(56,169,255,.7);
}
body .section-title span {
  background: linear-gradient(180deg, #2E93EA, #0A5FB5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

body .feature-icon,
body .campaign-icon,
body .quick-service-card > span {
  background: linear-gradient(150deg, #4FB6FF 0%, #0A5FB5 100%) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -12px rgba(56,169,255,.95) !important;
}

body .feature-card,
body .campaign-benefit-card,
body .quick-service-card {
  border: 1px solid #E3EBF5 !important;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
body .feature-card:hover,
body .campaign-benefit-card:hover,
body .quick-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56,169,255,.45) !important;
  box-shadow: 0 20px 44px -26px rgba(10,60,120,.55) !important;
}

/* ============================================================
   6. ARAMA SONUÇLARI — filtreler ve araç kartları
   ============================================================ */

body .filters-sidebar {
  border: 1px solid #E3EBF5 !important;
  box-shadow: 0 18px 44px -32px rgba(10,40,80,.5) !important;
}
body .filters-header {
  border-bottom: 1px solid #EDF2F8 !important;
}
body .filters-header > span:first-child,
body .filters-header i.fa-filter {
  color: var(--mfr-neon-dp) !important;
}
body .filter-group + .filter-group { border-top: 1px solid #EDF2F8; }
body .filter-toggle {
  font-weight: 700 !important;
  color: #0B1D33 !important;
  min-height: 48px;
}
body .filter-toggle:hover { color: var(--mfr-neon-dp) !important; }
body .filter-toggle i { color: #8FA3BD !important; transition: transform .2s ease; }

body .filter-option label,
body .filter-option { font-size: 14px !important; }
body .filter-option input[type="checkbox"],
body .filter-option input[type="radio"] {
  accent-color: var(--mfr-neon);
  width: 18px; height: 18px;
}
body .filter-tag {
  background: #EAF4FF !important;
  border: 1px solid rgba(56,169,255,.32) !important;
  color: #0A4F94 !important;
  font-weight: 600;
}

body .car-card {
  border: 1px solid #E3EBF5 !important;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
body .car-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56,169,255,.5) !important;
  box-shadow: 0 22px 50px -30px rgba(10,50,100,.6) !important;
}

/* Mobil filtre çekmecesi */
@media (max-width: 991px) {
  body .mobile-filter-trigger {
    background: linear-gradient(180deg, #4FB6FF, #0A6FCB) !important;
    color: #fff !important;
    border: 0 !important;
    min-height: 46px;
    box-shadow: var(--mfr-glow-m) !important;
  }
  body .filters-sidebar { border-radius: 18px 18px 0 0 !important; }
  body .filter-toggle { min-height: 52px; }
  body .filter-option { min-height: 44px; display: flex; align-items: center; }
}

/* ============================================================
   7. MOBİL ÖLÇEK — tek ritim
   ============================================================ */

@media (max-width: 899px) {
  body .hero-title { font-size: clamp(24px, 6.4vw, 34px) !important; line-height: 1.16 !important; }
  body .hero-title-brand { font-size: clamp(13px, 3.4vw, 16px) !important; }
  body .hero-valueprops { gap: 6px !important; }
  body .hero-valueprops li { font-size: 12.4px !important; padding: 6px 11px; }

  body .section-title { font-size: clamp(20px, 5.4vw, 27px) !important; line-height: 1.24 !important; }
  body .section-desc  { font-size: clamp(13.5px, 3.6vw, 15px) !important; line-height: 1.6 !important; }
  body .section-badge { font-size: 11px !important; padding: 5px 12px !important; }

  body .feature-card, body .campaign-benefit-card, body .quick-service-card { padding: 16px !important; }
  body .feature-icon, body .campaign-icon, body .quick-service-card > span {
    width: 42px !important; height: 42px !important; font-size: 17px !important; border-radius: 12px !important;
  }
  body .stat-number { font-size: 24px !important; }
  body .stat-label  { font-size: 11.5px !important; }

  /* Dokunma hedefleri */
  body .btn, body .btn-primary, body .btn-outline { min-height: 46px; }
}

/* Hareket azaltma tercihinde ışıma sadeleşir */
@media (prefers-reduced-motion: reduce) {
  body .hero-title span:not(.hero-title-brand) { filter: none; }
  body .btn-primary, body .btn-search { transition: none; }
  body .feature-card:hover, body .car-card:hover { transform: none; }
}

/* ============================================================================
   NEON ENTERPRISE — 2. AŞAMA
   ============================================================================ */

/* ============================================================
   A. HERO DEĞER ÖNERMESİ — cam haplar
   ============================================================ */

body .hero-valueprops {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none;
}
body .hero-valueprops li {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(140,205,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #DCEEFF !important;
  white-space: nowrap;
}
body .hero-valueprops li::before { display: none !important; }
body .hero-valueprops li i { font-size: 12px; color: #5FE3FF !important; }

/* Taksit maddesi vurgulanır — birincil satış argümanı */
body .hero-valueprops li.is-primary {
  background: linear-gradient(180deg, rgba(56,169,255,.24), rgba(56,169,255,.10));
  border-color: rgba(124,203,255,.52);
  color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px -8px rgba(56,169,255,.95);
}
body .hero-valueprops li.is-primary i { color: #9BE4FF !important; }

@media (max-width: 899px) {
  body .hero-valueprops { gap: 7px !important; margin-bottom: 14px !important; }
  body .hero-valueprops li { padding: 7px 12px !important; font-size: 12.6px !important; }
}
@media (max-width: 380px) {
  body .hero-valueprops li { padding: 6px 10px !important; font-size: 11.8px !important; gap: 6px; }
}

/* ============================================================
   B. MOBİL AÇILIR MENÜ — cam çekmece
   ============================================================ */

body .mobile-menu {
  background: linear-gradient(170deg, rgba(10,26,46,.97) 0%, rgba(5,12,24,.99) 100%) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-left: 1px solid rgba(124,203,255,.18) !important;
  box-shadow: -30px 0 70px -30px rgba(0,0,0,.85) !important;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom)) !important;
}

body .mobile-menu a,
body .mobile-menu .mobile-menu-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px !important;
  margin-bottom: 9px;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(140,205,255,.14) !important;
  color: #E8F4FF !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
body .mobile-menu a:hover,
body .mobile-menu a:active {
  background: rgba(56,169,255,.16) !important;
  border-color: rgba(124,203,255,.42) !important;
  transform: translateX(2px);
}
body .mobile-menu a i.fa-chevron-right,
body .mobile-menu a::after { color: rgba(140,205,255,.55); }

/* Kapat düğmesi */
body .mobile-menu-close,
body .mobile-menu .close-btn {
  width: 46px !important; height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(140,205,255,.22) !important;
  color: #E8F4FF !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
body .mobile-menu-close:hover { background: rgba(56,169,255,.2) !important; }

/* Menü içindeki birincil aksiyonlar */
body .mobile-menu .btn-primary,
body .mobile-menu .mobile-menu-cta {
  justify-content: center !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #4FB6FF 0%, #2E93EA 52%, #0A6FCB 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 10px 26px -10px rgba(56,169,255,.85) !important;
}

body .mobile-menu-backdrop,
body .mobile-menu-overlay {
  background: rgba(3,10,20,.62) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
   C. TEDARİKÇİ LOGOLARI — ortada büyüteç etkisi
   ============================================================ */

body .brands-marquee,
body .suppliers-track,
body .vendor-marquee {
  /* Kenarlarda yumuşak solma: şerit sonsuz akıyormuş hissi verir */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Ortadaki logo büyür ve netleşir; kenardakiler küçük ve soluk kalır.
   Kaydırma kutusu üzerinde CSS scroll-driven olmadığı için etki,
   sabit bir merkez maskesiyle taklit edilir. */
body .brand-logo-strip { position: relative; }
body .brand-logo-strip::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 190px; height: 118px;
  transform: translate(-50%,-50%);
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(56,169,255,.16), rgba(56,169,255,0) 75%);
  box-shadow: 0 0 0 1px rgba(56,169,255,.16) inset;
}
body .brand-logo-strip .brand-logo-item {
  transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .35s ease, opacity .35s ease;
  filter: grayscale(1) contrast(.9);
  opacity: .55;
}
body .brand-logo-strip .brand-logo-item.is-center {
  transform: scale(1.28);
  filter: none;
  opacity: 1;
  z-index: 2;
}
body .brand-logo-strip .brand-logo-item.is-near {
  transform: scale(1.08);
  filter: grayscale(.4);
  opacity: .8;
}

/* ============================================================
   E. SONUÇ YOK EKRANI
   ============================================================ */

body .empty-state {
  max-width: 620px;
  margin: 26px auto;
  padding: 34px 28px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E3EBF5;
  border-radius: 20px;
  box-shadow: 0 24px 58px -34px rgba(10,40,80,.5);
}
body .empty-state-icon {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
  background: linear-gradient(150deg, #4FB6FF, #0A5FB5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -16px rgba(56,169,255,.95);
}
body .empty-state h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 4.6vw, 24px);
  color: #0B1D33;
  letter-spacing: -.02em;
}
body .empty-state p { margin: 0 0 18px; color: #4A5876; font-size: 15px; line-height: 1.65; }
body .empty-state-tips {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  text-align: left;
}
body .empty-state-tips li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F5F9FF;
  border: 1px solid #E3EBF5;
  font-size: 14.2px;
  color: #33405A;
}
body .empty-state-tips i { color: #0A6FCB; width: 18px; text-align: center; }
body .empty-state-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
body .empty-state-actions .btn { min-height: 48px; padding: 0 20px; }
body .empty-state-actions .btn-outline {
  background: #FFFFFF !important;
  border: 1px solid #CFDCEB !important;
  color: #0B1D33 !important;
  backdrop-filter: none;
}
@media (max-width: 560px) {
  body .empty-state { padding: 26px 18px; margin: 18px auto; border-radius: 16px; }
  body .empty-state-actions { flex-direction: column; }
  body .empty-state-actions .btn { width: 100%; }
}

/* ============================================================
   F. TEDARİKÇİ ŞERİDİ — ortada büyüteç etkisi
   ------------------------------------------------------------
   Logolar sola akarken şeridin TAM ORTASINDAN geçen logo
   büyür, renklenir ve neon bir halka içine alınır. Kenardakiler
   küçük ve gri kalır. Böylece şerit "dönen bir vitrin" hissi
   verir. Merkez tespiti JavaScript ile yapılır (index.php).
   ============================================================ */

body .partner-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* Ortadaki büyüteç alanı */
body .partner-marquee::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 168px; height: 104px;
  transform: translate(-50%,-50%);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(closest-side, rgba(56,169,255,.14), rgba(56,169,255,0) 78%);
  box-shadow: inset 0 0 0 1px rgba(56,169,255,.22);
}

body .partner-track { position: relative; z-index: 2; align-items: center; }

body .partner-logo-card {
  transition: transform .38s cubic-bezier(.2,.8,.3,1),
              filter .38s ease, opacity .38s ease, box-shadow .38s ease;
  filter: grayscale(1) contrast(.92);
  opacity: .5;
  will-change: transform;
}
body .partner-logo-card.is-near {
  transform: scale(1.07);
  filter: grayscale(.45);
  opacity: .78;
}
body .partner-logo-card.is-center {
  transform: scale(1.3);
  filter: none;
  opacity: 1;
  z-index: 3;
  box-shadow: 0 16px 40px -18px rgba(10,45,90,.55),
              0 0 0 1px rgba(56,169,255,.30),
              0 0 30px -10px rgba(56,169,255,.75) !important;
}

@media (max-width: 640px) {
  body .partner-marquee::after { width: 128px; height: 88px; }
  body .partner-logo-card.is-center { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  body .partner-logo-card { transition: none; }
}

/* ============================================================================
   DÜZELTME KATMANI — v2
   ============================================================================ */

/* ============================================================
   1. ARAMA YÜKLEME EKRANI
   ------------------------------------------------------------
   ÖNEMLİ: Bu ekran YALNIZCA .is-active sınıfı varken görünür.
   Önceki sürümde eklediğim kurallar bu sınıfı yok saydığı için
   katman sayfa açılışında kalıcı olarak ekranı kaplıyordu.
   ============================================================ */

body .search-loader {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;                 /* <-- varsayılan GİZLİ */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(18,44,78,.97) 0%, rgba(5,12,24,.99) 62%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body .search-loader.is-active {
  display: flex;                 /* yalnızca gönderimde açılır */
  animation: slFade .22s ease both;
}
@keyframes slFade { from { opacity: 0 } to { opacity: 1 } }

body .search-loader-inner {
  width: 100%;
  max-width: 460px;
  text-align: center;
}

/* Dönen halka + ortada marka logosu */
body .sl-ring {
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto 24px;
  border-radius: 50%;
}
body .sl-ring::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(124,203,255,.16);
  border-top-color: #5FE3FF;
  border-right-color: #38A9FF;
  animation: slSpin 1.05s linear infinite;
  box-shadow: 0 0 34px -6px rgba(56,169,255,.7);
}
@keyframes slSpin { to { transform: rotate(360deg) } }

body .sl-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.75), 0 0 0 6px rgba(56,169,255,.10);
  z-index: 3;
}
body .sl-core img {
  width: 52px; height: 52px;
  object-fit: contain;
}

/* Logoların halka çevresinde akması */
body .sl-orbit {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(56,169,255,0), rgba(56,169,255,.28), rgba(56,169,255,0) 60%);
  animation: slSpin 2.6s linear infinite reverse;
}
body .sl-brands {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 150px; height: 150px;
  z-index: 2;
  pointer-events: none;
}
body .sl-brands img {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 20px;
  object-fit: contain;
  margin: -10px 0 0 -17px;
  padding: 3px;
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  opacity: 0;
  animation: slPop 9s linear infinite;
}
/* Her logo halkanın farklı bir noktasında sırayla belirir */
body .sl-brands img:nth-child(1) { transform: rotate(0deg)   translateY(-64px) rotate(0deg);   animation-delay: 0s; }
body .sl-brands img:nth-child(2) { transform: rotate(45deg)  translateY(-64px) rotate(-45deg); animation-delay: .75s; }
body .sl-brands img:nth-child(3) { transform: rotate(90deg)  translateY(-64px) rotate(-90deg); animation-delay: 1.5s; }
body .sl-brands img:nth-child(4) { transform: rotate(135deg) translateY(-64px) rotate(-135deg);animation-delay: 2.25s; }
body .sl-brands img:nth-child(5) { transform: rotate(180deg) translateY(-64px) rotate(-180deg);animation-delay: 3s; }
body .sl-brands img:nth-child(6) { transform: rotate(225deg) translateY(-64px) rotate(-225deg);animation-delay: 3.75s; }
body .sl-brands img:nth-child(7) { transform: rotate(270deg) translateY(-64px) rotate(-270deg);animation-delay: 4.5s; }
body .sl-brands img:nth-child(8) { transform: rotate(315deg) translateY(-64px) rotate(-315deg);animation-delay: 5.25s; }
body .sl-brands img:nth-child(n+9) { display: none; }
@keyframes slPop {
  0%, 100% { opacity: 0 }
  6%, 16%  { opacity: .95 }
  24%      { opacity: 0 }
}

body .sl-title {
  font-size: clamp(15px, 4vw, 19px);
  line-height: 1.5;
  font-weight: 700;
  color: #EAF6FF;
  margin-bottom: 20px;
}
body .sl-bar {
  height: 4px;
  margin: 0 auto 12px;
  max-width: 280px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
body .sl-bar span {
  display: block; height: 100%; width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5FE3FF, #38A9FF);
  box-shadow: 0 0 14px rgba(56,169,255,.9);
  animation: slBar 1.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes slBar { 0% { transform: translateX(-110%) } 100% { transform: translateX(290%) } }
body .sl-note { font-size: 12.5px; color: rgba(198,226,255,.66); }

/* Mobil — ekran küçüldüğünde de tam görünür */
@media (max-width: 560px) {
  body .search-loader { padding: 20px 16px; }
  body .sl-ring { width: 128px; height: 128px; margin-bottom: 20px; }
  body .sl-core { width: 70px; height: 70px; }
  body .sl-core img { width: 44px; height: 44px; }
  body .sl-brands { width: 128px; height: 128px; }
  body .sl-brands img { width: 30px; height: 18px; margin: -9px 0 0 -15px; }
  body .sl-brands img:nth-child(1) { transform: rotate(0deg)   translateY(-54px) rotate(0deg); }
  body .sl-brands img:nth-child(2) { transform: rotate(45deg)  translateY(-54px) rotate(-45deg); }
  body .sl-brands img:nth-child(3) { transform: rotate(90deg)  translateY(-54px) rotate(-90deg); }
  body .sl-brands img:nth-child(4) { transform: rotate(135deg) translateY(-54px) rotate(-135deg); }
  body .sl-brands img:nth-child(5) { transform: rotate(180deg) translateY(-54px) rotate(-180deg); }
  body .sl-brands img:nth-child(6) { transform: rotate(225deg) translateY(-54px) rotate(-225deg); }
  body .sl-brands img:nth-child(7) { transform: rotate(270deg) translateY(-54px) rotate(-270deg); }
  body .sl-brands img:nth-child(8) { transform: rotate(315deg) translateY(-54px) rotate(-315deg); }
  body .sl-title { font-size: 15.5px; margin-bottom: 16px; }
  body .sl-note  { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  body .sl-ring::before, body .sl-orbit, body .sl-bar span { animation: none !important; }
  body .sl-brands img { animation: none !important; opacity: .9; }
}

/* ============================================================
   2. HERO — karartma azaltıldı
   ------------------------------------------------------------
   Önceki katman videoyu neredeyse tamamen kapatıyordu.
   Artık video görünür, yazılar hâlâ okunaklı.
   ============================================================ */

body .hero-bg::after {
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(56,169,255,.22) 0%, rgba(56,169,255,0) 58%),
    radial-gradient(90% 70% at 10% 95%,  rgba(95,227,255,.12) 0%, rgba(95,227,255,0) 62%),
    linear-gradient(180deg, rgba(5,12,24,.30) 0%, rgba(5,12,24,.42) 48%, rgba(5,12,24,.66) 100%) !important;
}
/* Metnin okunabilirliği arka planı karartmak yerine yazı gölgesiyle korunur */
body .hero-title-brand,
body .hero-desc { text-shadow: 0 2px 12px rgba(3,10,20,.85) !important; }

@media (max-width: 899px) {
  /* Mobilde video yüklenmediği için biraz daha koyu zemin gerekir */
  body .hero-bg::after {
    background:
      radial-gradient(120% 80% at 70% 4%, rgba(56,169,255,.24) 0%, rgba(56,169,255,0) 60%),
      linear-gradient(180deg, rgba(5,12,24,.55) 0%, rgba(5,12,24,.72) 100%) !important;
  }
}

/* ============================================================
   3. REZERVASYON ÖZETİ — ek paketler mobilde görünsün
   ------------------------------------------------------------
   Özet kutusu masaüstünde sağ sütunda sabitleniyor; mobilde
   yükseklik sınırı nedeniyle ek ürün satırları kırpılıyordu.
   ============================================================ */

@media (max-width: 991px) {
  body .summary-card,
  body .order-summary,
  body .reservation-summary,
  body .payment-summary {
    position: static !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  body .summary-card .row,
  body .order-summary .row,
  body .summary-extras,
  body .summary-extras li,
  body .extra-summary-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body .summary-extras { flex-direction: column; gap: 8px; }
  body .summary-extras li,
  body .extra-summary-item {
    justify-content: space-between;
    gap: 12px;
    font-size: 13.8px;
    line-height: 1.45;
    padding: 9px 0;
    border-bottom: 1px solid #EDF2F8;
  }
  body .summary-extras li:last-child { border-bottom: 0; }
}

/* ============================================================================
   FİNAL DÜZELTME KATMANI — menü paleti + hero şeffaflığı
   ============================================================================ */

/* ============================================================
   1. ÜST MENÜ — TEK VE TUTARLI PALET
   ------------------------------------------------------------
   SORUN: Header, sayfanın beyaz zemini üzerinde duruyor (hero
   videosu menünün ALTINA uzanmıyor). Buna rağmen menü yarı
   saydam koyu bir katmanla çiziliyor, dolayısıyla açık gri
   görünüyordu. Aktif sekme rengi ise beyaz olduğu için
   "Ana Sayfa" yazısı açık zeminde kayboluyordu.

   ÇÖZÜM: Header artık HER DURUMDA solid koyu lacivert.
   Üst şeritle aynı renk ailesinden olduğu için palet bütünlüğü
   sağlanıyor. Aktif sekme neon mavi yazı + parlayan alt çizgi
   ile net biçimde ayrışıyor.
   ============================================================ */

body .main-header,
body .main-header.scrolled,
body.ds-scrolled .main-header {
  background: linear-gradient(180deg, #0A1E36 0%, #08172B 100%) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(110, 198, 255, .14) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05),
              0 10px 30px -22px rgba(0, 0, 0, .9) !important;
}

/* Menü bağlantıları — pasif */
body .main-header .nav-menu a,
body .main-header.scrolled .nav-menu a,
body.ds-scrolled .main-header .nav-menu a {
  color: rgba(206, 228, 250, .78) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor;
}

/* Hover */
body .main-header .nav-menu a:hover,
body .main-header.scrolled .nav-menu a:hover,
body.ds-scrolled .main-header .nav-menu a:hover {
  color: #FFFFFF !important;
  background: rgba(56, 169, 255, .12) !important;
}

/* AKTİF SEKME — hangi sayfada olunduğu net anlaşılır */
body .main-header .nav-menu a.active,
body .main-header.scrolled .nav-menu a.active,
body.ds-scrolled .main-header .nav-menu a.active {
  color: #7CCBFF !important;
  font-weight: 700 !important;
  background: rgba(56, 169, 255, .14) !important;
  -webkit-text-fill-color: #7CCBFF;
}
body .main-header .nav-menu a.active::after,
body .main-header.scrolled .nav-menu a.active::after,
body.ds-scrolled .main-header .nav-menu a.active::after {
  transform: scaleX(1) !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5FE3FF, #38A9FF) !important;
  box-shadow: 0 0 12px rgba(56, 169, 255, .95) !important;
}

/* Telefon ve hesap butonu — koyu zemine göre */
body .main-header.scrolled .nav-phone,
body.ds-scrolled .main-header .nav-phone {
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(140, 205, 255, .22) !important;
  color: #E8F4FF !important;
}
body .main-header.scrolled .nav-phone i,
body.ds-scrolled .main-header .nav-phone i {
  background: rgba(56, 169, 255, .20) !important;
  color: #7CCBFF !important;
}
body .main-header .btn-account-cta,
body .main-header.scrolled .btn-account-cta,
body.ds-scrolled .main-header .btn-account-cta {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(140, 205, 255, .26) !important;
  color: #E8F4FF !important;
  text-shadow: none !important;
}
body .main-header .btn-account-cta:hover {
  background: rgba(56, 169, 255, .18) !important;
  border-color: rgba(124, 203, 255, .5) !important;
}

/* Üst şerit — aynı palet ailesi */
body .top-bar {
  background: #061426 !important;
  border-bottom: 1px solid rgba(110, 198, 255, .10);
}

/* Mobil hamburger */
@media (max-width: 1024px) {
  body .mobile-menu-toggle {
    background-color: rgba(56, 169, 255, .16) !important;
    border: 1px solid rgba(124, 203, 255, .34) !important;
  }
  body .mobile-menu-toggle span { background: #7CCBFF !important; }
}

/* ============================================================
   2. HERO — video belirgin, karartma minimumda
   ------------------------------------------------------------
   Yazı okunabilirliği artık arka planı karartarak değil,
   yalnızca metnin ARKASINDAKİ dar alanı yumuşatarak sağlanıyor.
   ============================================================ */

body .hero-bg::after {
  background:
    radial-gradient(105% 75% at 74% 6%,  rgba(56,169,255,.16) 0%, rgba(56,169,255,0) 60%),
    linear-gradient(100deg, rgba(4,11,22,.62) 0%, rgba(4,11,22,.34) 42%, rgba(4,11,22,.10) 68%, rgba(4,11,22,.05) 100%),
    linear-gradient(180deg, rgba(4,11,22,.18) 0%, rgba(4,11,22,.06) 40%, rgba(4,11,22,.34) 100%) !important;
}

/* Videonun kendisi biraz daha canlı */
body .hero-video {
  filter: saturate(1.12) contrast(1.06) brightness(.96);
}

/* Metin okunabilirliği: karartma yerine gölge */
body .hero-title-brand,
body .hero-desc,
body .hero-valueprops li {
  text-shadow: 0 2px 14px rgba(3, 10, 20, .9) !important;
}
body .hero-title span:not(.hero-title-brand) {
  filter: drop-shadow(0 0 16px rgba(56,169,255,.45))
          drop-shadow(0 3px 14px rgba(3,10,20,.95)) !important;
}

@media (max-width: 899px) {
  /* Mobilde arama kutusu hero'nun büyük kısmını kapladığı için
     videonun görünen alanı dar; hafif ek koyuluk yeterli. */
  body .hero-bg::after {
    background:
      radial-gradient(110% 70% at 70% 4%, rgba(56,169,255,.18) 0%, rgba(56,169,255,0) 62%),
      linear-gradient(180deg, rgba(4,11,22,.34) 0%, rgba(4,11,22,.26) 45%, rgba(4,11,22,.55) 100%) !important;
  }
}

/* ============================================================
   3. ARAMA KUTUSU — video arkadan görünsün
   ============================================================ */

body .search-box {
  background: linear-gradient(165deg, rgba(11, 30, 52, .78) 0%, rgba(6, 18, 34, .86) 100%) !important;
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(124, 203, 255, .26) !important;
}

/* ============================================================================
   SON DÜZELTME KATMANI — hero videosu + üst menü okunabilirliği
   ============================================================================ */

/* ============================================================
   1. HERO VİDEOSU BELİRGİNLEŞSİN
   ------------------------------------------------------------
   SORUN: İki ayrı karartma katmanı üst üste biniyordu —
     .hero-bg::before  (0.92'ye kadar opaklık, projede zaten vardı)
     .hero-bg::after   (sonradan eklenen neon katman)
   İkisi çarpışınca video neredeyse tamamen kapanıyordu.

   ÇÖZÜM: Karartma tüm ekrana yayılmak yerine YALNIZCA metnin
   olduğu sol tarafa uygulanır. Sağ taraf (video + arama kutusu
   bölgesi) belirgin kalır. Metin okunabilirliği gölge ile korunur.
   ============================================================ */

body .hero-bg::before {
  background:
    linear-gradient(100deg,
      rgba(7, 19, 34, .78) 0%,
      rgba(7, 19, 34, .52) 26%,
      rgba(7, 19, 34, .18) 48%,
      rgba(7, 19, 34, .06) 66%,
      rgba(7, 19, 34, .22) 100%),
    linear-gradient(0deg, rgba(7, 19, 34, .55) 0%, transparent 30%) !important;
}

body .hero-bg::after {
  background:
    radial-gradient(110% 80% at 80% 6%, rgba(56,169,255,.16) 0%, rgba(56,169,255,0) 58%),
    radial-gradient(80% 60% at 8% 92%, rgba(95,227,255,.08) 0%, rgba(95,227,255,0) 62%) !important;
}

/* Videonun kendisi biraz daha canlı */
body .hero-video {
  display: block !important;
  filter: saturate(1.12) contrast(1.05) brightness(1.04);
}

/* Metin okunabilirliği: arka planı karartmak yerine yazı gölgesi */
body .hero-title,
body .hero-title-brand,
body .hero-desc,
body .hero-badge,
body .hero-valueprops li {
  text-shadow: 0 2px 14px rgba(3, 10, 20, .9), 0 1px 3px rgba(3, 10, 20, .8);
}
body .hero-title span:not(.hero-title-brand) {
  filter: drop-shadow(0 0 18px rgba(56,169,255,.5))
          drop-shadow(0 2px 12px rgba(3,10,20,.95)) !important;
}

/* Mobilde tek sütun olduğu için metin doğrudan videonun üstünde;
   orada biraz daha fazla koruma gerekir ama video yine görünür. */
@media (max-width: 899px) {
  body .hero-bg::before {
    background:
      linear-gradient(180deg,
        rgba(7, 19, 34, .58) 0%,
        rgba(7, 19, 34, .48) 42%,
        rgba(7, 19, 34, .72) 100%) !important;
  }
  body .hero-bg::after {
    background: radial-gradient(120% 70% at 70% 4%, rgba(56,169,255,.18) 0%, rgba(56,169,255,0) 62%) !important;
  }
}

/* ============================================================
   2. ÜST MENÜ — AKTİF SAYFA NET ANLAŞILSIN
   ------------------------------------------------------------
   SORUN: Aktif sekme açık mavi (#7CCBFF) yazı + açık mavi hap
   zeminiyle geliyordu; ikisi birbirine yakın olduğu için yazı
   silik görünüyordu ve hangi sayfada olunduğu anlaşılmıyordu.

   ÇÖZÜM: Aktif sekme BEYAZ yazı + belirgin hap + parlayan alt
   çizgi. Beyaz zeminli (kaydırılmış) menüde ise lacivert yazı.
   ============================================================ */

/* --- Koyu zeminli menü (sayfa başı) --- */
body .main-header .nav-menu a {
  color: rgba(226, 240, 255, .82) !important;
  -webkit-text-fill-color: currentColor !important;
  transition: color .16s ease, background .16s ease;
}
body .main-header .nav-menu a:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, .10) !important;
}
body .main-header .nav-menu a.active {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, rgba(56,169,255,.30), rgba(56,169,255,.16)) !important;
  box-shadow: inset 0 0 0 1px rgba(124,203,255,.45),
              0 6px 18px -10px rgba(56,169,255,.9) !important;
}

/* --- Beyaz zeminli menü (kaydırılmış) --- */
body .main-header.scrolled .nav-menu a,
body.ds-scrolled .main-header .nav-menu a {
  color: #45536E !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
body .main-header.scrolled .nav-menu a:hover,
body.ds-scrolled .main-header .nav-menu a:hover {
  color: #0B1D33 !important;
  background: rgba(11, 29, 51, .05) !important;
}
body .main-header.scrolled .nav-menu a.active,
body.ds-scrolled .main-header .nav-menu a.active {
  color: #06437F !important;
  -webkit-text-fill-color: #06437F !important;
  background: #DCEEFF !important;
  box-shadow: inset 0 0 0 1px rgba(56,169,255,.35) !important;
}

/* --- Aktif göstergesi: parlayan alt çizgi (her iki durumda) --- */
body .main-header .nav-menu a.active::after,
body .main-header.scrolled .nav-menu a.active::after,
body.ds-scrolled .main-header .nav-menu a.active::after {
  transform: scaleX(1) !important;
  height: 3px !important;
  bottom: 4px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #5FE3FF, #2E93EA) !important;
  box-shadow: 0 0 12px rgba(56, 169, 255, .95) !important;
}

/* Klavye odağı görünür kalsın */
body .main-header .nav-menu a:focus-visible {
  outline: 2px solid #7CCBFF;
  outline-offset: 2px;
}

/* ============================================================================
   METROPOL FLEET RENTALS — MARKA SİSTEMİ (BRAND LAYER)
   ============================================================================
   Tüm müşteri sayfalarında (ana sayfa, arama, rezervasyon, ödeme,
   başarı, hesap, bilgi sayfaları) ve alt bilgide tek bir marka
   dili uygular. Bu dosya her sayfada EN SON yüklendiği için burada
   tanımlananlar nihai sonuçtur.

   Admin paneli hariç tutulur (body.admin-portal-page); onun kendi
   katmanı ds-admin.css içindedir.

   API, form ve JavaScript ile ilişkisi yoktur.
   ============================================================================ */

:root {
  /* --- Marka lacivertleri --- */
  --brand-navy-900: #071322;
  --brand-navy-800: #0B1D33;
  --brand-navy-700: #123050;
  --brand-navy-600: #1B4370;

  /* --- Marka mavileri (logodan) --- */
  --brand-blue-600: #0A6FCB;
  --brand-blue-500: #2E93EA;
  --brand-blue-400: #4FB6FF;
  --brand-blue-300: #7CCBFF;
  --brand-blue-100: #DCEEFF;
  --brand-blue-50:  #F1F8FF;

  /* --- Metin --- */
  --brand-ink:    #0B1D33;
  --brand-ink-2:  #45536E;
  --brand-ink-3:  #7C8AA3;
  --brand-line:   #E3EBF5;
  --brand-canvas: #F5F8FC;

  /* --- Yükseklik --- */
  --brand-shadow-sm: 0 2px 8px -4px rgba(11,29,51,.28);
  --brand-shadow-md: 0 14px 34px -22px rgba(11,29,51,.45);
  --brand-shadow-lg: 0 26px 60px -32px rgba(11,29,51,.55);
}

/* ============================================================
   1. ÜST MENÜ — TÜM SAYFALARDA KOYU LACİVERT
   ------------------------------------------------------------
   Önceki sürümde menü, sayfa konumuna göre şeffaf/beyaz arasında
   gidip geliyordu. Bu yüzden bazı durumlarda beyaz zemin üzerine
   beyaz yazı düşüyor ve "Üye Olun" gibi butonlar kayboluyordu.
   Artık menü HER DURUMDA koyu lacivert, yazılar HER DURUMDA beyaz.
   Tek bir durum olduğu için okunabilirlik garanti altında.
   ============================================================ */

body:not(.admin-portal-page) .top-bar {
  background: var(--brand-navy-900) !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.admin-portal-page) .main-header,
body:not(.admin-portal-page) .main-header.scrolled,
body.ds-scrolled:not(.admin-portal-page) .main-header,
body:not(.admin-portal-page) .search-header,
body:not(.admin-portal-page) .info-topbar {
  background: var(--brand-navy-800) !important;
  background-image: linear-gradient(180deg, #10263F 0%, #0B1D33 100%) !important;
  border-bottom: 1px solid rgba(124,203,255,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -24px rgba(0,0,0,.8) !important;
}

/* Menü bağlantıları — tek durum, tek renk */
body:not(.admin-portal-page) .main-header .nav-menu a,
body.ds-scrolled:not(.admin-portal-page) .main-header .nav-menu a,
body:not(.admin-portal-page) .main-header.scrolled .nav-menu a {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: .80;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  transition: opacity .16s ease, background .16s ease;
}
body:not(.admin-portal-page) .main-header .nav-menu a:hover,
body.ds-scrolled:not(.admin-portal-page) .main-header .nav-menu a:hover,
body:not(.admin-portal-page) .main-header.scrolled .nav-menu a:hover {
  opacity: 1;
  background: rgba(255,255,255,.09) !important;
}

/* Aktif sayfa: tam opak beyaz + parlayan alt çizgi */
body:not(.admin-portal-page) .main-header .nav-menu a.active,
body.ds-scrolled:not(.admin-portal-page) .main-header .nav-menu a.active,
body:not(.admin-portal-page) .main-header.scrolled .nav-menu a.active {
  opacity: 1;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  background: rgba(56,169,255,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(124,203,255,.36) !important;
}
body:not(.admin-portal-page) .main-header .nav-menu a.active::after {
  transform: scaleX(1) !important;
  height: 3px !important;
  bottom: 4px !important;
  background: linear-gradient(90deg, var(--brand-blue-300), var(--brand-blue-500)) !important;
  box-shadow: 0 0 12px rgba(56,169,255,.9) !important;
}

/* ============================================================
   2. MENÜ BUTONLARI — "Üye Olun" ve "Araç Ara"
   ------------------------------------------------------------
   Ekran görüntüsünde ikisinin de yazısı görünmüyordu (beyaz
   zeminde beyaz yazı). Artık iki farklı, net tanımlı stil var:
     Üye Olun  -> çerçeveli (ikincil aksiyon)
     Araç Ara  -> dolu mavi (birincil aksiyon)
   ============================================================ */

body:not(.admin-portal-page) .main-header .btn-account-cta,
body.ds-scrolled:not(.admin-portal-page) .main-header .btn-account-cta,
body:not(.admin-portal-page) .main-header.scrolled .btn-account-cta {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body:not(.admin-portal-page) .main-header .btn-account-cta i { color: var(--brand-blue-300) !important; }
body:not(.admin-portal-page) .main-header .btn-account-cta:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.55) !important;
}

body:not(.admin-portal-page) .main-header .nav-actions .btn-nav,
body:not(.admin-portal-page) .main-header .nav-actions .btn-primary,
body.ds-scrolled:not(.admin-portal-page) .main-header .nav-actions .btn-nav {
  background: linear-gradient(180deg, var(--brand-blue-400) 0%, var(--brand-blue-600) 100%) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(3,25,55,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
              0 8px 22px -12px rgba(46,147,234,.95) !important;
}
body:not(.admin-portal-page) .main-header .nav-actions .btn-nav i { color: #FFFFFF !important; }

/* Telefon ve hamburger */
body:not(.admin-portal-page) .main-header .nav-phone {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: #FFFFFF !important;
}
body:not(.admin-portal-page) .main-header .nav-phone i {
  background: rgba(79,182,255,.20) !important;
  color: var(--brand-blue-300) !important;
}
body:not(.admin-portal-page) .mobile-menu-toggle {
  background-color: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}
body:not(.admin-portal-page) .mobile-menu-toggle span { background: #FFFFFF !important; }

/* Logo yazısı */
body:not(.admin-portal-page) .main-header .logo,
body:not(.admin-portal-page) .search-header .logo { color: #FFFFFF !important; }

/* ============================================================
   3. HERO — SAKİNLEŞTİRME
   ------------------------------------------------------------
   Çok sayıda parlak kutu aynı anda dikkat çekiyor ve ziyaretçiyi
   boğuyordu. Tek odak noktası ARAMA KUTUSU olmalı. Yardımcı
   bloklar geri plana çekildi (daha düşük kontrast, daha küçük),
   arama kutusu öne çıkarıldı.
   ============================================================ */

/* Yardımcı özellik kutuları sakinleşti */
body .hero-extra .hero-feature,
body .hero-features .hero-feature,
body .hero-extra > div {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
body .hero-extra .hero-feature strong,
body .hero-features .hero-feature strong {
  font-weight: 600 !important;
  color: rgba(255,255,255,.88) !important;
}
body .hero-extra i, body .hero-features i { color: var(--brand-blue-300) !important; }

/* İstatistik bloğu geri planda */
body .hero-stats {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}

/* İkincil hero butonu sakin */
body .hero-actions .btn-outline {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Arama kutusu tek odak: biraz daha belirgin */
body .search-box {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 34px 80px -34px rgba(3,10,22,.98),
    0 0 70px -34px rgba(46,147,234,.55) !important;
}

/* Güven şeridi sakinleşti */
body .search-trust-line span { color: rgba(255,255,255,.72) !important; }
body .search-trust-line span.is-highlight { color: var(--brand-blue-300) !important; }
body .search-trust-line i { color: var(--brand-blue-400) !important; }

/* ============================================================
   4. TİPOGRAFİ ÖLÇEĞİ — tüm sayfalarda ortak
   ============================================================ */

body:not(.admin-portal-page) h1,
body:not(.admin-portal-page) h2,
body:not(.admin-portal-page) h3,
body:not(.admin-portal-page) .section-title,
body:not(.admin-portal-page) .hero-title {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -.022em;
}
body:not(.admin-portal-page) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   5. ORTAK BİLEŞENLER — buton, kart, form
   ============================================================ */

body:not(.admin-portal-page) .btn-primary,
body:not(.admin-portal-page) .btn-search,
body:not(.admin-portal-page) .btn-book,
body:not(.admin-portal-page) .btn-continue {
  background: linear-gradient(180deg, var(--brand-blue-400) 0%, var(--brand-blue-600) 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
              0 10px 26px -12px rgba(46,147,234,.95) !important;
}

/* Açık zeminli sayfalarda kartlar */
body:not(.admin-portal-page) .car-card,
body:not(.admin-portal-page) .summary-card,
body:not(.admin-portal-page) .payment-card,
body:not(.admin-portal-page) .filters-sidebar,
body:not(.admin-portal-page) .info-card {
  border: 1px solid var(--brand-line) !important;
  box-shadow: var(--brand-shadow-md) !important;
}

/* Form alanları (açık zeminli sayfalar) */
body:not(.admin-portal-page) .form-control:focus,
body:not(.admin-portal-page) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.admin-portal-page) select:focus,
body:not(.admin-portal-page) textarea:focus {
  border-color: var(--brand-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(46,147,234,.20) !important;
  outline: none;
}

/* ============================================================
   6. ALT BİLGİ (FOOTER) — marka kapanışı
   ============================================================ */

body:not(.admin-portal-page) .site-footer {
  background: linear-gradient(180deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%) !important;
  border-top: 1px solid rgba(124,203,255,.14) !important;
  color: rgba(255,255,255,.72) !important;
}
body:not(.admin-portal-page) .site-footer h3,
body:not(.admin-portal-page) .site-footer h4,
body:not(.admin-portal-page) .site-footer strong { color: #FFFFFF !important; }
body:not(.admin-portal-page) .site-footer a { color: rgba(255,255,255,.72) !important; transition: color .16s ease; }
body:not(.admin-portal-page) .site-footer a:hover { color: var(--brand-blue-300) !important; }
body:not(.admin-portal-page) .site-footer i { color: var(--brand-blue-400) !important; }

/* ============================================================
   7. MOBİL — dokunma hedefleri ve ölçek
   ============================================================ */

@media (max-width: 899px) {
  body:not(.admin-portal-page) .btn,
  body:not(.admin-portal-page) .btn-primary,
  body:not(.admin-portal-page) .btn-outline { min-height: 48px; }

  /* Hero'da yardımcı bloklar daha da geri planda */
  body .hero-extra .hero-feature,
  body .hero-features .hero-feature { padding: 12px 14px !important; }
  body .hero-extra .hero-feature strong,
  body .hero-features .hero-feature strong { font-size: 13.5px !important; }
  body .hero-stats { padding: 14px !important; }
}

/* ============================================================
   8. BİRİNCİL BUTON — kontrast düzeltmesi
   ------------------------------------------------------------
   Degradenin AÇIK ucunda (#4FB6FF) beyaz yazı yalnızca 3,24
   kontrast veriyordu (WCAG AA eşiği 4,5). Degrade koyulaştırıldı:
   açık uç #0D6CBE (5,38), koyu uç #084E96 (8,27). Marka mavisi
   korunuyor ama yazı her noktada okunaklı.
   ============================================================ */

body:not(.admin-portal-page) .btn-primary,
body:not(.admin-portal-page) .btn-search,
body:not(.admin-portal-page) .btn-book,
body:not(.admin-portal-page) .btn-continue,
body:not(.admin-portal-page) .main-header .nav-actions .btn-nav,
body:not(.admin-portal-page) .main-header .nav-actions .btn-primary,
body.admin-portal-page .btn-primary,
body.admin-portal-page button[type="submit"] {
  background: linear-gradient(180deg, #0D6CBE 0%, #084E96 100%) !important;
}
body:not(.admin-portal-page) .btn-primary:hover,
body:not(.admin-portal-page) .btn-search:hover,
body:not(.admin-portal-page) .main-header .nav-actions .btn-nav:hover {
  background: linear-gradient(180deg, #1279D0 0%, #0A5AA8 100%) !important;
}

/* Kart ikonları da aynı ölçeği kullansın (beyaz ikon üzerinde) */
body:not(.admin-portal-page) .feature-icon,
body:not(.admin-portal-page) .campaign-icon,
body:not(.admin-portal-page) .quick-service-card > span,
body:not(.admin-portal-page) .empty-state-icon,
body.admin-portal-page .stat-card i,
body.admin-portal-page .kpi-icon {
  background: linear-gradient(150deg, #0D6CBE 0%, #084E96 100%) !important;
}

/* ============================================================================
   MARKA SİSTEMİ — 2. AŞAMA
   ============================================================================ */

/* ============================================================
   9. LOGO YAZISI — her yerde beyaz
   ------------------------------------------------------------
   enterprise-responsive.css marka yazısını koyu mürekkep rengine
   sabitliyordu (satır 1217, 1389). Menü artık her durumda koyu
   lacivert olduğu için yazı görünmez hale geliyordu.
   ============================================================ */

body:not(.admin-portal-page) .main-header .brand-fallback,
body:not(.admin-portal-page) .main-header:not(.scrolled) .brand-fallback,
body:not(.admin-portal-page) .main-header.scrolled .brand-fallback,
body.ds-scrolled:not(.admin-portal-page) .main-header .brand-fallback,
body:not(.admin-portal-page) .search-header .brand-fallback,
body:not(.admin-portal-page) .main-header .logo span,
body:not(.admin-portal-page) .main-header .logo strong,
body:not(.admin-portal-page) .info-topbar .brand b,
body:not(.admin-portal-page) .info-topbar .brand small {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body:not(.admin-portal-page) .info-topbar .brand small { opacity: .68 !important; }

/* Logo görseli beyaz zeminli kutu içinde (koyu menüde okunur) */
body:not(.admin-portal-page) .main-header .logo img,
body:not(.admin-portal-page) .search-header .logo img {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 5px 7px;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.45);
}

/* ============================================================
   10. TEDARİKÇİ ŞERİDİ — logolar tekrar görünür
   ------------------------------------------------------------
   Büyüteç etkisi için verilen grayscale(1) + opacity .5 değerleri
   beyaz kartlar üzerinde logoların kaybolmasına yol açıyordu.
   Artık taban durum okunur; merkezdeki logo yine öne çıkıyor.
   ============================================================ */

body .partner-logo-card {
  filter: none !important;
  opacity: 1 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--brand-line) !important;
}
body .partner-logo-card img {
  filter: grayscale(.55) contrast(1.02);
  opacity: .82;
  transition: filter .32s ease, opacity .32s ease, transform .32s ease;
}
body .partner-logo-card.is-near img { filter: grayscale(.2); opacity: .95; }
body .partner-logo-card.is-center {
  transform: scale(1.18) !important;
  border-color: rgba(46,147,234,.45) !important;
  box-shadow: 0 16px 38px -20px rgba(10,45,90,.5),
              0 0 0 1px rgba(46,147,234,.25) !important;
}
body .partner-logo-card.is-center img { filter: none; opacity: 1; }

/* Büyüteç halkası logoların ÖNÜNE geçmesin */
body .partner-marquee::after { z-index: 0 !important; }
body .partner-track { position: relative; z-index: 2; }

/* ============================================================
   11. HERO — masaüstünde gereksiz metin kaldırıldı
   ------------------------------------------------------------
   Uzun açıklama paragrafı ve ikincil buton, ziyaretçiyi arama
   kutusundan uzaklaştırıyordu. Mobilde zaten gizliydi; artık
   masaüstünde de gizli. Başlık + 3 avantaj + arama kutusu kalıyor.
   ============================================================ */

body .hero-desc { display: none !important; }
body .hero-actions { display: none !important; }

/* Kalan bloklar arasındaki boşluk yeniden dengelendi */
body .hero-valueprops { margin-bottom: 22px !important; }
@media (min-width: 900px) {
  body .hero-extra { margin-top: 24px; }
}

/* ============================================================
   12. LOKASYON AĞI — havalimanı kartları
   ============================================================ */

body .network-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 12px !important;
}
body .network-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--brand-line);
  text-decoration: none;
  color: var(--brand-ink);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease, box-shadow .2s ease;
}
body .network-item:hover {
  transform: translateY(-2px);
  border-color: rgba(46,147,234,.5);
  box-shadow: 0 16px 34px -22px rgba(10,45,90,.5);
}
body .network-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  color: #FFFFFF;
  background: linear-gradient(150deg, #0D6CBE 0%, #084E96 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
body .network-txt {
  display: flex; flex-direction: column; min-width: 0;
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
}
body .network-txt small {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--brand-ink-3); margin-bottom: 2px;
}
body .network-count {
  justify-content: center;
  background: linear-gradient(150deg, #0B1D33, #123050);
  border-color: transparent;
  color: #FFFFFF;
  flex-direction: column;
  gap: 2px;
}
body .network-count strong { font-size: 22px; color: var(--brand-blue-300); }
body .network-count span { font-size: 12px; opacity: .8; }

@media (max-width: 640px) {
  body .network-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 9px !important; }
  body .network-item { padding: 11px; gap: 9px; border-radius: 12px; }
  body .network-ico { width: 34px; height: 34px; font-size: 13px; border-radius: 10px; }
  body .network-txt { font-size: 12.8px; }
  body .network-txt small { font-size: 10px; }
}
@media (max-width: 380px) {
  body .network-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   13. ALT BİLGİ — popüler lokasyon bağlantıları
   ============================================================ */

body .site-footer-locations {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
}
body .site-footer-locations > h2 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF !important;
  margin: 0 0 20px;
  letter-spacing: -.01em;
}
body .site-footer-loc-group { margin-bottom: 20px; }
body .site-footer-loc-group h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-blue-300) !important;
  margin: 0 0 10px;
}
body .site-footer-loc-group h3 i { font-size: 12px; }
body .site-footer-loc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
}
body .site-footer-loc-links a {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  font-size: 12.8px;
  font-weight: 500;
  color: rgba(255,255,255,.76) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
body .site-footer-loc-links a:hover {
  background: rgba(46,147,234,.18);
  border-color: rgba(124,203,255,.42);
  color: #FFFFFF !important;
}

@media (max-width: 640px) {
  body .site-footer-locations { margin-top: 26px; padding-top: 22px; }
  body .site-footer-locations > h2 { font-size: 15px; margin-bottom: 16px; }
  body .site-footer-loc-links a { font-size: 12.2px; padding: 7px 11px; }
  body .site-footer-loc-links { gap: 6px 7px; }
}

/* ============================================================================
   14. DİL SEÇİCİ + RTL DESTEĞİ
   ============================================================================ */

body .lang-switch { position: relative; flex: 0 0 auto; }

body .lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
body .lang-switch-btn:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.40);
}
body .lang-switch-btn:focus-visible { outline: 2px solid #7CCBFF; outline-offset: 2px; }
body .lang-flag { font-size: 16px; line-height: 1; }
body .lang-code { letter-spacing: .04em; }
body .lang-switch-btn i {
  font-size: 10px;
  opacity: .7;
  transition: transform .18s ease;
}
body .lang-switch.is-open .lang-switch-btn i { transform: rotate(180deg); }

body .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5000;
  min-width: 190px;
  padding: 6px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--brand-line);
  box-shadow: 0 22px 50px -26px rgba(11,29,51,.6);
  animation: langIn .18s ease both;
}
body .lang-menu[hidden] { display: none !important; }
@keyframes langIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

body .lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-ink) !important;
  text-decoration: none;
  transition: background .14s ease;
}
body .lang-menu a:hover { background: var(--brand-blue-50); }
body .lang-menu a.is-active { background: var(--brand-blue-100); color: #06437F !important; }
body .lang-menu a i { margin-inline-start: auto; font-size: 11px; color: #0D6CBE; }

/* Dar ekranlarda menü sağa taşmasın */
@media (max-width: 1024px) {
  body .lang-switch-btn { height: 44px; padding: 0 11px; }
  body .lang-code { display: none; }
  body .lang-menu { right: 0; left: auto; }
}
@media (max-width: 420px) {
  body .lang-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
}

/* ---------- RTL (Arapça) ---------- */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .main-nav { direction: rtl; }
html[dir="rtl"] .hero-valueprops,
html[dir="rtl"] .search-trust-line,
html[dir="rtl"] .site-footer-loc-links { direction: rtl; }
html[dir="rtl"] .nav-menu a.active::after { direction: ltr; }
html[dir="rtl"] .network-item,
html[dir="rtl"] .site-footer-action,
html[dir="rtl"] .wa-quick-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .empty-state-tips,
html[dir="rtl"] .site-footer-column { text-align: right; }
html[dir="rtl"] .fa-chevron-right { transform: scaleX(-1); }
/* Tarih, saat ve fiyat alanları her zaman soldan sağa okunur */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] .date-picker,
html[dir="rtl"] .time-select,
html[dir="rtl"] .price,
html[dir="rtl"] .car-price { direction: ltr; text-align: start; }

/* ============================================================================
   15. TEDARİKÇİ ŞERİDİ — GÖRÜNÜRLÜK ONARIMI
   ----------------------------------------------------------------------------
   HATA: §10'da eklediğim kurallar kartın arka planını ve kenarlığını
   eziyordu ancak final-polish.css'teki boyut kuralları (flex-basis,
   height) ds-site.css'ten ÖNCE yüklendiği için bazı tarayıcılarda
   kartlar ölçüsüz kalıyor ve şerit boş görünüyordu.
   Boyutlar burada açıkça yeniden tanımlanır.
   ============================================================================ */

body .partner-marquee { overflow: hidden; padding: 10px 0; }

body .partner-track {
  display: flex !important;
  align-items: center;
  gap: 18px !important;
  width: max-content !important;
  animation: partnerMarquee 26s linear infinite !important;
  will-change: transform;
}
body .partner-marquee:hover .partner-track { animation-play-state: paused; }

@keyframes partnerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

body .partner-marquee .partner-logo-card {
  flex: 0 0 172px !important;
  height: 80px !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E3EBF5 !important;
  box-shadow: 0 12px 30px -18px rgba(7,23,43,.28) !important;
  opacity: 1 !important;
  filter: none !important;
}
body .partner-marquee .partner-logo-card img {
  display: block !important;
  max-width: 128px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: grayscale(.5);
  opacity: .88;
  transition: filter .3s ease, opacity .3s ease;
}
body .partner-marquee .partner-logo-card.is-near img { filter: grayscale(.2); opacity: .96; }
body .partner-marquee .partner-logo-card.is-center {
  transform: scale(1.14) !important;
  border-color: rgba(46,147,234,.42) !important;
  box-shadow: 0 18px 40px -20px rgba(10,45,90,.45),
              0 0 0 1px rgba(46,147,234,.22) !important;
}
body .partner-marquee .partner-logo-card.is-center img { filter: none; opacity: 1; }

@media (max-width: 640px) {
  body .partner-marquee .partner-logo-card { flex: 0 0 132px !important; height: 66px !important; }
  body .partner-marquee .partner-logo-card img { max-width: 98px !important; max-height: 34px !important; }
  body .partner-track { gap: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .partner-track { animation: none !important; }
}

/* ============================================================================
   16. HERO SADELEŞTİRME + ÖLÇEK DÜZENİ (FİNAL)
   ----------------------------------------------------------------------------
   Hero'da tek odak arama kutusudur. Ziyaretçinin dikkatini dağıtan
   ikincil bloklar masaüstünde ve mobilde gizlenir.
   ============================================================================ */

/* Kaldırılanlar: uzun paragraf, ikincil butonlar, kampanya kutucukları,
   istatistik şeridi ve güven rozetleri. Bunların hepsi sayfanın ilerleyen
   bölümlerinde zaten yer alıyor. */
body .hero-desc,
body .hero-actions,
body .hero-extra,
body .hero-features,
body .hero-stats,
body .hero-trust,
body .hero-badges { display: none !important; }

/* Hero rozeti sadeleşti */
body .hero-badge {
  font-size: 11.5px !important;
  padding: 7px 15px !important;
  letter-spacing: .06em;
}

/* Başlık ölçeği — akışkan, her ekranda dengeli */
body .hero-title {
  font-size: clamp(27px, 4.4vw, 52px) !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
}
body .hero-title-brand {
  font-size: clamp(13px, 1.5vw, 18px) !important;
  margin-bottom: 8px !important;
}
body .hero-valueprops { margin-bottom: 0 !important; }

/* Hero dikey boşluğu — içerik azaldığı için sıkılaştırıldı */
@media (min-width: 900px) {
  body .hero { padding-top: 92px !important; padding-bottom: 72px !important; }
  body .hero-text { align-self: center; }
}
@media (max-width: 899px) {
  body .hero { padding-top: 26px !important; padding-bottom: 30px !important; }
  body .hero-badge { display: none !important; }
  body .hero-title { font-size: clamp(24px, 6.6vw, 34px) !important; }
}

/* ---- Arama kutusu ölçeği ---- */
body .search-box-header h2 { font-size: clamp(16px, 1.7vw, 21px) !important; }
body .search-box .form-group > label {
  font-size: 10.5px !important;
  letter-spacing: .08em;
  margin-bottom: 6px !important;
}
body .search-box input[type="text"],
body .search-box select,
body .search-box .date-picker,
body .search-box .time-select {
  min-height: 50px !important;
  font-size: 15px !important;
}
body .btn-search { min-height: 56px !important; font-size: 16px !important; }

@media (max-width: 899px) {
  body .search-box input[type="text"],
  body .search-box select,
  body .search-box .date-picker,
  body .search-box .time-select { min-height: 48px !important; font-size: 15.5px !important; }
  body .btn-search { min-height: 54px !important; font-size: 15.5px !important; }
}

/* ============================================================
   17. DİL SEÇİCİ — 16 dil için kaydırmalı liste
   ============================================================ */

body .lang-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-width: 208px;
}
body .lang-menu::-webkit-scrollbar { width: 6px; }
body .lang-menu::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
body .lang-menu a { min-height: 42px; font-size: 14px; }

/* Mobilde alttan açılan yaprak biçimi — 16 dil rahat görünür */
@media (max-width: 560px) {
  body .lang-menu {
    position: fixed;
    left: 10px; right: 10px;
    top: auto;
    bottom: 12px;
    max-height: 64vh;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 -10px 60px -20px rgba(11,29,51,.7);
  }
  body .lang-menu a { min-height: 48px; font-size: 15px; }
}