/* Autocomplete dropdown — autopopup.png ile birebir uyum.
   Mevcut CSS'in 24x24 ikon boyutuna dokunulmuyor, sadece rengi maviye cevriliyor.
   Font boyutlari da kompakt. */
.autocomplete-dropdown .list-group-item [class^="icon-"] {
    color: #1050E5 !important;     /* mavi (default gri override) */
}
.autocomplete-dropdown .list-group-item .ac-name {
    font-weight: 500;              /* medium, asiri bold degil */
    color: #242E4A;                /* gray-900 navy */
    font-size: .9375rem;           /* ~15px */
    line-height: 1.25;
}
.autocomplete-dropdown .list-group-item .ac-sub {
    color: #7a839f;                /* gray-600 */
    font-size: .8125rem;           /* ~13px */
    line-height: 1.25;
    margin-top: 1px;
}

/* Tum yolcu butonlari icin tek satir + ellipsis (sayfa kaymasini engeller). */
.passenger-label {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.min-width-0      { min-width: 0; }
.passenger-btn-inner { min-width: 0; }

/* Listing'de autocomplete popup'i .bg-white kutusunun sol-alt kosesinden
   bassin diye o kutuyu pozisyon ancestor'i yapip top/left override. */
.flight-search-web .search-input.flex-column > .bg-white.rounded-1 {
    position: relative;
}
.flight-search-web .search-input-container .autocomplete-dropdown {
    width: 480px;
    top: 100%;
    left: 0;
    right: auto;
}

/* Yolcu butonu sutununu sabit tut (icerik uzayinca diger sutunlari
   daraltmasin); buton da kendi icinde overflow:hidden + ellipsis. */
.flight-search-web .flight-search-container > .d-flex.flex-column { min-width: 0; }
.flight-search-web #desktop-passenger-btn {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Dropdown-ticket / dropdown-type-web li hover'da active gibi gorunsun
   (orjinal CSS'te sadece .active'e style var). */
.dropdown-ticket li:hover {
    background-color: #1050e50d;
    color: #ffac1c;
    cursor: pointer;
}

/* Dropdown li yazilari tek satirda kalsin; dropdown gerekirse genisler. */
.dropdown-ticket li,
.dropdown-ticket li span {
    white-space: nowrap;
}
.sort-dropdown-web .dropdown-menu {
    width: auto !important;
    min-width: 100%;
}

/* Easepick (datepicker) — mobile CSS override'i KALDIRILDI.
   Position:fixed + transform:translate(-50%,-50%) bundled JS'in
   popup pozisyon hesabiyla cakisip picker'i hic acilmaz hale
   getirdi. Default bundled davranisa dondu — picker input altina
   kendi mantigi ile yerlesir. Kucuk grid hucrelerinde tasarsa
   native scroll ile gorunur. */

/* Datepicker input + ikon + saran kutu hover'da parmak imleci. */
#departure, #round-trip,
#desktop-departure, #desktop-round-trip,
#departure + .icon-calendar, .icon-calendar,
:is(.bg-white):has(> .d-flex > :is(#departure, #round-trip, #desktop-departure, #desktop-round-trip)),
.add-return > button {
    cursor: pointer;
}

/* Arama formu: autocomplete'ten SECILMEYEN (gecersiz) kalkis/varis kutusu — mavi
   kenarlik uyarisi. Odak ring'i mobilde kapali oldugundan bu sinif MEDIA'DAN
   BAGIMSIZ (mobil + desktop) calisir; boylece mobilde de gorsel uyari verir. */
.bb-field-invalid {
    border-color: #1050E5 !important;
    box-shadow: 0 0 0 1px rgba(16, 80, 229, .55) !important;
    transition: box-shadow .12s ease, border-color .12s ease;
}

/* Article breadcrumb: yatay scroll edilebilir, sayfa-seviye horizontal scroll dogurmaz.
   Separator (::before SVG arrow) hem oktan once (.75rem padding-left on next item)
   hem ok'tan sonra (.75rem padding-right on ::before) explicit gap'a sahip. */
.article-breadcrumb {
    min-width: 0;
    max-width: 100%;
}
.article-breadcrumb .breadcrumb-item {
    white-space: nowrap;
    flex-shrink: 0;
}
.article-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: .75rem;
}
.article-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding-right: .75rem;
}

/* Breadcrumb link hover: default text-decoration:none (Bootstrap), uzerine
   gelince underline gozuksun. Aktif (son) item'a uygulanmaz cunku <a> degil
   sadece text. focus-visible ile klavyeyle gezenler de gorur. */
.article-breadcrumb .breadcrumb-item a {
    text-decoration: none;
    transition: color .15s ease;
}
.article-breadcrumb .breadcrumb-item a:hover,
.article-breadcrumb .breadcrumb-item a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* H1 wrapper mobilde dikey ortala — pt = pb esit. Once sadece pt:5px verdik
   ama h1 ust+alt arasi simetrik olmadigi icin gorsel olarak ust kenara
   yapisik kaliyordu. Hem ust hem alt 12px ile h1 icin esit nefes alani.
   Desktop'ta zaten pt-md-3 (16px) bagli — etkilenmez. */
@media (max-width: 767.98px) {
    .form-heading-wrap {
        padding-top:    12px;
        padding-bottom: 0;
    }
    .form-heading-wrap > h1 {
        margin-bottom: -10px;
    }
}

/* Makale icindeki gorseller sola yasli — padding/margin sifir, kenara hapsedilmez.
   max-width parent kadar (rich-content disina tasmasin), aspect-ratio korumak icin
   height: auto. CKEditor wrapper <figure> elementi de margin/padding sifirlanir.
   Border-radius'u koruyoruz — kose yumusakligi gorsel acidan onemli. */
.rich-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: .5rem;
}
.rich-content figure,
.rich-content figure.image {
    margin: 0;
    padding: 0;
    text-align: left;
}
/* Float'lari container icine hapsetme: CKEditor 'image-style-block-align-left/right'
   float:left/right uretiyor; clearfix olmazsa float disari sizip alttaki bolumlerin
   (Benzer Konular, sidebar) onunde durabiliyor (mobilde gorunmemesinin sebebi). */
