/* =================================================================
 * Çekiciler — Enterprise Mobile Polish
 * Sektör standardı mobil patch. Hedef: iPhone 12/13/14 (375),
 * iPhone Plus (414), tablet (768). Mobile-first, safe-area aware,
 * tüm public sayfalara global olarak uygulanır.
 *
 * Yüklenme sırası: bu dosya HER ZAMAN main.css'ten SONRA include
 * edilmeli ki override'ları çalışsın.
 * ================================================================= */

/* ----- 1. Safe-area & viewport tokens ------------------------------- */
:root {
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* Touch target (Apple HIG + Material Design) */
    --tap-min: 44px;
}

/* ----- 2. Global box-sizing & overflow guarantee --------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
    overflow-x: clip;      /* iOS Safari friendly horizontal lock */
    max-width: 100vw;
}

img, video, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ----- 3. Form input — iOS auto-zoom prevention -------------------- */
/* iOS Safari kullanıcı input'a tıkladığında font-size <16px ise ekranı
   otomatik zoom eder. Bu UX bozucu — minimum 16px garanti et. */
input:not([type=hidden]),
select,
textarea,
button {
    font-size: max(16px, 1rem);
}

/* Touch target enforcement */
button,
[role=button],
.btn,
input[type=submit],
input[type=button],
a.btn,
a.dx-btn,
a.cp-btn,
.fod-btn,
.od-btn {
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    touch-action: manipulation;       /* tap delay yok */
    -webkit-tap-highlight-color: transparent;
}

/* ----- 4. Auth pages (login/register) — sığma + safe-area ---------- */
/* views/auth/*.php inline body { padding:20px } ve .auth-wrapper
   { max-width:420px } var. Bunlar 320-360px ekranda taşma + sıkışma
   yaratıyor. Override edelim. */
body:has(.auth-wrapper),
body:has(.auth-card) {
    padding-top:    max(16px, var(--safe-top))    !important;
    padding-bottom: max(16px, var(--safe-bottom)) !important;
    padding-left:   max(16px, var(--safe-left))   !important;
    padding-right:  max(16px, var(--safe-right))  !important;
}

.auth-wrapper {
    width: 100%;
    max-width: min(420px, 100%) !important;
}

.auth-body { padding: 20px !important; }
.auth-header { padding: 24px 20px 20px !important; }

@media (min-width: 480px) {
    .auth-body { padding: 24px !important; }
    .auth-header { padding: 32px 24px 24px !important; }
}

/* Auth top nav (logo + nav) mobile shrink */
@media (max-width: 539px) {
    .auth-topnav {
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .auth-topnav .auth-logo { font-size: 14px; }
    .auth-topnav nav { display: none; }
}

/* ----- 5. Wizard / form card mobile padding ------------------------ */
/* views/home/firma-kayit.php ve views/request/wizard.php nested
   padding compounding sorunu. Mobile'da kompakt yap. */
.wz-card,
.form-card {
    padding: 1.1rem 1rem !important;
}
@media (min-width: 640px) {
    .wz-card,
    .form-card {
        padding: 1.75rem 1.5rem !important;
    }
}

/* Wizard adım sayacı / progress strip horizontal scroll güvencesi */
.wz-progress,
.wz-progress-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wz-progress::-webkit-scrollbar,
.wz-progress-strip::-webkit-scrollbar { display: none; }

/* ----- 6. Hero / Slider — safe-area aware ------------------------- */
/* Hero slider'da absolute positioned meta/body iPhone notch altına
   girebilir. env() ile koru. */
.hxh-slide-meta { top: max(1rem, var(--safe-top)) !important; }
.hxh-slide-body {
    left:  max(1rem, var(--safe-left))  !important;
    right: max(1rem, var(--safe-right)) !important;
    bottom: max(0.85rem, var(--safe-bottom)) !important;
}
.hxh-controls { bottom: max(0.85rem, var(--safe-bottom)) !important; }

/* Hero metni mobile çok büyük olursa sığdır */
@media (max-width: 414px) {
    .hxh-slide-title  { font-size: 1.4rem !important; line-height: 1.2 !important; }
    .hxh-slide-kicker { font-size: 0.7rem !important; letter-spacing: 0.12em; }
}

/* ----- 7. Container padding — kademeli responsive ------------------ */
/* :root --container-padding global var — mobile-first kademeli */
:root { --container-padding: 16px; }
@media (min-width: 414px) { :root { --container-padding: 20px; } }
@media (min-width: 768px) { :root { --container-padding: 32px; } }

/* ----- 8. Grid fallback'lar — aggressive 3-6 column override ------- */
/* main.css'te 60+ rule var: repeat(3, 1fr), repeat(4, 1fr) doğrudan
   320px ekranda kompakt. <414px'de 2 col MAX, <375 1 col. */
@media (max-width: 374px) {
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    [class*="grid-cols-6"],
    .grid-3,
    .grid-4,
    .stats-grid,
    .trust-strip-items,
    .ws-services-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 375px) and (max-width: 639px) {
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    .grid-3,
    .grid-4,
    .stats-grid,
    .ws-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [class*="grid-cols-6"],
    .grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ----- 9. Sticky table / row overflow -------------------------------- */
/* Listeler 3-6 sütunlu wide table yapı kullanıyor. Mobile'da yatay
   scrollable conteyner. */
.off-table,
.dx-table,
.cp-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.off-row,
.dx-row,
.cp-row {
    min-width: max-content;
}
@media (max-width: 639px) {
    /* Mobile'da liste yatay scroll yerine kart yığını */
    .off-row,
    .dx-row,
    .cp-row {
        min-width: auto;
    }
}

/* ----- 10. Footer mobile — column stack --------------------------- */
@media (max-width: 767px) {
    .footer-grid,
    .footer-columns,
    .ws-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .ws-footer-logo { margin-bottom: 0.5rem; }
}

/* ----- 11. Mega menu / hamburger drawer safe-area ------------------- */
.cp-sidebar,
.dx-sidebar,
.dashboard-sidebar,
.admin-sidebar {
    padding-top: max(1rem, var(--safe-top)) !important;
    padding-bottom: max(1rem, var(--safe-bottom)) !important;
    padding-left: max(0, var(--safe-left));
}

@media (max-width: 1023px) {
    .cp-sidebar,
    .dx-sidebar {
        width: min(280px, 80vw) !important;
    }
}

/* ----- 12. Modal / dialog mobile bottom-sheet pattern ------------- */
@media (max-width: 639px) {
    .fod-modal-box,
    .modal-box,
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        margin: 0;
        border-radius: 16px 16px 0 0 !important;
        align-self: flex-end;
        padding-bottom: max(1.6rem, calc(1.6rem + var(--safe-bottom))) !important;
    }
}

/* ----- 13. Sticky action bars — safe-area bottom ----------------- */
.od-actions,
.fod-actions,
.cp-sticky-cta,
.dx-sticky-cta {
    padding-bottom: max(0.95rem, calc(0.95rem + var(--safe-bottom))) !important;
}

/* ----- 14. Body lock when mobile menu / modal open ----------------- */
body.menu-open,
body.modal-open {
    overflow: hidden;
    touch-action: none;
}

/* ----- 15. Skip-link (a11y, ekran okuyucu) ------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
}
.skip-link:focus {
    left: 1rem;
    top: max(1rem, var(--safe-top));
    background: #0A2540;
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

/* ----- 16a. Legacy dashboard drawer (admin-dashboard, dashboard, etc.)
 *      enterprise-mobile.js .sidebar elementine .em-drawer ekler.       */
.em-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #1e293b;
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.em-menu-toggle:hover { background: rgba(10,37,64,.06); }

.em-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 23, 41, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 99;
}
.em-sidebar-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 1023px) {
    .em-menu-toggle { display: inline-flex; }

    /* Legacy sidebar mobile drawer pattern */
    .em-drawer {
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(.4,0,.2,1);
        width: min(280px, 82vw) !important;
        box-shadow: 6px 0 30px rgba(10,23,41,0.18);
        will-change: transform;
    }
    .em-drawer--open {
        transform: translateX(0);
    }
    /* Main content full-width on mobile */
    .main-content {
        margin-left: 0 !important;
    }
    /* Top header mobile compact padding */
    .top-header {
        padding: 12px 16px !important;
    }
    /* Header search box mobile gizle (notification + user kalır) */
    .top-header .search-box { display: none !important; }
    .top-header .page-title { font-size: 1.1rem !important; }
}

