/* =====================================================================
   Vixride - driveonport görünümü (tema katmanı)
   styles.css ve form-styles.css'ten SONRA yüklenir; yalnızca görünümü
   değiştirir, metinlere ve HTML'e dokunmaz. Kaldırmak için layout.php'deki
   tema.css satırını silmek yeterli.
   ===================================================================== */

/* Archivo (SIL Open Font License), sunucuda barındırılır. Değişken yazı tipi:
   kalınlık 400-800, genişlik %100-125. latin-ext Türkçe/Lehçe harfleri kapsar. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --vx-accent: #f6b12c;
  --vx-accent-hover: #eaa114;
  --vx-accent-ink: #141414;
  --vx-accent-text: #8f5a00;   /* açık zeminde turuncu yazı: beyazda 5.8:1, kremde 5.3:1 */
  --vx-bg: #f5f4f0;
  --vx-bg-alt: #ecebe6;
  --vx-surface: #ffffff;
  --vx-border: #e2e0da;
  --vx-border-strong: #cfcdc6;
  --vx-text: #151515;
  --vx-muted: #67655f;
  --vx-ink: #151515;
  --vx-dark: #0c0c0d;
  --vx-on-dark: #f5f4f0;
  --vx-on-dark-muted: #a9a7a1;
  --vx-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Temel ---------- */
body, #page { background: var(--vx-bg) !important; color: var(--vx-text); font-family: var(--vx-font) !important; }
h1, h2 { font-stretch: 118%; font-weight: 600 !important; letter-spacing: -.02em; }
h3 { font-stretch: 112%; font-weight: 600 !important; letter-spacing: -.01em; }
/* Tam genişlik bölümler krem zemin; kartlardaki bg-white beyaz kalır */
#page.bg-white, #main-content > section.bg-white, #main-content > div.bg-white, #main-content > section > .bg-white:not([class*="rounded"]) { background-color: var(--vx-bg) !important; }
.text-trf-orange { color: var(--vx-accent-text) !important; }
.bg-trf-orange { background-color: var(--vx-accent) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: var(--vx-bg-alt) !important; }
.text-gray-500, .text-gray-600, .text-slate-500, .text-slate-600 { color: var(--vx-muted) !important; }
.bg-gray-900 { background-color: var(--vx-ink); }

/* ---------- Üst bar ---------- */
/* header'a backdrop-filter verilmez: içindeki position:fixed mobil menüyü header'a hapseder */
header.sticky { background: transparent !important; }
header.sticky > nav { background: rgba(12, 12, 13, .97) !important; }
header.sticky nav ul > li > a, header.sticky nav ul > li > button {
  font-weight: 500 !important; padding: 8px 14px !important; border-radius: 999px; opacity: .9;
}
header.sticky nav ul > li > a:hover, header.sticky nav ul > li > button:hover {
  background: rgba(255, 255, 255, .12); opacity: 1; color: #fff !important;
}

/* ---------- Ana sayfa: fotoğraflı koyu hero + yatay arama çubuğu ---------- */
.vx-page-home #main-content > div.relative:first-child {
  position: relative; isolation: isolate; background: var(--vx-dark); color: #fff; padding-top: 0 !important;
}
.vx-page-home #main-content > div.relative:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
    url(../images/hero-sofor-768.webp) 70% 40% / cover no-repeat;
}
@media (min-width: 769px) {
  .vx-page-home #main-content > div.relative:first-child::before {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat;
  }
}
.vx-page-home #main-content > div.relative:first-child > div { margin-bottom: 0 !important; padding: 40px 0 48px; }
.vx-page-home #main-content > div.relative:first-child .lg\:w-1\/2:last-child { display: none !important; }
.vx-page-home #main-content > div.relative:first-child .lg\:w-1\/2:first-child { width: 100% !important; min-height: 0 !important; padding: 0 16px; }
.vx-page-home #main-content > div.relative:first-child h1 {
  color: #fff !important; font-size: clamp(34px, 5.2vw, 62px) !important; line-height: 1.04 !important;
  max-width: 19ch; margin-bottom: 0 !important; text-wrap: balance;
}
@media (min-width: 1024px) {
  .vx-page-home #main-content > div.relative:first-child > div { padding: 96px 0 56px; }
}

/* Arama çubuğu: driveonport .search-bar yapısı (ana sayfa formu .vx-search).
   Masaüstünde tek satır segmentler, 1280px altında iki sütun, 640px altında tek sütun. */
.vx-page-home #main-content > div.relative:first-child { z-index: 2; } /* öneri listesi alttaki bölümün üstünde kalsın */
.vx-search [hidden] { display: none !important; }
.vx-search .trip-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vx-page-home .vx-search .trip-type-btn {
  margin: 0 !important; padding: 8px 16px !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.3;
  background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.vx-page-home .vx-search .trip-type-btn:hover { background: rgba(255, 255, 255, .18) !important; }
.vx-page-home .vx-search .trip-type-btn.active { background: #fff !important; color: var(--vx-text) !important; box-shadow: none; }
.vx-page-home .vx-search .trip-type-btn:focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 2px; }

.vx-search .search-bar {
  position: relative; display: flex; align-items: stretch;
  background: var(--vx-surface); color: var(--vx-text);
  border-radius: 18px; padding: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.vx-search .seg { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; }
.vx-search .seg-from, .vx-search .seg-to, .vx-search .seg-hours { flex: 1 1 0; padding-left: 22px; padding-right: 22px; }
.vx-search .seg-date, .vx-search .seg-pax { flex: 0 0 auto; }
.vx-search .seg + .seg::before, .vx-search .swap-btn + .seg::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--vx-border);
}
.vx-search .seg-icon { width: 18px; flex-shrink: 0; text-align: center; font-size: 16px; color: var(--vx-muted); }
/* position: static: otomatik tamamlama listesi .seg-body'ye göre değil segmentin tamamına göre açılsın */
.vx-search .seg-body { position: static !important; display: grid; gap: 1px; min-width: 0; flex: 1; }
.vx-search .seg-body > label, .vx-search .seg-label {
  display: block; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--vx-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vx-search .seg-label label { display: inline; margin: 0; font: inherit; color: inherit; }
/* Alanlar çerçevesiz; 16px yazı iPhone'da dokununca yakınlaştırmayı önler */
.vx-search .seg input, .vx-search .seg select {
  display: block; width: 100%; min-width: 0; height: auto; min-height: 0; max-width: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background-color: transparent !important; box-shadow: none !important; outline: none;
  font-family: var(--vx-font); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--vx-text); text-align: left;
  -webkit-appearance: none; appearance: none;
}
.vx-search .seg input { position: relative; cursor: pointer; }
.vx-search .seg input[type=text] { cursor: text; text-overflow: ellipsis; }
.vx-search .seg input::placeholder { color: var(--vx-muted); font-weight: 500; opacity: .85; }
.vx-search .seg input::-webkit-date-and-time-value { margin: 0; text-align: left; }
/* Yerel takvim/saat simgesi görünmez ama tüm alanı kaplar: tıklayınca seçici açılır */
.vx-search .seg input::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.vx-search .seg select {
  cursor: pointer; text-overflow: ellipsis; padding-right: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2367655f'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 16px !important;
}
.vx-search .seg select option { color: #151515; background: #fff; font-weight: 500; }
.vx-search .seg:focus-within { background: #f2f1ec; border-radius: 12px; }
.vx-search .seg:focus-within::before, .vx-search .seg:focus-within + .seg::before { opacity: 0; }

.vx-search .seg-inputs { display: flex; gap: 8px; }
.vx-search .seg-inputs input[type=date] { flex: 0 0 7.4em; }
.vx-search .seg-inputs input[type=time] { flex: 0 0 5.4em; }

/* Yön değiştir */
.vx-search .swap-btn {
  position: relative; z-index: 2; align-self: center;
  display: grid; place-items: center; width: 32px; height: 32px; margin: 0 -16px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--vx-border-strong); background: var(--vx-surface);
  color: var(--vx-text); font-size: 13px; cursor: pointer; transition: transform .25s, border-color .15s;
}
.vx-search .swap-btn:hover { border-color: var(--vx-text); }
.vx-search .swap-btn:focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 2px; }
.vx-search .swap-btn.spin { transform: rotate(180deg); }
.vx-search[data-trip="hourly"] .swap-btn { display: none; }

/* Yolcu: − sayı + */
.vx-search .seg-pax .seg-body { gap: 3px; }
.vx-search .stepper { display: flex; align-items: center; gap: 8px; }
.vx-search .stepper button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--vx-border-strong); border-radius: 50%; background: transparent;
  color: var(--vx-text); font-size: 11px; cursor: pointer;
}
.vx-search .stepper button:hover:not(:disabled) { border-color: var(--vx-text); }
.vx-search .stepper button:focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 2px; }
.vx-search .stepper button:disabled { opacity: .35; cursor: not-allowed; }
.vx-search .seg .stepper select {
  width: 2.2em; padding: 0 !important; background-image: none !important;
  font-weight: 700; text-align: center; text-align-last: center;
}

/* Ara */
.vx-search .search-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0;
  margin: 0 0 0 6px; padding: 0 26px; min-height: 56px; border: 0; border-radius: 12px;
  background: var(--vx-accent); color: var(--vx-accent-ink);
  font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .15s;
}
.vx-search .search-submit:hover { background: var(--vx-accent-hover); }
.vx-search .search-submit:focus-visible { outline: 2px solid var(--vx-text); outline-offset: 2px; }
.vx-search .search-submit i { font-size: 14px; }

.vx-search .search-note { margin: 18px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .85); text-align: left; }
.vx-search .search-note i { margin-right: 6px; color: var(--vx-accent); }

/* Otomatik tamamlama listesi (yandex-autocomplete.js satır içi stil veriyor) */
.vx-search .seg .yandex-suggestions {
  top: calc(100% + 14px) !important; left: 0 !important; right: auto !important; width: max(100%, 420px) !important;
  margin-top: 0 !important; padding: 6px; max-height: min(440px, 60vh) !important;
  border: 1px solid var(--vx-border) !important; border-radius: 16px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, .18) !important;
}
.vx-search .seg-to .yandex-suggestions { left: auto !important; right: 0 !important; }
.vx-search .yandex-suggestions .suggestion-item { border-bottom: 0 !important; border-radius: 10px; }
.vx-search.is-swapped .yandex-suggestions { display: none !important; }

/* Orta ekran: 2 sütunlu kutu. driveonport 1140px'te geçiyor; Vixride'ın Fransızca/Rusça "Ara"
   düğmesi uzun olduğu için 1280px altında konum alanları çok daralıyordu, burada 1280px. */
