/* PazaryeriPanel — Mobil + PWA ortak katmanı
 * ==========================================
 * Bu dosya her sayfanın <head>'ine EN SON eklenir (bkz. api/pwa_head.py), yani
 * sayfaların kendi <style> bloklarından sonra gelir. Böylece eşit özgüllükteki
 * kuralları kaynak sırasıyla kazanır ve 2500 satırlık gömülü CSS'e dokunmadan
 * mobil düzeltmeleri uygulayabiliriz.
 *
 * DİKKAT — bozmayın:
 *   * Sidebar drawer'ı `body[data-pyp-sb-open="1"]` + `.pyp-sidebar.open` ile
 *     çalışır (widget.js'in `drawer-mode` sınıfı ölü bir no-op'tur).
 *   * Açık drawer'da `transform: none` kalmalı ve scrim'e `backdrop-filter`
 *     EKLENMEMELİ — ikisi de geçmişte iOS/Chromium'da yazıları bulanıklaştıran
 *     compositing hatalarına yol açtı (dashboard_bridge_common.py:2459 notları).
 */

/* =========================================================================
   0) Temel: taşmayı kes, ama içeriği ERİŞİLEMEZ kılma
   ========================================================================= */

/* Gömülü CSS `body{overflow-x:hidden}` diyor. Bu, taşan içeriği kaydırılabilir
   yapmaz — KIRPAR; taşan buton/menü kalıcı olarak tıklanamaz hale gelir.
   `clip` aynı korumayı verir ama position:sticky'yi bozmaz. */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
}

/* Taşmanın asıl kaynağı: uzun metinlerin küçülmeyi reddetmesi. Flex/grid
   çocuklarında min-width:auto varsayılanı budur. */
@media (max-width: 820px) {
  .content,
  .card,
  .kpi,
  .val,
  .crumbs,
  .mini-list li,
  .panel-pad {
    min-width: 0;
  }
  .val,
  .mono,
  .sub,
  .mini-list li {
    overflow-wrap: break-word;
  }
}

/* =========================================================================
   1) iOS "input'a dokununca ekran zıplıyor" — 16px eşiği
   -------------------------------------------------------------------------
   iOS Safari, 16px'ten küçük yazı tipli bir alana odaklanınca tüm sayfayı
   yakınlaştırır ve GERİ ÇIKMAZ. Kullanıcı yatay kaydırılan bir sayfada kalır.
   user-scalable=no ile bastırmak yerine (erişilebilirliği yok eder ve iOS 10+
   zaten yok sayar) gerçek nedeni düzeltiyoruz.
   ========================================================================= */
@media (max-width: 900px) {
  input,
  select,
  textarea,
  .search input,
  .field input,
  .field select,
  .field textarea,
  .pyp-input,
  .pyp-select,
  .pyp-textarea,
  .pyp-prod-input,
  .pyp-sb-search input,
  .ods input,
  .ods select,
  .ods textarea {
    font-size: 16px !important;
  }
  /* 16px'e çıkan alanlar daha yüksek görünmesin diye dikey padding'i toparla. */
  .field input,
  .field select,
  .search input {
    min-height: 44px;
  }
}

