/* ══════════════════════════════════════════════════════════════════════════
   XPANEL MASTER — MOBIL FIX v2
   Bu dosya style.css ve theme-master.css'den SONRA yuklenir.
   Tum mobil dokunma/duzen sorunlarini kapsar. Onceligi: TIKLANABILIRLIK.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0) GLOBAL: tap gecikmesi kaldir (tum cihazlar) ── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .nav-i, .tab, .am-tab, .seg-btn, [role="button"], [onclick],
input, select, textarea, label, .card-head, .m-x, .topbar-menu {
  touch-action: manipulation;
}

/* ── 1) Mobil (<=1024px): sidebar drawer + topbar hamburger ── */
@media (max-width: 1024px) {
  /* Sidebar mobil drawer — ekran disinda, acilinca gelir */
  .side, .side.app-sidebar, .app-sidebar {
    transform: translateX(-100%) !important;
    width: 280px !important;
    min-width: 0 !important;
    max-width: 85vw !important;
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 300 !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none;
  }
  .side.open, .side.app-sidebar.open, .app-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 0 0 50px rgba(0,0,0,.7) !important;
  }

  /* Overlay — tiklayinca sidebar kapansin */
  .side-overlay, .side-overlay.vis, .side-overlay.open {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.6) !important;
    z-index: 250 !important;
    backdrop-filter: blur(2px);
  }
  .side-overlay.vis, .side-overlay.open {
    display: block !important;
  }

  /* Main tam genislik */
  .main, .main.app-main, .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Topbar: hamburger menu her zaman gorunur */
  .topbar, .topbar.app-topbar {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    padding: 0 12px !important;
    height: 52px !important;
    min-height: 52px !important;
    gap: 10px !important;
  }
  .topbar-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--txt);
  }
  .topbar-menu svg { width: 22px; height: 22px; }

  /* Topbar'daki hesap/gorev chip'leri mobilde gizle — yer kaplamasin */
  .topbar-stat, .topbar-chip { display: none !important; }
  .topbar-right .btn { display: none !important; } /* "Yeniden Baslat" gibi */

  /* Yatay tastma yok */
  html, body { max-width: 100%; overflow-x: hidden; }
  * { min-width: 0; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
}

/* ── 2) Telefon (<=768px): form, buton, tablo, modal optimizasyonu ── */
@media (max-width: 768px) {
  /* Icerik padding */
  .content, .content.app-content, .app-content {
    padding: 14px 12px 60px 12px !important;
  }

  /* Sayfa basligi — dikey yigin, butonlar altta */
  .ph, .page > .ph {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ph-left, .ph-right { width: 100% !important; }
  .ph-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* ph-right butonlari 2'li grid */
  .ph-right .btn {
    flex: 1 1 calc(50% - 3px) !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .ph h1, .ph h2 { font-size: 17px !important; line-height: 1.3 !important; }
  .ph p { font-size: 11.5px !important; }

  /* ── Form input'lar 16px (iOS zoom onleme) ── */
  .fi, .form-input, input.fi, select.fi, textarea.fi, input[type="text"],
  input[type="password"], input[type="number"], input[type="email"], textarea, select {
    font-size: 16px !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
  }

  /* ── Butonlar: minimum 40px dokunma hedefi ── */
  .btn {
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  .btn-sm {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .btn-xs {
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .btn-icon {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ── Toolbar: filtre/ara butonlari alt alta ── */
  .tbl-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .tbl-toolbar > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .tbl-search {
    max-width: 100% !important;
    width: 100% !important;
  }
  .tbl-filter select, .tbl-filter {
    width: 100% !important;
  }

  /* ── Tablolar: yatay kaydirma ── */
  .tbl-wrap, .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 600px !important;
    font-size: 12px !important;
  }
  table th, table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
  table th { font-size: 11px !important; }

  /* ── Izgaralar: tek/iki kolon ── */
  .stats-grid, .stat-grid, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .stat-card {
    padding: 12px !important;
  }

  /* ── Kartlar ── */
  .card { border-radius: 12px !important; margin-bottom: 12px !important; }
  .card-head, .card-h {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .card-body, .card-b { padding: 12px 14px !important; }

  /* ── Form satirlari tek kolon ── */
  .fr {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fr > .fg, .fg {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── Modal: tam ekran ── */
  .modal, .m-md, .m-lg, .m-xl, .m-sm {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 8px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .m-h {
    padding: 14px 16px !important;
    flex-shrink: 0 !important;
  }
  .m-h h3 { font-size: 15px !important; }
  .m-x {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .m-b {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .m-f {
    padding: 10px 16px !important;
    flex-shrink: 0 !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .m-f .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Sekmeler: yatay kaydirma ── */
  .tabs, .am-tabs, .seg, .seg-group {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tabs::-webkit-scrollbar, .am-tabs::-webkit-scrollbar { display: none; }
  .tab, .am-tab, .seg-btn {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ── Toast ── */
  #toasts {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-width: none !important;
  }

  /* ── Log kutusu ── */
  .log-box {
    height: 300px !important;
    font-size: 11px !important;
    padding: 10px 8px !important;
  }

  /* ── Login ekranı ── */
  #auth, .auth-gate {
    flex-direction: column !important;
  }
  #auth .auth-left, .auth-gate .auth-left {
    display: none !important;
  }
  #auth .auth-right, .auth-gate .auth-right {
    width: 100% !important;
    padding: 24px 16px !important;
  }

  /* ── Footer ── */
  .app-footer {
    padding: 10px 12px !important;
    font-size: 10px !important;
  }
  .footer-content {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
}

/* ── 3) Kucuk telefon (<=480px): daha agresif ── */
@media (max-width: 480px) {
  .content, .app-content { padding: 10px 8px 60px 8px !important; }

  /* Grid'ler tek kolon */
  .stats-grid, .stat-grid, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Tablo daha kompakt */
  table {
    min-width: 480px !important;
    font-size: 11px !important;
  }
  table th, table td { padding: 6px 8px !important; }

  /* ph-right butonlari tekli */
  .ph-right .btn {
    flex: 1 1 100% !important;
  }

  /* Font boyutlari */
  .ph h1, .ph h2 { font-size: 15px !important; }
  body { font-size: 12px !important; }

  /* Sidebar daha dar */
  .side, .app-sidebar { width: 85vw !important; max-width: 280px !important; }
}

/* ── 4) Dokunmatik cihaz: hover efektlerini iptal, :active ile tepki ── */
@media (hover: none) and (pointer: coarse) {
  /* Hover'a bagili efektler mobilde TAKILI KALIYOR — notrle */
  .btn:hover, .card:hover, .nav-i:hover, .tab:hover, .am-tab:hover,
  .seg-btn:hover, .stat-card:hover, .tbl-wrap:hover, .topbar:hover,
  .side-theme-row:hover, .log-l:hover, .nav-i.on:hover {
    transform: none !important;
    box-shadow: inherit !important;
    filter: none !important;
  }

  /* :active ile aninda dokunma geri bildirimi */
  .btn:active, .nav-i:active, .tab:active, .am-tab:active, .seg-btn:active,
  [role="button"]:active, [onclick]:active, .topbar-menu:active {
    opacity: .65 !important;
    transform: scale(.96) !important;
    transition: none !important;
  }

  /* input'lar iOS'ta zoom yapmasin */
  input, select, textarea { font-size: 16px !important; }

  /* backdrop-filter GPU yuku — mobilde kapali */
  .modal-bg, .side-overlay, .topbar, .app-topbar, .modal, .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── 5) Drawer acikken arka plan scroll'unu kilitle ── */
body:has(.side.open) { overflow: hidden !important; }