@media (max-width: 1279px) {
  .vx-search .search-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .vx-search .seg { border: 1px solid var(--vx-border); border-radius: 12px; }
  .vx-search .seg::before { display: none; }
  .vx-search .seg-from, .vx-search .seg-to, .vx-search .seg-hours { padding-left: 14px; padding-right: 14px; }
  .vx-search .swap-btn { position: absolute; left: 50%; top: 23px; margin: 0 0 0 -16px; }
  .vx-search .swap-btn.spin { transform: rotate(180deg); }
  .vx-search .seg .yandex-suggestions, .vx-search .seg-to .yandex-suggestions {
    left: -1px !important; right: -1px !important; width: auto !important; top: calc(100% + 6px) !important;
  }
  .vx-search .search-submit { grid-column: 1 / -1; margin: 0; min-height: 54px; }
}
/* Telefon: tek sütun */
@media (max-width: 640px) {
  .vx-search .search-bar { grid-template-columns: minmax(0, 1fr); }
  .vx-search .seg-from, .vx-search .seg-to { padding-right: 52px; }
  .vx-search .swap-btn { left: auto; right: 22px; top: 56px; margin: 0; transform: rotate(90deg); }
  .vx-search .swap-btn.spin { transform: rotate(270deg); }
  .vx-search .seg-pax .seg-body { grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .vx-search .stepper { gap: 10px; }
  .vx-search .stepper button { width: 34px; height: 34px; font-size: 12px; }
}

/* Sekmeler (Havalimanı / Saatlik) */
.trip-type-btn { border-radius: 999px !important; padding: 8px 16px !important; font-weight: 600 !important; background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; }
.trip-type-btn.active { background: var(--vx-ink) !important; color: #fff !important; }
.route-tab-btn { border-radius: 999px !important; font-weight: 600 !important; }
.route-tab-btn.active { background: var(--vx-ink) !important; color: #fff !important; }

/* ---------- Kartlar ---------- */
#main-content .rounded-xl, #main-content .rounded-2xl { border-radius: 20px !important; }
#main-content input.rounded-xl, #main-content select.rounded-xl, #main-content button.rounded-xl, #main-content textarea.rounded-xl { border-radius: 12px !important; }
#main-content .bg-white.border, #main-content .bg-white.shadow-sm, #main-content .bg-white.shadow, #main-content .bg-white.shadow-md { border-color: var(--vx-border) !important; }
section dl > div.rounded-xl { background: var(--vx-surface) !important; border: 1px solid var(--vx-border); }
section dl > div.rounded-xl a.rounded-full { background: var(--vx-ink) !important; color: #fff !important; font-weight: 600 !important; }
section dl > div.rounded-xl span.rounded-full { background: var(--vx-bg-alt) !important; }
section dl > div.rounded-xl span.rounded-full i { color: var(--vx-accent-text) !important; }

/* ---------- Footer ---------- */
footer { background: var(--vx-dark) !important; color: var(--vx-on-dark); }
footer .text-gray-400, footer .text-gray-500 { color: var(--vx-on-dark-muted) !important; }

/* ---------- Ortak düzeltmeler (sayfa testlerinden) ---------- */
/* styles.css ve form-styles.css form alanlarına Figtree'yi açıkça veriyor; Archivo'ya çevir */
input, button, select, textarea, .btn, .form-group input, .form-group select, .ymaps-2-1-79-suggest { font-family: var(--vx-font) !important; }
/* Turuncu/siyah bağlantı butonları kart değil buton: 12px köşe */
#main-content a.rounded-xl.bg-trf-orange, #main-content a.rounded-xl.bg-amber-500, #main-content a.rounded-lg.bg-trf-orange,
#main-content a.rounded-xl[class*="bg-[#f9b442]"] { border-radius: 12px !important; }
/* Yüklenen resmin arkasında sürekli dönen gri şerit (styles.css) kalmasın */
img[loading="lazy"] { animation: none; background: none; }
/* Arama/rezervasyon sayfalarındaki tam sayfa gri sarmal krem zemin olsun */
:where(#main-content) > div.bg-gray-50.min-h-screen, :where(#main-content) > div.bg-gray-100.min-h-screen { background-color: var(--vx-bg) !important; }
/* Lacivert tonlu koyu yazılar tema mürekkebi */
:where(#main-content) .text-gray-900, :where(#main-content) .text-gray-800 { color: var(--vx-text); }
/* Dar ekranda küçük kart başlıkları genişlemesin */
@media (max-width: 639px) { h3.text-base, h3.text-lg { font-stretch: 100%; } }
/* form-styles.css birincil buton ve etiketleri */
.btn-primary { background: var(--vx-accent); color: var(--vx-accent-ink); box-shadow: none; }
.btn-primary:hover { background: var(--vx-accent-hover); transform: none; box-shadow: none; }
.form-group label { text-transform: none; letter-spacing: 0; color: var(--vx-muted); font-size: 13px; }
.form-group input, .form-group select { border: 1px solid var(--vx-border-strong); }

/* =====================================================================
   Genel + ana sayfa
   ===================================================================== */
/* =====================================================================
   QA yaması: genel (tüm sayfalar) + ana sayfa (.vx-page-home)
   tema.css'in SONUNA eklenir. Yalnızca görünüm; metin/HTML değişmez.
   ===================================================================== */

/* ---------- Genel: üst bar / header ---------- */
/* backdrop-filter header'a verilince içindeki position:fixed mobil menü header'a hapsoluyordu; bulanıklık yalnızca nav'da */
header.sticky { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.sticky > nav { background: rgba(12, 12, 13, .97) !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
/* Dar telefonlarda (<390px) üst turuncu bar iki satıra düşmesin */
@media (max-width: 389px) {
  #top-cta-bar { padding-left: 10px !important; padding-right: 10px !important; }
  #top-cta-bar > div, #top-cta-bar > div > div { gap: 6px !important; }
  #top-cta-bar a.rounded-full { padding-left: 10px !important; padding-right: 10px !important; }
}
/* Koyu zeminlerde turuncu yazı/ikon parlak vurgu rengiyle (tema.css açık zemin için koyulaştırıyor) */
#top-cta-bar .bg-black .text-trf-orange,
header.sticky [role="menu"]:not(#lang-switcher-menu) .text-trf-orange,
#mobile-menu .text-trf-orange,
footer .text-trf-orange { color: var(--vx-accent) !important; }
header.sticky [role="menu"]:not(#lang-switcher-menu) .bg-trf-orange\/20 { background-color: rgba(246, 177, 44, .16) !important; }
/* Masaüstü açılır menüler: koyu yüzey, yumuşak kenar */
header.sticky [role="menu"]:not(#lang-switcher-menu) { background: #151516 !important; border-color: rgba(255, 255, 255, .08) !important; border-radius: 14px !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .35) !important; }
header.sticky [role="menu"]:not(#lang-switcher-menu) > div:first-child { border-color: rgba(255, 255, 255, .08) !important; color: var(--vx-on-dark-muted) !important; }
/* Dil menüsü: açık kart */
#lang-switcher-menu { border-radius: 14px !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .16) !important; }
#lang-switcher-menu a.bg-orange-50 { background: var(--vx-bg-alt) !important; }
header.sticky #lang-switcher-btn:hover { color: #fff !important; }
/* Acente Girişi: koyu header'da ince hap */
header.sticky nav a.border-trf-orange { border-color: rgba(246, 177, 44, .7) !important; }
header.sticky nav a.border-trf-orange:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
/* Menü hapları: ok ikonları daralan ekranda kaybolmasın; 1024-1279'da daha sıkı */
header.sticky nav ul > li > button svg, #lang-switcher-btn svg { flex-shrink: 0; }
header.sticky nav ul.nav-nowrap { column-gap: 6px !important; }
@media (max-width: 1279px) {
  header.sticky nav ul > li > a, header.sticky nav ul > li > button { padding: 8px 10px !important; }
  header.sticky nav ul.nav-nowrap { column-gap: 2px !important; }
}
/* Eski turuncu alt çizgi animasyonu (pill hover ile çakışıyor) — dekoratif */
header.sticky nav ul > li > a::after { background: transparent !important; }
/* Mobil menü paneli: driveonport koyu yüzeyi */
#mobile-menu-panel { background: var(--vx-dark) !important; }
#mobile-menu-panel a.bg-gray-900\/80 { background: rgba(255, 255, 255, .07) !important; }
#mobile-menu-panel a.bg-gray-900\/80:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
#mobile-menu-panel a.bg-trf-orange { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
#mobile-menu-panel .text-gray-500 { color: var(--vx-on-dark-muted) !important; }

/* ---------- Genel: tipografi ---------- */
/* Japonca/Çince başlıklarda kelime ortasından kırılmayı azalt (destekleyen tarayıcılarda) */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { word-break: auto-phrase; }

/* ---------- Genel: formlar ---------- */
/* styles.css dolu alanlara yeşil (#10b981) kenar veriyordu; nötr kenar + vurgu odak */
input:valid:not(:placeholder-shown), select:valid:not(:placeholder-shown), textarea:valid:not(:placeholder-shown) { border-color: var(--vx-border-strong); }
input:focus, select:focus, textarea:focus,
input:valid:not(:placeholder-shown):focus, select:valid:not(:placeholder-shown):focus, textarea:valid:not(:placeholder-shown):focus { border-color: var(--vx-accent); }
*:focus-visible { outline-color: var(--vx-accent); }
input::placeholder, textarea::placeholder { color: #8f8c84; }
input:not([type=checkbox]):not([type=radio]) { text-overflow: ellipsis; }

/* ---------- Genel: renk yardımcıları (açık zemin) ---------- */
/* amber-600 (#d97706) beyazda 3.2:1 — okunur koyu turuncu */
.text-amber-600, .text-amber-700, .hover\:text-amber-600:hover, .hover\:text-amber-700:hover,
.group:hover .group-hover\:text-amber-600, .group:hover .group-hover\:text-amber-700 { color: var(--vx-accent-text) !important; }
i.text-amber-500, i.text-amber-400, .text-amber-400 > i.fa-star { color: var(--vx-accent) !important; }
/* Beyaz kartlardaki gray-400 (2.5:1) ikincil yazılar */
#main-content .route-card .text-gray-400, #main-content figure.bg-white .text-gray-400, #main-content article.bg-white .text-gray-400,
#main-content .rounded-xl.bg-white .text-gray-400, #main-content .rounded-2xl.bg-white .text-gray-400 { color: #77746c !important; }
/* Turuncu "rozet" (eyebrow) hapları: nötr beyaz hap + koyu yazı */
#main-content .bg-amber-50.rounded-full, #main-content .bg-amber-100.rounded-full {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); color: var(--vx-text) !important;
}
#main-content .bg-amber-50.rounded-full i, #main-content .bg-amber-100.rounded-full i { color: var(--vx-accent-text) !important; }
#main-content .rounded-full.bg-white.border i.text-amber-500 { color: var(--vx-accent-text) !important; }

/* ---------- Genel: butonlar ---------- */
/* Eski turuncu tonları (#f9b442, amber-500) tek vurgu rengine */
.bg-\[\#f9b442\], .bg-amber-500 { background-color: var(--vx-accent) !important; }
.hover\:bg-amber-600:not(.route-tab-btn):hover, .hover\:bg-\[\#e39f2b\]:hover, .hover\:bg-trf-orange-dark:hover { background-color: var(--vx-accent-hover) !important; }
/* Turuncu zeminde beyaz yazı (1.9:1) okunmuyordu */
.bg-trf-orange.text-white:not(.route-tab-btn):not(.trip-type-btn), .bg-amber-500.text-white:not(.route-tab-btn):not(.trip-type-btn), .bg-\[\#f9b442\].text-white { color: var(--vx-accent-ink) !important; }
/* "Detaylar" hapları: hover'da vurgu */
section dl > div.rounded-xl a.rounded-full:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
/* Siyah ikincil butonlar: driveonport hap */
#main-content a.bg-gray-900.rounded-xl, #main-content a.bg-gray-900.rounded-lg { border-radius: 999px !important; }
#main-content a.bg-gray-900:hover, #main-content a.hover\:bg-amber-500:hover, #main-content a.hover\:bg-trf-orange:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
#main-content a.bg-gray-900.shadow-sm, #main-content a.bg-gray-900.shadow-lg { box-shadow: none !important; }

/* ---------- Genel: rota kartları ---------- */
.route-card { box-shadow: 0 0 0 1px var(--vx-border) !important; transition: box-shadow .2s, transform .2s !important; }
.route-card:hover { box-shadow: 0 0 0 1px var(--vx-border-strong), 0 10px 30px rgba(20, 20, 20, .08) !important; transform: translateY(-2px); }
.route-card .border-gray-50 { border-color: #efeee9 !important; }
.route-card .text-gray-300 { color: #b5b2aa !important; }
.route-card:hover .group-hover\:text-amber-500 { color: var(--vx-accent-text) !important; }
.route-tab-btn:not(.active) { background: var(--vx-surface) !important; color: var(--vx-text) !important; box-shadow: 0 0 0 1px var(--vx-border) !important; }
.route-tab-btn:not(.active):hover { box-shadow: 0 0 0 1px var(--vx-border-strong) !important; }
.route-tab-btn.active { box-shadow: none !important; }

/* ---------- Genel: Google yorum kartları ---------- */
section[aria-labelledby="home-reviews-heading"] figure { border-color: var(--vx-border) !important; box-shadow: none !important; }
section[aria-labelledby="home-reviews-heading"] figure .border-gray-100 { border-color: var(--vx-border) !important; }

/* ---------- Genel: blog kartları ---------- */
section[aria-labelledby="home-blog-heading"] article { border-color: var(--vx-border) !important; box-shadow: none !important; }
section[aria-labelledby="home-blog-heading"] article:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
section[aria-labelledby="home-blog-heading"] article .border-gray-100 { border-color: var(--vx-border) !important; }
section[aria-labelledby="home-blog-heading"] article .bg-gradient-to-br { background: var(--vx-bg-alt) !important; }

/* ---------- Genel: SSS akordeon ---------- */
#faqAccordion > div { border-color: var(--vx-border) !important; box-shadow: none !important; border-radius: 16px !important; }
#faqAccordion > div:hover { border-color: var(--vx-border-strong) !important; }
#faqAccordion > div > button { font-weight: 600 !important; }
#faqAccordion > div > button:hover { color: var(--vx-text) !important; }
#faqAccordion [id^="faq-icon-"] { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; }
#faqAccordion [id^="faq-answer-"] { border-color: var(--vx-border) !important; color: var(--vx-muted) !important; }

/* ---------- Genel: bülten bloğu (driveonport koyu CTA) ---------- */
section[aria-labelledby="newsletter-section-heading"] .bg-\[\#000\] {
  background-color: var(--vx-dark) !important; border-radius: 24px !important; box-shadow: none !important;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}
/* mor/mavi bulanık lekeler — yalnızca dekor */
section[aria-labelledby="newsletter-section-heading"] [aria-hidden="true"].absolute > div { background: transparent !important; }
#newsletter-section-heading { color: #fff !important; font-stretch: 118%; letter-spacing: -.02em; line-height: 1.12 !important; }
section[aria-labelledby="newsletter-section-heading"] .text-gray-300 { color: rgba(255, 255, 255, .8) !important; }
section[aria-labelledby="newsletter-section-heading"] .text-gray-400 { color: var(--vx-on-dark-muted) !important; }
#newsletter-email { background: #fff !important; color: var(--vx-text) !important; border: 1px solid var(--vx-border) !important; border-radius: 12px !important; font-size: 16px !important; height: 56px !important; }
#newsletter-email::placeholder { color: #8f8c84 !important; }
#newsletterForm button[type=submit] { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 12px !important; height: 56px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; }
#newsletterForm button[type=submit]:hover { background: var(--vx-accent-hover) !important; }
section[aria-labelledby="newsletter-section-heading"] a.underline:hover { color: var(--vx-accent) !important; }
/* Bülten başlığı telefonda çok büyük (6 satır) */
@media (max-width: 639px) {
  #newsletter-section-heading { font-size: 26px !important; }
  section[aria-labelledby="newsletter-section-heading"] .bg-\[\#000\] > .relative { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- Genel: footer ---------- */
footer.footer { border-top: 0 !important; }
.footer-contact li > i, .footer-contact a.footer-contact-map { color: var(--vx-accent) !important; }
.footer-contact a:hover, .footer-links li a:hover { color: var(--vx-accent) !important; }
.footer-contact-label, .footer-bottom p { color: var(--vx-on-dark-muted) !important; }
.footer-links li a { color: rgba(255, 255, 255, .72) !important; }
.footer-top, .footer-bottom { border-color: rgba(255, 255, 255, .1) !important; }
.footer-social a { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .12); }
.footer-social a:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
.footer-lang select, .footer-lang select:valid:not(:placeholder-shown) {
  background-color: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 10px !important;
}
.footer-lang select option { color: #151515; background: #fff; }

/* =====================================================================
   Ana sayfa (.vx-page-home)
   ===================================================================== */

@media (max-width: 1023px) {
  /* telefonda 16px kenar boşluğu: form ve başlık ekran kenarından 16px */
  .vx-page-home #main-content > div.relative:first-child .lg\:w-1\/2:first-child { padding: 0 !important; }
}

/* Bölüm başlıkları: satır içi kritik CSS .max-w-2xl/.max-w-3xl'e margin:auto veriyor, sola yaslı başlık ortada kayıyordu */
.vx-page-home section[aria-labelledby="home-reviews-heading"] .max-w-2xl,
.vx-page-home section[aria-labelledby="home-blog-heading"] .max-w-2xl,
.vx-page-home section[aria-labelledby="popular-routes-heading"] .max-w-2xl,
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .max-w-3xl { margin-left: 0 !important; }

/* Rota kartları telefonda daha sıkı (uzun liste) */
@media (max-width: 639px) {
  .vx-page-home #popularRoutesGrid { gap: 10px !important; }
  .vx-page-home #popularRoutesGrid .route-card { padding: 14px 16px !important; }
  .vx-page-home #popularRoutesGrid .route-card > div:last-child { margin-top: 10px !important; padding-top: 8px !important; }
}

/* Temel hizmet kartları: ikon dairesi */
.vx-page-home section[aria-labelledby="core-services-heading"] dl > div.rounded-xl span.rounded-full i { color: var(--vx-text) !important; }

/* "Bir transfer nasıl işliyor?" bölümü: gri-beyaz degrade yerine alt zemin */
.vx-page-home section[aria-labelledby="case-studies-heading"] {
  background: var(--vx-bg-alt) !important; border-top: 1px solid var(--vx-border) !important; border-bottom: 1px solid var(--vx-border);
}
.vx-page-home section[aria-labelledby="case-studies-heading"] article { border-color: var(--vx-border) !important; box-shadow: none !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] article:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
/* lacivert degrade şerit yerine driveonport koyu */
.vx-page-home section[aria-labelledby="case-studies-heading"] article > div.bg-gradient-to-r { background: var(--vx-dark) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] article > div.bg-gradient-to-r .text-gray-300 { color: rgba(255, 255, 255, .78) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] article > div.bg-gradient-to-r .text-trf-orange { color: var(--vx-accent) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] article > div.bg-gradient-to-r span.bg-trf-orange { border-radius: 999px !important; padding: 3px 10px !important; }
/* "Nasıl yapıyoruz" kutusu: yeşil yerine nötr panel */
.vx-page-home section[aria-labelledby="case-studies-heading"] .bg-green-50\/60 { background: var(--vx-bg) !important; border-color: var(--vx-border) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] .text-green-800 { color: var(--vx-text) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] .text-green-600 { color: #1f8a4c !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] h4.text-gray-400 { color: var(--vx-muted) !important; }
.vx-page-home section[aria-labelledby="case-studies-heading"] .border-gray-100 { border-color: var(--vx-border) !important; }

/* "Nasıl çalışır?" adımları: turuncu daire üzerinde beyaz rakam okunmuyordu */
.vx-page-home section[aria-labelledby="how-it-works-heading"] > div > div { background: var(--vx-surface) !important; border: 1px solid var(--vx-border); }
.vx-page-home section[aria-labelledby="how-it-works-heading"] .bg-trf-orange { color: var(--vx-accent-ink) !important; }
.vx-page-home section[aria-labelledby="how-it-works-heading"] .bg-\[\#c1e6d2\] { background: var(--vx-ink) !important; color: var(--vx-accent) !important; }
.vx-page-home section[aria-labelledby="how-it-works-heading"] h3 { color: var(--vx-text) !important; font-weight: 600 !important; }
.vx-page-home section[aria-labelledby="how-it-works-heading"] h3 + p { color: var(--vx-muted) !important; font-weight: 400 !important; }

/* Popüler bölgeler: çok renkli (mavi/mor/turkuaz) vurgular tek palete */
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a { border-color: var(--vx-border) !important; box-shadow: none !important; }
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a > div:first-child > div:first-child { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; }
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a h3 { color: var(--vx-text) !important; }
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a > div:last-child { color: var(--vx-accent-text) !important; border-color: var(--vx-border) !important; }
.vx-page-home section[aria-labelledby="regional-hubs-heading"] .grid > a .text-green-600 { color: var(--vx-accent-text) !important; }

/* =====================================================================
   Havalimanı ve rota sayfaları
   ===================================================================== */
/* =====================================================================
   Havalimanı (airport-transfer) ve güzergah (route-transfer) sayfaları
   tema.css'ten sonra gelir; yalnızca bu iki görünümün body sınıfıyla sınırlı.
   ===================================================================== */

/* ---------- Hero: fotoğraflı koyu zemin (alt sayfa hero'su) ---------- */
/* Telefonda hero çok uzun (form da içinde): fotoğraf yalnızca üst kısımda, aşağı doğru koyuya karışır */
.vx-page-airport-transfer #main-content > section.relative:first-child,
.vx-page-route-transfer #main-content > section.relative:first-child {
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0) 0, rgba(12, 12, 13, 0) 380px, var(--vx-dark) 660px),
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    url(../images/hero-sofor-768.webp) 70% 0 / auto 660px no-repeat,
    var(--vx-dark) !important;
  color: #fff; border-bottom: 0 !important;
}
@media (min-width: 769px) {
  .vx-page-airport-transfer #main-content > section.relative:first-child,
  .vx-page-route-transfer #main-content > section.relative:first-child {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark) !important;
  }
}
@media (min-width: 1024px) {
  .vx-page-airport-transfer #main-content > section.relative:first-child,
  .vx-page-route-transfer #main-content > section.relative:first-child { padding-top: 40px !important; padding-bottom: 72px !important; }
}

/* Breadcrumb: yarı saydam beyaz */
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav {
  color: rgba(255, 255, 255, .7); font-size: 13px; flex-wrap: wrap; white-space: normal; row-gap: 4px;
}
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav a,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav a,
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav a i,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav a i {
  color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav a:hover,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav a:hover { color: #fff; text-decoration-color: var(--vx-accent); }
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav > i,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav > i { color: rgba(255, 255, 255, .45); }
.vx-page-airport-transfer #main-content > section:first-child .breadcrumb-nav > span,
.vx-page-route-transfer #main-content > section:first-child .breadcrumb-nav > span { color: rgba(255, 255, 255, .85); font-weight: 600; }

/* Üst etiket, başlık, giriş metni */
.vx-page-airport-transfer #main-content > section:first-child .lg\:col-span-6 > .rounded-full,
.vx-page-route-transfer #main-content > section:first-child .lg\:col-span-6 > .rounded-full {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--vx-accent);
}
.vx-page-airport-transfer #main-content > section:first-child h1,
.vx-page-route-transfer #main-content > section:first-child h1 {
  color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance;
}
.vx-page-airport-transfer #main-content > section:first-child .text-gray-300,
.vx-page-route-transfer #main-content > section:first-child .text-gray-300 { color: rgba(255, 255, 255, .8); }
/* Sayfa içi .max-w-xl kuralı giriş paragrafını tablette ortalıyordu; başlıkla aynı hizada kalsın */
.vx-page-airport-transfer #main-content > section:first-child p.max-w-xl,
.vx-page-route-transfer #main-content > section:first-child p.max-w-xl { margin-left: 0; margin-right: 0; }
.vx-page-airport-transfer #main-content > section:first-child .text-amber-400,
.vx-page-route-transfer #main-content > section:first-child .text-amber-400 { color: var(--vx-accent); }

/* Hero istatistik / güvence kutuları: yarı saydam koyu karolar */
.vx-page-airport-transfer #main-content > section:first-child .bg-white\/5,
.vx-page-route-transfer #main-content > section:first-child .bg-white\/5 {
  background: rgba(12, 12, 13, .55); border-color: rgba(255, 255, 255, .14);
  border-radius: 14px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vx-page-airport-transfer #main-content > section:first-child .bg-white\/5 .text-gray-400,
.vx-page-route-transfer #main-content > section:first-child .bg-white\/5 .text-gray-400 { color: rgba(255, 255, 255, .7); }
.vx-page-airport-transfer #main-content > section:first-child .bg-white\/5 .text-amber-400,
.vx-page-route-transfer #main-content > section:first-child .bg-white\/5 .text-amber-400,
.vx-page-airport-transfer #main-content > section:first-child .bg-white\/5 .text-green-400,
.vx-page-route-transfer #main-content > section:first-child .bg-white\/5 .text-green-400 { color: #fff; }
.vx-page-airport-transfer #main-content > section:first-child .bg-white\/5 > i,
.vx-page-route-transfer #main-content > section:first-child .bg-white\/5 > i { color: var(--vx-accent); }
.vx-page-airport-transfer #main-content > section:first-child .text-gray-200,
.vx-page-route-transfer #main-content > section:first-child .text-gray-200 { color: rgba(255, 255, 255, .85); }

/* ---------- Rezervasyon kartı: ana sayfa arama kartı gibi ---------- */
.vx-page-airport-transfer #main-content > section:first-child .bg-white.rounded-2xl,
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl {
  border: 0; border-radius: 18px !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.vx-page-airport-transfer #main-content > section:first-child .bg-white.rounded-2xl h2,
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl h2 { font-size: 20px; line-height: 1.25; color: var(--vx-text); }
.vx-page-airport-transfer #main-content > section:first-child .bg-white.rounded-2xl h2 i,
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl h2 i { color: var(--vx-accent); }
.vx-page-airport-transfer #main-content > section:first-child .bg-white.rounded-2xl .border-b,
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl .border-b { border-color: var(--vx-border); }
/* Güzergah kartı başlığı: dar ekranda/uzun dillerde rozet alta geçebilsin */
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl > div.border-b { flex-wrap: wrap; gap: 8px 12px; }
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl > div.border-b > span { white-space: nowrap; }
/* Güzergah kartındaki "€35 Sabit Fiyat" rozeti (yeşil yerine) */
.vx-page-airport-transfer #main-content > section:first-child .bg-white.rounded-2xl .bg-green-100,
.vx-page-route-transfer #main-content > section:first-child .bg-white.rounded-2xl .bg-green-100 {
  background: rgba(246, 177, 44, .2); color: var(--vx-text); font-weight: 700;
}
.vx-page-airport-transfer #booking-widget label,
.vx-page-route-transfer #booking-widget label {
  color: var(--vx-muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.vx-page-airport-transfer #booking-widget label i,
.vx-page-route-transfer #booking-widget label i { color: var(--vx-accent); }
.vx-page-airport-transfer #booking-widget input:not([type=hidden]),
.vx-page-route-transfer #booking-widget input:not([type=hidden]),
.vx-page-airport-transfer #booking-widget select,
.vx-page-route-transfer #booking-widget select {
  height: 52px; border: 1px solid var(--vx-border) !important; border-radius: 12px !important;
  background-color: #fff !important; color: var(--vx-text); font-weight: 500; box-shadow: none;
}
.vx-page-airport-transfer #booking-widget input:focus,
.vx-page-route-transfer #booking-widget input:focus,
.vx-page-airport-transfer #booking-widget select:focus,
.vx-page-route-transfer #booking-widget select:focus {
  outline: none; border-color: var(--vx-text) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .35) !important;
}
.vx-page-airport-transfer #booking-widget button[type=submit],
.vx-page-route-transfer #booking-widget button[type=submit] {
  height: 56px; background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important;
  border-radius: 12px !important; box-shadow: none !important; font-weight: 700 !important;
}
.vx-page-airport-transfer #booking-widget button[type=submit]:hover,
.vx-page-route-transfer #booking-widget button[type=submit]:hover { background: var(--vx-accent-hover) !important; }

/* ---------- Bölümler: krem / alternatif zemin ve ince çizgiler ---------- */
.vx-page-airport-transfer #main-content > section:not(:first-child),
.vx-page-route-transfer #main-content > section:not(:first-child) { border-color: var(--vx-border) !important; }
.vx-page-airport-transfer #main-content > section.bg-gray-50,
.vx-page-route-transfer #main-content > section.bg-gray-50 { border-top: 1px solid var(--vx-border); }
.vx-page-airport-transfer #main-content > section:not(:first-child) .border-gray-100,
.vx-page-route-transfer #main-content > section:not(:first-child) .border-gray-100,
.vx-page-airport-transfer #main-content > section:not(:first-child) .border-gray-200,
.vx-page-route-transfer #main-content > section:not(:first-child) .border-gray-200 { border-color: var(--vx-border); }
.vx-page-airport-transfer #main-content > section:not(:first-child) .divide-gray-100 > * + *,
.vx-page-route-transfer #main-content > section:not(:first-child) .divide-gray-100 > * + *,
.vx-page-airport-transfer #main-content > section:not(:first-child) .divide-gray-200 > * + *,
.vx-page-route-transfer #main-content > section:not(:first-child) .divide-gray-200 > * + * { border-color: #eceae4; }
.vx-page-airport-transfer #main-content > section:not(:first-child) .text-gray-400,
.vx-page-route-transfer #main-content > section:not(:first-child) .text-gray-400 { color: var(--vx-muted); }

/* Kartlar: beyaz, ince kenarlık, gölgesiz; üzerine gelince yumuşak gölge */
.vx-page-airport-transfer #main-content > section:not(:first-child) .shadow-sm,
.vx-page-route-transfer #main-content > section:not(:first-child) .shadow-sm,
.vx-page-airport-transfer #main-content > section:not(:first-child) .shadow-md,
.vx-page-route-transfer #main-content > section:not(:first-child) .shadow-md { box-shadow: none !important; }
.vx-page-airport-transfer #main-content > section:not(:first-child) a.hover\:shadow-md:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) a.hover\:shadow-md:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-airport-transfer #main-content > section:not(:first-child) .hover\:border-amber-300:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) .hover\:border-amber-300:hover,
.vx-page-airport-transfer #main-content > section:not(:first-child) .hover\:border-amber-400:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) .hover\:border-amber-400:hover,
.vx-page-airport-transfer #main-content > section:not(:first-child) .hover\:border-amber-500:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) .hover\:border-amber-500:hover { border-color: var(--vx-border-strong) !important; }
/* Gri kutulu kartlar (bilgi kutuları, araç kartları, SSS, rehber kartları) beyaz olsun */
.vx-page-airport-transfer #main-content dl > div.rounded-2xl,
.vx-page-route-transfer #main-content dl > div.rounded-2xl,
.vx-page-airport-transfer #main-content > section:not(:first-child) .rounded-2xl.bg-gray-50,
.vx-page-route-transfer #main-content > section:not(:first-child) .rounded-2xl.bg-gray-50,
.vx-page-airport-transfer #main-content > section:not(:first-child) .rounded-xl.bg-gray-50,
.vx-page-route-transfer #main-content > section:not(:first-child) .rounded-xl.bg-gray-50,
.vx-page-airport-transfer #main-content > section:not(:first-child) .bg-gray-50\/50,
.vx-page-route-transfer #main-content > section:not(:first-child) .bg-gray-50\/50 {
  background-color: var(--vx-surface) !important; border-color: var(--vx-border);
}

/* Açık zeminde turuncu yazı: okunur ton */
.vx-page-airport-transfer #main-content > section:not(:first-child) .text-amber-600,
.vx-page-route-transfer #main-content > section:not(:first-child) .text-amber-600,
.vx-page-airport-transfer #main-content > section:not(:first-child) .text-amber-700,
.vx-page-route-transfer #main-content > section:not(:first-child) .text-amber-700,
.vx-page-airport-transfer #main-content > section:not(:first-child) .text-amber-800,
.vx-page-route-transfer #main-content > section:not(:first-child) .text-amber-800,
.vx-page-airport-transfer #main-content > section:not(:first-child) .text-amber-900,
.vx-page-route-transfer #main-content > section:not(:first-child) .text-amber-900,
.vx-page-airport-transfer #main-content > section:not(:first-child) .hover\:text-amber-600:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) .hover\:text-amber-600:hover,
.vx-page-airport-transfer #main-content > section:not(:first-child) .hover\:text-amber-700:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) .hover\:text-amber-700:hover,
.vx-page-airport-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:text-amber-600,
.vx-page-route-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:text-amber-600 { color: var(--vx-accent-text); }

/* Bölüm etiketleri (turuncu hap) → beyaz, kenarlıklı hap */
.vx-page-airport-transfer #main-content > section:not(:first-child) .rounded-full.bg-amber-100.uppercase,
.vx-page-route-transfer #main-content > section:not(:first-child) .rounded-full.bg-amber-100.uppercase {
  background: var(--vx-surface); border: 1px solid var(--vx-border); color: var(--vx-text);
}
.vx-page-airport-transfer #main-content > section:not(:first-child) .rounded-full.bg-amber-100.uppercase i,
.vx-page-route-transfer #main-content > section:not(:first-child) .rounded-full.bg-amber-100.uppercase i { color: var(--vx-accent-text); }
/* Araç modeli rozetleri */
.vx-page-airport-transfer #main-content > section:not(:first-child) span.rounded-full.bg-amber-100:not(.uppercase),
.vx-page-route-transfer #main-content > section:not(:first-child) span.rounded-full.bg-amber-100:not(.uppercase) {
  background: var(--vx-bg-alt); color: var(--vx-text);
}
/* İkon kareleri ve numara daireleri */
.vx-page-airport-transfer #main-content > section:not(:first-child) .bg-amber-100:not(.rounded-full),
.vx-page-route-transfer #main-content > section:not(:first-child) .bg-amber-100:not(.rounded-full),
.vx-page-airport-transfer #main-content > section:not(:first-child) .bg-amber-500\/10,
.vx-page-route-transfer #main-content > section:not(:first-child) .bg-amber-500\/10 { background: rgba(246, 177, 44, .16); }
.vx-page-airport-transfer #main-content > section:not(:first-child) .bg-amber-500,
.vx-page-route-transfer #main-content > section:not(:first-child) .bg-amber-500 { background-color: var(--vx-accent); box-shadow: none; }
.vx-page-airport-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:bg-amber-500,
.vx-page-route-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:bg-amber-500 { background-color: var(--vx-accent); color: var(--vx-accent-ink); }

/* Butonlar: siyah hap (ikincil), turuncu (birincil) */
.vx-page-airport-transfer #main-content > section:not(:first-child) a.bg-gray-900,
.vx-page-route-transfer #main-content > section:not(:first-child) a.bg-gray-900,
.vx-page-airport-transfer #main-content > section:not(:first-child) span.bg-gray-900,
.vx-page-route-transfer #main-content > section:not(:first-child) span.bg-gray-900 { border-radius: 999px !important; }
.vx-page-airport-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover { background-color: #000 !important; color: #fff !important; }
.vx-page-airport-transfer #main-content > section:not(:first-child) a.border-gray-900,
.vx-page-route-transfer #main-content > section:not(:first-child) a.border-gray-900 { border-radius: 999px !important; border-color: var(--vx-ink); }
.vx-page-airport-transfer #main-content > section:not(:first-child) a.bg-amber-500,
.vx-page-route-transfer #main-content > section:not(:first-child) a.bg-amber-500 {
  color: var(--vx-accent-ink); border-radius: 12px !important; font-weight: 700;
}
.vx-page-airport-transfer #main-content > section:not(:first-child) a.bg-amber-500:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) a.bg-amber-500:hover { background-color: var(--vx-accent-hover); }

/* Karşılaştırma tablosu: Vixride sütunu hafif sıcak ton */
.vx-page-airport-transfer #main-content > section:not(:first-child) th.bg-amber-50\/70,
.vx-page-route-transfer #main-content > section:not(:first-child) th.bg-amber-50\/70,
.vx-page-airport-transfer #main-content > section:not(:first-child) td.bg-amber-50\/40,
.vx-page-route-transfer #main-content > section:not(:first-child) td.bg-amber-50\/40 {
  background-color: rgba(246, 177, 44, .07); border-color: var(--vx-border);
}
.vx-page-airport-transfer #main-content > section:not(:first-child) th.bg-gray-950,
.vx-page-route-transfer #main-content > section:not(:first-child) th.bg-gray-950 { border-color: #2a2a2d; }
.vx-page-airport-transfer #main-content > section:not(:first-child) thead tr.bg-gray-900,
.vx-page-route-transfer #main-content > section:not(:first-child) thead tr.bg-gray-900 { background-color: var(--vx-dark) !important; }

/* Güzergah: "Kısaca" kutusu → beyaz kart, solda turuncu çizgi */
.vx-page-route-transfer #main-content .from-amber-500\/10 {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); border-left: 4px solid var(--vx-accent);
}
/* Güzergah rehberi içindeki sarı kutular */
.vx-page-airport-transfer #main-content > section:not(:first-child) .bg-amber-50,
.vx-page-route-transfer #main-content > section:not(:first-child) .bg-amber-50 { background-color: var(--vx-bg); border-color: var(--vx-border); }
/* Havalimanı: destek kartı ve harita kutusu */
.vx-page-airport-transfer #main-content > section:not(:first-child) .border-amber-200,
.vx-page-route-transfer #main-content > section:not(:first-child) .border-amber-200 { border-color: var(--vx-border); }
.vx-page-airport-transfer #terminal-map,
.vx-page-route-transfer #terminal-map { background-color: var(--vx-surface) !important; border-color: var(--vx-border) !important; }

/* SSS (details) */
.vx-page-airport-transfer #main-content details.rounded-2xl,
.vx-page-route-transfer #main-content details.rounded-2xl { border-radius: 14px !important; }
.vx-page-airport-transfer #main-content details.rounded-2xl[open],
.vx-page-route-transfer #main-content details.rounded-2xl[open] { border-color: var(--vx-border-strong); }
.vx-page-airport-transfer #main-content details summary .text-amber-500,
.vx-page-route-transfer #main-content details summary .text-amber-500 { color: var(--vx-muted); }

/* ---------- Tüm destinasyonlar fiyat tablosu (.rate-matrix) ---------- */
.vx-page-airport-transfer .rate-matrix,
.vx-page-route-transfer .rate-matrix { background: var(--vx-bg-alt); border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }
.vx-page-airport-transfer .rate-matrix-eyebrow,
.vx-page-route-transfer .rate-matrix-eyebrow { color: var(--vx-accent-text); }
.vx-page-airport-transfer .rate-matrix-intro h2,
.vx-page-route-transfer .rate-matrix-intro h2 { color: var(--vx-text); }
.vx-page-airport-transfer .rate-matrix-intro p,
.vx-page-route-transfer .rate-matrix-intro p { color: var(--vx-muted); }
.vx-page-airport-transfer .rate-matrix-search input,
.vx-page-route-transfer .rate-matrix-search input,
.vx-page-airport-transfer .rate-matrix-search input:valid:not(:placeholder-shown),
.vx-page-route-transfer .rate-matrix-search input:valid:not(:placeholder-shown) {
  height: 48px; border: 1px solid var(--vx-border); border-radius: 12px; box-shadow: none;
}
.vx-page-airport-transfer .rate-matrix-search input:focus,
.vx-page-route-transfer .rate-matrix-search input:focus,
.vx-page-airport-transfer .rate-matrix-search input:valid:not(:placeholder-shown):focus,
.vx-page-route-transfer .rate-matrix-search input:valid:not(:placeholder-shown):focus {
  border-color: var(--vx-text); box-shadow: 0 0 0 3px rgba(246, 177, 44, .35);
}
.vx-page-airport-transfer .rate-matrix-search i,
.vx-page-route-transfer .rate-matrix-search i { color: var(--vx-muted); }
.vx-page-airport-transfer .rate-matrix-table-wrap,
.vx-page-route-transfer .rate-matrix-table-wrap { border-color: var(--vx-border); border-radius: 20px; box-shadow: none; }
.vx-page-airport-transfer .rate-matrix-table thead th,
.vx-page-route-transfer .rate-matrix-table thead th { background: #f2f1ec; color: var(--vx-muted); border-bottom-color: var(--vx-border); }
.vx-page-airport-transfer .rate-matrix-table thead th span,
.vx-page-route-transfer .rate-matrix-table thead th span { color: var(--vx-muted); }
.vx-page-airport-transfer .rate-matrix-table tbody td,
.vx-page-route-transfer .rate-matrix-table tbody td { border-bottom-color: #eceae4; }
.vx-page-airport-transfer .rate-matrix-table tbody tr:hover td,
.vx-page-route-transfer .rate-matrix-table tbody tr:hover td { background: #faf9f6; }
.vx-page-airport-transfer .rate-matrix-table .rm-dest a,
.vx-page-route-transfer .rate-matrix-table .rm-dest a { color: var(--vx-text); }
.vx-page-airport-transfer .rate-matrix-table .rm-dest a:hover,
.vx-page-route-transfer .rate-matrix-table .rm-dest a:hover { color: var(--vx-accent-text); }
.vx-page-airport-transfer .rate-matrix-table .rm-dest i,
.vx-page-route-transfer .rate-matrix-table .rm-dest i,
.vx-page-airport-transfer .rate-matrix-table .rm-time i,
.vx-page-route-transfer .rate-matrix-table .rm-time i { color: var(--vx-accent); }
.vx-page-airport-transfer .rate-matrix-table .rm-chip,
.vx-page-route-transfer .rate-matrix-table .rm-chip { background: var(--vx-bg-alt); color: var(--vx-text); border-radius: 999px; }
.vx-page-airport-transfer .rate-matrix-table .rm-time,
.vx-page-route-transfer .rate-matrix-table .rm-time { color: var(--vx-muted); }
.vx-page-airport-transfer .rate-matrix-table td.rm-price,
.vx-page-route-transfer .rate-matrix-table td.rm-price { color: var(--vx-text); }
.vx-page-airport-transfer .rate-matrix-table .rm-featured,
.vx-page-route-transfer .rate-matrix-table .rm-featured,
.vx-page-airport-transfer .rate-matrix-table tbody tr:hover td.rm-featured,
.vx-page-route-transfer .rate-matrix-table tbody tr:hover td.rm-featured { background: rgba(246, 177, 44, .1); }
.vx-page-airport-transfer .rate-matrix-table td.rm-featured,
.vx-page-route-transfer .rate-matrix-table td.rm-featured { color: var(--vx-accent-text); }
.vx-page-airport-transfer .rate-matrix-table .rm-book,
.vx-page-route-transfer .rate-matrix-table .rm-book { background: var(--vx-ink); border-radius: 999px; font-weight: 600; }
.vx-page-airport-transfer .rate-matrix-table .rm-book:hover,
.vx-page-route-transfer .rate-matrix-table .rm-book:hover { background: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-page-airport-transfer .rate-matrix-more button,
.vx-page-route-transfer .rate-matrix-more button { border-color: var(--vx-border-strong); color: var(--vx-text); }
.vx-page-airport-transfer .rate-matrix-more button:hover,
.vx-page-route-transfer .rate-matrix-more button:hover { border-color: var(--vx-text); color: var(--vx-text); }
@media (max-width: 767px) {
  .vx-page-airport-transfer .rate-matrix-table-wrap,
  .vx-page-route-transfer .rate-matrix-table-wrap { border: 0; background: transparent; }
  .vx-page-airport-transfer .rate-matrix-table tbody tr,
  .vx-page-route-transfer .rate-matrix-table tbody tr { border-color: var(--vx-border); border-radius: 20px; }
  .vx-page-airport-transfer .rate-matrix-table td.rm-price,
  .vx-page-route-transfer .rate-matrix-table td.rm-price { background: var(--vx-bg); }
  .vx-page-airport-transfer .rate-matrix-table td.rm-price::before,
  .vx-page-route-transfer .rate-matrix-table td.rm-price::before { color: var(--vx-muted); }
  .vx-page-airport-transfer .rate-matrix-table td.rm-featured,
  .vx-page-route-transfer .rate-matrix-table td.rm-featured { background: rgba(246, 177, 44, .14); }
  .vx-page-airport-transfer .rate-matrix-empty,
  .vx-page-route-transfer .rate-matrix-empty { border-color: var(--vx-border); }
}

/* ---------- Mobil alt "rezervasyon" çubuğu ---------- */
.vx-page-airport-transfer .mobile-book-bar,
.vx-page-route-transfer .mobile-book-bar {
  background: rgba(12, 12, 13, .92); border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.vx-page-airport-transfer .mobile-book-bar a,
.vx-page-route-transfer .mobile-book-bar a { background: var(--vx-accent); color: var(--vx-accent-ink); font-weight: 700; border-radius: 12px; }
.vx-page-airport-transfer .mobile-book-bar a:hover,
.vx-page-route-transfer .mobile-book-bar a:hover { background: var(--vx-accent-hover); }

/* =====================================================================
   Otel, saatlik şoför, şehir içi
   ===================================================================== */
/* =====================================================================
   Otel transferi (hotel-transfer), saatlik şoförlü araç (chauffeur-hire)
   ve şehir içi (city-rides) sayfaları. tema.css'ten sonra gelir; her kural
   bu üç görünümün body sınıfıyla sınırlıdır.
   ===================================================================== */

/* =============================== OTEL ================================ */

/* Hero: fotoğraflı koyu zemin. Telefonda hero uzun (form içinde): fotoğraf üstte, aşağı doğru koyuya karışır */
.vx-page-hotel-transfer #main-content > section:first-child {
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0) 0, rgba(12, 12, 13, 0) 380px, var(--vx-dark) 660px),
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    url(../images/hero-sofor-768.webp) 70% 0 / auto 660px no-repeat,
    var(--vx-dark) !important;
  color: #fff; border-bottom: 0 !important;
}
@media (min-width: 769px) {
  .vx-page-hotel-transfer #main-content > section:first-child {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark) !important;
  }
}
@media (min-width: 1024px) {
  .vx-page-hotel-transfer #main-content > section:first-child { padding-top: 40px !important; padding-bottom: 72px !important; }
}

/* Breadcrumb: turuncu yerine yarı saydam beyaz; dar ekranda alt satıra geçebilir */
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav {
  color: rgba(255, 255, 255, .7); font-size: 13px; flex-wrap: wrap; white-space: normal; row-gap: 4px;
}
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav a,
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav a i {
  color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav a:hover { color: #fff; text-decoration-color: var(--vx-accent); }
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav > i { color: rgba(255, 255, 255, .45); }
.vx-page-hotel-transfer #main-content > section:first-child .breadcrumb-nav > span { color: rgba(255, 255, 255, .85); font-weight: 600; }

/* Üst etiket, başlık, giriş metni */
.vx-page-hotel-transfer #main-content > section:first-child .lg\:col-span-6 > .rounded-full {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--vx-accent);
}
.vx-page-hotel-transfer #main-content > section:first-child h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance; }
.vx-page-hotel-transfer #main-content > section:first-child .text-gray-300 { color: rgba(255, 255, 255, .8); }
.vx-page-hotel-transfer #main-content > section:first-child p.max-w-xl { margin-left: 0; margin-right: 0; }
.vx-page-hotel-transfer #main-content > section:first-child .text-amber-400 { color: var(--vx-accent); }

/* Hero istatistik kutuları: yarı saydam koyu karolar */
.vx-page-hotel-transfer #main-content > section:first-child .bg-white\/5 {
  background: rgba(12, 12, 13, .55); border-color: rgba(255, 255, 255, .14);
  border-radius: 14px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vx-page-hotel-transfer #main-content > section:first-child .bg-white\/5 .text-gray-400 { color: rgba(255, 255, 255, .7); }
.vx-page-hotel-transfer #main-content > section:first-child .bg-white\/5 .text-amber-400,
.vx-page-hotel-transfer #main-content > section:first-child .bg-white\/5 .text-green-400 { color: #fff; }

/* Rezervasyon kartı: ana sayfa arama kartı gibi */
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl {
  border: 0; border-radius: 18px !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl h2 { font-size: 20px; line-height: 1.25; color: var(--vx-text); }
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl h2 i { color: var(--vx-accent); }
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl > div.border-b { border-color: var(--vx-border); flex-wrap: wrap; gap: 8px 12px; }
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl > div.border-b > span { white-space: nowrap; }
/* "€35 Sabit Fiyat" rozeti: yeşil yerine sıcak ton */
.vx-page-hotel-transfer #main-content > section:first-child .bg-white.rounded-2xl .bg-green-100 { background: rgba(246, 177, 44, .2); color: var(--vx-text); font-weight: 700; }
.vx-page-hotel-transfer #booking-widget label { color: var(--vx-muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.vx-page-hotel-transfer #booking-widget label i { color: var(--vx-accent); }
.vx-page-hotel-transfer #booking-widget input:not([type=hidden]),
.vx-page-hotel-transfer #booking-widget select {
  height: 52px; border: 1px solid var(--vx-border) !important; border-radius: 12px !important;
  background-color: #fff !important; color: var(--vx-text); font-weight: 500; box-shadow: none;
}
.vx-page-hotel-transfer #booking-widget input:focus,
.vx-page-hotel-transfer #booking-widget select:focus {
  outline: none; border-color: var(--vx-text) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .35) !important;
}
.vx-page-hotel-transfer #booking-widget button[type=submit] {
  height: 56px; background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important;
  border-radius: 12px !important; box-shadow: none !important; font-weight: 700 !important; transform: none !important;
}
.vx-page-hotel-transfer #booking-widget button[type=submit]:hover { background: var(--vx-accent-hover) !important; }

/* Bölümler: krem / alternatif zemin, ince çizgiler */
.vx-page-hotel-transfer #main-content > section:not(:first-child) { border-color: var(--vx-border) !important; }
.vx-page-hotel-transfer #main-content > section.bg-gray-50 { border-top: 1px solid var(--vx-border); }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .border-gray-100,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .border-gray-200,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .border-gray-200\/60 { border-color: var(--vx-border); }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .divide-gray-200 > * + * { border-color: #eceae4; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .text-gray-400 { color: var(--vx-muted); }

/* Kartlar: beyaz, ince kenarlık, gölgesiz; üzerine gelince yumuşak gölge */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .shadow-sm,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .shadow-md { box-shadow: none !important; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .hover\:shadow-md:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .hover\:border-amber-400:hover,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .hover\:border-amber-500:hover { border-color: var(--vx-border-strong) !important; }
/* Gri kutular (araç kartları, rehber, çevre, mesafeler, saatlik kutu, otel ve rehber bağlantıları) beyaz kart olsun */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-2xl.bg-gray-50,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-xl.bg-gray-50,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .bg-gray-50\/50 {
  background-color: var(--vx-surface) !important; border-color: var(--vx-border);
}
/* Beyaz karta dönen kutuların içindeki beyaz çipler (paketler, gezilecek yerler, bölge bağlantıları) krem olsun */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-2xl.bg-gray-50 .bg-white { background-color: var(--vx-bg); border-color: var(--vx-border); }
/* Beyaz kartların içindeki gri kutular (ör. dönüş rehberi maddeleri) krem olsun, kartla karışmasın */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .bg-white.rounded-2xl .rounded-xl.bg-gray-50 { background-color: var(--vx-bg) !important; }
/* Dönüş rehberindeki boş ızgara (yalnızca boşluk içerir) kartın altında boşluk bırakmasın; :has desteklenmezse kural yok sayılır */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .space-y-6 > .grid:not(:has(> *)) { margin-top: 0 !important; padding-top: 0; }

/* Açık zeminde turuncu yazı: okunur ton */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .text-amber-600,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .text-amber-700,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .text-amber-800,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .hover\:text-amber-600:hover,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:text-amber-600 { color: var(--vx-accent-text); }
.vx-page-hotel-transfer #main-content > section:not(:first-child) i.text-amber-500 { color: var(--vx-accent); }

/* Bölüm etiketleri (turuncu hap) → beyaz, kenarlıklı hap */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-full.uppercase.bg-amber-100,
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-full.uppercase.bg-amber-500\/10 {
  background: var(--vx-surface); border: 1px solid var(--vx-border); color: var(--vx-text);
}
.vx-page-hotel-transfer #main-content > section:not(:first-child) .rounded-full.uppercase i { color: var(--vx-accent-text); }
/* Araç modeli rozetleri */
.vx-page-hotel-transfer #main-content > section:not(:first-child) span.rounded-full.bg-amber-100:not(.uppercase) { background: var(--vx-bg-alt); color: var(--vx-text); }
/* İkon kareleri */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .bg-amber-500\/10.justify-center { background: rgba(246, 177, 44, .16); color: var(--vx-accent-text); }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .bg-amber-500.justify-center { background-color: var(--vx-accent); color: var(--vx-accent-ink); box-shadow: none; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) .group:hover .group-hover\:bg-amber-500 { background-color: var(--vx-accent); color: var(--vx-accent-ink); }
/* Rehber içindeki sarı bilgi kutuları */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .bg-amber-500\/10.border { background: var(--vx-bg); border-color: var(--vx-border); }

/* Butonlar: siyah hap (ikincil), turuncu (birincil) */
.vx-page-hotel-transfer #main-content > section:not(:first-child) a.bg-gray-900 { border-radius: 999px !important; padding-left: 16px; padding-right: 16px; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover { background-color: #000 !important; color: #fff !important; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) a.bg-amber-500 {
  background-color: var(--vx-accent); color: var(--vx-accent-ink); border-radius: 12px !important; font-weight: 700;
}
.vx-page-hotel-transfer #main-content > section:not(:first-child) a.bg-amber-500:hover { background-color: var(--vx-accent-hover); }

/* "Hızlı bilgi" kutusu → beyaz kart, solda turuncu çizgi */
.vx-page-hotel-transfer #main-content .from-amber-500\/10 {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); border-left: 4px solid var(--vx-accent);
}

/* Karşılaştırma tablosu */
.vx-page-hotel-transfer #main-content > section:not(:first-child) thead tr.bg-gray-900 { background-color: var(--vx-dark) !important; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) th.bg-gray-950 { background-color: #1a1a1c; border-color: #2a2a2d; }
.vx-page-hotel-transfer #main-content > section:not(:first-child) td.bg-amber-50\/40 { background-color: rgba(246, 177, 44, .07); border-color: var(--vx-border); }
.vx-page-hotel-transfer #main-content > section:not(:first-child) table.rounded-2xl { border-color: var(--vx-border); }

/* SSS kutuları */
.vx-page-hotel-transfer #main-content > section:not(:first-child) .space-y-4 > .bg-white.rounded-xl { border-radius: 14px !important; }
.vx-page-hotel-transfer #main-content details summary .text-amber-500 { color: var(--vx-muted); }

/* ========================= SAATLİK ŞOFÖRLÜ ARAÇ ========================= */

/* Hero: lacivert-gri gradyan yerine fotoğraflı koyu zemin */
.vx-page-chauffeur-hire .ch-hero {
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0) 0, rgba(12, 12, 13, 0) 360px, var(--vx-dark) 640px),
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    url(../images/hero-sofor-768.webp) 70% 0 / auto 640px no-repeat,
    var(--vx-dark);
  padding: 28px 0 44px;
}
@media (min-width: 769px) {
  .vx-page-chauffeur-hire .ch-hero {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark);
  }
}
@media (min-width: 1024px) { .vx-page-chauffeur-hire .ch-hero { padding: 40px 0 72px; } }
.vx-page-chauffeur-hire .ch-crumbs { color: rgba(255, 255, 255, .7); }
.vx-page-chauffeur-hire .ch-crumbs a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.vx-page-chauffeur-hire .ch-crumbs a:hover { color: #fff; text-decoration-color: var(--vx-accent); }
.vx-page-chauffeur-hire .ch-crumbs [aria-current] { color: rgba(255, 255, 255, .85); font-weight: 600; }
.vx-page-chauffeur-hire .ch-hero h1 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance; }
.vx-page-chauffeur-hire .ch-lead { color: rgba(255, 255, 255, .8); }
.vx-page-chauffeur-hire .ch-badges { color: rgba(255, 255, 255, .85); }
.vx-page-chauffeur-hire .ch-badges i { color: var(--vx-accent); }
.vx-page-chauffeur-hire .ch-from {
  background: rgba(12, 12, 13, .55); border: 1px solid rgba(255, 255, 255, .16); color: var(--vx-accent);
  font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Fiyat formu: ana sayfa arama kartı gibi */
.vx-page-chauffeur-hire .ch-form { border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); color: var(--vx-text); }
.vx-page-chauffeur-hire .ch-form h2 { font-size: 20px; line-height: 1.25; }
.vx-page-chauffeur-hire .ch-form label { color: var(--vx-muted); font-weight: 500; }
.vx-page-chauffeur-hire .ch-form label i { color: var(--vx-accent) !important; }
.vx-page-chauffeur-hire .ch-form input,
.vx-page-chauffeur-hire .ch-form select {
  border: 1px solid var(--vx-border) !important; color: var(--vx-text); font-family: inherit; font-weight: 500;
}
.vx-page-chauffeur-hire .ch-form input:focus,
.vx-page-chauffeur-hire .ch-form select:focus { border-color: var(--vx-text) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .35); }
.vx-page-chauffeur-hire .ch-btn { height: 56px; background: var(--vx-accent); color: var(--vx-accent-ink); font-weight: 700; font-family: inherit; }
.vx-page-chauffeur-hire .ch-btn:hover { background: var(--vx-accent-hover); }
/* Telefonda paket seçimi ("4 saat / 80 km") kesilmesin */
@media (max-width: 480px) {
  .vx-page-chauffeur-hire .ch-form { padding: 18px; }
  .vx-page-chauffeur-hire .ch-form select { padding: 0 8px 0 12px; }
  .vx-page-chauffeur-hire .ch-row2 { gap: 8px; }
}

/* Bölümler: krem zemin, gri bölümler alternatif ton, ince çizgiler */
.vx-page-chauffeur-hire .ch-sec { border-bottom: 1px solid var(--vx-border); }
.vx-page-chauffeur-hire .ch-sec[style*="background"] { background: var(--vx-bg-alt) !important; border-top: 1px solid var(--vx-border); margin-top: -1px; }
.vx-page-chauffeur-hire .ch-sec h2 { color: var(--vx-text); }
.vx-page-chauffeur-hire .ch-sub { color: var(--vx-muted); }
.vx-page-chauffeur-hire .ch-glance-lead { color: var(--vx-text); }

/* Kısa bilgi listesi: beyaz kart */
.vx-page-chauffeur-hire .ch-facts { background: var(--vx-surface); border-color: var(--vx-border); border-radius: 20px; }
.vx-page-chauffeur-hire .ch-facts > div { border-top-color: #eceae4; }
.vx-page-chauffeur-hire .ch-facts dt { color: var(--vx-text); font-weight: 600; }
.vx-page-chauffeur-hire .ch-facts dd { color: var(--vx-muted); }

/* Fiyat ve mesafe tabloları */
.vx-page-chauffeur-hire .ch-table-wrap { background: var(--vx-surface); border-color: var(--vx-border); border-radius: 20px; }
.vx-page-chauffeur-hire .ch-table th { background: var(--vx-dark); font-weight: 600; }
.vx-page-chauffeur-hire .ch-table td { border-top-color: #eceae4; color: #3a3935; }
.vx-page-chauffeur-hire .ch-table td strong { color: var(--vx-text); font-weight: 600; }
.vx-page-chauffeur-hire .ch-table tr:nth-child(even) td { background: #faf9f6; }

/* Gezilecek yerler kartları */
.vx-page-chauffeur-hire .ch-sight { border-color: var(--vx-border); border-radius: 20px; transition: box-shadow .2s; }
.vx-page-chauffeur-hire .ch-sight:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .08); }
.vx-page-chauffeur-hire .ch-sight h3 { color: var(--vx-text); }
.vx-page-chauffeur-hire .ch-sight h3 i { color: var(--vx-accent-text); }
.vx-page-chauffeur-hire .ch-sight p { color: var(--vx-muted); }

/* Bölge / şehir bağlantı kartları */
.vx-page-chauffeur-hire .ch-card { border-color: var(--vx-border); color: var(--vx-text); transition: box-shadow .2s, border-color .2s; }
.vx-page-chauffeur-hire .ch-card:hover { border-color: var(--vx-border-strong); box-shadow: 0 10px 30px rgba(20, 20, 20, .08); }
.vx-page-chauffeur-hire .ch-card strong { font-weight: 600; }
.vx-page-chauffeur-hire .ch-card span { color: var(--vx-muted); }

/* Not kutusu: sarı yerine beyaz kart, solda turuncu çizgi */
.vx-page-chauffeur-hire .ch-note { background: var(--vx-surface); border: 1px solid var(--vx-border); border-left: 4px solid var(--vx-accent); color: var(--vx-text); }
.vx-page-chauffeur-hire .ch-note i { color: var(--vx-accent-text); }

/* SSS */
.vx-page-chauffeur-hire .ch-faq details { border-color: var(--vx-border); }
.vx-page-chauffeur-hire .ch-faq details[open] { border-color: var(--vx-border-strong); }
.vx-page-chauffeur-hire .ch-faq summary { font-weight: 600; color: var(--vx-text); }
.vx-page-chauffeur-hire .ch-faq p { color: var(--vx-muted); }
/* Metin içi bağlantılar: turuncu yazı kremde zayıf kalıyordu (3.98:1); koyu yazı + turuncu alt çizgi */
.vx-page-chauffeur-hire .ch-faq a,
.vx-page-chauffeur-hire .ch-note a,
.vx-page-chauffeur-hire .ch-link {
  color: var(--vx-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--vx-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.vx-page-chauffeur-hire .ch-faq a:hover,
.vx-page-chauffeur-hire .ch-note a:hover,
.vx-page-chauffeur-hire .ch-link:hover { color: var(--vx-accent-text); }

/* ================== Otel + şoför: mobil alt "rezervasyon" çubuğu ================== */
.vx-page-hotel-transfer .mobile-book-bar,
.vx-page-chauffeur-hire .mobile-book-bar {
  background: rgba(12, 12, 13, .92); border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.vx-page-hotel-transfer .mobile-book-bar a,
.vx-page-chauffeur-hire .mobile-book-bar a { background: var(--vx-accent); color: var(--vx-accent-ink); font-weight: 700; border-radius: 12px; }
.vx-page-hotel-transfer .mobile-book-bar a:hover,
.vx-page-chauffeur-hire .mobile-book-bar a:hover { background: var(--vx-accent-hover); }

/* ============================= ŞEHİR İÇİ ============================== */

/* Breadcrumb şeridi hero ile birleşsin (koyu) */
.vx-page-city-rides #main-content > nav.breadcrumb-nav {
  background: var(--vx-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.vx-page-city-rides #main-content > nav.breadcrumb-nav ol,
.vx-page-city-rides #main-content > nav.breadcrumb-nav .text-gray-400 { color: rgba(255, 255, 255, .7); }
.vx-page-city-rides #main-content > nav.breadcrumb-nav a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.vx-page-city-rides #main-content > nav.breadcrumb-nav [aria-current] { color: rgba(255, 255, 255, .85); }

/* Hero: fotoğraflı koyu zemin */
.vx-page-city-rides #main-content > div.relative:first-of-type {
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0) 0, rgba(12, 12, 13, 0) 300px, var(--vx-dark) 560px),
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    url(../images/hero-sofor-768.webp) 70% 0 / auto 560px no-repeat,
    var(--vx-dark) !important;
  color: #fff;
}
@media (min-width: 769px) {
  .vx-page-city-rides #main-content > div.relative:first-of-type {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark) !important;
  }
}
/* Geniş ekranda sağda sayfanın kendi fotoğrafı da var: arka plan fotoğrafı daha koyu kalsın, iki fotoğraf yarışmasın */
@media (min-width: 1024px) {
  .vx-page-city-rides #main-content > div.relative:first-of-type {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .82) 50%, rgba(8, 8, 9, .62) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark) !important;
  }
}
.vx-page-city-rides #main-content > div.relative:first-of-type > div { margin-bottom: 0; padding-bottom: 48px; }
.vx-page-city-rides #main-content > div.relative:first-of-type h1 {
  color: #fff !important; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; text-wrap: balance;
}
.vx-page-city-rides #main-content > div.relative:first-of-type img { border: 1px solid rgba(255, 255, 255, .1); }
/* Telefonda başlık ve kart 16px kenar boşluğuyla hizalansın (iç içe p-4'ler tarih/saat alanlarını daraltıyordu) */
@media (max-width: 639px) {
  .vx-page-city-rides #main-content > div.relative:first-of-type h1,
  .vx-page-city-rides #main-content > div.relative:first-of-type .z-10.p-4 { padding-left: 0; padding-right: 0; }
}

/* Arama kartı: ana sayfa arama kartı gibi */
.vx-page-city-rides #cityRidesSearchForm {
  border-radius: 18px; padding: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); color: var(--vx-text);
}
/* Tarih/saat ızgarası telefonda kartın dışına taşmasın */
.vx-page-city-rides #cityRidesSearchForm .form-group { min-width: 0; }
.vx-page-city-rides #cityRidesSearchForm .form-group label { color: var(--vx-muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.vx-page-city-rides #cityRidesSearchForm .form-group label svg { color: var(--vx-accent); }
.vx-page-city-rides #cityRidesSearchForm .form-group input,
.vx-page-city-rides #cityRidesSearchForm .form-group select {
  height: 52px; padding-top: 0; padding-bottom: 0; border: 1px solid var(--vx-border) !important; border-radius: 12px;
  font-family: inherit; font-weight: 500; color: var(--vx-text); box-shadow: none; min-width: 0;
}
@media (max-width: 480px) {
  .vx-page-city-rides #cityRidesSearchForm .form-group input,
  .vx-page-city-rides #cityRidesSearchForm .form-group select { padding-left: 12px; padding-right: 12px; }
  .vx-page-city-rides #cityRidesSearchForm .form-group select { padding-right: 2.25rem; }
}
.vx-page-city-rides #cityRidesSearchForm .form-group input:focus,
.vx-page-city-rides #cityRidesSearchForm .form-group select:focus { border-color: var(--vx-text) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .35); }
.vx-page-city-rides #cityRidesSearchForm .btn-primary {
  height: 56px; padding-top: 0; padding-bottom: 0; background: var(--vx-accent); color: var(--vx-accent-ink);
  border-radius: 12px; box-shadow: none; font-family: inherit; font-weight: 600; font-size: 16px;
}
.vx-page-city-rides #cityRidesSearchForm .btn-primary:hover { background: var(--vx-accent-hover); transform: none; box-shadow: none; }