/* =========================================================================
   2) Dokunma hedefleri — minimum 44x44 (WCAG 2.5.5 / Apple HIG)
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .pyp-btn,
  .btn-primary,
  .btn-ghost,
  .ods .btn,
  .ods .btn.sm,
  .ods .pf-select,
  .ods .pf-menu-item {
    min-height: 44px;
  }

  /* SADECE tiklanabilir chip'ler buyutulur. `.chip` sinifi iki farkli anlamda
     kullaniliyor: page_shell'de filtre BUTONU, home_dashboard'da ise salt
     gosterim ROZETI (ör. "brüt marj %82.9"). Rozetlere 44px vermek onlari
     kocaman ovallere cevirdi. WCAG 2.5.5 zaten yalnizca etkilesimli hedefleri
     kapsiyor; ayrimi eleman tipi/rolu ile yapiyoruz. */
  button.chip,
  a.chip,
  .chip[role="button"],
  .chip[data-filter],
  .pyp-filter-chip,
  .ods button.chip,
  .pyp-pi-tab,
  .pyp-fin-ai-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .pyp-sb-item {
    min-height: 44px;
  }

  /* Menü içindeki akordiyon başlıkları GERÇEK butondur (widget.js:7432) ve
     yalnızca ~17px yüksekliğindeydi. Salt etiket olan `div.pyp-sb-section`
     büyütülmemeli — bu yüzden seçici buton varyantını hedefler. */
  button.pyp-sb-section,
  .pyp-sb-acc-toggle {
    min-height: 44px;
  }

  .pyp-sb-search input {
    min-height: 44px;
  }

  /* Kare ikon düğmeleri: görsel boyut korunur, dokunma alanı büyütülür. */
  .pyp-modal-close,
  .pyp-toast-close,
  #themeToggleBtn,
  .pyp-theme-toggle,
  .pyp-sb-hamburger,
  .ods .qa,
  .ods .chevbtn,
  .ods .dw-head .x,
  .ods .ai-brief .ai-x {
    min-width: 44px;
    min-height: 44px;
  }

  /* Görsel olarak küçük kalması gereken kontroller için görünmez 44x44 alan.
     ::after kullanıyoruz; düğmelerin kendi ::before'ları bozulmasın. */
  .ods .ck,
  .cost-save,
  .raf-save {
    position: relative;
  }
  .ods .ck::after,
  .cost-save::after,
  .raf-save::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Onay kutuları parmakla seçilebilir olsun. */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  /* Çift dokunuş yakınlaştırmasının 300ms gecikmesini kaldırır. */
  a,
  button,
  .btn,
  [role="button"] {
    touch-action: manipulation;
  }
}

/* =========================================================================
   3) Güvenli alanlar (çentik / ana ekran çubuğu) — viewport-fit=cover ile
   ========================================================================= */
