/* =========================================================
   SERTSAN CRM - KAPSAMLI MOBİL RESPONSIVE CSS
   v2.0 - 11 Şubat 2026
   iPhone & Android tam uyumlu, PWA desteği
   ========================================================= */

/* ============================================
   1. TEMEL MOBİL AYARLAR & RESET
   ============================================ */
@media (max-width: 900px) {
  /* Temel kutu modeli düzeltme */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* NOT: html'e overflow-x: hidden koyma! iOS Safari'de dikey scroll'u kilitler */
  }

  body {
    /* ✅ Yalnızca body'de overflow-x:hidden güvenlidir.
       html'de OLMASIN (iOS bug) - glass-layout'ta DA OLMASIN (iOS scroll container yaratır).
       Sadece body'de olunca browser normal document scroll'u kullanır. */
    overflow-x: hidden;
    width: 100%;
  }

  /* iOS input zoom engelleme - 16px altı font iOS'ta zoom yapar */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================
   2. LAYOUT - SIDEBAR & ANA İÇERİK
   ============================================ */
@media (max-width: 900px) {
  /* Sidebar mobilde gizli, hamburger ile açılır */
  .glass-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px !important;
    z-index: 10001 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    flex-direction: column;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .glass-sidebar.open {
    transform: translateX(0) !important;
  }

  /* Sidebar içi scroll kolaylaştırma */
  .glass-sidebar .glass-nav-group {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-bottom: 80px;
  }

  /* Sidebar menü öğeleri - daha büyük touch hedefleri */
  .glass-dock-item {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Ana içerik - sidebar yok, tam genişlik */
  .glass-main {
    margin-left: 0 !important;
    padding: 8px !important;
    padding-top: 70px !important;
    padding-bottom: 90px !important;
    width: 100% !important;
    min-height: 100vh;
  }

  /* Container tam genişlik */
  .container {
    max-width: 100% !important;
    padding: 0 8px !important;
    width: 100% !important;
  }

  /* Glass layout düzeltme */
  .glass-layout {
    flex-direction: column;
    /* ❌ overflow-x:hidden BURAYA KONULMAMALI!
       iOS Safari bu elementi ayrı scroll container'a çevirir → tüm touch scroll bloklanır.
       Yatay taşmayı önlemek için max-width kullan. */
    max-width: 100%;
  }
}

/* ============================================
   3. MOBİL HEADER (ÜST BAR)
   ============================================ */
@media (max-width: 900px) {
  .mobile-glass-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: linear-gradient(135deg, #FF8F00 0%, #FFB74D 100%) !important;
    z-index: 200000 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    box-shadow: 0 4px 20px rgba(255, 143, 0, 0.3) !important;
    /* iOS safe area */
    padding-top: env(safe-area-inset-top) !important;
  }

  /* Hamburger butonu */
  .mobile-hamburger {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200001;
    width: 44px;
    height: 44px;
    /* iOS minimum touch target */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: white !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    padding: 8px !important;
    min-width: 44px;
    min-height: 44px;
  }

  /* Backdrop overlay */
  .glass-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .glass-overlay.active {
    display: block !important;
    opacity: 1 !important;
  }
}

/* ============================================
   4. MOBİL ALT NAVİGASYON (BOTTOM NAV)
   ============================================ */
@media (max-width: 900px) {
  .mobile-glass-nav {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 65px;
    background: rgba(17, 17, 17, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    /* iOS safe area */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #a1a1aa;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.2s;
    min-width: 50px;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item.active {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
  }

  .mobile-nav-item.active svg {
    stroke: #fbbf24;
  }
}

/* ============================================
   5. ANA MENÜ / HOME MENU
   ============================================ */
@media (max-width: 900px) {
  /* Mobilde ana menüyü gizle (glass sidebar kullanılıyor) */
  .homeMenu {
    display: none !important;
  }

  /* Dashboard grid tek sütun */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dashboard-grid-wide {
    grid-template-columns: 1fr !important;
  }

  .dashboard-card {
    padding: 16px !important;
    min-height: auto !important;
  }

  .card-icon {
    font-size: 32px !important;
  }

  .card-title {
    font-size: 15px !important;
  }

  .card-desc {
    font-size: 12px !important;
  }

  .section-title {
    font-size: 14px !important;
  }

  /* Eski menü grid */
  .menuGrid {
    grid-template-columns: 1fr !important;
  }

  .menuTile {
    min-height: 100px !important;
    padding: 16px !important;
  }
}

/* ============================================
   6. TAB SİSTEMİ (SEKME BUTONLARI)
   ============================================ */
@media (max-width: 900px) {
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px !important;
    gap: 4px !important;
    min-height: 50px !important;
  }

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

  .tabs .tab,
  .tabs button {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    min-height: 44px;
  }

  /* Dashboard tab butonları */
  .dash-tab-btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Tab container kaydırmalı */
  [style*="display: flex"][style*="gap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   7. TABLOLAR - YATAY KAYDIRMA
   ============================================ */
@media (max-width: 900px) {
  /* Tüm tabloları sarmalayan div'e yatay kaydırma */
  .table-wrapper,
  .table-container,
  div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100vw;
  }

  table {
    min-width: 600px;
  }

  /* Sipariş tabloları */
  .table-modern-orders-hist {
    min-width: 700px;
    font-size: 12px !important;
  }

  .table-modern-orders-hist th,
  .table-modern-orders-hist td {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Genel tablo stilleri */
  th, td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* Tablo action butonları küçültme */
  table .btn,
  table button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 36px;
  }
}

/* ============================================
   8. FORMLAR & INPUT'LAR
   ============================================ */
@media (max-width: 900px) {
  /* Form grid'leri tek sütun */
  .grid2, .grid3, .grid4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .row2 {
    grid-template-columns: 1fr !important;
  }

  /* Form alanları */
  .field {
    margin-bottom: 12px;
  }

  .field label {
    font-size: 13px !important;
    margin-bottom: 6px;
  }

  input, select, textarea {
    padding: 12px !important;
    font-size: 16px !important;
    /* iOS zoom engelleme */
    border-radius: 10px !important;
    min-height: 44px;
    /* Touch target */
  }

  textarea {
    min-height: 80px;
  }

  /* Search input'ları */
  input[type="search"],
  .search-input,
  #custSearch,
  #orderSearch {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form row'ları */
  .goal-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   9. BUTONLAR - TOUCH OPTİMİZASYON
   ============================================ */
@media (max-width: 900px) {
  /* Minimum touch hedefi 44x44px (Apple HIG) */
  .btn,
  button:not(.mobile-hamburger):not(.mobile-menu-btn):not(.glass-dock-item) {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 14px !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Ana aksiyon butonları */
  .btn.primary,
  .glass-btn-primary {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* Action butonlar grubu */
  .actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
  }

  .actions .btn,
  .actions button {
    width: 100% !important;
    justify-content: center;
  }

  /* İnline action butonları */
  .action-buttons {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .action-buttons button {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ============================================
   10. KARTLAR & CARD KOMPONENTLER
   ============================================ */
@media (max-width: 900px) {
  .card {
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
  }

  /* Sipariş kartları */
  .order-card,
  .meeting-card,
  .task-card {
    padding: 12px !important;
  }

  /* Bağlantı kartları */
  .connection-card-modern {
    padding: 14px !important;
  }

  .conn-details-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .conn-card-footer {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .conn-action-btn {
    width: 100% !important;
  }

  /* Goal kartları */
  .goal-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .goal-card-ultra {
    padding: 16px !important;
  }

  .goal-summary-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

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

  .goal-summary-value {
    font-size: 22px !important;
  }

  .goal-summary-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  /* Goal filter tabs */
  .goal-filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .goal-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .goal-filter-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Goal dashboard container */
  .goal-dashboard-ultra {
    padding: 12px !important;
    border-radius: 14px !important;
  }
}

/* ============================================
   11. MODALLER & POPUP'LAR
   ============================================ */
@media (max-width: 900px) {
  /* Tüm modaller tam ekran */
  .modal,
  .order-detail-modal,
  .goal-modal-ultra,
  [class*="modal"] {
    padding: 0 !important;
  }

  .modal-content,
  .order-detail-content,
  .goal-modal-content,
  [class*="modal-content"],
  [class*="modal"] > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    min-height: 100vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal başlık */
  .modal-header,
  .goal-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 16px !important;
  }

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

  /* Modal footer */
  .modal-footer,
  .goal-modal-footer {
    position: sticky;
    bottom: 0;
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .goal-modal-footer button {
    width: 100% !important;
  }

  /* Closing button */
  .modal-close,
  .goal-modal-close,
  [onclick*="close"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Sipariş detay modal */
  .order-detail-modal .order-detail-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Kalan sipariş modal */
  #kalanSiparisModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    padding: 12px !important;
    border-radius: 0 !important;
  }

  /* Order actions dropdown - modal tarzı */
  .order-actions-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 12px !important;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 100000 !important;
    animation: slideUpFromBottom 0.3s ease-out;
  }

  @keyframes slideUpFromBottom {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  .dropdown-item {
    padding: 14px 16px !important;
    font-size: 15px !important;
    min-height: 48px;
  }

  .dropdown-icon {
    font-size: 20px !important;
    width: 28px !important;
  }
}

/* ============================================
   12. GİRİŞ / LOGIN SAYFASI
   ============================================ */
@media (max-width: 900px) {
  .glass-login-wrapper {
    padding: 16px !important;
    align-items: flex-start;
    padding-top: 80px !important;
  }

  .glass-login-card {
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .login-brand-area h1 {
    font-size: 24px !important;
  }

  .login-brand-area img {
    height: 48px !important;
  }

  .glass-input {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  /* 2FA Sayfası */
  .glass-2fa-wrapper {
    padding: 16px !important;
    align-items: flex-start;
    padding-top: 80px !important;
  }

  .glass-2fa-card {
    max-width: 100% !important;
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  .glass-2fa-input {
    font-size: 26px !important;
    letter-spacing: 8px !important;
    padding: 14px !important;
  }

  .glass-2fa-icon-area {
    width: 72px !important;
    height: 72px !important;
  }

  .glass-2fa-icon-area span {
    font-size: 36px !important;
  }

  .glass-2fa-card h2 {
    font-size: 22px !important;
  }

  /* Şifre sıfırlama */
  #passwordResetPage .glass-2fa-card {
    max-width: 100% !important;
    padding: 32px 20px !important;
  }
}

/* ============================================
   13. SİPARİŞ OLUŞTURMA SAYFASI
   ============================================ */
@media (max-width: 900px) {
  /* Sipariş formu */
  .order-form,
  #orderFormContainer {
    padding: 10px !important;
  }

  /* Sipariş satır grid'i tek sütun */
  .order-line-grid,
  .order-row-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Sipariş durumu flow'u */
  .order-status-flow,
  .order-flow-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* Kart başlıkları */
  .order-header,
  .siparis-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Sipariş özet alanı */
  .order-summary,
  .siparis-summary {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Ürün seçim select'i */
  .product-select,
  #stokSelect {
    width: 100% !important;
  }

  /* Sipariş satırı mobil düzeni */
  .order-line-item {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
}

/* ============================================
   14. SİPARİŞ GEÇMİŞİ (VERİLEN SİPARİŞLER)
   ============================================ */
@media (max-width: 900px) {
  /* Sipariş listesi filtreleri */
  .order-filters,
  .filter-row,
  .filters-container {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .order-filters select,
  .order-filters input {
    width: 100% !important;
  }

  /* Sipariş detay tablosu scroll */
  .order-detail-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Sipariş durum badge */
  .order-status-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

/* ============================================
   15. TEKLİF SAYFASI
   ============================================ */
@media (max-width: 900px) {
  /* Teklif formu */
  .teklif-form {
    padding: 10px !important;
  }

  /* Teklif satır grid'i */
  .teklif-line-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   16. MÜŞTERİ LİSTESİ
   ============================================ */
@media (max-width: 900px) {
  /* Müşteri arama */
  .customer-search-area {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .customer-search-area input {
    width: 100% !important;
  }

  .customer-search-area button {
    width: 100% !important;
  }

  /* Müşteri kartları */
  .customer-card {
    padding: 12px !important;
  }

  /* Müşteri detay grid */
  .customer-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   17. GÖRÜŞMELER
   ============================================ */
@media (max-width: 900px) {
  .meeting-form {
    padding: 10px !important;
  }

  .meeting-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }

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

/* ============================================
   18. GÖREVLER
   ============================================ */
@media (max-width: 900px) {
  .task-board {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .task-column {
    min-width: 100% !important;
    width: 100% !important;
  }

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

/* ============================================
   19. SOSYAL (SERTCONNECT)
   ============================================ */
@media (max-width: 900px) {
  /* Post oluşturma */
  .social-post-create {
    padding: 12px !important;
  }

  .social-post-create textarea {
    min-height: 60px !important;
  }

  /* Post kartları */
  .social-post-card,
  .post-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Post aksiyonları */
  .post-actions,
  .social-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .post-actions button,
  .social-actions button {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================
   20. HEDEF DASHBOARD
   ============================================ */
@media (max-width: 900px) {
  /* Dashboard tab butonları container - yatay kaydırma */
  .dash-tabs-container,
  div:has(> .dash-tab-btn) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  div:has(> .dash-tab-btn)::-webkit-scrollbar {
    display: none;
  }

  .dash-tab-btn {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Dashboard özet kartları */
  .goal-summary-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Progress ring küçültme */
  .goal-progress-ring {
    width: 60px !important;
    height: 60px !important;
  }

  .goal-progress-percent {
    font-size: 14px !important;
  }

  /* Goal section header */
  .goal-section-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}

/* ============================================
   21. PUAN TABLOSU
   ============================================ */
@media (max-width: 900px) {
  /* Puan sıralama kartları tam genişlik */
  .puan-card,
  .puan-item,
  [class*="puan"] {
    padding: 12px !important;
  }

  /* Puan tablosu overflowu scroll */
  .puan-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   22. ŞİKAYETLER
   ============================================ */
@media (max-width: 900px) {
  .sikayet-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }

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

/* ============================================
   23. ANALİZLER
   ============================================ */
@media (max-width: 900px) {
  /* Chart container'ları tam genişlik */
  .chart-container,
  #chartContainer,
  [id*="chart"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  /* ApexCharts responsive fix */
  .apexcharts-canvas {
    width: 100% !important;
  }

  /* Analiz kartları */
  .analytics-card {
    padding: 12px !important;
  }

  .analytics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   24. KAMPANYALAR
   ============================================ */
@media (max-width: 900px) {
  .campaign-card {
    padding: 12px !important;
  }

  .campaign-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   25. BİLDİRİMLER
   ============================================ */
@media (max-width: 900px) {
  /* Bildirim dropdown */
  .notification-dropdown-global {
    position: fixed !important;
    left: 4% !important;
    right: 4% !important;
    width: 92vw !important;
    max-width: 92vw !important;
    top: 65px !important;
    transform: none !important;
    z-index: 210000 !important;
    max-height: 70vh !important;
    border-radius: 16px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .notification-dropdown.sidebar-dropdown {
    width: 90% !important;
    max-width: 90vw !important;
  }

  /* Bildirim item'lar daha büyük touch hedefi */
  .notification-item {
    min-height: 56px;
    padding: 12px !important;
  }
}

/* ============================================
   26. PWA INSTALL MODAL
   ============================================ */
@media (max-width: 900px) {
  .install-card {
    width: 92% !important;
    max-width: 380px !important;
    padding: 32px 24px !important;
  }

  .install-icon-wrapper {
    width: 80px !important;
    height: 80px !important;
  }

  .install-icon-wrapper img {
    width: 60px !important;
    height: 60px !important;
  }

  .install-title {
    font-size: 22px !important;
  }

  .install-desc {
    font-size: 14px !important;
  }

  .floating-install-btn {
    bottom: 80px !important;
    right: 16px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   27. İHRACAT TAKİP SAYFASI
   ============================================ */
@media (max-width: 900px) {
  .ihracat-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* İhracat tabloları scroll */
  .ihracat-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   28. BAĞLANTILAR (CONNECTIONS) SAYFASI
   ============================================ */
@media (max-width: 900px) {
  .connections-grid {
    grid-template-columns: 1fr !important;
  }

  /* Connection alert */
  .connection-alert {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }
}

/* ============================================
   29. GENEL YARDIMCI STİLLER
   ============================================ */
@media (max-width: 900px) {
  /* Flex row'ları wrap */
  .row,
  .flex-row,
  [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Geniş içerik overflow */
  pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    word-break: break-word;
  }

  /* Uzun metinler */
  .pageTitle {
    font-size: 18px !important;
    word-break: break-word;
  }

  /* Gizlenmesi gereken elemanlar */
  .topbar {
    display: none !important;
  }

  .subbar {
    display: none !important;
  }

  /* Tooltip'ler mobilde gizle */
  [title]:hover::after {
    display: none !important;
  }

  /* Performans monitörü gizle */
  #perf-monitor-container,
  .perf-monitor {
    display: none !important;
  }

  /* Scrollbar gizleme (horizontal) */
  ::-webkit-scrollbar {
    height: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }
}

/* ============================================
   30. KÜÇÜK MOBİL EKRANLAR (iPhone SE, vb.)
   ============================================ */
@media (max-width: 400px) {
  .glass-main {
    padding: 6px !important;
    padding-top: 68px !important;
    padding-bottom: 80px !important;
  }

  .container {
    padding: 0 4px !important;
  }

  /* Tab butonları daha küçük */
  .tabs .tab,
  .tabs button,
  .dash-tab-btn {
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* Kartlar */
  .card {
    padding: 10px !important;
  }

  /* Goal summary 1 sütun */
  .goal-summary-row {
    grid-template-columns: 1fr !important;
  }

  /* Font küçültme */
  body {
    font-size: 13px !important;
  }

  h1 {
    font-size: 20px !important;
  }

  h2 {
    font-size: 18px !important;
  }

  h3 {
    font-size: 16px !important;
  }

  /* Butonlar */
  .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Bildirim dropdown */
  .notification-dropdown-global {
    top: 60px !important;
    width: 96vw !important;
    left: 2% !important;
    right: 2% !important;
    max-width: 96vw !important;
  }
}

/* ============================================
   31. LANDSCAPE MOD (YATAY KULLANIM)
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
  /* Yatay modda bottom nav daha ince */
  .mobile-glass-nav {
    height: 50px !important;
  }

  .mobile-nav-item {
    padding: 4px 8px !important;
  }

  .mobile-nav-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-nav-item span {
    font-size: 9px !important;
  }

  /* Yatay modda header daha ince */
  .mobile-glass-header {
    height: 48px !important;
  }

  .glass-main {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }

  /* Modal'lar yatayda düzgün */
  .modal-content,
  .order-detail-content,
  .goal-modal-content {
    max-height: 100vh !important;
  }
}

/* ============================================
   32. iOS SAFE AREA (NOTCH / DYNAMIC ISLAND)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 900px) {
    .mobile-glass-header {
      padding-top: max(0px, env(safe-area-inset-top)) !important;
      height: calc(60px + env(safe-area-inset-top)) !important;
    }

    .glass-main {
      padding-top: calc(70px + env(safe-area-inset-top)) !important;
    }

    .mobile-glass-nav {
      padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
      height: calc(65px + env(safe-area-inset-bottom)) !important;
    }

    .glass-main {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* Modal alt kısım safe area */
    .order-actions-dropdown {
      padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================
   33. PWA STANDALONE MODE
   ============================================ */
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* Standalone'da seçilebilir input'lar */
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* ============================================
   34. DARK MODE DESTEK (İSTEĞE BAĞLI)
   ============================================ */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  .order-actions-dropdown {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .dropdown-item {
    color: #e5e7eb !important;
  }

  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }
}

/* ============================================
   35. TABPANEL (SAYFA KONTEYNER) MOBİL
   ============================================ */
@media (max-width: 900px) {
  .tabPanel,
  .page-container {
    padding: 8px !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* İç tab'lardaki tablo alanları */
  .tabPanel table,
  .page-container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tab panel içi grid'ler */
  .tabPanel .grid2,
  .tabPanel .grid3,
  .tabPanel .grid4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   36. EXCEL İÇE AKTARMA SAYFASI
   ============================================ */
@media (max-width: 900px) {
  .excel-upload-area,
  .excel-drop-zone {
    padding: 20px !important;
  }

  .excel-preview-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   37. SİPARİŞ ÖZEL BUTONLARI
   ============================================ */
@media (max-width: 900px) {
  /* Kebab menü trigger buttonu */
  .order-actions-menu .kebab-btn,
  .order-actions-menu > button:first-child {
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
  }

  /* Sipariş durumu butonları */
  .status-change-buttons,
  .siparis-durum-buttons {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .status-change-buttons button {
    width: 100% !important;
  }
}

/* ============================================
   38. PRINT GIZLEME (MOBİLDE BASKIYA GEÇİŞ)
   ============================================ */
@media print {
  .mobile-glass-header,
  .mobile-glass-nav,
  .mobile-hamburger,
  .glass-sidebar,
  .glass-overlay {
    display: none !important;
  }

  .glass-main {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================
   39. SCROLL & TOUCH ENHANCEMENTs
   ============================================ */
@media (max-width: 900px) {
  /* Pürüzsüz scroll tüm scroll alanları */
  .glass-sidebar,
  .modal-body,
  .goal-modal-body,
  .order-detail-content,
  .notification-list,
  .notification-dropdown-global {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }

/* overscroll-behavior bodyden kaldirildi - scroll zinciri serbest */
/* overscroll-behavior bodyden kaldirildi - scroll zinciri serbest */
/* overscroll-behavior bodyden kaldirildi - scroll zinciri serbest */
/* overscroll-behavior bodyden kaldirildi - scroll zinciri serbest */

  /* Daha kalın scrollbar'lar (touch-friendly) */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

/* ============================================
   40. DASHBOARD İLK SAYFA LAYOUT FIX
   ============================================ */
@media (max-width: 900px) {
  /* tabShell mobilde tam genişlik */
  #tabShell {
    width: 100% !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  /* Dashboard tab content alanı */
  .dash-content,
  [id*="dashSection"],
  [id*="dashContent"] {
    width: 100% !important;
    overflow-x: hidden;
  }

  /* Sipariş oluştur sayfası tüm konteyner */
  #orderFormArea,
  .order-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Tüm card konteyner'lar */
  .card-container,
  .cards-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   41. DETAYLI DEĞİŞİKLİKLER - ÖNEMLİ OVERRIDE
   ============================================ */
@media (max-width: 900px) {
  /* ohDocHead (Sipariş Detay Başlığı) */
  .ohDocHead {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ohCustRow {
    grid-template-columns: 1fr !important;
  }

  .ohFooter {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Inline style override - genişlik sınırlaması olan elemanlar */
  [style*="max-width: 1200px"],
  [style*="max-width:1200px"],
  [style*="max-width: 1100px"],
  [style*="max-width:1100px"],
  [style*="max-width: 1000px"],
  [style*="max-width:1000px"] {
    max-width: 100% !important;
  }

  /* Inline flex düzeltmeler */
  [style*="display: flex"][style*="gap: 20px"],
  [style*="display: flex"][style*="gap:20px"],
  [style*="display:flex"][style*="gap:20px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Fixed genişlikli elemanlar */
  [style*="width: 400px"],
  [style*="width:400px"],
  [style*="width: 500px"],
  [style*="width:500px"],
  [style*="width: 600px"],
  [style*="width:600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   37. MOBİL SEPET (CART) PROFESYONEL DÜZENLEMELERİ
   ============================================ */
@media (max-width: 768px) {

  /* Card-modern overflow fix - sepet kartlarının scroll'unun çalışması için */
  .card-modern {
    overflow: visible !important;
  }

  /* Card body containment kaldır */
  .card-modern-body {
    contain: none !important;
    overflow: visible !important;
  }

  /* Cart container scrollable yapılsın */
  .cart-cards-container {
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }

  /* Cart satırları tam genişlik */
  .cart-row {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cart input grid - 3 sütunlu responsive grid */
  .cart-input-grid,
  .cart-row-main div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid içindeki her alan */
  .cart-input-grid > div,
  .cart-row-main div[style*="grid-template-columns"] > div {
    min-width: 0 !important;
  }

  /* Grid başlık etiketleri okunur boyut */
  .cart-input-grid > div > div:first-child,
  .cart-row-main div[style*="grid-template-columns"] > div > div:first-child {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    opacity: 1 !important;
  }

  /* Grid input'lar touch-friendly boyut */
  .cart-input-grid input,
  .cart-input-grid select,
  .cart-row-main div[style*="grid-template-columns"] input,
  .cart-row-main div[style*="grid-template-columns"] select {
    font-size: 14px !important;
    min-height: 38px !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Net fiyat display daha büyük */
  .cart-input-grid > div > div[style*="color: #059669"],
  .cart-row-main div[style*="grid-template-columns"] > div > div[style*="color: #059669"] {
    font-size: 13px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* KG + Aktif son sütun tam genişlik */
  .cart-input-grid > div:last-child,
  .cart-row-main div[style*="grid-template-columns"] > div:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Ürün resmi küçült */
  .cart-product-image,
  .cart-row-main > div[style*="display: flex"] > div[style*="width: 80px"],
  .cart-row-main > div[style*="display: flex"] > div[style*="width: 60px"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  /* Gramaj bilgi satırı wrap */
  .cart-row-main > div[style*="background: #f0fdf4"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  /* Line edit row - sipariş düzenleme modu */
  .line-edit-row,
  .line-edit-row.cart-input-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .line-edit-row input,
  .line-edit-row select {
    font-size: 14px !important;
    min-height: 38px !important;
    padding: 6px !important;
  }

  .line-edit-row label {
    font-size: 10px !important;
  }

  /* Line edit row son sütun (toplam) tam genişlik */
  .line-edit-row > div:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Sipariş header flex wrap */
  .cart-row-main > div:first-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* Daha küçük ekranlar için (400px altı) */
@media (max-width: 400px) {

  /* 2 sütunlu grid */
  .cart-input-grid,
  .cart-row-main div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  .line-edit-row,
  .line-edit-row.cart-input-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Ürün resmi gizle küçük ekranlarda */
  .cart-product-image {
    display: none !important;
  }
}

/* ============================================
   38. MOBİL MODAL DÜZELTMELERİ
   ============================================ */
@media (max-width: 768px) {

  /* Sipariş/Teklif önizleme modalleri */
  #siparisOnizlemeModal > div,
  #teklifOnizlemeModal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  #siparisOnizlemeModal,
  #teklifOnizlemeModal {
    padding: 0 !important;
  }

  /* Modal body scroll */
  #siparisOnizlemeModal > div > div:nth-child(2),
  #teklifOnizlemeModal > div > div:nth-child(2) {
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  /* Modal header compact */
  #siparisOnizlemeModal h2,
  #teklifOnizlemeModal h2 {
    font-size: 18px !important;
  }

  /* Modal footer buttons stacked */
  #siparisOnizlemeModal > div > div:last-child,
  #teklifOnizlemeModal > div > div:last-child {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  #siparisOnizlemeModal > div > div:last-child .btn,
  #teklifOnizlemeModal > div > div:last-child .btn {
    flex: 1 !important;
    min-width: 120px !important;
    text-align: center !important;
  }

  /* Preview table responsive */
  .preview-table-mobile {
    min-width: 700px !important;
  }

  /* Sipariş detay modal tam ekran */
  .order-detail-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Tüm modal body alanları scroll */
  .order-detail-content > div {
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================
   39. MOBİL TABLO OPTİMİZASYONU
   ============================================ */
@media (max-width: 768px) {

  /* Global tablo min-width düşür */
  table {
    min-width: 0 !important;
  }

  /* Tablo wrapper scroll */
  .tableWrap,
  div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
  }

  /* Sipariş geçmişi tablosu */
  .table-modern-orders-hist {
    min-width: 700px !important;
  }

  /* Sipariş detay tablosu */
  .table-modern-order {
    min-width: 700px !important;
  }
}

/* ============================================
   40. MOBİL GENEL İYİLEŞTİRMELER
   ============================================ */
@media (max-width: 768px) {

  /* iOS input zoom engellemek için */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Dashboard kartları single column */
  .dashboard-grid,
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Complaints grid responsive */
  .complaints-grid {
    grid-template-columns: 1fr !important;
  }

  /* Action buttons touch-friendly */
  .action-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Notification dropdown */
  .notification-dropdown-global {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .notification-dropdown.sidebar-dropdown {
    overflow-y: auto !important;
    max-height: 70vh !important;
  }

  /* Form actions stacked */
  .form-actions {
    flex-direction: column !important;
  }

  /* Modern components responsive */
  .modern-card {
    padding: 12px !important;
  }

  .modern-page-header {
    padding: 14px !important;
  }

  .page-title {
    font-size: 18px !important;
  }

  /* Category chips horizontal scroll */
  .category-chips-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  /* Selection card list scroll fix */
  .selection-card-list {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 300px !important;
  }

  /* Info grid responsive */
  .info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter row responsive */
  .filter-row-search .form-field-modern {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Overscroll contain for modals */
  .modal[style*="flex"],
  .modal[style*="block"],
  [style*="position: fixed"][style*="overflow"] {
    overscroll-behavior: contain !important;
  }
}