/* Hizmet kartları: beyaz kart, siyah "Detaylar" hapı (ana sayfadaki gibi) */
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 {
  background-color: var(--vx-surface) !important; border: 1px solid var(--vx-border); transition: box-shadow .2s;
}
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .08); }
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 span.rounded-full.bg-white { background: var(--vx-bg-alt); }
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 span.rounded-full.bg-white i { color: var(--vx-text); }
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 a.rounded-full.bg-white {
  background: var(--vx-ink); color: #fff; font-size: 15px; font-weight: 600;
}
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 a.rounded-full.bg-white:hover { background: #000; }

/* Gri bölüm: alternatif ton + ince çizgiler */
.vx-page-city-rides #main-content > section.bg-gray-100 { border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }

/* Yıldızlı ayraçlar */
.vx-page-city-rides #main-content .text-\[\#f9b442\] { color: var(--vx-accent); }
.vx-page-city-rides #main-content .border-gray-300 { border-color: var(--vx-border); }

/* "Sorunsuz Deneyim" koyu kartı: lacivert gradyan yerine koyu ton */
.vx-page-city-rides #main-content .from-gray-800 {
  background: radial-gradient(120% 90% at 20% 15%, #2a2a2d 0%, #161618 55%, var(--vx-dark) 100%);
}

/* Nasıl çalışır: beyaz kart; numaralar turuncu zemin + koyu yazı (beyaz yazı okunmuyordu), yeşil onay yerine aynı stil */
.vx-page-city-rides #main-content .rounded-\[20px\].bg-gray-100 { background-color: var(--vx-surface) !important; border: 1px solid var(--vx-border); }
.vx-page-city-rides #main-content .bg-\[\#f9b442\].rounded-full,
.vx-page-city-rides #main-content .bg-\[\#c1e6d2\] { background: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-page-city-rides #main-content .text-\[\#4c4c4c\] { color: var(--vx-text); }
.vx-page-city-rides #main-content .text-\[\#696969\] { color: var(--vx-muted); font-weight: 400; }

/* Araç kartları */
.vx-page-city-rides #main-content > section .rounded-lg.bg-gray-100 {
  background-color: var(--vx-surface) !important; border: 1px solid var(--vx-border); border-radius: 20px;
}
.vx-page-city-rides #main-content > section .rounded-lg.bg-gray-100 .aspect-video { background: var(--vx-bg-alt); border-radius: 12px; }
.vx-page-city-rides #main-content > section .rounded-lg.bg-gray-100 .border-gray-200 { border-color: var(--vx-border); }
.vx-page-city-rides #main-content > section .rounded-lg.bg-gray-100 h3,
.vx-page-city-rides #main-content > section h2.text-gray-800 { color: var(--vx-text); }
.vx-page-city-rides #main-content > section .rounded-lg.bg-gray-100 .text-gray-300 { color: var(--vx-muted); }

