/* =====================================================================
   universal-screen-fixes.css
   ---------------------------------------------------------------------
   Son katman: theme-dark / legacy / architecture çakışmalarını çözer.
   Her ekranda tutarlı layout — tablet nav, taşma, tablolar, tipografi.
   ===================================================================== */

:root {
    --pr-header-offset: 72px;
    scrollbar-gutter: stable;
}

/* ── Sticky için html overflow gevşet; taşmayı body keser ─────────── */
html {
    overflow-x: visible !important;
    max-width: 100%;
}

body {
    overflow-x: clip;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}


/* =====================================================================
   TABLET + MOBİL NAV (≤1023.98) — hamburger her yerde
   ===================================================================== */
@media (max-width: 1023.98px) {
    .cs-main-nav-1,
    .cshr1-col-2 {
        display: none !important;
    }

    .cs-header-row-1 {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .cshr1-col-1 {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .cshr1-col-3 {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        margin-left: auto !important;
    }

    .cs-sticky-header-1 button.cs-humberge-m-1,
    .cs-sticky-header-1 .cs-humberge-m-1,
    .cs-humberge-m-1 {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        margin: 0;
        border-radius: 10px;
        cursor: pointer;
        gap: 5px;
        position: relative;
    }

    .cs-humberge-m-1-top,
    .cs-humberge-m-1-bottom {
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }

    .cs-mobile-menu-d-1 {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--pr-header-offset, 72px) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 0;
        max-height: calc(100dvh - var(--pr-header-offset, 72px));
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
                backdrop-filter: saturate(180%) blur(24px);
        box-shadow: 0 24px 60px rgba(17, 24, 39, 0.14);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        z-index: 490;
        pointer-events: none;
    }

    .cs-mobile-menu-d-1.active {
        height: calc(100dvh - var(--pr-header-offset, 72px)) !important;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .cs-mobile-menu-d-1 .image-area-1 {
        display: none !important;
    }

    .cs-mobile-menu-d-1 .content-area-1 {
        padding: 24px 24px max(40px, env(safe-area-inset-bottom));
    }

    html.dark-mode .cs-mobile-menu-d-1,
    body.dark-mode .cs-mobile-menu-d-1,
    [data-theme="dark"] .cs-mobile-menu-d-1 {
        background: rgba(12, 18, 32, 0.96);
    }
}


/* ── Küçük telefon header sıkışıklığı ─────────────────────────────── */
@media (max-width: 390px) {
    .cs-main-logo-1 img {
        max-width: 88px !important;
        height: 30px !important;
        width: auto !important;
    }

    .pr-header-toolbar .cs-language-select,
    .cs-sticky-header-1 .cs-language-select {
        display: none !important;
    }
}


/* Dil linkleri — sadece ≤390 (header select gizliyken) */
.mobile-lang-switch {
    display: none;
}

@media (max-width: 390px) {
    .mobile-lang-switch {
        display: list-item !important;
    }
}

/* =====================================================================
   SCROLL LOCK — scrollbar kayması + jump önleme
   ===================================================================== */
html.pr-scroll-locked,
body.pr-scroll-locked,
body.mobile-overflow-h {
    overflow: hidden !important;
    touch-action: none;
}

body.pr-scroll-locked,
body.mobile-overflow-h {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
}


/* =====================================================================
   LEGACY min-width / 100vw / negatif offset — yatay kayma kır
   ===================================================================== */
.fmm-f-div-1,
.jsFilterMOD1.fmm-f-div-1 {
    min-width: 0 !important;
    max-width: 100% !important;
}

.speech-box,
.cs-speech-box-1,
[class*="speech-box"] {
    min-width: 0 !important;
    max-width: min(510px, 100%) !important;
}

.custom-modal-1,
.cs-custom-modal-1,
[class*="custom-modal"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.custom-modal-1 .modal-content,
.cs-custom-modal-1 .content,
[class*="custom-modal"] .modal-content {
    min-width: 0 !important;
    max-width: min(393px, calc(100vw - 32px)) !important;
    width: 100%;
}

/* Full-bleed: 100vw yerine güvenli % */
.p-home .cs-homepage-sec-1 .cs-full-container-1,
.section-hero .cs-full-container-1,
.hero-pr .cs-full-container-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bg-image-1 {
    right: 0 !important;
    left: auto !important;
    max-width: 100% !important;
}

#goTpButton {
    right: 12px !important;
}

/* Radar mesafe etiketi — inline left:-191.5px iptal */
.distanceSignalVal,
span.distanceSignalVal {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline-block;
    margin-bottom: 8px;
}


/* =====================================================================
   HERO — section-hero + hero-pr alias (Owl flash / CLS)
   ===================================================================== */
.section-hero .mainSlider.owl-carousel,
.hero-pr .mainSlider.owl-carousel {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.section-hero .mainSlider:not(.owl-loaded) .item:not(:first-child),
.hero-pr .mainSlider:not(.owl-loaded) .item:not(:first-child) {
    display: none;
}

.section-hero .mainSlider:not(.owl-loaded) .item:first-child,
.hero-pr .mainSlider:not(.owl-loaded) .item:first-child {
    display: block;
    width: 100%;
}

.section-hero,
.section-hero .cs-full-container-1,
.section-hero .owl-stage-outer,
.section-hero .owl-stage,
.section-hero .owl-item,
.section-hero .owl-item > .item,
.hero-pr,
.hero-pr .cs-full-container-1 {
    min-height: clamp(420px, 72dvh, 880px);
}

.section-hero .slider-container-1,
.hero-pr .slider-container-1 {
    min-height: clamp(420px, 72dvh, 880px);
}


/* =====================================================================
   TABLOLAR — wrapper’sız tablolar yatay scroll
   ===================================================================== */
.cs-orderSum-left-a-1 .csosla-sec-cont-1,
.cs-rental-d-detail-1,
.cs-rent-info-d-1,
.csrdd1-table-1,
.csrpd1-table-1,
.csri1-table-1,
.in-table-1,
.in-table-2,
.sum-table-1,
table.table {
    max-width: 100%;
}

.csosla-sec-cont-1,
.cs-orderSum-cont-1 .csosla-sec-1,
.cs-rental-passed-d-1,
.cs-account-right-div-1 .table-responsive,
.pr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Otomatik sarmalayıcı hedefi — parent overflow */
.cs-orderSum-left-a-1 table,
.cs-rent-detail-d-1 table,
.cs-rental-d-detail-1 table,
.account-rents-list table,
.csri1-table-1,
.csrdd1-table-1,
.csrpd1-table-1,
.sum-table-1,
.in-table-1,
.in-table-2 {
    display: table;
    width: 100%;
    min-width: 280px;
}

.cs-orderSum-left-a-1 .csosla-sec-cont-1:has(table),
.cs-rent-detail-d-1:has(> table),
div:has(> table.in-table-1),
div:has(> table.in-table-2),
div:has(> table.sum-table-1),
div:has(> table.csrdd1-table-1),
div:has(> table.csrpd1-table-1),
div:has(> table.csri1-table-1) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}


/* =====================================================================
   LOGIN / AUTH tipografi — 320px
   ===================================================================== */
@media (max-width: 767.98px) {
    .cs-login-main-row-1 .head-1,
    .cs-syc-1-formbox .head-1,
    .cs-login-sec-1 .head-1 {
        font-size: clamp(26px, 7.5vw, 36px) !important;
        line-height: 1.2 !important;
    }

    .cs-login-main-row-1 .cssc1d1-inn-1 {
        right: 0 !important;
        left: auto !important;
        max-width: 100%;
    }
}


/* =====================================================================
   FAQ / TAB yatay scroll
   ===================================================================== */
.cs-faq-sec-1 .nav-tabs,
.nav-tabs.cs-tabs-1,
.nav-tabs.cs-navTabs-1,
.faq-tabs,
.cs-campaign-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    max-width: 100%;
    scrollbar-width: thin;
}

.cs-faq-sec-1 .nav-tabs .nav-link,
.nav-tabs.cs-tabs-1 .nav-link,
.nav-tabs.cs-navTabs-1 .nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
}


