/* ==================================================================
   PAGE-SPECIFIC MOBILE & TABLET RESPONSIVE FIXES
   14 sayfa için mobil/tablet uyumlu düzenlemeler.
   Dosya: core_app/static/css/page_mobile_responsive.css
   ================================================================== */

/* ==================================================================
   1. PROCUREMENT DASHBOARD — Tablo→Kart + Finansal Kartlar
   ================================================================== */
@media (max-width: 767.98px) {
    /* Finansal özet kartları: 2x2 grid */
    .procurement-page .financial-card h3 {
        font-size: 1.25rem;
    }

    .procurement-page .financial-card h6 {
        font-size: 0.7rem;
    }

    /* Procurement tablo → kart dönüşümü */
    .procurement-page .procurement-table thead {
        display: none;
    }

    .procurement-page .procurement-table,
    .procurement-page .procurement-table tbody,
    .procurement-page .procurement-table tr,
    .procurement-page .procurement-table td {
        display: block;
        width: 100%;
    }

    .procurement-page .procurement-table tbody tr {
        padding: 14px 16px;
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius-2026, 20px);
        background: #fff;
        position: relative;
    }

    .procurement-page .procurement-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .procurement-page .procurement-table tbody td {
        padding: 4px 0;
        border-bottom: none;
        font-size: 0.85rem;
    }

    .procurement-page .procurement-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
    }

    .procurement-page .procurement-table tbody td:first-child {
        padding-top: 0;
    }

    .procurement-page .procurement-table tbody td:last-child {
        padding-top: 8px;
        padding-bottom: 0;
    }

    .procurement-page .procurement-table tbody td.text-end {
        text-align: left !important;
    }

    .procurement-page .procurement-table tbody td .d-flex.justify-content-end {
        justify-content: flex-start !important;
    }

    /* Fatura tabloları da kart olsun */
    .procurement-page .table.table-sm thead {
        display: none;
    }

    .procurement-page .table.table-sm,
    .procurement-page .table.table-sm tbody,
    .procurement-page .table.table-sm tr,
    .procurement-page .table.table-sm td {
        display: block;
        width: 100%;
    }

    .procurement-page .table.table-sm tbody tr {
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
    }

    .procurement-page .table.table-sm tbody td {
        padding: 3px 0;
        border: none;
    }

    .procurement-page .table.table-sm tbody td::before {
        content: attr(data-label);
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        min-width: 60px;
        margin-right: 8px;
    }

    /* Fatura yan yana → alt alta */
    .procurement-page .col-md-6 .procurement-card {
        margin-bottom: 12px;
    }

    /* Section header stack */
    .procurement-page .section-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .procurement-page .section-header .btn-procurement {
        width: 100%;
        justify-content: center;
    }

    /* Filtre barı: dikey düzen */
    .procurement-page .filter-bar .row {
        gap: 0;
    }

    .procurement-page .filter-bar .col-md-1,
    .procurement-page .filter-bar .col-md-2,
    .procurement-page .filter-bar .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .procurement-page .filter-bar .col-md-1 {
        margin-top: 8px;
    }
}

/* Tablet: 2x2 finansal kartlar */
@media (min-width: 768px) and (max-width: 991.98px) {
    .procurement-page .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* ==================================================================
   2. PROCUREMENT REQUEST CREATE — Cascade + Sepet + Formset
   ================================================================== */
@media (max-width: 767.98px) {
    /* Cascade alanları dikey */
    .procurement-page .selection-area .col-md-4,
    .procurement-page .selection-area .col-md-6,
    .procurement-page .selection-area .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Miktar + Birim + Şablon: 3'lü grid */
    .procurement-page .selection-area .row.align-items-end .col-md-2 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .procurement-page .selection-area .row.align-items-end .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sepet tablosu: kart modu */
    #basketTable thead {
        display: none;
    }

    #basketTable,
    #basketTable tbody,
    #basketTable tr:not(#emptyRow),
    #basketTable td {
        display: block;
        width: 100%;
    }

    #basketTable tbody tr:not(#emptyRow) {
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius-2026, 20px);
        background: #fff;
    }

    #basketTable tbody td {
        padding: 3px 0;
        border: none;
    }

    #basketTable tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
    }

    /* Dosya formset: dikey düzen */
    .file-row .col-md-5,
    .file-row .col-md-6,
    .file-row .col-md-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .file-row .col-md-1 {
        text-align: left !important;
        padding-top: 4px;
    }

    /* Form kartları padding azalt */
    .form-card-body {
        padding: 16px;
    }

    .selection-area {
        padding: 14px;
    }

    /* Form aksiyonları: dikey */
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Tip seçim kartları: daha kompakt */
    .type-select-card {
        padding: 14px;
        gap: 12px;
    }

    .type-select-card .type-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Lokasyon: il/ilçe/mahalle dikey */
    .procurement-page .form-card-body .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   3. MAP DASHBOARD — Sidebar Drawer + Filter Accordion
   ================================================================== */
@media (max-width: 767.98px) {
    /* Sidebar: bottom drawer */
    .map-sidebar {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        width: 100% !important;
        max-height: 65vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        z-index: 1040;
        transform: translateY(calc(100% - 52px));
        transition: transform 0.3s ease;
        overflow: hidden;
    }

    .map-sidebar.map-sidebar--open {
        transform: translateY(0);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Drawer handle */
    .map-sidebar::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        margin: 10px auto 8px;
        flex-shrink: 0;
    }

    /* Sidebar toggle: repositioned */
    .sidebar-toggle {
        position: fixed !important;
        bottom: 60px;
        right: 12px;
        z-index: 1041;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Map tam ekran */
    #map {
        height: calc(100vh - 120px) !important;
        height: calc(100dvh - 120px) !important;
    }

    /* Harita kontrolleri: sağ alt */
    .custom-map-controls {
        top: auto !important;
        bottom: 70px !important;
        right: 10px !important;
    }

    /* Sidebar tab bar: compact */
    .map-sidebar-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px !important;
        padding: 4px !important;
    }

    .map-sidebar-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 8px 12px !important;
    }

    /* Filter sections: accordion-like compact */
    .map-sidebar-section {
        margin-bottom: 12px !important;
    }

    .map-sidebar-label {
        font-size: 0.75rem;
    }

    /* Ada/Parsel alanı: yan yana kalsın */
    #parcelSearchSection .parcel-search-fields,
    #parcelSearchSection .parcel-search-actions {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 8px;
    }

    #parcelSearchSection .parcel-search-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Tablet: sidebar dar */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    .map-sidebar {
        width: 280px !important;
        min-width: 280px;
    }

    .map-sidebar-tabs .nav-link {
        font-size: 0.78rem;
        padding: 8px 10px !important;
    }

    .map-sidebar-tabs .nav-link .me-1 {
        margin-right: 2px !important;
    }
}


/* ==================================================================
   4. UNICC MESSAGING — Single Panel Mobile Mode
   ================================================================== */