/* Alt çağrı bandı: koyu zemin, turuncu buton */
.vx-page-city-rides #main-content > div.bg-gray-900 { background-color: var(--vx-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
/* Koyu çağrı bandı ile koyu footer arasında krem şerit kalmasın (footer'ın üst boşluğu) */
.vx-page-city-rides footer { margin-top: 0 !important; }
.vx-page-city-rides #main-content > div.bg-gray-900 .text-gray-300 { color: rgba(255, 255, 255, .8); }
.vx-page-city-rides #main-content > div.bg-gray-900 a.bg-\[\#f9b442\] {
  background: var(--vx-accent); color: var(--vx-accent-ink); border-radius: 12px; box-shadow: none; font-weight: 600;
}
.vx-page-city-rides #main-content > div.bg-gray-900 a.bg-\[\#f9b442\]:hover { background: var(--vx-accent-hover); }

/* =====================================================================
   Blog ve bilgi sayfaları
   ===================================================================== */
/* =====================================================================
   QA yaması: içerik sayfaları (blog, blog-post, help, about, contact,
   turkey, privacy, terms, 404). tema.css'in SONUNA eklenir.
   Her kural ilgili .vx-page-* sınıfıyla sınırlı; yalnızca görünüm.
   ===================================================================== */

/* ---------- Ortak: okunur turuncu yazı ---------- */
/* #a96b00 krem zeminde 3.98:1, beyazda 4.38:1 (AA altı); bu sayfalarda 5.2:1 / 5.7:1 veren ton */
.vx-page-blog, .vx-page-blog-post, .vx-page-help, .vx-page-about, .vx-page-contact,
.vx-page-turkey, .vx-page-privacy, .vx-page-terms, .vx-page-404 { --vx-accent-text: #8f5c00; }

/* Footer'ın 64px üst boşluğu alt zeminli son bölümden sonra krem şerit bırakıyordu */
.vx-page-help footer, .vx-page-blog-post footer, .vx-page-contact footer { margin-top: 0 !important; }

/* ---------- Ortak: fotoğraflı koyu sayfa başlığı (driveonport alt sayfa hero'su) ---------- */
.vx-page-blog #main-content > header,
.vx-page-blog-post #main-content > article > header,
.vx-page-help #main-content > header,
.vx-page-about #main-content > section:first-of-type,
.vx-page-turkey #main-content > div.relative:first-of-type {
  position: relative; isolation: isolate; color: #fff; border-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
    linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
    url(../images/hero-sofor-768.webp) 70% 40% / cover no-repeat,
    var(--vx-dark) !important;
}
@media (min-width: 769px) {
  .vx-page-blog #main-content > header,
  .vx-page-blog-post #main-content > article > header,
  .vx-page-help #main-content > header,
  .vx-page-about #main-content > section:first-of-type,
  .vx-page-turkey #main-content > div.relative:first-of-type {
    background:
      linear-gradient(90deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, .72) 45%, rgba(8, 8, 9, .35) 100%),
      linear-gradient(0deg, rgba(8, 8, 9, .85) 0%, transparent 45%),
      url(../images/hero-sofor-1280.webp) 70% 40% / cover no-repeat,
      var(--vx-dark) !important;
  }
}
/* Ortalanmış başlıkta (yardım) sağ taraf da koyu kalsın: ek düz katman */
.vx-page-help #main-content > header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 9, .38); pointer-events: none;
}

