/* Filo teması — kurumsal kiralama sitelerinin düzenine göre yazılmış özgün stil.
   Bütün bileşenler bu dosyada; şablon paketi veya üçüncü parti CSS yok. */

:root {
    /* Renk skalası logodan alındı: lacivert #032251 + kırmızı #DA1727.
       Nötr tonlar da lacivere kırık, böylece gri alanlar sıcak/soğuk çakışmaz. */
    --filo-vurgu: #DA1727;
    --filo-vurgu-koyu: #A81020;
    --filo-koyu: #032251;
    --filo-koyu-2: #061B3C;
    --filo-metin: #14203D;
    --filo-soluk: #667089;
    --filo-kenar: #DDE3EC;
    --filo-zemin: #F2F5F9;
    /* Kurumsal duruş: köşeler az yuvarlak, gölgeler ince. */
    --filo-yaricap: 4px;
    --filo-golge: 0 1px 2px rgba(10, 20, 45, .06), 0 8px 20px rgba(10, 20, 45, .06);
    --filo-golge-yukselti: 0 2px 4px rgba(10, 20, 45, .07), 0 14px 32px rgba(10, 20, 45, .10);

    /* Tek hareket dili: bütün geçişler aynı eğri ve süreyi paylaşır. */
    --filo-egri: cubic-bezier(.4, 0, .2, 1);
    --filo-sure: .3s;
    --filo-sure-kisa: .2s;
    --filo-sure-uzun: .6s;
}

/* Hareket azaltma tercihine saygı: süreler sıfırlanır, düzen bozulmaz. */
@media (prefers-reduced-motion: reduce) {
    :root { --filo-sure: .01ms; --filo-sure-kisa: .01ms; --filo-sure-uzun: .01ms; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--filo-metin);
    font-family: "Barlow Semi Condensed", "Archivo Narrow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; }

a { color: var(--filo-vurgu); text-decoration: none; }
a:hover { color: var(--filo-vurgu-koyu); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 14px; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; }

.filo-kapsayici {
    width: min(100% - 2.5rem, 1240px);
    margin-inline: auto;
}

.filo-sayfa { display: flex; flex-direction: column; min-height: 100vh; }
.filo-govde { flex: 1; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Üst bant ---------- */
.filo-ust-bant {
    background: var(--filo-vurgu);
    color: #fff;
    font-size: 13px;
    letter-spacing: .02em;
}

.filo-ust-bant .filo-kapsayici {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 20px;
    min-height: 34px;
}

.filo-ust-bant a { color: #fff; }
.filo-ust-bant a:hover { color: rgba(255, 255, 255, .82); }
.filo-ust-bant .filo-ayirac { opacity: .55; }

/* ---------- Üstbilgi ---------- */
.filo-ustbilgi {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--filo-kenar);
    box-shadow: 0 1px 0 rgba(10, 20, 45, .03);
}

.filo-ustbilgi .filo-kapsayici {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 86px;
}

.filo-logo { display: inline-flex; align-items: center; }
.filo-logo img { max-height: 46px; width: auto; display: block; }

.filo-logo-yazi {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--filo-metin);
}

.filo-logo-yazi span { color: var(--filo-vurgu); }

.filo-menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.filo-menu > ul > li { position: relative; }

.filo-menu > ul > li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin-inline: 2px;
    background: var(--filo-kenar);
    vertical-align: middle;
}

.filo-menu > ul > li > a {
    display: inline-block;
    padding: 10px 14px;
    color: var(--filo-metin);
    font-size: 15px;
    font-weight: 500;
}

.filo-menu > ul > li > a:hover,
.filo-menu > ul > li.aktif > a { color: var(--filo-vurgu); }

.filo-alt-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 45;
    min-width: 15rem;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    box-shadow: var(--filo-golge);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--filo-sure-kisa) var(--filo-egri), transform var(--filo-sure-kisa) var(--filo-egri), visibility var(--filo-sure-kisa);
}

.filo-menu > ul > li:hover > .filo-alt-menu,
.filo-menu > ul > li:focus-within > .filo-alt-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filo-alt-menu a { display: block; padding: 9px 18px; color: var(--filo-metin); font-size: 14px; }
.filo-alt-menu a:hover { color: var(--filo-vurgu); background: var(--filo-zemin); }

.filo-ust-eylem { display: flex; align-items: center; gap: 10px; }