/* ----- 16b. Topbar claim strip mobile fix ------------------------ */
/* main.css'te `.topbar-claim-text { white-space:nowrap }` + uzun reklam metni
   →  mobile'da 700px+ taşıyor, body horizontal scroll yaratıyor.
   Çözüm: dar viewport'larda metni sığdır, çok darda gizle. */
.topbar-claim,
.topbar-claim-text {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
}
.topbar-claim { overflow: hidden; }
.topbar-claim-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 539px) {
    /* iPhone SE, küçük Android — topbar-claim tamamen gizle */
    .topbar-claim { display: none !important; }
}

/* Hero slider mobil control — gerçek slider butonları (önceki/sonraki + dots) */
@media (max-width: 767px) {
    .hxh-ctrl {
        bottom: max(0.85rem, calc(0.85rem + env(safe-area-inset-bottom, 0px))) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        background: rgba(10, 37, 64, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 0.45rem 0.55rem !important;
        border-radius: 999px !important;
        box-shadow: 0 8px 24px rgba(10, 37, 64, 0.25), 0 2px 6px rgba(10, 37, 64, 0.12) !important;
        gap: 0.85rem !important;
        max-width: max-content !important;
    }
    .hxh-arrow {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .hxh-arrow:hover,
    .hxh-arrow:active {
        background: rgba(255, 255, 255, 0.22) !important;
    }
    .hxh-arrow svg {
        width: 16px !important;
        height: 16px !important;
        stroke-width: 2.4 !important;
    }
    /* Dots — küçük noktalar buton'ların arasında */
    .hxh-dots {
        display: flex !important;
        gap: 0.4rem !important;
        align-items: center !important;
        padding: 0 .15rem !important;
    }
    .hxh-dot {
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        min-height: 7px !important;
        max-width: 7px !important;
        max-height: 7px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.4) !important;
        border: 0 !important;
        cursor: pointer;
        padding: 0 !important;
        transition: background .2s ease, transform .2s ease, width .25s ease, max-width .25s ease;
        flex-shrink: 0 !important;
    }
    .hxh-dot:hover { background: rgba(255, 255, 255, 0.6) !important; }
    /* Active — elongated brass pill (override max-width restriction) */
    .hxh-dot[aria-current="true"],
    .hxh-dot.is-active {
        background: var(--brass-400, #C09D52) !important;
        width: 22px !important;
        max-width: 22px !important;
        border-radius: 999px !important;
        transform: none !important;
    }
}

/* ----- 16d. Firma panel chart axis labels mobile fix ------------- */
/* /firms/earnings'de .ern-bar-labels içindeki son tarih etiketi (15 Jun)
   parent dışına 27px taşıyor → body overflow. Clip + küçük font. */
.ern-chart,
.ern-bar-labels {
    overflow: hidden;
}
.ern-bar-labels {
    font-size: 0.68rem !important;
}
@media (max-width: 539px) {
    .ern-bar-labels > span {
        font-size: 0.62rem !important;
    }
}

/* Panel content içeriği için son güvenlik ağı: yatay taşmayı engelle */
.cp-content {
    overflow-x: clip;
    max-width: 100%;
}

/* ----- 16c. Mobil mega-menü drawer accordion fix ------------------ */
/* main.css 6342: `.mx-item.is-open .mega { transform: translateX(-50%) }`
   global olarak tanımlı. Mobile drawer'da mega-menü desktop pozisyon
   ayarını koruyup -144px sola taşıyor. Burada agresif override ile
   normal akış accordion pattern'i zorla. */
@media (max-width: 1023px) {
    .mx-item.has-mega > .mega,
    .mx-item.has-mega.is-open > .mega,
    .mx-item:hover > .mega,
    .mx-item:focus-within > .mega {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 0.75rem 0.5rem !important;
        border-radius: 0 !important;
    }
    /* Default kapalı (max-height 0), .is-open class ile expand — accordion.
       Mobile'da :hover/:focus-within ile açma yok (touch device'larda anlamsız
       ve sticky hover bug'ı tetikliyor). Sadece JS-yönetili .is-open class. */
    .mx-item.has-mega > .mega {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.32s cubic-bezier(.4,0,.2,1) !important;
    }
    .mx-item.has-mega.is-open > .mega {
        max-height: 2400px !important;
    }
    /* Mega-menü 3-4 sütunlu grid'ler mobile'da tek sütun olsun */
    .mx-item.has-mega .mega-inner,
    .mx-item.has-mega .mega-grid,
    .mx-item.has-mega .mega-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
    }
    /* Sub-link'ler arasında okuma yorulması olmasın */
    .mx-item.has-mega .mega a {
        padding: 0.65rem 0.4rem !important;
        font-size: 0.92rem !important;
    }
    /* Mega-h3 alt başlıkları sıkı */
    .mx-item.has-mega .mega-h3 {
        margin-top: 0.85rem !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.08em !important;
    }
}

/* ----- 16d-bis. Header "Firma Kayıt" CTA — brass accent ---------- */
/* .mx-cta-ghost varyantı: Giriş'in yanında ayırt edici brass border */
.mx-cta-firma {
    color: #A48541 !important;
    border-color: rgba(192, 157, 82, 0.45) !important;
    background: rgba(213, 181, 112, 0.06) !important;
}
.mx-cta-firma:hover {
    background: rgba(213, 181, 112, 0.14) !important;
    border-color: rgba(192, 157, 82, 0.7) !important;
    color: #896E30 !important;
}
.mx-cta-firma svg { color: #A48541; }

/* Mobil drawer "Firma Kayıt" link'i için ekstra: */
@media (max-width: 1023px) {
    .nav-mx-actions .mx-cta-firma {
        order: 2;
    }
}

/* ----- 16e. SEO il/ilçe hero başlık-paragraf standart boşluk ----- */
/* .hpro pattern (province.php, district.php, province-trucktype.php,
   district-trucktype.php, provinces.php) — header/breadcrumb'tan sonra
   nefes açıklığı + h1-sub arası editorial spacing. */
.hpro {
    padding: 2rem 0 1.5rem;
}
@media (min-width: 768px) {
    .hpro { padding: 2.75rem 0 2rem; }
}
.hpro h1 {
    margin: 0 0 0.85rem;
    line-height: 1.18;
    letter-spacing: -.018em;
}
.hpro-sub {
    margin: 0 0 1.25rem;
    line-height: 1.65;
}
.hpro-actions { margin-top: 1.2rem; }

/* ----- 17. Touch-friendly scroll on horizontal rows -------------- */
.scroll-x,
.horiz-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.scroll-x > *,
.horiz-scroll > * { scroll-snap-align: start; }

/* =================================================================
 * 18. MOBILE APP-STYLE PANEL PATTERNS (≤768px)
 * Hedef: iPhone 12/13/14 (375) + iPhone Plus (414) + tablet (768)
 * Tüm panel listeleme / detay sayfalarını "mobile app gibi" compact.
 * Tam fonksiyonellik korunur, sadece kompakt görsel yoğunluk.
 * ================================================================= */
@media (max-width: 767px) {

    /* ─── 18a. Panel topbar — kompakt ─────────────────────────── */
    .cp-topbar {
        padding: 0.6rem 0.85rem !important;
        gap: 0.5rem !important;
        min-height: 56px;
    }
    .cp-page-meta { min-width: 0; flex: 1; }
    .cp-eyebrow {
        font-size: 0.6rem !important;
        letter-spacing: 0.08em;
        margin-bottom: 0.1rem;
    }
    .cp-page-title {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cp-toolbar { gap: 0.35rem !important; }
    .cp-status-pill {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.72rem !important;
    }
    .cp-icon-btn {
        width: 38px !important;
        height: 38px !important;
    }
    .cp-user-chip-name { display: none !important; }
    .cp-user-chip-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }

    /* ─── 18b. Panel content padding ──────────────────────────── */
    .cp-content {
        padding: 0.85rem 0.75rem 5rem !important;
    }

    /* ─── 18c. Dashboard hero — minimal ───────────────────────── */
    .dash-hero {
        padding: 0.95rem 0.95rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.85rem !important;
    }
    .dash-hero-eyebrow {
        font-size: 0.62rem !important;
        letter-spacing: 0.1em;
    }
    .dash-hero-title {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
        margin: 0.3rem 0 0.45rem !important;
    }
    .dash-hero-sub,
    .dash-hero-text {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }
    .dash-hero-cta { padding: 0.65rem 1rem !important; font-size: 0.85rem !important; }

    /* ─── 18d. KPI cards — 2x2 compact ────────────────────────── */
    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    .dash-kpi {
        padding: 0.7rem 0.7rem !important;
        border-radius: 10px !important;
        min-height: auto !important;
    }
    .dash-kpi-eyebrow {
        margin-bottom: 0.25rem !important;
        gap: 0.3rem !important;
    }
    .dash-kpi-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.06em;
    }
    .dash-kpi-icon {
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
    }
    .dash-kpi-icon svg { width: 14px !important; height: 14px !important; }
    .dash-kpi-value {
        font-size: 1.3rem !important;
        line-height: 1.1 !important;
        margin: 0.15rem 0 0.2rem !important;
    }
    .dash-kpi-foot {
        font-size: 0.62rem !important;
        line-height: 1.3 !important;
    }
    /* Mobil <414: tek sütun değil 2 sütun (kompakt grid) — 320 hedefi için zorla */
    @media (max-width: 374px) {
        .dash-kpi { padding: 0.6rem !important; }
        .dash-kpi-value { font-size: 1.15rem !important; }
    }

    /* ─── 18e. Section title (h2'ler "Hızlı Aksiyon" vb.) ───── */
    .cp-section-h,
    .cp-eyebrow-h2,
    .dash-section-title,
    h2.cp-h {
        font-size: 0.78rem !important;
        letter-spacing: 0.1em !important;
        margin: 1rem 0 0.55rem !important;
    }

    /* ─── 18f. Firma panel talepler listesi (.tlp-item) ──────── */
    .tlp-list {
        gap: 0.55rem !important;
    }
    .tlp-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 0.7rem 0.75rem !important;
        gap: 0.65rem !important;
        border-radius: 11px !important;
    }
    .tlp-item-rail {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .tlp-item-rail-icon { width: 18px !important; height: 18px !important; }
    .tlp-item-rail-code {
        font-size: 0.55rem !important;
        margin-top: 0.15rem !important;
    }
    .tlp-item-body { min-width: 0; flex: 1; }
    .tlp-item-row1 {
        gap: 0.4rem !important;
        margin-bottom: 0.2rem !important;
    }
    .tlp-item-title {
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    .tlp-item-locs {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        gap: 0.3rem !important;
        display: flex !important;
        flex-wrap: wrap;
    }
    .tlp-item-loc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .tlp-item-meta {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
        gap: 0.35rem !important;
        flex-wrap: wrap;
    }
    .tlp-item-meta-cell { padding: 0; }
    .tlp-item-tail {
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 0.35rem !important;
    }
    .tlp-item-time {
        font-size: 0.66rem !important;
        white-space: nowrap;
    }
    .tlp-item-cta {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
    }
    /* Çok geniş badge'leri sığdır */
    .tlp-item-tag {
        font-size: 0.6rem !important;
        padding: 0.18rem 0.4rem !important;
    }

    /* ─── 18g. Firma panel tekliflerim row (.off-row) — mobile app ───── */
    /* Grid: 2 col (info | price/time) + status/time row + code header */
    .off-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        column-gap: 0.7rem !important;
        row-gap: 0.2rem !important;
        padding: 0.7rem 0.85rem !important;
        border-radius: 11px !important;
        align-items: start !important;
        min-height: auto !important;
    }
    .off-row > * { min-width: 0; }
    /* nth-child(1) = code (header) */
    .off-row > .off-code {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        color: rgba(10,37,64,.55) !important;
        letter-spacing: 0.04em;
        margin-bottom: 0.05rem !important;
    }
    /* nth-child(2) = vehicle group (no class wrapper) — info */
    .off-row > div:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }
    .off-vehicle {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    .off-vehicle-sub {
        font-size: 0.72rem !important;
        opacity: 0.65;
        margin-top: 0.05rem !important;
    }
    /* nth-child(3) = route */
    .off-row > .off-route {
        grid-column: 1;
        grid-row: 3;
        font-size: 0.74rem !important;
        gap: 0.3rem !important;
        opacity: 0.85;
    }
    .off-route svg { width: 11px !important; height: 11px !important; }
    /* nth-child(4) = price (sağ üst) */
    .off-row > .off-price {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        align-self: center;
        font-size: 1.15rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }
    /* nth-child(5) = time (sağ alt) */
    .off-row > .off-time {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
        font-size: 0.7rem !important;
        opacity: 0.6;
        white-space: nowrap;
    }
    /* nth-child(6) = status badge wrapper */
    .off-row > div:nth-child(6),
    .off-row > .off-status-wrap {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: start;
        margin-top: 0.3rem !important;
    }
    .off-status {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.5rem !important;
        letter-spacing: 0.05em;
    }

    /* ─── 18h. Off-table head (KOD/ARAÇ etc.) mobile gizle ────── */
    .off-row--head {
        display: none !important;
    }

    /* ─── 18h-bis. User panel /user/requests (.dx-list-row) ───── */
    /* 3-col grid: icon | body | meta (badge sağda) — kompakt list */
    .dx-list-row {
        display: grid !important;
        grid-template-columns: 40px 1fr auto !important;
        align-items: center !important;
        column-gap: 0.7rem !important;
        row-gap: 0.15rem !important;
        padding: 0.75rem 0.85rem !important;
        border-radius: 11px !important;
        min-height: auto !important;
    }
    .dx-list-row > * { min-width: 0; }
    .dx-list-ic {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .dx-list-body {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
        overflow: hidden;
    }
    .dx-list-meta {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        text-align: right;
        font-size: 0.7rem !important;
        white-space: nowrap;
        opacity: 0.75;
    }

    /* ─── 18i. User panel listeleme (.dx-* card pattern) ─────── */
    .dx-card {
        padding: 0.75rem 0.85rem !important;
        border-radius: 11px !important;
        gap: 0.5rem !important;
    }
    .dx-row-kv {
        gap: 0.3rem !important;
        font-size: 0.82rem !important;
    }
    .dx-row-kv > span:first-child {
        font-size: 0.65rem !important;
        letter-spacing: 0.05em !important;
    }
    .dx-price {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }
    .dx-price-tl {
        font-size: 0.7rem !important;
        margin-left: 0.15rem;
    }
    /* MINIMAL: action button'ları gizle, ilk link'i tüm karta overlay yap.
       Kullanıcı her yere tıklayıp detaya gider (WhatsApp/iOS Settings pattern). */
    .dx-card { position: relative !important; cursor: pointer; }
    .dx-card-actions {
        position: absolute !important;
        inset: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        gap: 0 !important;
    }
    .dx-card-actions > a:first-child {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        padding: 0 !important;
        text-indent: -9999px;
        overflow: hidden;
        z-index: 1;
    }
    .dx-card-actions > a:first-child svg { display: none !important; }
    /* Talebi Gör gibi 2. button gizli */
    .dx-card-actions > a:nth-child(2),
    .dx-card-actions > .dx-btn:nth-child(2) { display: none !important; }
    /* Hover feedback */
    .dx-card:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }

    /* Card body kompakt: row-kv satırları sıkı + firma notu max 2 satır */
    .dx-card-top {
        gap: 0.55rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .dx-card-body { gap: 0.25rem !important; }
    .dx-card-body .dx-row-kv {
        padding: 0.18rem 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }
    .dx-card-body .dx-row-kv > span:first-child {
        font-size: 0.6rem !important;
        opacity: 0.65;
    }
    /* Firma notu (inline FBFAF7 background div) → 2 satır clamp */
    .dx-card-body > div[style*="FBFAF7"] {
        -webkit-line-clamp: 2;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        font-size: 0.78rem !important;
        padding: 0.5rem 0.7rem !important;
        line-height: 1.4 !important;
    }

    /* Dashboard stats row (user panel /user/dashboard) */
    .dx-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    .dx-stat-card {
        padding: 0.65rem 0.7rem !important;
        border-radius: 10px !important;
    }
    .dx-stat-value {
        font-size: 1.3rem !important;
    }
    .dx-stat-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.05em;
    }

    /* ─── 18j. Talep detay (.rd-* — /user/request/{id}) ─────── */
    .rd-summary {
        flex-wrap: wrap !important;
        gap: 0.5rem 0.85rem !important;
        padding: 0.7rem 0.85rem !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
    }
    .rd-summary > div { min-width: 0; }
    .rd-summary span {
        font-size: 0.6rem !important;
        letter-spacing: 0.05em !important;
    }
    .rd-summary b {
        font-size: 0.85rem !important;
    }
    .rd-detail-card {
        padding: 0.85rem !important;
        border-radius: 10px !important;
    }

    /* Talep detayında "Gelen Teklifler" satır listesi */
    .rd-offer {
        grid-template-columns: 32px 1fr auto !important;
        gap: 0.5rem !important;
        padding: 0.7rem 0.75rem !important;
        border-radius: 10px !important;
    }
    .rd-offer > *:nth-child(n+4) { display: none !important; }
    /* Avatar + isim + fiyat. Detaya gitmek için tüm row tıklanabilir */
    .rd-offer-av {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }
    .rd-offer-name {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }
    .rd-offer-meta {
        font-size: 0.7rem !important;
        opacity: 0.7;
    }
    .rd-offer-price {
        font-size: 1rem !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

    /* ─── 18k. Teklif detay (.od-* user, .fod-* firma) ──────── */
    .od-shell,
    .fod-shell { gap: 0.7rem !important; max-width: 100% !important; }

    .od-hero,
    .fod-hero {
        padding: 0.95rem 0.95rem !important;
        gap: 0.85rem !important;
        border-radius: 12px !important;
        align-items: flex-start !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .od-hero-av,
    .fod-hero-av {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
        border-radius: 10px !important;
    }
    .od-hero-body,
    .fod-hero-body { flex: 1 1 60%; min-width: 0; }
    .od-hero-eyebrow,
    .fod-hero-eyebrow {
        font-size: 0.6rem !important;
        margin-bottom: 0.15rem !important;
    }
    .od-hero-name,
    .fod-hero-name {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.2rem !important;
        word-break: break-word;
    }
    .od-hero-meta,
    .fod-hero-meta {
        font-size: 0.72rem !important;
        gap: 0.3rem 0.55rem !important;
        line-height: 1.25 !important;
    }
    .od-hero-price,
    .fod-hero-price {
        flex: 1 1 100%;
        text-align: left !important;
        border-top: 1px dashed rgba(10,37,64,.1);
        padding-top: 0.6rem;
        margin-top: 0.2rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        flex-wrap: wrap;
    }
    .od-hero-price-l,
    .fod-hero-price-l {
        font-size: 0.6rem !important;
        margin: 0 !important;
    }
    .od-hero-price-v,
    .fod-hero-price-v {
        font-size: 1.6rem !important;
        line-height: 1 !important;
    }
    .od-hero-price-v small,
    .fod-hero-price-v small {
        font-size: 0.85rem !important;
    }
    .od-hero-status,
    .fod-hero-status {
        margin: 0 !important;
        font-size: 0.6rem !important;
        padding: 0.3rem 0.5rem !important;
    }

    .od-card,
    .fod-card {
        padding: 0.85rem 0.95rem !important;
        border-radius: 11px !important;
    }
    .od-card-head,
    .fod-card-head {
        gap: 0.45rem !important;
        margin-bottom: 0.7rem !important;
        padding-bottom: 0.55rem !important;
    }
    .od-card-head h3,
    .fod-card-head h3 {
        font-size: 0.88rem !important;
    }
    .od-card-head svg,
    .fod-card-head svg {
        width: 14px !important;
        height: 14px !important;
    }
    .od-card-head-meta,
    .fod-card-head-meta {
        font-size: 0.68rem !important;
    }
    .od-note,
    .fod-note {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
    }
    .od-kvs,
    .fod-kvs {
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }
    .od-kv,
    .fod-kv {
        font-size: 0.8rem !important;
    }
    .od-kv span,
    .fod-kv span {
        font-size: 0.58rem !important;
    }

    /* Mesaj thread — compact bubbles */
    .od-msgs,
    .fod-msgs {
        max-height: 380px !important;
        padding: 0.5rem 0.55rem !important;
    }
    .od-msg,
    .fod-msg {
        max-width: 88% !important;
        gap: 0.15rem !important;
    }
    .od-msg-meta,
    .fod-msg-meta {
        font-size: 0.6rem !important;
    }
    .od-msg-body,
    .fod-msg-body {
        padding: 0.55rem 0.75rem !important;
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        padding-right: 3rem !important;
    }
    .od-msg-time,
    .fod-msg-time {
        font-size: 0.6rem !important;
        right: 0.5rem !important;
        bottom: 0.4rem !important;
    }
    .od-msg-day,
    .fod-msg-day {
        font-size: 0.6rem !important;
        padding: 0.35rem 0 0.2rem !important;
    }
    .od-msg-form,
    .fod-msg-form {
        gap: 0.45rem !important;
        margin-top: 0.65rem !important;
        padding-top: 0.65rem !important;
    }
    .od-msg-input,
    .fod-msg-input {
        padding: 0.55rem 0.75rem !important;
        font-size: 16px !important;       /* iOS zoom-prevent koru */
        min-height: 42px !important;
    }
    .od-msg-actions,
    .fod-msg-actions { gap: 0.45rem !important; }
    .od-msg-revise,
    .fod-msg-revise {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    .od-msg-send,
    .fod-msg-send {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.8rem !important;
    }

    /* Sticky aksiyon bar — compact + safe-area */
    .od-actions,
    .fod-actions {
        padding: 0.7rem 0.85rem !important;
        gap: 0.55rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 11px !important;
    }
    .od-actions-text,
    .fod-actions-text {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        order: 1;
    }
    .od-actions > div:last-child,
    .fod-actions > div:last-child {
        order: 2;
        display: flex !important;
        gap: 0.5rem !important;
    }
    .od-btn,
    .fod-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.88rem !important;
        flex: 1;
        justify-content: center !important;
        border-radius: 9px !important;
    }

    /* ─── 18l. Firma dizini kartları (/user/firmalar — .fd-card) ── */
    .fd-grid,
    .fd-firmalar-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* fd-card: 2 col grid (thumb avatar | body), actions altta */
    .fd-card {
        display: grid !important;
        grid-template-columns: 60px 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 0.7rem !important;
        row-gap: 0.55rem !important;
        padding: 0.75rem 0.85rem !important;
        border-radius: 11px !important;
        align-items: center;
    }
    .fd-thumb {
        grid-column: 1;
        grid-row: 1;
        width: 60px !important;
        height: 60px !important;
        min-height: auto !important;
        aspect-ratio: 1 !important;
        border-radius: 10px !important;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }
    .fd-thumb img,
    .fd-thumb picture {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    /* Onaylı/year badge'leri thumb içinde küçük rozet */
    .fd-thumb-badge,
    .fd-badge {
        font-size: 0.5rem !important;
        padding: 0.12rem 0.32rem !important;
        bottom: 2px;
    }
    .fd-body {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding: 0 !important;
    }
    .fd-body h3,
    .fd-name {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        margin: 0 0 0.25rem !important;
    }
    .fd-meta,
    .fd-body p,
    .fd-body small {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        opacity: 0.85;
    }
    .fd-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.45rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px dashed rgba(10,37,64,.08);
    }
    .fd-actions > a,
    .fd-actions > button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.5rem !important;
        font-size: 0.78rem !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap;
    }

    /* Legacy fc-card / firma-card backward-compat */
    .fc-card,
    .firma-card {
        padding: 0.85rem 0.85rem !important;
        gap: 0.65rem !important;
        border-radius: 11px !important;
    }
    .fc-card-head { gap: 0.65rem !important; }
    .fc-card-av,
    .firma-card-av {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
    .fc-card-name,
    .firma-card-name {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }
    .fc-card-meta,
    .firma-card-meta {
        font-size: 0.72rem !important;
    }
    .fc-card-body,
    .firma-card-body {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .fc-actions,
    .firma-card-actions {
        gap: 0.45rem !important;
        flex-direction: row !important;
    }
    .fc-actions .dx-btn,
    .firma-card-actions a {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* ─── 18m. Filtre pills compact ─────────────────────────── */
    .fd-filters,
    .dx-filters,
    .cp-filters {
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
    }
    .fd-filters-pill,
    .filter-pill {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.72rem !important;
    }
    .fd-filters-pill select,
    .filter-pill select {
        font-size: 0.78rem !important;
    }

    /* ─── 18n. Sticky bottom navigation güvence (FAB safe-area) ── */
    /* Sticky CTA + safe-area bottom inset */
    .od-actions,
    .fod-actions {
        position: sticky;
        bottom: 0;
        padding-bottom: max(0.7rem, calc(0.7rem + var(--safe-bottom))) !important;
    }

    /* ─── 18o. Bütün kart-bordür sönsün, compact gölge ─────── */
    .dash-hero,
    .dash-kpi,
    .tlp-item,
    .off-row,
    .dx-card,
    .od-card,
    .fod-card,
    .od-hero,
    .fod-hero,
    .fc-card {
        box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 2px 8px -3px rgba(10,37,64,.06) !important;
        border-color: rgba(10,37,64,.06) !important;
    }
}

/* =================================================================
 * 18p. RADİKAL MOBILE-APP YOĞUNLUK — WhatsApp/Slack/Banking standartı
 * Liste satırları 64-88px, kartlar 140-180px, hero'lar 120-150px.
 * Bu blok 18a-18o'yu OVERRIDE eder (sonda olduğu için).
 * ================================================================= */
@media (max-width: 767px) {

    /* ─── GLOBAL SCALE-DOWN ───────────────────────────────────────
       html font-size 16px → 11px (%69 ölçek). Tüm rem-based widget'lar
       global olarak küçülür. Daha sıkı mobile-app yoğunluğu.
       Form input'lar için 16px iOS zoom-prevent korunur (bkz 3. madde). */
    html {
        font-size: 11px !important;
    }

    /* ─── Mobil topbar tüm görsel özellikleri sıfırla — sadece floating
       hamburger görünür (FAB pattern). display:contents kullanılarak
       child'ların layout'unu bozmadan parent kaybedilir. ─── */
    .cp-topbar {
        display: contents !important;
    }
    /* Topbar içindeki tüm children gizli (page-title, toolbar, status pill, vs.) */
    .cp-topbar > *:not(.cp-burger) {
        display: none !important;
    }
    /* Floating hamburger butonu sol-üst köşede sabit */
    .cp-burger {
        position: fixed !important;
        top: max(0.7rem, env(safe-area-inset-top, 0.7rem)) !important;
        left: 0.7rem !important;
        z-index: 60 !important;
        width: 40px !important;
        height: 40px !important;
        background: #fff !important;
        border: 1px solid rgba(10,37,64,.08) !important;
        box-shadow: 0 4px 12px rgba(10,37,64,.08) !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    .cp-burger svg { width: 19px !important; height: 19px !important; }
    /* Content padding-top: floating burger için yer aç */
    .cp-content {
        padding-top: max(3.5rem, calc(3.5rem + env(safe-area-inset-top, 0px))) !important;
    }

    .cp-content {
        padding: 0.65rem 0.6rem 4.5rem !important;
    }

    /* ─── Dashboard hero ULTRA kompakt ─── */
    .dash-hero {
        padding: 0.7rem 0.75rem !important;
        margin-bottom: 0.65rem !important;
    }
    .dash-hero-eyebrow {
        font-size: 0.55rem !important;
    }
    .dash-hero-title {
        font-size: 0.95rem !important;
        margin: 0.2rem 0 0.3rem !important;
    }
    .dash-hero-sub,
    .dash-hero-text {
        font-size: 0.74rem !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dash-hero-cta {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.78rem !important;
    }

    /* ─── KPI cards — TEK SATIR 4 SÜTUN (mobile-app bottom-stats pattern) ─── */
    /* User dashboard: .dx-stats / .dx-stat — Firma dashboard: .dash-kpis / .dash-kpi */
    .dash-kpis,
    .dx-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.25rem !important;
        margin-bottom: 0.55rem !important;
        display: grid !important;
    }
    .dash-kpi,
    .dx-stat {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.1rem !important;
        padding: 0.4rem 0.3rem !important;
        border-radius: 7px !important;
        min-height: auto !important;
        text-align: center;
    }
    /* Value (rakam) — büyük üstte */
    .dx-stat > div:first-child,
    .dx-stat-value {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin: 0 !important;
        order: 0;
    }
    /* Label (AÇIK TALEP) — küçük altta */
    .dx-stat > div:last-child,
    .dx-stat-label,
    .dx-stat > span:last-child {
        font-size: 0.48rem !important;
        letter-spacing: 0.04em !important;
        line-height: 1.15 !important;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: 1;
        opacity: 0.75;
    }
    /* dx-stat iç wrapper varsa onu da flex tut */
    .dx-stat > div:only-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.45rem !important;
        width: 100%;
    }

    /* Firma /firms/offers KPI (.off-summary-cell) — TEK SATIR 4 sütun */
    .off-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.25rem !important;
        display: grid !important;
    }
    .off-summary-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.1rem !important;
        padding: 0.4rem 0.3rem !important;
        border-radius: 7px !important;
        min-height: auto !important;
        text-align: center;
    }
    /* Value (rakam) — büyük ortada */
    .off-summary-cell > *:nth-child(2),
    .off-summary-value {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin: 0 !important;
        order: 0;
    }
    /* Label (TOPLAM TEKLİF) — küçük üstte */
    .off-summary-label {
        font-size: 0.48rem !important;
        letter-spacing: 0.04em !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: -1;
        opacity: 0.75;
    }
    /* Foot (Tüm zamanlar) — gizle */
    .off-summary-foot,
    .off-summary-cell > *:nth-child(3) {
        display: none !important;
    }
    /* Value sol — kompakt rakam */
    .dash-kpi-value {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        line-height: 1 !important;
        min-width: 18px;
        order: 0;
    }
    /* Eyebrow (icon + label) sağ */
    .dash-kpi-eyebrow {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        gap: 0.3rem !important;
        margin: 0 !important;
        flex: 1;
        order: 1;
        min-width: 0;
    }
    .dash-kpi-label {
        font-size: 0.5rem !important;
        letter-spacing: 0.05em !important;
        line-height: 1.1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dash-kpi-icon {
        width: 16px !important;
        height: 16px !important;
        border-radius: 4px !important;
        flex-shrink: 0;
    }
    .dash-kpi-icon svg { width: 9px !important; height: 9px !important; }
    /* Foot text tamamen gizle — gereksiz */
    .dash-kpi-foot {
        display: none !important;
    }

    /* ─── Talepler (.tlp-item) — 72px tek satır WhatsApp pattern ─── */
    .tlp-item {
        padding: 0.55rem 0.65rem !important;
        gap: 0.5rem !important;
        border-radius: 9px !important;
        min-height: auto !important;
    }
    .tlp-item-rail {
        width: 34px !important;
        height: 34px !important;
    }
    .tlp-item-rail-icon { width: 16px !important; height: 16px !important; }
    .tlp-item-rail-icon svg { width: 16px !important; height: 16px !important; }
    .tlp-item-rail-code {
        font-size: 0.48rem !important;
    }
    .tlp-item-row1 {
        gap: 0.3rem !important;
        margin-bottom: 0.12rem !important;
    }
    .tlp-item-title {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
    .tlp-item-tag {
        font-size: 0.55rem !important;
        padding: 0.12rem 0.32rem !important;
    }
    .tlp-item-locs {
        font-size: 0.72rem !important;
        gap: 0.25rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .tlp-item-loc { font-size: 0.72rem !important; }
    .tlp-item-meta {
        font-size: 0.6rem !important;
        margin-top: 0.12rem !important;
        gap: 0.25rem !important;
        opacity: 0.7;
    }
    .tlp-item-meta-cell svg { width: 9px !important; height: 9px !important; }
    .tlp-item-time {
        font-size: 0.6rem !important;
    }
    /* MINIMAL: tlp-item tüm satır tıklanabilir (zaten <a>), CTA gizle */
    .tlp-item-cta {
        font-size: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: transparent !important;
        width: 14px;
        height: 14px;
    }
    .tlp-item-cta::after {
        content: "›";
        position: absolute;
        right: 0.65rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(10,37,64,.35);
        font-size: 1.1rem;
        font-weight: 400;
    }
    .tlp-item { position: relative; }

    /* ─── User /user/requests (.dx-list-row) — 64-72px tek satır ─── */
    .dx-list-row {
        padding: 0.5rem 0.65rem !important;
        column-gap: 0.55rem !important;
        row-gap: 0 !important;
        border-radius: 9px !important;
        align-items: center !important;
        grid-template-columns: 36px 1fr auto !important;
    }
    .dx-list-ic {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.05rem !important;
        grid-row: 1 !important;
        align-self: center !important;
    }
    .dx-list-body {
        grid-row: 1 !important;
        max-height: 38px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        justify-content: center;
        min-width: 0;
    }
    .dx-list-body > * {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.15 !important;
    }
    .dx-list-top {
        font-size: 0.6rem !important;
        opacity: 0.65;
        display: flex !important;
        gap: 0.4rem !important;
        flex-shrink: 0;
    }
    .dx-list-vehicle,
    .dx-list-body > div:not(.dx-list-top) {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
    }
    .dx-list-status {
        font-size: 0.5rem !important;
        padding: 0.08rem 0.3rem !important;
    }
    .dx-list-meta {
        font-size: 0.6rem !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    /* ─── Off-row — 88-100px feed item ─── */
    .off-row {
        padding: 0.55rem 0.7rem !important;
        column-gap: 0.55rem !important;
        row-gap: 0.12rem !important;
        border-radius: 9px !important;
    }
    .off-row > .off-code {
        font-size: 0.55rem !important;
        margin-bottom: 0 !important;
    }
    .off-vehicle {
        font-size: 0.84rem !important;
    }
    .off-vehicle-sub {
        font-size: 0.66rem !important;
    }
    .off-row > .off-route {
        font-size: 0.68rem !important;
    }
    .off-row > .off-route svg { width: 9px !important; height: 9px !important; }
    .off-row > .off-price {
        font-size: 1rem !important;
    }
    .off-row > .off-time {
        font-size: 0.6rem !important;
    }
    .off-status {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    /* ─── Dx-card (user/offers, gelen teklif feed) — 180px max ─── */
    .dx-card {
        padding: 0.6rem 0.7rem !important;
        gap: 0.35rem !important;
        border-radius: 9px !important;
    }
    .dx-card-top {
        gap: 0.45rem !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.35rem !important;
    }
    .dx-card-top img,
    .dx-card-top > div:first-child {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }
    .dx-card-top h3 {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }
    .dx-card-top [class*=status] {
        font-size: 0.55rem !important;
        padding: 0.12rem 0.4rem !important;
    }
    /* Body: MINIMAL — sadece fiyat göster, gerisini gizle. Detay sayfasında tam bilgi. */
    .dx-card-body {
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    /* Tüm row-kv'leri ve firma notunu gizle */
    .dx-card-body > .dx-row-kv,
    .dx-card-body > div[style*="FBFAF7"],
    .dx-card-body > div[style*="background"],
    .dx-card-body > div:not(.dx-card-price-line) {
        display: none !important;
    }
    /* Sadece fiyat içeren row-kv'yi (genelde son) göster — :has yedeği için son row */
    .dx-card-body > .dx-row-kv:has(.dx-price),
    .dx-card-body > .dx-row-kv:nth-last-of-type(2) {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: baseline !important;
        gap: 0.4rem !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #C09D52 !important;
    }
    /* Fiyat satırının "Teklif Fiyatı" label'ı gizli kalsın */
    .dx-card-body > .dx-row-kv:has(.dx-price) > span:first-child,
    .dx-card-body > .dx-row-kv:nth-last-of-type(2) > span:first-child {
        display: none !important;
    }
    .dx-price {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: #C09D52 !important;
    }
    .dx-price-tl {
        font-size: 0.85rem !important;
        margin-left: 0.15rem;
    }
    .dx-card-actions {
        gap: 0.4rem !important;
        margin-top: 0.4rem !important;
        padding-top: 0.4rem !important;
    }
    .dx-card-actions > a,
    .dx-card-actions > .dx-btn {
        padding: 0.42rem 0.4rem !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
    }
    .dx-btn svg { width: 11px !important; height: 11px !important; }

    /* ─── Fd-card (firma dizini) — WhatsApp chat list pattern ─── */
    .fd-card {
        padding: 0.6rem 0.75rem !important;
        column-gap: 0.6rem !important;
        row-gap: 0 !important;
        border-radius: 9px !important;
        overflow: visible !important;
    }
    .fd-thumb {
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px !important;
        align-self: center;
    }
    /* "21 YIL ONAYLI" gibi rozet — küçük badge */
    .fd-thumb-badge,
    .fd-badge {
        font-size: 0.42rem !important;
        padding: 0.08rem 0.25rem !important;
        line-height: 1.2;
    }
    /* Body: max 2 satır + üstte yeterli alan title ascender için */
    .fd-body {
        overflow: visible !important;
        max-height: none !important;
        padding: 0 !important;
        align-self: center;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 0.1rem !important;
    }
    .fd-body h3,
    .fd-name {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 700;
    }
    .fd-meta,
    .fd-body p,
    .fd-body small {
        font-size: 0.62rem !important;
        line-height: 1.3 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 !important;
        opacity: 0.75;
    }
    /* Filo / 3. satır ve sonrası gizle — sadece title + 1 sub */
    .fd-body p:nth-of-type(n+2),
    .fd-body small:nth-of-type(n+2),
    .fd-body > div:nth-of-type(n+3),
    .fd-body > *:nth-child(n+3) {
        display: none !important;
    }
    /* MINIMAL: tüm fd-card tıklanabilir, action button'ları gizle */
    .fd-card { position: relative !important; cursor: pointer; }
    .fd-actions {
        position: absolute !important;
        inset: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        gap: 0 !important;
    }
    .fd-actions > a:first-child,
    .fd-actions > button:first-child {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        color: transparent !important;
        border: 0 !important;
        font-size: 0 !important;
        text-indent: -9999px;
        overflow: hidden;
        padding: 0 !important;
    }
    .fd-actions > a:first-child svg,
    .fd-actions > button:first-child svg { display: none !important; }
    .fd-actions > a:nth-child(2),
    .fd-actions > button:nth-child(2) { display: none !important; }
    .fd-card:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }

    /* ─── Detay sayfaları (.od-, .fod-) hero kompakt ─── */
    .od-hero,
    .fod-hero {
        padding: 0.7rem 0.75rem !important;
        gap: 0.5rem !important;
        border-radius: 10px !important;
    }
    .od-hero-av,
    .fod-hero-av {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }
    .od-hero-eyebrow,
    .fod-hero-eyebrow {
        font-size: 0.5rem !important;
        margin-bottom: 0.1rem !important;
    }
    .od-hero-name,
    .fod-hero-name {
        font-size: 0.92rem !important;
        margin-bottom: 0.15rem !important;
    }
    .od-hero-meta,
    .fod-hero-meta {
        font-size: 0.62rem !important;
        gap: 0.2rem 0.45rem !important;
    }
    .od-hero-price,
    .fod-hero-price {
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
    }
    .od-hero-price-l,
    .fod-hero-price-l {
        font-size: 0.52rem !important;
    }
    .od-hero-price-v,
    .fod-hero-price-v {
        font-size: 1.35rem !important;
    }
    .od-hero-price-v small,
    .fod-hero-price-v small {
        font-size: 0.7rem !important;
    }
    .od-hero-status,
    .fod-hero-status {
        font-size: 0.5rem !important;
        padding: 0.22rem 0.4rem !important;
    }

    /* Detay sayfaları kart kompakt */
    .od-card,
    .fod-card {
        padding: 0.65rem 0.75rem !important;
        border-radius: 9px !important;
    }
    .od-card-head,
    .fod-card-head {
        gap: 0.35rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.4rem !important;
    }
    .od-card-head h3,
    .fod-card-head h3 {
        font-size: 0.78rem !important;
    }
    .od-card-head svg,
    .fod-card-head svg { width: 12px !important; height: 12px !important; }
    .od-card-head-meta,
    .fod-card-head-meta {
        font-size: 0.6rem !important;
    }
    .od-note,
    .fod-note {
        padding: 0.55rem 0.7rem !important;
        font-size: 0.74rem !important;
        line-height: 1.45 !important;
    }
    .od-kv,
    .fod-kv {
        font-size: 0.72rem !important;
    }
    .od-kv span,
    .fod-kv span {
        font-size: 0.5rem !important;
    }
    .od-kvs,
    .fod-kvs { gap: 0.4rem !important; }

    /* Mesaj thread ULTRA kompakt — 320px max */
    .od-msgs,
    .fod-msgs {
        max-height: 320px !important;
        padding: 0.4rem 0.5rem !important;
        gap: 0.45rem !important;
    }
    .od-msg,
    .fod-msg {
        max-width: 86% !important;
    }
    .od-msg-meta,
    .fod-msg-meta { font-size: 0.55rem !important; }
    .od-msg-body,
    .fod-msg-body {
        padding: 0.45rem 0.65rem !important;
        padding-right: 2.6rem !important;
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
        border-radius: 7px !important;
    }
    .od-msg-time,
    .fod-msg-time {
        font-size: 0.55rem !important;
    }
    .od-msg-day,
    .fod-msg-day {
        font-size: 0.55rem !important;
        padding: 0.3rem 0 0.15rem !important;
    }
    .od-msg-input,
    .fod-msg-input {
        padding: 0.45rem 0.65rem !important;
        font-size: 16px !important;        /* iOS zoom önleme korunur */
        min-height: 38px !important;
    }
    .od-msg-revise,
    .fod-msg-revise {
        padding: 0.42rem 0.6rem !important;
        font-size: 0.68rem !important;
    }
    .od-msg-send,
    .fod-msg-send {
        padding: 0.42rem 0.7rem !important;
        font-size: 0.72rem !important;
    }

    /* Sticky action bar — kompakt */
    .od-actions,
    .fod-actions {
        padding: 0.55rem 0.7rem !important;
        gap: 0.4rem !important;
        border-radius: 9px !important;
    }
    .od-actions-text,
    .fod-actions-text {
        font-size: 0.7rem !important;
        line-height: 1.35 !important;
    }
    .od-btn,
    .fod-btn {
        padding: 0.6rem 0.7rem !important;
        font-size: 0.78rem !important;
        border-radius: 7px !important;
    }
    .od-btn svg,
    .fod-btn svg { width: 12px !important; height: 12px !important; }

    /* Talep detayında (.rd-) ─ */
    .rd-summary {
        padding: 0.55rem 0.7rem !important;
        gap: 0.4rem 0.7rem !important;
        font-size: 0.72rem !important;
    }
    .rd-summary span {
        font-size: 0.5rem !important;
    }
    .rd-summary b {
        font-size: 0.78rem !important;
    }
    .rd-offer {
        grid-template-columns: 28px 1fr auto !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.65rem !important;
        border-radius: 8px !important;
        min-height: auto !important;
    }
    .rd-offer-av {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
    }
    .rd-offer-name {
        font-size: 0.78rem !important;
    }
    .rd-offer-meta {
        font-size: 0.6rem !important;
    }
    .rd-offer-price {
        font-size: 0.88rem !important;
    }

    /* Bütün kartların border-radius/shadow tutarlı kompakt */
    .dash-hero,
    .dash-kpi,
    .tlp-item,
    .off-row,
    .dx-card,
    .dx-list-row,
    .od-card,
    .fod-card,
    .od-hero,
    .fod-hero,
    .fd-card,
    .rd-summary,
    .rd-detail-card,
    .rd-offer {
        box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
    }

    /* Tüm pill/badge/chip kompakt */
    [class*=pill],
    [class*=badge],
    [class*=chip],
    [class*=tag] {
        font-size: 0.6rem !important;
    }
}

/* =================================================================
 * 19. ULTRA-SMALL (≤374px = iPhone SE eski, küçük Android)
 * ================================================================= */
@media (max-width: 374px) {
    .cp-content { padding: 0.7rem 0.6rem 5rem !important; }
    .cp-page-title { font-size: 0.95rem !important; }
    .dash-kpi-value { font-size: 1.1rem !important; }
    .od-hero-price-v,
    .fod-hero-price-v { font-size: 1.4rem !important; }
    .od-hero-av,
    .fod-hero-av {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
    }
    .od-hero-name,
    .fod-hero-name { font-size: 1rem !important; }
}