/* Koyu hero üstündeki ayrı breadcrumb şeridi de koyu (açık şerit araya girmesin) */
.vx-page-help #main-content > nav.breadcrumb-nav,
.vx-page-about #main-content > nav.breadcrumb-nav,
.vx-page-turkey #main-content > nav.breadcrumb-nav {
  background: var(--vx-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
.vx-page-help #main-content > nav.breadcrumb-nav ol,
.vx-page-about #main-content > nav.breadcrumb-nav ol,
.vx-page-turkey #main-content > nav.breadcrumb-nav ol { color: rgba(255, 255, 255, .7) !important; }
.vx-page-help #main-content > nav.breadcrumb-nav a,
.vx-page-about #main-content > nav.breadcrumb-nav a,
.vx-page-turkey #main-content > nav.breadcrumb-nav a {
  color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.vx-page-help #main-content > nav.breadcrumb-nav a:hover,
.vx-page-about #main-content > nav.breadcrumb-nav a:hover,
.vx-page-turkey #main-content > nav.breadcrumb-nav a:hover { color: #fff !important; text-decoration-color: var(--vx-accent); }
.vx-page-help #main-content > nav.breadcrumb-nav .text-gray-400,
.vx-page-about #main-content > nav.breadcrumb-nav .text-gray-400,
.vx-page-turkey #main-content > nav.breadcrumb-nav .text-gray-400 { color: rgba(255, 255, 255, .45) !important; }
.vx-page-help #main-content > nav.breadcrumb-nav [aria-current],
.vx-page-about #main-content > nav.breadcrumb-nav [aria-current],
.vx-page-turkey #main-content > nav.breadcrumb-nav [aria-current] { color: rgba(255, 255, 255, .88) !important; }

/* Açık zeminli breadcrumb şeridi (iletişim, gizlilik, koşullar): okunur gri */
.vx-page-contact #main-content > nav.breadcrumb-nav,
.vx-page-privacy #main-content > nav.breadcrumb-nav,
.vx-page-terms #main-content > nav.breadcrumb-nav { border-bottom-color: var(--vx-border) !important; }

/* Hero içindeki breadcrumb (blog listesi ve yazı) */
.vx-page-blog #main-content > header nav ol,
.vx-page-blog-post #main-content > article > header nav ol { color: rgba(255, 255, 255, .7) !important; font-weight: 500; }
.vx-page-blog #main-content > header nav a,
.vx-page-blog-post #main-content > article > header nav a {
  color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.vx-page-blog #main-content > header nav a:hover,
.vx-page-blog-post #main-content > article > header nav a:hover { text-decoration-color: var(--vx-accent); }
.vx-page-blog #main-content > header nav i,
.vx-page-blog-post #main-content > article > header nav i { color: rgba(255, 255, 255, .45) !important; }
.vx-page-blog #main-content > header nav span.text-black,
.vx-page-blog-post #main-content > article > header nav span.text-black { color: rgba(255, 255, 255, .88) !important; font-weight: 600; }

/* =====================================================================
   Blog listesi (.vx-page-blog)
   ===================================================================== */
.vx-page-blog #main-content > header { padding: 36px 0 44px !important; }
@media (min-width: 1024px) { .vx-page-blog #main-content > header { padding: 56px 0 64px !important; } }
.vx-page-blog #main-content > header h1 {
  color: #fff !important; font-size: clamp(32px, 4.6vw, 54px) !important; line-height: 1.06 !important; max-width: 20ch; text-wrap: balance;
}
.vx-page-blog #main-content > header p { color: rgba(255, 255, 255, .82) !important; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; margin-left: 0 !important; }

/* Yazı kartları: gölgesiz, ince kenar; hover'da yumuşak gölge */
.vx-page-blog #main-content article.group {
  border-color: var(--vx-border) !important; box-shadow: none !important; border-radius: 20px !important;
}
.vx-page-blog #main-content article.group:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-blog #main-content article.group a.bg-gray-100 { background: var(--vx-bg-alt) !important; }
.vx-page-blog #main-content article.group h2 { font-size: 18px !important; font-stretch: 108%; letter-spacing: -.01em; }
.vx-page-blog #main-content article.group:hover h2,
.vx-page-blog #main-content article.group .text-amber-600,
.vx-page-blog #main-content article.group:hover .group-hover\:text-amber-700 { color: var(--vx-accent-text) !important; }
.vx-page-blog #main-content article.group i.text-amber-500 { color: var(--vx-accent-text) !important; }

/* Popüler rota hapları: driveonport "airport-chips" */
.vx-page-blog #main-content a.rounded-full.ring-1 {
  background: transparent !important; color: var(--vx-text) !important; box-shadow: inset 0 0 0 1px var(--vx-border-strong) !important; font-weight: 500 !important;
}
.vx-page-blog #main-content a.rounded-full.ring-1:hover { background: var(--vx-surface) !important; box-shadow: inset 0 0 0 1px var(--vx-text) !important; }
.vx-page-blog #main-content section h2.uppercase { color: var(--vx-muted) !important; letter-spacing: .06em; }

/* Bülten: alt zemin + çerçeve, beyaz alan, vurgu butonu; telefonda taşmasın */
.vx-page-blog #main-content > section.bg-gray-50 { border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }
.vx-page-blog #blogNewsletterForm { gap: 10px !important; }
.vx-page-blog #blogNewsletterForm input[type=email] {
  min-width: 0; height: 52px; background: #fff; border: 1px solid var(--vx-border) !important; border-radius: 12px !important; font-size: 16px;
}
.vx-page-blog #blogNewsletterForm input[type=email]:focus { border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .25) !important; }
.vx-page-blog #blogNewsletterForm button[type=submit] {
  height: 52px; padding: 0 22px !important; background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important;
  border-radius: 12px !important; box-shadow: none !important; transform: none !important; font-weight: 600 !important;
}
.vx-page-blog #blogNewsletterForm button[type=submit]:hover { background: var(--vx-accent-hover) !important; }

/* "Ele alacağımız konular": beyaz kart + kenar */
.vx-page-blog #main-content .grid > div.bg-gray-50.rounded-xl {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); box-shadow: none !important;
}
.vx-page-blog #main-content .grid > div.bg-gray-50.rounded-xl .bg-\[\#f9b442\] { background: var(--vx-accent) !important; }
.vx-page-blog #main-content .grid > div.bg-gray-50.rounded-xl h3 { font-size: 19px !important; }

/* =====================================================================
   Blog yazısı (.vx-page-blog-post): okunur makale sütunu
   ===================================================================== */
.vx-page-blog-post #main-content > article.bg-white { background: var(--vx-bg) !important; }
/* Başlık, kapak ve metin aynı sütunda (~72ch) */
.vx-page-blog-post #main-content > article .max-w-4xl { max-width: 800px !important; }
.vx-page-blog-post #main-content > article > header { padding: 36px 0 52px !important; }
@media (min-width: 1024px) { .vx-page-blog-post #main-content > article > header { padding: 48px 0 72px !important; } }
.vx-page-blog-post #main-content > article > header h1 {
  color: #fff !important; font-size: clamp(28px, 3.8vw, 44px) !important; line-height: 1.1 !important; text-wrap: balance;
}
.vx-page-blog-post #main-content > article > header .text-black\/85 { color: rgba(255, 255, 255, .78) !important; font-weight: 500; font-size: 13px; }
.vx-page-blog-post #main-content > article > header .text-black\/85 i { color: var(--vx-accent) !important; }
.vx-page-blog-post #main-content > article > header .text-black\/40 { color: rgba(255, 255, 255, .35) !important; }

/* Kapak görseli: koyu başlığın altına hafifçe biner, gölgesiz */
.vx-page-blog-post #main-content > article > header + div { margin-top: -40px !important; padding-top: 0 !important; position: relative; z-index: 1; }
.vx-page-blog-post #main-content > article figure.aspect-\[16\/9\] { box-shadow: none !important; border: 1px solid var(--vx-border) !important; border-radius: 20px !important; background: var(--vx-bg-alt) !important; }

/* Kapakla özet arasındaki boşluk daha kısa */
.vx-page-blog-post #main-content > article > div.py-12 { padding-top: 36px !important; }

/* Özet kutusu: driveonport "lp-alt" (beyaz, ince kenar, solda vurgu çizgisi) */
.vx-page-blog-post #main-content .bg-amber-50\/60.border-l-4 {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-left: 4px solid var(--vx-accent) !important;
  border-radius: 14px !important; box-shadow: none !important; color: #2b2a27 !important;
  font-size: clamp(17px, 1.6vw, 19px) !important; line-height: 1.6 !important; font-weight: 500 !important; padding: 20px 22px !important;
}

/* Makale gövdesi: koyu metin, rahat satır aralığı */
.vx-page-blog-post .blog-content { color: #2b2a27 !important; font-size: 18px !important; line-height: 1.75 !important; }
.vx-page-blog-post .blog-content p, .vx-page-blog-post .blog-content li { color: #2b2a27; }
.vx-page-blog-post .blog-content p { margin-bottom: 0; }
.vx-page-blog-post .blog-content strong, .vx-page-blog-post .blog-content b { color: var(--vx-text); font-weight: 650; }
.vx-page-blog-post .blog-content > h2 {
  font-size: clamp(24px, 2.6vw, 30px) !important; line-height: 1.18 !important; color: var(--vx-text) !important;
  border-bottom: 0 !important; padding-bottom: 0 !important; margin-top: 2.6rem !important; margin-bottom: 0 !important; text-wrap: balance;
}
.vx-page-blog-post .blog-content > h3 {
  font-size: clamp(19px, 2vw, 22px) !important; line-height: 1.3 !important; color: var(--vx-text) !important; margin-top: 2rem !important; margin-bottom: 0 !important;
}
.vx-page-blog-post .blog-content > h2 + *, .vx-page-blog-post .blog-content > h3 + * { margin-top: .75rem !important; }
.vx-page-blog-post .blog-content ul, .vx-page-blog-post .blog-content ol { padding-left: 1.4em; margin-bottom: 0; }
.vx-page-blog-post .blog-content li { margin-bottom: .45rem; padding-left: .2em; }
.vx-page-blog-post .blog-content li::marker { color: var(--vx-muted); }
.vx-page-blog-post .blog-content ol > li::marker { font-weight: 600; color: var(--vx-text); }
.vx-page-blog-post .blog-content a {
  color: var(--vx-accent-text) !important; text-decoration: underline; text-decoration-color: rgba(169, 107, 0, .4); text-underline-offset: 3px; font-weight: 500;
}
.vx-page-blog-post .blog-content a:hover { color: var(--vx-text) !important; text-decoration-color: currentColor; }
.vx-page-blog-post .blog-content hr { border: 0; border-top: 1px solid var(--vx-border); margin-top: 2.5rem; margin-bottom: 2.5rem; }
.vx-page-blog-post .blog-content blockquote { border-left: 4px solid var(--vx-accent); color: #45433e; font-style: normal; }

/* Tablolar: beyaz kart, ince çizgiler, başlık satırı alt zemin */
.vx-page-blog-post .blog-content figure.table { display: block; width: 100%; margin: 0; overflow-x: auto; }
.vx-page-blog-post .blog-content table {
  width: 100%; margin: 0 !important; background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15.5px; line-height: 1.5;
}
.vx-page-blog-post .blog-content table th, .vx-page-blog-post .blog-content table td {
  border: 0 !important; border-top: 1px solid var(--vx-border) !important; padding: 12px 16px !important; vertical-align: top; color: #2b2a27;
}
.vx-page-blog-post .blog-content table th + th, .vx-page-blog-post .blog-content table td + td { border-left: 1px solid var(--vx-border) !important; }
.vx-page-blog-post .blog-content table thead th, .vx-page-blog-post .blog-content table tr:first-child > th {
  border-top: 0 !important; background: var(--vx-bg-alt) !important; color: var(--vx-text); font-weight: 600; font-size: 14px;
}
.vx-page-blog-post .blog-content table tbody tr:first-child > td { border-top: 1px solid var(--vx-border) !important; }
.vx-page-blog-post .blog-content table thead + tbody tr:first-child > td { border-top: 1px solid var(--vx-border) !important; }
.vx-page-blog-post .blog-content table td:first-child { font-weight: 600; color: var(--vx-text); }
@media (max-width: 639px) {
  .vx-page-blog-post .blog-content { font-size: 17px !important; }
  .vx-page-blog-post .blog-content table { font-size: 14px; }
  .vx-page-blog-post .blog-content table th, .vx-page-blog-post .blog-content table td { padding: 10px 12px !important; }
}

/* Yazı altı bloklar: üst çizgiler nötr */
.vx-page-blog-post #main-content > article .border-gray-200 { border-color: var(--vx-border) !important; }
.vx-page-blog-post #main-content > article .mt-12 > h2 { font-size: 18px !important; font-stretch: 112%; }
/* Popüler rota hapları: turuncu yerine beyaz hap */
.vx-page-blog-post #main-content a.rounded-full.bg-amber-50 {
  background: var(--vx-surface) !important; border-color: var(--vx-border) !important; color: var(--vx-text) !important; font-weight: 500 !important;
}
.vx-page-blog-post #main-content a.rounded-full.bg-amber-50:hover { border-color: var(--vx-text) !important; }
.vx-page-blog-post #main-content a.rounded-full.bg-amber-50 i { color: var(--vx-accent-text) !important; }
.vx-page-blog-post #main-content a.rounded-full.bg-gray-900 i { color: var(--vx-accent) !important; }
.vx-page-blog-post #main-content a.rounded-full.bg-gray-900:hover i { color: var(--vx-accent-ink) !important; }

/* Yazı içi CTA: lacivert degrade yerine driveonport koyu blok (ızgara dokulu) */
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 {
  background-color: var(--vx-dark) !important; box-shadow: none !important; border-radius: 24px !important;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 > .blur-3xl { background: transparent !important; } /* dekoratif leke */
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 span.rounded-full {
  background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16); color: var(--vx-accent) !important;
}
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 h3 { font-size: clamp(22px, 2.4vw, 28px) !important; font-stretch: 118%; letter-spacing: -.02em; }
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 p { color: rgba(255, 255, 255, .78) !important; margin-left: 0 !important; font-size: 15px !important; }
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 a.rounded-xl {
  background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 600 !important;
}
.vx-page-blog-post #main-content > article .bg-gradient-to-br.from-gray-900 a.rounded-xl:hover { background: var(--vx-accent-hover) !important; }

/* Paylaş butonları: marka renkleri yerine nötr daire, hover'da siyah */
.vx-page-blog-post #main-content a[href*="sharer"], .vx-page-blog-post #main-content a[href*="twitter.com/intent"],
.vx-page-blog-post #main-content a[href*="shareArticle"], .vx-page-blog-post #main-content a[href^="https://wa.me/?"] {
  background: var(--vx-surface) !important; color: var(--vx-text) !important; border: 1px solid var(--vx-border); box-shadow: none !important; opacity: 1 !important;
}
.vx-page-blog-post #main-content a[href*="sharer"]:hover, .vx-page-blog-post #main-content a[href*="twitter.com/intent"]:hover,
.vx-page-blog-post #main-content a[href*="shareArticle"]:hover, .vx-page-blog-post #main-content a[href^="https://wa.me/?"]:hover {
  background: var(--vx-ink) !important; color: #fff !important; border-color: var(--vx-ink);
}
.vx-page-blog-post #main-content > article i.fa-share-nodes { color: var(--vx-accent-text) !important; }

/* İlgili yazılar: kartlar, başlık hizası, "tümü" butonu siyah hap */
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] { border-top: 1px solid var(--vx-border) !important; border-bottom: 1px solid var(--vx-border); }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] .max-w-2xl { margin-left: 0 !important; }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article {
  border-color: var(--vx-border) !important; box-shadow: none !important; border-radius: 20px !important;
}
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article .bg-gradient-to-br { background: var(--vx-bg-alt) !important; }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article .text-amber-600,
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article:hover h3,
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article:hover .group-hover\:text-amber-700 { color: var(--vx-accent-text) !important; }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] article i.text-amber-500 { color: var(--vx-accent-text) !important; }
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] a.rounded-full.bg-white {
  background: var(--vx-ink) !important; color: #fff !important; border-color: var(--vx-ink) !important; box-shadow: none !important; font-weight: 600 !important;
}
.vx-page-blog-post #main-content > section[aria-labelledby="related-posts-heading"] a.rounded-full.bg-white:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-color: var(--vx-accent) !important; }

/* =====================================================================
   Yardım (.vx-page-help)
   ===================================================================== */