@media (max-width: 767.98px) {
    /* Yalnız aktif panel görünsün */
    .unicc-container {
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
    }

    .unicc-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Panel slider gizle */
    .unicc-panel-slider {
        display: none !important;
    }

    /* Global arama: tam genişlik */
    .unicc-global-search {
        padding: 8px 12px;
    }

    .unicc-gs-kbd {
        display: none !important;
    }

    .unicc-gs-chips {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .unicc-gs-chip {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ==================================================================
   5. PROPERTY FORM — Wizard Stepper Mobile
   ================================================================== */
@media (max-width: 767.98px) {
    /* Stepper: yatay kaydırma yerine kompakt */
    .pw-stepper__steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 4px;
    }

    .pw-step {
        min-width: auto;
        padding: 8px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Progress text mobilde göster */
    .pw-progress-text {
        display: block !important;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 600;
        color: #475569;
        padding: 6px 0;
    }

    /* Panel düzeni: dikey */
    .pw-panel .col-lg-8,
    .pw-panel .col-lg-4,
    .pw-panel .col-md-6,
    .pw-panel .col-md-4,
    .pw-panel .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Form alanları tam genişlik */
    .pw-step .row .col-md-6,
    .pw-step .row .col-md-4,
    .pw-step .row .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sidebar → accordion */
    .pw-sidebar {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
}


/* ==================================================================
   6. CONSULTANT DETAIL + PUBLIC PROFILE — Bento Layout
   ================================================================== */
@media (max-width: 767.98px) {
    /* Bento grid → single column */
    .pp-bento--main {
        display: flex !important;
        flex-direction: column;
    }

    .pp-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        order: 2;
        margin-top: 16px;
    }

    /* Stats bar: kaydırılabilir yatay */
    .pp-stats-bar__inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 12px;
        padding-bottom: 6px;
    }

    .pp-stats-bar__inner > * {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Hero actions: tam genişlik */
    .pp-hero__actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pp-hero__actions .btn,
    .pp-hero__actions a {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    /* Featured grid: tek sütun */
    .pp-featured__inner {
        flex-direction: column;
    }

    /* İletişim satırları: wrap */
    .pp-contact-row--wrap {
        flex-wrap: wrap;
    }

    /* Business row: kompakt */
    .pp-business-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Review özet: dikey */
    .pp-review-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ==================================================================
   7. NEURO360 COCKPIT — Modal + Cards
   ================================================================== */
@media (max-width: 767.98px) {
    /* Stat kartları: 1 sütun */
    .n360-stat-grid .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Detail row: dikey */
    .n360-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .n360-detail-row .n360-detail-label {
        min-width: auto;
    }

    /* Quote stats: dikey */
    .n360-quote-stats .col-md-5,
    .n360-quote-stats .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Ana layout: sidebar alta */
    .n360-cockpit .col-lg-8,
    .n360-cockpit .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tablet: stat kartları 2 sütun */
@media (min-width: 768px) and (max-width: 991.98px) {
    .n360-stat-grid .col-lg-2 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}


/* ==================================================================
   8. CAMPAIGN ANALYTICS — KPI Cards + Chart Layout
   ================================================================== */
@media (max-width: 767.98px) {
    /* KPI kartları: 2x2 */
    .campaign-analytics .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* KPI kart içerikleri: kompakt */
    .campaign-analytics .col-md-3 .card-body {
        padding: 12px;
    }

    /* Chart bölümü: tam genişlik */
    .campaign-analytics .col-lg-8,
    .campaign-analytics .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Vertical divider (.vr) gizle */
    .campaign-analytics .vr {
        display: none;
    }

    /* Sosyal engagement: tam genişlik */
    .campaign-analytics .col-md-6,
    .campaign-analytics .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Liste öğeleri: wrap */
    .campaign-analytics .list-group-item .d-flex {
        flex-wrap: wrap;
        gap: 6px;
    }
}


/* ==================================================================
   9. PAYMENT CHECKOUT — Summary + Form Reorder
   ================================================================== */
@media (max-width: 767.98px) {
    /* Özet kartını üste taşı (order) */
    .checkout-layout .col-md-5 {
        order: -1;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }

    .checkout-layout .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tab pills: scrollable */
    .checkout-layout .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .checkout-layout .nav-pills .nav-item {
        flex-shrink: 0;
    }

    /* IBAN: küçük font */
    .checkout-layout .font-monospace {
        font-size: 0.78rem;
        word-break: break-all;
    }

    /* Kredi kartı alanları: expiry/CVC yan yana kalsın */
    .checkout-layout .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* ==================================================================
   10. GAMIFICATION WALLET — Stepper + Paketler
   ================================================================== */
@media (max-width: 767.98px) {
    /* Stepper: yataydan dikeye */
    .gm-stepper {
        flex-direction: column;
        align-items: flex-start;
    }

    .gm-stepper__step {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .gm-stepper__line {
        width: 2px;
        height: 24px;
        margin: 0 0 0 15px;
    }

    .gm-stepper__circle {
        flex-shrink: 0;
    }

    /* Stat row: 3'lü yerine wrap */
    .gm-stat-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .gm-stat-row > * {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    /* Paket grid: tek sütun */
    .gm-pkg-grid {
        grid-template-columns: 1fr !important;
    }

    /* Paket fiyat satırı: dikey */
    .gm-pkg-card .d-flex.justify-content-center.gap-3 {
        flex-direction: column;
        gap: 8px !important;
        align-items: center;
    }

    /* Transaction kartları: tek sütun */
    .gm-wallet .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   11. CONNECTIONS TAB FOLLOWING — Button Overflow
   ================================================================== */
@media (max-width: 767.98px) {
    /* Liste öğesi: dikey düzen */
    .connections-following .list-group-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        padding: 12px !important;
    }

    /* Sol taraf: avatar + bilgi */
    .connections-following .list-group-item > .d-flex:first-child {
        width: 100%;
    }

    /* Sağ taraf: butonlar tam genişlik */
    .connections-following .list-group-item > .d-flex.gap-2:last-child {
        width: 100%;
        justify-content: flex-start;
    }

    .connections-following .list-group-item > .d-flex.gap-2:last-child .btn {
        flex: 1;
        text-align: center;
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    /* Avatar küçült */
    .connections-following .connection-avatar--lg {
        width: 40px;
        height: 40px;
    }

    /* İsim truncate */
    .connections-following .fw-semibold {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
}

/* Tablet: butonlar sığsın */
@media (min-width: 768px) and (max-width: 991.98px) {
    .connections-following .list-group-item > .d-flex.gap-2 .btn {
        font-size: 0.78rem;
        padding: 6px 10px;
    }
}


/* ==================================================================
   12. DEALER DASHBOARD — SVG Header + Quick Actions + Stats
   ================================================================== */
@media (max-width: 767.98px) {
    /* SVG illüstrasyon gizle (mobilde gereksiz) */
    .dealer-header-card .header-illustration {
        display: none;
    }

    /* Quick action grid: 2 sütun (zaten var ama boşluk azalt) */
    .dealer-dashboard .row-cols-2 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    /* Stats: alt alta */
    .dealer-dashboard .col-md-5,
    .dealer-dashboard .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sidebar alta */
    .dealer-dashboard .col-lg-8,
    .dealer-dashboard .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tablo: kompakt */
    .dealer-dashboard .table th,
    .dealer-dashboard .table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* Tablet: quick actions 3 sütun */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dealer-dashboard .row-cols-md-5 {
        --bs-columns: 3;
    }

    .dealer-dashboard .row-cols-md-5 > * {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3);
    }
}


/* ==================================================================
   13. TALENT RECEIVED APPLICATIONS — Header + Metrics
   ================================================================== */
@media (max-width: 767.98px) {
    /* Header: dikey düzen */
    .applications-header .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }

    /* Başvuru kartı stats: 2x2 grid */
    .applicant-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Match score: kompakt */
    .applicant-card .match-score {
        position: static;
        margin-top: 8px;
    }

    /* Kart header: avatar + info dikey */
    .applicant-card .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap;
    }

    /* Aksiyon butonları: tam genişlik */
    .applicant-actions {
        flex-direction: column;
        gap: 8px;
    }

    .applicant-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==================================================================
   14. SUPPLIER REFERENCES — Table to Cards
   ================================================================== */
@media (max-width: 767.98px) {
    /* Referans tablosu → kart */
    .supplier-references .table thead {
        display: none;
    }

    .supplier-references .table,
    .supplier-references .table tbody,
    .supplier-references .table tr,
    .supplier-references .table td {
        display: block;
        width: 100%;
    }

    .supplier-references .table tbody tr {
        padding: 14px;
        margin-bottom: 10px;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius-2026, 20px);
        background: #fff;
    }

    .supplier-references .table tbody td {
        padding: 4px 0;
        border: none;
    }

    .supplier-references .table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    /* Referans formu: alanlar dikey */
    .supplier-references .col-md-8,
    .supplier-references .col-md-4,
    .supplier-references .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Lokasyon: il/ilçe/rol her biri tam genişlik */
    .supplier-references .row .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   TABLET ORTAKLARI (768px - 1024px) — Tüm Sayfalar
   ================================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    /* Procurement dashboard: tablolar sığsın */
    .procurement-page .procurement-table tbody td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .procurement-page .procurement-table thead th {
        padding: 10px 12px;
        font-size: 0.68rem;
    }

    /* Property wizard: stepper kompakt */
    .pw-step {
        font-size: 0.8rem;
        padding: 8px 14px;
    }

    /* Bento layout: sidebar daha dar */
    .pp-sidebar {
        max-width: 280px;
    }

    /* Campaign analytics: KPI 2x2 */
    .campaign-analytics .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Checkout: yan yana ama oranları ayarla */
    .checkout-layout .col-md-5 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .checkout-layout .col-md-7 {
        flex: 0 0 60%;
        max-width: 60%;
    }
}


/* ==================================================================
   GENEL MOBİL YARDIMCILAR — Tüm sayfalarda kullanılabilir
   ================================================================== */
@media (max-width: 767.98px) {
    /* Tablo wrapper'da yatay scroll ipucu */
    .table-responsive {
        position: relative;
    }

    .table-responsive::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .table-responsive.has-overflow::after {
        opacity: 1;
    }

    /* Vertical divider (.vr) mobilde gizle */
    .vr {
        display: none;
    }
}

/* =====================================================================
   15. MODAL İÇİ MOBİL DÜZENLEMELER
   ===================================================================== */

@media (max-width: 575.98px) {

    /* ── Post Create: Kategori kartları 2→1 kolon ── */
    #createPostModal .row-cols-2 > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Post Create: Footer aksiyonları dikey stack ── */
    #createPostModal .d-flex.justify-content-between.align-items-center.pt-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    #createPostModal .d-flex.justify-content-between.align-items-center.pt-3 > .d-flex {
        justify-content: center;
    }

    #createPostModal .d-flex.justify-content-between.align-items-center.pt-3 > button[type="submit"] {
        width: 100%;
        justify-content: center;
    }

    /* ── Poll Wizard: Seçenek sayısı butonları grid 4x3 ── */
    #optionCountSelector {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    #optionCountSelector .option-count-btn {
        width: 100% !important;
    }

    /* ── Contractor Score: SVG ring + skor dikey stack ── */
    .cdms-hero-chart {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .cdms-ring-svg {
        width: 120px !important;
        height: 120px !important;
    }

    .cdms-big-score {
        font-size: 1.6rem !important;
    }

    /* ── Contractor Score: 4 kategori kartı 2→1 kolon ── */
    .cdms-cat-card {
        padding: 0.75rem !important;
    }

    /* ── Contractor Reviews: Özet puan ── */
    .d-flex.align-items-center.mb-4.pb-3.border-bottom > h1.display-5 {
        font-size: 2.5rem !important;
    }

    /* ── Document Request: Hizmet detayları 3→1 kolon ── */
    #serviceDetails .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    #serviceDetails .col-4:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* ── Document Request: Teslimat yöntemi butonları dikey ── */
    #documentRequestModal .btn-group.w-100 {
        flex-direction: column;
    }

    #documentRequestModal .btn-group.w-100 > .btn-check + .btn {
        border-radius: 0.5rem !important;
        margin-bottom: 0.35rem;
        border-left-width: 1px !important;
    }

    /* ── Share Modal: 2x2→1 kolon çok küçük ekranlarda ── */
    #shareProfileModal .col-6.col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── UNICC Compose: Purpose tags wrap ── */
    .email-purpose-tags {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .email-purpose-tag .tag {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .email-purpose-tag .tag i {
        font-size: 0.78rem;
    }

    /* ── UNICC Compose: Schedule picker dikey ── */
    .unicc-schedule-picker-panel .d-flex {
        flex-direction: column !important;
    }

    .unicc-schedule-picker-col-date,
    .unicc-schedule-picker-col-time {
        min-width: auto !important;
        width: 100%;
    }

    /* ── Gamification Onboarding: Baret ikonları 2x2 grid ── */
    .gm-onboarding__mini-icon {
        font-size: 1.5rem;
    }

    /* ── Follow Settings: Label overflow ── */
    .entity-settings-block .bg-light {
        padding: 0.75rem !important;
    }

    .entity-settings-block .form-check-label {
        font-size: 0.85rem;
        line-height: 1.35;
        word-break: break-word;
    }
}

/* ── Çok küçük ekranlar (<400px) ── */
@media (max-width: 399.98px) {

    /* Share modal: 2→1 kolon */
    #shareProfileModal .col-6.col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Post Create: Kategori kartlarında ikon küçült */
    #createPostModal .dp-card .bi.fs-1 {
        font-size: 1.5rem !important;
    }

    /* Contractor Score: 4 kategori 2→1 — :has() fallback */
    .row.g-3.mb-4 > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   17. MESSAGING MODALS — Mobil uyumlu modal sidebar ve paneller
   ================================================================== */
@media (max-width: 575.98px) {
    /* Group manager modal: sidebar stacks on mobile */
    .msg-modal-sidebar-320 {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 35vh;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal within messaging: full-width */
    .msg-modal-h-85vh {
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }

    /* Contact picker: compactify */
    #contactPickerModal .modal-body {
        padding: 8px 12px !important;
    }

    #contactPickerModal .list-group-item {
        padding: 10px 12px !important;
    }

    /* Forward selection: compact list */
    #forwardSelectionModal .list-group-item .d-flex {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Chat request modal: full width buttons */
    #chatRequestModal .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Meeting planner modal */
    #toplantiPlanlaModal .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #toplantiPlanlaModal .modal-body .d-flex.gap-3 {
        flex-direction: column;
    }
}

/* ==================================================================
   18. EDUCATION / ACADEMY — Mobil iyileştirmeler
   ================================================================== */
@media (max-width: 575.98px) {
    /* Academic dashboard: cards stack */
    .academic-stat-card {
        padding: 12px !important;
    }

    .academic-stat-card .display-6,
    .academic-stat-card .display-5 {
        font-size: 1.5rem !important;
    }

    /* Lesson detail: fixed inline styles override */
    [class*="lesson-"] [style*="max-width:800px"],
    [class*="lesson-"] [style*="max-width: 800px"] {
        max-width: 100% !important;
        padding: 0 12px !important;
    }

    /* Quiz attempt: container width fix */
    [class*="quiz-"] [style*="max-width:800px"],
    [class*="quiz-"] [style*="max-width: 800px"] {
        max-width: 100% !important;
    }

    /* Course card: compact */
    .course-card {
        padding: 12px !important;
    }

    .course-card .card-title {
        font-size: 0.95rem !important;
    }
}

/* ==================================================================
   19. BACKOFFICE — Mobil panel ve dashboard düzenleri
   ================================================================== */
@media (max-width: 767.98px) {
    /* Backoffice sidebar: hidden on mobile */
    .bo-sidebar {
        display: none !important;
    }

    /* Neuro360 cockpit: stat grid stack */
    .n360-cockpit .col-xl-2,
    .n360-cockpit .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Backoffice table overflow */
    .bo-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dashboard header actions */
    .bo-header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bo-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    /* KPI grid: 2 columns */
    .sentinel-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 399.98px) {
    /* Very small screens: single column KPI */
    .sentinel-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .n360-cockpit .col-xl-2,
    .n360-cockpit .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==================================================================
   20. HELP CENTER — Mobil iyileştirmeler
   ================================================================== */
@media (max-width: 575.98px) {
    /* Innovation idea modal */
    #ideaModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Help center search */
    .help-search-input {
        font-size: 16px !important;
        min-height: 48px !important;
    }

    /* FAQ accordion: compact */
    .help-faq .accordion-button {
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
    }

    .help-faq .accordion-body {
        padding: 12px 14px !important;
        font-size: 0.875rem !important;
    }
}

/* ==================================================================
   21. GENEL MOBİL FORM İYİLEŞTİRMELERİ — 2026 UX Standartları
   ================================================================== */
@media (max-width: 575.98px) {
    /* Full-width CTA buttons */
    .cta-btn-primary,
    .action-submit-btn,
    .form-submit-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Inline form actions: stack vertically */
    .form-actions,
    .action-bar,
    .btn-toolbar {
        flex-direction: column !important;
        gap: 8px;
    }

    .form-actions .btn,
    .action-bar .btn,
    .btn-toolbar .btn {
        width: 100%;
        justify-content: center;
    }

    /* Input group addons: prevent crush */
    .input-group > .input-group-text {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* Datepicker inputs: prevent zoom */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* File input: friendly */
    input[type="file"] {
        font-size: 14px !important;
    }

    /* Range input */
    input[type="range"] {
        height: 32px !important;
    }

    /* Select with long text */
    select.form-select {
        text-overflow: ellipsis;
    }
}

/* ==================================================================
   22. OFFCANVAS MOBİL — Bottom sheet stili
   ================================================================== */
@media (max-width: 575.98px) {
    .offcanvas.offcanvas-start,
    .offcanvas.offcanvas-end {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .offcanvas.offcanvas-bottom {
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
    }

    .offcanvas-header {
        padding: 16px !important;
    }

    .offcanvas-body {
        padding: 12px 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Bottom offcanvas drag handle */
    .offcanvas.offcanvas-bottom::before {
        content: '';
        width: 36px;
        height: 5px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-2026, 20px);
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section 16: FEED MOBİL — Minimal, çakışmasız iyileştirmeler
   Kural: Mevcut feed_card.css ve feed_home.css'i BOZMAMAK.
   Sadece eklemeler yapılır — override yerine tamamlayıcı kurallar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 16a. Yorum gönder butonu touch target (base: 32px → 40px) ── */
@media (max-width: 575.98px) {
    .feed-comment-submit-btn {
        width: 40px;
        height: 40px;
    }

    /* Yorum input iOS zoom engeli */
    .comment-composer input[type="text"],
    .comment-composer textarea {
        font-size: 16px;
    }
}

/* ── 16b–16i keyframes (global — must stay outside @media) ── */
@keyframes feedSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pullSpin { to { transform: rotate(360deg); } }

@keyframes likeBurst {
    0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.3);  opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    50%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1);    opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .feed-skeleton-line { animation: none; }
    .feed-like-burst.animate { animation: none; }
}



/* ── 16b–16i. Mobile-only feed UI components ── */
@media (max-width: 767.98px) {

    /* ── 16b. Skeleton loading kartları ── */
    .feed-skeleton-card {
        background: #fff;
        border-radius: var(--radius-2026, 20px);
        padding: 16px;
        border: 1px solid rgba(203, 213, 225, 0.3);
    }

    .feed-skeleton-line {
        height: 12px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
        background-size: 200% 100%;
        animation: feedSkeletonShimmer 1.5s ease-in-out infinite;
    }

    .feed-skeleton-line--short  { width: 40%; }
    .feed-skeleton-line--medium { width: 70%; }
    .feed-skeleton-line--long   { width: 100%; }
    .feed-skeleton-line--avatar {
        width: 40px; height: 40px;
        border-radius: 50%; flex-shrink: 0;
    }
    .feed-skeleton-line--media {
        width: 100%; height: 200px;
        border-radius: 8px; margin: 12px 0;
    }

    html[data-theme='dark'] .feed-skeleton-card {
        background: #1e293b;
        border-color: rgba(71, 85, 105, 0.3);
    }

    html[data-theme='dark'] .feed-skeleton-line {
        background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
        background-size: 200% 100%;
    }

    /* ── 16c. Pull-to-refresh CSS hook ── */
    .feed-pull-indicator {
        position: fixed;
        top: 0; left: 50%;
        transform: translateX(-50%) translateY(-100%);
        z-index: 1050;
        transition: transform 0.25s ease, opacity 0.25s ease;
        opacity: 0; pointer-events: none;
    }

    .feed-pull-indicator.active {
        transform: translateX(-50%) translateY(16px);
        opacity: 1;
    }

    .feed-pull-indicator__spinner {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: #fff;
        box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
        display: flex; align-items: center; justify-content: center;
        color: #6366f1; font-size: 1.1rem;
    }

    .feed-pull-indicator.active .feed-pull-indicator__spinner {
        animation: pullSpin 0.8s linear infinite;
    }

    /* ── 16d. Scroll-to-top butonu ── */
    .feed-scroll-top {
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 44px; height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(203, 213, 225, 0.4);
        box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
        color: #475569; font-size: 1.1rem;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; z-index: 1040;
        opacity: 0; transform: translateY(20px) scale(0.8);
        transition: opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
    }

    .feed-scroll-top.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    html[data-theme='dark'] .feed-scroll-top {
        background: rgba(30, 41, 59, 0.95);
        border-color: rgba(71, 85, 105, 0.4);
        color: #94a3b8;
    }

    /* ── 16e. Double-tap like animasyonu ── */
    .feed-like-burst {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0);
        font-size: 80px;
        pointer-events: none; z-index: 100;
        opacity: 0;
        filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.4));
    }

    .feed-like-burst.animate {
        animation: likeBurst 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ── 16g. Sponsored/Promoted kart vurgusu ── */
    .feed-card[data-is-sponsored="true"],
    .feed-card[data-is-ad="true"] {
        border-left: 3px solid rgba(245, 158, 11, 0.5);
    }

    /* ── 16h. Network proximity badge ── */
    .feed-proximity-badge {
        display: inline-flex; align-items: center;
        font-size: 0.6875rem; font-weight: 700;
        color: #64748b;
        background: rgba(241, 245, 249, 0.8);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 4px; padding: 1px 5px;
        margin-left: 6px; vertical-align: middle;
    }

    .feed-proximity-badge--1st { color: #059669; border-color: rgba(5, 150, 105, 0.2); background: rgba(236, 253, 245, 0.8); }
    .feed-proximity-badge--2nd { color: #6366f1; border-color: rgba(99, 102, 241, 0.2); background: rgba(238, 242, 255, 0.8); }
    .feed-proximity-badge--3rd { color: #94a3b8; }

    /* ── 16i. Suggested card stili ── */
    .feed-suggested-card {
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
        border: 1px dashed rgba(148, 163, 184, 0.3);
        border-radius: var(--radius-2026, 20px); padding: 16px;
    }

    .feed-suggested-card__title {
        font-size: 0.75rem; font-weight: 700;
        color: #64748b; text-transform: uppercase;
        letter-spacing: 0.05em; margin-bottom: 12px;
    }

    html[data-theme='dark'] .feed-suggested-card {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
        border-color: rgba(71, 85, 105, 0.3);
    }

} /* end @media (max-width: 767.98px) — 16b–16i */


/* ==================================================================
   23. CU-PAGE (Contractor/Supplier/Expert/Corporate Form) — Mobil
   Tüm -update/-form sayfaları cu-page wrapper kullanır.
   ================================================================== */
@media (max-width: 767.98px) {
    /* Form alanları 2'li grid → 1'li */
    .cu-page .col-md-6,
    .cu-page .col-md-4,
    .cu-page .col-md-3,
    .cu-page .col-lg-6,
    .cu-page .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Stat kartları: dikey */
    .cu-stats {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .cu-stat-card {
        padding: 1rem 1.25rem;
    }

    .cu-stat-value {
        font-size: 1.4rem;
    }

    .cu-stat-bg-icon {
        font-size: 3.5rem;
    }

    /* Adres bloğu → tam genişlik */
    .cu-address-block .col-md-4,
    .cu-address-block .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Harita ayar öğesi → dikey düzen */
    .cu-map-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cu-map-item .btn {
        width: 100%;
        justify-content: center;
    }

    /* HTMX yönetim kartları: padding kompakt */
    .cu-mgmt-body {
        padding: 1rem;
    }

    .cu-mgmt-header {
        padding: 0.85rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cu-mgmt-title {
        font-size: 0.9rem;
    }

    /* Kaydet barı: dikey düzen */
    .cu-save-bar {
        padding: 0.75rem 0;
    }

    .cu-save-bar-inner {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .cu-save-bar-inner .cu-btn-save,
    .cu-save-bar-inner .cu-btn-cancel {
        width: 100%;
        justify-content: center;
    }

    /* Kart body padding kompakt */
    .cu-page .cu-card-body {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .cu-header-icon {
        width: 44px;
        height: 44px;
    }

    .cu-header-icon i {
        font-size: 1.2rem;
    }

    .cu-header-title {
        font-size: 1.15rem;
    }

    .cu-header-subtitle {
        font-size: 0.78rem;
    }

    /* Score ring küçült */
    .cu-score-ring {
        width: 52px;
        height: 52px;
    }

    .cu-score-ring-value {
        font-size: 0.95rem;
    }
}


/* ==================================================================
   24. PM-PAGE (Profil Yönetimi) — Ek Mobil İyileştirmeler
   ================================================================== */
@media (max-width: 767.98px) {
    /* Form alanları 2'li grid → 1'li */
    .pm-page .col-md-6,
    .pm-page .col-md-4,
    .pm-page .col-md-3,
    .pm-page .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sidebar: statik, üstte */
    .pm-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Upload grid: tek sütun */
    .pm-upload-grid {
        grid-template-columns: 1fr !important;
    }

    /* Inline form grupları: dikey — :has() fallback */
    .pm-page .d-flex.gap-3,
    .pm-page .d-flex.gap-2 {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    /* Avatar upload küçült */
    .pm-upload--avatar {
        width: 100px !important;
        height: 100px !important;
    }

    /* Sidebar menü kompakt */
    .pm-sidebar__item {
        padding: 10px 14px !important;
        font-size: 0.85rem;
    }
}


/* ==================================================================
   25. TABLO RESPONSIVE GÜVENLİK AĞI — Tüm Sayfalar
   table-responsive wrapper'ı olmayan tablolara otomatik yatay
   scroll kazandırır. Template'lere dokunmadan CSS ile çözüm.
   ================================================================== */
@media (max-width: 767.98px) {
    /* Tüm tabloların ebeveynine overflow koruması — :has() fallback dahil */
    .card-body,
    .tab-pane,
    .modal-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* procurement table'lar için ekstra koruma */
    .procurement-table,
    .compare-matrix {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }

    /* Sadece wrapper içinde kalan tabloların min-width'ini sıfırla */
    .card-body > table,
    .card-body > .table,
    .tab-pane > table,
    .tab-pane > .table,
    .modal-body > table,
    .modal-body > .table,
    .table-responsive > table,
    .table-responsive > .table {
        min-width: 0;
    }
}


/* ==================================================================
   26. SABİT GENİŞLİKLİ BİLEŞENLER — Mobil Override
   Masaüstünd sabit px genişliği olan bileşenler,
   mobilde ekranı taşırmaz.
   ================================================================== */
@media (max-width: 767.98px) {
    /* Chat sidebar / components */
    .omni-widget,
    .lila-stage,
    .chat-sidebar-panel,
    .msg-panel-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Omni widget: tam genişlik */
    .omni-widget-container {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Supplier dealer dashboard: SVG sidebar genişlik */
    .dealer-hub-sidebar,
    .supplier-sidebar-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tenders / supplier card: min-width sıfırla */
    .tender-card,
    .supplier-card {
        min-width: 0 !important;
    }

    /* Business thread list sidebar */
    .thread-list-sidebar {
        width: 100% !important;
    }

    /* Home page dekoratif elementler */
    .home-hero::before,
    .home-hero::after {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    /* Meetings shortcut tablosu */
    .mr-shortcuts-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Properties form: nested col stacking */
    .properties-form .col-md-4,
    .properties-form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tablet: sabit genişlikli bileşenler */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    .omni-widget {
        width: min(420px, calc(100% - 48px)) !important;
    }

    .lila-stage {
        width: min(360px, calc(100% - 48px)) !important;
    }

    .thread-list-sidebar {
        width: min(420px, calc(100% - 48px)) !important;
    }
}


/* ==================================================================
   27. HOME PAGE — Hero & Grid Mobil İyileştirmeleri
   ================================================================== */
@media (max-width: 767.98px) {
    /* Hero büyük metin: fluid font */
    .home-hero__title {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }

    .home-hero__subtitle {
        font-size: clamp(0.85rem, 3vw, 1.1rem) !important;
    }

    /* CTA butonları: dikey */
    .home-hero__cta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .home-hero__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* İstatistik gridleri: 2x2 */
    .home-stats-grid .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Rol kartları: 2x2 kalsın ama kompakt */
    .home-role-card {
        padding: 12px !important;
    }

    .home-role-card__icon {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 399.98px) {
    /* Çok küçük ekranlar: stats tek sütun */
    .home-stats-grid .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   28. CROSS-BROWSER GÜVENLİK AĞI — global overflow koruması
   Her cihaz/tarayıcıda yatay scroll'u önler.
   ================================================================== */

/* Safari iOS/iPadOS: Rubber-band yatay scroll koruma */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 1024px) and (any-pointer: coarse) {
        main {
            overflow-x: hidden;
            max-width: 100%;
        }

        /* Long URL/email overflow koruması */
        .card-body,
        .list-group-item,
        .accordion-body {
            overflow-wrap: break-word;
            word-break: break-word;
        }
    }
}

/* Samsung Internet: düşük performanslı cihazlar için blur azalt */
@media (max-width: 575.98px) and (any-pointer: coarse) {
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .modal-content,
        .offcanvas,
        .pp-nav,
        .pp-stats-bar__inner {
            background: rgba(255, 255, 255, 0.97) !important;
        }

        html[data-theme='dark'] .modal-content,
        html[data-theme='dark'] .offcanvas,
        html[data-theme='dark'] .pp-nav,
        html[data-theme='dark'] .pp-stats-bar__inner {
            background: rgba(30, 41, 59, 0.97) !important;
        }
    }
}

/* Firefox Android: smooth scroll performansı */
@-moz-document url-prefix() {
    @media (max-width: 767.98px) {
        .feed-stream,
        .message-list,
        .conversation-list,
        .infinite-scroll-container {
            scroll-behavior: auto;
        }
    }
}


/* ==================================================================
   29. SİTEVİSİON — Video Grid + Upload Mobil
   minmax(400px) mobilde ekranı taşırır → minmax(100%) düşür.
   ================================================================== */
@media (max-width: 767.98px) {
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Upload sayfası: preview küçült */
    .sv-upload-preview {
        max-width: 100%;
    }

    /* Dashboard filter bar: dikey */
    .sv-filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sv-filter-bar .btn,
    .sv-filter-bar select {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 1rem;
    }
}


/* ==================================================================
   30. FEED LEADERBOARD — Hero + Podium + Sıralama
   ================================================================== */
@media (max-width: 767.98px) {
    /* Hero: dekoratif element gizle */
    .leaderboard-hero::before {
        display: none !important;
    }

    .leaderboard-hero {
        padding: 1.5rem !important;
        border-radius: var(--radius-2026, 20px);
    }

    .leaderboard-hero-title {
        font-size: 1.4rem !important;
    }

    .leaderboard-hero .trophy-icon {
        font-size: 2.5rem !important;
    }

    /* Podium grid: tek sütun */
    .leaderboard-podium {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Sidebar sıralama: tam genişlik */
    .leaderboard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Avatar küçült */
    .leader-avatar {
        width: 56px !important;
        height: 56px !important;
    }

    /* Leader name truncate */
    .leader-name {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ==================================================================
   31. ONBOARDING WELCOME — Lottie/SVG + Checklist Mobil
   Sabit 280px/300px genişlikler telefonlarda taşar.
   ================================================================== */
@media (max-width: 575.98px) {
    /* Lottie/SVG animasyonları küçült */
    .onb-lottie-construction,
    .onb-lottie-supplier,
    .onb-lottie-expert,
    .onb-lottie-field-staff,
    [class*="onb-lottie"] {
        width: min(220px, 60vw) !important;
        height: auto !important;
        margin: 0 auto;
    }

    /* Checklist marker küçült */
    .onb-checklist__marker {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .onb-checklist__item {
        gap: 0.75rem;
        padding: 1rem;
    }

    /* Subrole kartları: tek sütun */
    .subrole-grid {
        grid-template-columns: 1fr !important;
    }

    /* Talent wizard: step kartları kompakt */
    .talent-wizard-step {
        padding: 1rem !important;
    }

    .talent-wizard-step__icon {
        width: 36px !important;
        height: 36px !important;
    }
}


/* ==================================================================
   32. TALENT SAYFALARI — Job List/Detail/Form/Applications
   ================================================================== */
@media (max-width: 767.98px) {
    /* Job list: filter bar dikey */
    .talent-filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .talent-filter-bar .form-select,
    .talent-filter-bar .form-control,
    .talent-filter-bar .btn {
        width: 100%;
    }

    /* Job detail: company sidebar → alt */
    .talent-job-detail .col-lg-4,
    .talent-job-detail .col-lg-8,
    .talent-job-detail .col-md-4,
    .talent-job-detail .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Job detail: requirement grid tablet'inki → mobil tek sütun */
    .job-requirements-grid {
        grid-template-columns: 1fr !important;
    }

    /* Apply button: tam genişlik */
    .talent-apply-btn {
        width: 100%;
        justify-content: center;
    }

    /* Application kart: aksiyon butonları wrap */
    .application-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .application-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    /* Job form: tüm kolonlar tek sütun */
    .talent-job-form .col-md-6,
    .talent-job-form .col-md-4,
    .talent-job-form .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Profile: skill tag wrap */
    .talent-skill-tags {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}


/* ==================================================================
   33. PROCUREMENT QUOTE-EDITOR — Drawer Overlay Mobil
   420px sabit genişlik telefonlarda taşar.
   ================================================================== */
@media (max-width: 767.98px) {
    .overlay-drawer {
        width: 100% !important;
        right: -100% !important;
        border-radius: 0;
    }

    .overlay-drawer.open {
        right: 0 !important;
    }

    /* Compare matrix: yatay scroll */
    .compare-matrix {
        min-width: 0 !important;
    }

    .compare-matrix th,
    .compare-matrix td {
        min-width: 120px;
        white-space: nowrap;
    }

    /* Quote form: kolonlar dikey */
    .quote-form .col-md-6,
    .quote-form .col-md-4,
    .quote-form .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    .overlay-drawer {
        width: min(420px, calc(100% - 48px)) !important;
    }
}


/* ==================================================================
   34. HELP CENTER — Contact/Innovation/Roadmap/Tickets
   ================================================================== */
@media (max-width: 767.98px) {
    /* Contact form: form alanları dikey */
    .hc-contact-form .col-md-6,
    .hc-contact-form .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Innovation: idea grid tek sütun */
    .innovation-grid {
        grid-template-columns: 1fr !important;
    }

    /* Roadmap: timeline compact */
    .roadmap-item {
        padding: 1rem !important;
    }

    /* My tickets: filtre dikey */
    .ticket-filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ticket-filter-bar .btn,
    .ticket-filter-bar .form-select {
        width: 100%;
    }

    /* Ticket detail: sidebar dikey */
    .ticket-detail .col-lg-4,
    .ticket-detail .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Help center search hero: padding sıkıştır */
    .hc-hero {
        padding: 1.5rem 1rem !important;
    }

    .hc-hero-title {
        font-size: 1.3rem !important;
    }

    /* FAQ grid: tek sütun */
    .hc-category-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================================
   35. SUPPLIER SAYFALAR — Marka Yönetimi/Referanslar/Ürünler
   ================================================================== */
@media (max-width: 767.98px) {
    /* Marka yönetimi: tab scroll */
    .nav-tabs-custom {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs-custom::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs-custom .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Brand card: grid tek sütun */
    .brand-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Upload area: kompakt */
    .upload-area {
        padding: 1rem !important;
    }

    /* Supplier product form: kolonlar dikey */
    .supplier-product-form .col-md-6,
    .supplier-product-form .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Supplier product list: grid tek sütun */
    .product-grid {
        grid-template-columns: 1fr !important;
    }

    /* Notification settings: toggle kompakt */
    .supplier-notif-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Dealer management: liste öğeleri dikey */
    .dealer-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .dealer-list-item .btn {
        width: 100%;
        justify-content: center;
    }

    /* Welcome: SVG küçült */
    .supplier-welcome-illustration {
        max-width: 200px !important;
        margin: 0 auto;
    }
}


/* ==================================================================
   36. KNOWLEDGE — Arama/Makale/Soru-Cevap/Uzman
   ================================================================== */
@media (max-width: 767.98px) {
    /* Makale detail: content sidebar dikey */
    .knowledge-article .col-lg-8,
    .knowledge-article .col-lg-4,
    .knowledge-article .col-md-8,
    .knowledge-article .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Uzman listesi: grid tek sütun */
    .expert-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Soru-cevap: vote butonları kompakt */
    .qa-vote-controls {
        flex-direction: row;
        gap: 0.5rem;
    }

    .qa-vote-controls .btn {
        min-width: 44px;
    }

    /* Rehber listesi: compact */
    .guide-card {
        padding: 1rem !important;
    }

    /* Law list: card compact */
    .law-card {
        padding: 1rem !important;
    }
}


/* ==================================================================
   37. FIELD STAFF — Dashboard/Profile/Certifications/Skills
   ================================================================== */
@media (max-width: 767.98px) {
    /* Dashboard: stat kartları dikey */
    .fs-dashboard .col-md-3,
    .fs-dashboard .col-md-4,
    .fs-dashboard .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Profile: büyük avatar küçült */
    .fs-profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    /* Certification grid: tek sütun */
    .cert-grid {
        grid-template-columns: 1fr !important;
    }

    /* Skill badge: wrap */
    .skill-badge-grid {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Training card: compact */
    .training-card {
        padding: 1rem !important;
    }
}


/* ==================================================================
   38. ABONELİK YÖNETİMİ — Subscription Cards
   ================================================================== */
@media (max-width: 767.98px) {
    /* Subscription kartları: tek sütun */
    .subscription-card {
        margin-bottom: 1rem;
    }

    /* Hero: padding kompakt */
    .subscription-hero {
        padding: 1.25rem !important;
    }

    .subscription-hero-title {
        font-size: 1.15rem !important;
    }

    /* Fiyat tablosu: yatay scroll */
    .pricing-comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* CTA: tam genişlik */
    .subscription-cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==================================================================
   39. ANKET (SURVEY) — Soru/Liste/Tamamlama
   ================================================================== */
@media (max-width: 575.98px) {
    /* Soru kartı: progress bar responsive */
    .survey-progress {
        padding: 0 0.5rem;
    }

    /* Soru seçenekleri: dikey */
    .survey-options {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Aksiyon butonları: tam genişlik */
    .survey-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .survey-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Survey list: card compact */
    .survey-card {
        padding: 1rem !important;
    }

    /* Tamamlama: confetti alanı küçült */
    .survey-complete-icon {
        font-size: 3rem !important;
    }
}


/* ==================================================================
   40. MEETINGS DASHBOARD — Toast/Runtime/Cards
   ================================================================== */
@media (max-width: 767.98px) {
    /* Toast: tam genişlik */
    .meetings-dashboard-toast {
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
    }

    /* Meetings cards: tek sütun */
    .meetings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Dashboard container: padding kompakt */
    .meetings-dashboard-container {
        padding: 1rem !important;
    }

    /* Participant avatarları: küçült */
    .meeting-participant-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* Action bar: dikey */
    .meeting-action-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .meeting-action-bar .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==================================================================
   41. CONTRACTOR DASHBOARD/LIST — Kart + Rating + Filter
   ================================================================== */
@media (max-width: 767.98px) {
    /* Dashboard: kolonlar dikey */
    .contractor-dashboard .col-md-6,
    .contractor-dashboard .col-md-4,
    .contractor-dashboard .col-lg-8,
    .contractor-dashboard .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Preference aksiyon butonları: tam genişlik */
    .pref-action-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pref-action-bar .btn {
        width: 100%;
        justify-content: center;
    }

    /* Kart resimleri: max-width sınırla */
    .contractor-detail-image {
        max-width: 250px !important;
    }
}


/* ==================================================================
   42. CONSULTANTS / CONSULTATIONS — Detay/Dashboard/Takvim
   ================================================================== */
@media (max-width: 767.98px) {
    /* Consultant dashboard: stat kartları dikey */
    .consultant-dashboard .col-md-3,
    .consultant-dashboard .col-md-4,
    .consultant-dashboard .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Availability: slot buton grid */
    .availability-slot-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem;
    }

    /* Financial report: sidebar dikey */
    .financial-report .col-lg-4,
    .financial-report .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Review form: star rating inline */
    .review-star-input {
        font-size: 1.5rem !important;
    }

    /* Consultation room: video/chat dikey */
    .consultation-room .col-md-8,
    .consultation-room .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Agreement confirm: compact */
    .agreement-confirm-card {
        padding: 1rem !important;
    }
}


/* ==================================================================
   43. MARKETING CENTER / BOOST — Kampanya + Native Ad Oluşturma
   ================================================================== */
@media (max-width: 767.98px) {
    /* Marketing center: nav tabs scroll */
    .marketing-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .marketing-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Boost content: step cards dikey */
    .boost-step-cards {
        flex-direction: column;
    }

    /* Native ad preview: tam genişlik */
    .native-ad-preview {
        max-width: 100% !important;
    }

    /* Content select: grid tek sütun */
    .boost-content-grid {
        grid-template-columns: 1fr !important;
    }

    /* Campaign form: kolonlar dikey */
    .marketing-form .col-md-6,
    .marketing-form .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   44. CORPORATE — Dashboard/Profile Detail/Merit
   ================================================================== */
@media (max-width: 767.98px) {
    /* Dashboard: stat kartları dikey */
    .corporate-dashboard .col-md-3,
    .corporate-dashboard .col-md-4,
    .corporate-dashboard .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Corporate profile: sidebar dikey */
    .corporate-profile .col-lg-4,
    .corporate-profile .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Merit detail: vote grid compact */
    .merit-vote-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================================
   45. GENEL FORM WİDGET / SABİT GENİŞLİK — Cross-Page Override
   Sayfalarda form-widget/drawer/panel'ler için sabit genişlik
   mobilde tam genişliğe dönüşür.
   ================================================================== */
@media (max-width: 767.98px) {
    /* Form widget sidebar (TomSelect/date-picker drawer) */
    .form-widget-sidebar,
    .calendar-widget-panel,
    .filter-sidebar,
    .ts-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Custom widget drawer width override */
    .custom-widget-drawer {
        width: 100% !important;
    }

    /* Genel: kolon gap büyükse küçült */
    .row.g-4 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .row.g-5 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 1rem;
    }

    /* Map ile ilgili bileşenler hariç — tam ekran kalmalılar */
    .px-0 .container-fluid,
    .map-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}


/* ==================================================================
   46. GROWTH ENGINE / GUIDED TOUR — Onboarding Akışı
   ================================================================== */
@media (max-width: 575.98px) {
    /* Tour tooltip: tam genişlik */
    .tour-tooltip {
        max-width: calc(100% - 24px) !important;
        font-size: 0.85rem;
    }

    /* Tour highlight: padding küçült */
    .tour-highlight {
        padding: 4px !important;
    }

    /* Step indicator: kompakt */
    .tour-steps {
        gap: 0.25rem;
    }

    .tour-step-dot {
        width: 8px !important;
        height: 8px !important;
    }
}


/* ==================================================================
   47. CONTEXT UX — Contextual Action Panels
   ================================================================== */
@media (max-width: 767.98px) {
    .context-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==================================================================
   48. WEATHER / NAVBAR WİDGET — Hava Durumu Küçük Bileşen
   ================================================================== */
@media (max-width: 575.98px) {
    .weather-widget-content {
        font-size: 0.78rem !important;
    }

    .weather-widget-temp {
        font-size: 1rem !important;
    }

    .weather-widget-icon {
        width: 24px !important;
        height: 24px !important;
    }
}


/* ==================================================================
   49. NOTIFICATIONS LIST — Ek Mobil İyileştirmeler
   ================================================================== */
@media (max-width: 575.98px) {
    /* Notification kartları: kompakt */
    .notification-item {
        padding: 12px !important;
    }

    .notification-body {
        font-size: 0.85rem !important;
    }

    /* Bulk aksiyon bar: dikey */
    .notification-bulk-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .notification-bulk-bar .btn {
        width: 100%;
    }

    /* Mark all read: tam genişlik */
    .notification-mark-all {
        width: 100%;
        justify-content: center;
    }
}


/* ==================================================================
   50. SOCIAL LOGIN / AUTH — Giriş/Kayıt Sayfaları
   ================================================================== */
@media (max-width: 575.98px) {
    /* Sosyal login butonları: tam genişlik */
    .social-login-btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Auth form container: tam genişlik */
    .auth-form-container {
        max-width: 100% !important;
        padding: 1rem !important;
    }

    /* Auth card: padding kompakt */
    .auth-card {
        padding: 1.25rem !important;
    }

    /* Password reset form */
    .password-reset-form {
        max-width: 100% !important;
    }
}


/* ==================================================================
   51. TENDERS — Tender List/Detail/Create/Offer
   ================================================================== */
@media (max-width: 767.98px) {
    /* Tender detail: sidebar dikey */
    .tender-detail .col-lg-4,
    .tender-detail .col-lg-8,
    .tender-detail .col-md-4,
    .tender-detail .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tender card: min-width sıfırla */
    .tender-card {
        min-width: 0 !important;
    }

    /* Offer form: kolonlar dikey */
    .offer-form .col-md-6,
    .offer-form .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* CLP floor units: tablo compact */
    .clp-unit-table th,
    .clp-unit-table td {
        padding: 8px !important;
        font-size: 0.8rem;
    }

    /* Tender action bar: dikey */
    .tender-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tender-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==================================================================
   52. PROPERTIES — Property List/Form/Contract Editor
   ================================================================== */
@media (max-width: 767.98px) {
    /* Property list: filter bar dikey */
    .property-filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .property-filter-bar .form-select,
    .property-filter-bar .btn {
        width: 100%;
    }

    /* Contract editor: sidebar dikey */
    .contract-editor .col-lg-4,
    .contract-editor .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Property form: nested col stacking */
    .property-form .col-md-4,
    .property-form .col-md-6,
    .property-form .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==================================================================
   53. IMAGE CROP WIDGET — Mobil tam genişlik
   ================================================================== */
@media (max-width: 575.98px) {
    .crop-container {
        max-width: 100% !important;
        max-height: 50vh !important;
    }

    .crop-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .crop-controls .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}


/* ==================================================================
   54. UNICC — Compose Modal / UCL / Scheduled List
   ================================================================== */
@media (max-width: 767.98px) {
    /* UCL: thread sidebar stacked */
    .unicc-ucl-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        max-height: 40vh;
    }

    /* Compose modal: sender/receiver dikey */
    .unicc-compose-field-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Scheduled list: card compact */
    .scheduled-msg-card {
        padding: 1rem !important;
    }

    /* Scheduled list: action butonları dikey */
    .scheduled-msg-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}


/* ==================================================================
   55. DASHBOARD PARTİALS — Widget Cards / My Clients / Talent
   ================================================================== */
@media (max-width: 767.98px) {
    /* My clients: client kartları dikey */
    .my-clients-list .col-md-6,
    .my-clients-list .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* My consultants: aynı pattern */
    .my-consultants-list .col-md-6,
    .my-consultants-list .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Talent widget: compact */
    .talent-widget-card {
        padding: 1rem !important;
    }

    /* Dashboard partial: stat değerleri küçült */
    .dashboard-stat-value {
        font-size: 1.3rem !important;
    }

    /* Video stream: tam genişlik */
    .video-stream-container {
        max-width: 100% !important;
    }
}


/* ==================================================================
   56. NEURO360 COCKPIT — Detay Mobil
   ================================================================== */
@media (max-width: 767.98px) {
    /* Cockpit KPI grid: 2 sütundan 1'e */
    .neuro-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cockpit sidebar: dikey */
    .neuro-cockpit .col-lg-3,
    .neuro-cockpit .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Alert card: compact */
    .neuro-alert-card {
        padding: 1rem !important;
    }
}

/*
 * ---------------------------------------------------------------------------------
 * GLOBAL MOBILE ENFORCER (Kalkan) - MODAL VE BUTON ÖLÇEKLENDİRİCİSİ [GÜVENLİK YAMASI]
 * Mobilde Açılmayan, ölçeksiz (Geniş / Dar) duran tüm bileşenleri otomatik hizalar.
 * Modal altındaki butonları %100 Genişlik (w-100) ve Touch-Target (48px) yapar.
 * Desktop Sürüm (> 768px) Bu kurallardan tamamen YALITILMIŞTIR!
 * ---------------------------------------------------------------------------------
 */
@media (max-width: 767.98px) {
    /* Uyumsuz / Taşmış modalları güvenli genişliğe sıkıştır ama bottom-sheet akışını bozma */
    .modal-dialog:not(.modal-fullscreen-sm-down) {
        max-width: calc(100% - 10px) !important;
        width: calc(100% - 10px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 5px !important;
        padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    .modal-dialog:not(.modal-fullscreen-sm-down) > .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        /* border-radius / box-shadow burada YOK — kasıtlı.
           ≤575px'te mobile_enhancements.css bottom-sheet stili uygulanır (24px 24px 0 0).
           576-767px'te Bootstrap varsayılan radius yeterlidir.
           Burada tanımlamak bottom-sheet'i specificity ile ezer. */
    }

    /* Ölçeksiz (Küçücük kalan veya taşan) Butonlara Özel Grid Sıralaması */
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer {
        flex-direction: column !important; /* Butonları yan yana değil, alt alta üzer! */
        display: flex !important;
        width: 100% !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn,
    .btn-block-mobile {
        width: 100% !important;
        margin: 0 !important; /* Gap already handles spacing */
        font-size: 1.05rem !important; /* Düğme yazısı okunaklı */
        min-height: 48px !important; /* Dokunma/Parmak Alanı */
        font-weight: 600 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 12px !important; /* Modern Yuvarlak Köşe */
    }

    /* Geri / Kapat gibi ikincil düğmeler daha silik ve temiz görünür */
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-secondary,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-light {
        order: 2 !important; /* Kapat/İptal butonunu her zaman alta (önceliği düşür) it */
        background-color: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
        color: #475569 !important;
    }

    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-primary,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-success,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-danger,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-warning,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-info,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-secondary,
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-footer .btn-brand-accent {
        order: 1 !important; /* Onay/Gönder/Sil butonunu ÜSTE yerleştir (Mobil UX standardı) */
    }
}

/*
 * ---------------------------------------------------------------------------------
 * FLUID TYPOGRAPHY & SCALER KALKANI [ÜRETİM ÖNCESİ GÜVENLİK YAMASI]
 * iOS Auto-Zoom Engelleme ve Fluid Başlık Ölçeklendirme
 * NOT: Buton font-size/white-space/text-align override'ları kaldırıldı.
 *    Bunlar input-group, navbar dropdown, .btn-sm ve sol-hizalı butonları
 *    kırıyordu. Sayfa-spesifik mobil kurallar (modal-footer, form-actions vb.)
 *    zaten doğru hizalama sağlıyor.
 * ---------------------------------------------------------------------------------
 */
@media (max-width: 767.98px) {
    /* 1. iOS / iPhone SAFARİ AUTO-ZOOM ÖNLEYİCİ */
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .mapboxgl-ctrl-geocoder input {
        font-size: 16px !important;
    }

    /* 2. BUTON OKUNABİLİRLİK — sadece overflow koruması, hizalama DOKUNMA */
    .btn,
    button.btn,
    .btn-submit {
        overflow-wrap: break-word !important;
    }

    /* 3. DEVASA BAŞLIKLARI MOBİLE SIĞDIRMA (Fluid Type) */
    h1, .h1,
    h2, .h2 {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    /* 4. YATAY TAŞMA KİLİDİ */
    body, html {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ==================================================================
   57. PROJECT DETAIL — Header / Timeline / Lifecycle Mobil
   ================================================================== */
@media (max-width: 767.98px) {
    .project-detail-page .project-detail-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }

    .project-detail-page .project-detail-actions {
        width: 100%;
        flex-direction: column;
    }

    .project-detail-page .project-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .project-detail-page .project-timeline-card .card-body {
        padding: 1rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .project-detail-page .project-timeline-track {
        min-width: 420px;
        margin: 1rem 0 !important;
    }

    .project-detail-page .project-timeline-step {
        min-width: 84px;
    }

    .project-detail-page .project-timeline-step span {
        display: block;
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .project-detail-page .project-lifecycle-actions {
        flex-direction: column;
    }

    .project-detail-page .project-lifecycle-actions > * {
        width: 100%;
    }

    .project-detail-page .project-lifecycle-actions .btn,
    .project-detail-page .project-related-records .btn {
        width: 100%;
        justify-content: center;
    }

    .project-detail-page .project-related-records .list-group-item {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }
}

/* ==================================================================
   58. BILLING & INVOICES — Fatura Tabloları Kart Görünümü
   ================================================================== */
@media (max-width: 767.98px) {
    .billing-page .invoice-table thead,
    .billing-container .table thead {
        display: none;
    }

    .billing-page .invoice-table,
    .billing-page .invoice-table tbody,
    .billing-page .invoice-table tr,
    .billing-page .invoice-table td,
    .billing-container .table,
    .billing-container .table tbody,
    .billing-container .table tr,
    .billing-container .table td {
        display: block;
        width: 100%;
    }

    .billing-page .invoice-table tbody tr,
    .billing-container .table tbody tr {
        padding: 14px 16px;
        margin-bottom: 12px;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius-2026, 20px);
        background: #fff;
        position: relative;
    }

    .billing-page .invoice-table tbody td,
    .billing-container .table tbody td {
        padding: 6px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }

    .billing-page .invoice-table tbody td::before,
    .billing-container .table tbody td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        margin-right: 12px;
    }

    /* Aksiyon butonları alt alta */
    .billing-page .invoice-actions,
    .billing-container .invoice-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
        display: flex !important;
    }

    .billing-page .invoice-actions .btn,
    .billing-container .invoice-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Header (Özet & Filtreler) */
    .billing-page .billing-header,
    .billing-container .billing-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .billing-page .billing-summary-card,
    .billing-container .billing-summary-card {
        width: 100%;
        margin-bottom: 12px;
    }
}

/* ==================================================================
   59. CALENDAR / FULLCALENDAR — Mobil Ajanda (List) Koruması
   ================================================================== */
@media (max-width: 767.98px) {
    /* Takvim header (Ay/Hafta butonları) */
    .fc-header-toolbar.fc-toolbar {
        flex-direction: column;
        gap: 12px;
    }
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .fc-toolbar-chunk .btn-group {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .fc-toolbar-chunk .btn {
        flex: 1 1 auto;
    }

    /* Aylık Grid Görünümü Mobilde Taşar, Scroll-X zorunluluğu */
    .fc-view-harness {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fc-view.fc-daygrid-view,
    .fc-view.fc-timegrid-view {
        min-width: 600px; /* Okunabilirlik için minimum genişlik dayatıp yatay kaydırmaya zorla */
    }

    /* Event'lerin metinleri görünür kalsın */
    .fc-event {
        white-space: normal !important;
        word-wrap: break-word;
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }
}

/* ==================================================================
   60. CHATBOT / FLOATING ASSISTANT — Tam Ekran Zırhı
   ================================================================== */
@media (max-width: 767.98px) {
    .chatbot-floating-window,
    .lila-chat-window,
    .ai-assistant-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 1055 !important;
        display: flex;
        flex-direction: column;
    }

    .chatbot-body,
    .lila-chat-body,
    .ai-assistant-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Zıplayan klavyeleri kontrol altina al */
    html.mobile-keyboard-open .chatbot-footer,
    html.mobile-keyboard-open .lila-chat-footer {
        padding-bottom: 0 !important;
    }

    /* Açılış ikonu / tetikleyici düğmesi konum korumasi */
    .chatbot-trigger,
    .lila-chat-trigger,
    .floating-bot-btn {
        right: 16px !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; /* Bottom nav ile çakışmayı önle */
        transform: scale(0.9);
    }
}

/* ==================================================================
   61. SPECIFICATIONS / COMPARISONS — Teknik Matris Kaydırma
   ================================================================== */
@media (max-width: 767.98px) {
    /* Teknik tablo yapısı genelde yana doğru çok uzundur */
    .spec-matrix-table-wrapper,
    .comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1); /* Sağa kaydırılabilir hissi veren UI efekti */
    }

    .spec-matrix-table,
    .comparison-table {
        min-width: 800px; /* Daraltmayı durdur, net okunsun */
    }

    .spec-matrix-table th,
    .spec-matrix-table td,
    .comparison-table th,
    .comparison-table td {
        font-size: 0.85rem !important;
        padding: 10px !important;
        white-space: normal; /* Metinler içerde kalır */
        min-width: 150px;
    }

    /* İlk Sütun (Özellik İsimleri) Sabit Kalsın (Sticky Column) */
    .spec-matrix-table th:first-child,
    .spec-matrix-table td:first-child,
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        position: sticky;
        left: 0;
        background: #f8fafc;
        z-index: 2;
        border-right: 2px solid #e2e8f0;
        font-weight: 600;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
    }
}

/* Pastel production pass: marketplace filter bottom sheets */
@media (max-width: 575.98px) {
    .offcanvas.offcanvas-bottom.show {
        z-index: 1060 !important;
    }

    .offcanvas-backdrop.show {
        background-color: rgba(23, 32, 51, 0.22) !important;
        opacity: 1 !important;
    }

    #marketplaceFilterSheet.offcanvas.offcanvas-bottom,
    #contractorFilterSheet.offcanvas.offcanvas-bottom {
        background: #ffffff !important;
        border-top: 1px solid rgba(137, 172, 195, 0.3) !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow: 0 -16px 42px rgba(31, 78, 107, 0.14) !important;
    }

    #marketplaceFilterSheet.offcanvas.offcanvas-bottom::before,
    #contractorFilterSheet.offcanvas.offcanvas-bottom::before {
        background: #b9d9ec !important;
        border-radius: 8px !important;
    }
}