/* ============================================================
   Media object — merkezlenmiş görsel gösterim sistemi
   ============================================================ */

.media-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.media-frame--fill {
    width: 100%;
    height: 100%;
}

.media-img {
    display: block;
    margin: 0;
    object-position: center center;
}

.media-img--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.media-img--contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Logo — kırpılmasın */
.brand-logo-img,
.media-logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 200px;
    max-height: 52px;
    object-fit: contain;
    object-position: center center;
    margin: 0;
}

/* Slider — object-position slide CSS değişkeninden gelir */
.home-slider__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home-slider__slide img,
.home-slider__img,
.hero-slider__img {
    object-fit: cover;
    object-position: var(--image-position, center center);
}

@media (max-width: 768px) {
    .home-slider__slide img,
    .home-slider__img,
    .hero-slider__img {
        object-position: var(--image-position-mobile, var(--image-position, center center));
    }
}

/* Araç kartları */
.vehicle-card__media,
.vehicle-card-image,
.vehicle-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vehicle-card__media img,
.vehicle-card-image img,
.vehicle-image-wrapper img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
}

/* Galeri / kart kapakları */
.popular-route-card__media img,
.media-gallery-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
}

.order-summary__vehicle-thumb,
.checkout-vehicle__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.order-summary__vehicle-thumb img,
.checkout-vehicle__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
}

/* Admin önizleme tabloları */
.media-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgb(243 244 246);
}

.dark .media-thumb {
    background: rgb(17 24 39);
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
}

.media-thumb--contain img {
    object-fit: contain;
    padding: 4px;
}

/* ============================================================
   MOBİL RAFİNE (≤768px) — quote/araç listesi + header
   Yalnız mobil; desktop görünümüne dokunmaz. Bu dosya frontend
   sayfalarında en son yüklendiği için kurallar garanti kazanır.
   Backend/rezervasyon mantığına dokunmaz (sadece görünüm).
   ============================================================ */
@media (max-width: 768px) {
    /* 1) Header daha kısa, logo ~%23 küçük (oran object-fit:contain ile korunur) */
    .header-inner { height: 54px; }
    .brand-logo-img { height: 40px; max-height: 40px; }

    /* 2) Harita maks 240–280px + taşma engeli (Google telif/kısayol container dışına çıkmaz) */
    .quote-side__map { overflow: hidden; border-radius: var(--radius); }
    .quote-side__map .route-map {
        aspect-ratio: auto;
        height: clamp(240px, 42vw, 280px);
        max-height: 280px;
        overflow: hidden;
    }
    .quote-route-strip { margin-top: 0.4rem; padding: 0.55rem 0.75rem; }
    .quote-route-strip__addrs { white-space: normal; }

    /* 3) Üst boşlukları kıs → ilk ekranda en az bir araç kartı görünsün */
    .quote-page { padding: 0.5rem 0 5rem; }
    .quote-grid { gap: 0.6rem; }
    .quote-list__head { margin-bottom: 0.75rem; }
    .vehicle-quote-list { gap: 0.625rem; }

    /* 4) "Ara durak" (stops) kompakt — zaten katlanır; mobilde daha sıkı */
    .stops-editor { padding: 0.6rem 0.75rem; }
    .stops-editor__head { margin-bottom: 0.4rem; }
    .stops-editor__add { padding: 0.5rem 0.75rem; }

    /* 5) Araç kartı kompakt — içerik kaybolmadan yükseklik azalır */
    .vehicle-card--quote { grid-template-columns: 116px minmax(0, 1fr); }
    .vehicle-card--quote .vehicle-card__media { min-height: 84px; padding: 4px; }
    .vehicle-card--quote .vehicle-card__body { padding: 0.7rem 0.85rem; gap: 0.45rem; }
    .vehicle-card--quote .vehicle-card__head { gap: 0.4rem; }
    .vehicle-card--quote .vehicle-card__name { font-size: 0.98rem; line-height: 1.2; }
    .vehicle-card--quote .vehicle-card__caps { margin-top: 0.25rem; }
    .vehicle-card--quote .cap-chip { font-size: 0.75rem; }

    /* 6) Başlangıç/varış (sipariş özeti) uzun adres: 2 satıra izin, taşma yok */
    .order-summary__addr strong,
    .order-summary__addr span {
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 7) Özellik/hizmet rozetleri satır taşırsın, kart dışına çıkmasın */
    .vehicle-card--quote .vehicle-card__features,
    .vehicle-card--quote .vehicle-card__services {
        flex-wrap: wrap;
        gap: 0.3rem;
        max-width: 100%;
        margin: 0.15rem 0 0;
    }
    .vehicle-card--quote .feature-chip { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
    .vehicle-card--quote .feature-chip span { overflow-wrap: anywhere; }

    /* 8) Fiyat alanı varsa daha görünür (yoksa kural no-op, yapı bozulmaz) */
    .vehicle-card--quote .vehicle-card__price { min-width: 0; }
    .vehicle-card--quote .vehicle-card__price-amount { font-size: 1.18rem; }
}