@media (max-width: 768px) {
  .pyp-sb-hamburger {
    top: calc(12px + env(safe-area-inset-top)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
  }
  .pyp-sidebar {
    padding-left: env(safe-area-inset-left);
  }
  .pyp-sb-scroll {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* =========================================================================
   4) Dinamik viewport yüksekliği
   -------------------------------------------------------------------------
   Mobilde 100vh, URL çubuğu açıkken görünen alandan ~90px DAHA UZUNDUR; drawer
   ve modal altları ekran dışında kalır. 100dvh gerçek görünür yüksekliktir.
   ========================================================================= */
@supports (height: 100dvh) {
  .app {
    min-height: 100dvh !important; /* satır içi style="min-height:100vh" ezilir */
  }
  @media (max-width: 768px) {
    .pyp-sidebar {
      height: 100dvh;
      max-height: 100dvh;
    }
    .pyp-modal {
      max-height: 92dvh;
    }
  }
}

/* =========================================================================
   5) Topbar — telefonda 3 satırlık, yapışkan, 160-220px'lik blok olmasın
   -------------------------------------------------------------------------
   Gömülü CSS ≤920px'te .topbar'ı dikey kolona çeviriyor ve sticky bırakıyor:
   390x660 bir ekranın üçte birini kalıcı olarak yiyor.
   ========================================================================= */
@media (max-width: 768px) {
  .topbar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  .topbar .crumbs {
    display: none;
  }
  .brand {
    min-width: 0;
  }
  .brand .role {
    display: none;
  }
  /* Arama kutusu kendi satırına insin, aksiyonlar üstte sağda kalsın. */
  .search {
    order: 3;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .top-actions {
    order: 2;
    width: auto;
    margin-left: auto;
  }
  /* Finans kolon başlığı topbar'ın ALTINDA kalmasın (z-index 4 < 5). */
  .pyp-finance-head {
    position: static;
  }
}

/* =========================================================================
   6) Drawer (off-canvas menü) — genişliği sınırla, kapatma alanı bırak
   ========================================================================= */
@media (max-width: 768px) {
  /* 268px sabit genişlik 360px'lik telefonda ekranın %74'ü. */
  .pyp-sidebar {
    width: min(300px, calc(100vw - 68px)) !important;
    max-width: min(300px, calc(100vw - 68px)) !important;
  }
  /* Scrim'e dokunuş sayfayı kaydırmasın. */
  body[data-pyp-sb-open="1"]::after {
    touch-action: none;
  }
  /* Alt navigasyon varken üstteki hamburger gereksiz: 64px'lik topbar
     boşluğunu geri kazan. */
  body[data-pyp-bottomnav="1"] .pyp-sb-hamburger {
    display: none !important;
  }
  body[data-pyp-bottomnav="1"][data-pyp-sb-mobile="1"] .topbar {
    padding-left: 14px;
  }
}

/* =========================================================================
   7) Tablolar — 900px'lik min-width telefonda kart yığınına dönsün
   -------------------------------------------------------------------------
   Gömülü CSS'te .pyp-table-mobile kart görünümü YAZILI ama hiç bağlanmamış
   (tabloya sınıf verilmiyordu, hücrelerde data-label yoktu). page_shell ve
   widget.js tarafında bağladık; burada min-width kilidini açıyoruz.
   ========================================================================= */
@media (max-width: 768px) {
  .data-table.pyp-table-mobile {
    min-width: 0 !important;
    width: 100%;
  }
  .pyp-table-mobile tbody {
    display: block;
  }
  .pyp-table-mobile td {
    min-width: 0;
    overflow-wrap: break-word;
    align-items: center;
  }
  .pyp-table-mobile td > * {
    min-width: 0;
    max-width: 100%;
  }
  /* Etiketsiz hücre (ör. toplu seçim kutusu) boş bir ::before ile yer kaplamasın. */
  .pyp-table-mobile td:not([data-label])::before,
  .pyp-table-mobile td[data-label=""]::before {
    content: none;
  }
  .pyp-table-mobile td:not([data-label]),
  .pyp-table-mobile td[data-label=""] {
    justify-content: flex-start;
  }
  /* Kart yığınına geçen tabloda yatay kaydırma kalmasın. */
  .table-wrap:has(.pyp-table-mobile) {
    overflow-x: visible;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* =========================================================================
   8) Modal — telefonda alt sayfa (bottom sheet), butonlar parmak altında
   ========================================================================= */
@media (max-width: 560px) {
  .pyp-modal-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 8px;
  }
  .pyp-modal-foot .btn,
  .pyp-modal-foot .pyp-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
  .pyp-modal-body {
    overscroll-behavior: contain;
  }
}

/* =========================================================================
   9) Toast — hamburger'ı ve alt navigasyonu kapatmasın
   ========================================================================= */
@media (max-width: 768px) {
  .pyp-toast-stack {
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  body[data-pyp-bottomnav="1"] .pyp-toast-stack {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .pyp-toast {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================================
   10) KPI / grid daralmaları
   ========================================================================= */
/* Gömülü CSS ≤560px'te KPI'ları TEK sütuna indiriyor: 4 kart telefonda ~800px
   dikey yer kaplıyor ve kullanıcı içeriği görmeden önce uzun uzun kaydırıyor.
   İkişerli dizilim mobil panellerin standardı ve okunaklılığı bozmuyor. */
@media (max-width: 560px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kpi {
    padding: 13px 13px;
  }
  .kpis .val {
    font-size: 19px;
  }
  .kpis .lab {
    font-size: 10px;
    margin-bottom: 6px;
  }
}

/* Ana panel (home_dashboard) KPI bento'su: `.kpis4` kendi CSS'inde ≤1200px'te
   2 sutuna dusuyor, ama `.spark` `flex:0 0 88px` ile KUCULMUYOR. 390px'te kart
   ic genisligi ~140px -> metin sutununa 140-12-88 = ~38px kaliyor ve rakamlar
   okunamaz hale geliyor. Telefonda tek sutuna alip sparkline'i kucultulebilir
   yapiyoruz. (Dosyanin kendi `.kpis` kurali da ≤560px'te tek sutun — ayni niyet,
   `.kpis4` sadece o kurali hic almamis.) */
@media (max-width: 560px) {
  .pyp-home-dash .kpis4 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .pyp-home-dash .kpi .spark {
    flex: 0 1 88px;
    min-width: 0;
  }
  /* KPI rakami hicbir kosulda karakter karakter bolunmesin. */
  .pyp-home-dash .kpi .val {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* .ods KPI kartlarında 38px'lik ikon var; 2 sütunda değere ~85px kalıyor ve
   6 haneli ciro kırpılıyor (audit: orders_page_api.py:3399). Onlar tek sütun. */
@media (max-width: 480px) {
  .ods .kpis,
  .ods .kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Açılır filtre menüleri ekran dışına taşmasın (overflow:clip onları kırpıyor). */
@media (max-width: 768px) {
  .pf-menu,
  .ods .pf-menu {
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px);
  }
}

/* =========================================================================
   11) Alt navigasyon barı (pyp-mobile.js üretir)
   ========================================================================= */
.pyp-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .pyp-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100; /* scrim (110) ve sidebar (120) altında kalmalı */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: var(--bg-2, #fff);
    border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08));
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -20px rgba(15, 23, 42, 0.5);
  }

  .pyp-bn-item {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px;
    color: var(--ink-3, #64748b);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .pyp-bn-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
  }

  .pyp-bn-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .pyp-bn-item.active {
    color: var(--blue, #0080ff);
  }
  .pyp-bn-item.active .pyp-bn-ic {
    position: relative;
  }
  .pyp-bn-item.active .pyp-bn-ic::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: currentColor;
  }
  .pyp-bn-item:active {
    background: var(--panel, rgba(15, 23, 42, 0.035));
  }

  /* İçerik alt barın altında kalmasın. */
  body[data-pyp-bottomnav="1"] .content {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* =========================================================================
   12) iOS "Ana Ekrana Ekle" ipucu sayfası (pyp-mobile.js üretir)
   ========================================================================= */
.pyp-ios-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pyp-ios-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 18, 0.55);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.pyp-ios-sheet[data-open="1"] .pyp-ios-sheet-scrim {
  opacity: 1;
}

.pyp-ios-sheet-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-2, #fff);
  color: var(--ink, #0f172a);
  border-radius: 20px 20px 0 0;
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -12px 48px -24px rgba(2, 6, 18, 0.6);
}
.pyp-ios-sheet[data-open="1"] .pyp-ios-sheet-card {
  transform: translateY(0);
}

.pyp-ios-sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-2, rgba(15, 23, 42, 0.14));
  margin: 0 auto 16px;
}

.pyp-ios-sheet-icon {
  border-radius: 13px;
  margin-bottom: 12px;
}

.pyp-ios-sheet h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.pyp-ios-sheet p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3, #64748b);
}

.pyp-ios-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 10px;
}
.pyp-ios-steps li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  line-height: 1.4;
}
.pyp-ios-step-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel, rgba(15, 23, 42, 0.035));
  color: var(--blue, #0080ff);
}