.rich-content::after { content: ""; display: table; clear: both; }

/* Body icindeki linkler — mavi + underline ile gorsel olarak link olduklari belli olsun.
   Hover/focus'ta daha koyu mavi ile geri bildirim. text-underline-offset link metniyle
   kosmasin diye 2px. Aktif/visited de ayni mavi tonunda kalir (bilet sitesi icin tutarli
   UX). Image link'lerini etkilemesin diye `:not(:has(img))` korumasi var. */
.rich-content a:not(:has(img)) {
    color: #1050e5;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.rich-content a:not(:has(img)):hover,
.rich-content a:not(:has(img)):focus-visible {
    color: #0a3aaf;
    text-decoration: underline;
}
.rich-content a:not(:has(img)):visited {
    color: #1050e5;
}

/* Mobilde CKEditor'in image float align'larini iptal et — dar viewport'ta float
   altinda kalan icerik (Benzer Konular dahil) sıkışıp gorunmez hale geliyordu.
   Desktop'ta float davranisi korunur.
   Ek: portre formatli image'lar (ornegin 832x1248) mobilde tum ekrani kaplayip
   altindaki Benzer Konular section'ini scroll disina itiyordu — max-height: 60vh
   + object-fit: contain ile aspect-ratio'yu bozmadan ekran yuksekliginin yarisina
   sigdir. */
@media (max-width: 991.98px) {
    .rich-content figure.image-style-block-align-left,
    .rich-content figure.image-style-block-align-right,
    .rich-content figure.image-style-align-left,
    .rich-content figure.image-style-align-right,
    .rich-content figure.image-style-side {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem 0 !important;
        display: block;
    }
    .rich-content figure.image-style-block-align-left img,
    .rich-content figure.image-style-block-align-right img,
    .rich-content figure.image-style-align-left img,
    .rich-content figure.image-style-align-right img,
    .rich-content figure.image-style-side img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: contain;
        margin: 0 auto;
    }
    .rich-content img {
        max-height: 60vh;
        object-fit: contain;
    }
}

