/* =============================================================================
   mega-mobil.css — Mega Etiket Yönetim Portalı için telefon / iPad düzeltmeleri
   -----------------------------------------------------------------------------
   NEDEN AYRI DOSYA: Portal dışarıdan paket olarak geliyor ve her sürümde
   klasör bütünüyle değişiyor. Paketteki kaynağa yapılan düzeltme bir sonraki
   pakette kaybolur. Bu dosya bizim tarafta (deploy\etiket-portal-ek) durur;
   deploy\10-etiket-portal-kur.ps1 her kurulumda, deploy\11-etiket-portal-mobil.ps1
   tek başına onu portal\dist'e kopyalar ve index.html'e <link> olarak ekler.

   SIRA VE ÖNCELİK: Bu dosya ana CSS'ten (assets/index-*.css: style, login,
   admin, access) SONRA yüklenir; aynı öncelikteki kural burada kazanır.
   Bölüm CSS'leri (designer, EtiketPdf, Reports, Licenses, Density...) ise
   tembel yüklenir ve bu dosyadan SONRA gelir; onları ezen kurallar bu yüzden
   ".adm" önekiyle bir kademe daha yüksek önceliğe çıkarılmıştır.

   HEDEF CİHAZLAR
     Telefon dikey ........ 375–430 px   -> @media (max-width: 600px)
     iPad dikey ........... 768/820/834  -> @media (max-width: 900px)
     iPad yatay ........... 1024/1180/1366 -> @media (max-width: 1180px)
     Dokunmatik ekran ..... @media (pointer: coarse)  (iPad ve telefonda)

   KAYNAĞA ALININCA: GELISTIRICI-MOBIL-ISTEKLERI.md'deki her madde hangi
   grubun silineceğini yazar. Sınıf adları portal 2.2.3 derlemesinden
   (index-D7t1GQSk.css + bölüm CSS'leri) doğrulandı. deploy\10 ve deploy\11
   kilit seçiciler kaybolursa SARI UYARI verir.

   Grup numaraları (G1…G11) geliştirici listesinde aynı adla geçer.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   G0 · Genel: iOS yatayda yazıları kendiliğinden büyütmesin
   ----------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* -----------------------------------------------------------------------------
   G1 · Giriş ekranı: medya kuralları hiç uygulanmıyordu
   Sorun: login.css 248–320'deki dar ekran kuralları ".login-card" diye
   yazılmış; temel kural ".login-page .login-card" olduğu için öncelikleri düşük
   kalıyor. Telefonda kart 500 px (min-width) genişlikte kalıyor, form ekranın
   dışına taşıyordu. Aynı kurallar burada ".login-page" önekiyle yeniden yazıldı.
   Not: 430 px altında yazı tipi 15 değil 16 px — iOS 16 px altında yakınlaşır.
   ----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .login-page .login-card { width: 43vw; min-width: 440px; }
  .login-page .login-heading,
  .login-page .login-form { width: calc(100% - 76px); }
}
@media (max-width: 720px) {
  .login-page { min-height: 0; }
  .login-page .visual { background-position: 20% center; }
  .login-page .login-card {
    width: calc(100% - 28px); min-width: 0; height: calc(100% - 28px);
    top: 14px; right: 14px; border-radius: 20px; overflow-y: auto;
    background: #fff; /* yarı saydam kartın altından görselin yazısı okunuyordu */
  }
  .login-page .login-heading { width: calc(100% - 44px); margin-top: 150px; }
  .login-page .login-heading h1 { font-size: 23px; }
  .login-page .login-form { width: calc(100% - 44px); margin-top: 30px; }
}
@media (max-width: 430px) {
  .login-page .login-heading { margin-top: 112px; }
  .login-page .login-heading h1 { font-size: 21px; }
  .login-page .input-wrap { height: 66px; }
  .login-page .input-wrap input { padding-left: 65px; font-size: 16px; }
  .login-page .login-btn { height: 66px; font-size: 17px; }
}
/* Yatay telefon (yükseklik ≤ 600): 228 px üst boşluk + min-height:600 yüzünden
   "Giriş Yap" düğmesi ekranın altında kalıyordu, sayfa da kaymıyordu. */
