/* =====================================================================
   BOOKING 2026 — reservation.php mockup uyarlaması
   booking-shell.css'in ÜSTÜNE biner (en son yüklenen dosya).
   Kural: !important YOK. Seçiciler .bk-main / .bk-hero / .bk-foot
   kapsamında; bu sınıflar yalnızca reservation.php'de bulunur, bu yüzden
   index.php ve araclar.php'deki .flt-card--v2 kartları etkilenmez.
   ===================================================================== */

.bk-header,
.bk-main,
.bk-hero,
.bk-foot,
.bk-support {
  /* Aksiyon rengi: mockup'taki yeşil */
  --bk2-green: #12a150;
  --bk2-green-600: #0d8442;
  --bk2-green-700: #0a6b36;
  --bk2-green-soft: #e7f6ee;

  /* Koyu yüzeyler (araç kartı, kampanya kartı, kahraman bandı) */
  --bk2-dark: #101815;
  --bk2-dark-2: #18231f;
  --bk2-dark-3: #1f2d28;
  /* Mockup'taki araç kartı gövdesi ve içindeki koyu yeşil paneller */
  --bk2-card: #0d1714;
  --bk2-panel: #1b3a2a;
  --bk2-panel-2: #235034;
  --bk2-dark-line: rgba(255, 255, 255, .10);
  --bk2-dark-line-2: rgba(255, 255, 255, .16);
  --bk2-on-dark: #ffffff;
  --bk2-on-dark-2: rgba(255, 255, 255, .64);
  --bk2-on-dark-3: rgba(255, 255, 255, .42);
}

/* Ekran okuyucu metni: ikonla gösterilen etiketlerin erişilebilir karşılığı */
.bk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   HEADER — mockup: marka | telefon + tema + yeşil "Rezervasyon Sorgula"
   ===================================================================== */
/* booking-system.css logoyu "1fr auto 1fr" ile ORTAYA alıyor; mockup'ta
   marka sola dayalı. Boşluk sütununu kaldırıp iki sütuna indiriyoruz. */
/* Logo, banner ve içerik kolonlarıyla aynı kenardan başlasın (app-shell 20px,
   header ise 16px kullanıyordu). */
.bk-header__inner { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--s-5); }
@media (max-width: 600px) {
  .bk-header__inner { padding-inline: var(--s-3); }
}
.bk-header__inner::before { display: none; }
.bk-header .bk-logo { grid-column: 1; justify-self: start; }
.bk-header .bk-header__actions { grid-column: 2; justify-self: end; gap: 10px; }

.bk-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 4px 2px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.bk-phone > i {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--bk2-green);
}
.bk-phone__txt { display: block; line-height: 1.15; }
.bk-phone__txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.bk-phone__txt small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  opacity: .6;
  margin-top: 1px;
  white-space: nowrap;
}
.bk-phone:hover { background: rgba(18, 161, 80, .08); }
/* Aynı blok WhatsApp moduna geçtiğinde ikon markanın yeşiline döner */
.bk-phone--wa > i { color: #25d366; font-size: 16px; }
.bk-phone--wa:hover { background: rgba(37, 211, 102, .1); }

/* Yeşil ana aksiyon: booking-shell'in .btn--primary boyutunu korur */
.bk-header .bk-hcta {
  padding: 0 18px;
  min-height: 40px;
  border-radius: 10px;
  background: var(--bk2-green);
  border-color: var(--bk2-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}
.bk-header .bk-hcta:hover:not(:disabled) {
  background: var(--bk2-green-600);
  border-color: var(--bk2-green-600);
  color: #fff;
}
.bk-hcta__short { display: none; }

/* --- Header'ın daralması ---------------------------------------------
   İkinci grid kolonu minmax(0, 1fr) olduğu için daralabiliyor, ama
   içindeki telefon/CTA metinleri nowrap; sığmayınca taşıp logonun
   üstüne biniyordu. Kolonları taşımaya izin vermiyoruz ve dar
   ekranlarda içeriği kademe kademe kısaltıyoruz. */
.bk-header .bk-logo { min-width: 0; }
.bk-header .bk-header__actions { min-width: 0; flex-wrap: nowrap; }

@media (max-width: 700px) {
  /* Telefon: yalnızca dokunmatik hedef olarak yuvarlak ikon */
  .bk-phone {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--border);
  }
  .bk-phone__txt { display: none; }
  .bk-phone > i { font-size: 15px; }
}

@media (max-width: 520px) {
  /* Logonun ikinci satırı ve CTA metni kısalır */
  .bk-logo__tag { display: none; }
  .bk-hcta__long { display: none; }
  .bk-hcta__short { display: inline; }
  .bk-header .bk-hcta { padding: 0 13px; font-size: 12.5px; }
  .bk-header .bk-header__actions { gap: 6px; }
}

/* =====================================================================
   KAHRAMAN BANDI
   861px ve üstü: metin ve rozetler görselin içinde (hazır banner).
   860px altı: .bk-hero__card — fotoğrafın yazısız bölgesi arka plan, metinler
   gerçek HTML. Gömülü yazı telefonda 0.21 ölçeğe düşüp okunmaz kalıyordu.
   ===================================================================== */
.bk-hero { display: block; }
.bk-hero__inner {
  /* Yatay boşluk app-shell'den geliyor: banner böylece alttaki kolonlarla
     aynı kenardan başlıyor. */
  padding-block: 18px 0;
  line-height: 0;
}
.bk-hero__img {
  display: block;
  width: 100%;
  /* Kırpma yok: görsel kendi oranında (1600x582) tam olarak görünür.
     Genişliği içerik kolonlarıyla sınırlı olduğu için yazı da makul
     ölçekte kalıyor. */
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  background: #0a1210;
}
.bk-hero__card { display: none; }

/* =====================================================================
   SOL SÜTUN — dikey kampanya kartı (görselin içinde yazı + buton)
   ===================================================================== */
.bk-vcard {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  background: var(--bk2-dark);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bk-vcard img {
  display: block;
  width: 100%;
  height: auto;
}
.bk-vcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .55);
}
.bk-vcard:focus-visible {
  outline: 2px solid var(--bk2-green);
  outline-offset: 2px;
}

/* =====================================================================
   SOL SÜTUN — adım rayı yeşile, özet paneli sadeleşir
   ===================================================================== */
/* Mockup'ta kenar çubuğu daha dar; kalan genişlik araç kartlarına gidiyor
   (varsayılan 360px, üç kartlık ızgarada hücreleri sıkıştırıyordu). */
.bk-main { --summary-w: 300px; }

/* booking-system.css'teki ".bk-main { padding: var(--s-7) 0 120px }" kısayolu
   app-shell'in yatay iç boşluğunu siliyordu; 1280px'in altındaki her ekranda
   içerik, banner ve alt şerit ekranın kenarına yapışıyordu. Yalnızca yatay
   boşluğu geri veriyoruz — dikey değerler booking-system'de kalsın. */
.bk-main { padding-inline: var(--s-5); }
@media (max-width: 600px) {
  .bk-main { padding-inline: var(--s-3); }
}

.bk-main .steps-rail__inner {
  background: var(--bs-surface);
  border: 1px solid var(--bs-line);
  border-radius: 16px;
  padding: 14px 16px;
}
.bk-main .steps-rail__line { left: 32px; top: 34px; bottom: 34px; }
.bk-main .steps-rail__line::after { background: var(--bk2-green); }