/* Article desktop autocomplete dropdown — listing form (x-flight-search-web)
   desktop popup'iyla AYNI gorunum: 480px sabit genislik, input box'in tam altinda
   (top: 100%, left: 0), input kart'inin sol kenarindan hizali.

   Bundled CSS'te article-spesifik width 360px override var (specificity 0,4,0:
   .main-search.main-search-web.main-search-article .autocomplete-dropdown). Onu
   gecip listing davranisini almak icin specificity 0,5,0+ ile yaziyoruz.

   Anchor: bundled genel rule popup'i position:absolute + left:-1.08rem;
   right:-1.08rem ile parent input-box'a goreli yerlestiriyor; listing'de
   parent .bg-white.rounded-1 divi position:relative yapilip popup o kutuya
   goreli (top:100%, left:0) yerlesiyor. Article'da da ayni anchor'i kurduk. */
/* Mobil (<md): bundled article-spesifik `width: 360px` override'ini iptal
   et (kart 380-400px iken popup darliyor). width:auto'ya cekince bundled
   general rule devreye girer (`left:-1.08rem; right:-1.08rem`), popup
   kart genisligi + her iki kenardan ~17px tasarak ortar — anasayfa mobil
   davranisi ile birebir.

   Desktop (md+): listing form ile ayni 480px sabit popup, input box'in
   altinda (top:100%, left:0). Parent kart `position:relative` yapilir
   ki popup ona goreli yerlessin. */
@media (max-width: 767.98px) {
    .main-search.main-search-web.main-search-article .autocomplete-dropdown {
        width: auto;
    }
}
@media (min-width: 768px) {
    .main-search.main-search-web.main-search-article .search-input.flex-column > .bg-white.rounded-1 {
        position: relative;
    }
    .main-search.main-search-web.main-search-article .search-input-container .autocomplete-dropdown {
        width: 480px;
        top: 100%;
        left: 0;
        right: auto;
    }
}

/* Yolcu picker + Bilet sinifi dropdown pozisyonu.

   YOLCU picker (.dropdown-search-web):
     - Mobil (<md): tam ekran genisliginde alttan acilan bottom-sheet
       (article-page-web.html referans davranisi). Bootstrap Popper
       inline style'larini geçmek icin tum position prop'lari !important.
     - Desktop (md+): butonun hemen altindan klasik dropdown.

   BILET SINIFI (.dropdown-type-web): hem mobil hem desktop klasik
   dropdown — col-6 buton dar oldugu icin bottom-sheet gereksiz +
   sag sutun ekran disina tasmasin diye sag kenara hizali.

   Parent .d-flex.flex-column.w-100 div'e position-relative Bootstrap
   utility class'i verildi (eski `:has()` bagimliligi yerine; eski mobil
   tarayicilarda :has() desteklenmedigi icin parent relative olamiyordu). */
#passenger-btn { overflow: hidden; }

/* Klavye/mouse odak gostergesi — aktif alan kutusu ince mavi ring alir
   (anasayfa/sonuc formlariyla ayni). Scope: .main-search-article. */
/* SADECE masaustu (>=768px): mobilde odak ring'i istenmiyor (mobil from/to kutulari
   da .border-bottom-2.rounded-1 tasidigi icin media query sart). */