.pyp-ios-sheet-close {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: var(--blue, #0080ff);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  .pyp-ios-sheet-card,
  .pyp-ios-sheet-scrim {
    transition: none;
  }
}

/* =========================================================================
   13) Kargo tarayıcı (/kargo?ui=old) — mobilde tuzağa düşmeyi engelle
   -------------------------------------------------------------------------
   kargo_scan_page.py:424 sayfanın GÖVDESİNE şu stili basıyor:
       @media (max-width:768px){ .kargo-mode-tabs,.kargo-input-wrap{display:none!important} }
   Sonuç: telefonda Kamera/Okuyucu/Manuel sekmeleri VE barkod alanı yok olur;
   kamera açılamazsa (izin reddi) operatörün hiçbir alternatifi kalmaz.

   Bu bir Reflex sayfası olduğundan kaynağını değiştirmek tam frontend export
   gerektirir. Bunun yerine daha yüksek özgüllükle geri açıyoruz: iki kural da
   `!important` taşıdığı için kazanan özgüllüğe göre belirlenir —
   `html body .x` (0,1,2) > `.x` (0,1,0) — ve sıradan bağımsız biz kazanırız.
   ========================================================================= */
@media (max-width: 768px) {
  html body .kargo-mode-tabs,
  html body .kargo-input-wrap {
    display: block !important;
  }
}

/* =========================================================================
   14) Giriş / kayıt sayfaları — PWA'nın ilk açılan ekranı
   -------------------------------------------------------------------------
   Bu sayfalar sunucuda üretiliyor ve stilleri satır içi (style="...") yazılmış.
   Satır içi stil yalnızca KENDİ tanımladığı özellikleri ezer; bu yüzden
   `min-height` gibi tanımlamadıkları özellikleri !important'sız verebiliyoruz.
   `bottom` satır içinde tanımlı olduğu için orada !important gerekiyor.
   ========================================================================= */
@media (max-width: 768px) {
  /* Çerez izni şeridi ekranın en altına yapışık; iPhone'da ana ekran çubuğu
     düğmelerin üstüne biniyordu. */
  #pyp-consent-banner {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #pyp-consent-accept,
  #pyp-consent-reject {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* "Şifremi Unuttum" gibi tek başına duran bağlantılar 16px yüksekliğindeydi.
     Cümle İÇİNDEKİ bağlantılara (ör. izin metnindeki "Gizlilik Politikası")
     dokunmuyoruz — WCAG 2.5.5 satır içi bağlantıları zaten muaf tutuyor ve
     onlara dikey dolgu vermek metnin satır aralığını bozar. */
  .remember a,
  .links > a,
  .auth-alt a,
  .login-links a,
  .auth-footer > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
  }
}

