/* MOBİL / RESPONSIVE — telefon kullanılabilirliği */ /* ============================================================ */ @media (max-width: 900px) { /* Off-canvas sidebar + hamburger */ .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 80vw; max-width: 300px; transform: translateX(-100%); z-index: 1100; } .sidebar.open { transform: translateX(0); } .main-content { width: 100%; } .sidebar-toggle { display: flex; } .topbar { padding: 0 14px; } .breadcrumb { font-size: 14px; } /* Dar ekranda "PROJECTCRM /" öneki GİZLENİR: uygulama adı zaten sidebar logosunda yazıyor ve burada 110px yer kaplayıp aktif görünüm adını butonların altına itiyordu (2026-09-09, gerçek iPhone'da ölçüldü). */ #breadcrumb-parent, .breadcrumb-separator { display: none; } .dashboard-clock { display: none; } .agency-code-text { display: none; } /* ⚠️ Telefonda Ctrl tuşu YOK — rozet hem yanlış bilgi (§2.3) hem de 52px yer kaplayıp placeholder'ı kırpıyordu ("… tüm ka…"). */ .ga-tetik-kisayol { display: none; } } @media (max-width: 768px) { /* Modallar mobilde tam ekran sayfa */ .modal-overlay { align-items: stretch; } .modal-card { max-width: 100%; width: 100%; max-height: 100vh; height: 100%; border-radius: 0; } .modal-body { padding: 16px; } /* Form gridleri + modal içi inline gridler tek sütun */ .form-group-row, .form-group-three, .modal-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Filtre çubukları tek sütun */ .customer-filter-container, .filter-bar [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* iOS odak zoom'unu engelle + dokunma hedefi */ input, select, textarea { font-size: 16px !important; } .btn, .nav-link, input, select { min-height: 44px; } /* Tablolar yatay kaydırılabilir */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .crm-table th, .crm-table td { padding: 10px 12px; } /* View başlıkları dikey */ .view-header { flex-direction: column; align-items: stretch; gap: 12px; } /* 🔴 2026-08-02 (iOS Simulator'da ölçüldü): sayfa başlığındaki buton satırı `
` — inline stilde `flex-wrap` YOK, varsayılan `nowrap`. Müşteriler'de 3 buton 380px istiyor ama kapsayıcı 332px veriyor → "Yeni Müşteri Ekle"nin sağ kenarı 412px'te, yani ekranın (402px) DIŞINDA kalıp kırpılıyordu. `#app-view { overflow-x:hidden }` olduğu için kaydırıp ulaşmak da mümkün değildi. Portföy sayfası birebir aynı deseni kullanıyor (aynı risk). `flex-wrap` inline stilde OLMADIĞI için bu kural `!important`siz geçer; flex olmayan başlık div'inde ise etkisizdir (zararsız). */ .view-header > div { flex-wrap: wrap; } /* Bölge Analizleri metrik grid → tek sütun (dar ekranda taşmasın) */ .metrics-grid-three { grid-template-columns: 1fr !important; } /* Portföy (kişisel) liste kartı — dikey düzen. Yüksek özgüllük (.portfolio-list-pane ...) ile @480 kuralını kesin geçer; sabit görsel yüksekliği (Safari aspect-ratio quirk'ünden kaçınır); .card'ın 24px padding'i kaldırılır; detaylar zorla görünür. */ /* KART = BLOCK (flex DEĞİL). iOS Safari flex içinde (replaced element) boyutunu inatla kendi hesaplayıp ezdiği için flex tamamen bırakıldı; block düzende görsel height:170px güvenilir uygulanır. */ .portfolio-list-pane .portfolio-card { display: block !important; height: auto !important; padding: 0 !important; overflow: hidden; } .portfolio-list-pane .portfolio-image { display: block !important; width: 100% !important; height: 170px !important; min-height: 170px !important; /* iOS replaced-element quirk'ine karşı kilit */ max-height: 170px !important; aspect-ratio: auto !important; object-fit: cover; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important; } .portfolio-list-pane .portfolio-details { display: block !important; padding: 14px !important; width: 100%; } .portfolio-list-pane .portfolio-title { max-width: 100% !important; } /* 🔴 2026-08-02 (iOS Simulator'da bulundu): kartlarda YALNIZ FOTOĞRAF görünüyor, başlık/fiyat/konum HİÇ yoktu. Sebep kartta değil GRID'de: views.css `.portfolio-grid` masaüstü için `max-height: calc(100vh - 250px)` + `overflow-y:auto` ile İÇ İÇE bir kaydırma kutusu kuruyor. Yükseklik DEFINITE olunca `grid-auto-rows: auto` satırları o sınıra sığdırılıyor: 3 kartta (624 − 40 gap) / 3 = 194,66px — oysa mobil kartın doğal boyu 324px. Kartın `overflow:hidden`'ı da taşan 130px'i (tüm metin bloğunu) kırpıyordu. Masaüstünde görünmüyor çünkü orada kart zaten sabit 180px yatay düzende. Mobilde iç kaydırma kutusu ZATEN yanlış desen — sayfanın kendisi kaysın. ⚠️ Aynı sınıf daha önce iki kez çıktı: Anımsatıcılar `flex:1 1 0` → 0px (2026-07-10) ve Bölge brifingi `max-height:520px` kesmesi (2026-07-17). Yeni bir iç kaydırma kutusu eklerken dar ekranda ölç. */ .portfolio-list-pane .portfolio-grid { max-height: none !important; overflow-y: visible !important; padding-right: 0 !important; } /* 🔴 2026-08-02 (iOS Simulator'da ölçüldü): Anımsatıcılar → Takvim modunda "Gün" düğmesi ekranın DIŞINDA kalıp erişilemiyordu; etkinlik saatleri de kırpılıyordu ("09:00" → "09"). İKİ ayrı sebep vardı: ① GENİŞLİK İSRAFI — iç içe iki 24px padding (.reminders-container + .reminders-list-col) 402px ekranda 96px, yani ekranın ~%24'ünü yiyordu; takvime yalnız 234px kalıyordu. Mobilde 12/14px yeterli. ② ARAÇ ÇUBUĞU SARMIYORDU — FullCalendar `.fc-toolbar` flex/nowrap; 298px istiyor, kutuya sığmayınca `.reminders-list-container`ın `overflow-x:hidden`'ı 64px'i kırpıyordu (kaydırma da yok → ulaşılamaz). ⚠️ Yalnız padding'i azaltmak YETMEZDİ (234 → ~282, çubuk yine 298 istiyor); yalnız sarma da çubuğu gereksiz yere üç satıra bölerdi. İkisi birlikte. */ .reminders-container { padding: 12px; } .reminders-list-col { padding: 14px; } .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; } .fc .fc-toolbar-title { font-size: 1.05rem; } /* Sayfa sağa kaymasın */ #app-view { overflow-x: hidden; } } /* Lokasyon (Bölge Analizleri) 2-panel düzeni — tek sütuna düşerken grid/flex çocukları küçülemediği için metin sağdan kesiliyordu. min-width:0 = içerik sarsın. */ @media (max-width: 1024px) { .new-radar-layout, .new-radar-layout > *, .locations-left-panel, .locations-right-panel, .chart-pane, #location-details-pane { min-width: 0; } .new-radar-layout { overflow-x: hidden; } } /* Dashboard kartları hiçbir genişlikte sütunlarından geniş olamaz. Eşleşme satırlarındaki nowrap başlıklar grid sütununun minimum genişliğini şişiriyordu: mobilde bütün kartlar sağdan kesiliyor (iOS'ta en belirgin), 1280px masaüstünde bile sağ sütun 864px'e taşıp sol sütunu eziyordu — canlı Playwright ölçümüyle doğrulandı. min-width:0 = içerik daralabilir (radar/lokasyon düzeltmesiyle aynı desen; media query YOK, her genişlikte). */ .dashboard-grid, .dashboard-grid > *, .dashboard-grid .card, .matchmaking-list, .matchmaking-list .match-item, .markets-list, .activity-list { min-width: 0; max-width: 100%; } /* ───────────────────────────────────────────────────────────────────────── AI EŞLEŞTİRME SATIRI — MOBİLDE BAŞLIK OKUNMUYORDU (2026-08-05, Musa bildirdi) Ölçüm (402px, iPhone 17): satır 276px = [%88 rozeti 52] + [orta 121] + [Detay 57]. Ortanın içinde "4 uygun müşteri" rozeti 96px, BAŞLIĞA 18px kalıyordu — başlığın gerçek genişliği 248px, yani yalnız **%7'si** görünüyordu ("M..."). Sebep: rozet `flex-shrink:0` (hiç küçülmez) ve başlık ellipsis'li → daralan ne varsa hep başlıktan gidiyordu. Çözüm: dar ekranda satır kata çıkar — 1. satır: [%88] [başlık ......................] 2. satır: [rozet] (yalnız çoklu eşleşmede) 3. satır: [meta ....................] [Detay] ⚠️ İlk denemede Detay KENDİ BAŞINA 4. satırdaydı ve üstünde boşluk kalıyordu (Musa bildirdi: "detay kısmı sanki biraz aşağıda kalmış"). Detay'ı meta ile aynı satıra indirmek için `.match-main` sarmalayıcısı ŞEFFAFLAŞTIRILIR (display:contents) → başlık satırı ve meta, doğrudan `.match-item`'ın flex çocuğu olur; Detay da meta'nın yanına yerleşir. Tek eşleşmeli satırda rozet hiç basılmadığı için yerleşim kendiliğinden 2 satıra iner. ⚠️ Masaüstü ETKİLENMEZ (kural @768 içinde; orada satır zaten geniş). */ @media (max-width: 768px) { /* ⚠️ `align-items:center` inline stilde → !important şart. Çok satırlı satırda ortalama, skor rozetini dikeyde ortada bırakıp solda büyük bir boşluk oluşturuyordu; üstten hizalama rozeti başlığın yanına getirir. */ .matchmaking-list .match-item { flex-wrap: wrap; align-items: flex-start !important; } /* ⚠️ Sarmalayıcı şeffaf: çocukları doğrudan flex öğesi olur (dashboard sıralamasındaki `display:contents` deseninin aynısı) */ .matchmaking-list .match-item .match-main { display: contents; } /* Başlık satırı 1. satırın kalanını kaplar → meta ve Detay alta iner */ .matchmaking-list .match-item .match-title-row { flex-wrap: wrap; flex: 0 0 calc(100% - 62px); } /* Rozet başlığın ALTINA düşer; başlık tüm satırı kullanır */ .matchmaking-list .match-item .match-title { flex-basis: 100%; } /* ⚠️ basis 0 ŞART: `auto` olsaydı nowrap meta'nın içerik genişliği satırı doldurur ve Detay yine tek başına alta düşerdi */ /* align-self: satır yüksekliğini Detay butonu (44px dokunma hedefi) belirliyor; ortalanmazsa 15px'lik meta metni butonun üst kenarına yapışık duruyor */ .matchmaking-list .match-item .match-meta { flex: 1 1 0; min-width: 0; align-self: center; } .matchmaking-list .match-item .btn-match-detail { margin-left: auto; } } /* ── Kanban aşama kısayolu — dokunma hedefi (2026-09-13) ──────────────────── Buton masaüstünde 34px; 375px'te ölçüldü ve iOS'un 44pt eşiğinin ALTINDA kalıyordu. Bu ekranda kısayol TEK ilerletme yolu (sürükle-bırak dokunmadan hiç tetiklenmiyor), yani isabet ettirilememesi özelliği fiilen yok eder. ⚠️ `pointer: coarse` ile ayrıldı, `max-width` ile DEĞİL: dokunmatik bir tablet geniş olabilir, fare kullanan dar pencere ise 34px'te kalmalı (§2.15'in aynı ayrımı: dokunmatikte davranış farkı ekran genişliğinden değil GİRDİ TÜRÜNDEN gelir). */ @media (pointer: coarse) { .kanban-ilerlet { min-height: 44px; font-size: 12px; } .toast-eylem { min-height: 44px; padding: 10px 16px; } } /* Yeni Mesaj düğmesi ve rehber satırları — dokunmatikte hedef boyutu (§2.15). Ölçü GENİŞLİĞE değil GİRDİ TÜRÜNE bağlı: masaüstü dar pencerede küçük kalır. */ @media (pointer: coarse) { .messages-yeni-btn { min-height: 44px; } .ym-kisi-satir, .ym-ilan-satir { min-height: 40px; } } /* KVKK Paket 1 (2026-09-25) — iPhone Safari'de ölçüldü: ① uyarı şeridi (geçici şifre şeridiyle ORTAK sınıf) ekranın iki kenarına yapışıktı ve kalıcı durduğu için ekranın ~%14'ünü alıyordu → kenar boşluğu + dar ekranda yalnız başlık ve bağlantı (`.serit-uzun` gizlenir); ② beyan ekranında ekran kenarı + kart dolgusu çift boşluk yapıyordu. */ @media (max-width: 768px) { .temp-pw-banner { margin: 8px 12px 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; } .serit-uzun { display: none; } .beyan-ekrani { padding: 12px 0 32px; } .beyan-kart { padding: 22px 16px; border-radius: var(--border-radius-md); } }