.vx-page-help #main-content > header { padding: 48px 0 56px !important; }
@media (min-width: 1024px) { .vx-page-help #main-content > header { padding: 72px 0 80px !important; } }
.vx-page-help #main-content > header span.rounded-full {
  background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16) !important; color: var(--vx-accent) !important;
}
.vx-page-help #main-content > header h1 { color: #fff !important; font-size: clamp(32px, 4.6vw, 54px) !important; line-height: 1.06 !important; }
.vx-page-help #main-content > header p { color: rgba(255, 255, 255, .82) !important; }
.vx-page-help #faq-search-input {
  height: 56px; border-radius: 12px !important; border: 1px solid transparent; box-shadow: 0 30px 60px rgba(0, 0, 0, .25) !important; font-size: 16px; color: var(--vx-text);
}
.vx-page-help #faq-search-input:focus { box-shadow: 0 0 0 3px rgba(246, 177, 44, .45) !important; }
.vx-page-help #main-content > header i.fa-magnifying-glass { color: var(--vx-muted) !important; }

/* Konu hapları: beyaz hap; seçili olan siyah (JS bg-trf-orange sınıfını değiştiriyor) */
.vx-page-help #category-pills .cat-pill {
  border-radius: 999px !important; background: var(--vx-surface) !important; color: var(--vx-text) !important;
  border: 1px solid var(--vx-border) !important; box-shadow: none !important; font-weight: 600 !important;
}
.vx-page-help #category-pills .cat-pill:hover { border-color: var(--vx-border-strong) !important; }
.vx-page-help #category-pills .cat-pill.bg-trf-orange { background: var(--vx-ink) !important; color: #fff !important; border-color: var(--vx-ink) !important; }
.vx-page-help #category-pills .cat-pill.bg-trf-orange i { color: var(--vx-accent) !important; }

/* Kategori başlığı ikon kutusu */
.vx-page-help .faq-category-block .bg-trf-orange\/10 {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); color: var(--vx-accent-text) !important; border-radius: 12px !important;
}
/* SSS kartları: gölgesiz, ince kenar */
.vx-page-help .faq-item { border-color: var(--vx-border) !important; box-shadow: none !important; border-radius: 16px !important; }
.vx-page-help .faq-item:hover { border-color: var(--vx-border-strong) !important; }
.vx-page-help .faq-toggle { font-weight: 600 !important; }
.vx-page-help .faq-toggle:hover { color: var(--vx-text) !important; }
.vx-page-help .faq-toggle[aria-expanded="true"] .faq-chevron { background: var(--vx-ink) !important; color: #fff !important; }
.vx-page-help .faq-content { color: #45433e !important; border-color: var(--vx-border) !important; }
.vx-page-help #faq-no-results .bg-gray-200 { background: var(--vx-surface) !important; border: 1px solid var(--vx-border); }

/* "Cevabı bulamadınız mı?" bloğu: driveonport koyu CTA, sola yaslı */
.vx-page-help #faq-container ~ .bg-gradient-to-br {
  background-color: var(--vx-dark) !important; box-shadow: none !important; border-radius: 24px !important;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}
.vx-page-help #faq-container ~ .bg-gradient-to-br .max-w-3xl,
.vx-page-help #faq-container ~ .bg-gradient-to-br .max-w-xl { margin-left: 0 !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br .text-trf-orange { color: var(--vx-accent) !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br h3 { font-stretch: 118%; letter-spacing: -.02em; }
.vx-page-help #faq-container ~ .bg-gradient-to-br .text-gray-300 { color: rgba(255, 255, 255, .8) !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br a.rounded-xl { border-radius: 12px !important; box-shadow: none !important; font-weight: 600 !important; }
/* WhatsApp: yeşil zeminde beyaz yazı okunmuyordu (2.5:1) — beyaz buton, yeşil ikon */
.vx-page-help #faq-container ~ .bg-gradient-to-br a.bg-emerald-500 { background: #fff !important; color: var(--vx-text) !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br a.bg-emerald-500 i { color: #1f8a4c !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br a.bg-emerald-500:hover { background: var(--vx-bg) !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br a.bg-trf-orange { color: var(--vx-accent-ink) !important; }
.vx-page-help #faq-container ~ .bg-gradient-to-br a.bg-trf-orange:hover { background: var(--vx-accent-hover) !important; }

@media (max-width: 639px) {
  .vx-page-help #faq-container ~ .bg-gradient-to-br { padding: 28px 20px !important; }
  .vx-page-help #faq-container ~ .bg-gradient-to-br .flex-wrap { gap: 10px !important; }
  .vx-page-help #faq-container ~ .bg-gradient-to-br a.rounded-xl { width: 100%; justify-content: center; }
}
/* Faydalı bağlantılar: başlık okunur, haplar nötr */
.vx-page-help h4.text-gray-400 { color: var(--vx-muted) !important; }
.vx-page-help #faq-container ~ .mt-12 a.rounded-full { border-color: var(--vx-border) !important; color: var(--vx-text) !important; }
.vx-page-help #faq-container ~ .mt-12 a.rounded-full:hover { border-color: var(--vx-text) !important; }

/* =====================================================================
   Hakkımızda (.vx-page-about)
   ===================================================================== */
.vx-page-about #main-content > section:first-of-type { padding-top: 56px !important; padding-bottom: 64px !important; }
.vx-page-about #main-content > section:first-of-type span.rounded-full {
  background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16); color: var(--vx-accent) !important;
}
.vx-page-about #main-content > section:first-of-type h1 { color: #fff !important; font-size: clamp(30px, 4.4vw, 52px) !important; line-height: 1.06 !important; max-width: 22ch; text-wrap: balance; }
.vx-page-about #main-content > section:first-of-type p { color: rgba(255, 255, 255, .82) !important; margin-left: 0 !important; }
.vx-page-about #main-content > section:first-of-type .grid > div {
  background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; border-radius: 16px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vx-page-about #main-content > section:first-of-type .grid .text-amber-400 { color: var(--vx-accent) !important; font-weight: 800 !important; font-stretch: 112%; }
.vx-page-about #main-content > section:first-of-type .grid .text-gray-400 { color: rgba(255, 255, 255, .72) !important; }

/* Dar (4xl) bölümler de 6xl ile aynı sol çizgide; metin ~72ch */
.vx-page-about #main-content > section > .max-w-4xl { max-width: 72rem !important; }
.vx-page-about #main-content > section > .max-w-4xl p { max-width: 72ch; }
.vx-page-about #main-content > section > .max-w-4xl > .mt-8,
.vx-page-about #main-content > section > .max-w-4xl > .space-y-3,
.vx-page-about #main-content > section > .max-w-4xl > .flex.items-start { max-width: 900px; }
.vx-page-about #main-content > section .max-w-3xl { margin-left: 0 !important; }
/* space-y-5 tailwind derlemesinde yok: paragraflar yapışıktı */
.vx-page-about #main-content .space-y-5 > * + * { margin-top: 1.1rem; }
.vx-page-about #main-content > section .text-gray-700 { color: #2b2a27 !important; }
.vx-page-about #main-content > section > .max-w-4xl.space-y-5 > h2 + p { margin-top: .75rem; }
/* border-y derlemede yok: alt zeminli bölümlere çizgi */
.vx-page-about #main-content > section.border-y { border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }

/* Havalimanı kartları */
.vx-page-about #main-content a.group.bg-white { border-color: var(--vx-border) !important; border-radius: 20px !important; }
.vx-page-about #main-content a.group:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-about #main-content a.group:hover h3, .vx-page-about #main-content a.group:hover .group-hover\:text-amber-600 { color: var(--vx-accent-text) !important; }
.vx-page-about #main-content span.bg-amber-100 { background: var(--vx-ink) !important; color: var(--vx-accent) !important; }
.vx-page-about #main-content span.bg-sky-50 { background: var(--vx-bg-alt); border-color: var(--vx-border) !important; color: var(--vx-text); border-radius: 999px; }
/* Hizmet kartları: saydam yerine beyaz */
.vx-page-about #main-content a.group.rounded-2xl.border:not(.bg-white) { background: var(--vx-surface) !important; border-color: var(--vx-border) !important; }
.vx-page-about #main-content span.bg-gray-900 { background: var(--vx-ink) !important; color: var(--vx-accent) !important; }
/* Rezervasyon adımları: driveonport "ap-steps" (beyaz kart, vurgu daire) */
.vx-page-about #main-content ol > li.bg-gray-50 { background: var(--vx-surface) !important; border-color: var(--vx-border) !important; }
.vx-page-about #main-content ol > li span.bg-amber-500 { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; font-weight: 700 !important; }
/* Lisans kutusu: turuncu zemin yerine beyaz kart + vurgu çizgisi */
.vx-page-about #main-content .bg-amber-50.border-amber-200 {
  background: var(--vx-surface) !important; border-color: var(--vx-border) !important; border-left: 4px solid var(--vx-accent) !important; border-radius: 16px !important;
}
.vx-page-about #main-content .bg-amber-50.border-amber-200 > span.bg-amber-500 { background: var(--vx-ink) !important; color: var(--vx-accent) !important; border-radius: 12px !important; }
/* SSS (details) */
.vx-page-about #main-content details { border-color: var(--vx-border) !important; border-radius: 16px !important; }
.vx-page-about #main-content details[open] { border-color: var(--vx-border-strong) !important; }
.vx-page-about #main-content details summary { font-weight: 600 !important; }
.vx-page-about #main-content details summary i { color: var(--vx-muted) !important; }
.vx-page-about #main-content details p { color: #45433e !important; }
/* İletişim listesi ve buton */
.vx-page-about #main-content ul i.text-amber-500 { color: var(--vx-accent-text) !important; }
.vx-page-about #main-content a.bg-gray-900 { border-radius: 999px !important; box-shadow: none !important; }
.vx-page-about #main-content a.bg-gray-900:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
.vx-page-about #main-content table thead { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; }
.vx-page-about #main-content table .border-gray-100 { border-color: var(--vx-border) !important; }
.vx-page-about #main-content .overflow-x-auto.bg-white { border-color: var(--vx-border) !important; border-radius: 16px !important; }

/* =====================================================================
   İletişim (.vx-page-contact)
   ===================================================================== */
.vx-page-contact #main-content > section:first-of-type { padding-top: 56px !important; padding-bottom: 72px !important; }
.vx-page-contact #main-content > section:first-of-type h1 { font-size: clamp(32px, 4.4vw, 52px) !important; line-height: 1.06; }
.vx-page-contact #main-content > section:first-of-type .text-center > p { color: var(--vx-muted) !important; }
.vx-page-contact #main-content .bg-\[\#f9b442\].rounded-full { background: var(--vx-accent) !important; }
.vx-page-contact #main-content .space-y-6 a { color: #45433e !important; }
.vx-page-contact #main-content .space-y-6 a:hover { color: var(--vx-accent-text) !important; }
.vx-page-contact #main-content .border-gray-200 { border-color: var(--vx-border) !important; }
/* Form kartı: beyaz kart, alanlar ana sayfa arama çubuğuyla aynı */
.vx-page-contact #main-content div.bg-gray-50.rounded-2xl {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); box-shadow: none !important;
}
.vx-page-contact #contactForm label { color: var(--vx-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
.vx-page-contact #contactForm input, .vx-page-contact #contactForm textarea {
  background: #fff; border: 1px solid var(--vx-border) !important; border-radius: 12px !important; font-size: 16px; color: var(--vx-text);
}
.vx-page-contact #contactForm input { height: 56px; }
.vx-page-contact #contactForm input:focus, .vx-page-contact #contactForm textarea:focus {
  border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .25) !important;
}
.vx-page-contact #contactForm button[type=submit] {
  height: 56px; background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 12px !important;
  box-shadow: none !important; transform: none !important; font-weight: 600 !important;
}
.vx-page-contact #contactForm button[type=submit]:hover { background: var(--vx-accent-hover) !important; }
@media (max-width: 639px) { .vx-page-contact #main-content div.bg-gray-50.rounded-2xl { padding: 24px 18px !important; } }
/* Harita bölümü: alt zemin + çizgiler, kart gölgesiz */
.vx-page-contact #main-content > section.bg-gray-100 { border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }
.vx-page-contact #main-content > section.bg-gray-100 .shadow-lg { box-shadow: none !important; border: 1px solid var(--vx-border); }

/* =====================================================================
   Türkiye (.vx-page-turkey): koyu hero + ana sayfa formuyla aynı alanlar
   ===================================================================== */
.vx-page-turkey #main-content > div.relative:first-of-type > div { margin-bottom: 0 !important; padding-bottom: 48px; }
.vx-page-turkey #main-content > div.relative:first-of-type .lg\:w-1\/2:first-child { min-height: 0 !important; }
.vx-page-turkey #main-content > div.relative:first-of-type h1 { color: #fff !important; line-height: 1.06 !important; text-wrap: balance; }
.vx-page-turkey #main-content > div.relative:first-of-type .lg\:w-1\/2:first-child > p { color: rgba(255, 255, 255, .82) !important; }
.vx-page-turkey #turkeySearchForm { border-radius: 18px; padding: 20px !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); color: var(--vx-text); }
.vx-page-turkey #turkeySearchForm > div { gap: 14px !important; }
.vx-page-turkey #turkeySearchForm .form-group { min-width: 0; gap: 6px; }
.vx-page-turkey #turkeySearchForm .form-group label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--vx-muted);
}
.vx-page-turkey #turkeySearchForm .form-group label svg { color: var(--vx-accent); }
.vx-page-turkey #turkeySearchForm .form-group input, .vx-page-turkey #turkeySearchForm .form-group select,
.vx-page-turkey #turkeySearchForm .form-group input:valid:not(:placeholder-shown), .vx-page-turkey #turkeySearchForm .form-group select:valid:not(:placeholder-shown) {
  min-width: 0; height: 56px; padding-top: 0; padding-bottom: 0; border: 1px solid var(--vx-border); border-radius: 12px; font-family: inherit; font-size: 16px; color: var(--vx-text); background-color: #fff;
}
.vx-page-turkey #turkeySearchForm .form-group input:focus, .vx-page-turkey #turkeySearchForm .form-group select:focus {
  border-color: var(--vx-accent); box-shadow: 0 0 0 3px rgba(246, 177, 44, .25);
}
.vx-page-turkey #turkeySearchForm button[type=submit] {
  height: 56px; padding: 0 24px; background: var(--vx-accent); color: var(--vx-accent-ink); border-radius: 12px; box-shadow: none; transform: none; font-family: inherit; font-weight: 600;
}
.vx-page-turkey #turkeySearchForm .form-group input[type=date], .vx-page-turkey #turkeySearchForm .form-group input[type=time] { padding-left: 12px; padding-right: 10px; }
.vx-page-turkey #turkeySearchForm button[type=submit]:hover { background: var(--vx-accent-hover); box-shadow: none; transform: none; }
.vx-page-turkey #main-content > div.relative:first-of-type img.shadow-2xl { box-shadow: 0 30px 60px rgba(0, 0, 0, .35) !important; border: 1px solid rgba(255, 255, 255, .08); }
/* Telefonda başlık, metin ve form aynı 16px kenarda; tarih/saat alanları sığsın */
@media (max-width: 639px) {
  .vx-page-turkey #main-content > div.relative:first-of-type h1 { padding-left: 0 !important; padding-right: 0 !important; margin-top: 16px !important; }
  .vx-page-turkey #main-content > div.relative:first-of-type .lg\:w-1\/2:first-child > p { padding-left: 0 !important; padding-right: 0 !important; }
  .vx-page-turkey #turkeySearchForm { padding: 16px !important; }
  .vx-page-turkey #main-content > div.relative:first-of-type .z-10.p-4 { padding-left: 0; padding-right: 0; }
  .vx-page-turkey #turkeySearchForm div[style*="grid-template-columns"] { gap: 10px !important; }
}
@media (min-width: 1024px) {
  .vx-page-turkey #main-content > div.relative:first-of-type h1 { margin-top: 56px !important; }
  .vx-page-turkey #main-content > div.relative:first-of-type .lg\:w-1\/2:last-child { margin-top: 64px !important; }
}
/* Popüler destinasyonlar: alt zemin + çizgi, kartlar gölgesiz */
.vx-page-turkey #main-content > section.bg-gray-50 { border-top: 1px solid var(--vx-border); border-bottom: 1px solid var(--vx-border); }
.vx-page-turkey #main-content > section.bg-gray-50 a.group {
  box-shadow: none !important; border: 1px solid var(--vx-border) !important; border-radius: 20px !important; transform: none;
}
.vx-page-turkey #main-content > section.bg-gray-50 a.group:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-turkey #main-content > section.bg-gray-50 a.group:hover h3 { color: var(--vx-accent-text) !important; }
.vx-page-turkey #main-content span.bg-amber-100 { background: var(--vx-bg-alt) !important; color: var(--vx-text) !important; border-radius: 8px !important; padding: 3px 8px !important; font-weight: 600 !important; text-align: center; }
/* "Neden biz" ikon daireleri */
.vx-page-turkey #main-content .bg-\[\#f9b442\].rounded-full { background: var(--vx-accent) !important; }
/* Blog güzergah kartları: gri kutu yerine beyaz kart */
.vx-page-turkey #blog .grid > .bg-gray-50 {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border); border-radius: 20px !important; box-shadow: none !important;
}
.vx-page-turkey #blog .grid > a.bg-gray-50:hover { border-color: var(--vx-border-strong); box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-turkey #blog .grid > a.bg-gray-50:hover h4 { color: var(--vx-accent-text) !important; }

/* =====================================================================
   Gizlilik ve Koşullar (.vx-page-privacy, .vx-page-terms): okunur yasal metin
   ===================================================================== */
.vx-page-privacy #main-content > section .max-w-4xl,
.vx-page-terms #main-content > section .max-w-4xl { max-width: 800px !important; }
.vx-page-privacy #main-content > section:first-of-type,
.vx-page-terms #main-content > section:first-of-type { padding-top: 48px !important; }
.vx-page-privacy #main-content .prose, .vx-page-terms #main-content .prose { color: #2b2a27 !important; font-size: 17px; line-height: 1.7; }
.vx-page-privacy #main-content .prose h1, .vx-page-terms #main-content .prose h1 {
  font-size: clamp(30px, 4.4vw, 48px) !important; line-height: 1.08 !important; margin-bottom: 12px !important; color: var(--vx-text) !important;
}
.vx-page-privacy #main-content .prose h1 + p, .vx-page-terms #main-content .prose h1 + p { font-size: 15px !important; color: var(--vx-muted) !important; margin-bottom: 28px !important; }
.vx-page-privacy #main-content .prose h2, .vx-page-terms #main-content .prose h2 {
  font-size: clamp(21px, 2.2vw, 24px) !important; line-height: 1.25 !important; margin-top: 2.4rem !important; margin-bottom: .6rem !important; color: var(--vx-text) !important;
}
.vx-page-privacy #main-content .prose li::marker, .vx-page-terms #main-content .prose li::marker { color: var(--vx-muted); }
.vx-page-privacy #main-content .prose strong, .vx-page-terms #main-content .prose strong { color: var(--vx-text); font-weight: 650; }
.vx-page-privacy #main-content .prose a, .vx-page-terms #main-content .prose a {
  color: var(--vx-accent-text) !important; text-decoration: underline; text-decoration-color: rgba(169, 107, 0, .4); text-underline-offset: 3px;
}
.vx-page-privacy #main-content .prose i.text-amber-500, .vx-page-terms #main-content .prose i.text-amber-500 { color: var(--vx-accent-text) !important; width: 1.1em; text-align: center; }

/* =====================================================================
   404 (.vx-page-404) — NOT: 404 sayfası layout.php kullanmıyor; bu kurallar
   ancak 404 görünümüne tema.css bağlantısı ve body sınıfı eklenirse çalışır.
   ===================================================================== */
