/*
 * core_app/static/css/mobile_enhancements.css
 * Mobil UX İyileştirmeleri - Tüm Uygulamalar İçin
 * 2026 - Touch-first design
 *
 * DİKKAT: Aşırı agresif !important kuralları kaldırıldı.
 * Paragraf içi <a> linklerini bozmamak için genel 'a' hedeflemesi yapılmaz.
 * .rounded-circle gibi yardımcı sınıflar override edilmez (avatar-özel sınıflar kullanılır).
 * 100% yerine 100% tercih edilir (scrollbar kayması engellenir).
 */

@media (max-width: 991.98px) {
    body {
        /* Bottom Nav (64px) + merkez Lila butonu lift (15px) + payanda */
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Footer ile alt menü arasındaki açık renkli şerit: yukarıdaki 96px
       rezervin alt menü fixed olduğu için footer bittikten sonra body zemininde
       açıkta kalan kısmını footer kendi içine alır — negatif margin ile kaplar,
       aynı miktarda padding ile içeriğini alt menünün üstünde tutar. Kural,
       rezervi veren body padding'i ile aynı dosyada durur; bu dosyayı
       yüklemeyen sayfalarda (ana sayfa) ikisi de uygulanmaz. */
    .site-footer {
        margin-bottom: calc(-96px - env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Feed FAB ("Oluştur"/"Piyasa") bottom-nav ile çakışmasın → üstüne it */
    .feed-mobile-bottom-launcher {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Çentikli telefonlar için üst bar koruması */
    .navbar-custom {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
}

/* ==================================================================
   MOBİL TEMEL AYARLAR - Tüm Sayfalar
   ================================================================== */

@media (max-width: 575.98px) {
    /* Container genişlik */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Sayfa padding */
    .page-content {
        padding: 12px !important;
    }

    /* Başlık boyutları */
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.375rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.125rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.875rem !important; }

    /* Paragraf */
    p, .text-body {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
        scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    html.mobile-keyboard-open,
    body.mobile-keyboard-open {
        overscroll-behavior-y: contain;
    }

    html.mobile-keyboard-open .bottom-nav,
    html.mobile-keyboard-open .mobile-bottom-nav,
    html.mobile-keyboard-open .feed-mobile-bottom-launcher,
    html.mobile-keyboard-open .lila-orb-trigger,
    html.mobile-keyboard-open .omni-widget-trigger,
    html.mobile-keyboard-open .chat-bubble,
    html.mobile-keyboard-open .toast-container,
    html.mobile-keyboard-open .gm-toast-container {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(12px) !important;
    }

    html.mobile-keyboard-open .navbar-custom .navbar-collapse {
        max-height: calc(var(--visual-viewport-height, 100dvh) - 72px) !important;
    }

    html.mobile-keyboard-open .offcanvas.offcanvas-bottom,
    html.mobile-keyboard-open .modal.show .modal-dialog {
        max-height: calc(var(--visual-viewport-height, 100dvh) - 8px) !important;
    }
}

/* ==================================================================
   TABLET ORTAK KORUMALAR - iPad / Android Tablet / Split View
   ================================================================== */

@media (min-width: 768px) and (max-width: 1366px) and (any-pointer: coarse) {
    html {
        scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px));
        scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .container,
    .container-fluid,
    .page-wrapper,
    .layout-wide,
    .container-page,
    .page-wrapper-narrow,
    .layout-narrow,
    .page-wrapper-slim,
    .layout-slim {
        padding-left: clamp(16px, 2.5vw, 24px) !important;
        padding-right: clamp(16px, 2.5vw, 24px) !important;
    }

    .page-content {
        padding-left: clamp(16px, 2.5vw, 24px) !important;
        padding-right: clamp(16px, 2.5vw, 24px) !important;
    }

    .row > *,
    [class*="col-"],
    .card,
    .card-body,
    .dropdown-menu,
    .input-group,
    .btn-group,
    .modal-content,
    .offcanvas,
    .offcanvas-body,
    .table-responsive {
        min-width: 0 !important;
    }

    .nav-tabs,
    .nav-pills,
    .breadcrumb {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar,
    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .table-responsive,
    .table:not(.table-responsive .table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table:not(.table-responsive .table) {
        display: block;
        white-space: nowrap;
    }

    .dropdown-menu {
        max-width: calc(100% - 48px) !important;
        border-radius: 12px !important;
    }

    .navbar .dropdown-menu {
        position: fixed !important;
        left: 24px !important;
        right: 24px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(72dvh, calc(var(--visual-viewport-height, 100dvh) - 24px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-dialog {
        margin: 24px auto !important;
        max-width: calc(100% - 48px) !important;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: min(880px, calc(100% - 48px)) !important;
    }

    .offcanvas.offcanvas-start,
    .offcanvas.offcanvas-end {
        width: min(420px, calc(100% - 32px)) !important;
        max-width: calc(100% - 32px) !important;
    }

    .offcanvas.offcanvas-bottom {
        max-height: calc(var(--visual-viewport-height, 100dvh) - 16px) !important;
    }

    .popover {
        width: min(560px, calc(100% - 48px));
        max-width: calc(100% - 48px);
    }
}

@media (min-width: 768px) and (max-width: 1366px) and (any-pointer: coarse) {
    html.tablet-keyboard-open,
    body.tablet-keyboard-open {
        overscroll-behavior-y: contain;
    }

    html.tablet-keyboard-open .fixed-bottom,
    html.tablet-keyboard-open [class*="fixed-bottom"],
    html.tablet-keyboard-open .bottom-nav,
    html.tablet-keyboard-open .mobile-bottom-nav,
    html.tablet-keyboard-open .feed-mobile-bottom-launcher,
    html.tablet-keyboard-open .lila-orb-trigger,
    html.tablet-keyboard-open .omni-widget-trigger,
    html.tablet-keyboard-open .chat-bubble,
    html.tablet-keyboard-open .toast-container {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(12px) !important;
    }

    html.tablet-keyboard-open .modal.show .modal-dialog,
    html.tablet-keyboard-open .offcanvas.offcanvas-bottom,
    html.tablet-keyboard-open .navbar .dropdown-menu.show,
    html.tablet-keyboard-open [popover]:popover-open {
        max-height: calc(var(--visual-viewport-height, 100dvh) - var(--visual-viewport-offset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px) !important;
    }
}

/* ==================================================================
   HANDHELD ORTAK KORUMALAR - Telefon + Foldable + Split View
   ================================================================== */

@media (max-width: 767.98px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .container,
    .container-fluid,
    .page-wrapper,
    .layout-wide,
    .container-page,
    .page-wrapper-narrow,
    .layout-narrow,
    .page-wrapper-slim,
    .layout-slim {
        padding-left: clamp(12px, 3vw, 14px) !important;
        padding-right: clamp(12px, 3vw, 14px) !important;
    }

    .page-content {
        padding-left: clamp(12px, 3vw, 14px) !important;
        padding-right: clamp(12px, 3vw, 14px) !important;
    }

    img,
    picture,
    picture img,
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* SVG/canvas/iframe/embed: sadece max-width, height: auto YASAK
       (Chart.js canvas, Mapbox canvas, SVG ikonları, iframe embed'leri kırılır) */
    svg:not(.bi):not([class*="icon"]),
    canvas:not([data-chart]):not(.mapboxgl-canvas):not(.maplibregl-canvas),
    iframe,
    embed,
    object {
        max-width: 100% !important;
    }

    .row > *,
    [class*="col-"],
    .card,
    .card-body,
    .dropdown-menu,
    .input-group,
    .btn-group,
    .offcanvas,
    .offcanvas-body,
    .modal-content,
    .table-responsive {
        min-width: 0 !important;
    }

    .nav-tabs,
    .nav-pills,
    .breadcrumb {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar,
    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .table-responsive,
    .table:not(.table-responsive .table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table:not(.table-responsive .table) {
        display: block;
        white-space: nowrap;
    }

    pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .btn,
    .badge,
    .nav-link,
    .dropdown-item,
    .card-title,
    .modal-title,
    .alert,
    .list-group-item {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    [style*="max-width:1200px"],
    [style*="max-width: 1200px"],
    [style*="max-width:1140px"],
    [style*="max-width: 1140px"],
    [style*="max-width:900px"],
    [style*="max-width: 900px"],
    [style*="max-width:800px"],
    [style*="max-width: 800px"] {
        max-width: 100% !important;
        padding-left: clamp(12px, 3vw, 14px) !important;
        padding-right: clamp(12px, 3vw, 14px) !important;
    }
}

/* ==================================================================
   BÜYÜK TELEFONLAR / FOLDABLE PORTRAIT (576px - 767.98px)
   ================================================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
    .btn,
    a.btn,
    button:not(.btn-close),
    [role="button"],
    .nav-link,
    .page-link,
    .dropdown-item {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        touch-action: manipulation;
    }

    .form-control,
    .form-select,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    .dropdown-menu {
        max-width: calc(100% - 28px) !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .navbar .dropdown-menu {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-dialog {
        margin: 12px auto !important;
        max-width: calc(100% - 28px) !important;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 28px) !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .list-group-item {
        min-height: 48px !important;
    }
}

/* ==================================================================
   TOUCH FRIENDLY - Butonlar ve Navigasyon Linkleri
   ================================================================== */

@media (max-width: 575.98px) {
    /* Minimum dokunma alanı — sadece buton/navigasyon elementleri */
    .btn,
    a.btn,
    button:not(.btn-close),
    [role="button"],
    .nav-link,
    .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        font-size: 16px !important;
        touch-action: manipulation;
    }

    /* Küçük butonlar: daha kompakt ama yine dokunulabilir */
    .btn-sm {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
    }

    /* Btn-close: küçük kalabilir ama dokunma alanı padding ile büyür */
    .btn-close {
        min-height: 32px !important;
        min-width: 32px !important;
        padding: 8px !important;
    }

    /* NOT: Genel 'a' seçicisine min-height/display:inline-block UYGULANMAZ.
       Paragraf içi linklerin akışını bozar. Sadece navigasyon linkleri hedeflenir. */

    /* Form elemanları */
    .form-control,
    .form-select,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    textarea {
        min-height: 100px !important;
    }

    /* Checkbox/Radio */
    .form-check-input {
        width: 22px !important;
        height: 22px !important;
        margin-top: 0 !important;
    }

    .form-check-label {
        padding-left: 8px !important;
        font-size: 16px !important;
    }

    /* Dropdown menü — 100% yerine 100% KULLANILMAZ (scrollbar kayması) */
    .dropdown-menu {
        min-width: calc(100% + 2rem) !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 !important;
        border-radius: 8px !important;
        padding: 8px !important;
    }

    /* Navbar altındaki dropdown'lar tam genişlik */
    .navbar .dropdown-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .dropdown-item {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* List group item — dokunma dostu */
    .list-group-item {
        padding: 12px 16px !important;
        min-height: 48px !important;
    }

    /* Modal */
    .modal-body {
        padding: 16px !important;
    }

    /* Card */
    .card {
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    /* Table */
    .table {
        font-size: 14px !important;
    }

    .table th,
    .table td {
        padding: 8px 12px !important;
    }

    /* Pagination */
    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ==================================================================
       ALERT & TOAST — Mobil uyumlu bildirim sistemi
       ================================================================== */

    /* Alert: Dokunma dostu dismiss butonu */
    .alert .btn-close {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 10px !important;
        touch-action: manipulation;
    }

    /* Alert içindeki butonlar */
    .alert .btn {
        touch-action: manipulation;
    }

    /* Toast: Dismiss dokunma alanı */
    .toast .btn-close {
        min-width: 32px !important;
        min-height: 32px !important;
        touch-action: manipulation;
    }

    /* Moderation banner: Spinner uyumu */
    .alert .spinner-grow {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Restriction alert'teki CTA butonu — tam genişlik */
    .alert .btn-primary:not(.btn-close) {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ==================================================================
   NAVBAR & NAVİGASYON
   ================================================================== */

@media (max-width: 575.98px) {
    /* Bottom navigation (varsa) */
    .bottom-nav,
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 1045 !important; /* > map-sidebar(1040), sidebar-toggle(1041); < modal(1050) */
        display: flex !important;
    }

    .bottom-nav-item {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px !important;
        font-size: 12px !important;
    }

    .bottom-nav-icon {
        font-size: 24px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Tab navigation — yatay kaydırma */
    .nav-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

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

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

    /* Nav pills — yatay kaydırma */
    .nav-pills {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-pills .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px !important;
        padding: 8px 0 !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/* ==================================================================
   FORMLAR
   ================================================================== */

@media (max-width: 575.98px) {
    /* Form grupları — fazla margin boşaltma, sadece form-group */
    .form-group {
        margin-bottom: 16px !important;
    }

    /* Inline form */
    .form-inline .form-group {
        display: block !important;
        margin-bottom: 12px !important;
    }

    /* Labels */
    .form-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }

    /* Help text */
    .form-text {
        font-size: 12px !important;
    }

    /* Error messages */
    .invalid-feedback {
        font-size: 12px !important;
    }

    /* Form grid — col padding sıkıştırma */
    .row > .col,
    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Input group — butonlar sıkışmasın */
    .input-group .btn {
        padding: 10px 12px !important;
        min-width: auto !important;
    }

    /* Buton grupları mobilde alt alta */
    .btn-group:not(.btn-group-sm) {
        flex-wrap: wrap;
    }
}

/* ==================================================================
   MEDYA & GÖRSELLER
   ================================================================== */

@media (max-width: 575.98px) {
    /* Responsive görseller */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    picture,
    picture img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Video */
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* SVG/canvas/iframe: sadece max-width sınırla, height: auto YASAK
       (Chart.js canvas, SVG ikonları, harita canvas'ları kırılır) */
    svg:not(.bi):not([class*="icon"]),
    canvas:not([data-chart]):not(.mapboxgl-canvas):not(.maplibregl-canvas),
    iframe,
    embed,
    object {
        max-width: 100% !important;
    }

    .ratio > iframe,
    .ratio > embed,
    .ratio > object,
    .ratio > video {
        width: 100% !important;
        height: 100% !important;
    }

    /* Bootstrap satır/kolon kombinasyonlarında min-content taşmasını engelle */
    .row > * {
        min-width: 0 !important;
    }

    /* Kod blokları ve uzun tek satırlı içerikler */
    pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: pre !important;
        font-size: 0.8125rem !important;
    }

    code,
    kbd,
    samp {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Avatar — sadece .avatar sınıfı hedeflenir, .rounded-circle DEĞİL.
       .rounded-circle genel Bootstrap yardımcı sınıfıdır (border-radius:50%),
       buna width/height vermek tüm yuvarlak elementleri bozar. */
    .avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .avatar-lg {
        width: 64px !important;
        height: 64px !important;
    }

    .avatar-sm {
        width: 32px !important;
        height: 32px !important;
    }

    /* İkon boyutları — sadece özel sınıflar, genel .bi DEĞİL.
       .bi'ye font-size vermek navbar ikonları, buton ikonları hepsini ezer. */
    .bi-lg {
        font-size: 1.5rem !important;
    }

    .bi-2x {
        font-size: 2rem !important;
    }
}

/* ==================================================================
   TABLE & DATA — Otomatik Responsive Tablo
   ================================================================== */

@media (max-width: 575.98px) {
    /* Tüm tablolar mobilde yatay kaydırılabilir */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* table-responsive wrapper'ı olmayan tablolara güvenlik ağı */
    .table:not(.table-responsive .table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Card lists */
    .card-list-item {
        padding: 12px !important;
        min-height: 72px !important;
    }

    /* Stats/counters */
    .stat-value {
        font-size: 1.25rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }
}

/* ==================================================================
   MODAL — Mobilde Tam Genişlik
   ================================================================== */

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    /* Büyük modal'lar mobilde fullscreen */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: 100% !important;
        margin: 0 !important;
        height: 100% !important;
    }

    .modal-dialog.modal-lg .modal-content,
    .modal-dialog.modal-xl .modal-content {
        border-radius: 0 !important;
        min-height: 100% !important;
    }

    /* Scrollable modal body */
    .modal-dialog-scrollable .modal-body {
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100dvh - 120px) !important;
    }
}

/* ==================================================================
   FOOTER
   ================================================================== */

@media (max-width: 575.98px) {
    footer {
        padding: 16px !important;
        font-size: 12px !important;
    }

    /* Mobil footer - bottom nav varsa altında boşluk bırak */
    .footer-content {
        padding-bottom: 80px !important;
    }
}

/* ==================================================================
   YATAY OVERFLOW KORUMALARI
   ================================================================== */

@media (max-width: 575.98px) {
    /* Body yatay overflow engelleme — en kritik kural */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Inline stilde max-width:1140px olan container'lar mobilde 100% */
    [style*="max-width:1140px"],
    [style*="max-width: 1140px"],
    [style*="max-width:900px"],
    [style*="max-width: 900px"] {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* SVG fixed boyutlar — modal içindeki SVG'ler */
    svg[style*="width:160px"],
    svg[style*="width: 160px"] {
        width: 120px !important;
        height: 120px !important;
    }

    /* Flex row → column on mobile */
    .d-flex:not(.flex-column):not(.flex-nowrap):not(.nav):not(.nav-tabs):not(.nav-pills):not(.btn-group):not(.input-group):not(.pagination) {
        flex-wrap: wrap;
    }

    /* Büyük gap değerleri mobilde küçült */
    .gap-4, .gap-5 {
        gap: 0.75rem !important;
    }
}

/* ==================================================================
   iOS SAFARİ ÖZEL
   ================================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 575.98px) {
        /* iOS zoom önleme */
        input, select, textarea {
            font-size: 16px !important;
        }

        /* iOS tap highlight */
        a, button, .btn {
            -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        }

        /* iOS momentum scroll */
        .overflow-auto,
        .overflow-scroll {
            -webkit-overflow-scrolling: touch !important;
        }

        /* Safe area inset - notch için */
        .safe-area-bottom {
            padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        }

        .safe-area-top {
            padding-top: env(safe-area-inset-top, 0px) !important;
        }

        /* iOS rubber-band yatay scroll engelleme */
        body {
            position: relative;
            overflow-x: hidden;
        }
    }
}

/* ==================================================================
   ANDROİD CHROME ÖZEL
   ================================================================== */

@media (max-width: 575.98px) and (any-pointer: coarse) {
    /* Touch hedefleri */
    .btn, button {
        touch-action: manipulation !important;
    }

    /* Scroll snap for carousels — scroll-snap-stop: always hızlı kaydırmada atlama engeller */
    .carousel,
    .scroll-container {
        scroll-snap-type: x mandatory !important;
        overscroll-behavior-inline: contain !important;
    }

    .scroll-item {
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* Nav tabs/pills kaydırma — snap + overscroll */
    .nav-tabs,
    .nav-pills {
        overscroll-behavior-inline: contain;
    }
}

/* ==================================================================
   KLAVYE AÇILDIĞINDA MOBİL DÜZELTMELER
   ================================================================== */

@media (max-width: 575.98px) and (hover: none) {
    /* Virtual keyboard açıkken */
    .modal.show {
        padding: 0 !important;
    }

    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    /* Form focus */
    .form-control:focus {
        position: relative;
        z-index: 1;
    }
}

/* ==================================================================
   LANDSCAPE MODE
   ================================================================== */

@media (max-width: 767.98px) and (orientation: landscape) {
    /* Landscape'te daha kompakt */
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h1, .h1 {
        font-size: 1.25rem !important;
    }

    .btn {
        padding: 6px 12px !important;
    }

    /* Landscape'te modal tam yükseklik olmasın */
    .modal-dialog {
        max-height: 90vh !important;
    }

    .modal-dialog-scrollable .modal-body {
        max-height: 60vh !important;
    }
}

/* ==================================================================
   TABLET DESTEĞİ (768px - 1024px)
   ================================================================== */

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    /* Tablet için touch target boyutları - iPad için 44px minimum */
    .btn,
    a.btn,
    button,
    [role="button"],
    .nav-link,
    .dropdown-item {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation;
    }

    /* iPad Safari zoom önleme - 16px zorunlu */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* iPad için safe area - notchlu modeller */
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .safe-area-top {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* Tablet container */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* --- TABLET LAYOUT İYİLEŞTİRMELERİ --- */

    /* Modal — tablette kenarlık bırak, fullscreen olmasın */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 48px) !important;
        margin: 24px auto !important;
    }

    /* Dropdown menü — tablette overflow engeli */
    .dropdown-menu {
        max-width: calc(100% - 32px) !important;
    }

    /* Nav tabs/pills — yatay kaydırma (mobil ile aynı) */
    .nav-tabs,
    .nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

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

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

    /* Drawer'lar — 500px sabit genişlik tablette sığmayabilir */
    .dealer-drawer-500 {
        width: min(500px, calc(100% - 48px)) !important;
    }

    /* Overlay drawer (quote editor vb.) */
    .overlay-drawer {
        width: min(400px, calc(100% - 48px));
    }

    /* Inline stilde max-width olan container'lar */
    [style*="max-width:1140px"],
    [style*="max-width: 1140px"] {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Flex wrap — tablette 3 sütundan 2 sütuna düşürebilir */
    .d-flex:not(.flex-column):not(.flex-nowrap):not(.nav):not(.nav-tabs):not(.nav-pills):not(.btn-group):not(.input-group):not(.pagination) {
        flex-wrap: wrap;
    }

    /* Tablo güvenlik ağı */
    .table:not(.table-responsive .table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Büyük gap değerleri hafif küçült */
    .gap-5 {
        gap: 1rem !important;
    }

    /* Scroll snap for carousels */
    .carousel,
    .scroll-container {
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
    }

    .scroll-item {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Card body padding — biraz sıkıştır */
    .card-body {
        padding: 14px !important;
    }

    /* Breadcrumb — yatay kaydırma */
    .breadcrumb {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/* ==================================================================
   TABLET — 2026 İLERİ TEKNİKLER (768px - 1024px)
   ================================================================== */

/* field-sizing: content — tablet'te de otomatik textarea boyutlama */
@supports (field-sizing: content) {
    @media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
        textarea.form-control,
        textarea.auto-resize {
            field-sizing: content;
            min-height: 48px;
            max-height: 50vh;
        }

        #messageInput,
        #mr-chat-input,
        .chat-input textarea {
            field-sizing: content;
            min-height: 48px;
            max-height: 35vh;
        }
    }
}

/* will-change: scroll-position — tablet uzun listeler
   NOT: .table-responsive çıkarıldı — her sayfada onlarca olabilir, gereksiz GPU layer yaratır */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    .message-list,
    .conversation-list,
    .feed-stream,
    .infinite-scroll-container {
        will-change: scroll-position;
    }
}

/* HDR — tablet'te de canlı renkler (oklch desteklemeyen tarayıcılar için @supports koruması) */
@supports (color: oklch(65% 0.15 260)) {
    @media (dynamic-range: high) and (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
        :root {
            --hdr-primary: oklch(62% 0.22 260);
            --hdr-success: oklch(72% 0.22 150);
            --hdr-danger: oklch(65% 0.25 25);
            --hdr-warning: oklch(82% 0.2 80);
        }
    }
}

/* Popover — tablet'te centered modal stili (bottom-sheet değil) */
@supports (selector(:popover-open)) {
    @media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
        [popover]:popover-open {
            position: fixed;
            top: 50%;
            left: 50%;
            bottom: auto;
            right: auto;
            transform: translate(-50%, -50%);
            max-width: min(500px, calc(100% - 48px));
            max-height: 80vh;
            max-height: 80dvh;
            border-radius: var(--radius-2026, 20px);
            padding: 20px;
            overflow-y: auto;
            box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
            margin: 0;
            transition: opacity 0.2s ease, transform 0.2s ease;
            opacity: 1;
        }

        @starting-style {
            [popover]:popover-open {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.95);
            }
        }

        [popover]::backdrop {
            background: rgba(0, 0, 0, 0.4);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }
    }
}

/* CSS math() — tablet'te de pixel-perfect */
@supports (width: round(nearest, 1px, 1px)) {
    @media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
        .card:not(.card-group > .card):not(.card-deck > .card) {
            border-radius: round(nearest, 0.5rem, 1px);
        }
    }
}

/* ==================================================================
   TABLET ORİENTASYON DESTEĞİ — Portrait vs Landscape
   iPad / Android tablet kullanıcıları sık sık döndürür.
   ================================================================== */

/* Tablet Portrait (768-1024, dikey) */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) and (orientation: portrait) {
    /* Portrait'te sidebar'ı gizle, tam genişlik içerik */
    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    /* Portrait'te modal tam genişlik */
    .modal-dialog {
        max-width: calc(100% - 32px) !important;
        margin: 16px auto !important;
    }

    /* Portrait'te 2 sütun grid → 1 sütun */
    .row > [class*="col-md-6"]:not(.col-md-12) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Portrait'te card grid tek sütun */
    .card-deck,
    .card-columns {
        column-count: 1;
    }

    /* Portrait'te form max-width */
    form:not(.d-inline):not(.d-flex) {
        max-width: 100%;
    }

    /* Portrait'te font biraz küçült */
    h1, .h1 { font-size: clamp(1.4rem, 4vw, 1.75rem); }
    h2, .h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }
    h3, .h3 { font-size: clamp(1.1rem, 3vw, 1.25rem); }
}

/* Tablet Landscape (768-1024, yatay) */
@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) and (orientation: landscape) {
    /* Landscape'te sidebar göster, dar tut */
    .sidebar-left {
        flex: 0 0 220px;
        max-width: 220px;
    }

    .sidebar-right {
        flex: 0 0 250px;
        max-width: 250px;
    }

    /* Landscape'te modal orta boy */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: 75vw !important;
    }

    /* Landscape'te 2 sütun koru */
    .row > [class*="col-md-6"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Landscape'te card grid 2 sütun */
    .card-deck {
        display: flex;
        flex-wrap: wrap;
    }

    .card-deck > .card {
        flex: 0 0 calc(50% - 16px);
        margin: 8px;
    }

    /* Landscape'te form max-width sınırla */
    form:not(.d-inline):not(.d-flex):not(.w-100) {
        max-width: 600px;
    }

    /* Landscape'te font normal */
    h1, .h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
    h2, .h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
}

/* ==================================================================
   iPAD SPLIT-VIEW / MULTİTASKİNG DESTEĞİ
   iPadOS 13+ split-view modunda uygulama 320-507px arası daraltılır.
   Bu aralık ne mobil ne tablet — özel kural gerekir.
   ================================================================== */

@media (min-width: 320px) and (max-width: 507px) and (min-height: 600px) {
    /* Split-view'da container padding */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Split-view'da sidebar gizle */
    .sidebar-left,
    .sidebar-right,
    .bo-sidebar {
        display: none !important;
    }

    /* Split-view'da modal bottom-sheet gibi davransın */
    .modal-dialog {
        margin: auto 8px 0 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    /* Split-view'da card tam genişlik */
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Split-view'da nav tabs compact */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* Split-view'da tablo yatay scroll */
    .table-responsive,
    table:not(.table-sm) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Split-view'da dropdown sığdır */
    .dropdown-menu {
        max-width: calc(100% - 16px) !important;
        font-size: 0.85rem;
    }

    /* Split-view'da büyük butonları küçült */
    .btn-lg {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }

    /* Split-view'da breadcrumb scrollable */
    .breadcrumb {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/* ==================================================================
   TABLET FLUID TYPOGRAFİ — clamp() ile pürüzsüz ölçekleme
   768px-1024px arasında font boyutları kademeli geçiş yapar.
   ================================================================== */

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    /* Başlık boyutları — fluid clamp */
    h1, .h1 { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem) !important; }
    h2, .h2 { font-size: clamp(1.25rem, 2vw + 0.4rem, 1.75rem) !important; }
    h3, .h3 { font-size: clamp(1.1rem, 1.8vw + 0.3rem, 1.5rem) !important; }
    h4, .h4 { font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem) !important; }

    /* Gövde metni */
    body {
        font-size: clamp(0.875rem, 1.2vw + 0.2rem, 1rem);
    }

    /* Küçük metin */
    small, .small, .text-muted, .text-xs {
        font-size: clamp(0.75rem, 1vw + 0.1rem, 0.875rem);
    }

    /* Badge/chip metin boyutu */
    .badge {
        font-size: clamp(0.65rem, 0.8vw + 0.1rem, 0.8rem);
    }
}

/* ==================================================================
   TABLET FORM LAYOUT — Formlar tablet genişliğine uyum
   ================================================================== */

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    /* Form grup max-width — .mb-3 fallback :has() desteklemeyen tarayıcılar için */
    .form-group,
    .mb-3 {
        max-width: 100%;
    }

    /* İnline form'lar tablette wrap olsun */
    .form-inline,
    form .row {
        flex-wrap: wrap;
    }

    /* İnput grup compact */
    .input-group-lg > .form-control,
    .input-group-lg > .btn {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    /* Textarea tablette uygun yükseklik */
    textarea.form-control {
        min-height: 80px;
        max-height: 40vh;
    }

    /* Select2/Chosen gibi custom select'ler */
    .select2-container,
    .choices {
        max-width: 100% !important;
    }

    /* Checkbox/radio tablette daha büyük */
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.15em;
    }
}

/* ==================================================================
   BÜYÜK TABLET LANDSCAPE (1025px - 1366px, coarse pointer)
   ================================================================== */

@media (min-width: 1025px) and (max-width: 1366px) and (any-pointer: coarse) {
    /* Büyük tabletler için hafif touch iyileştirmesi */
    .btn,
    a.btn,
    button {
        min-height: 42px !important;
    }

    /* Drawer genişlikleri */
    .dealer-drawer-500 {
        width: min(500px, calc(100% - 64px)) !important;
    }

    /* Büyük tablette fluid tipografi */
    h1, .h1 { font-size: clamp(1.75rem, 2vw + 0.5rem, 2.25rem); }
    h2, .h2 { font-size: clamp(1.5rem, 1.8vw + 0.4rem, 2rem); }

    /* Sidebar genişlikleri */
    .sidebar-left {
        flex: 0 0 240px;
        max-width: 240px;
    }

    .sidebar-right {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

/* ==================================================================
   MİNİMUM FONT BOYUTU KORUMASI
   Tüm görünür metinler mobilde minimum 12px olmalı.
   [2026-09] Taban 11px'ten 12px'e çıkarıldı: mülk detayında .small ve .badge
   metinlerinin tamamı 11px'te kalıyordu, telefonda okunmuyordu. Taban bu
   dosyada tek noktada duruyor; sayfa CSS'lerinde yerel kopyası açılmasın.
   ================================================================== */

@media (max-width: 575.98px) {
    /* Font boyutu çok küçük olan sınıflar düzeltilir */
    small,
    .small,
    .text-xs,
    .x-small,
    .text-muted small,
    figcaption {
        font-size: max(0.75rem, 12px) !important;
    }

    /* Badge'ler okunabilir kalmalı */
    .badge {
        font-size: max(0.75rem, 12px) !important;
        padding: 4px 8px !important;
    }
}

/* ==================================================================
   2026 MOBİL İLERİ TEKNİKLER
   ================================================================== */

/* field-sizing: content — Textarea/input otomatik boyutlanır (JS gereksiz) */
@supports (field-sizing: content) {
    @media (max-width: 575.98px) {
        textarea.form-control,
        textarea.auto-resize {
            field-sizing: content;
            min-height: 44px !important;
            max-height: 40vh;
        }

        /* Chat input: tek satırda başla, içerikle büyü */
        #messageInput,
        #mr-chat-input,
        .chat-input textarea {
            field-sizing: content;
            min-height: 44px !important;
            max-height: 30vh;
        }
    }
}

/* will-change: scroll-position — GPU hızlandırmalı uzun scroll container'lar
   NOT: .table-responsive çıkarıldı — sayfa başına çok sayıda olabilir, düşük bellekli cihazlarda sorun */
@media (max-width: 575.98px) {
    .message-list,
    .conversation-list,
    .feed-stream,
    .infinite-scroll-container {
        will-change: scroll-position;
    }
}

/* @media (dynamic-range: high) — HDR ekranlarda daha canlı renkler */
@supports (color: oklch(65% 0.15 260)) {
    @media (dynamic-range: high) and (max-width: 575.98px) {
        :root {
            --hdr-primary: oklch(65% 0.22 260);
            --hdr-success: oklch(72% 0.22 150);
            --hdr-danger: oklch(65% 0.25 25);
            --hdr-warning: oklch(82% 0.2 80);
        }

        .btn-primary {
            background-color: oklch(60% 0.22 260);
        }

        .badge-success, .bg-success {
            background-color: oklch(72% 0.22 150) !important;
        }
    }
}

/* CSS math() — round() ile grid hizalama, pixel-perfect spacing */
@supports (width: round(nearest, 1px, 1px)) {
    @media (max-width: 575.98px) {
        .card:not(.card-group > .card):not(.card-deck > .card) {
            width: round(nearest, 100%, 1px);
        }

        .avatar,
        .avatar-lg,
        .avatar-sm {
            width: round(nearest, var(--avatar-size, 40px), 2px);
            height: round(nearest, var(--avatar-size, 40px), 2px);
        }
    }
}

/* Native Popover API — Stiller */
@supports (selector(:popover-open)) {
    @media (max-width: 575.98px) {
        /* Popover açıkken bottom-sheet stili */
        [popover]:popover-open {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            max-height: 70vh;
            max-height: 70dvh;
            border-radius: 16px 16px 0 0;
            padding: 16px;
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
            margin: 0;
            /* Desktop scale animasyonu yerine slide-up */
            transition: opacity 0.25s ease, transform 0.25s ease;
            opacity: 1;
            transform: translateY(0);
        }

        @starting-style {
            [popover]:popover-open {
                opacity: 0;
                transform: translateY(100%);
            }
        }

        /* Popover backdrop */
        [popover]::backdrop {
            background: rgba(0, 0, 0, 0.4);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }
    }
}

/* CSS anchor() positioning — Tooltip/popover pozisyonlama */
@supports (position-anchor: --trigger) {
    @media (max-width: 575.98px) {
        .tooltip-anchor {
            anchor-name: --trigger;
        }

        .tooltip-anchored {
            position: absolute;
            position-anchor: --trigger;
            bottom: anchor(top);
            left: anchor(center);
            translate: -50% -8px;
        }
    }
}

/* ==================================================================
   PREFERS-REDUCED-DATA — Düşük Bant Genişliği Optimizasyonu
   Mobil veri tasarrufu açık kullanıcılar için:
   - Dekoratif görseller gizlenir
   - Video autoplay engellenir
   - Ağır animasyonlar kapatılır
   - Gölge efektleri basitleştirilir
   - Font weight azaltılır (daha az byte)
   ================================================================== */
@media (prefers-reduced-data: reduce) {
    /* Dekoratif arka plan görselleri kaldır */
    .hero-pattern,
    .decorative-bg,
    [class*="bg-gradient"],
    .card-img-overlay::before {
        background-image: none !important;
    }

    /* Video autoplay engelle, poster göster */
    video[autoplay] {
        display: block; /* Sadece placeholder kalsın diye bloklandı */
    }
    video:not([controls]) {
        display: none !important;
    }

    /* Lottie/animasyon konteynerlerini gizle */
    lottie-player,
    .lottie-animation,
    dotlottie-player {
        display: none !important;
    }

    /* Ağır gölgeleri kaldır */
    .shadow,
    .shadow-sm,
    .shadow-lg,
    [class*="shadow"] {
        box-shadow: none !important;
    }

    /* Backdrop blur kaldır (GPU yoğun) */
    .modal-backdrop,
    [popover]::backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Border ile minimal gösterim */
    .card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0;
    }

    /* Avatar'ları küçült */
    .avatar-lg {
        width: 48px !important;
        height: 48px !important;
    }

    /* Font weight azalt — daha az byte */
    h1, h2, h3, .h1, .h2, .h3 {
        font-weight: 600 !important;
    }
    h4, h5, h6, .h4, .h5, .h6 {
        font-weight: 500 !important;
    }

    /* İkon fontları basitleştir */
    .bi::before,
    .fa::before,
    .fas::before {
        font-weight: normal !important;
    }

    /* Animasyonları devre dışı bırak */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Skeleton loading'i basit renge çevir */
    .skeleton {
        animation: none !important;
        background: #e5e7eb !important;
    }

    /* Carousel/swiper otomatik kaydırmayı durdur */
    .swiper-wrapper,
    .carousel-inner {
        animation: none !important;
    }
}

/* ==================================================================
   NETWORK-AWARE IMAGE LOADING — Yavaş bağlantı optimizasyonu
   Save-Data HTTP header'ı aktif kullanıcılar için
   (Chrome'un "Lite Mode" / data saver özelliği)
   ================================================================== */
@media (prefers-reduced-data: reduce) {
    /* Dekoratif img'leri gizle, sadece anlamlı olanları göster */
    img[aria-hidden="true"],
    img.decorative,
    img[role="presentation"] {
        display: none !important;
    }

    /* Banner/hero görsellerini gizle */
    .hero-image,
    .banner-image,
    .cover-image:not(.profile-cover) {
        display: none !important;
    }

    /* Yüksek çözünürlüklü görselleri önle */
    img {
        image-rendering: optimizeSpeed;
    }
}

/* ==================================================================
   PREFERS-CONTRAST — Yüksek kontrast modu
   Görme güçlüğü olan kullanıcılar için
   ================================================================== */
@media (prefers-contrast: more) {
    /* Border'ları belirginleştir */
    .card,
    .modal-content,
    .dropdown-menu,
    .popover,
    .toast {
        border: 2px solid currentColor !important;
    }

    /* Link'leri altçizgili yap */
    a:not(.btn):not(.nav-link):not(.navbar-brand) {
        text-decoration: underline !important;
    }

    /* Disabled durumu daha belirgin */
    .btn:disabled,
    .btn.disabled,
    [disabled] {
        opacity: 0.6 !important;
        border-style: dashed !important;
    }

    /* Focus ring'i güçlendir */
    :focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }

    /* Placeholder kontrastı artır */
    ::placeholder {
        color: inherit !important;
        opacity: 0.7 !important;
    }

    /* Badge'leri belirginleştir */
    .badge {
        border: 1px solid currentColor;
    }

    /* Alert border */
    .alert {
        border-width: 2px !important;
    }
}

/* ==================================================================
   FORCED-COLORS — Windows Yüksek Kontrast Modu
   Windows'un yerleşik erişilebilirlik modu için uyum
   ================================================================== */
@media (forced-colors: active) {
    /* Özel renkleri sistem renklerine bırak */
    .btn {
        border: 1px solid ButtonText;
    }

    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        forced-color-adjust: none;
        background: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
    }

    /* Focus durumu */
    :focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }

    /* Link'ler */
    a {
        color: LinkText;
    }

    /* Disabled */
    :disabled,
    .disabled {
        color: GrayText;
        border-color: GrayText;
    }

    /* İkon SVG'leri renk devralsın */
    .bi,
    .fa,
    svg {
        forced-color-adjust: auto;
    }

    /* Card border'ları görünür yap */
    .card {
        border: 1px solid CanvasText;
    }

    /* Badge */
    .badge {
        border: 1px solid CanvasText;
    }
}

/* ==================================================================
   TOUCH-ACTION OPTİMİZASYONLARI — Dokunmatik cihaz hassasiyeti
   Kaydırma yönü kilitlenmesi ve istenmeyen zoom'u engelleme
   ================================================================== */
@media (any-pointer: coarse) {
    /* Yatay carousel/tab'larda dikey scroll'u engelle */
    .nav-tabs,
    .nav-pills,
    .swiper-wrapper,
    .carousel-inner,
    [class*="scroll-x"],
    [style*="overflow-x"] {
        touch-action: pan-x;
    }

    /* Dikey scroll container'larda yatay kaydırmayı engelle */
    .modal-body,
    .offcanvas-body,
    .chat-messages,
    .feed-stream,
    [class*="scroll-y"] {
        touch-action: pan-y;
    }

    /* Harita ve canvas elementlerinde tüm gesture'ları etkinleştir */
    .map-container,
    canvas,
    [class*="map-"] {
        touch-action: manipulation;
    }

    /* Pinch-to-zoom sadece görsellerde */
    .image-viewer,
    .photo-zoom,
    .pdf-viewer {
        touch-action: pinch-zoom pan-x pan-y;
    }

    /* Double-tap zoom'u engelle (butonlar ve link'ler için) */
    .btn,
    .nav-link,
    a,
    button,
    [role="button"],
    input[type="submit"] {
        touch-action: manipulation;
    }
}

/* ==================================================================
   FLEXBOX GAP FALLBACK — Safari <14.1 uyumluluğu
   Safari 14.0 ve altı flexbox'ta gap desteklemez.
   @supports not ile margin-based fallback sağlanır.
   ================================================================== */
@supports not (gap: 1px) {
    /* Genel flex container'larda gap yerine margin */
    .d-flex > * + *,
    .d-inline-flex > * + * {
        margin-left: 0.5rem;
    }

    .flex-column > * + *,
    .d-flex.flex-column > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    /* Bootstrap btn-group benzeri yapılar */
    .btn-group > .btn + .btn {
        margin-left: 2px;
    }

    /* Card grid / list yapıları */
    .card-group > .card + .card {
        margin-left: 0;
    }

    /* Nav tabs/pills */
    .nav > .nav-item + .nav-item {
        margin-left: 0.25rem;
    }

    /* Badge/tag listeleri */
    .badge + .badge {
        margin-left: 0.25rem;
    }

    /* Form input grupları */
    .input-group > * + * {
        margin-left: -1px;
    }
}

/* ==================================================================
   BOOTSTRAP MODAL → MOBILE BOTTOM SHEET
   Sadece küçük ekranlarda (< 576px) modalları alttan açılır yapar.
   ================================================================== */
@media (max-width: 575.98px) {
    .modal.fade .modal-dialog {
        display: flex !important;
        align-items: flex-end !important;
        min-height: 100% !important;
        margin: 0 !important;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .modal-dialog-centered {
        align-items: flex-end !important;
    }

    .modal.fade:not(.show) .modal-dialog {
        transform: translateY(100%) !important;
    }

    .modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    .modal-content {
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
        width: 100% !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
    }

    .modal-content.dp-modal {
        border-radius: 28px 28px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
    }

    /* Modal Handle (iOS style indicator) */
    .modal-content::before {
        content: "";
        width: 36px;
        height: 5px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-2026, 20px);
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    @media (prefers-color-scheme: dark) and (min-width: 99999px) {
        .modal-content::before {
            background: rgba(255, 255, 255, 0.2);
        }
    }

    .modal-header {
        border-radius: 24px 24px 0 0 !important;
        padding-top: 24px !important;
    }

    .modal-header.dp-hero {
        border-radius: 28px 28px 0 0 !important;
        padding-top: 25px !important;
    }

    .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Modal title truncation */
    .modal-title {
        font-size: 1.1rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 48px);
    }

    /* Modal body scroll enhancement */
    .modal-body {
        overscroll-behavior-y: contain;
    }

    /* Sidebar modals: stack vertically */
    .msg-modal-sidebar-320 {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* ==================================================================
   ÇOK KÜÇÜK EKRANLAR (<400px) — iPhone SE, Galaxy A0x serisi
   320px-399px aralığı için ekstra optimizasyonlar
   ================================================================== */
@media (max-width: 399.98px) {
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1, .h1 { font-size: 1.35rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
    h4, .h4 { font-size: 1rem !important; }

    p, .text-body {
        font-size: 0.875rem !important;
        line-height: 1.45 !important;
    }

    .btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .btn-lg {
        padding: 10px 16px !important;
        font-size: 15px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .modal-body {
        padding: 12px !important;
    }

    .gap-3 { gap: 0.5rem !important; }
    .gap-4 { gap: 0.5rem !important; }
    .gap-5 { gap: 0.75rem !important; }

    .col-6 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ==================================================================
   POPÜLER TELEFON MODELLERİ İÇİN ÖZEL BREAKPOINT'LER
   iPhone 16/15/14 Pro: 393×852
   iPhone 16/15/14 Pro Max: 430×932
   Samsung Galaxy S24: 360×780
   Samsung Galaxy S24 Ultra: 412×915
   Google Pixel 8/9: 412×915
   iPhone SE 3: 375×667
   ================================================================== */

/* iPhone SE / küçük telefonlar (375px) */
@media (max-width: 375px) {
    .bottom-nav-item span {
        /* [2026-09] 9px → 11px. 12px bu genişlikte "Mesajlar"ı taşırıyor,
           11px sığan en büyük ölçü. */
        font-size: 11px !important;
    }

    .bottom-nav-icon {
        font-size: 20px !important;
    }

    .bottom-nav-action-btn {
        width: 50px !important;
        height: 50px !important;
    }

    .breadcrumb-item {
        font-size: 11px !important;
    }
}

/* Orta boy telefonlar (393-430px aralığı) — Ana hedef segment */
@media (min-width: 393px) and (max-width: 430px) {
    .container,
    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .card-body {
        padding: 14px !important;
    }
}

/* Büyük telefonlar (430px+) — daha geniş düzen */
@media (min-width: 430px) and (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .modal-dialog {
        margin: 8px auto !important;
        max-width: calc(100% - 20px) !important;
    }
}

/* ==================================================================
   MOBİL TİPOGRAFİ - Fluid scaling, minimum okunaklılık
   ================================================================== */
@media (max-width: 575.98px) {
    body {
        font-size: clamp(0.875rem, 2.5vw + 0.25rem, 1rem);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .text-truncate {
        max-width: 100%;
    }

    /* Long URLs / email addresses */
    a:not(.btn):not(.nav-link) {
        overflow-wrap: anywhere;
    }

    /* Fluid margin/padding for sections */
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-4 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .mb-5 { margin-bottom: 2rem !important; }
    .mt-5 { margin-top: 2rem !important; }
}

/* ==================================================================
   MOBİL GLOBAL OVERRIDE — Breakpoint'siz CSS dosyaları için güvenlik ağı
   Knowledge, Field Staff, Onboarding, Consultations, Connections
   ================================================================== */
@media (max-width: 575.98px) {
    /* Onboarding: Lottie/SVG boyut sınırı */
    [style*="width: 280px"][style*="height: 280px"],
    [style*="width:280px"][style*="height:280px"] {
        width: min(220px, 60vw) !important;
        height: min(220px, 60vw) !important;
    }

    /* Onboarding: Büyük başlık küçült */
    .welcome-title,
    .onboarding-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    /* Field Staff: card header padding compact */
    .fs-header,
    .cert-header,
    .training-header,
    .skill-header,
    .profile-header {
        padding: 1rem !important;
    }

    /* Field Staff: büyük avatar küçült */
    .profile-avatar[style*="120px"],
    .fs-avatar-xl {
        width: 80px !important;
        height: 80px !important;
    }

    /* Consultations: manage availability fixed widths */
    .avail-time-input[style*="max-width"],
    select[style*="width: 120px"],
    select[style*="width: 150px"],
    select[style*="width:120px"],
    select[style*="width:150px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Consultations: slot buton minimum genişlik */
    .slot-btn { min-width: 70px; }

    /* Consultations: booking margin */
    .booking-summary[style*="margin: 40px"] {
        margin: 16px !important;
    }

    /* Connections: dashboard chart / avatar compact */
    .conn-chart-label { font-size: max(0.8rem, 12px); }

    /* Onboarding: modal max-width override */
    .modal-dialog[style*="max-width: 420px"],
    .modal-dialog[style*="max-width:420px"],
    .onboarding-modal[style*="max-width: 420px"] {
        max-width: calc(100% - 24px) !important;
    }

    /* Onboarding: role icon compact */
    .role-icon[style*="72px"],
    .subrole-icon {
        width: 56px !important;
        height: 56px !important;
    }

    /* Knowledge: article card avatar küçült */
    .knowledge-avatar-xl {
        width: 80px !important;
        height: 80px !important;
    }

    /* Inline font-size minimum — çok küçük olanları okunaklı hale getir */
    [style*="font-size:0.5rem"],
    [style*="font-size:.5rem"],
    [style*="font-size: 0.5rem"] {
        font-size: max(0.65rem, 10px) !important;
    }
    [style*="font-size:0.6rem"],
    [style*="font-size:.6rem"],
    [style*="font-size: 0.6rem"] {
        font-size: max(0.65rem, 10px) !important;
    }
    [style*="font-size:0.65rem"],
    [style*="font-size:.65rem"],
    [style*="font-size: 0.65rem"] {
        font-size: max(0.68rem, 11px) !important;
    }
    [style*="font-size:0.68rem"],
    [style*="font-size:.68rem"],
    [style*="font-size: 0.68rem"] {
        font-size: max(0.72rem, 11px) !important;
    }
}

@media (max-width: 399.98px) {
    [style*="width: 280px"][style*="height: 280px"],
    [style*="width:280px"][style*="height:280px"] {
        width: min(180px, 55vw) !important;
        height: min(180px, 55vw) !important;
    }

    .profile-avatar[style*="120px"],
    .fs-avatar-xl,
    .knowledge-avatar-xl {
        width: 64px !important;
        height: 64px !important;
    }
}