@media (min-width: 768px) {
    .main-search-article .border-bottom-2.rounded-1:focus-within {
        border-color: #1050E5 !important;
        transition: border-color .12s ease;
    }
    .main-search-article button[type="submit"]:focus,
    .main-search-article button[type="submit"]:focus-visible {
        box-shadow: 0 0 0 1px rgba(255, 172, 28, .7) !important;
        outline: none;
    }
}
.main-search-article input::selection { background: #1050E5; color: #fff; }

/* Mobil datepicker backdrop'i (z:1040) eklendiginde easepick takvimi (bundle
   default z:9) altinda kalmasin — anasayfadaki ile ayni override. */
.easepick-wrapper { z-index: 1060 !important; }

.main-search-article .dropdown-menu.dropdown-type-web {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 4px !important;
    z-index: 1050;
}
.main-search-article .dropdown-menu.dropdown-type-web.show {
    display: block !important;
}
@media (max-width: 767.98px) {
    .main-search-article .dropdown-menu.dropdown-search-web {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 1050;
        border-radius: 8px 8px 0 0;
    }
    .main-search-article .dropdown-menu.dropdown-search-web.show {
        display: block !important;
    }
    .main-search-article .dropdown-menu.dropdown-type-web {
        min-width: 100%;
    }
    /* Sagdaki bilet sinifi sutununun dropdown'i sol tarafa acilsin —
       ekran tasmasini engelle. Yolcu sutunu (col 1) zaten soldan acilir
       ki yeterli alan kalir. */
    .main-search-article .col-6:last-child .dropdown-menu.dropdown-type-web {
        left: auto !important;
        right: 0 !important;
    }
}
@media (min-width: 768px) {
    .main-search-article .dropdown-menu.dropdown-search-web {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 4px !important;
        z-index: 1050;
    }
    .main-search-article .dropdown-menu.dropdown-search-web.show {
        display: block !important;
    }
}

/* Sidebar rota kartlari — anasayfadaki "Rotanizi Belirleyin" ile ayni
   hover zoom efekti + sabit aspect-ratio. img'in width/height attr'leri
   sayfa yuklenirken layout'u rezerve eder (CLS azalir); CSS aspect-ratio
   wrap'i sabit oranda tutar, object-fit:cover img'i kirpip dolduruyor —
   dosyanin orijinal oranindan bagimsiz olarak her kart ayni boyutta. */
.route-card-link { display: block; text-decoration: none; }
.route-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 31 / 20;     /* 310x200 — anasayfa kartlariyla ayni oran */
    line-height: 0;
    background-color: #f4f7ff; /* yuklenirken bos gozukmesin */
}
.route-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    will-change: transform;
}
.route-card-link:hover .route-card-img,
.route-card-link:focus-visible .route-card-img {
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .route-card-img { transition: none; }
    .route-card-link:hover .route-card-img,
    .route-card-link:focus-visible .route-card-img { transform: none; }
}

/* Body'deki CKEditor float-left image'lar (image-style-block-align-left)
   rich-content disina tasip alttaki section'i ortebiliyor. clear:both
   related-articles'i floatin altina dusurur. */
.related-articles {
    clear: both !important;
    position: relative;        /* yeni stacking context — float'larin uzerinde rendering garantisi */
    z-index: 1;
}