.vx-page-404.bg-gray-50 { background: var(--vx-bg) !important; } /* body'deki bg-gray-50 tema'da alt zemine dönüyordu */
.vx-page-404 > header a { white-space: nowrap; }
.vx-page-404 > header { background: rgba(12, 12, 13, .97) !important; box-shadow: none !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vx-page-404 > header a.bg-yellow-400 { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 10px !important; font-weight: 600 !important; }
.vx-page-404 > header a.bg-yellow-400:hover { background: var(--vx-accent-hover) !important; }
.vx-page-404 main > section:first-child { padding-top: 72px; padding-bottom: 80px; }
.vx-page-404 .gradient-number {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--vx-accent-text);
  font-stretch: 125%; font-weight: 800 !important; letter-spacing: -.03em;
}
.vx-page-404 main h1 { font-size: clamp(28px, 4vw, 44px) !important; line-height: 1.1; color: var(--vx-text) !important; }
.vx-page-404 main a.bg-yellow-400 {
  background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 600 !important; font-size: 16px !important;
}
.vx-page-404 main a.bg-yellow-400:hover { background: var(--vx-accent-hover) !important; }
.vx-page-404 main a.border-2 {
  background: var(--vx-ink); color: #fff !important; border: 0 !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 600 !important;
}
.vx-page-404 main a.border-2:hover { background: var(--vx-accent); color: var(--vx-accent-ink) !important; }
.vx-page-404 main > section.bg-white { background: var(--vx-bg-alt) !important; border-top: 1px solid var(--vx-border) !important; border-bottom: 1px solid var(--vx-border); }
.vx-page-404 main > section.bg-white h2 { color: var(--vx-text) !important; font-stretch: 112%; }
.vx-page-404 main .card-route { background: var(--vx-surface) !important; border-color: var(--vx-border) !important; border-radius: 16px !important; color: var(--vx-text) !important; }
.vx-page-404 main .card-route:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; color: var(--vx-accent-text) !important; }
.vx-page-404 main i.text-yellow-500 { color: var(--vx-accent-text) !important; }
.vx-page-404 main > section.bg-gray-50 { background: var(--vx-bg) !important; border-top: 0 !important; }
.vx-page-404 main > section.bg-gray-50 h2 { color: var(--vx-muted) !important; font-stretch: 100%; }
.vx-page-404 main a.rounded-full.bg-white { border-color: var(--vx-border) !important; color: var(--vx-text) !important; }
.vx-page-404 main a.rounded-full.bg-white:hover { border-color: var(--vx-text) !important; color: var(--vx-text) !important; }
.vx-page-404 > footer a:hover { color: var(--vx-accent) !important; }

/* =====================================================================
   Arama ve rezervasyon sayfaları
   ===================================================================== */
/* =====================================================================
   Arama sonuçları (search), saatlik araç seçimi (hourly-search) ve
   rezervasyon formu (booking-form) - driveonport görünümü ekleri
   ===================================================================== */

/* Sayfa zemini: krem (bg-gray-100/50 -> alt ton yerine ana zemin; altta şerit kalmasın) */
.vx-page-search #main-content > div.bg-gray-100,
.vx-page-hourly-search #main-content > div.bg-gray-50,
.vx-page-booking-form #main-content > div.bg-gray-50 { background-color: var(--vx-bg) !important; }