@media (max-height: 600px) {
  .login-page { min-height: 0; }
  .login-page .login-card { overflow-y: auto; }
  .login-page .login-heading { margin-top: 24px; }
  .login-page .login-form { margin-top: 20px; margin-bottom: 48px; }
  .login-page .input-wrap { height: 56px; margin-bottom: 14px; }
  .login-page .login-btn { height: 56px; margin-top: 16px; }
}


/* -----------------------------------------------------------------------------
   G2 · Görünür ekran yüksekliği (100dvh)
   Sorun: iOS Safari'de 100vh adres çubuğu gizliyken ölçülür; alt kısım
   (modal düğmeleri, form sonu) araç çubuğunun altında kalıyordu. dvh
   desteklemeyen tarayıcı kuralı yok sayar, eski davranış sürer.
   ----------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  #root > .adm { height: 100dvh; }
  .login-page { height: 100dvh; }
  .adm-modal { max-height: calc(100dvh - 32px); }
}


/* -----------------------------------------------------------------------------
   G3 · Sol menü: iPad yatayda daralır, iPad dikeyde şeride döner
   Sorun: admin.css menüyü yalnız 760 px altında şeride çeviriyor; 768–834 px
   iPad dikeyde 232 px menü içeriğe ~540 px bırakıyordu (tasarımcı, PDF,
   matris sıkışıyordu). Şerit eşiği 900 px'e çekildi; 901–1180 arası menü
   200 px. Şerit kuralları admin.css 331–343'teki 760 px kurallarının aynısı.
   ----------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .adm-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .adm-nav a { padding: 9px 8px; gap: 8px; }
}
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .adm-nav {
    display: flex; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--adm-border);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  .adm-nav h6 { display: none; }
  .adm-nav a { flex: none; white-space: nowrap; margin: 0; }
  .adm-view { padding: 14px 14px 30px; }
}


/* -----------------------------------------------------------------------------
   G4 · Telefonda üst çubuk
   Sorun: üst çubuk sarmıyor; marka yazısı + "Onaylar" + "Canlı · 3/5 istasyon"
   + kullanıcı düğmesi 375 px'e sığmıyor, sağdakiler ekran dışına itiliyordu.
   Telefonda marka yazısı gizlenir (logo kalır; bölüm adı sayfa başlığında
   yazıyor), rozetler küçülür, yine sığmazsa alt satıra geçer.
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* iPad dikeyde marka ve "Canlı · 3/5 istasyon" iki satıra kırılıyordu */
  .adm .top-bar .brand > span, .adm .tb-live { white-space: nowrap; }
}
@media (max-width: 600px) {
  .adm .top-bar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  .adm .top-bar .brand > span { display: none; }
  .adm .top-right { flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; margin-left: auto; }
  .adm .tb-live { margin-right: 0; padding: 3px 7px; gap: 5px; font-size: 11.5px; }
  .adm .user-menu { margin-left: 0; }
  .adm .user-menu .um-btn { padding: 2px 6px 2px 2px; gap: 4px; }
  .adm .viewas-bar { padding: 6px 10px; }
  .adm-shell > .adm-main > .adm-view,
  .adm-shell > .adm-main > .adm-view.full { padding: 12px 10px 24px; }
  .adm .adm-page-head h1 { font-size: 18px; }
  .adm-card > header { flex-wrap: wrap; }
}


