/* mobile.css — mobil katman (birlesik derleme, elle duzenleme: final/css/ altindan) */
/* icerik: 00-shell.css + 20-mail.css + 30-ops.css + 40-admin.css */

/* ==== 00-shell.css ==== */
/* 00-shell.css — MOBIL KABUK + GLOBAL (<=768px): drawer/bottom-nav/topbar + global dokunma/tasma/modal-sheet kurallari; masaustu >=769px etkilenmez (tek istisna: yeni .mob- siniflarinin varsayilan gizlenmesi) */

/* ============================================================
 * TOP-LEVEL ISTISNA — sadece YENI .mob- onekli siniflar.
 * JS'in bottom-nav'a enjekte ettigi Mail sekmesi masaustunde ve
 * 769-900px tablet araliginda GIZLI kalir (mevcut davranis korunur).
 * ============================================================ */
#bottom-nav a.mob-only { display: none; }

/* ============================================================
 * MOBIL — <=768px
 * ============================================================ */
@media (max-width: 768px) {

  /* ---- 0) Sayfa duzeyinde yatay scroll YASAK ----
   * overflow-x:clip scroll-container olusturmaz -> sticky topbar/period-bar bozulmaz.
   * (clip'i tanimayan eski tarayici kurali yok sayar; zarar vermez.) */
  html, body { overflow-x: clip; }

  /* ---- 1) DRAWER (hamburger sidebar) ----
   * Karartma + dis-tik kapatma app-shell.css:336 + app.js:178-189'da ZATEN var.
   * Eksik: backdrop pointer-events:none oldugundan karartmaya tiklayinca tik
   * ALTTAKI elemana geciyordu (yanlislikla link/buton tetiklenebilir).
   * auto yapinca tik body'yi hedefler -> app.js'in mevcut document-click
   * handler'i draweri kapatir, alttaki eleman korunur. */
  body.sidebar-open::before { pointer-events: auto; }
  /* Drawer acikken arka sayfa kaydirmasin */
  body.sidebar-open { overflow: hidden; }

  /* Drawer ici dokunma hedefleri >=44px */
  #sidebar .sidebar-nav a { height: auto; min-height: 44px; font-size: 15px; }
  #sidebar .sidebar-nav a svg { width: 18px; height: 18px; }
  #sidebar .sidebar-user-btn { min-height: 48px; }
  #sidebar .sidebar-user-menu a, #sidebar .sidebar-user-menu button { min-height: 44px; font-size: 14px; }
  /* Kullanici menusu uzunsa drawer icinde tasmasin */
  #sidebar .sidebar-user-menu { max-height: 60vh; overflow-y: auto; }

  /* ---- 2) BOTTOM-NAV ----
   * Mevcut statik 6 ikon; JS (10-shell.part.js) rol filtresini koruyarak
   * Mail'i ekler (.mob-only) ve yeterli sekme kaliyorsa fulfillment+stock'u
   * gizler (.mob-hide) -> hedef 5 sekme: dashboard/imalat/kargo/mail/yusuf. */
  #bottom-nav a { min-width: 44px; min-height: 44px; }
  #bottom-nav a.mob-only { display: flex; }
  #bottom-nav a.mob-hide { display: none; }
  /* iPhone home-indicator payi (env desteklenmezse mevcut 4px kalir) */
  #bottom-nav { padding: 4px 0 calc(4px + env(safe-area-inset-bottom)) !important; }
  #main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Iframe sayfalari (yusuf/tokens/...) bottom-nav + safe-area payi */
  .iframe-wrapper { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
  /* Terminal tam ekran niyeti app-shell:443'te vardi ama :399'un !important'ina
   * yeniliyordu (56px olu serit). Mobilde niyeti geri getir. */
  body[data-page="terminal"] .iframe-wrapper { bottom: 0 !important; }

  /* ---- 3) TOPBAR ----
   * 640px'teki cip gizleme/ellipsis kurallari 768'e genisletildi
   * (641-768 araligi acikta kaliyordu). */
  #topbar { gap: 8px; }
  #topbar .sys-stats-chip, #sys-stats-chip { display: none !important; }
  .topbar-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-pill .ws-label { display: none; }
  .ws-pill { padding: 5px 8px; }
  /* Dokunma hedefleri */
  #hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .ws-refresh { width: 44px; height: 44px; }
  #topbar .topbar-right .btn-icon { width: 40px; height: 40px; }

  /* ---- 4) GLOBAL FORM: iOS zoom onlemi (>=16px) ----
   * app-shell.css:293'un "14px !important"ini yenmek icin !important +
   * daha yuksek ozgulluk sart. Kiosk (POS) ve onay (.fapage, zaten
   * mobile-first kendi olcusu var) sayfalari MUAF. */
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=text],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=number],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=date],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=search],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=email],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=password],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=tel],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input[type=url],
  body:not([data-page="kiosk"]):not([data-page="onay"]) input:not([type]),
  body:not([data-page="kiosk"]):not([data-page="onay"]) select,
  body:not([data-page="kiosk"]):not([data-page="onay"]) textarea {
    font-size: 16px !important;
  }

  /* ---- 5) GLOBAL TASMA GUARD'LARI ---- */
  body:not([data-page="kiosk"]) #main img { max-width: 100%; height: auto; }
  /* Genis tablo/icerik kendi kabinda kayar, sayfayi tasirmaz
   * (app-shell 640px kurali 768'e genisletildi; dense-scroll'un <=900
   * "overflow:visible" serbestligi mobilde x ekseninde geri baglanir). */
  #main .panel, #main .table-wrap, #main .dense-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Grafik kapsayicilari: SVG/canvas panel disina tasmasin.
   * (Heatmap gibi min-width'li grafikler etkilenmez: CSS'te min-width,
   * max-width'i yener; kendi .cx-hm kabinda kaymaya devam eder.) */
  body:not([data-page="kiosk"]) #main svg,
  body:not([data-page="kiosk"]) #main canvas { max-width: 100%; }
  .chart-wrap { max-width: 100%; overflow-x: auto; }

  /* Liste satirlari dokunma hedefi */
  #main .list-item { min-height: 44px; }
  .search-results .item { min-height: 44px; display: flex; align-items: center; }

  /* Toast'lar bottom-nav'in ustune */
  #toast-container { bottom: calc(70px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }
  #toast-container .toast { max-width: 100%; }

  /* ---- 6) MODAL/POPUP KALIPLARI -> tam ekran / alttan sheet ----
   * Kesif listesindeki ORTAK kaliplar. KIOSK modallari (.ksk-*, .kshi-*) HARIC.
   * Sayfa CSS'leri 900px'te cogunu zaten %100 yapiyor; burada tamamlanir. */

  /* Sistem restart onayi -> alttan sheet */
  .sys-modal-backdrop { align-items: flex-end; padding: 0; }
  .sys-modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto;
               padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .sys-modal-actions button { min-height: 44px; flex: 1; }

  /* Sistem log drawer -> tam ekran */
  .sys-drawer { width: 100vw; }

  /* Cmd+K arama -> ustten tam genislik */
  .search-overlay { padding-top: 0; }
  .search-box { width: 100%; max-width: 100%; border-radius: 0 0 12px 12px; }

  /* Yeni musteri modali (app.js inline stiller -> !important sart) -> alttan sheet */
  #customer-modal-bg { align-items: flex-end !important; padding: 0 !important; }
  #customer-modal-bg > div { max-width: 100% !important; border-radius: 16px 16px 0 0 !important;
                             max-height: 88vh; overflow-y: auto;
                             padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important; }

  /* Sag drawer'lar -> tam genislik garantisi (sayfa css @900 zaten yapiyor; guvence) */
  .cp-drawer, .op-drawer { max-width: 100%; }
  .ima-panel, .krg-panel { width: 100%; }

  /* Stok numpad paneli -> alttan sheet */
  .stk-overlay { align-items: flex-end; padding: 0; }
  .stk-panel { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh;
               padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

  /* Mail composer -> tam ekran sheet (topbar altinda) */
  #mail-composer-modal { left: 0; right: 0; }
  .comp-modal { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0;
                height: calc(100vh - var(--shell-top-h, 52px));
                height: calc(100dvh - var(--shell-top-h, 52px));
                max-height: calc(100dvh - var(--shell-top-h, 52px)); }
}