/* Yerel renk değişkenleri: okunur yeşil */
.vx-page-search, .vx-page-hourly-search, .vx-page-booking-form { --vx-ok: #15803d; --vx-ok-strong: #166534; --vx-surface-2: #f2f1ec; --vx-panel: #e9e8e3; }

/* ---------------------------------------------------------------------
   ARAMA SONUÇLARI (search)
   --------------------------------------------------------------------- */

/* Harita: gri panel zemini, gri tonlu karolar, ince kenar */
.vx-page-search #map-wrapper { background-color: var(--vx-panel) !important; border-color: var(--vx-border) !important; box-shadow: none !important; }
.vx-page-search #map-wrapper .leaflet-container { background: var(--vx-panel) !important; }
.vx-page-search #map-wrapper .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.03); }
@media (min-width: 768px) { .vx-page-search #map-wrapper { border-radius: 20px !important; } }
/* Harita iğneleri ve rota çizgisi: siyah / sarı */
.vx-page-search #map-wrapper .route-pin-a { background: var(--vx-ink); color: #fff; }
.vx-page-search #map-wrapper .route-pin-b { background: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-page-search #map-wrapper path.leaflet-interactive { stroke: var(--vx-ink); stroke-opacity: .85; }
/* Harita üstü rozet: A/B renkleri temaya */
.vx-page-search #map-wrapper .text-emerald-600 { color: var(--vx-ink) !important; }
.vx-page-search #map-wrapper .bg-emerald-500 { background-color: var(--vx-ink) !important; }
.vx-page-search #map-wrapper .text-amber-600 { color: var(--vx-accent-text) !important; }
.vx-page-search #map-wrapper .bg-amber-500 { background-color: var(--vx-accent) !important; }
.vx-page-search #map-wrapper .shadow-md { box-shadow: 0 2px 8px rgba(20, 20, 20, .12) !important; border-color: var(--vx-border) !important; }

/* Araç listesi paneli: mobilde beyaz alt sayfa, masaüstünde şeffaf (kartlar krem zeminde) */
.vx-page-search .lg\:w-7\/12 > div { border-color: var(--vx-border) !important; box-shadow: 0 -12px 30px rgba(20, 20, 20, .10) !important; }
@media (min-width: 768px) {
  .vx-page-search .lg\:w-7\/12 > div { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 0 0 !important; min-height: 0 !important; }
}
.vx-page-search .lg\:w-7\/12 .border-gray-100 { border-color: var(--vx-border) !important; }

/* Araç kartı: beyaz, 1px kenar, 20px köşe, gölge yok; seçili kart siyah çerçeve */
.vx-page-search .vehicle-card {
  background: var(--vx-surface) !important; border: 1px solid var(--vx-border) !important; border-radius: 20px !important; box-shadow: none !important;
}
.vx-page-search .vehicle-card:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-search .vehicle-card.is-selected {
  background: var(--vx-surface) !important; border-color: var(--vx-ink) !important; box-shadow: inset 0 0 0 1px var(--vx-ink) !important;
}
.vx-page-search .vehicle-card.is-selected:hover { box-shadow: inset 0 0 0 1px var(--vx-ink), 0 10px 30px rgba(20, 20, 20, .08) !important; }
.vx-page-search .vehicle-card h3 { color: var(--vx-text) !important; }
@media (max-width: 639px) { .vx-page-search .vehicle-card h3 { font-stretch: 100%; } }
/* Fiyat ve "Toplam fiyat" notu */
.vx-page-search .vehicle-card .card-final-price { font-weight: 700 !important; color: var(--vx-text) !important; }
.vx-page-search .vehicle-card .text-gray-400 { color: var(--vx-muted) !important; }
/* Rozetler: hap biçimi, tema renkleri (yeşil / sarı / siyah) */
.vx-page-search .vehicle-card h3 ~ span { border-radius: 999px !important; padding: 3px 9px !important; letter-spacing: .04em; white-space: nowrap; }
.vx-page-search .vehicle-card h3 ~ span.bg-emerald-50 { background: rgba(31, 138, 76, .12) !important; color: var(--vx-ok-strong) !important; }
.vx-page-search .vehicle-card h3 ~ span.bg-rose-50 { background: rgba(246, 177, 44, .28) !important; color: var(--vx-text) !important; }
.vx-page-search .vehicle-card h3 ~ span.bg-slate-100 { background: var(--vx-ink) !important; color: #fff !important; }
/* Dar ekranda rozet iki satıra inebilir: hap yerine 8px köşe; fotoğraf biraz daralır, metne yer kalır */
@media (max-width: 639px) {
  .vx-page-search .vehicle-card h3 ~ span { white-space: normal; border-radius: 8px !important; padding: 2px 7px !important; }
}
@media (max-width: 399px) {
  .vx-page-search .vehicle-card .w-24 { width: 80px !important; }
  .vx-page-search .vehicle-card h3 ~ span { letter-spacing: 0; padding: 2px 6px !important; gap: 3px !important; }
  .vx-page-search .vehicle-card .min-w-0 > div:last-child { flex-wrap: wrap; row-gap: 2px; }
  .vx-page-search .vehicle-card .min-w-0 > div:last-child > span { white-space: nowrap; }
}

/* "Devam Et" butonları: sarı, koyu yazı, gölgesiz */
.vx-page-search .vehicle-card button.bg-trf-orange,
.vx-page-search #desktop-continue-btn,
.vx-page-search #sticky-bar-btn {
  background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; box-shadow: none !important; font-weight: 600 !important;
}
.vx-page-search #desktop-continue-btn, .vx-page-search #sticky-bar-btn { border-radius: 12px !important; font-weight: 700 !important; }
.vx-page-search .vehicle-card button.bg-trf-orange:hover,
.vx-page-search #desktop-continue-btn:hover,
.vx-page-search #sticky-bar-btn:hover { background: var(--vx-accent-hover) !important; }

/* Araç fotoğrafları: koyu fotoğrafın boş kenarları koyu, köşeler yuvarlak; sonsuz "yükleniyor" parıltısı kapalı */
.vx-page-search .vehicle-card img,
.vx-page-hourly-search .hs-card img,
.vx-page-booking-form .bk-vehicle img { background: #070707 !important; animation: none !important; border-radius: 10px; }

/* Sağdaki özet kartı: gölgesiz, rozet hap */
.vx-page-search .lg\:w-5\/12 > .bg-white { box-shadow: none !important; border-color: var(--vx-border) !important; }
.vx-page-search .lg\:w-5\/12 > .bg-white .border-gray-100 { border-color: var(--vx-border) !important; }
.vx-page-search .lg\:w-5\/12 > .bg-white .bg-emerald-50 { border-radius: 999px !important; padding: 3px 10px !important; background: rgba(31, 138, 76, .12) !important; color: var(--vx-ok-strong) !important; }
.vx-page-search .lg\:w-5\/12 > .bg-white .text-gray-400 { color: var(--vx-muted) !important; }

/* Mobil alt çubuk: ince kenar, yumuşak gölge */
.vx-page-search #mobile-sticky-bar { border-color: var(--vx-border) !important; box-shadow: 0 -10px 30px rgba(20, 20, 20, .10) !important; }

/* Araç bilgi penceresi: üst bar ve alt çubuğun üstünde açılsın; geniş ekranda ortalansın
   (eski hali başlığı ve kapat düğmesini üst barın altında bırakıyordu) */
.vx-page-search #vehicle-details-modal { z-index: 1000001 !important; }
@media (min-width: 640px) {
  .vx-page-search #vehicle-details-modal > div { display: flex !important; align-items: center !important; justify-content: center !important; padding: 32px 16px !important; }
  .vx-page-search #vehicle-details-modal .align-bottom { margin: 0 !important; }
}
/* Araç bilgi penceresi: "Kapat" siyah hap */
.vx-page-search #vehicle-details-modal .bg-gray-900 { border-radius: 999px !important; background: var(--vx-ink) !important; }
.vx-page-search #vehicle-details-modal .shadow-2xl { box-shadow: 0 30px 60px rgba(0, 0, 0, .25) !important; }

/* ---------------------------------------------------------------------
   ADIM ÇUBUĞU (hourly-search + booking-form): driveonport steps-bar
   --------------------------------------------------------------------- */
.vx-page-hourly-search .bk-step, .vx-page-booking-form .bk-step { color: var(--vx-text) !important; font-weight: 600 !important; }
.vx-page-hourly-search .bk-step.is-todo, .vx-page-booking-form .bk-step.is-todo { color: var(--vx-muted) !important; }
/* tamamlanan adım: yeşil daire */
.vx-page-hourly-search .bk-dot, .vx-page-booking-form .bk-dot { background: #1f8a4c !important; color: #fff !important; border: 1px solid #1f8a4c; font-weight: 700 !important; }
/* geçerli adım: siyah daire */
.vx-page-hourly-search .bk-step.is-current .bk-dot, .vx-page-booking-form .bk-step.is-current .bk-dot { background: var(--vx-ink) !important; border-color: var(--vx-ink); color: #fff !important; box-shadow: none !important; }
/* sıradaki adım: boş daire */
.vx-page-hourly-search .bk-step.is-todo .bk-dot, .vx-page-booking-form .bk-step.is-todo .bk-dot { background: transparent !important; border-color: var(--vx-border-strong); color: var(--vx-muted) !important; }
.vx-page-hourly-search .bk-line, .vx-page-booking-form .bk-line { height: 1px !important; background: var(--vx-border-strong) !important; }

/* ---------------------------------------------------------------------
   SAATLİK ARAÇ SEÇİMİ (hourly-search)
   --------------------------------------------------------------------- */
/* Özet şeridi: lacivert degrade yerine koyu düz zemin */
.vx-page-hourly-search .hs-summary { background: var(--vx-dark) !important; color: #fff; border-radius: 20px; }
.vx-page-hourly-search .hs-k { color: rgba(255, 255, 255, .72) !important; }
.vx-page-hourly-search .hs-v { font-weight: 700 !important; color: #fff; }
/* Paket seçimi: beyaz zemin üstünde beyaz yazı görünmüyordu -> koyu yazı */
.vx-page-hourly-search .hs-summary select {
  color: var(--vx-text) !important; background-color: #fff !important; border: 1px solid var(--vx-border) !important;
  border-radius: 12px !important; height: 46px !important; font-weight: 600 !important; padding: 0 12px !important;
}
.vx-page-hourly-search .hs-summary select:focus { outline: none; box-shadow: 0 0 0 3px rgba(246, 177, 44, .45) !important; }
/* Mobilde özet daha kısa: tarih/saat/yolcu yan yana */
@media (max-width: 767px) {
  .vx-page-hourly-search .hs-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 10px !important; }
  .vx-page-hourly-search .hs-summary > div:first-of-type,
  .vx-page-hourly-search .hs-summary > div:last-child { grid-column: 1 / -1; }
}
/* Araç kartları */
.vx-page-hourly-search .hs-card { border-color: var(--vx-border) !important; border-radius: 20px !important; transition: border-color .15s, box-shadow .15s; }
.vx-page-hourly-search .hs-card:hover { border-color: var(--vx-border-strong) !important; box-shadow: 0 10px 30px rgba(20, 20, 20, .08); }
.vx-page-hourly-search .hs-name { font-weight: 600 !important; font-stretch: 112%; letter-spacing: -.01em; color: var(--vx-text) !important; font-size: 19px !important; }
.vx-page-hourly-search .hs-meta { color: var(--vx-muted) !important; }
.vx-page-hourly-search .hs-meta i { color: var(--vx-muted) !important; }
.vx-page-hourly-search .hs-price { font-weight: 700 !important; color: var(--vx-text) !important; letter-spacing: -.01em; font-size: 28px !important; }
.vx-page-hourly-search .hs-price small { color: var(--vx-muted) !important; font-weight: 500 !important; }
/* "Seç" butonu: driveonport sarı buton */
.vx-page-hourly-search .hs-btn { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; font-weight: 600 !important; border-radius: 12px !important; min-width: 128px; text-align: center; }
.vx-page-hourly-search .hs-btn:hover { background: var(--vx-accent-hover) !important; }
/* Sonuç yok kutusu */
.vx-page-hourly-search .hs-empty { background: #fff !important; border: 1px solid var(--vx-border) !important; border-left: 4px solid var(--vx-accent) !important; border-radius: 14px !important; color: var(--vx-text); }

/* ---------------------------------------------------------------------
   REZERVASYON FORMU (booking-form)
   --------------------------------------------------------------------- */
/* Özet kartı: ince kenar, gölgesiz; başlık koyu düz */
.vx-page-booking-form .bk-card { border: 1px solid var(--vx-border) !important; box-shadow: none !important; border-radius: 20px !important; }
@media (min-width: 1024px) { .vx-page-booking-form .bk-card { top: 96px !important; } }
.vx-page-booking-form .bk-card-head { background: var(--vx-dark) !important; }
.vx-page-booking-form .bk-card-head h2 { font-weight: 600 !important; font-stretch: 112%; color: #fff; }
.vx-page-booking-form .bk-chip-dark { background: rgba(246, 177, 44, .18) !important; color: var(--vx-accent) !important; }
/* Güzergâh: siyah halka (başlangıç), sarı dolu (varış) */
.vx-page-booking-form .bk-route::before { background: repeating-linear-gradient(var(--vx-border-strong) 0 5px, transparent 5px 9px) !important; }
.vx-page-booking-form .bk-stop::before { border-color: var(--vx-ink) !important; background: #fff !important; }
.vx-page-booking-form .bk-stop.is-end::before { border-color: var(--vx-ink) !important; background: var(--vx-accent) !important; }
.vx-page-booking-form .bk-label { color: var(--vx-muted) !important; }
.vx-page-booking-form .bk-value { color: var(--vx-text) !important; }
/* Tarih/saat/kişi kutucukları ve araç satırı */
.vx-page-booking-form .bk-tile { background: var(--vx-bg) !important; border-color: var(--vx-border) !important; }
.vx-page-booking-form .bk-tile i { color: var(--vx-muted) !important; }
.vx-page-booking-form .bk-vehicle { background: var(--vx-bg) !important; border-color: var(--vx-border) !important; }
.vx-page-booking-form .bk-vehicle-meta, .vx-page-booking-form .bk-vehicle-meta i { color: var(--vx-muted) !important; }
/* Fiyat satırları ve toplam */
.vx-page-booking-form .bk-price { border-top-color: var(--vx-border-strong) !important; }
.vx-page-booking-form .bk-row { color: var(--vx-muted) !important; }
.vx-page-booking-form .bk-row strong { color: var(--vx-text) !important; }
.vx-page-booking-form .bk-row .bk-free,
.vx-page-booking-form .bk-row strong[style*="059669"],
.vx-page-booking-form .bk-row strong[style*="5, 150, 105"] { color: var(--vx-ok) !important; }
.vx-page-booking-form .bk-total { background: var(--vx-ink) !important; }
.vx-page-booking-form .bk-total span:first-child { color: rgba(255, 255, 255, .75) !important; }
.vx-page-booking-form .bk-total span:last-child { color: var(--vx-accent) !important; font-weight: 700 !important; }
.vx-page-booking-form .bk-trust { color: var(--vx-muted) !important; }
.vx-page-booking-form .bk-trust i { color: #1f8a4c !important; }

/* Form kartı: gölgesiz, ince kenar */
.vx-page-booking-form .lg\:col-span-2 > .bg-white { border: 1px solid var(--vx-border) !important; box-shadow: none !important; }
.vx-page-booking-form #bookingForm .text-gray-700 { color: var(--vx-text) !important; }
.vx-page-booking-form #bookingForm .text-gray-400 { color: var(--vx-muted) !important; }
.vx-page-booking-form #bookingForm label.block { font-weight: 600 !important; }
/* Giriş alanları: ana sayfa arama çubuğu gibi (beyaz, 1px kenar, 12px köşe) */
.vx-page-booking-form #bookingForm input[type=text],
.vx-page-booking-form #bookingForm input[type=email],
.vx-page-booking-form #bookingForm input[type=tel],
.vx-page-booking-form #bookingForm textarea {
  background-color: #fff !important; border: 1px solid var(--vx-border) !important; border-radius: 12px !important;
  font-size: 16px !important; color: var(--vx-text);
}
.vx-page-booking-form #bookingForm input[type=text],
.vx-page-booking-form #bookingForm input[type=email],
.vx-page-booking-form #bookingForm input[type=tel] { height: 56px !important; }
.vx-page-booking-form #bookingForm input::placeholder, .vx-page-booking-form #bookingForm textarea::placeholder { color: #8f8c85; opacity: 1; }
.vx-page-booking-form #bookingForm input[type=text]:focus,
.vx-page-booking-form #bookingForm input[type=email]:focus,
.vx-page-booking-form #bookingForm input[type=tel]:focus,
.vx-page-booking-form #bookingForm textarea:focus {
  outline: none !important; border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px rgba(246, 177, 44, .35) !important;
}
/* Doğrulama renkleri korunur: geçerli koyu gri, geçersiz kırmızı */
.vx-page-booking-form #bookingForm input[type=text]:valid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm input[type=email]:valid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm input[type=tel]:valid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm textarea:valid:not(:placeholder-shown) { border-color: var(--vx-border-strong) !important; }
.vx-page-booking-form #bookingForm input[type=text]:invalid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm input[type=email]:invalid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm input[type=tel]:invalid:not(:placeholder-shown),
.vx-page-booking-form #bookingForm textarea:invalid:not(:placeholder-shown) { border-color: #d93636 !important; }
/* Ekstralar listesi */
.vx-page-booking-form .bk-extras { border-color: var(--vx-border) !important; border-radius: 14px !important; }
.vx-page-booking-form .bk-extra { border-top-color: var(--vx-border) !important; }
.vx-page-booking-form .bk-extra.is-on { background: var(--vx-bg) !important; }
.vx-page-booking-form .bk-extra-icon { background: var(--vx-surface-2) !important; color: var(--vx-text) !important; }
.vx-page-booking-form .bk-extra.is-on .bk-extra-icon { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
.vx-page-booking-form .bk-extra-name { font-weight: 600 !important; color: var(--vx-text) !important; }
.vx-page-booking-form .bk-extra-price { color: var(--vx-muted) !important; }
.vx-page-booking-form .bk-extra-free { background: rgba(31, 138, 76, .12) !important; color: var(--vx-ok-strong) !important; }
.vx-page-booking-form .bk-stepper button { border-radius: 50% !important; border-color: var(--vx-border-strong) !important; background: #fff !important; color: var(--vx-text) !important; }
.vx-page-booking-form .bk-stepper button:hover:not(:disabled) { border-color: var(--vx-ink) !important; background: #fff !important; }
/* Ödeme yöntemi: seçili kutu siyah çerçeve, krem zemin; yerel radyo/onay kutusu siyah */
.vx-page-booking-form #bookingForm .border-trf-orange { border: 1px solid var(--vx-ink) !important; background: var(--vx-bg) !important; border-radius: 14px !important; }
.vx-page-booking-form #bookingForm .text-green-600 { color: var(--vx-ok) !important; font-weight: 600 !important; }
.vx-page-booking-form #bookingForm input[type=radio], .vx-page-booking-form #bookingForm input[type=checkbox] { accent-color: var(--vx-ink); }
/* Koşullar kutusu: krem zemin + ince kenar; bağlantılar koyu, altı çizili (turuncu düşük kontrastlıydı) */
.vx-page-booking-form #bookingForm .bg-gray-50 { background: var(--vx-bg) !important; border: 1px solid var(--vx-border); border-radius: 12px !important; }
.vx-page-booking-form #bookingForm a.text-trf-orange { color: var(--vx-text) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vx-page-booking-form #bookingForm a.text-trf-orange:hover { color: var(--vx-accent-text) !important; }
/* Butonlar: Onayla sarı (gölgesiz, 12px); Geri çizgili ikincil buton */
.vx-page-booking-form #bookingForm button[type=submit] {
  background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; border-radius: 12px !important;
  box-shadow: none !important; min-height: 58px; font-weight: 700 !important;
}
.vx-page-booking-form #bookingForm button[type=submit]:hover { background: var(--vx-accent-hover) !important; }
.vx-page-booking-form #bookingForm > div.flex > button[type=button] {
  border: 1px solid var(--vx-ink) !important; background: transparent !important; color: var(--vx-text) !important;
  border-radius: 12px !important; font-weight: 600 !important; min-height: 58px;
}
.vx-page-booking-form #bookingForm > div.flex > button[type=button]:hover { background: rgba(21, 21, 21, .06) !important; }
/* Mobilde butonlar alt alta: önce Onayla (tam genişlik), altında Geri */
@media (max-width: 639px) {
  .vx-page-booking-form #bookingForm > div.flex:last-child { flex-direction: column-reverse; gap: 10px; }
  .vx-page-booking-form #bookingForm > div.flex:last-child > button { flex: none; width: 100%; }
  .vx-page-booking-form #bookingForm > div.flex:last-child > button[type=button] { min-height: 50px; }
  .vx-page-booking-form #bookingForm > div.flex:last-child > button[type=submit] { padding-left: 12px !important; padding-right: 12px !important; font-size: 15px !important; }
}

/* =====================================================================
   İkinci kontrol turu düzeltmeleri
   ===================================================================== */

/* =====================================================================
   QA2 (masaüstü 1366): sayfalar arası tutarlılık düzeltmeleri
   ===================================================================== */

/* Saatlik şoför SSS: tarayıcının ▶/▼ üçgeni yerine diğer sayfalardaki gibi sağda daire içinde ok
   (yalnızca arka plan görseli; metin eklenmez) */
.vx-page-chauffeur-hire .ch-faq summary {
  list-style: none; display: flex; align-items: center; min-height: 28px; padding-right: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23ecebe6'/%3E%3Cpath d='M9.5 12l4.5 4.5 4.5-4.5' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 28px 28px no-repeat;
}
.vx-page-chauffeur-hire .ch-faq summary::-webkit-details-marker { display: none; }
.vx-page-chauffeur-hire .ch-faq details[open] > summary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23151515'/%3E%3Cpath d='M9.5 16l4.5-4.5 4.5 4.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vx-page-chauffeur-hire .ch-faq details { border-radius: 16px; }

/* Havalimanı "Şoför İletişim" kartı: satır içi yeşil (#16a34a) üzerinde beyaz yazı 3.3:1 idi; okunur koyu yeşil (5.0:1) */
.vx-page-airport-transfer #main-content a[href^="https://wa.me"][style*="16a34a"] { background-color: var(--vx-ok, #15803d) !important; box-shadow: none !important; }
.vx-page-airport-transfer #main-content a[href^="https://wa.me"][style*="16a34a"]:hover { background-color: #166534 !important; }

/* Siyah hap butonlar: ana sayfa / blog / hakkımızda'daki gibi hover'da vurgu rengi
   (havalimanı, güzergah, otel ve şehir içinde #151515 -> #000 oluyordu: görünür geri bildirim yoktu) */
.vx-page-airport-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover,
.vx-page-route-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover,
.vx-page-hotel-transfer #main-content > section:not(:first-child) a.bg-gray-900:hover { background-color: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
.vx-page-city-rides #main-content > section .rounded-xl.bg-gray-100 a.rounded-full.bg-white:hover { background: var(--vx-accent); color: var(--vx-accent-ink); }

/* Hakkımızda: hero içeriği (max-w-5xl) alttaki bölümlerle (72rem) aynı sol çizgide */
.vx-page-about #main-content > section:first-of-type > .max-w-5xl { max-width: 72rem; }

/* Ayrı breadcrumb şeridi (şehir içi, yardım, hakkımızda, Türkiye, iletişim, gizlilik, koşullar):
   geniş ekranda logo ve sayfa içeriğiyle aynı sol çizgide (43px yerine 75px @1366) */
@media (min-width: 1024px) {
  #main-content > nav.breadcrumb-nav { padding-left: 0; padding-right: 0; }
  #main-content > nav.breadcrumb-nav > ol { padding-left: 2rem; padding-right: 2rem; }
}

/* =====================================================================
   QA2 (mobil 390/360) düzeltmeleri
   ===================================================================== */

/* Saatlik şoförlü araç: 360px'de Tarih/Saat satırı (.ch-row2, "1fr 1fr") tarih
   alanının kendi en küçük genişliği (~167px) yüzünden 18px genişliyor, form ve
   hero ızgarası 2px taşıyor, sağdaki 16px boşluk kayboluyordu. Kolonlar küçülebilsin. */
@media (max-width: 480px) {
  .vx-page-chauffeur-hire .ch-hero-grid > * { min-width: 0; }
  .vx-page-chauffeur-hire .ch-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vx-page-chauffeur-hire .ch-row2 input { padding: 0 10px; }
}

/* Rezervasyon formu: özet karolarında tarih (20.10.2026) Archivo ile 360px'de
   "20.10.202 / 6" diye ikiye bölünüyordu */
@media (max-width: 400px) {
  .vx-page-booking-form .bk-tiles { gap: 6px; }
  .vx-page-booking-form .bk-tile { padding: 10px 4px; }
}
/* Zorunlu alan yıldızı red-500 beyazda 3.8:1 */
.vx-page-booking-form #bookingForm label .text-red-500 { color: #c81e1e; }

/* Blog bülteni: 360px'de e-posta alanı 156px kalıyor, yer tutucu "E-posta adresinizi g…"
   diye kesiliyordu; ana sayfa bülteni gibi telefonda alt alta */
@media (max-width: 480px) {
  .vx-page-blog #blogNewsletterForm { flex-direction: column; }
  .vx-page-blog #blogNewsletterForm input[type=email] { flex: none; width: 100%; }
  .vx-page-blog #blogNewsletterForm button[type=submit] { width: 100%; }
}

/* =====================================================================
   QA2 / tablet (820-1279): ara genişlik düzeltmeleri
   ===================================================================== */

/* Üst bar 1024-1279: uzun menü etiketli dillerde (ru, pl) menü logoyu ~30px'lik
   bir çizgiye kadar eziyordu. Menü biraz sıkılaşır, logo en az 112px kalır. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header.sticky nav > div > div:first-child { min-width: 112px; }
  header.sticky nav > div > div.hidden { column-gap: 10px !important; }
  header.sticky nav ul > li > a, header.sticky nav ul > li > button { padding: 8px 7px !important; font-size: 15px !important; }
  header.sticky #lang-switcher-wrapper { margin-left: 4px; }
  header.sticky nav a.border-trf-orange { padding-left: 12px; padding-right: 12px; }
}

/* Araç kartları (havalimanı, güzergah, otel): dar sütunda model hapı iki satıra
   bölünüp yumurta biçimine giriyordu; hap tek satır kalır, yer yoksa başlığın altına iner */
/* :has desteklemeyen tarayıcıda iki kural birlikte atlanır (eski görünüm kalır, taşma olmaz) */
@supports selector(:has(*)) {
  .vx-page-airport-transfer #main-content .flex.items-center.justify-between:has(> h3 + span.rounded-full),
  .vx-page-route-transfer #main-content .flex.items-center.justify-between:has(> h3 + span.rounded-full),
  .vx-page-hotel-transfer #main-content .flex.items-center.justify-between:has(> h3 + span.rounded-full) { flex-wrap: wrap; gap: 6px 10px; }
  .vx-page-airport-transfer #main-content .flex.items-center.justify-between > h3 + span.rounded-full,
  .vx-page-route-transfer #main-content .flex.items-center.justify-between > h3 + span.rounded-full,
  .vx-page-hotel-transfer #main-content .flex.items-center.justify-between > h3 + span.rounded-full { white-space: nowrap; }
}

/* Şehir içi: "Geniş Kapsama Alanı" istatistikleri 1024-1279'da 3+1 bölünüyordu (Rotalar tek başına alt satırda) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .vx-page-city-rides #main-content .flex.flex-wrap.justify-between.lg\:gap-16 { column-gap: 40px; }
}

/* Rezervasyon özeti 1024-1279: sol sütun dar (~290px), tarih kutucuğu "20.10.20 / 26" diye
   rakamın ortasından bölünüyordu (temasız da var). Tarih kutusu biraz daha geniş, kenar boşluğu az. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .vx-page-booking-form .bk-tiles { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .vx-page-booking-form .bk-tile { padding-left: 6px; padding-right: 6px; }
}

/* Ana sayfa ve şehir içi, <1024: koyu hero'dan sonra hizmet kartları 16px'te yapışıyordu
   (≥1024'te 56px). Bölüme üst boşluk; aradaki şerit krem zemin. */
@media (max-width: 1023px) {
  .vx-page-home #main-content > div.relative:first-child + section,
  .vx-page-city-rides #main-content > div.relative:first-of-type + section { margin-top: 24px; }
}

/* =====================================================================
   QA2 / etkileşim durumları (states) yaması — tema.css'in SONUNA eklenir.
   Yalnızca görünüm; metin/HTML değişmez.
   ===================================================================== */

/* 1) Ana sayfa rota filtre hapları: JS seçili hapı .active ile değil bg-amber-500 / bg-white
      sınıflarıyla değiştiriyor. Tema .active'e baktığı için tıklanan hap beyaz kalıyor,
      "Tüm Bölgeler" siyah (seçili) görünmeye devam ediyordu. Seçili görünüm JS sınıfına bağlanır. */
.route-tab-btn.route-tab-btn.bg-white { background: var(--vx-surface) !important; color: var(--vx-text) !important; box-shadow: 0 0 0 1px var(--vx-border) !important; }
.route-tab-btn.route-tab-btn.bg-white:hover { box-shadow: 0 0 0 1px var(--vx-border-strong) !important; }
.route-tab-btn.route-tab-btn.bg-amber-500 { background: var(--vx-ink) !important; color: #fff !important; box-shadow: none !important; }

/* 2) Dil menüsü (açık kart): üzerine gelince yazı açık turuncu (#f9b442, 1.9:1) oluyordu.
      driveonport lang-menu gibi: alt zemin, koyu yazı */
#lang-switcher-menu a[role="menuitem"]:hover { color: var(--vx-text) !important; background: var(--vx-bg-alt) !important; }

/* 3) Açık zeminli breadcrumb (iletişim, gizlilik, koşullar): hover'da açık turuncu (1.6:1) yerine okunur ton */
.vx-page-contact #main-content > nav.breadcrumb-nav a:hover,
.vx-page-privacy #main-content > nav.breadcrumb-nav a:hover,
.vx-page-terms #main-content > nav.breadcrumb-nav a:hover { color: var(--vx-accent-text) !important; text-decoration: underline; text-underline-offset: 3px; }

/* 4) Türkiye arama formu: dolu alan / tarih / saat / yolcu seçiminde odak kenarı hiç değişmiyordu
      (:valid kuralı odak kuralını eziyordu; yalnızca %25 soluk halka kalıyordu). Şehir içi ve
      rezervasyon kartlarıyla aynı odak: koyu kenar + vurgu halkası */
.vx-page-turkey #turkeySearchForm .form-group input:focus, .vx-page-turkey #turkeySearchForm .form-group select:focus,
.vx-page-turkey #turkeySearchForm .form-group input:valid:not(:placeholder-shown):focus,
.vx-page-turkey #turkeySearchForm .form-group select:valid:not(:placeholder-shown):focus {
  outline: none; border-color: var(--vx-text); box-shadow: 0 0 0 3px rgba(246, 177, 44, .35);
}

/* 6) Klavye odağı görünmüyordu (focus:outline-none): ana sayfa SSS, yardım SSS ve dil düğmesi.
      driveonport faq-item summary:focus-visible gibi vurgu çizgisi */
#faqAccordion > div > button:focus-visible,
.vx-page-help .faq-toggle:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: -3px; border-radius: 16px; }
#lang-switcher-btn:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }

/* 7) Açılır menü öğelerinde eski turuncu alt çizgi animasyonu (üst menüde zaten kapatılmıştı) */
header.sticky [role="menu"] a::after { background: transparent !important; }

/* 9) Masaüstü açılır menüler (Havalimanı, Şoförlü Araç) yalnızca :hover ile açık kalıyor; düğme ile menü
      arasındaki 4px boşluktan geçerken menü kapanıyordu (fare yavaşça menüye indirildiğinde öğeye
      ulaşılamıyor). Görünmez köprü: menünün üst kenarından düğmeye kadar boşluğu kapatır */
header.sticky nav ul > li.group > [role="menu"]::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

/* =====================================================================
   QA2 (diller): uzun kelimeler, Kiril/CJK yedek yazı tipi
   ===================================================================== */

/* Ana sayfa hero başlığı: dar telefonlarda (360px) Almanca "Flughafentransfers" gibi tek
   kelime 34px'te 340px tutuyor, 16px kenar boşluğunu aşıp ekran kenarına dayanıyordu. */
@media (max-width: 419px) {
  .vx-page-home #main-content > div.relative:first-child h1 { font-size: clamp(28px, 9vw, 34px) !important; overflow-wrap: break-word; }
}

/* Havalimanı/Saatlik sekmeleri: Almanca tek kelimelik etiketler ("Flughafentransfer",
   "Stundenservice") 360px'te beyaz kartın dışına taşıyordu. Dar ekranda daha sıkı hap.
   (350px altı için aşağıdaki alt alta geçme kuralına bakın.) */
@media (max-width: 419px) {
  .trip-type-btn { padding: 8px 12px !important; font-size: 14px !important; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
}

/* Rusça: Archivo'da Kiril yok; başlıklardaki Latin parçalar (Vixride, VIP, Google, AYT, 2026)
   %118 genişlikte, Kiril harfler sistem yazı tipinde normal genişlikte kalıyordu. Rusça
   başlıklarda genişlik normal: tek başlık içinde iki farklı genişlik olmasın. */
html[lang|="ru"] :is(h1, h2, h3, h4, #newsletter-section-heading):not(.gradient-number) { font-stretch: 100% !important; }

/* Çince/Japonca: Latin için ayarlı sıkı satır aralığı (1.04-1.1) ve eksi harf aralığı CJK
   başlıklarında satırları birbirine yapıştırıyordu. */
html:is([lang|="zh"], [lang|="ja"]) :is(h1, h2, h3) { letter-spacing: 0; }
html:is([lang|="zh"], [lang|="ja"]) :is(
  .vx-page-home #main-content > div.relative:first-child h1,
  .vx-page-airport-transfer #main-content > section:first-child h1,
  .vx-page-route-transfer #main-content > section:first-child h1,
  .vx-page-hotel-transfer #main-content > section:first-child h1,
  .vx-page-chauffeur-hire .ch-hero h1,
  .vx-page-city-rides #main-content > div.relative:first-of-type h1,
  .vx-page-blog #main-content > header h1,
  .vx-page-blog-post #main-content > article > header h1,
  .vx-page-help #main-content > header h1,
  .vx-page-about #main-content > section:first-of-type h1,
  .vx-page-contact #main-content > section:first-of-type h1,
  .vx-page-turkey #main-content > div.relative:first-of-type h1,
  .vx-page-privacy #main-content .prose h1, .vx-page-terms #main-content .prose h1,
  .vx-page-404 main h1,
  #newsletter-section-heading
) { line-height: 1.25 !important; }

/* Çince/Japonca karşılaştırma tabloları (telefonda): CJK her harften bölünebildiği için tablo
   ekrana sığmak üzere daralıyor, sütunlar tek karakter genişliğine inip yazı dikey diziliyordu
   (temadan önce de böyle). Diğer dillerdeki gibi kendi kutusunda yatay kaysın. */
@media (max-width: 639px) {
  html:is([lang|="zh"], [lang|="ja"]) :is(.vx-page-airport-transfer, .vx-page-route-transfer, .vx-page-hotel-transfer, .vx-page-blog-post) #main-content .overflow-x-auto > table { min-width: 600px; }
}

/* 350px altı: iki sekme yan yana sığmıyorsa alt alta geçsin (kelime ortasından bölünmesin) */
@media (max-width: 349px) {
  .trip-type-btn { overflow-wrap: normal; margin-left: 0 !important; }
  div:has(> .trip-type-btn) { flex-wrap: wrap; gap: 8px 12px; }
}

/* Masaüstü üst menü 1024-1279px: Lehçe/Rusça uzun menü etiketleri (Archivo + hap dolgusu)
   logoyu 15-30px'e kadar eziyordu (1024'te görünmez). Bu dillerde menü biraz daha sıkı. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html:is([lang|="pl"], [lang|="ru"]) header.sticky nav ul > li > a,
  html:is([lang|="pl"], [lang|="ru"]) header.sticky nav ul > li > button { font-size: 14px !important; padding: 8px 8px !important; }
  html:is([lang|="pl"], [lang|="ru"]) header.sticky nav .lg\:gap-x-4 { column-gap: 8px !important; }
  html:is([lang|="pl"], [lang|="ru"]) header.sticky nav a.border-trf-orange { padding-left: 12px !important; padding-right: 12px !important; }
}

/* iPhone: 16px altındaki alana dokununca Safari sayfayı yakınlaştırıyor (styles.css'teki iPhone
   bloğu yalnızca text-sm/text-xs alanları büyütüyor). Havalimanı sayfasındaki rota arama kutusu
   14px, şehir içi formu telefonda 15px kalıyordu; yalnızca iPhone'da 16px. */
@supports (-webkit-touch-callout: none) {
  #routeSearchInput,
  .vx-page-city-rides #main-content form :is(input:not([type=hidden]), select, textarea) { font-size: 16px !important; }
}