.filo-menu-dugme {
    display: none;
    padding: 9px 12px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: #fff;
    color: var(--filo-metin);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Düğmeler ---------- */
.filo-dugme,
.filo-dugme-ikincil,
.filo-dugme-cizgi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--filo-yaricap);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--filo-sure-kisa) var(--filo-egri), color var(--filo-sure-kisa) var(--filo-egri), border-color var(--filo-sure-kisa) var(--filo-egri), box-shadow var(--filo-sure) var(--filo-egri), transform var(--filo-sure) var(--filo-egri);
}

.filo-dugme { background: var(--filo-vurgu); color: #fff; }
.filo-dugme:hover { background: var(--filo-vurgu-koyu); color: #fff; transform: translateY(-1px); box-shadow: var(--filo-golge); }

.filo-dugme-ikincil { background: var(--filo-koyu); color: #fff; }
.filo-dugme-ikincil:hover { background: var(--filo-koyu-2); color: #fff; transform: translateY(-1px); box-shadow: var(--filo-golge); }

.filo-dugme-cizgi { background: transparent; border-color: var(--filo-kenar); color: var(--filo-metin); }
.filo-dugme-cizgi:hover { border-color: var(--filo-vurgu); color: var(--filo-vurgu); background: rgba(218, 23, 39, .04); }

.filo-dugme-tam { width: 100%; }

/* ---------- Form alanları ---------- */
.filo-alan { margin-bottom: 14px; }

.filo-etiket {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.filo-girdi,
.filo-secim,
.filo-metin-alani {
    /* min-width: 0 sart: izgara/esnek cocugunda alanin kendi icerik genisligi
       kutuyu tasiriyor. iOS Safari'de date girdisi ozellikle bunu yapiyor. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: #fff;
    color: var(--filo-metin);
    font: inherit;
    font-size: 15px;
}

/* iOS Safari tarih girdisini kendi olculerinde cizip kutudan tasiriyor:
   yerlesimi biz belirleyelim. */
.filo-girdi[type="date"],
.filo-girdi[type="time"],
.filo-girdi[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-height: 44px;
    text-align: start;
}

/* iOS Safari'de asil tasiran parca ic duzenleme alani: kendi genisligini
   dayatip kutuyu sisiriyor ve metni ortaliyor. Genisligi ve hizasi burada
   sabitleniyor. */
.filo-girdi[type="date"]::-webkit-datetime-edit,
.filo-girdi[type="time"]::-webkit-datetime-edit,
.filo-girdi[type="datetime-local"]::-webkit-datetime-edit {
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: start;
}

.filo-girdi[type="date"]::-webkit-date-and-time-value {
    width: 100%;
    margin: 0;
    text-align: start;
}

.filo-girdi[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.filo-girdi[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; }

.filo-metin-alani { min-height: 150px; resize: vertical; }

.filo-girdi:focus,
.filo-secim:focus,
.filo-metin-alani:focus {
    outline: none;
    border-color: var(--filo-vurgu);
    box-shadow: 0 0 0 3px rgba(218, 23, 39, .12);
}

/* Yerel select oku kenara yapismasin: kendi chevron'umuz + sag dolgu */
.filo-secim {
    appearance: none;
    padding-inline: 14px 40px;
    background-image: var(--filo-chevron);
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 12px;
}

:root { --filo-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7378' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); }

.filo-onay { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---------- Kahraman ---------- */
.filo-kahraman {
    position: relative;
    padding: 46px 0 54px;
    background: var(--filo-koyu) center / cover no-repeat;
    color: #fff;
}

.filo-kahraman::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 16, 38, .55), rgba(4, 16, 38, .74));
}

.filo-kahraman .filo-kapsayici { position: relative; z-index: 2; }

.filo-kahraman-izgara {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* Kahraman yan kartı: görselin üstünde alt köşede etiket */
.filo-yan-kart {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    padding: 18px;
    border-radius: var(--filo-yaricap);
    background: var(--filo-koyu-2) center / cover no-repeat;
    overflow: hidden;
}

.filo-yan-kart::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
}

.filo-yan-kart-etiket {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--filo-yaricap);
    background: #fff;
    color: var(--filo-metin);
    font-size: 14px;
    font-weight: 600;
}

.filo-yan-kart-etiket { transition: background-color var(--filo-sure) var(--filo-egri), color var(--filo-sure) var(--filo-egri); }
.filo-yan-kart:hover .filo-yan-kart-etiket { background: var(--filo-vurgu); color: #fff; }

/* Görsel kartlarda örtü hafifçe açılır: hareket abartısız kalsın. */
.filo-yan-kart::before { transition: background-color var(--filo-sure) var(--filo-egri); }
.filo-yan-kart:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); }

.filo-yan-kolon { display: grid; gap: 20px; }
.filo-yan-kolon .filo-yan-kart { min-height: 180px; }

/* Kahraman rezervasyon formu */
.filo-rezervasyon-kutu {
    padding: 24px;
    border-radius: var(--filo-yaricap);
    background: var(--filo-koyu);
    box-shadow: var(--filo-golge);
}

.filo-rezervasyon-kutu .filo-etiket { color: rgba(255, 255, 255, .82); }
.filo-rezervasyon-kutu .filo-onay { color: rgba(255, 255, 255, .82); }

.filo-rezervasyon-basligi {
    margin-bottom: 16px;
    color: #fff;
    font-size: 20px;
}

/* Eksik alan uyarisi: tek yanda kalin kenarlik yerine hafif vurgu tonlu zemin
   ve esit ince cerceve; koyu kutunun icinde sakin durur. */
.filo-form-uyari {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(218, 23, 39, .55);
    border-radius: var(--filo-yaricap);
    background: rgba(218, 23, 39, .16);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.5;
}

.filo-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.filo-ikili > * { min-width: 0; }

/* ---------- Bölüm başlıkları ---------- */
.filo-bolum { padding: 88px 0; }
.filo-bolum-gri { background: var(--filo-zemin); }
.filo-bolum-koyu { background: var(--filo-koyu); color: #fff; }
.filo-bolum-koyu h2, .filo-bolum-koyu h3 { color: #fff; }

.filo-bolum-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 34px;
}

.filo-bolum-basi p { margin: 0; color: var(--filo-soluk); }
.filo-bolum-basi h2 { margin: 0; }
.filo-bolum-basi-orta { justify-content: center; text-align: center; }

.filo-ust-etiket {
    display: block;
    margin-bottom: 10px;
    color: var(--filo-soluk);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.filo-ust-etiket::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-inline-end: 10px;
    background: var(--filo-vurgu);
    vertical-align: middle;
}

/* ---------- Izgaralar ---------- */
.filo-izgara { display: grid; gap: 24px; }
.filo-izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Yan panelli düzenler. Satır içi style yerine sınıf: satır içi tanım medya
   sorgusunu ezdiği için dar ekranda düzen tek sütuna inemiyordu. */
.filo-yan-duzen { grid-template-columns: 300px minmax(0, 1fr); }
.filo-ikili-duzen { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.filo-ikili-duzen-ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }

.filo-izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filo-izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Araç kartı ----------
   Referans düzen: tek renk zeminde künye ve fiyat üstte, aracın yan profili
   kartın alt kenarına oturur, düğme sağ alt köşede durur. */
.filo-arac-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--filo-yaricap);
    background: var(--filo-koyu);
    color: #fff;
    overflow: hidden;
    transition: box-shadow var(--filo-sure) var(--filo-egri), transform var(--filo-sure) var(--filo-egri);
}

.filo-arac-kart:hover { transform: translateY(-2px); box-shadow: var(--filo-golge-yukselti); }

.filo-arac-ust { padding: 20px 22px 14px; }

.filo-arac-sinif {
    display: block;
    margin-bottom: 4px;
    color: #FF8A94;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Ad ile künye arasındaki ince çizgi referanstaki ayracın karşılığı. */
.filo-arac-ad {
    padding-bottom: 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 21px;
}

.filo-arac-ad a { color: #fff; }
.filo-arac-ad a:hover { color: rgba(255, 255, 255, .85); }

.filo-arac-teknik {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0 0 12px;
    list-style: none;
    font-size: 13.5px;
    opacity: .9;
}

.filo-arac-teknik span { margin-inline: 4px; opacity: .5; }

.filo-arac-fiyat { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.filo-arac-fiyat small { font-size: 13px; font-weight: 400; opacity: .75; }

/* Görsel kartın altına yaslanır; render şeffaf olduğu için zemin rengi görünür. */
/* Referanstaki gibi iki katman: künye koyu zeminde, araç açık zemin bandında.
   Araç bandın üst kenarına taşar, bu yüzden bant kırpma yapmaz. */
.filo-arac-gorsel {
    display: block;
    margin-top: auto;
    padding: 0 10px;
    background: var(--filo-zemin);
}

.filo-arac-gorsel img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    margin-top: -7%;
    object-fit: contain;
    object-position: center bottom;
}

/* Düğme açık zemin bandının sağ alt köşesinde, aracın üstüne biner. */
.filo-arac-alt {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
}

.filo-arac-alt .filo-dugme { padding: 10px 18px; font-size: 14px; }

/* Panelden yüklenen fotoğraf render değil: kırpılmadan, kenarlıklı gösterilir. */
.filo-arac-gorsel.filo-arac-foto { padding: 0; }
.filo-arac-gorsel.filo-arac-foto img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Kampanya bandı ----------
   Kurumsal duruş: geniş kırmızı zemin yerine antrasit; vurgu rengi düğme ve
   göstergede kalır. */
.filo-kampanya {
    padding: 48px 0 34px;
    background: var(--filo-koyu);
}

/* Slaytlar ust uste durur; etkin olan gorunur. Yukseklik en uzun slayta gore
   sabitlenir ki gecis sirasinda sayfa ziplamasin. */
/* Slaytlar mutlak konumda ve gorsel kenardan tasabiliyor: pencere kirpiyor,
   boylece orta genislikte yatay tasma olusmuyor. */
.filo-kampanya-pencere { position: relative; min-height: 250px; overflow: hidden; }

.filo-kampanya-slayt {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 34px 40px;
    border-radius: var(--filo-yaricap);
    background: #fff;
    border: 1px solid var(--filo-kenar);
    /* Yeni slayt sagdan kayarak girer; cikan sola gider. */
    transform: translateX(28px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--filo-sure-uzun) var(--filo-egri), transform var(--filo-sure-uzun) var(--filo-egri), visibility var(--filo-sure-uzun);
}

.filo-kampanya-slayt.etkin { transform: translateX(0); opacity: 1; visibility: visible; }

/* Üst satır tanıtıcı, başlık taşıyıcı: boyut farkı net olsun. */
.filo-kampanya-ust {
    margin: 0 0 10px;
    color: var(--filo-soluk);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.filo-kampanya-slayt h2 { margin: 0 0 12px; color: var(--filo-metin); font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.filo-kampanya-ozet { margin: 0 0 20px; max-width: 46ch; color: var(--filo-soluk); }
.filo-kampanya-gorsel { justify-self: end; }
.filo-kampanya-gorsel img { max-height: 190px; width: auto; display: block; }

/* Ok + nokta gostergesi (bant ve vitrin ortak kullanir) */
.filo-kaydirac-kumanda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 100%;
    margin-top: 18px;
}

.filo-ok {
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.filo-ok:hover { opacity: .75; }
.filo-noktalar { display: flex; align-items: center; gap: 8px; }

/* Etkin gosterge kisa noktadan uzun kapsule doner. Dugme 34px genislikte
   sabit durur; iki katman ust uste cizilir ve gecis yalniz opaklikla yurur.
   Boylece ne komsu noktalar yeniden yerlesir ne de kapsul yatay olceklenip
   elipse doner. */
.filo-nokta {
    position: relative;
    width: 34px;
    height: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.filo-nokta::before,
.filo-nokta::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 10px;
    margin: auto;
    border-radius: 999px;
    transition: opacity var(--filo-sure) var(--filo-egri);
}

/* Pasif durum: kucuk nokta */
.filo-nokta::before { width: 10px; background: rgba(255, 255, 255, .55); }

/* Etkin durum: tam genislikte kapsul */
.filo-nokta::after { width: 34px; background: #fff; opacity: 0; }

.filo-nokta.etkin::before { opacity: 0; }
.filo-nokta.etkin::after { opacity: 1; }

/* Vitrin koyu zemin uzerinde degil; kumandasi koyu renk kullanir */
.filo-vitrin .filo-ok { color: var(--filo-metin); }
.filo-vitrin .filo-nokta::before { background: rgba(20, 32, 61, .28); }
.filo-vitrin .filo-nokta::after { background: var(--filo-vurgu); }

/* ---------- Kampanya kart şeridi ---------- */
.filo-kart-seridi {
    padding: 0 0 72px;
    background: var(--filo-koyu);
    overflow: hidden;
}

/* Kartlar ortadan disa dogru kucultulup soluklastirilir; ortadaki one gelir. */
.filo-kart-sahne {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    perspective: 1400px;
}

.filo-kampanya-kart {
    position: absolute;
    width: 240px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    overflow: hidden;
    color: var(--filo-metin);
    transition: transform var(--filo-sure-uzun) var(--filo-egri), opacity var(--filo-sure-uzun) var(--filo-egri);
}

.filo-kampanya-kart[data-konum="0"]:hover { box-shadow: 0 22px 48px rgba(0, 0, 0, .34); }
.filo-kampanya-kart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.filo-kampanya-kart-govde { padding: 14px 16px 18px; }
.filo-kampanya-kart-govde h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.filo-kampanya-kart-govde p { margin: 0; color: var(--filo-soluk); font-size: 13px; }

/* Konum sinifları: -2 -1 0 +1 +2 (JS atar) */
.filo-kampanya-kart[data-konum="0"] { transform: translateX(0) scale(1); z-index: 5; opacity: 1; }
.filo-kampanya-kart[data-konum="-1"] { transform: translateX(-165px) scale(.88) rotateY(16deg); z-index: 4; opacity: .95; }
.filo-kampanya-kart[data-konum="1"] { transform: translateX(165px) scale(.88) rotateY(-16deg); z-index: 4; opacity: .95; }
.filo-kampanya-kart[data-konum="-2"] { transform: translateX(-310px) scale(.78) rotateY(22deg); z-index: 3; opacity: .85; }
.filo-kampanya-kart[data-konum="2"] { transform: translateX(310px) scale(.78) rotateY(-22deg); z-index: 3; opacity: .85; }
.filo-kampanya-kart[data-konum="gizli"] { transform: translateX(0) scale(.6); opacity: 0; z-index: 1; pointer-events: none; }

/* ---------- Araç sınıfı vitrini ---------- */
.filo-vitrin {
    position: relative;
    padding: 64px 0 54px;
    background: var(--filo-zemin) center bottom / cover no-repeat;
}

.filo-vitrin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(242, 245, 249, .9) 35%, rgba(242, 245, 249, .55));
}

.filo-vitrin .filo-kapsayici { position: relative; z-index: 2; }

.filo-vitrin-baslik {
    margin-bottom: 34px;
    text-align: center;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 500;
}

.filo-vitrin-baslik strong { font-weight: 800; color: var(--filo-metin); }

.filo-vitrin-sahne {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    min-height: 260px;
}

.filo-vitrin-oge {
    flex: 0 0 auto;
    width: 260px;
    text-align: center;
    color: var(--filo-metin);
    opacity: .68;
    transform: scale(.82);
    transition: transform var(--filo-sure-uzun) var(--filo-egri), opacity var(--filo-sure-uzun) var(--filo-egri);
}

.filo-vitrin-oge.etkin { width: 420px; opacity: 1; transform: scale(1); }
.filo-vitrin-oge img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; }
.filo-vitrin-etiket { display: block; margin-top: 10px; font-weight: 600; font-size: 15px; }
.filo-vitrin-oge.etkin .filo-vitrin-etiket { font-size: 20px; }
/* DOM sirasi degil, konum belirler: etkin sinif her zaman ortada durur. */
.filo-vitrin-oge { order: 4; }
.filo-vitrin-oge.komsu-sol { order: 1; }
.filo-vitrin-oge.etkin { order: 2; }
.filo-vitrin-oge.komsu-sag { order: 3; }
.filo-vitrin-oge:not(.etkin):not(.komsu-sol):not(.komsu-sag) { display: none; }

.filo-vitrin-alt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

/* ---------- Sayfa bandı ---------- */
.filo-sayfa-banti {
    position: relative;
    padding: 64px 0;
    background: var(--filo-koyu) center / cover no-repeat;
    color: #fff;
}

.filo-sayfa-banti::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 16, 38, .84), rgba(4, 16, 38, .45));
}

.filo-sayfa-banti .filo-kapsayici { position: relative; z-index: 2; }
.filo-sayfa-banti h1 { margin: 0 0 8px; color: #fff; }

.filo-kirinti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

.filo-kirinti a { color: rgba(255, 255, 255, .82); }
.filo-kirinti a:hover { color: #fff; }
.filo-kirinti li + li::before { content: "/"; margin-inline-end: 8px; opacity: .6; }

/* ---------- Yan panel / filtre ---------- */
.filo-yan {
    padding: 22px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: var(--filo-zemin);
}

/* Mobil filtre düğmesi: masaüstünde panel zaten açık olduğu için gizli durur. */
.filo-filtre-dugme { display: none; }

.filo-filtre-rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--filo-vurgu);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.filo-filtre-ok { margin-inline-start: auto; transition: transform var(--filo-sure) var(--filo-egri); }
.filo-filtre-dugme[aria-expanded="true"] .filo-filtre-ok { transform: rotate(180deg); }

.filo-yan-baslik { margin-bottom: 16px; font-size: 18px; }

.filo-filtre-grup { margin-bottom: 20px; }
.filo-filtre-grup:last-of-type { margin-bottom: 0; }

.filo-filtre-grup h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

.filo-filtre-liste { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.filo-filtre-liste label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.filo-liste-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.filo-liste-basi p { margin: 0; color: var(--filo-soluk); }
.filo-liste-basi form { min-width: min(100%, 16rem); }

/* ---------- İçerik kartları ---------- */
.filo-kart {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: #fff;
    transition: border-color var(--filo-sure) var(--filo-egri), box-shadow var(--filo-sure) var(--filo-egri);
}

.filo-kart:hover { border-color: #C3CCDC; box-shadow: var(--filo-golge); }

.filo-kart-gorselli { padding: 0; overflow: hidden; }

/* Tek basina duran gorsel kutulari (detay sayfalari) icerik yuksekligini alir;
   .filo-kart'in height:100% kurali burada bos alan biraktiriyordu. */
figure.filo-kart { height: auto; }
.filo-kart-gorselli img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.filo-kart-govde { padding: 20px 22px 24px; }
.filo-kart-meta { margin-bottom: 8px; color: var(--filo-soluk); font-size: 13px; }

.filo-ikon-cizim { width: 24px; height: 24px; }

.filo-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: var(--filo-yaricap);
    background: rgba(218, 23, 39, .08);
    color: var(--filo-vurgu);
    font-size: 22px;
}

/* Kırmızı başlıklı bilgi kutusu (iletişim sayfası) */
.filo-bilgi-kutu { margin-bottom: 18px; border-radius: var(--filo-yaricap); overflow: hidden; }

.filo-bilgi-kutu-basi {
    padding: 12px 18px;
    background: var(--filo-vurgu);
    color: #fff;
    font-weight: 700;
}

.filo-bilgi-kutu-govde { padding: 16px 18px; background: var(--filo-zemin); }
.filo-bilgi-kutu-govde p { margin: 0 0 8px; }
.filo-bilgi-kutu-govde p:last-child { margin-bottom: 0; }

/* ---------- Özellik listesi / tablo ---------- */
.filo-ozellik-liste { padding: 0; margin: 0; list-style: none; }

.filo-ozellik-liste li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--filo-kenar);
}

.filo-ozellik-liste li:last-child { border-bottom: 0; }
.filo-ozellik-liste span { color: var(--filo-soluk); }

.filo-tablo-sarmal { overflow-x: auto; }
.filo-tablo { width: 100%; min-width: 40rem; border-collapse: collapse; }

.filo-tablo th, .filo-tablo td {
    padding: 13px 15px;
    text-align: start;
    border-bottom: 1px solid var(--filo-kenar);
    white-space: nowrap;
}

.filo-tablo th { background: var(--filo-zemin); font-weight: 600; }

/* ---------- Akordiyon (SSS) ---------- */
.filo-akordiyon {
    margin-bottom: 12px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: #fff;
    overflow: hidden;
}

.filo-akordiyon > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.filo-akordiyon > summary::-webkit-details-marker { display: none; }
.filo-akordiyon > summary::after { content: "+"; color: var(--filo-vurgu); font-size: 20px; }
.filo-akordiyon[open] > summary::after { content: "–"; }
.filo-akordiyon[open] > summary { border-bottom: 1px solid var(--filo-kenar); }
.filo-akordiyon-govde { padding: 16px 20px; color: var(--filo-soluk); }

/* ---------- Bildirim ---------- */
.filo-bildirim {
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--filo-yaricap);
    background: rgba(218, 23, 39, .07);
}

.filo-bildirim-olumlu { background: rgba(22, 163, 74, .1); }
.filo-bildirim ul { padding-inline-start: 18px; margin: 0; }

/* ---------- Sayfalama ---------- */
.filo-sayfalama { margin-top: 36px; }

.filo-sayfalama ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.filo-sayfalama a, .filo-sayfalama span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--filo-kenar);
    border-radius: var(--filo-yaricap);
    background: #fff;
    color: var(--filo-metin);
    font-weight: 600;
}