.ilgili-liste { list-style: none; margin: 0; padding: 1rem; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid #f1f1f1; border-radius: var(--bs-border-radius-lg); }
@media (min-width: 576px) { .ilgili-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .ilgili-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem; } }
@media (min-width: 992px) { .ilgili-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.related-articles .related-article-pill {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%;
    padding: 1rem; border-radius: var(--bs-border-radius); text-decoration: none;
    font-size: .9375rem;     /* ~15px */
    font-weight: 500; line-height: 1.25; color: #242e4a;
    background: #f7f9fc;
    border: 1px solid #e6ebf3;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
    min-height: 56px;
}
.related-articles .related-article-pill:hover {
    background: #fff;
    border-color: var(--bs-primary, #1050e5);
    transform: translateY(-1px);
}
/* Ok: icomoon icon-right-arrow glifi, beyaz daire */
.related-articles .related-article-pill::after {
    content: "\e923"; font-family: icomoon; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d8dfeb;
    color: #7a839f;
    font-size: .65rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.related-articles .related-article-pill:hover::after {
    background: var(--bs-primary, #1050e5);
    border-color: var(--bs-primary, #1050e5);
    color: #fff;
}

.airline-routes { clear: both; position: relative; z-index: 1; }
/* Kart ızgarası: 1 / 2 (576+) / 3 (992+) / 4 (1200+) sütun; eski Bootstrap row/col düzeniyle aynı genişlikler */
.ar-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Kart: logo | rota + tarih | uçak ikonu (::after) | fiyat + "başlayan fiyatlarla" */
.ar-card {
    display: grid; grid-template-columns: 30px 8px minmax(0, 1fr) 8px 14px 6px auto; grid-template-rows: auto auto;
    align-content: center; height: 54px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 6px 12px; text-decoration: none; transition: all .2s; overflow: hidden;
}
.ar-card:hover { border-color: var(--bs-primary, #1050e5); box-shadow: 0 2px 8px rgba(16, 80, 229, .15); transform: translateY(-1px); }
.ar-card img { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; width: 26px; height: 26px; object-fit: contain; }
.ar-route { grid-column: 3; grid-row: 1; align-self: end; font-size: .82rem; font-weight: 600; color: #1f2937; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-date { grid-column: 3; grid-row: 2; align-self: start; font-size: .7rem; color: #6b7280; margin-top: 1px; white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.ar-d { color: #3b82f6; }
.ar-card::after { content: ""; grid-column: 5; grid-row: 1 / 3; align-self: center; width: 14px; height: 14px; background: url(/assets/img/ikon/ucak-turuncu.png) center / contain no-repeat; }
.ar-card.cheap::after { background-image: url(/assets/img/ikon/ucak-yesil.png); }
.ar-price { grid-column: 7; grid-row: 1; align-self: end; justify-self: end; font-size: .9rem; font-weight: 700; color: #f48024; white-space: nowrap; line-height: 1.1; }
.ar-card.cheap .ar-price { color: #22c55e; }
.ar-price small { font-size: .65rem; font-weight: 600; color: #6b7280; }
.ar-from { grid-column: 7; grid-row: 2; align-self: start; justify-self: end; font-size: .6rem; color: #6b7280; line-height: 1.2; margin-top: 2px; white-space: nowrap; }
.airline-routes .airline-routes-more[disabled] { opacity: .6; }

#passenger-btn { overflow: hidden; }

/* Klavye/mouse odak gostergesi — aktif alan kutusu modern mavi ring alir.
   Tum alan kutulari ortak `.border-bottom-2.rounded-1` tasidigi icin tek kural
   hepsini (Nereden/Nereye, Gidis/Donus tarih, Yolcu, Bilet Sinifi) kapsar.
   :focus-within sayesinde ic input/buton odaklaninca kutu isaretlenir. */
/* SADECE masaustu (>=768px): mobilde odak ring'i istenmiyor (klavye nav yok). */
@media (min-width: 768px) {
    .main-search-web .border-bottom-2.rounded-1:focus-within {
        border-color: #1050E5 !important;
        transition: border-color .12s ease;
    }
    /* UCUS ARA butonu ayri stil (border-bottom-2 tasimaz) — odaklaninca ince secondary ring. */
    .main-search-web .search-btn-web:focus,
    .main-search-web .search-btn-web:focus-visible {
        box-shadow: 0 0 0 1px rgba(255, 172, 28, .7) !important;
        outline: none;
    }
}
/* Native mavi metin-secim vurgusu — secili input metni belirgin gozuksun. */
.main-search-web input::selection { background: #1050E5; color: #fff; }

/* Mobil tarih backdrop'i .main-hero (root z:21) icinde z:1040. easepick takvimi
   body root'a dusuk z-index'le eklendigi icin .main-hero'nun ALTINDA (backdrop'in
   altinda) kaliyor, secim yapilamiyordu. Wrapper'i root'ta backdrop'in USTUNE cikar
   (z:21 hero context'inin uzerinde) ki takvim gorunur/tiklanabilir olsun. */
.easepick-wrapper { z-index: 1060 !important; }

/* Yolcu + Bilet sinifi dropdown pozisyon kurali — hem mobil hem desktop.
   Parent flex-column div'lere position-relative direkt class olarak
   eklendi (eski `:has()` kuralinin yerine). Eski mobil tarayicilarda
   :has() destegi olmadigindan parent relative olamiyordu, dropdown
   form'un sol kenarina kayiyordu. */
.main-search-web .dropdown-menu.dropdown-search-web,
.main-search-web .dropdown-menu.dropdown-type-web {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 4px !important;
    z-index: 1050;
}
.main-search-web .dropdown-menu.dropdown-search-web.show,
.main-search-web .dropdown-menu.dropdown-type-web.show {
    display: block !important;
}

/* Mobil (<=767.98px):
   - Yolcu picker: tam ekran genisliginde alttan acilan bottom-sheet
     (article-page-web.html referans davranisi). Bootstrap dropdown
     .show class'ini ekliyor; CSS rule'lari devreye giriyor.
   - Bilet sinifi: klasik dropdown — col-6 buton dar oldugu icin
     bottom-sheet gereksiz; sag sutun ekran disina tasmasin diye sag
     kenara hizali.

   @verbatim/@endverbatim ZORUNLU — Blade @-direktif parser'i <style>
   icindeki @media'i kismen yiyor, CSS rule'u browser'a bozulmus
   gidip bottom-sheet hic uygulanmiyordu. */
@media (max-width: 767.98px) {
    .main-search-web .dropdown-menu.dropdown-search-web {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 1050;
        border-radius: 8px 8px 0 0;
    }
    .main-search-web .dropdown-menu.dropdown-search-web.show {
        display: block !important;
    }
    .main-search-web .dropdown-menu.dropdown-type-web {
        min-width: 100%;
    }
    .main-search-web .col-6:last-child .dropdown-menu.dropdown-type-web {
        left: auto !important;
        right: 0 !important;
    }
}

/* Rotalar kartlari — sabit aspect-ratio + hover zoom efekti.
   Wrap aspect-ratio: 31/20 (310x200) ile her kart ayni yuksekligi tutar; img
   object-fit:cover ile dolduruyor, dosyanin orijinal oraninin onemi yok.
   img width/height attr'leri sayfa yuklenirken layout'u rezerve eder (CLS azalir).
   overflow:hidden wrap'te oldugu icin scale(1.06) zoom kart sinirlarini tasmaz.
   Erisilebilirlik: prefers-reduced-motion ile devre disi. */
.route-card-link { display: block; text-decoration: none; }
.route-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 31 / 20;
    line-height: 0;
    background-color: #f4f7ff;
}
.route-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    will-change: transform;
}
.route-card-link:hover .route-card-img,
.route-card-link:focus-visible .route-card-img {
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .route-card-img { transition: none; }
    .route-card-link:hover .route-card-img,
    .route-card-link:focus-visible .route-card-img { transform: none; }
}

/* Tum sehirler kart grid'i — anasayfa "Rotanizi Belirleyin" + makale sidebar
   ile ayni stilde: sabit aspect-ratio (310x200), object-fit cover, hover zoom.
   img width/height attr'leri sayfa yuklenirken layout rezerve eder (CLS sifir).
   Erisilebilirlik: prefers-reduced-motion ile hover efekti devre disi. */
.all-cities-section .route-card-link { display: block; text-decoration: none; }
.all-cities-section .route-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 31 / 20;
    line-height: 0;
    background-color: #f4f7ff;
}
.all-cities-section .route-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    will-change: transform;
}
.all-cities-section .route-card-link:hover .route-card-img,
.all-cities-section .route-card-link:focus-visible .route-card-img {
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .all-cities-section .route-card-img { transition: none; }
    .all-cities-section .route-card-link:hover .route-card-img,
    .all-cities-section .route-card-link:focus-visible .route-card-img { transform: none; }
}

/* bbToast — Bootstrap CSS'in `.toast` class'ina dayaniyor ama Bootstrap JS'e
   BAGIMLI DEGIL (bundle Bootstrap'i global expose etmeyebiliyor). Show/hide
   transition'i kendimiz yonetiyoruz. */
#bb-toast-container { z-index: 1100; }
#bb-toast-container .toast { opacity: 0; transition: opacity .15s linear; display: block; }
#bb-toast-container .toast.bb-show { opacity: 1; }

/* Eskiden satır içi style="" olan kurallar (2026-10-22) */
#search-loading-overlay { touch-action: none; overscroll-behavior: contain; }
.bb-44 { width: 44px !important; height: 44px !important; }
.bb-fs6 { font-size: 6px !important; }
.bb-hero-zemin { height: 330px; background: linear-gradient(180deg, #f4f7ff 0%, #e6ebf8 100%); }
.bb-hero-zemin--kisa { height: 260px; }

/* Footer (2026-10-22): eski Bootstrap row/col + yardimci sinif yapisinin birebir karsiligi */
.ft, .ft-mobil { background: #fff; }
.ft { display: none; border-top: 3px solid #ffac1c; }
.ft h6 { font-size: 1rem; font-weight: 600; line-height: 1.2; color: #242e4a; margin: 0; padding-bottom: 1rem; }
.ft p { margin: 0; }
.ft-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ft-menu { display: none; }
.ft-menu h6 { margin-bottom: 1rem; }
.ft-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.ft-menu a { display: flex; align-items: center; gap: .5rem; font-size: .875em; font-weight: 600; line-height: 1.5; color: #242e4a; }
.ft-menu a::before { content: "\e922"; font-family: icomoon; font-weight: 400; font-size: 6px; line-height: 6px; color: #fff; background: #ffac1c; border-radius: 50rem; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-font-smoothing: antialiased; }
.ft-sol, .ft-sag { display: flex; flex-direction: column; gap: 1.5rem; }
.ft-sag { align-items: flex-end; }
.ft-bulten { display: flex; align-items: center; padding: .5rem; border: 1px solid var(--bs-border-color); border-bottom: 2px solid #d0d6e5; border-radius: var(--bs-border-radius-sm); }
.ft-bulten img { flex-shrink: 0; margin: 0 1rem 0 .5rem; }
.ft-bulten .form-control { flex: 1 1 auto; min-width: 0; width: auto; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.ft-bulten .btn { flex-shrink: 0; }
.ft-ikonlar { display: flex; align-items: center; gap: .5rem; }
.ft-ikonlar a { width: 44px; height: 44px; border-radius: 50%; background: #242e4a; display: flex; align-items: center; justify-content: center; }
.ft-ikonlar--mavi a { background: #1050e5; }
.ft-uygulama { display: flex; align-items: center; gap: .5rem; }
.ft-uygulama a { display: block; }
.ft-cagri { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; background: #f5f5f5; border-radius: var(--bs-border-radius-sm); }
.ft-cagri::before { content: "\e91d"; font-family: icomoon; font-weight: 400; font-size: 1.25rem; line-height: 1; color: #fff; background: #1050e5; border-radius: 50rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-font-smoothing: antialiased; }
.ft-cagri span, .ft-mobil-cagri span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; color: #3c4766; }
.ft-cagri b, .ft-mobil-cagri b { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin-top: .25rem; color: #3c4766; }
.ft-guven { display: flex; align-items: center; gap: 1rem; }
.ft-guven b { font-weight: 600; }
.ft-kunye, .ft-alt { border-top: 1px solid #f1f1f1; }
.ft-kunye { padding: 1rem 0; font-size: .875em; line-height: 1.5; color: #3c4766; text-align: center; }
.ft-kunye .container-xl { display: flex; flex-direction: column; align-items: center; row-gap: .25rem; }
.ft-kunye p { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; row-gap: .25rem; }
.ft-kunye b, .ft-mobil-alt p b { font-weight: 600; color: #242e4a; }
.ft-alt { padding: 1.5rem 0; }
.ft-alt .container-xl { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
.ft-imza { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.ft-alt-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .875em; line-height: 1.5; }
.ft-alt-menu a { font-weight: 500; color: #3c4766; }
.ft-mobil-ust { display: flex; align-items: center; justify-content: space-between; padding: 1rem .75rem; border-bottom: 1px solid #dde2ef; }
.ft-mobil-cagri { display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--bs-border-radius); }
.ft-mobil-cagri span { align-items: flex-end; color: #7a839f; }
.ft-mobil-cagri b { color: #1050e5; }
.ft-mobil-cagri::after { content: "\e91d"; font-family: icomoon; font-weight: 400; font-size: 1.25rem; line-height: 1; color: #fff; background: #1050e5; border-radius: 50rem; padding: .5rem; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; }
.ft-mobil-alt { padding: 1rem 0; text-align: center; }
.ft-mobil-alt > b { display: block; font-weight: 600; color: #242e4a; padding-bottom: .25rem; }
.ft-mobil-alt p { margin: 0; font-size: .875em; line-height: 1.25; color: #3c4766; padding-bottom: .25rem; }
.ft-mobil-alt .ft-mobil-adres { font-size: 12px; line-height: 1.5; padding-bottom: .5rem; }
@media (min-width: 768px) {
    .ft { display: block; }
    .ft-mobil { display: none; }
    .ft-alt .container-xl { flex-direction: row; }
    .ft-imza { justify-content: flex-start; }
    .ft-alt-menu { justify-content: flex-start; gap: 1.5rem; }
}
@media (min-width: 992px) {
    .ft-ust { grid-template-columns: calc(25% - 1.125rem) minmax(0, 1fr) minmax(0, 1fr); padding-top: 3rem; padding-bottom: 3rem; }
    .ft-menu { display: block; }
}

/* Mobil menu (offcanvas) ogeleri: elmas ikon ::before (PNG dosyasi), ayirici cizgiler (2026-10-22) */
.mobil-menu a { display: flex; align-items: center; padding: 1rem 0; font-weight: 600; }
.mobil-menu a::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 1rem; background: url(/assets/img/ikon/elmas.png) center / contain no-repeat; }
.mobil-menu li + li a { border-top: var(--bs-border-width) solid var(--bs-border-color); }
.mobil-menu li:last-child a { border-bottom: var(--bs-border-width) solid var(--bs-border-color); }

/* SSS akordiyonu: soru ikonu ::before (icomoon), eski fw-semibold/text-dark/rounded/gap-3 karsiliklari (2026-10-22) */
.sss .accordion-button { gap: 1rem; font-weight: 600; color: rgba(var(--bs-dark-rgb), 1) !important; border-radius: var(--bs-border-radius) !important; }
.sss .accordion-button::before { content: "\e905"; font-family: icomoon; font-weight: 400; font-size: 1rem; line-height: 1; color: #ffac1c; width: 1rem; height: 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; }

/* Form basligi olmayan sayfalarda (kurumsal) sayfa basligi h1 — Bootstrap fs-2 + fw-semibold karsiligi (2026-10-22) */
.sayfa-baslik { font-size: calc(1.325rem + .9vw); font-weight: 600; line-height: 1.2; color: #242e4a; margin-bottom: 1rem; }
@media (min-width: 1200px) { .sayfa-baslik { font-size: 2rem; } }