/* ============================================================
 * KUCUK TELEFON — <=480px
 * ============================================================ */
@media (max-width: 480px) {
  #topbar { padding: 0 10px !important; gap: 6px; }
  /* 5 sekme dar ekranda sigsin (44px hedef korunur) */
  #bottom-nav a { padding: 10px 6px !important; }
  /* Drawer dar ekranda tasmasin */
  #sidebar { width: min(260px, 85vw); }
  /* Sheet'ler biraz daha yer kazansin */
  .sys-modal, .stk-panel { max-height: 92vh; }
}

/* ==== 20-mail.css ==== */
/* 20-mail.css — MOBIL MAIL (<=768px): Gmail liste gorunumu (harf avatar), iki-ekran okuma akisi (body.mob-mail-reading), geri oku (.mob-back), compose FAB (.mob-fab); masaustu etkilenmez (tek istisna: yeni .mob- siniflarinin varsayilan display:none gizlenmesi) */

/* ============================================================
 * TOP-LEVEL ISTISNA — yalniz YENI .mob- onekli elemanlar.
 * 20-mail.part.js'in enjekte ettigi geri oku / FAB / harf avatari
 * masaustunde ve 769-900px araliginda GIZLI kalir.
 * ============================================================ */
.mob-back { display: none; }
.mob-fab { display: none; }
.mob-av { display: none; }

/* ============================================================
 * MOBIL — <=768px
 * ============================================================ */