/* =====================================================================
   ACCOUNT menü — mobil collapse tutarlı
   ===================================================================== */
@media (max-width: 1023.98px) {
    .cs-account-mobile-block {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .cs-account-mobile-block.active {
        max-height: 2000px;
    }

    .csamd1-btn-1 {
        min-height: 44px;
        width: 100%;
    }
}


/* =====================================================================
   GENEL görsel güvenlik
   ===================================================================== */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.owl-carousel .owl-stage {
    display: flex;
}

.select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

.daterangepicker {
    max-width: calc(100vw - 16px) !important;
}

@media (max-width: 767.98px) {
    .daterangepicker {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }
}

/* Leaflet popup dar ekran */
.leaflet-popup-content-wrapper,
.leaflet-popup-content {
    max-width: min(280px, calc(100vw - 48px)) !important;
}


/* =====================================================================
   GENİŞ EKRAN — aşırı padding / negatif offset yumuşat
   ===================================================================== */
@media (min-width: 1400px) {
    .cs-syc-sec1 .cs-syc-1-main .cs-syc-1-formbox {
        padding-left: clamp(24px, 8vw, 120px) !important;
    }

    .cs-syc-sec1 .cs-syc-1-main .cs-syc-1-imgbox .cs-right-car-img {
        right: clamp(0px, 4vw, 80px) !important;
    }
}


/* =====================================================================
   TABLET arama şeridi — 250+438 taşmasını kır
   ===================================================================== */
@media (max-width: 1023.98px) {
    .cs-loc-date-d-1 {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cs-loc-date-d-1 .csld1-col-1,
    .cs-loc-date-d-1 .csld1-col-2,
    .cs-loc-date-d-1 .csld1-col-3 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .cs-loc-date-d-1 .cs-secondary-btn-1 {
        width: 100% !important;
    }
}


/* =====================================================================
   will-change sticky titreme azalt
   ===================================================================== */
.cs-sticky-header-1 {
    will-change: auto;
}

.cs-sticky-header-1.is-scrolled,
.cs-sticky-header-1.header-transparent {
    will-change: background, box-shadow;
}


/* =====================================================================
   ━━━━━ KÜÇÜK TELEFON + MOBİL PACK (320–767) — eksiksiz ━━━━━
   ===================================================================== */

/* —— 320–390: header sıkışıklık —— */
@media (max-width: 390px) {
    .cs-header-row-1 {
        gap: 4px !important;
    }

    .cs-header-row-2,
    .pr-header-actions,
    .pr-header-toolbar {
        gap: 2px !important;
    }

    .cs-main-logo-1 img {
        max-width: 88px !important;
        height: 30px !important;
    }

    .cs-header-btn-1,
    .cs-header-btn-2,
    .cs-header-btn-3,
    .cs-humberge-m-1,
    .cs-sticky-header-1 .cs-humberge-m-1 {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
    }

    .cs-header-btn-4 .image-d-1 img,
    .cs-header-btn-4 .fake-char-i-1 {
        width: 32px !important;
        height: 32px !important;
    }

    /* Dil seçiciyi gizle — menüde de var / yer aç */
    .pr-header-toolbar .cs-language-select,
    .cs-sticky-header-1 .cs-language-select {
        display: none !important;
    }

    /* Tema toggle kompakt */
    .pr-header-toolbar .pr-theme-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .mobile-lang-switch {
        display: list-item !important;
    }
}

/* —— 320–767: radar paneli tam ekran güvenli —— */
@media (max-width: 767.98px) {
    .cs-signal-cont-1 .cssc1-d-1,
    .cs-signal-cont-1 .cssc1d1-inn-1 {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: calc(var(--pr-header-offset, 72px) + 8px) !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 520 !important;
        max-height: calc(100dvh - var(--pr-header-offset, 72px) - 24px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .cs-signal-cont-1 .form-content-1 {
        max-height: none !important;
    }
}

/* —— Sıralama modal’ları — %180/260 taşmasını kır —— */
@media (max-width: 767.98px) {
    .cs-sorting-area-1 .cs-sorting-modal-1,
    .cs-sorting-area-1 .cs-sorting-modal-2,
    .cs-sorting-area-1 .cs-sorting-modal-3,
    .cs-sorting-area-1 .cs-sorting-modal-4,
    .cs-sorting-modal-1,
    .cs-sorting-modal-2,
    .cs-sorting-modal-3,
    .cs-sorting-modal-4 {
        width: min(100vw - 16px, 360px) !important;
        max-width: calc(100vw - 16px) !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }

    .cs-sorting-area-1 .cs-sort-btn-group {
        flex-direction: column !important;
    }
}

/* —— Hasar / foto / konum modal —— */
@media (max-width: 767.98px) {
    #damage_area_modal .modal-dialog,
    #car-photo-add-modal .modal-dialog,
    #locationModal .modal-dialog,
    #LocationModal .modal-dialog,
    [id*="location"] .modal-dialog,
    [id*="Location"] .modal-dialog {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    #damage_area_modal .modal-content,
    #car-photo-add-modal .modal-content,
    #locationModal .modal-content,
    #LocationModal .modal-content {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #damage_area_modal a,
    #car-photo-add-modal a,
    #locationModal a.active,
    #LocationModal a {
        width: auto !important;
        max-width: 100% !important;
    }
}

/* —— Kampanya / genel modal —— */
.cs-modal-2 .modal-dialog,
.cs-modal-2 .modal-dialog-centered {
    max-width: min(650px, calc(100vw - 24px)) !important;
    width: 100% !important;
    margin: 12px auto !important;
}

.cs-modal-2 .modal-content {
    max-width: 100% !important;
}

.cs-modal-2 .modal-body img,
.cs-modal-2 .image-d-1 img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

@media (max-width: 390px) {
    .cs-modal-3 .modal-body,
    .cs-modal-2 .modal-body,
    .cs-modal-4 .modal-body {
        padding: 20px 16px !important;
    }
}

/* —— Mernis popup —— */
.mernis-error-popup,
#MernisErrorModal .modal-dialog,
#MernisErrorModal .modal-content {
    width: min(335px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
}

@media (max-width: 767.98px) {
    #MernisErrorModal .modal-dialog {
        left: 50% !important;
    }
}

/* —— Tipografi: app / hero / başlıklar —— */
@media (max-width: 991.98px) {
    .p-home-app__title,
    .p-home-app__title span,
    .p-home .p-home-app__title {
        font-size: clamp(26px, 8vw, 38px) !important;
        line-height: 1.2 !important;
    }

    .p-home-app__eyebrow {
        font-size: clamp(12px, 3.5vw, 16px) !important;
    }

    .section-hero h1,
    .hero-pr h1,
    .cs-homepage-sec-1 h1,
    .slider-container-1 h1,
    .p-home-hero__headline {
        font-size: clamp(24px, 7vw, 40px) !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 767.98px) {
    h1, .h1 { font-size: clamp(22px, 7vw, 28px) !important; }
    h2, .h2 { font-size: clamp(18px, 5.5vw, 22px) !important; }
    h3, .h3 { font-size: clamp(16px, 4.5vw, 18px) !important; }

    .cs-wbg-head-1,
    .cs-wbg-head-2,
    .cs-wbg-head-3 {
        font-size: clamp(20px, 6vw, 28px) !important;
        line-height: 1.25 !important;
    }
}

/* —— Dekoratif negatif offset —— */
@media (max-width: 767.98px) {
    .bg-image-1 {
        right: 0 !important;
        left: auto !important;
        max-width: 100% !important;
    }

    .cssc1d1-inn-1 {
        right: auto !important;
    }
}

/* —— Daterangepicker —— */
@media (max-width: 767.98px) {
    .daterangepicker {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        box-sizing: border-box !important;
    }

    .daterangepicker .drp-calendar,
    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .daterangepicker .calendar-table {
        width: 100% !important;
    }

    .daterangepicker .drp-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        text-align: center !important;
    }
}

/* —— intlTelInput —— */
@media (max-width: 390px) {
    .iti {
        width: 100% !important;
        display: block !important;
    }

    .iti--separate-dial-code .iti__selected-flag {
        max-width: 90px;
    }

    .iti--separate-dial-code input.form-control,
    .iti--separate-dial-code input {
        padding-left: 92px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}

/* —— OTP / auth form —— */
@media (max-width: 390px) {
    .cs-login-form-c-1,
    .cs-login-sec-1 .form-d-1,
    .cs-otp-inputs,
    .otp-input-group {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .cs-otp-inputs input,
    input[name*="otp"],
    .otp-digit {
        width: 40px !important;
        height: 48px !important;
        min-width: 36px !important;
        font-size: 18px !important;
    }

    .cs-login-form-c-1 img,
    .cs-login-sec-1 svg {
        max-width: 80px !important;
        height: auto !important;
    }
}

/* —— Rent: harita + liste + filtre buton —— */
@media (max-width: 767.98px) {
    .cs-rentcar-section-2 .cs-map-area-1,
    .cs-rentcar-section-2 #map,
    .page-rent-car #map,
    .leaflet-container {
        height: min(220px, 32vh) !important;
        max-height: 220px !important;
        width: 100% !important;
    }

    .jsFilterMOD1.fmm-f-div-1.rent-filter-panel--open .fmm-bottom-area-1,
    .rent-filter-panel--open .fmm-bottom-area-1 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .jsFilterMOD1.fmm-f-div-1.rent-filter-panel--open .fmm-bottom-area-1 > *,
    .rent-filter-panel--open .fmm-bottom-area-1 button,
    .rent-filter-panel--open .fmm-bottom-area-1 a {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        font-size: 14px !important;
        padding: 12px 8px !important;
    }
}

@media (max-width: 380px) {
    .jsFilterMOD1.fmm-f-div-1.rent-filter-panel--open .fmm-bottom-area-1,
    .rent-filter-panel--open .fmm-bottom-area-1 {
        flex-direction: column !important;
    }

    .jsFilterMOD1.fmm-f-div-1.rent-filter-panel--open .fmm-bottom-area-1 > *,
    .rent-filter-panel--open .fmm-bottom-area-1 button,
    .rent-filter-panel--open .fmm-bottom-area-1 a {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .cs-car-box-1 .info-div-1,
    .cs-car-box-1 .idr1-col-1,
    .cs-car-box-1 .idr1-col-2 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* —— goTop + cookie + chat stack —— */
@media (max-width: 767.98px) {
    #goTpButton {
        right: 12px !important;
        bottom: 72px !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 10030 !important;
    }

    #goTpButton:after {
        line-height: 44px !important;
        font-size: 1.25em !important;
    }

    body.page-rent-car #goTpButton {
        bottom: 110px !important;
    }

    /* Cookie banner açıkken goTop yukarı */
    body:has(.cs-cookie-banner:not([hidden])),
    body:has(.cookie-consent:not(.d-none)),
    body:has(#cookieConsent:not(.d-none)) {
        --mobile-bottom-stack: 120px;
    }

    body:has(.cs-cookie-banner:not([hidden])) #goTpButton,
    body:has(.cookie-consent:not(.d-none)) #goTpButton,
    body:has(#cookieConsent:not(.d-none)) #goTpButton {
        bottom: calc(var(--mobile-bottom-stack, 120px) + 12px) !important;
    }

    /* AloTech chat — sağ alt, goTop ile çakışmasın */
    #alotech-chat-widget,
    .alo-chat-widget,
    iframe[src*="alo-tech"],
    div[id*="alo"][style*="position"],
    .alochat-launcher,
    #alochat_launcher {
        right: 12px !important;
        bottom: 16px !important;
        max-width: 56px !important;
        z-index: 10020 !important;
    }

    .cs-cookie-banner,
    .cookie-consent,
    #cookieConsent,
    .cs-cookie-bar-1 {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
        z-index: 10050 !important;
    }
}

/* —— Footer —— */
@media (max-width: 639.98px) {
    .cs-footer-row-1,
    .cs-footer-main-1,
    footer .row {
        flex-direction: column !important;
    }

    .cs-footer-row-1 > [class*="col"],
    .csfr1-col-1,
    .csfr1-col-2,
    .csfr1-col-3 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    footer img,
    .cs-footer-badges img,
    .store-badge img {
        max-width: 140px !important;
        height: auto !important;
    }
}

/* —— Account / form / input —— */
@media (max-width: 767.98px) {
    .cs-account-m-row-1,
    .cs-account-right-div-1,
    .cs-form-1,
    .form-group,
    .cs-car-detail-main-1 {
        max-width: 100% !important;
        overflow-x: clip;
    }

    .form-control,
    select.form-control,
    .cs-global-select2-1 + .select2-container {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 16px !important; /* iOS zoom engel */
    }

    .cs-checkbox-1,
    .cs-radio-1 {
        max-width: 100%;
    }

    .btn,
    .cs-secondary-btn-1,
    .cs-primary-btn-1,
    .cs-white-btn-1 {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
}

/* —— Contact / career / blog / FAQ —— */
@media (max-width: 767.98px) {
    .cs-contact-us-imagebox-1 {
        display: none !important;
    }

    .cs-contact-us-form-wrapper,
    .cs-blog-list,
    .blog-card,
    .cs-career-sec-1 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cs-navTabs-1 .nav-item,
    .cs-navTabs-1 .nav-link {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

/* —— Car detail / reservation —— */
@media (max-width: 767.98px) {
    .cs-car-detail-main-1 {
        flex-direction: column !important;
    }

    .cs-cd-infobox-1,
    .cs-cd-gallery-1,
    .csorr1-col-1,
    .csorr1-col-2 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .cs-cd-feature-1 {
        flex-wrap: wrap !important;
    }

    .date-box-1 input,
    .cs-car-detail-sec-1 input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .lightGallery,
    .cs-gallery-1 img {
        max-width: 100% !important;
    }
}

/* —— Safe area (iPhone notch / home bar) —— */
@supports (padding: max(0px)) {
    @media (max-width: 767.98px) {
        body {
            padding-left: env(safe-area-inset-left, 0);
            padding-right: env(safe-area-inset-right, 0);
        }

        .cs-sticky-header-1 {
            padding-top: env(safe-area-inset-top, 0);
        }

        .cs-mobile-menu-d-1.active,
        .jsFilterMOD1.fmm-f-div-1.rent-filter-panel--open,
        .cs-cookie-banner {
            padding-bottom: max(16px, env(safe-area-inset-bottom, 0)) !important;
        }

        #goTpButton {
            bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
        }
    }
}

/* —— Home arama / hero mobil —— */
@media (max-width: 767.98px) {
    .section-hero,
    .hero-pr,
    .section-hero .slider-container-1 {
        min-height: clamp(360px, 62dvh, 640px) !important;
    }

    .p-home-hero__actions,
    .section-hero .cs-btn-group-1,
    .slider-container-1 .btn-area-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .p-home-hero__actions a,
    .section-hero .cs-white-btn-1,
    .section-hero .cs-white-outline-btn-1 {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .cs-homepage-sec-2,
    .cs-homepage-sec-3,
    .cs-homepage-sec-4,
    .cs-homepage-sec-5,
    .cs-homepage-sec-6,
    .cs-homepage-sec-7,
    .cs-homepage-sec-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: clip !important;
    }

    .p-home-cities-grid,
    .p-home-suppliers-grid,
    .p-home-campaign-grid,
    .p-home-how-grid__items {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (min-width: 391px) and (max-width: 575.98px) {
    .p-home-cities-grid,
    .p-home-campaign-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* —— Select2 dropdown viewport —— */
@media (max-width: 767.98px) {
    .select2-container--open .select2-dropdown {
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
    }

    .select2-results__option {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* —— SweetAlert mobil —— */
@media (max-width: 390px) {
    .swal2-popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 1.25rem !important;
        font-size: 14px !important;
    }

    .swal2-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .swal2-styled {
        margin: 0 !important;
    }
}

/* —— Container pad 320 —— */
@media (max-width: 390px) {
    .container,
    .container-2,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .section,
    section[class*="-sec-"] {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}