.bk-main .step-node.is-active .step-node__dot {
  background: var(--bk2-green);
  border-color: var(--bk2-green);
  color: #fff;
}
.bk-main .step-node.is-done .step-node__dot {
  background: var(--bk2-green-soft);
  border-color: var(--bk2-green);
  color: var(--bk2-green-700);
}
.bk-main .step-node.is-active .step-node__label { color: var(--bs-ink); }
/* Mockup'ta etiketler tek satır. booking-system.css yatay ray için
   "max-width: 90px" veriyor; dikey rayda bu sınır "Bilgiler & Doğrulama"yı
   kırpıyordu. Masaüstünde sınırı kaldırıp tek satıra sabitliyoruz. */
@media (min-width: 861px) {
  .bk-main .step-node__label {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
}

/* Özet paneli başlığı ve satırları */
.bk-main .summary-panel__title { color: var(--bs-ink); font-size: 14.5px; letter-spacing: 0; text-transform: none; font-weight: 800; }
.bk-main .summary-block:last-child { border-bottom: 0; }
.bk-main .summary-edit-btn { color: var(--bk2-green-600); text-decoration: underline; }
.bk-main .summary-edit-btn:hover { color: var(--bk2-green-700); }
.bk-main .summary-price__total-value { color: var(--bs-ink); }

/* Mockup satır düzeni: solda ikon, sağda etiket + değer */
.bk-main .bk-srow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}
.bk-main .bk-srow__ico {
  margin-top: 2px;
  font-size: 15px;
  color: var(--bs-ink);
  justify-self: center;
}
.bk-main .bk-srow__body { min-width: 0; }
.bk-main .bk-srow .summary-block__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bs-ink-3);
  margin-bottom: 2px;
}
.bk-main .bk-srow .summary-block__value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bs-ink);
}

/* =====================================================================
   ADIM 2 — başlık satırı, arama, sıralama, kategori çipleri
   ===================================================================== */
.bk-main .bk-stephead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bk-main .bk-stephead__text { min-width: 0; }
.bk-main .bk-stephead .card__title { margin-bottom: 4px; }
.bk-main .bk-stephead .card__desc { margin: 0; }

/* Arama kutusu */
.bk-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 220px;
}
.bk-search input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--bs-line);
  border-radius: 12px;
  background: var(--bs-surface);
  color: var(--bs-ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bk-search input::placeholder { color: var(--bs-ink-3); }
.bk-search input:focus {
  border-color: var(--bk2-green);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .14);
}
.bk-search__icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-ink-3);
  font-size: 14px;
  pointer-events: none;
}

/* Yardım satırı: SSS + "Nasıl yapılır?" yan yana */
.bk-main .bk-helprow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}
.bk-main .bk-helprow .faq-info-btn { margin: 0; padding: 12px 16px; font-size: 13.5px; }

/* Kategori şeridi: çipler + sağda kaydırma oku (mockup) */
.bk-main .bk-catbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bk-main .bk-catbar__next {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bs-line);
  border-radius: 999px;
  background: var(--bs-surface);
  color: var(--bs-ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.bk-main .bk-catbar__next:hover { border-color: var(--bk2-green); color: var(--bk2-green); }
.bk-main .bk-catbar__next[hidden] { display: none; }

/* Kategori çipleri: ikon + başlık + alt açıklama */
.bk-main .chip-group.bk-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 0;
}
.bk-main .chip-group.bk-cats::-webkit-scrollbar { display: none; }

.bk-main .bk-cats .chip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px 8px 13px;
  border-radius: 12px;
  text-align: left;
  white-space: nowrap;
}
.bk-main .bk-cats .chip i {
  font-size: 16px;
  color: var(--bs-ink-3);
  justify-self: center;
  transition: color .18s ease;
}
.bk-main .bk-cats .chip b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.bk-main .bk-cats .chip span {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--bs-ink-3);
  transition: color .18s ease;
}
.bk-main .bk-cats .chip.is-active {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  color: #fff;
}
.bk-main .bk-cats .chip.is-active i,
.bk-main .bk-cats .chip.is-active span { color: rgba(255, 255, 255, .66); }

/* Sıralama satırı */
.bk-sortbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.bk-sortbar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-ink-2);
}
.bk-sortbar select {
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--bs-line);
  border-radius: 10px;
  background: var(--bs-surface);
  color: var(--bs-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d94a1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.bk-sortbar select:focus { border-color: var(--bk2-green); }

/* Sonuç bulunamadı */
.bk-noresult {
  grid-column: 1 / -1;
  padding: 42px 20px;
  text-align: center;
  border: 1px dashed var(--bs-line);
  border-radius: 16px;
  background: var(--bs-tint);
}
.bk-noresult i { font-size: 26px; color: var(--bs-ink-3); }
.bk-noresult b { display: block; margin: 10px 0 4px; font-size: 15px; color: var(--bs-ink); }
.bk-noresult span { font-size: 13px; color: var(--bs-ink-2); }

/* =====================================================================
   ARAÇ KARTLARI (koyu) — yalnızca .bk-main içinde
   ===================================================================== */
.bk-main .flt-grid {
  /* Sağ kolonda üç kart sığsın (mockup) */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: 14px;
}

.bk-main .flt-card {
  background: var(--bk2-card);
  border-color: var(--bk2-dark-line);
  border-radius: 14px;
}
.bk-main .flt-card:hover {
  border-color: var(--bk2-dark-line-2);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .65);
}
.bk-main .flt-card.vehicle-tile.is-selected {
  border-color: var(--bk2-green);
  box-shadow: 0 0 0 2px var(--bk2-green) inset;
}

.bk-main .flt-media { background: var(--bk2-dark-2); }
.bk-main .flt-slide { aspect-ratio: 16 / 10; background: var(--bk2-dark-2); }
.bk-main .flt-noimg { color: rgba(255, 255, 255, .22); }

/* Ad + slogan görselin üzerinde duruyor (araç fotoğrafın sağında, yazı solda).
   Perde zorunlu: fotoğraf her zaman tam kadrajlı gelmeyebilir, beyaz başlık
   açık zemine düştüğünde okunmaz kalır. Soldan sağa koyu geçiş yazının
   bulunduğu bandı kapatır, üst-alt geçişler rozet/sayaç şeritlerini toparlar. */
.bk-main .flt-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(6, 13, 10, .93) 0%,
      rgba(6, 13, 10, .80) 34%,
      rgba(6, 13, 10, .42) 56%,
      rgba(6, 13, 10, .06) 78%,
      rgba(6, 13, 10, 0) 100%),
    linear-gradient(180deg,
      rgba(6, 13, 10, .34) 0%,
      rgba(6, 13, 10, 0) 30%,
      rgba(6, 13, 10, 0) 62%,
      rgba(6, 13, 10, .48) 100%);
}
.bk-main .flt-head {
  position: absolute;
  z-index: 3;
  left: 13px;
  right: auto;
  /* Yazı kolonu kartın sol yarısında kalır: fotoğrafta araç sağda duruyor,
     uzun model adı gövdenin üzerine taşmasın. */
  max-width: 58%;
  /* Alt satır nokta göstergesi ve "1 / N" sayacına ayrıldı; yazı onların
     üstünde durur. Galeri olmayan kartlarda da aynı yükseklikte kalsın diye
     bu pay koşulsuz. */
  bottom: 34px;
  display: block;
  pointer-events: none;
}