.filo-sayfalama a:hover { border-color: var(--filo-vurgu); color: var(--filo-vurgu); }
.filo-sayfalama .aktif span { background: var(--filo-vurgu); border-color: var(--filo-vurgu); color: #fff; }
.filo-sayfalama .pasif span { opacity: .45; }

/* ---------- Alt bilgi ---------- */
.filo-altbilgi { padding: 56px 0 0; background: var(--filo-koyu); color: rgba(255, 255, 255, .78); }
.filo-altbilgi a { color: rgba(255, 255, 255, .78); }
.filo-altbilgi a:hover { color: #fff; }
.filo-altbilgi h4 { margin-bottom: 16px; color: #fff; font-size: 16px; }
.filo-altbilgi-logo { max-height: 44px; margin-bottom: 18px; }

.filo-altbilgi-izgara {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
    gap: 28px;
}

.filo-alt-liste { padding: 0; margin: 0; list-style: none; }
.filo-alt-liste li { padding: 7px 0; }

.filo-cagri-kutu {
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--filo-yaricap);
}

.filo-cagri-kutu strong { display: block; color: #fff; font-size: 19px; }

.filo-sosyal { display: flex; gap: 10px; margin-top: 16px; }

.filo-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.filo-alt-serit {
    margin-top: 44px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}

.filo-alt-serit .filo-kapsayici {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ---------- Yardımcılar ---------- */
.bos-durum { padding: 56px 0; text-align: center; color: var(--filo-soluk); font-size: 17px; }
.filo-metin-soluk { color: var(--filo-soluk); }
.filo-orta { text-align: center; }
.filo-bosluk-ust { margin-top: 26px; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1300px) {
    .filo-kahraman-izgara { grid-template-columns: 1fr 1.4fr 1fr; }
    .filo-kahraman-izgara > .filo-yan-kart:last-child { display: none; }
    .filo-kampanya-kart[data-konum="-2"], .filo-kampanya-kart[data-konum="2"] { opacity: 0; pointer-events: none; }
    .filo-vitrin-oge { width: 210px; }
    .filo-vitrin-oge.etkin { width: 340px; }
}

@media (max-width: 1100px) {
    .filo-kahraman-izgara { grid-template-columns: 1fr 1fr; }
    .filo-kahraman-izgara > .filo-yan-kart:first-child { display: none; }
    .filo-altbilgi-izgara { grid-template-columns: repeat(3, 1fr); }
    .filo-izgara-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .filo-yan-duzen,
    .filo-ikili-duzen,
    .filo-ikili-duzen-ters { grid-template-columns: 1fr; }

    /* Filtre paneli katlanır: sayfa açılışında araç listesi hemen görünsün. */
    .filo-filtre-dugme {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 13px 16px;
        border: 1px solid var(--filo-kenar);
        border-radius: var(--filo-yaricap);
        background: var(--filo-zemin);
        color: var(--filo-metin);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    /* Yalniz filtre paneli katlanir; .filo-yan sinifi rezervasyon ozeti gibi
       baska yan kutularda da kullaniliyor, onlar gizlenmemeli. */
    .filo-filtre-panel { display: none; margin-top: 10px; }
    .filo-filtre-panel.acik { display: block; }
    .filo-filtre-panel .filo-yan-baslik { display: none; }
    .filo-kampanya-slayt { grid-template-columns: 1fr; padding: 24px; text-align: center; }
    .filo-kampanya-gorsel { justify-self: center; }
    .filo-kampanya-gorsel img { max-height: 130px; }
    .filo-kampanya-pencere { min-height: 330px; }
    .filo-kampanya-kart { width: 220px; }
    .filo-kampanya-kart[data-konum="-1"] { transform: translateX(-160px) scale(.82) rotateY(12deg); }
    .filo-kampanya-kart[data-konum="1"] { transform: translateX(160px) scale(.82) rotateY(-12deg); }
    .filo-vitrin-oge:not(.etkin) { display: none; }
    .filo-vitrin-oge.etkin { width: min(100%, 420px); }

    .filo-menu {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        display: none;
        padding: 12px 20px 18px;
        background: #fff;
        border-bottom: 1px solid var(--filo-kenar);
        box-shadow: var(--filo-golge);
    }

    .filo-menu.acik { display: block; }
    .filo-menu > ul { flex-direction: column; align-items: stretch; }
    .filo-menu > ul > li + li::before { display: none; }
    .filo-menu > ul > li > a { padding: 11px 0; border-bottom: 1px solid var(--filo-kenar); }

    .filo-alt-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 14px;
    }

    .filo-menu-dugme { display: inline-flex; }
    .filo-ustbilgi .filo-kapsayici { position: relative; min-height: 72px; }
    .filo-izgara-3, .filo-izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filo-kampanya-izgara { grid-template-columns: 1fr; }
    .filo-altbilgi-izgara { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    /* Kahraman kutusu ekranin tamamini kaplamasin: dolgu ve bosluklar kisilir. */
    .filo-rezervasyon-kutu { padding: 18px 16px; }
    .filo-rezervasyon-basligi { margin-bottom: 12px; font-size: 18px; }
    .filo-rezervasyon-kutu .filo-alan { margin-bottom: 10px; }
    .filo-rezervasyon-kutu .filo-etiket { margin-bottom: 4px; font-size: 12.5px; }
    .filo-rezervasyon-kutu .filo-girdi,
    .filo-rezervasyon-kutu .filo-secim { padding-block: 9px; font-size: 15px; }
    .filo-rezervasyon-kutu .filo-ikili { gap: 10px; }
    .filo-rezervasyon-kutu .filo-dugme { padding-block: 11px; }

    .filo-kahraman-izgara { grid-template-columns: 1fr; }
    .filo-kampanya-slayt { position: static; opacity: 1; visibility: visible; }
    .filo-kampanya-slayt:not(.etkin) { display: none; }
    .filo-kampanya-pencere { min-height: 0; }
    .filo-kart-sahne { min-height: 330px; }
    .filo-kampanya-kart { width: 200px; }
    .filo-kampanya-kart[data-konum="-1"], .filo-kampanya-kart[data-konum="1"] { opacity: 0; pointer-events: none; }
    .filo-kahraman-izgara > .filo-yan-kolon { display: none; }
    .filo-izgara-2, .filo-izgara-3, .filo-izgara-4 { grid-template-columns: 1fr; }
    .filo-ikili { grid-template-columns: 1fr; }
    .filo-altbilgi-izgara { grid-template-columns: 1fr; }
    .filo-bolum { padding: 52px 0; }
}

/* Pasif alanlar (teslim ofisi ve promosyon kodu, onay kutusu kapalıyken) */
.filo-girdi:disabled,
.filo-secim:disabled {
    background: #EBEFF5;
    color: var(--filo-soluk);
    cursor: not-allowed;
}

/* ---------- Kurumsal güven şeridi ---------- */
.filo-guven { padding: 54px 0 48px; background: #fff; border-bottom: 1px solid var(--filo-kenar); }

.filo-guven-izgara {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}

.filo-guven-oge { padding: 6px 8px; }

.filo-guven-oge + .filo-guven-oge { border-inline-start: 1px solid var(--filo-kenar); }

.filo-guven-sayi {
    display: block;
    color: var(--filo-metin);
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.filo-guven-etiket {
    display: block;
    margin-top: 6px;
    color: var(--filo-soluk);
    font-size: 14px;
}

/* Marka logoları: tek renk durur, üzerine gelince kendi rengine döner. */
.filo-marka-seridi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--filo-kenar);
}

/* Logolar sabit bir kutuya sigar: genis yazi logolari (Toyota, Nissan) ile
   dar amblemler (BMW, VW) ayni optik agirlikta dursun. */
.filo-marka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 38px;
}

.filo-marka img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .5;
    transition: filter var(--filo-sure) var(--filo-egri), opacity var(--filo-sure) var(--filo-egri);
}

.filo-marka:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 900px) {
    .filo-guven-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
    .filo-guven-oge:nth-child(3n + 1) { border-inline-start: 0; }
}

@media (max-width: 560px) {
    .filo-guven-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filo-guven-oge:nth-child(3n + 1) { border-inline-start: 1px solid var(--filo-kenar); }
    .filo-guven-oge:nth-child(odd) { border-inline-start: 0; }
    .filo-marka { width: 92px; height: 30px; }
}