/* -----------------------------------------------------------------------------
   G5 · Dokunmatik ekran: iOS yakınlaşması ve dokunma hedefleri
   Sorun 1: giriş kutuları 12.5–14 px; iOS 16 px altındaki kutuya dokununca
   sayfayı yakınlaştırıyor ve geri dönmüyor. Bölüm CSS'leri kutu boyutunu çok
   farklı öncelikle küçülttüğü için burada tek bir !important kullanıldı.
   Sorun 2: ".sm" düğmeler ~24 px, yetki kutucukları 30×22 / 38×26, matris
   onay kutuları 22×22 — parmakla isabet zor. Hedef en az 40 px.
   Fareli masaüstünü etkilemez (pointer: fine).
   ----------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .adm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  .adm select,
  .adm textarea { font-size: 16px !important; }
  .adm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  .adm select { min-height: 40px; }

  .adm button, .adm .btn { min-height: 40px; }
  .adm .adm-nav a { min-height: 44px; }
  .adm .check { min-height: 40px; }
  .adm input[type=checkbox], .adm input[type=radio] { width: 22px; height: 22px; }

  /* Yetki matrisi kutucukları (access.css 50–52, 155) */
  .adm .pm-tile { width: 44px; height: 40px; }
  .adm .pm-tile.small { width: 40px; height: 40px; }
  .adm .pm-check, .adm .pm-exp { width: 40px; height: 40px; }

  /* Ürün ızgarası: başlık 44 px'e çıktı; altındaki yapışkan süzgeç ve hızlı
     giriş satırı (admin.css 157, productTable.css 40: top 34px) ona göre */
  .adm table.grid thead th .h { height: 44px; }
  .adm table.grid thead tr.filters th,
  .adm .pt table.pt-grid thead tr.pt-entry th { top: 44px; }

  /* Şablon tasarımı: boyutlandırma tutamağı 10×10 px (LabelCanvas.jsx 8, satır içi
     stil). Görünümü aynı kalır, dokunma alanı her yöne 14 px büyür. */
  .adm .dz-handle::before { content: ""; position: absolute; inset: -14px; }
  .adm .dz-handle { box-shadow: 0 0 0 1px #fff, 0 0 0 6px rgba(83, 74, 183, .28); border-radius: 2px; }
}
/* Fare üzerine gelince beliren düğmeler dokunmatikte hiç görünmüyordu
   (designer.css 124–125: alan listesindeki düzenle/sil). */
@media (hover: none) {
  .adm .dz-fieldlist .acts { opacity: 1; }
}


/* -----------------------------------------------------------------------------
   G6 · Telefonda pencere (modal) tam ekran, bildirimler tam genişlik
   Sorun: modal max-height:100vh ile iOS'ta alt düğmeler (Kaydet/Vazgeç)
   araç çubuğunun altında kalıyordu; toast 420 px ile ekrandan taşıyordu.
   safe-area değerleri bugün 0'dır (viewport-fit=cover yok); ana ekrana
   eklenmiş uygulama ve ileride meta değişirse çentiği/çubuğu korur.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* grid yerine flex: grid'in otomatik satırı içerikle uzayıp pencereyi ekrandan taşırıyordu */
  .adm-modal-back { padding: 0; display: flex; align-items: stretch; }
  .adm-modal, .adm-modal.wide { flex: 1 1 auto; width: 100%; max-height: none; border-radius: 0; }
  .adm-modal > header { padding: max(12px, env(safe-area-inset-top)) 14px 12px; }
  .adm-modal > .body { padding: 14px; }
  .adm-modal > footer { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }

  .adm-toasts { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .adm-toast { max-width: none; }
  .adm-footer { padding-bottom: max(6px, env(safe-area-inset-bottom)); font-size: 11px; }
}


/* -----------------------------------------------------------------------------
   G7 · Tablolar ve geniş kutular: sayfa değil tablo kaysın
   Sorun: kart gövdesindeki ".tbl" tabloları dar ekranda kartı ve tüm görünümü
   yana taşırıyordu. Zaten kayan kapların (flush gövde, scroll-box, fit-table,
   db-table, pt-cols-wrap, dz-apply-list) içindekiler hariç; onlarda yapışkan
   başlık bozulmasın.
   ----------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .adm :not(.flush):not(.scroll-box):not(.fit-table):not(.db-table):not(.pt-cols-wrap):not(.dz-apply-list) > table.tbl {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 600px) {
  /* Bölüm CSS'lerindeki 180–260 px'lik en küçük genişlikler (reports.css 12, 17, 67;
     notifications.css 15, 74; productTable.css 3; admin.css 417, 471) telefonda
     kutuyu ekrandan taşırıyordu. Izgara hücre düzenleyicileri daha yüksek
     öncelikte olduğu için etkilenmez. */
  html body .adm .adm-view :is(input, select, textarea) { min-width: 0; }
  html body .adm .adm-view .ntf-title { min-width: 0; }
  .adm .grid-toolbar input[type=search] { max-width: none; flex: 1 1 100%; }
  .adm .grid-wrap { max-height: 70vh; }
  .adm .adm-list { max-height: 50vh; }
  /* Özet kutuları: içe aktarma 3, lisans 4 sütundan 2'ye (productTable.css 99, licenses.css 38) */
  .adm .stat-row.pt-stats, .adm .stat-row.lic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* -----------------------------------------------------------------------------
   G8 · Yetki matrisi: telefonda dar ilk sütun
   Sorun: yapışkan ilk sütun 250–260 px (access.css 39, 150); 375 px ekranda
   işlem sütunlarına ~90 px kalıyordu. Ad satıra sarar, sütun 132–150 px.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .adm table.pm .first,
  .adm table.pm-mods .first { min-width: 132px; max-width: 150px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  .adm table.pm-mods tr.pm-feat td.first { padding-left: 16px; }
  .adm table.pm-mods th.c, .adm table.pm-mods td.c { min-width: 56px; }
  .adm .pm-wrap { max-height: 70vh; }
  .adm .pm-bar { padding: 8px; }
}