/* =========================================================================
   15) Standalone (ana ekrandan açılmış) moda özel rötuşlar
   ========================================================================= */
:root[data-pwa="standalone"] body {
  /* Tarayıcı çubuğu yok: sayfanın "lastik bant" taşmasını kapat, native hissi ver. */
  overscroll-behavior-y: none;
}

/* Yükle düğmeleri yalnızca kurulabilir durumda görünür (JS hidden'ı kaldırır). */
[data-pyp-install] {
  display: none;
}
:root[data-installable="1"] [data-pyp-install] {
  display: inline-flex;
}
:root[data-pwa="standalone"] [data-pyp-install] {
  display: none !important;
}

/* =========================================================================
   16) Bildirim zili + açılır panel (pyp-notify.js üretir)
   -------------------------------------------------------------------------
   Masaüstünde de görünür; bu dosya tüm sayfalara yüklendiği için stiller
   burada duruyor. Mobil davranışı en altta ayrı media query'de.
   ========================================================================= */
.pyp-nt {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pyp-nt.pyp-nt-floating {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 95;
}

.pyp-nt-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-2, rgba(15, 23, 42, 0.14));
  background: var(--bg-3, #f1f5f9);
  color: var(--ink-2, #475569);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pyp-nt-bell:hover {
  color: var(--ink, #0f172a);
  border-color: color-mix(in oklab, var(--blue, #0080ff) 30%, var(--line-2, #cbd5e1));
}
.pyp-nt-bell:focus-visible {
  outline: 2px solid var(--blue, #0080ff);
  outline-offset: 2px;
}

.pyp-nt-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-2, #fff);
}

.pyp-nt-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--bg-2, #fff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.45);
  z-index: 140;
}

.pyp-nt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  position: sticky;
  top: 0;
  background: var(--bg-2, #fff);
}
.pyp-nt-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue, #0080ff);
  cursor: pointer;
}

.pyp-nt-list {
  display: flex;
  flex-direction: column;
}

.pyp-nt-item {
  display: flex;
  gap: 11px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.06));
  color: inherit;
  text-decoration: none;
}
.pyp-nt-item:hover {
  background: var(--panel, rgba(15, 23, 42, 0.03));
}
.pyp-nt-item.unread {
  background: color-mix(in oklab, var(--blue, #0080ff) 5%, transparent);
}

.pyp-nt-ic {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2, rgba(15, 23, 42, 0.06));
  color: var(--ink-2, #475569);
}
.pyp-nt-ic.k-order { color: var(--blue, #0080ff); }
.pyp-nt-ic.k-question { color: var(--violet, #6b5bff); }
.pyp-nt-ic.k-stock { color: var(--amber, #f59e0b); }
.pyp-nt-ic.k-integration { color: var(--red, #ef4444); }
.pyp-nt-ic.k-service { color: var(--green, #16a34a); }

.pyp-nt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pyp-nt-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  overflow-wrap: break-word;
}
.pyp-nt-text {
  font-size: 12.5px;
  color: var(--ink-3, #64748b);
  overflow-wrap: break-word;
}
.pyp-nt-time {
  font-size: 11px;
  color: var(--ink-4, #94a3b8);
  margin-top: 2px;
}

.pyp-nt-empty {
  padding: 34px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, #64748b);
}

.pyp-nt-push {
  padding: 14px 15px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  background: var(--bg-3, #f8fafc);
}
.pyp-nt-push-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin-bottom: 5px;
}
.pyp-nt-on {
  font-size: 11px;
  font-weight: 700;
  color: var(--green, #10b981);
}
.pyp-nt-push-d {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #64748b);
}
.pyp-nt-push-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pyp-nt-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 40px;
  background: var(--blue, #0080ff);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.pyp-nt-btn.ghost {
  background: var(--bg-2, #fff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--line-2, rgba(15, 23, 42, 0.14));
}
.pyp-nt-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* --- Telefon: panel tam genişlik alt sayfa gibi açılsın --- */
@media (max-width: 560px) {
  .pyp-nt-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 72dvh;
    border-radius: 16px;
  }
  /* Alt navigasyon varken onun üstünde dursun. */
  body[data-pyp-bottomnav="1"] .pyp-nt-panel {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

@media (hover: none) and (pointer: coarse) {
  .pyp-nt-bell {
    min-width: 44px;
    min-height: 44px;
  }
  .pyp-nt-item {
    min-height: 44px;
  }
}

/* =========================================================================
   17) Denetlenmemiş sayfalarda bulunan taşmalar (2026-08-03 tarayıcı ölçümü)
   ========================================================================= */

/* --- /orders-new tarih aralığı ------------------------------------------
   `.ods .pf-select` `display:inline-flex` + `white-space:nowrap` taşıyor ve
   içinde iki tarih input'u var: 390px ekranda kutu 400px'e çıkıp taşıyordu
   (ölçüm: #odsDates 28..428). Telefonda sarmasına izin verip tam genişlik
   veriyoruz. */
@media (max-width: 768px) {
  .ods #odsDates {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    width: 100%;
    min-width: 0;
  }
  .ods #odsDates input {
    flex: 1 1 130px;
    min-width: 0;
  }
}

/* --- /products-new filtre şeridi ----------------------------------------
   products_page_api.py:2130 mobilde `.group`'u yatay kaydırıcıya çeviriyor
   (`overflow-x:auto; flex-wrap:nowrap`) ama flex çocuğunun varsayılan
   `min-width:auto` değeri yüzünden kutu KAYDIRMAK yerine içeriği kadar
   BÜYÜYOR — ölçümde .group 31..454 (viewport 390) çıktı. `min-width:0`
   olmadan `overflow-x:auto` bir flex/grid çocuğunda çalışmaz. */
@media (max-width: 768px) {
  .pyp-orders-toolbar,
  .pyp-orders-toolbar .group {
    min-width: 0;
    max-width: 100%;
  }
  .pyp-orders-toolbar .group {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Kaydırılabilir şeritte chip'ler daralmasın. */
  .pyp-orders-toolbar .group > * {
    flex: none;
  }
}

/* --- Dokunma hedefleri: /qa-new ve admin konsolu ------------------------
   Bu sayfalar kendi buton sınıflarını kullanıyor; genel `.btn` kuralı
   onlara değmiyordu (ölçüm: qaKbdBtn/qaTheme 34x34, ac-nav öğeleri 38px). */
@media (hover: none) and (pointer: coarse) {
  /* `.qa .btn` (qa_page_api.py:300) min-height:36px ile genel `.btn` kuralini
     eziyor — `.ods .btn` ile birebir ayni desen. Ayni ozgullukte karsilik
     veriyoruz. */
  .qa .btn,
  #qaKbdBtn,
  #qaTheme,
  #qaBulkDraft {
    min-height: 44px;
  }
  #qaKbdBtn,
  #qaTheme,
  #qaRefresh {
    min-width: 44px;
  }
  /* Gelen Kutusu / Taslak hazir / Riskli sekmeleri 26px yuksekligindeydi. */
  .qa-tab,
  #qaSort {
    min-height: 44px;
  }

  /* Admin konsolu kendi ikon butonu sinifini kullaniyor (console.css:373,
     sabit 38x38 + flex-basis). flex-basis'i de acmak gerekiyor, yoksa
     min-width tek basina etkisiz kalir. */
  .ac-icon-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .ac-nav-item,
  .ac-pg-btn,
  .ac-sidebar a,
  .ac-sidebar button {
    min-height: 44px;
  }
}