@media (max-width: 768px) {

  /* ---- 0) Yerlesim: tek kolon + iki-ekran gecisi ----
   * mail-page.css@900 .mail-sidebar/.mail-center'i display:none yapip
   * JS'in HIC eklemedigi .show-list/.show-view siniflarina birakiyordu
   * (mobilde liste hic gorunmuyordu — bilinen kirik nokta).
   * Burada: varsayilan = LISTE; body.mob-mail-reading = OKUMA tam ekran.
   * .mail-center display'de kalir (liste scroll konumu korunur), okuma
   * paneli uzerine absolute biner. mail-page.js DEGISMEDI. */
  body[data-page="mail"] .mail-shell { grid-template-columns: 1fr; position: relative; }
  body[data-page="mail"] .mail-sidebar { display: none; }
  body[data-page="mail"] .mail-center { display: flex; border-left: none; border-right: none; }
  body[data-page="mail"] .mail-right { display: none; }
  body[data-page="mail"].mob-mail-reading .mail-right {
    display: flex; position: absolute; inset: 0; z-index: 20; /* .mail-bulk-bar (z:10) ustune */
    background: var(--surface);
  }

  /* Yukseklik: @900 kurali sabit 56px nav varsayiyordu; iPhone home-indicator
   * (safe-area) payi eklenmezse liste dibi nav altinda kaliyor. dvh = iOS adres
   * cubugu dalgalanmasi. env() tanimayan tarayici satiri atar, @900 kurali kalir. */
  body[data-page="mail"] .mail-app {
    height: calc(100vh - var(--shell-top-h, 52px) - 56px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--shell-top-h, 52px) - 56px - env(safe-area-inset-bottom, 0px));
  }

  /* ---- 1) Gmail tarzi liste satiri (mevcut DOM, yalniz CSS uyarlamasi) ---- */
  body[data-page="mail"] .mail-thread-item { min-height: 64px; padding: 8px 12px 8px 10px; gap: 10px; }
  /* Checkbox gizli — secim, harf avatarina dokununca (20-mail.part.js mevcut
   * checkbox'i programatik tetikler; toggleSel sozlesmesi degismedi). */
  body[data-page="mail"] .mail-thread-item > input[type=checkbox] { display: none; }

  /* Renkli harf avatari (.mob-av JS dekoru; renkler YALNIZ mevcut tokenlar) */
  body[data-page="mail"] .mail-thread-item .mob-av {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-full);
    align-self: center; flex-shrink: 0; position: relative;
    font-weight: 700; font-size: 16px; color: var(--text-inverse);
    user-select: none; -webkit-user-select: none;
  }
  .mob-av-c0 { background: var(--primary); }
  .mob-av-c1 { background: var(--success); }
  .mob-av-c2 { background: var(--warning); }
  .mob-av-c3 { background: var(--info); }
  .mob-av-c4 { background: var(--danger); }
  .mob-av-c5 { background: var(--primary-dark); }
  /* Toplu secimde avatar onay isaretine doner (Gmail davranisi) */
  body[data-page="mail"] .mail-thread-item.selected .mob-av::after {
    content: "\2713"; position: absolute; inset: 0; border-radius: var(--radius-full);
    background: var(--primary); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }

  /* Yildiz saga tasinir (Gmail), dokunma hedefi buyur — yildiz MANTIGI (K11 dahil) degismedi */
  body[data-page="mail"] .mail-thread-item .mail-star {
    order: 2; align-self: center; width: 40px; height: 44px;
    justify-content: center; flex-shrink: 0; margin-right: -6px;
  }

  /* Gonderen belirgin; okunmamis kalin (mevcut .unread kurali korunur, burada pekistirilir) */
  body[data-page="mail"] .mail-thread-item .mail-thread-from { font-size: 14.5px; font-weight: 500; color: var(--text); }
  body[data-page="mail"] .mail-thread-item.unread .mail-thread-from { font-weight: 700; }
  /* Konu + onizleme tek satir (mevcut .mail-thread-line2 ellipsis mekanigi) */
  body[data-page="mail"] .mail-thread-item .mail-thread-line2 { font-size: 13px; margin-top: 2px; }
  /* Sagda saat; okunmamiste renkli+kalin (Gmail) */
  body[data-page="mail"] .mail-thread-item .mail-thread-date { font-size: 12px; visibility: visible; }
  body[data-page="mail"] .mail-thread-item.unread .mail-thread-date { color: var(--primary); font-weight: 700; }
  /* Hover aksiyon butonlari dokunmatikte anlamsiz — tarih HEP gorunur
   * (mail-page.css:149-150 hover kurallarini esit ozgullukte sonradan-yukleme ezer) */
  body[data-page="mail"] .mail-thread-item .mail-thread-actions { display: none; }

  /* Liste basligi + toplu bar + arama: dokunma hedefleri */
  body[data-page="mail"] .mail-list-header { height: 48px; }
  body[data-page="mail"] .mail-list-refresh { width: 44px; height: 44px; }
  body[data-page="mail"] .mail-bulk-bar { height: 48px; }
  body[data-page="mail"] .bulk-actions button { width: 44px; height: 44px; }
  body[data-page="mail"] .mail-search-row { padding: 8px 12px; }
  body[data-page="mail"] .mail-search-box { height: 44px; }
  body[data-page="mail"] .mail-search-input { font-size: 16px; } /* iOS zoom (00-shell globali de kapsar) */
  body[data-page="mail"] .mail-search-clear { width: 40px; height: 40px; }

  /* ---- 2) Okuma ekrani (tam ekran overlay) ---- */
  /* Solda .mob-back'e yer birak; butonlar 44px */
  body[data-page="mail"] .mail-view-toolbar { height: 52px; padding: 0 8px 0 56px; }
  body[data-page="mail"] .mail-view-toolbar button { width: 44px; height: 44px; }
  body[data-page="mail"] .mail-view-header { padding: 10px 14px 8px; }
  body[data-page="mail"] .mail-view-subject { font-size: 17px; }
  body[data-page="mail"] .mail-view-body { padding: 10px 10px 16px; }
  body[data-page="mail"] .mail-msg { padding: 10px 12px; }
  /* Genis mail HTML'i (tablolu e-postalar) kendi kabinda kayar, sayfayi tasirmaz */
  body[data-page="mail"] .mail-msg-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sabit geri oku — yalniz okuma modunda gorunur (JS enjekte eder) */
  body[data-page="mail"].mob-mail-reading .mob-back {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: var(--shell-top-h, 52px); left: 0;
    width: 52px; height: 52px; z-index: 70;
    background: var(--surface); color: var(--text);
    border: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    cursor: pointer; padding: 0;
  }
  body[data-page="mail"].mob-mail-reading .mob-back:active { background: var(--surface-active); }

  /* ---- 3) Compose FAB (sag alt, bottom-nav ustunde) ---- */
  body[data-page="mail"] .mob-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: var(--radius-full);
    background: var(--primary); color: var(--text-inverse);
    border: none; box-shadow: var(--shadow-lg); cursor: pointer;
    z-index: 70; padding: 0; /* toast(90) alti, bottom-nav(60) ustu; composer(9999) FAB'i orter */
  }
  body[data-page="mail"] .mob-fab:active { background: var(--primary-hover); }
  body[data-page="mail"].mob-mail-reading .mob-fab { display: none; } /* okumada Gmail gibi gizli */

  /* ---- 4) Composer tamamlama ----
   * Tam ekran boyut 00-shell.css'te (satir 139-144) yapildi; input 16px globali
   * de orada. Burada yalniz dokunma hedefleri + safe-area. */
  body[data-page="mail"] .comp-row { min-height: 48px; }
  body[data-page="mail"] .comp-row .mail-ac { left: 0; } /* kisi onerisi tam genislik */
  body[data-page="mail"] .comp-cc-toggle { min-height: 40px; padding: 8px 12px; }
  body[data-page="mail"] .comp-send { min-height: 44px; padding: 10px 24px; }
  body[data-page="mail"] .comp-polish { min-height: 44px; }
  body[data-page="mail"] .comp-attach-btn { width: 44px; height: 44px; }
  body[data-page="mail"] .comp-right button { min-width: 44px; min-height: 44px; }
  body[data-page="mail"] .comp-actions-top button { min-width: 44px; min-height: 44px; }
  body[data-page="mail"] .comp-footer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
 * KUCUK TELEFON — <=480px
 * ============================================================ */