/* -----------------------------------------------------------------------------
   G9 · Şablon Tasarımı (designer.css)
   Sorun: tesis/amaç kutuları 170–200 px, önizleme alanları 190 px sabit,
   araç çubuğu ~25 düğmeyle telefonda 6–7 satıra sarıyordu; tuval en az
   380 px yükseklik istiyordu. Telefonda araç çubuğu tek satır yatay kayar,
   üst şerit alanları tam genişlik olur, tuval ekran yüksekliğine göre.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .adm .dz-top { padding: 8px; gap: 8px; }
  .adm .dz-top .dz-cat, .adm .dz-top .dz-purpose { min-width: 0; flex: 1 1 100%; }
  .adm .dz-top .field.narrow, .adm .dz .field.narrow, .adm .dz-size .field:first-child { width: auto; flex: 1 1 110px; }
  .adm .dz-size { margin-left: 0; width: 100%; }

  .adm .dz-toolbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px; }
  .adm .dz-toolbar .grp { flex: none; flex-wrap: nowrap; }
  .adm .dz-toolbar .grp + .grp { padding-left: 8px; }

  .adm .dz-preview-bar .field, .adm .dz-preview-bar .field.narrow { width: auto; flex: 1 1 140px; }
  .adm .dz-preview-right { margin-left: 0; }
  .adm .dz-preview-text { max-width: 100%; }

  .adm .dz-stage > .dz-canvas-wrap { height: 55vh; min-height: 260px; padding: 8px; }
  .adm .dz-stage > .dz-listpanel { height: 60vh; }
  .adm .dz-stage .dz-fieldlist { grid-template-columns: minmax(0, 1fr); }
  .adm .dz-menu-pop { min-width: min(270px, calc(100vw - 24px)); }
  .adm .dz-reg-hist { gap: 10px; }
  .adm .dz-reg-versions ul { max-height: 40vh; }
}


/* -----------------------------------------------------------------------------
   G10 · Etiket PDF (etiketPdf.css)
   Sorun: önizleme sahnesi en az 640 px yüksek ve overflow:hidden; telefonda
   ekranı dolduruyor, genişliğe sığmayan etiketin kenarı kesiliyordu (ölçek
   en az 1.5 px/mm). Telefonda yükseklik ekrana göre, taşan kısım kayar.
   Yükseklik sabit verildi: sahne boyutunu ResizeObserver ölçüyor
   (EtiketPdf.jsx 265–277); içeriğe bağlı yükseklik döngü yapardı.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .adm .lp-stage {
    min-height: 0; height: clamp(320px, 60vh, 560px); padding: 8px; overflow: auto;
    align-items: flex-start; align-items: safe center;
    justify-content: flex-start; justify-content: safe center;
  }
  .adm .lp-actions { flex-wrap: wrap; }
  .adm .lp-f { grid-template-columns: 96px minmax(0, 1fr); }
}


/* -----------------------------------------------------------------------------
   G11 · Saha önizleme çerçevesi (admin.css 480–496)
   Sorun: üstteki sarı bilgi çubuğu ve taslak notu telefonda ekranın yarısını
   kaplıyor, saha arayüzüne (iframe) yer kalmıyordu. İframe içindeki saha
   arayüzünün kendi düzeltmeleri ayrı dosyada: mega-mobil-saha.css.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .adm .fp-bar { padding: 6px 10px; gap: 6px 10px; }
  .adm .fp-who { flex-basis: 100%; }
  .adm .fp-note { padding: 4px 10px; }
  .adm .fp-draft { padding: 5px 10px; max-height: 22vh; overflow: auto; }
}