/* Mobil (telefon) düzeni. app.css'ten SONRA yüklenir; yalnız dar ekranda etkindir, masaüstüne dokunmaz.
   Renkler mevcut değişkenlerden gelir; yeni renk yok. Mantıksal özellikler (inline/block) RTL için. */
@media (max-width: 820px) {
  /* ---- Üst çubuk: kompakt ---- */
  #app { --top-h: 48px; }
  header.top { min-height: 48px; height: auto; padding-inline: 10px; gap: 2px; }
  .top .brand { gap: 6px; }
  .top .brand img { height: 17px; width: auto; }
  .top .brand .ap-rozet, .top .brand > .ap-rozet, .top .brand select, .top .brand > span { display: none !important; }
  .top .ara-alan { flex: 1 1 auto; min-width: 38px; height: 38px; padding: 0 12px; justify-content: flex-start; }
  .top .ara-alan span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .ara-alan kbd { display: none; }
  .who button.link, .um-btn { width: 38px; min-width: 38px; height: 38px; }
  .um-btn { width: auto; min-width: 44px; }
  .yeni-btn { min-height: 34px; padding: 0 9px; }
  .yeni-btn > span { display: none; }
  .um-av { width: 26px; height: 26px; }

  /* ---- Alt sekme çubuğu: tek satır ---- */
  .mbar a, .mbar button { min-width: 0; padding: 6px 2px 5px; gap: 1px; font-size: 10.5px; line-height: 1.2; min-height: 52px; justify-content: flex-start; }
  .mbar a > span:not(.bdg), .mbar button > span { max-width: 100%; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; min-height: 2.2em; }
  .mbar svg { width: 21px; height: 21px; }
  #app main, .govde { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* Ana ekrana ekleme bandı: stili pwa.css'te (başka iş); burada dokunulmaz */

  /* ---- Sayfa başlığı ---- */
  .icerik > .pg-bas, header.pg-bas { padding-block: 8px 4px; padding-inline: 12px; gap: 8px; align-items: center; }
  .pg-bas-et { font-size: 10.5px; margin: 0; }
  .pg-bas h1 { font-size: 19px; line-height: 1.2; margin: 0; }
  .pg-yildiz { min-height: 32px; padding: 3px 9px; font-size: 12px; }
  .pg-sek { padding: 6px 12px 0; }
  .pg-sek a { padding: 8px 12px; font-size: 13px; }

  /* ---- Süzgeç düğmeleri ve araç çubukları ---- */
  .chips { gap: 6px; }
  .chip, #app[data-tasarim="agency"] .chip { min-height: 32px; padding: 4px 10px; font-size: 12.5px; display: inline-flex; align-items: center; }
  .tk-bar { gap: 6px; margin-bottom: 8px; }
  .tk-bar button, .tk-bar .ghost, .tk-bar select { min-height: 36px; }
  .tk-bar input[type=search], .inv-bar input[type=search], .list-bar input[type=search] { width: 100%; height: 40px; padding: 0 12px; }
  .tk-app, .gc-app, .oz-app, .crm-app { padding: 8px 10px 20px; }

  /* ---- KPI kartları ---- */
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .kpi { padding: 8px 10px; border-top-width: 3px; }
  .kpi span { font-size: 11.5px; }
  .kpi b { font-size: 18px; margin: 1px 0; }
  .kpi small { font-size: 11.5px; }
  .sgrid, .box .sgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sgrid > div { min-height: 0; padding: 8px 10px; }
  .sgrid > div span { font-size: 11.5px; }
  .sgrid b { font-size: 16px; }

  /* ---- Tablolar: kontrollü yatay kaydırma ---- */
  .tbl-x, .tk-app .cl, .crm-body #cl { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
  table.tk, table.mx, .ltab, .tbl { font-size: 12.5px; }
  table.tk th, table.tk td, .ltab th, .ltab td, .tbl th, .tbl td { padding: 7px 8px; }
  table.tk th, .ltab th, .tbl th { font-size: 11px; white-space: nowrap; }

  /* ---- Formlar: 16px yazı (iOS yakınlaşmasın), makul yükseklik ---- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select { font-size: 16px; min-height: 40px; padding: 6px 10px; }
  textarea { font-size: 16px; padding: 8px 10px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
  label { font-size: 13px; }
  .ctl { padding: 12px 12px; }
  .ctl input[type=number], .ctl #bb, .ctl #fBB { margin-top: 4px; padding: 6px 10px; }
  .dlg, .ik-dlg { padding: 14px; }
  button { min-height: 36px; }
  .btn-k, .ghost, .primary { min-height: 38px; }
}

@media (max-width: 400px) {
  .mbar a, .mbar button { font-size: 10px; }
  .pg-bas h1 { font-size: 18px; }
}


/* ---- Bugün ekranı: kartlar yana kaymak yerine 2 sütunda alt alta (app.css'teki kaydırmayı ezer) ---- */
@media (max-width: 820px) {
  .kk-kpi .rp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .kk-kpi .rp-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
  .kk-kpi .rp-card:nth-child(2n) { border-right: 0; }
  .kk-kpi .rp-card:last-child { border-bottom: 0; }
  .kk-kpi .rp-card:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ---- Telefonda tablolar kart olur (mobil-tablo.js hücrelere data-et yazar) ---- */
@media (max-width: 640px) {
  #main table.mt-kart, #main table.mt-kart tbody, #main table.mt-kart tr, #main table.mt-kart td { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  #main table.mt-kart { table-layout: auto; border-collapse: separate; border-spacing: 0; }
  #main table.mt-kart thead { display: none; }
  #main table.mt-kart tr { margin: 0 0 10px; padding: 6px 14px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 9%, transparent); }
  #main table.mt-kart tr.mt-tek { padding: 10px 14px; }
  #main table.mt-kart td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--navy) 6%, var(--line)); text-align: end; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  #main table.mt-kart td:last-child { border-bottom: 0; }
  #main table.mt-kart td:empty { display: none; }
  #main table.mt-kart td[data-et]::before { content: attr(data-et); flex: none; max-width: 44%; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); text-align: start; }
  #main table.mt-kart td[data-et=""]::before { display: none; }
  #main .tbl-x:has(> table.mt-kart) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
}


/* ---- Yazılar kutulara sığsın: uzun metin taşmak yerine alt satıra iner; kutular içeriğe göre uzar (telefon + iPad) ---- */
@media (max-width: 1100px) {
  .kpi, .rp-card, .ap-ana, .card, .box, .ay-card, .th-k, [class*="-card"], .chip, .tk-bar button, .tk-bar a, button, label, .help, small, h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
  .chip, .tk-bar button, button:not(.yeni-btn):not(.um-btn):not(.mnu-btn):not(.zil-btn) { max-width: 100%; white-space: normal; line-height: 1.25; }
  :where(.chip, .tk-bar button, button:not(.yeni-btn):not(.um-btn):not(.mnu-btn):not(.zil-btn)) { height: auto; }   /* özgüllük 0: sınıfla verilmiş sabit yükseklikler (44 px hedefler) ezilmez */
  .kpi b, .kpi .k-val, .rp-card b, .ap-ana b { font-size: clamp(16px, 4.6vw, 24px); line-height: 1.2; overflow-wrap: anywhere; }
  .kpi span, .rp-card span { line-height: 1.25; }
  input, select, textarea { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
  td, th { overflow-wrap: break-word; }
}
@media (max-width: 560px) {
  .top .ara-alan span { display: none; }
  .top .ara-alan { flex: none; width: 38px; padding: 0; justify-content: center; }
}

/* ---- Takvim ve benzeri tam genişlik ekranlar: iPad / telefonda kenara yapışmasın ---- */
@media (max-width: 1100px) {
  main.tv-app, main.sema-app { box-sizing: border-box; padding-inline: 10px; max-width: 100%; }
}


/* ---- Tablet (641-1100 px): tablo satırındaki eylem düğmeleri alt satıra bölünmez (yukarıdaki genel "yazılar sığsın" kuralı düğmeleri kırıyordu) ---- */
@media (min-width: 641px) and (max-width: 1100px) {
  .tk td.acts > button:not(.yeni-btn):not(.um-btn):not(.mnu-btn):not(.zil-btn), .tk td.acts .acts-more-w > button { white-space: nowrap; max-width: none; }
}

/* ---- Çift dokunma gecikmesi yok; iki parmak yakınlaştırma serbest (erişilebilirlik) ---- */
html { touch-action: manipulation; }
.sema-zoom { display: inline-flex; gap: 4px; align-items: center; }
.sema-zoom button { min-width: 40px; }
.sema-zoom #szFit { min-width: 56px; font-variant-numeric: tabular-nums; }
.face { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.face-draw { overflow: visible; }


/* =====================================================================================================
   Görünüm düzeltmeleri (4 Kasım 2026): M-01/03/06/10/12/21/28. Renk yok; yalnız yerleşim.
   ===================================================================================================== */

/* ---- M-01 / M-10: kart içi hücre = etiket + tek değer sarmalayıcısı (mobil-tablo.js .mt-v). Çok çocuklu hücreler yan yana sıkışmaz. ---- */
@media (max-width: 640px) {
  #main table.mt-kart td > .mt-v { flex: 1 1 0; min-width: 0; text-align: end; overflow-wrap: anywhere; }
  #main table.mt-kart td[data-et=""] { justify-content: flex-start; text-align: start; }
  #main table.mt-kart td[data-et=""] > .mt-v { text-align: start; }
  #main table.mt-kart td.acts { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; text-align: start; width: 100%; }
  #main table.mt-kart td.acts::before { display: none; }
  #main table.mt-kart td.acts > * { margin: 0; }
  #main table.mt-kart td.acts select[data-neden] { width: auto; min-width: 120px; }
  /* otomatik "⋯" menüsü kartta açık satır olarak gösterilir (telefonda tek dokunuş) */
  #main table.mt-kart .acts-auto { display: contents; }
  #main table.mt-kart .acts-auto > .acts-more { display: none; }
  #main table.mt-kart .acts-auto > .acts-menu, #main table.mt-kart .acts-auto > .acts-menu[hidden] { display: contents !important; }   /* genel [hidden] gizleme kuralını bilerek ezer: kartta eylemler hep açık */
  #main table.mt-kart .acts-auto .acts-menu button, #main table.mt-kart .acts-auto .acts-menu a { display: inline-flex; width: auto; align-items: center; min-height: 40px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
  #main table.mt-kart .cell-2, #main table.mt-kart .cell-trunc { display: block; max-width: none; white-space: normal; -webkit-line-clamp: unset; overflow: visible; text-overflow: clip; }
  #main table.mt-kart .by, #main table.mt-kart small.by { max-width: none; display: block; white-space: normal; -webkit-line-clamp: unset; overflow: visible; }
}

/* ---- M-06: Daireler listesi telefon/iPad: kart olmaz, kendi kutusunda yatay kayar; sayfa yüksekliğine kilitli değil ---- */
@media (max-width: 860px) {
  .list-app { height: auto; min-height: 0; }
  .list-wrap { max-height: calc(100vh - var(--top-h, 48px) - 190px); max-height: calc(100dvh - var(--top-h, 48px) - 190px); min-height: 240px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .ltab th:first-child, .ltab td:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--panel, #fff); }
  .ltab th:first-child { z-index: 3; background: var(--slate); }
}

/* ---- M-21: Envanter araç çubuğu telefonda tek satır, yatay kayar (5 satıra sarılmaz) ---- */
@media (max-width: 640px) {
  .inv-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 10px; }
  .inv-bar::-webkit-scrollbar { display: none; }
  .inv-bar > *, .inv-bar .chips { flex: none; }
  .inv-bar .chips { flex-wrap: nowrap; }
  .inv-bar input[type=search] { width: 160px; }
  .inv-bar button, .inv-bar .chip { white-space: nowrap; }
}

/* ---- M-12: dokunmatik cihazda girdi/seçim/metin kutusu 16 px (iOS odakta yakınlaşmasın); 20 ekranda 12-14 px kalmıştı ---- */
@media (pointer: coarse) and (max-width: 1400px) {
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), html body select, html body textarea { font-size: 16px; }
}

/* ---- Tablo hücresindeki düğmeler: "anywhere" kırma kuralı düğmeleri 1 harfe daraltıyordu (Daireler "Plan" düğmesi 30 px, satır 94 px) ---- */
@media (max-width: 1100px) {
  td button, td .chip, th button, .ltab button { overflow-wrap: normal; white-space: nowrap; min-width: max-content; }
}
.pg-bas h1[tabindex="-1"]:focus, #main[tabindex="-1"]:focus { outline: none; }