/* Segment rozeti: yeşil dolgu, köşeli-yumuşak (mockup) */
.bk-main .flt-tag {
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bk2-green);
  backdrop-filter: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}
/* İndirim bayrağı segment rozetinin altına iner: sağ üst kalbe ayrılmıştır */
.bk-main .flt-flag {
  top: 38px;
  right: auto;
  left: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f59e0b;
  color: #1a1205;
  font-size: 9px;
  letter-spacing: .06em;
}

/* Favori kalbi — sağ üst, koyu saydam daire */
.bk-main .flt-fav {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 14, 11, .58);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.bk-main .flt-fav:hover { background: rgba(8, 14, 11, .82); transform: scale(1.08); }
.bk-main .flt-fav.is-on { color: #ff6b6b; }

/* Görsel sayacı (1 / N) — sağ alt. Aynı zamanda tam ekran görüntüleyicinin
   düğmesi; fotoğrafın her yerine dokunmak da galeriyi açar. */
.bk-main .flt-media { cursor: zoom-in; }
.bk-main .flt-count {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(8, 14, 11, .66);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  cursor: zoom-in;
  transition: background .18s ease, transform .18s ease;
}
.bk-main .flt-count i { font-size: 9px; opacity: .85; }
.bk-main .flt-count:hover { background: rgba(8, 14, 11, .88); transform: translateY(-1px); }
/* Noktalar mockup'ta yok: yalnızca dokunmatikte ve fare kartın üzerindeyken
   görünür; sayaç konumu her zaman bilgiyi taşır. */
.bk-main .flt-dots {
  bottom: 10px;
  left: 10px;
  right: auto;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity .18s ease;
}
.bk-main .flt-card:hover .flt-dots,
.bk-main .flt-card:focus-within .flt-dots { opacity: 1; }
@media (hover: none) {
  .bk-main .flt-dots { opacity: 1; }
}

/* Görsel üzerindeki başlık ve slogan */
.bk-main .flt-name {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  min-height: 0;
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  /* Uzun model adları perdenin dışına taşmasın */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bk-main .flt-tagline {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 0;
}

/* Gövde */
.bk-main .flt-body { padding: 12px; gap: 10px; }

/* ---- Teknik kutu: BEYAZ zemin, 4 hücre tek satır, ikon solda (mockup) ---- */
.bk-main .flt-specs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
/* İkon solda, değer sağda. Değer hücreye sığmazsa (örn. "Hatchback")
   flex-wrap sayesinde ikonun ALTINA iner ve tüm hücre genişliğini kullanır —
   mockup'taki koltuk hücresi de bu davranışta. Böylece hiçbir değer kırpılmaz. */
.bk-main .flt-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 5px;
  padding: 8px 3px;
  border-left: 1px solid #e6e9ee;
  text-align: center;
}
.bk-main .flt-spec:first-child { border-left: 0; }
.bk-main .flt-spec dt {
  flex: 0 0 auto;
  margin: 0;
  color: #111827;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}
.bk-main .flt-spec dd {
  display: block;
  margin: 0;
  color: #111827;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  /* Temel kural "anywhere" kullanıyor ve dar hücrede "Hatchba / ck" gibi
     kelime ortası kırılma üretiyor; boşluklardan sarması yeterli. */
  overflow-wrap: normal;
  overflow: visible;
}

/* ---- Fiyat paneli: koyu yeşil kutu, ortada ayırıcı (mockup) ---- */
.bk-main .flt-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bk2-panel);
}
.bk-main .flt-price::before {
  content: '';
  grid-column: 2;
  align-self: stretch;
  width: 1px;
  background: rgba(255, 255, 255, .13);
}
.bk-main .flt-price__col { grid-column: 1; grid-row: 1; }
.bk-main .flt-price__col--alt {
  grid-column: 3;
  grid-row: 1;
  padding-left: 10px;
}
.bk-main .flt-price__lbl {
  color: var(--bk2-on-dark-2);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 2px;
  /* "Toplam · 3 gün" büyük harf + geniş harf aralığında dar kartta taşıyor */
  text-transform: none;
  letter-spacing: 0;
}
.bk-main .flt-price__big {
  color: var(--bk2-on-dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.bk-main .flt-price__old { color: var(--bk2-on-dark-3); font-size: 10.5px; }
.bk-main .flt-kasko {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--bk2-on-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}
.bk-main .flt-kasko i { flex: 0 0 auto; color: #fff; font-size: 12px; }

/* ---- Bilgi butonları: fiyat paneliyle aynı koyu yeşil ---- */
.bk-main .flt-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.bk-main .flt-links button {
  justify-content: center;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: var(--bk2-panel);
  color: var(--bk2-on-dark);
  font-size: 10.5px;
  font-weight: 600;
}
.bk-main .flt-links button:hover { background: var(--bk2-panel-2); color: #fff; }
.bk-main .flt-links button i { font-size: 11px; }

/* Ana aksiyon: parlak yeşil */
.bk-main .flt-btn--primary {
  min-height: 40px;
  border-radius: 8px;
  background: var(--bk2-green);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.bk-main .flt-btn--primary:hover { background: var(--bk2-green-600); color: #fff; }

/* fleet-2026.css 360px altında teknik kutuyu 2 kolona düşürüyor; mockup'ta
   dört hücre tek satırda kalıyor, bu yüzden geri alıyoruz. */
@container (max-width: 360px) {
  .bk-main .flt-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-main .flt-spec:nth-child(odd) { border-left: 1px solid #e6e9ee; }
  .bk-main .flt-spec:first-child { border-left: 0; }
  .bk-main .flt-spec:nth-child(n+3) { border-top: 0; }
}

/* Kart genişledikçe punto da büyür (tek kolonlu mobil / iki kolonlu tablet) */
@container (min-width: 300px) {
  .bk-main .flt-body { padding: 14px; gap: 11px; }
  .bk-main .flt-name { font-size: 20px; }
  .bk-main .flt-tagline { font-size: 12px; }
  .bk-main .flt-spec { gap: 6px; padding: 9px 6px; }
  .bk-main .flt-spec dd { font-size: 11px; }
  .bk-main .flt-price__big { font-size: 23px; }
  .bk-main .flt-price__lbl,
  .bk-main .flt-kasko { font-size: 11px; }
  .bk-main .flt-links button { font-size: 11.5px; }
  .bk-main .flt-btn--primary { min-height: 44px; font-size: 13.5px; }
}
@container (min-width: 420px) {
  .bk-main .flt-name { font-size: 22px; }
  .bk-main .flt-tagline { font-size: 12.5px; }
  .bk-main .flt-spec dd { font-size: 12px; }
  .bk-main .flt-price__big { font-size: 26px; }
}

/* =====================================================================
   TÜM ADIMLAR — birincil aksiyonlar yeşile döner
   ===================================================================== */
.bk-main .btn--primary {
  background: var(--bk2-green);
  border-color: var(--bk2-green);
  color: #fff;
  box-shadow: none;
}
/* booking-shell.css aynı hover'ı :not(:disabled) ile yazıyor; eşitlemek zorunlu */
.bk-main .btn--primary:hover:not(:disabled) {
  background: var(--bk2-green-600);
  border-color: var(--bk2-green-600);
  color: #fff;
}
.bk-main .btn--primary:disabled,
.bk-main .btn--primary[disabled] {
  background: var(--bs-line);
  border-color: var(--bs-line);
  color: var(--bs-ink-3);
}

/* Konum bulma butonu: aksiyon rengiyle hizalanır */
.bk-main .field__action-btn { background: var(--bk2-green); box-shadow: none; }
.bk-main .field__action-btn:hover { background: var(--bk2-green-600); box-shadow: none; }

/* Zorunlu alan yıldızı */
.bk-main .field__req {
  color: var(--bk2-green);
  font-weight: 800;
  margin-inline-start: 2px;
}

/* Alan odaklanması yeşil */
.bk-main .field__input:focus,
.bk-main .field__select:focus,
.bk-main .field__input:focus-visible {
  border-color: var(--bk2-green);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .14);
}

/* Bilgi notu kutusu sadeleşir */
.bk-main .flow-tip {
  border-radius: 12px;
  border-color: var(--bs-line);
  background: var(--bs-tint);
}
/* booking-shell.css bu rozeti düz metne çevirip padding'i sıfırlıyor; yeşil
   dolgu geri gelince yazı kutunun kenarlarına yapışıp sıkışmış görünüyordu.
   Rozeti yeniden düzgün bir etikete çeviriyoruz. */
.bk-main .flow-tip__badge {
  background: var(--bk2-green);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
}

/* =====================================================================
   ALT BİLGİ ŞERİDİ — her kırılımda ekranın altına sabit
   Dört madde tek yatay satırda ve kaydırmasız durur. Masaüstünde ikon solda /
   metin sağda; 700px altında sütun ~85px'e düştüğü için ikon metnin üstüne
   geçer ve alt açıklamalar gizlenir.
   Şerit sabit olduğu için yüksekliği --bk-footbar ile paylaşılıyor: sayfa alt
   dolgusu ve alttaki diğer sabit öğeler (adım navigasyonu, özet çubuğu, yüzen
   çipler, toast) bu değer kadar yukarı kayıyor. Gerçek değeri sayfa sonundaki
   betik ResizeObserver ile ölçüp :root'a yazıyor; aşağıdaki değerler yalnızca
   betik çalışana kadar geçerli olan yaklaşık karşılıkları.
   ===================================================================== */
:root { --bk-footbar: 90px; }
body { padding-bottom: calc(var(--bk-footbar) + 16px); }
.bk-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  border-top: 1px solid var(--bs-line, #e7e9ee);
  background: #fff;
  box-shadow: 0 -8px 24px rgba(12, 14, 18, .08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Yapışkan adım navigasyonu şeridin üstünde durur (booking-shell.css onu
   mobilde bottom: 0'a sabitliyor). */
.bk-main #stageNav { bottom: var(--bk-footbar); }
.bk-foot__inner {
  display: flex;
  flex-wrap: nowrap;
  /* Bir maddenin metni iki satıra sardığında ikonlar aynı hizada kalsın. */
  align-items: flex-start;
  gap: 22px;
  padding-block: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bk-foot__inner::-webkit-scrollbar { display: none; }
.bk-foot__item {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.bk-foot__item > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f6f7f9;
  color: #5b6270;
  font-size: 16px;
}
.bk-foot__mark {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--theme-primary, #d6001c);
  justify-self: center;
  /* Diğer maddelerin ikon kutusuyla aynı satır yüksekliği: aksi hâlde bu
     madde kısa kalıp satır içinde ortalanıyor ve metni 4px kayıyor. */
  line-height: 40px;
}
.bk-foot__item b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0c0e12;
  line-height: 1.25;
}
/* NOT: seçici `div span` ile daraltıldı — maddenin ilk çocuğu olan
   .bk-foot__mark de bir span ve düz `.bk-foot__item span` onu da yakalayıp
   marka logosunu gri 11.5px'e düşürüyordu. */
.bk-foot__item div span {
  display: block;
  font-size: 11.5px;
  color: #8d94a1;
  line-height: 1.25;
  margin-top: 1px;
}

/* =====================================================================
   KOYU TEMA — sayfa zemini koyulaşınca kartlar bir kademe yükselir
   ===================================================================== */
[data-theme="dark"] .bk-main {
  --bs-ink: #f3f5f7;
  --bs-ink-2: #a8b0bd;
  --bs-ink-3: #7d8593;
  --bs-line: #2a3138;
  --bs-line-2: #222831;
  --bs-surface: #151a20;
  --bs-tint: #1b2129;
}
[data-theme="dark"] .bk-main .flt-card {
  background: #10201b;
  border-color: rgba(255, 255, 255, .13);
}
[data-theme="dark"] .bk-main .flt-media,
[data-theme="dark"] .bk-main .flt-slide { background: #1f2c28; }
[data-theme="dark"] .bk-main .step-node.is-done .step-node__dot {
  background: rgba(18, 161, 80, .18);
  color: #4ed48c;
}
/* Koyu temada --bs-ink açık tona döndüğü için booking-shell'in
   "siyah zemin + beyaz yazı" aktif çipi beyaz üstüne beyaz kalıyordu.
   Aksiyon rengine çeviriyoruz. chip-tall kendi açık-zeminli kuralını korur. */
[data-theme="dark"] .bk-main .chip.is-active {
  background: var(--bk2-green);
  border-color: var(--bk2-green);
  color: #fff;
}
[data-theme="dark"] .bk-main .chip.is-active .text-muted,
[data-theme="dark"] .bk-main .chip.is-active .text-brand { color: rgba(255, 255, 255, .8); }
[data-theme="dark"] .bk-main .bk-cats .chip.is-active i,
[data-theme="dark"] .bk-main .bk-cats .chip.is-active span { color: rgba(255, 255, 255, .72); }
[data-theme="dark"] .bk-main .chip.chip-tall.is-active {
  background: rgba(18, 161, 80, .14);
  border-color: var(--bk2-green);
  box-shadow: 0 0 0 1px var(--bk2-green) inset;
  color: var(--bs-ink);
}
[data-theme="dark"] .bk-main .chip.chip-tall.is-active i { color: #4ed48c; }
[data-theme="dark"] .bk-foot {
  background: #12171d;
  border-top-color: #2a3138;
}
[data-theme="dark"] .bk-foot__item > i { background: #1b2129; color: #a8b0bd; }
[data-theme="dark"] .bk-foot__item b { color: #f3f5f7; }
[data-theme="dark"] .bk-foot__item div span { color: #7d8593; }
[data-theme="dark"] .bk-main .steps-rail__inner { background: #151a20; border-color: #2a3138; }
[data-theme="dark"] .bk-main .bk-srow__ico { color: var(--bs-ink-2); }
[data-theme="dark"] .bk-main .bk-catbar__next { background: #151a20; border-color: #2a3138; color: #a8b0bd; }

/* =====================================================================
   DUYARLI
   ===================================================================== */
@media (max-width: 1024px) {
  .bk-foot__inner { gap: 16px; }
  .bk-foot__item { flex: 0 0 auto; }
}

@media (max-width: 860px) {
  /* Hazır banner yerine HTML metinli kart: gömülü yazı bu genişliklerde
     okunmaz kalıyor (431px'te başlık 11px, alt metin 5px). Arka plan aynı
     fotoğrafın yazısız bölgesi, üstündeki koyu geçiş metni okunur tutuyor. */
  .bk-hero__inner { padding-block: 12px 0; line-height: 1.3; }
  .bk-hero__img { display: none; }
  .bk-hero__card {
    display: block;
    position: relative;
    padding: 16px 16px 15px;
    border-radius: 14px;
    background-image:
      linear-gradient(96deg, rgba(6, 13, 10, .95) 0%, rgba(6, 13, 10, .86) 44%, rgba(6, 13, 10, .52) 100%),
      url("../../resim/hero-mobile-bg.jpg");
    background-size: cover, cover;
    background-position: center, center 62%;
    background-repeat: no-repeat;
  }
  .bk-hero__title {
    margin: 0;
    font-size: clamp(23px, 6.6vw, 36px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
  }
  .bk-hero__sub {
    margin: 9px 0 0;
    max-width: 32ch;
    font-size: clamp(12.5px, 3.2vw, 16px);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
  }
  .bk-hero__badges {
    display: flex;
    gap: 10px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
  }
  .bk-hero__badges li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(9.5px, 2.5vw, 12px);
    font-weight: 700;
    line-height: 1.22;
    color: rgba(255, 255, 255, .93);
  }
  .bk-hero__badges i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #0a6b36;
    font-size: 11px;
  }

  /* Şerit her kırılımda tek satır: dördü eşit sütunlara yerleşir, kaydırma
     yok. Sütun daraldıkça madde düzeni 700px altında ikon-üstte biçimine
     geçiyor (aşağıda). */
  .bk-foot__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow-x: visible;
  }
  .bk-foot__item { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .bk-foot__item > i { width: 34px; height: 34px; font-size: 14px; }
  .bk-foot__mark { font-size: 18px; line-height: 34px; }
  .bk-foot__item b { font-size: 12px; }
  .bk-foot__item div span { font-size: 10.5px; }

  .bk-main .bk-stephead { align-items: stretch; }
  .bk-search { flex: 1 1 100%; }
  .bk-main .flt-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

  /* Mobilde kenar çubuğu yalnızca adım rayını taşır: dikey kampanya kartı
     2:3 oranında olduğu için formu ekranın çok altına iterdi. */
  .bk-vcard { display: none; }

  /* Ray mobilde yatay: booking-shell.css'teki kuralları bozmamak için
     kart görünümünü ve çizgi konumunu bu kırılımda yeniden ayarlıyoruz. */
  .bk-main .steps-rail__inner { padding: 12px 10px; border-radius: 14px; }
  .bk-main .steps-rail__line {
    left: 20px;
    right: 20px;
    top: 29px;
    bottom: auto;
  }
}

@media (max-width: 600px) {
  /* Şerit kalıcı bir alt çubuk olduğu için telefonda mümkün olduğunca kısa:
     dolgu 11px, ikon 28px. */
  .bk-foot__inner {
    gap: 8px;
    padding-block: 11px;
  }
  /* Telefonda sütun ~85px'e düştüğü için ikon metnin üstüne geçiyor ve
     alt açıklamalar gizleniyor; başlıklar iki satıra sarabilir. */
  .bk-foot__item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 6px;
  }
  .bk-foot__item > i { width: 28px; height: 28px; font-size: 12px; }
  .bk-foot__mark { font-size: 15px; line-height: 28px; }
  .bk-foot__item b { font-size: 9.5px; line-height: 1.25; }
  .bk-foot__item div span { display: none; }

  .bk-sortbar { justify-content: space-between; }
  .bk-main .flt-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   DESTEK KUTUSU — sol kenara yapışık sekme + kanal menüsü
   Eski çözüm iki ayrı yüzen daireydi (WhatsApp + SSS): mobilde etiketleri
   gizlendiği için ne oldukları anlaşılmıyor, ekranın ortasında durdukları
   için de formun sol kenarındaki butonların üzerine biniyorlardı. Sekme
   yalnızca kenarın 36px'ini kaplar, kanallar menüde ikon + yazı olarak durur.
   ===================================================================== */
.wa-help,
.faq-bot__chip { display: none !important; }

.bk-support {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 970;
}
.bk-support__tab {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 36px;
  padding: 15px 0 16px;
  border: 0;
  border-radius: 0 13px 13px 0;
  background: linear-gradient(180deg, var(--bk2-green) 0%, var(--bk2-green-700) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(10, 107, 54, .32);
  transition: width .18s ease, box-shadow .18s ease;
}
.bk-support__tab:hover { box-shadow: 0 14px 30px rgba(10, 107, 54, .42); }
.bk-support__tab i { font-size: 15px; }
.bk-support__tab span {
  /* Sekme dikey: yatay bir etiket şeridi içeriğin üzerine binerdi. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.bk-support__menu {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: min(294px, calc(100vw - 66px));
  padding: 12px;
  background: var(--bs-surface, #fff);
  border: 1px solid var(--bs-line, #e7e9ee);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(12, 14, 18, .22);
  animation: bkSupportIn .18s ease;
}
.bk-support__menu[hidden] { display: none; }
@keyframes bkSupportIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.bk-support__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 10px 6px;
}
.bk-support__head strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--bs-ink, #0c0e12);
}
.bk-support__close {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--bs-tint, #f4f6f8);
  color: var(--bs-ink-2, #5b6270);
  cursor: pointer;
  font-size: 12px;
}
.bk-support__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease;
}
.bk-support__item:hover { background: var(--bs-tint, #f4f6f8); }
.bk-support__ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 15px;
  color: #fff;
}
.bk-support__ico--wa { background: #25d366; }
.bk-support__ico--faq { background: var(--theme-primary, #d6001c); font-size: 14px; }
.bk-support__ico--tel { background: var(--bk2-green); font-size: 13px; }
.bk-support__txt { min-width: 0; }
.bk-support__txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bs-ink, #0c0e12);
  line-height: 1.25;
}
.bk-support__txt small {
  display: block;
  font-size: 11px;
  color: var(--bs-ink-3, #8d94a1);
  line-height: 1.3;
}
.bk-support__go { font-size: 11px; color: var(--bs-ink-3, #b6bcc6); }

/* SSS paneli artık gizli çipin değil, destek sekmesinin yanında açılıyor:
   kapsayıcı yükseklikte ortaya yakın bir yere sabitlendi. Kapsayıcıya
   transform VERİLMEMELİ — panel position: fixed, dönüştürülmüş bir ata onun
   konum referansını değiştirir. */
.faq-bot {
  left: 52px;
  bottom: calc(14vh + var(--bk-footbar)) !important;
}

[data-theme="dark"] .bk-support__menu {
  background: #151a20;
  border-color: #2a3138;
}
[data-theme="dark"] .bk-support__head strong,
[data-theme="dark"] .bk-support__txt b { color: #f3f5f7; }
[data-theme="dark"] .bk-support__txt small { color: #7d8593; }
[data-theme="dark"] .bk-support__close { background: #1b2129; color: #a8b0bd; }
[data-theme="dark"] .bk-support__item:hover { background: #1b2129; }

@media (max-width: 860px) {
  .bk-support__tab { width: 34px; padding: 13px 0 14px; }
  .bk-support__menu { left: calc(100% + 8px); width: min(280px, calc(100vw - 56px)); }

  /* ADIM NAVİGASYONU
     Etiket booking-system.css'te gizleniyor ve booking-shell butonları
     esnetiyordu: geri butonu tek başına kaldığında ekranı boydan boya kaplayan
     beyaz şeridin ortasında yalnız bir oka dönüşüyordu. Etiketi geri açıp
     butonu kendi genişliğinde bırakıyoruz; tek başınaysa (is-solo) şerit de
     zeminini bırakıp yüzen bir düğmeye dönüşüyor. */
  .bk-main #stageNav .prev-btn-label { display: inline; }
  .bk-main #stageNav #prevBtn {
    flex: 0 0 auto;
    padding-inline: 16px;
  }
  .bk-main #stageNav.is-solo {
    background: none;
    border-top: 0;
    box-shadow: none;
    padding: 4px 14px calc(4px + env(safe-area-inset-bottom, 0px));
    /* Zeminsiz şerit içeriğin üzerinde tıklamayı engellemesin. */
    pointer-events: none;
  }
  /* Zemini kalkan şeritte açık renkli buton beyaz kartın üzerinde
     kayboluyordu; yüzen düğme koyu. */
  .bk-main #stageNav.is-solo #prevBtn {
    pointer-events: auto;
    background: #0c0e12;
    border: 0;
    color: #fff;
    box-shadow: 0 10px 24px rgba(12, 14, 18, .28);
  }
  .bk-main #stageNav.is-solo #prevBtn i,
  .bk-main #stageNav.is-solo #prevBtn .prev-btn-label { color: #fff; }
}

/* =====================================================================
   TAM EKRAN GÖRSEL GÖRÜNTÜLEYİCİ
   Kart üzerindeki ad/slogan katmanı olmadan fotoğrafın tamamı. Kaydırma
   yerel scroll-snap ile yapılıyor: mobilde parmak hareketi ek kod
   gerektirmiyor, ok tuşları ve yan düğmeler aynı konumu kullanıyor.
   ===================================================================== */
body.bk-lb-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.bk-lb {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: rgba(4, 8, 6, .95);
  opacity: 0;
  transition: opacity .18s ease;
}
.bk-lb.is-open { opacity: 1; }
.bk-lb[hidden] { display: none; }

.bk-lb__track {
  grid-area: 1 / 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.bk-lb__track::-webkit-scrollbar { display: none; }
.bk-lb__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* Üstteki başlık şeridi ve alttaki küçük görseller fotoğrafı kesmesin */
  padding: 56px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}
.bk-lb.has-thumbs .bk-lb__slide { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.bk-lb__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.bk-lb__bar {
  grid-area: 1 / 1;
  align-self: start;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(4, 8, 6, .85), rgba(4, 8, 6, 0));
}
.bk-lb__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 600;
}
.bk-lb__count {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bk-lb__close,
.bk-lb__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.bk-lb__close { flex: 0 0 auto; width: 38px; height: 38px; font-size: 16px; }
.bk-lb__close:hover,
.bk-lb__nav:hover { background: rgba(255, 255, 255, .2); }

.bk-lb__nav {
  grid-area: 1 / 1;
  align-self: center;
  z-index: 2;
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.bk-lb__nav--prev { justify-self: start; margin-left: 12px; }
.bk-lb__nav--next { justify-self: end; margin-right: 12px; }
/* Tek görselli araçlarda yan düğmeler anlamsız */
.bk-lb:not(.has-thumbs) .bk-lb__nav { display: none; }

.bk-lb__thumbs {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-lb__thumbs::-webkit-scrollbar { display: none; }
.bk-lb__thumbs:empty { display: none; }
.bk-lb__thumbs button {
  flex: 0 0 auto;
  width: 62px;
  height: 42px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .18s ease, border-color .18s ease;
}
.bk-lb__thumbs button.is-on { opacity: 1; border-color: var(--bk2-green, #16a34a); }
.bk-lb__thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Telefonda yan oklar parmağa denk geliyor; kaydırma ve küçük görseller yeterli */
@media (max-width: 700px) {
  .bk-lb__nav { display: none !important; }
  .bk-lb__thumbs button { width: 52px; height: 36px; }
  .bk-lb__slide { padding-inline: 6px; }
}

/* =====================================================================
   TC SORGU SONUCU MODALI
   Yeşil başlık bandı + tek kolon bilgi listesi. Kurallar #tcPreviewDialog
   kapsamında; booking-system.css'in eski .tc-preview-* kutuları bu modalda
   artık kullanılmıyor.
   ===================================================================== */
#tcPreviewDialog .dialog--tc-preview {
  position: relative;
  max-width: 460px;
  border-radius: 22px;
  overflow: hidden;
}
.bk-tcd__x {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s ease;
}
.bk-tcd__x:hover { background: rgba(255, 255, 255, .28) }

.bk-tcd__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 58px 19px 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--bk2-green, #12a150), var(--bk2-green-700, #0a6b36));
  color: #fff;
}
.bk-tcd__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: 19px;
}
.bk-tcd__headtxt { min-width: 0 }
.bk-tcd__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.bk-tcd__sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
}

#tcPreviewDialog .dialog__body { padding: 17px 20px 19px }
.bk-tcd__lead {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bs-ink-2, #475569);
}

/* Ad Soyad / Doğum Tarihi satırları (JS .tc-preview-row üretir) */
.bk-tcd__rows {
  border: 1px solid var(--bs-line, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}
.bk-tcd__rows .tc-preview-row {
  display: grid;
  grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--bs-line, #e5e7eb);
  background: none;
  font-size: 13.5px;
}
.bk-tcd__rows .tc-preview-row:last-child { border-bottom: 0 }
.bk-tcd__rows .tc-preview-row__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-ink-3, #94a3b8);
}
.bk-tcd__rows .tc-preview-row__value {
  font-size: 15px;
  font-weight: 800;
  color: var(--bs-ink, #0f172a);
  word-break: break-word;
}

/* İki TC'nin karşılaştırması */
.bk-tcd__tc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(18, 161, 80, .26);
  border-radius: 12px;
  background: var(--bk2-green-soft, #e7f6ee);
}
.bk-tcd__tc-item { min-width: 0; text-align: center }
.bk-tcd__tc-item span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bk2-green-700, #0a6b36);
  opacity: .72;
}
.bk-tcd__tc-item strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bk2-green-700, #0a6b36);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.bk-tcd__tc-eq {
  width: 24px;
  height: 24px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--bk2-green, #12a150);
  color: #fff;
  font-size: 10px;
}

#tcPreviewDialog .dialog__foot {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
}
#tcPreviewDialog .dialog__foot .btn--primary {
  flex: 1 1 auto;
  justify-content: center;
  background: var(--bk2-green, #12a150);
  border-color: var(--bk2-green, #12a150);
  box-shadow: 0 6px 18px rgba(18, 161, 80, .26);
}
#tcPreviewDialog .dialog__foot .btn--primary:hover {
  background: var(--bk2-green-600, #0d8442);
  border-color: var(--bk2-green-600, #0d8442);
}

@media (max-width: 600px) {
  #tcPreviewDialog .dialog--tc-preview { border-radius: 20px 20px 0 0 }
  .bk-tcd__head { padding: 17px 54px 17px 17px }
  .bk-tcd__title { font-size: 16.5px }
  .bk-tcd__icon { width: 40px; height: 40px; font-size: 17px }
  #tcPreviewDialog .dialog__body { padding: 15px 17px 17px }
  #tcPreviewDialog .dialog__foot { padding-inline: 17px }
  #tcPreviewDialog .dialog__foot .btn { width: 100%; flex: 0 0 auto; justify-content: center }
  .bk-tcd__tc-item strong { font-size: 14px }
}

/* =====================================================================
   BİLGİLENDİRME MODALLARI (kasko / depozito)
   TC sonuç modalıyla aynı iskelet: renkli başlık bandı + çerçeveli madde
   listesi. Renk bandı .bk-info--green / .bk-info--dark ile seçilir.
   ===================================================================== */
.dialog--info {
  position: relative;
  max-width: 460px;
  height: auto;
  max-height: min(90vh, calc(100dvh - 2rem));
  border-radius: 22px;
  overflow: hidden;
}
.bk-info__x {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s ease;
}
.bk-info__x:hover { background: rgba(255, 255, 255, .28) }

.bk-info__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 58px 19px 20px;
  color: #fff;
}
.bk-info--green .bk-info__head {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--bk2-green, #12a150), var(--bk2-green-700, #0a6b36));
}
/* Depozito bandı araç kartlarının koyu diliyle eşleşiyor */
.bk-info--dark .bk-info__head {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(18, 161, 80, .30), transparent 62%),
    linear-gradient(135deg, var(--bk2-panel-2, #235034), var(--bk2-dark, #101815));
}
.bk-info__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: 19px;
}
.bk-info__headtxt { min-width: 0 }
.bk-info__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.bk-info__sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
}

.dialog--info .dialog__body {
  flex: 0 1 auto;
  padding: 17px 20px 19px;
}
.bk-info__lead {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bs-ink-2, #475569);
}
.bk-info__lead strong { color: var(--bs-ink, #0f172a); font-weight: 800 }
.bk-info__lead em {
  font-style: normal;
  font-weight: 800;
  color: var(--bk2-green-700, #0a6b36);
}

.bk-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-line, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}
.bk-info__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--bs-line, #e5e7eb);
}
.bk-info__item:last-child { border-bottom: 0 }
.bk-info__ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
  border-radius: 10px;
  background: var(--bk2-green-soft, #e7f6ee);
  color: var(--bk2-green-700, #0a6b36);
  font-size: 14px;
}
.bk-info__txt {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bs-ink-2, #475569);
}
/* Başlık kendi satırında: madde listesi tek blok yazıdan okunur oluyor */
.bk-info__txt strong {
  display: block;
  margin-bottom: 1px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bs-ink, #0f172a);
}

.bk-info__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--bs-line, #e5e7eb);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bs-ink-2, #475569);
}
.bk-info__note i { flex: 0 0 auto; margin-top: 1px; font-size: 15px }
.bk-info__note--warn {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}
.bk-info__note--warn strong { color: #7f1d1d; font-weight: 800 }

/* Araca özel depozito tutarı */
.bk-info__amount {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(18, 161, 80, .26);
  border-radius: 12px;
  background: var(--bk2-green-soft, #e7f6ee);
}
/* Yazar kuralı UA'nın [hidden] kuralını yenerdi; tutar yoksa gizli kalsın */
.bk-info__amount[hidden] { display: none }
.bk-info__amount-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  border-radius: 11px;
  background: var(--bk2-green, #12a150);
  color: #fff;
  font-size: 15px;
}
.bk-info__amount-txt { min-width: 0 }
.bk-info__amount-lbl {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bk2-green-700, #0a6b36);
  opacity: .72;
}
.bk-info__amount-val {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bk2-green-700, #0a6b36);
  font-variant-numeric: tabular-nums;
}
.bk-info__amount-note {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bk2-green-700, #0a6b36);
  opacity: .8;
}

.dialog--info .dialog__foot {
  flex-shrink: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
}
.dialog--info .dialog__foot .btn--primary {
  flex: 1 1 auto;
  justify-content: center;
  background: var(--bk2-green, #12a150);
  border-color: var(--bk2-green, #12a150);
  box-shadow: 0 6px 18px rgba(18, 161, 80, .26);
}
.dialog--info .dialog__foot .btn--primary:hover {
  background: var(--bk2-green-600, #0d8442);
  border-color: var(--bk2-green-600, #0d8442);
}

/* Telefonda alttan açılan sayfa */
@media (max-width: 600px) {
  #kaskoInfoDialog.dialog-overlay,
  #depositInfoDialog.dialog-overlay { align-items: flex-end; padding: 0 }
  .dialog--info {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
  }
  .bk-info__head { padding: 17px 54px 17px 17px }
  .bk-info__title { font-size: 16.5px }
  .bk-info__icon { width: 40px; height: 40px; font-size: 17px }
  .dialog--info .dialog__body { padding: 15px 17px 17px }
  .dialog--info .dialog__foot { padding-inline: 17px }
  .dialog--info .dialog__foot .btn { width: 100%; flex: 0 0 auto; justify-content: center }
  .bk-info__amount-val { font-size: 18px }
}

/* =====================================================================
   KABİS CANLI DOĞRULAMA PANELİ
   Beklenen süre değişken olduğu için ilerleme asimptotik; aşamalar
   sırayla işaretlenir, son aşamada sonuç gelene dek bekler.
   ===================================================================== */
.bk-main .kbs-live {
  padding: 14px 15px 13px;
  border: 1px solid var(--bs-line);
  border-radius: 14px;
  background: var(--bs-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.bk-main .kbs-live.is-complete {
  border-color: rgba(18, 161, 80, .40);
  background: var(--bk2-green-soft, #e7f6ee);
}

.kbs-live__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
/* Taranan ehliyet kartı */
.kbs-live__badge {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #1f2d28, #0e1512);
  color: #fff;
  font-size: 18px;
}
.kbs-live__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(58, 208, 127, .55) 50%, transparent 100%);
  transform: translateY(-110%);
  animation: kbsBeam 1.7s ease-in-out infinite;
}
@keyframes kbsBeam { to { transform: translateY(110%) } }

.kbs-live__title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bs-ink);
}
.kbs-live__now {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bs-ink-2);
}
.kbs-live__pct {
  font-size: 19px;
  font-weight: 800;
  color: var(--bk2-green-700, #0a6b36);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kbs-live__pct small { font-size: 11px; font-weight: 700; opacity: .6 }

.kbs-live__bar {
  position: relative;
  margin-top: 12px;
  height: 5px;
  border-radius: 99px;
  background: var(--bs-line-2, #e9eeec);
  overflow: hidden;
}
.kbs-live__bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--bk2-green, #12a150), #3ad07f);
  transition: width .2s linear;
}
.kbs-live__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: kbsShine 1.5s ease-in-out infinite;
}
.bk-main .kbs-live.is-complete .kbs-live__bar::after { animation: none; opacity: 0 }

@keyframes kbsShine { to { transform: translateX(100%) } }

.kbs-live__steps {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.kbs-live__steps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--bs-ink-3);
  transition: color .25s ease, background .25s ease;
}
.kbs-live__steps li::before {
  content: '';
  width: 15px;
  height: 15px;
  margin-inline: 2px;
  border-radius: 50%;
  border: 2px solid var(--bs-line);
  box-sizing: border-box;
}
.kbs-live__steps li.is-active {
  color: var(--bs-ink);
  font-weight: 600;
  background: var(--bs-tint, #f5f7f6);
}
.kbs-live__steps li.is-active::before {
  border-color: var(--bk2-green, #12a150);
  border-top-color: transparent;
  animation: kbsSpin .7s linear infinite;
}
@keyframes kbsSpin { to { transform: rotate(360deg) } }
.kbs-live__steps li.is-done { color: var(--bs-ink-2) }
.kbs-live__steps li.is-done::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 7.5px;
  display: grid;
  place-content: center;
  color: #fff;
  background: var(--bk2-green, #12a150);
  border-color: var(--bk2-green, #12a150);
  animation: kbsTick .3s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes kbsTick {
  from { transform: scale(.4); opacity: 0 }
  to   { transform: scale(1); opacity: 1 }
}

.kbs-live__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--bs-ink-3);
}

@media (max-width: 420px) {
  .kbs-live__top { gap: 10px }
  .kbs-live__badge { width: 40px; height: 40px; font-size: 16px }
  .kbs-live__pct { font-size: 17px }
  .kbs-live__title { font-size: 13.5px }
}

[data-theme="dark"] .bk-main .kbs-live.is-complete {
  background: rgba(18, 161, 80, .12);
}
[data-theme="dark"] .bk-main .kbs-live__pct { color: #4ed48c }
[data-theme="dark"] .kbs-live__bar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

/* =====================================================================
   ARAÇ SEÇİMİ ONAY POP-UP'I
   Araç kartıyla aynı dil: görsel üzerinde segment rozeti + ad + slogan,
   altta beyaz gövde ve yeşil aksiyon. Modal .bk-main dışında (body altında)
   durduğu için tüm kurallar #vehicleConfirmDialog kapsamında yazılır.
   ===================================================================== */
#vehicleConfirmDialog .dialog--vehicle {
  position: relative;
  max-width: 430px;
  border-radius: 22px;
  overflow: hidden;
}
#vehicleConfirmDialog .dialog__body { padding: 0; }

.bk-vdlg__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(10, 15, 13, .42);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}
.bk-vdlg__x:hover { background: rgba(10, 15, 13, .74); transform: scale(1.05); }

/* ---- Görsel bandı ---- */
.bk-vdlg__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bk2-card, #0d1714);
  overflow: hidden;
}
.bk-vdlg__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bk-vdlg__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 10, .52) 0%, rgba(8, 12, 10, 0) 32%, rgba(8, 12, 10, .10) 52%, rgba(8, 12, 10, .80) 100%);
}
.bk-vdlg__noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: rgba(255, 255, 255, .22);
  font-size: 42px;
}
.bk-vdlg__badges {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.bk-vdlg__cat,
.bk-vdlg__flag {
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.bk-vdlg__cat {
  background: rgba(255, 255, 255, .92);
  color: #101815;
}
.bk-vdlg__flag {
  background: var(--bk2-green, #12a150);
  color: #fff;
}
.bk-vdlg__head {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  z-index: 2;
}
.bk-vdlg__name {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.bk-vdlg__tag {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .80);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* ---- Gövde ---- */
.bk-vdlg__in { padding: 17px 19px 5px; }

.bk-vdlg__price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.bk-vdlg__price-lbl {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bs-ink-3, #94a3b8);
}
.bk-vdlg__price-val {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--bs-ink, #0f172a);
}
.bk-vdlg__price-old {
  display: inline-block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bs-ink-3, #94a3b8);
  text-decoration: line-through;
}
.bk-vdlg__price-side {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  padding: 8px 13px;
  border-radius: 12px;
  background: var(--bk2-green-soft, #e7f6ee);
  text-align: center;
}
.bk-vdlg__price-side span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bk2-green-700, #0a6b36);
  opacity: .78;
}
.bk-vdlg__price-side strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--bk2-green-700, #0a6b36);
}
.bk-vdlg__save {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bk2-green-700, #0a6b36);
}

/* Teknik kutu — kart gövdesindeki hücrelerin aynısı (.bk-main dışında
   olduğumuz için kurallar burada tekrar yazılır) */
.bk-vdlg__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.bk-vdlg__specs .flt-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 6px;
  min-width: 0;
  padding: 9px 4px;
  border-left: 1px solid #e6e9ee;
  text-align: center;
}
.bk-vdlg__specs .flt-spec:first-child { border-left: 0; }
.bk-vdlg__specs .flt-spec dt {
  flex: 0 0 auto;
  margin: 0;
  color: #111827;
  font-size: 11.5px;
  line-height: 1;
}
.bk-vdlg__specs .flt-spec dd {
  margin: 0;
  color: #111827;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: normal;
}

/* Depozito notu */
.bk-vdlg__dep {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #fde9b8;
  border-left: 3px solid #e0a409;
  border-radius: 10px;
  background: #fffaf0;
}
.bk-vdlg__dep > i {
  margin-top: 1px;
  font-size: 16px;
  color: #b45309;
}
.bk-vdlg__dep strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #7c4a05;
}
.bk-vdlg__dep span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #8a6224;
}

/* Şanzıman seçimi — segment kontrolü */
.bk-vdlg__opt { margin-top: 16px; }
.bk-vdlg__opt-lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bs-ink, #0f172a);
}
.bk-vdlg__seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f4f3;
}
.bk-vdlg__segbtn {
  padding: 10px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bs-ink-2, #475569);
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.bk-vdlg__segbtn:hover { color: var(--bs-ink, #0f172a); }
.bk-vdlg__segbtn.is-active {
  background: #fff;
  color: var(--bk2-green-700, #0a6b36);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 1px rgba(18, 161, 80, .30);
}

/* Alt aksiyon çubuğu — birincil buton yeşil */
#vehicleConfirmDialog .dialog__foot {
  padding: 14px 19px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--bs-line, #e5e7eb);
  gap: 10px;
}
#vehicleConfirmDialog .dialog__foot .btn--primary {
  flex: 1 1 auto;
  justify-content: center;
  background: var(--bk2-green, #12a150);
  border-color: var(--bk2-green, #12a150);
  box-shadow: 0 6px 18px rgba(18, 161, 80, .28);
}
#vehicleConfirmDialog .dialog__foot .btn--primary:hover {
  background: var(--bk2-green-600, #0d8442);
  border-color: var(--bk2-green-600, #0d8442);
}
#vehicleConfirmDialog .dialog__foot .btn--ghost { flex: 0 0 auto; }

/* Telefonda alttan açılan sayfa */
@media (max-width: 560px) {
  #vehicleConfirmDialog.dialog-overlay { align-items: flex-end; padding: 0; }
  #vehicleConfirmDialog .dialog--vehicle {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 94dvh;
  }
  .bk-vdlg__media { aspect-ratio: 16 / 9; }
  .bk-vdlg__name { font-size: 19px; }
  .bk-vdlg__price-val { font-size: 27px; }
  /* Ana aksiyon üstte tam genişlik, vazgeç altta */
  #vehicleConfirmDialog .dialog__foot { flex-direction: column-reverse; }
  #vehicleConfirmDialog .dialog__foot .btn {
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-main .steps-rail__line::after { transition: none; }
  .bk-support__menu { animation: none; }
  .bk-lb { transition: none; }
  .bk-vdlg__x { transition: none; }
}