/* =====================================================================
   BOOKING FOCUS 2026 — reservation.php'ye özel "odak" katmanı
   booking-2026.css'ten SONRA yüklenir ve yalnızca iki şeyi hedefler:
     1) Sol kolondaki rezervasyon özetini adımlı sürecin pusulası yapmak
        (kaçıncı adımdayız, sırada ne var, toplam ne).
     2) Adım 2'deki araç seçim kartlarını sadeleştirip tek bir belirgin
        eyleme ("Bu aracı seç") yönlendirmek.
   Kapsam her zaman .bk-main / .bk-side: anasayfa ve araclar.php kartları
   (.flt-card--home / .flt-card--list) bu dosyadan etkilenmez.
   ===================================================================== */

/* =====================================================================
   1) ÖZET PANELİ — adım pusulası
   ===================================================================== */

.bk-side .summary-panel__head {
    display: block;
}

/* Adım göstergesi: "Adım 2 / 5 · Araç Seçimi" + ince ilerleme çubuğu.
   Kullanıcı ne kadar yol kaldığını görünce süreci bırakma eğilimi düşer. */

.bk-prog {
    margin-top: 10px;
}

.bk-prog__txt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bs-ink-3);
    letter-spacing: .01em;
}

.bk-prog__txt b {
    color: var(--bk2-green-600);
    font-size: 13px;
    font-weight: 800;
}

.bk-prog__txt span {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-ink);
    font-weight: 700;
}

.bk-prog__bar {
    height: 5px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--bs-line);
    overflow: hidden;
}

.bk-prog__bar>i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bk2-green), var(--bk2-green-600));
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

/* Doldurulmuş özet satırının ikonu yeşile döner: tamamlanan bilgi ile
   bekleyen bilgi ayrışsın. "Henüz araç seçilmedi" gibi boş durumlar
   .summary-empty taşıdığı için kapsam dışında kalır. */

.bk-side .summary-block:not([hidden]):not(:has(.summary-empty)) .bk-srow__ico {
    color: var(--bk2-green-600);
}

/* Toplam tutar panelin çapası: en büyük ve tek renkli vurgu. */

.bk-side .summary-price__total {
    align-items: center;
    margin-top: 12px;
    padding: 12px 13px;
    border-top: 0;
    border-radius: 12px;
    background: var(--bk2-green-soft);
}

.bk-side .summary-price__total-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--bk2-green-700);
}

.bk-side .summary-price__total-value {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bk2-green-700);
}

/* Sırada ne var: tek satır, sakin, yönlendirici. */

.bk-nexthint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* .summary-panel__inner iç boşluk vermiyor (overflow: hidden kutu). */
    margin: 14px 16px 16px;
    padding: 10px 12px;
    border: 1px dashed var(--bs-line);
    border-radius: 11px;
    background: var(--bs-tint);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bs-ink-2);
}

.bk-nexthint i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--bk2-green-600);
    font-size: 11px;
}

/* =====================================================================
   2) ARAÇ SEÇİM KARTLARI — sadeleştirme
   ===================================================================== */

/* Kartlar arasında biraz daha nefes: yoğun ızgara "listeye göz atma"
   hissi veriyordu, seçim ekranında her kart tek tek değerlendirilmeli. */

.bk-main #vehicleGrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr));
    gap: 16px;
}

.bk-main .flt-card.vehicle-tile {
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bk-main .flt-card.vehicle-tile:hover {
    border-color: var(--bk2-green);
    transform: translateY(-3px);
}

/* Seçilen kart: kalın yeşil çerçeve + sağ üstte onay işareti. Diyalogdan
   çıkınca hangi aracın seçildiği kartlara bakılınca anlaşılsın. */

.bk-main .flt-card.vehicle-tile.is-selected {
    position: relative;
    border-color: var(--bk2-green);
    box-shadow: 0 0 0 2px var(--bk2-green) inset, 0 18px 40px -26px rgba(18, 161, 80, .85);
}

.bk-main .flt-card.vehicle-tile.is-selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bk2-green);
    color: #fff;
    font-size: 11px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
}

/* Seçili kartta ana buton "seçildi" diline geçer (metin CSS ile değişmez;
   yalnızca renk/kontrast sakinleşir ki bir sonraki adım öne çıksın). */

.bk-main .flt-card.vehicle-tile.is-selected .flt-btn--primary {
    background: var(--bk2-green-700);
}

/* Favori kalbi kartın ana eylemiyle yarışmasın: seçim ekranında ikincil. */

.bk-main .flt-fav {
    opacity: .62;
}

.bk-main .flt-fav:hover,
.bk-main .flt-fav.is-on {
    opacity: 1;
}

/* Kasko / depozito bilgisi: iki dolu koyu buton yerine sessiz bağlantı
   satırı. Kartta yalnızca TEK dolu buton kalır — o da asıl eylem. */

.bk-main .flt-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: -2px 0 0;
    padding: 0 2px;
}

.bk-main .flt-links button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--bk2-on-dark-2);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .22);
    text-underline-offset: 3px;
}

.bk-main .flt-links button:hover {
    background: none;
    color: #fff;
    text-decoration-color: currentColor;
}

/* Fiyat paneli tek vurgu noktası: kutu biraz büyür, tutar öne çıkar. */

.bk-main .flt-price {
    padding: 11px 12px;
    border-radius: 11px;
}

.bk-main .flt-price__big {
    font-size: 22px;
}

/* Asıl eylem: daha yüksek, tam genişlik, okla ileri hissi. */

.bk-main .vehicle-tile .flt-btn--primary {
    min-height: 46px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 12px 26px -16px rgba(18, 161, 80, .9);
}

.bk-main .vehicle-tile .flt-btn--primary .fa-arrow-right {
    margin-left: 2px;
    transition: transform .18s ease;
}

.bk-main .vehicle-tile:hover .flt-btn--primary .fa-arrow-right {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .bk-main .flt-card.vehicle-tile,
    .bk-main .flt-card.vehicle-tile:hover,
    .bk-prog__bar>i,
    .bk-main .vehicle-tile .flt-btn--primary .fa-arrow-right {
        transition: none;
        transform: none;
    }
}

/* Mobilde sol kolon gizli; adım pusulası alt dock başlığında görünür. */

.bk-sumdock__step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--bk2-green);
    text-transform: uppercase;
}