@media (max-width: 480px) {
  body[data-page="mail"] .mail-thread-item { padding: 8px 10px 8px 8px; gap: 8px; }
  body[data-page="mail"] .mail-thread-item .mob-av { width: 38px; height: 38px; font-size: 14px; }
  body[data-page="mail"] .mail-thread-subject { max-width: 58%; } /* dar ekranda onizlemeye nefes */
  body[data-page="mail"] .mail-view-body { padding: 8px 8px 14px; }
}

/* ==== 30-ops.css ==== */
/* 30-ops.css — BUILDER 4: operasyon sayfalari (imalat/kargo/cargo/fulfillment/orders/stok/stock) mobil <=768px duzeni; masaustu etkilenmez, tum kurallar width-tabanli media bloklarinda. */

@media (max-width: 768px) {

  /* ================================================================
   * 1) KANBAN KOLONLARI -> TEK SUTUN ALT ALTA (imalat + kargo board)
   * Mevcut @900 bloklari grid konteynerine "flex-direction:column"
   * yaziyordu (grid'de etkisiz) -> kolonlar 230-250px minmax ile yatay
   * tasiyordu. Row-flow + tek kolonla alt alta dizilir; mevcut
   * accordion JS (col-head click, innerWidth<=900) aynen calisir.
   * ================================================================ */
  .ima-board, .krg-board {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: 10px;
  }
  .ima-col, .krg-col { max-height: none; }
  /* Accordion basligi = dokunma hedefi */
  .ima-col-head, .krg-col-head { min-height: 44px; align-items: center; }

  /* KPI cipleri kendi seridinde yatay kayar (mevcut); dokunma hedefi buyut */
  .ima-kpi-chip, .krg-kpi-chip { min-height: 44px; }

  /* Toolbar: wrap zaten var; hedef boyutlari + iOS zoom onlemi */
  .ima-search, .krg-search { font-size: 16px; }
  .ima-seg { flex-wrap: wrap; }
  .ima-seg button, .krg-seg button { min-height: 44px; padding: 10px 14px; }
  .ima-btn, .krg-btn { min-height: 44px; }
  .ima-mini, .krg-mini { min-height: 44px; min-width: 48px; }

  /* Imalat drawer formu: 16px alti input iOS'ta zoom yapar */
  .ima-field input, .ima-field select, .ima-field textarea { font-size: 16px; }
  .ima-part-del { min-height: 44px; }

  /* ================================================================
   * 2) SIPARISLER + SIPARIS MERKEZI (orders / fulfillment) TABLOLARI
   * Karar: kart donusumu JS/DOM istedigi icin YAPILMADI; kapsayici
   * yatay scroll cozumu secildi (kesif raporu onerisi).
   * ================================================================ */
  /* FC_STYLE (#main icine enjekte edilen <style>, mobile.css'ten SONRA
   * gelir) .fc-page .op-table-wrap'i overflow:visible yapip sayfa-duzeyi
   * yatay tasma uretiyordu. Daha yuksek ozgullukle (body[attr] + 2 sinif)
   * kapsayici scroll geri verilir. */
  body[data-page="fulfillment"] .fc-page .op-table-wrap {
    overflow: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page="orders"] .op-table-wrap { -webkit-overflow-scrolling: touch; }

  /* Onemli kolon one cikar: musteri hucresi sarabilsin (nowrap kalirsa
   * dar ekranda tablo gereksiz genisler), digerleri nowrap kalir */
  body[data-page="orders"] .op-table td.op-cust,
  body[data-page="fulfillment"] .op-table td.op-cust { white-space: normal; min-width: 140px; }

  /* Filtre bari: arama tam satir, select/tarih ikili yarim satir */
  body[data-page="orders"] .op-filter-bar input:not([type="date"]),
  body[data-page="fulfillment"] .op-filter-bar input:not([type="date"]) { flex: 1 1 100%; min-width: 0; }
  body[data-page="orders"] .op-filter-bar select,
  body[data-page="orders"] .op-filter-bar input[type="date"],
  body[data-page="fulfillment"] .op-filter-bar select,
  body[data-page="fulfillment"] .op-filter-bar input[type="date"] { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* Dokunma hedefleri (44px kurali) — fatura vb. diger .op-* kullanicilari
   * etkilenmesin diye data-page kapsamli */
  body[data-page="orders"] .op-btn,
  body[data-page="fulfillment"] .op-btn { min-height: 44px; }
  body[data-page="orders"] .op-chip { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; }
  body[data-page="fulfillment"] .fc-act { min-width: 44px; min-height: 44px; font-size: 16px; }
  body[data-page="fulfillment"] .op-table th input[type="checkbox"],
  body[data-page="fulfillment"] .op-table td input[type="checkbox"] { width: 22px; height: 22px; }
  body[data-page="orders"] .op-cust-msg { font-size: 16px; padding: 6px 8px; opacity: .85; }

  /* Mesaj composer alanlari iOS zoom onlemi */
  body[data-page="orders"] .op-msg-text, body[data-page="orders"] .op-msg-input,
  body[data-page="fulfillment"] .op-msg-text, body[data-page="fulfillment"] .op-msg-input { font-size: 16px; }
  body[data-page="orders"] .op-msg-ch, body[data-page="fulfillment"] .op-msg-ch { min-height: 44px; }

  /* ================================================================
   * 3) KARGO TAKIP (#/cargo — app.js render_cargo, main.css stilleri)
   * Tablo zaten .table-wrap (overflow-x:auto) icinde; filter-bar
   * main.css@768 ile dikey. Eksikler: 13px input (iOS zoom) + hedefler.
   * ================================================================ */
  body[data-page="cargo"] .filter-bar input,
  body[data-page="cargo"] .filter-bar select { font-size: 16px; min-height: 44px; }
  body[data-page="cargo"] .filter-bar .btn-primary,
  body[data-page="cargo"] .filter-bar .btn-secondary { min-height: 44px; }
  body[data-page="cargo"] .filter-bar .btn-icon { width: 44px; height: 44px; }
  body[data-page="cargo"] .period-bar a { padding: 10px 14px; }
  body[data-page="cargo"] .table-wrap { -webkit-overflow-scrolling: touch; }

  /* ================================================================
   * 4) ENVANTER (#/stock) — .dense-scroll @900'de overflow:visible
   * oluyor, #main .panel overflow-x:auto ise ancak @640'ta basliyor;
   * 641-768 araliginda 600px min-width'li uyari tablosu sayfayi yatay
   * tasiriyordu. Kapsayici scroll geri verilir.
   * ================================================================ */
  body[data-page="stock"] .dense-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* NOT — #/stok (dokunmatik Giris/Cikis): BILEREK KURAL YOK.
   * Telefonlar any-pointer:coarse oldugundan stok-page.css'teki mevcut
   * koruma blogu (56px satir, 18px arama, tek kolon) zaten devrede;
   * buraya width-tabanli deger yazmak o degerleri DUSURURDU (mobile.css
   * son yuklendigi icin kazanir). Kiosk (.ksk-*) de kapsam disi. */
}

@media (max-width: 480px) {
  /* Kanban toolbar: arama tam satir */
  .ima-search, .krg-search { flex-basis: 100%; }

  /* Filtre kontrollari tam satir (cift kolon 480 altinda sikisiyor) */
  body[data-page="orders"] .op-filter-bar select,
  body[data-page="orders"] .op-filter-bar input[type="date"],
  body[data-page="fulfillment"] .op-filter-bar select,
  body[data-page="fulfillment"] .op-filter-bar input[type="date"] { flex: 1 1 100%; }

  /* Envanter donut panelleri: donut + lejant yan yana sigmiyor -> dikey.
   * align-items inline style'da (app.js:643-644) oldugu icin tek istisna
   * olarak !important gerekiyor; flex-direction inline'da yok, normal kural. */
  body[data-page="stock"] .panel-body { flex-direction: column; align-items: stretch !important; }
  body[data-page="stock"] .panel-body > div:first-child { text-align: center; }
}

/* ==== 40-admin.css ==== */
/* 40-admin.css — YONETIM SAYFALARI MOBIL (<=768px): overview/fatura/onay/finance/cari/customers/settings/users/devtools/agent-team/kiosk-history; masaustu (>=769px) ve kiosk POS (~1536px viewport) etkilenmez */

/* ============================================================
 * MOBIL — <=768px
 * ============================================================ */
@media (max-width: 768px) {

  /* ============ 1) GENEL BAKIS (#/dashboard) ============
   * KPI kartlari tek sutun (app-shell:351 "repeat(2,1fr) !important"i
   * yenmek icin !important + ayni ozgulluk; mobile.css sonra yuklendigi
   * icin kazanir). Grafik gridleri tek sutun + svg kapsayici taskini. */
  body[data-page="dashboard"] .kpi-grid { grid-template-columns: 1fr !important; }
  body[data-page="dashboard"] .ov-main,
  body[data-page="dashboard"] .ov-grid-2,
  body[data-page="dashboard"] .ov-grid-3 { grid-template-columns: 1fr; }

  /* Grafikler ekrana sigsin (charts.js SVG viewBox'li — genislik %100 kayipsiz olceklenir;
   * donut inline width/height tasir ise max-width keser; heatmap kendi .cx-hm kabinda kayar) */
  body[data-page="dashboard"] .cx-wrap,
  body[data-page="dashboard"] .cx-donut-wrap,
  body[data-page="dashboard"] .cx-bars,
  body[data-page="dashboard"] .cx-gauge { max-width: 100%; }
  body[data-page="dashboard"] .cx-svg,
  body[data-page="dashboard"] .cx-donut { max-width: 100%; }
  body[data-page="dashboard"] .cx-dlegend { min-width: 0; }

  /* Donem cubugu + ust butonlar dokunma hedefi >=44px */
  body[data-page="dashboard"] .ov-period a { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="dashboard"] .ov-period .ov-custom { flex: 1 1 100%; margin-left: 0; }
  body[data-page="dashboard"] .ov-period input[type=date] { flex: 1; min-height: 40px; }
  body[data-page="dashboard"] .page-actions .btn { min-height: 44px; }
  body[data-page="dashboard"] .csv-btn { min-height: 44px; }

  /* ============ 2) FATURA (#/fatura) ============
   * FT_STYLE sayfa icine (#main) enjekte edildigi icin DOM sirasinda
   * mobile.css'ten SONRA gelir -> body[data-page] onekiyle ozgulluk yukseltildi.
   * KESIM GUVENLIGI (onay checkbox akisi) DEGISMEDI — yalniz boyut/duzen. */
  body[data-page="fatura"] .ft-toolbar { flex-direction: column; align-items: stretch; }
  body[data-page="fatura"] .ft-segmented { display: flex; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body[data-page="fatura"] .ft-seg { flex: 1 0 auto; min-height: 44px; }
  body[data-page="fatura"] .ft-controls { justify-content: flex-start; }
  body[data-page="fatura"] .ft-search { flex: 1 1 100%; min-width: 0; }
  body[data-page="fatura"] .ft-search input { padding: 11px 0; }
  body[data-page="fatura"] .ft-date { flex: 1 1 40%; min-height: 44px; }

  /* Tablo: kapsayici yatay kaydirma garanti (sayfa tasmaz), 721-768
   * araligindaki bosluk kapatildi (FT_STYLE yalniz @720 idi) */
  body[data-page="fatura"] .ft-page .op-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: none; }
  body[data-page="fatura"] .ft-page .op-table .ft-hide-m { display: none; }

  /* Kritik butonlar >=44px */
  body[data-page="fatura"] .ft-actbtn { min-height: 44px; padding: 8px 12px; }
  body[data-page="fatura"] .op-btn { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="fatura"] .op-chip { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="fatura"] .op-table input[type=checkbox] { width: 20px; height: 20px; }
  body[data-page="fatura"] .ft-bulkbar { flex-wrap: wrap; }

  /* Kesim/iptal modallari tam genislik + buton hedefleri */
  body[data-page="fatura"] .ft-modal { max-width: 100%; }
  body[data-page="fatura"] .ft-modal-foot .op-btn,
  body[data-page="fatura"] .ft-modal-foot .ft-btn-cut { flex: 1 1 auto; min-height: 48px; justify-content: center; }
  body[data-page="fatura"] .ft-confirm-check input { width: 22px; height: 22px; }

  /* ============ 3) FATURA ONAY (#/onay) ============
   * Sayfa ZATEN mobile-first (.fapage kendi olcusu) — genel kurallardan muaf.
   * Tek duzeltme: sabit alt aksiyon bari (.bar z:40) bottom-nav'in (z:60)
   * ALTINDA kaliyordu; bar nav ustune kaldirildi + icerik payi artirildi,
   * onay bottom-sheet'i (.scrim z:60=nav) nav'in uzerine cikarildi. */
  body[data-page="onay"] .fapage .bar { bottom: 56px; bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: 14px; }
  body[data-page="onay"] .fapage .fa { padding-bottom: 176px; padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  body[data-page="onay"] .scrim { z-index: 210; }

  /* ============ 4) MUHASEBE (#/finance) ============
   * Tumu inline stil -> flex-basis/width icin !important zorunlu.
   * KPI statbox'lari + pazaryeri kartlari tek sutun; plan/sapma tablolari
   * kendi kabında kayar (display:block tablo hilesi — kapsayici eklenemedigi icin). */
  body[data-page="finance"] #fin-body > div > div { flex-basis: 100% !important; }
  body[data-page="finance"] #fin-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Periyot bari (QA r1: 414 fix) — app-shell@900 ".page-actions .btn{flex:1;min-width:0}"
   * basis-0 yapar: cipler sarma hesabina ~0px girer, tarih inputu cip satirina
   * sikisip TUM cipleri ezer (hangi genislikte ezdigi inputun ic genisligine
   * bagli piyango: 390 sansla kurtuluyordu, 414 eziliyordu). KOK COZUM: finance
   * periyot butonlari DOGAL genislige doner (flex-basis:auto) -> satir asla
   * asiri dolmaz, cip ezilmez/kirpilmaz; tarih inputlari (42%) kendi satirina
   * iner. flex-grow:1 satir ici bosluklari doldurur (buyume ezmez, yalniz
   * basis-0 kuculme ezerdi). Tum genisliklerde (360-768) zarif sonuc. */
  body[data-page="finance"] .page-actions .btn { min-height: 44px; flex: 1 1 auto; }
  body[data-page="finance"] #fin-from,
  body[data-page="finance"] #fin-to { min-height: 44px; flex: 1 1 42%; }

  /* ============ 5) CARI (#/cari) ============
   * Ekstre tablosu zaten overflow-x:auto kapsayicida (cari-page.js:86).
   * KPI kartlari tek sutun; Yeni Hareket formu tek sutun tam genislik;
   * duzenle/sil butonlari 44px hedefe cikarildi (inline padding kucuktu). */
  body[data-page="cari"] #main > div:first-child > div { flex-basis: 100% !important; }
  body[data-page="cari"] #cari-tip,
  body[data-page="cari"] #cari-kalem,
  body[data-page="cari"] #cari-tarih { width: 100%; min-height: 44px; }
  body[data-page="cari"] #cari-adet,
  body[data-page="cari"] #cari-usd,
  body[data-page="cari"] #cari-not { width: 100% !important; min-height: 44px; }
  body[data-page="cari"] #cari-kaydet { width: 100%; min-height: 48px; }
  body[data-page="cari"] #cari-kur { min-height: 40px; }
  body[data-page="cari"] .cari-edit,
  body[data-page="cari"] .cari-del,
  body[data-page="cari"] #cari-vazgec { min-width: 44px; min-height: 44px; }
  body[data-page="cari"] #cari-silinen { width: 20px; height: 20px; }

  /* ============ 6) MUSTERILER (#/customers) ============
   * .cp-table-wrap zaten overflow:auto — dokunmatik kaydirma + hedefler. */
  body[data-page="customers"] .cp-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
  body[data-page="customers"] .cp-filter-bar input,
  body[data-page="customers"] .cp-filter-bar select { flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; }
  body[data-page="customers"] .cp-filter-bar #cp-city { width: 100%; }
  body[data-page="customers"] .cp-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body[data-page="customers"] .cp-drawer-close { width: 44px; height: 44px; }
  body[data-page="customers"] .cp-quick { flex-wrap: wrap; }

  /* ============ 7) TERCIHLER (#/settings) + KULLANICILAR (#/users) ============
   * Formlar prompt() tabanli (CSS geregi yok); sekme/buton hedefleri + tasma. */
  body[data-page="settings"] .tab-bar a { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="settings"] .btn-primary,
  body[data-page="users"] .btn-primary { min-height: 44px; }
  body[data-page="settings"] .panel pre { max-width: 100%; }
  body[data-page="users"] .btn-icon { width: 44px; height: 44px; }
  body[data-page="users"] .panel h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  /* ============ 8) GELISTIRICI ARACLARI (#/devtools) ============ */
  body[data-page="devtools"] .dt-tabs { -webkit-overflow-scrolling: touch; }
  body[data-page="devtools"] .dt-tab { min-height: 44px; padding: 10px 12px; }
  /* iframe yuksekligi bottom-nav (56px) + safe-area payini da dussun */
  body[data-page="devtools"] .dt-iframe { height: calc(100vh - 236px); height: calc(100vh - 236px - env(safe-area-inset-bottom)); }
  /* Akis logu: sabit 70/60/140px kolonlar dar ekranda mesaji eziyordu —
   * zaman/seviye/is ilk satir, mesaj tam satir */
  body[data-page="devtools"] .flow-log { max-height: none; }
  body[data-page="devtools"] .flow-log .log-row { grid-template-columns: auto auto 1fr; row-gap: 2px; }
  body[data-page="devtools"] .flow-log .log-row .log-msg { grid-column: 1 / -1; }
  /* system sekmesi 561-768 araligi buton hedefi (main.css yalniz @560 veriyordu) */
  body[data-page="devtools"] .system-page button { min-height: 44px; }

  /* ============ 9) AGENT EKIBI (#/agent-team) ============
   * Sabit yukseklikli shell + 2 ic scroll mobilde coklu kaydirma yaratiyordu:
   * shell serbest birakildi, tek kaydirma sayfada. Form tek sutun tam genislik. */
  body[data-page="agent-team"] .at-shell { height: auto; min-height: 0; }
  body[data-page="agent-team"] .at-sidebar-wrap { max-height: 240px; }
  body[data-page="agent-team"] .at-form { grid-template-columns: 1fr; }
  body[data-page="agent-team"] .at-tools-list { grid-template-columns: 1fr; }
  body[data-page="agent-team"] .at-field input,
  body[data-page="agent-team"] .at-field select { min-height: 44px; }
  body[data-page="agent-team"] .at-search { min-height: 44px; }
  body[data-page="agent-team"] .at-btn { min-height: 44px; }
  body[data-page="agent-team"] .at-tab { min-height: 44px; }
  body[data-page="agent-team"] .at-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; }
  body[data-page="agent-team"] .at-item { min-height: 44px; }
  body[data-page="agent-team"] .at-textarea-big { height: 50vh; }
  body[data-page="agent-team"] .at-header { padding: 12px 14px; }

  /* ============ 10) KIOSK GECMIS ISLEMLER (overlay) ============
   * DIKKAT: kiosk POS ekrani ~1536px viewport — bu blok orada HIC tetiklenmez;
   * yalniz telefonda acilan gecmis paneli/modallari duzenlenir. .ksk-* (POS)
   * seciciler kasitli olarak HIC hedeflenmedi. */
  #kshi-overlay .kshi-head { padding: 10px 12px; }
  #kshi-overlay .kshi-title { font-size: 18px; }
  #kshi-overlay .kshi-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #kshi-overlay .kshi-chip { flex: 0 0 auto; }
  #kshi-overlay .kshi-body { padding: 4px 10px 24px; }
  #kshi-overlay .kshi-row { gap: 8px; padding: 10px 12px; }
  #kshi-overlay .kshi-row-l { min-width: 52px; }
  #kshi-overlay .kshi-time { font-size: 18px; }
  #kshi-overlay .kshi-total { font-size: 18px; }
  #kshi-overlay .kshi-items td { font-size: 15px; }
  #kshi-overlay .kshi-detail { padding: 14px; }
  #kshi-overlay .kshi-grand span { font-size: 22px; }
  /* iptal/duzenleme modallari -> alttan sheet */
  .kshi-modal-ov { align-items: flex-end; padding: 0; }
  .kshi-modal { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 94vh; }
}

/* ============================================================
 * KUCUK TELEFON — <=480px
 * ============================================================ */
@media (max-width: 480px) {
  body[data-page="dashboard"] .cx-donut-wrap { justify-content: center; }
  body[data-page="dashboard"] .ov-period { gap: 4px; padding: 4px 6px; }
  body[data-page="fatura"] .ft-seg { padding: 6px 8px; font-size: 12px; }
  body[data-page="fatura"] .ft-date { flex: 1 1 100%; }
  body[data-page="agent-team"] .at-header { padding: 10px 12px; }
  #kshi-overlay .kshi-item { font-size: 15px; }
  #kshi-overlay .kshi-sub { font-size: 13px; }
}