/**
 * Zyron CRM — Mobile-First App Experience
 * Modern, app-benzeri mobil deneyim.
 * Breakpoints: 900 / 768 / 480 / 360
 */

/* ═══════════════════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES — MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 260px;
    --topbar-height: 50px;
    --page-pad: 12px;
    --card-pad: 12px;
    --card-gap: 8px;
    --section-gap: 14px;
  }
}
@media (max-width: 480px) {
  :root {
    --page-pad: 8px;
    --card-pad: 10px;
    --card-gap: 6px;
    --section-gap: 10px;
  }
}


/* ═══════════════════════════════════════════════════════
   1. TOUCH & INTERACTION FOUNDATIONS
   ═══════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Tap highlight (yalnız tap-highlight; touch-action GLOBAL VERILMEZ —
     bazı Android Chrome / Samsung Internet sürümlerinde * üzerine
     touch-action vermek tek-parmak scroll'unu kaybettiriyor; sadece
     interactive elementlere veriyoruz). */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Sadece interactive elementlerde double-tap zoom delay'i kaldır.
     Scroll container'ları (body, .page, .main-content vs) etkilenmez. */
  button, a, [role="button"], input, select, textarea, label,
  .btn, .btn--icon, .nav-item, .modal__close, .tab-button,
  .sf-btn, .sf-catbar__item, .sf-subcat-chip, .sf-group-tile,
  .sf-cart-btn, .sf-auth-pill, .sf-card, .sf-nav__link {
    touch-action: manipulation;
  }

  /* Hover-only elemanlar mobilde her zaman görünür */
  .bank-account-card__actions,
  .ann-item__actions { opacity: 1 !important; }

  /* Minimum dokunma hedefi (WCAG 2.5.8) */
  .btn--icon { width: 38px; height: 38px; font-size: 16px; }
  .perm-check { width: 22px; height: 22px; }
  input[type="checkbox"] { width: 20px; height: 20px; }

  /* Android: scroll container GPU hızlandırma — momentum + pürüzsüz scroll */
  .table-container,
  .modal__body,
  .modal__container,
  .modal__content,
  .sidebar__nav {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
  }
}


/* ═══════════════════════════════════════════════════════
   2. TABLET (≤ 900px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Parasut docs: stack */
  .parasut-docs { flex-direction: column; }
  .parasut-doc--divider { border-left: none; border-top: 1px solid var(--color-border); }

  /* Bank / log filters: stack */
  .bank-adv-filters,
  .log-adv-filters {
    flex-direction: column;
    gap: 8px;
  }
  .bank-adv-filters .form-group,
  .log-adv-filters .form-group {
    min-width: 0 !important;
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════
   3. MOBILE (≤ 768px) — APP DENEYIMI
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ──────────────────────────────────
     3.0  GLOBAL: Android + iOS uyumluluk
     ────────────────────────────────── */
  html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    /* touch-action html'e VERILMEZ — Android Chrome bazı sürümlerinde
       html üzerinde manipulation tek-parmak scroll'u kilitliyor; FastClick
       gerekmez (modern tarayıcılar zaten 300ms delay'i kaldırdı). */
  }
  body {
    overflow-x: hidden;
    /* overscroll-behavior 'contain' bazı Android Chrome sürümlerinde
       scroll-chain'i tamamen kesiyor — 'auto' ile native davranış kalsın.
       Yatay taşma html'de zaten engelleniyor, body'de tekrarladık. */
    overscroll-behavior-y: auto;
  }
  /* Modal/sidebar açıkken body scroll engelle (JS ile .mobile-no-scroll eklenir).
     position:fixed yerine sadece overflow:hidden — Android'de fixed body bazen
     scroll restore'da konum kaybına yol açıyor. JS scroll restore'ı yine yapıyor. */
  body.mobile-no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: var(--scroll-top, 0px);
    /* iOS Safari: rubberband'i durdur */
    overscroll-behavior: none;
  }

  /* ──────────────────────────────────
     3.1  SIDEBAR
     ────────────────────────────────── */
  .sidebar-toggle {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
  }
  .sidebar-toggle span { width: 20px; }
  .sidebar .nav-item {
    padding: 13px var(--space-5);
    font-size: var(--text-md);
    min-height: 44px;
  }
  .sidebar__footer {
    padding: var(--space-3) var(--space-4);
  }

  /* ──────────────────────────────────
     3.2  TOPBAR
     ────────────────────────────────── */
  .topbar {
    height: var(--topbar-height);
    padding: 0 var(--page-pad);
    gap: var(--space-2);
  }
  .topbar__title {
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .topbar__search { display: none; }
  .topbar__breadcrumb { display: none; }
  /* exchange-rate-bar: artık mobilde görünür (bkz. section 3.23 E) */
  .topbar .theme-toggle-btn {
    padding: 6px 8px;
    font-size: 14px;
    min-width: 36px;
    min-height: 36px;
  }

  /* ──────────────────────────────────
     3.3  MAIN CONTENT & PAGE
     ────────────────────────────────── */
  .main-content { margin-left: 0; }
  .page {
    padding: var(--page-pad);
  }

  /* ──────────────────────────────────
     3.4  DASHBOARD — APP-STYLE
     ────────────────────────────────── */

  /* Quick Actions: grid 3 sütun, kompakt */
  .dash-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: var(--section-gap);
  }
  .dash-quick-btn {
    flex-direction: column;
    gap: 4px;
    padding: 10px 4px;
    font-size: 11px;
    text-align: center;
    min-height: 0;
  }
  .dash-quick-btn i {
    font-size: 18px;
  }

  /* Welcome card: kompakt */
  .welcome-card {
    padding: var(--card-pad) var(--card-pad) var(--card-pad);
    margin-bottom: var(--section-gap);
    border-radius: var(--radius-lg);
  }
  .welcome-card__greeting {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
  .welcome-card__date {
    font-size: 11px;
  }

  /* Section titles */
  .dash-section-title {
    font-size: 11px;
    margin-bottom: var(--card-gap);
  }
  .dash-section-block {
    margin-bottom: var(--section-gap);
  }

  /* PANELS (Satışlar, Siparişler, Tahsilat): tek sütun */
  .dash-panels {
    grid-template-columns: 1fr !important;
    gap: var(--card-gap) !important;
    margin-bottom: var(--section-gap);
  }
  .dash-panel {
    padding: var(--card-pad);
    border-radius: var(--radius-lg);
  }
  .dash-panel__header {
    padding: 0;
    margin-bottom: 8px;
  }
  .dash-panel__title {
    font-size: var(--text-sm);
  }
  .dash-metric__value {
    font-size: var(--text-2xl);
  }
  .dash-metric__sub {
    font-size: var(--text-xs);
  }
  .dash-breakdown {
    gap: 4px;
    margin-top: 8px;
  }
  .dash-breakdown-item {
    padding: 3px 8px;
    font-size: var(--text-xs);
  }

  /* Panel dropdown */
  .dash-dd-btn {
    font-size: 11px;
    padding: 3px 8px;
  }
  .dash-dd-menu {
    min-width: 120px;
    right: 0;
    left: auto;
  }

  /* FINANS ÖZETI — 2 sütun grid, taşma yok */
  .dash-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }
  .dash-panel--mini {
    padding: 10px var(--card-pad);
    border-radius: var(--radius-lg);
  }
  .dash-panel--mini .dash-metric__value {
    font-size: var(--text-lg);
    word-break: break-all;
  }
  .dash-panel--mini .dash-panel__label {
    font-size: 10px;
  }

  /* ACTION CARDS: 2 sütun, kompakt */
  .dash-action-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap);
  }
  .action-card {
    padding: 10px;
    gap: 8px;
    border-radius: var(--radius-lg);
  }
  .action-card__icon { font-size: 18px; }
  .action-card__value { font-size: var(--text-lg); }
  .action-card__label { font-size: 11px; }
  .action-card__sub { display: none; }

  /* OPS ROW: 2 sütun */
  .dash-ops-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }
  .dash-ops-item {
    padding: 12px;
    border-radius: var(--radius-lg);
  }
  .dash-ops-item__count {
    font-size: var(--text-xl);
  }
  .dash-ops-item__label {
    font-size: 11px;
  }

  /* TWO-COL → tek sütun */
  .dash-two-col {
    grid-template-columns: 1fr !important;
    gap: var(--card-gap) !important;
  }

  /* FOUR-COL → 2 sütun (kompakt) */
  .dash-four-col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }

  /* ANALYTICS GRID → tek sütun */
  .dash-analytics-grid {
    grid-template-columns: 1fr !important;
    gap: var(--card-gap) !important;
  }

  /* Analytics card: kompakt */
  .dash-analytics-card {
    padding: var(--card-pad);
    border-radius: var(--radius-lg);
  }
  .dash-analytics-card__title {
    font-size: var(--text-sm);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  /* Dashboard rank items */
  .dash-rank-item {
    padding: 6px 0;
  }
  .dash-rank-val {
    font-size: var(--text-xs);
  }
  .dash-rank-bar {
    max-width: 50px;
  }

  /* Dashboard tabs (üst) */
  .dash-tabs__header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dash-tabs__header::-webkit-scrollbar { display: none; }
  .dash-tab-btn {
    padding: 10px 14px;
    font-size: var(--text-sm);
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .dash-tab-panel { padding: 14px; }

  /* Focus items */
  .dash-focus-item {
    padding: 6px 0;
    font-size: var(--text-sm);
  }

  /* Mini items */
  .dash-mini-item {
    padding: 5px 0;
  }
  .dash-mini-item__no { font-size: 10px; min-width: 40px; }
  .dash-mini-item__name { font-size: var(--text-xs); }
  .dash-mini-item__val { font-size: 10px; }

  /* ──────────────────────────────────
     3.5  STAT CARDS (tüm sayfalar)
     ────────────────────────────────── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
    margin-bottom: var(--section-gap);
  }
  .stats-grid--3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-card {
    padding: 10px var(--card-pad);
    border-radius: var(--radius-lg);
  }
  .stat-card__label {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .stat-card__value {
    font-size: var(--text-xl);
    letter-spacing: -0.5px;
  }
  .stat-card__desc { font-size: 10px; }
  .stat-card__icon { font-size: 14px; right: 8px; top: 8px; }

  /* Mini stat card */
  .stat-card--mini {
    padding: 8px 10px;
  }
  .stat-card--mini .stat-card__value {
    font-size: var(--text-lg);
  }

  /* ──────────────────────────────────
     3.6  SECTION HEADER + FILTER BAR
     ────────────────────────────────── */
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .section-header__title {
    font-size: var(--text-base);
    width: 100%;
  }
  .section-header__actions {
    width: 100%;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .section-header__actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: var(--text-sm);
  }
  /* Arama kutusu: tam genişlik */
  .section-header__actions .search-input,
  .section-header__actions .stock-search-wrap {
    width: 100%;
    order: -1;
  }
  .stock-search-input {
    width: 100% !important;
  }

  /* Filter bar: yatay scroll */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    margin-bottom: 10px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  /* Advanced filters (stock, order): stack */
  .stock-advanced-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
  }
  .stock-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .stock-filter-select {
    width: auto;
    flex: 1;
    min-width: 100px;
  }
  .lead-filter-select {
    width: auto !important;
    flex: 1;
    min-width: 90px;
    height: 36px;
    font-size: var(--text-sm);
  }
  .stock-filter-price {
    width: 70px;
    flex: 0 0 auto;
  }
  .order-filter-date {
    width: auto;
    flex: 1;
    min-width: 100px;
  }

  /* ──────────────────────────────────
     3.7  TABLES — SCROLL-FRIENDLY
     ────────────────────────────────── */
  .table-container {
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--page-pad) * -1);
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .table {
    min-width: 580px;
  }
  .table th {
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: var(--color-surface-2);
    z-index: 2;
  }
  .table td {
    padding: 10px;
    font-size: var(--text-sm);
  }
  /* İşlem sütunları: dar */
  .table th[style*="width"], .table td:last-child {
    white-space: nowrap;
  }
  .actions-cell {
    gap: 3px;
  }
  .table-footer {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    margin: 0 calc(var(--page-pad) * -1);
    border-radius: 0;
    justify-content: center;
  }
  .table-info {
    font-size: 10px;
  }

  /* ──────────────────────────────────
     3.8  FORMS
     ────────────────────────────────── */
  .form-grid--2,
  .form-grid--3 {
    grid-template-columns: 1fr !important;
  }
  .form-group--span-2,
  .form-group--span-3 {
    grid-column: 1 !important;
  }
  .form-group {
    margin-bottom: 10px;
  }
  .form-label {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .form-input,
  .form-select,
  .form-textarea {
    padding: 11px 12px;
    font-size: 16px; /* iOS zoom engelle */
    border-radius: var(--radius-md);
  }

  /* Radio / checkbox */
  .radio-group {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Currency input group */
  .input-currency-group {
    flex-wrap: wrap;
  }
  .form-select--currency {
    width: 100%;
  }
  .currency-note {
    display: block;
    text-align: center;
  }

  /* ──────────────────────────────────
     3.9  MODALS — BOTTOM SHEET
     ────────────────────────────────── */
  /* (modal.css'deki mevcut bottom-sheet kuralları korunur,
     burada ekstra iyileştirmeler) */
  .modal__content,
  .modal__container {
    max-height: 92vh;
    max-height: 92dvh; /* Android: dinamik viewport (adres çubuğu dahil) */
  }
  .modal__title { font-size: var(--text-lg); }
  .modal__close {
    font-size: 22px;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal__footer .btn {
    min-height: 44px;
  }
  .modal-tabs {
    border-radius: var(--radius-md);
  }
  .modal-tabs__tab {
    padding: 10px 6px;
    font-size: 12px;
  }

  /* ──────────────────────────────────
     3.10  ORDER / QUOTE PRODUCT ROWS
     ────────────────────────────────── */
  .order-products-header,
  .purchase-products-header {
    display: none !important;
  }
  .order-product-row {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    position: relative;
    grid-template-columns: none !important;
  }
  .order-product-row .form-select,
  .order-product-row .form-input {
    width: 100% !important;
  }
  .order-product-row .opg-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    padding: 4px;
  }
  .order-product-row .opg-line-total {
    text-align: left;
    font-size: var(--text-md);
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
  }

  .purchase-product-row {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    position: relative;
    grid-template-columns: none !important;
  }
  .purchase-product-row .form-select,
  .purchase-product-row .form-input {
    width: 100% !important;
  }
  .ppg-product-cell {
    width: 100%;
  }

  /* Order total */
  .order-total-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    text-align: center;
    padding: 12px;
  }
  .order-total-input {
    width: 100%;
    text-align: center;
    font-size: var(--text-lg);
  }

  /* ──────────────────────────────────
     3.11  CUSTOMER DETAIL
     ────────────────────────────────── */
  .cdetail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0 14px;
  }
  .cdetail-header-info {
    width: 100%;
  }
  .cdetail-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
  .cdetail-name { font-size: var(--text-lg); }
  .cdetail-meta { flex-wrap: wrap; }
  .cdetail-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .cdetail-actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
  .cdetail-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap);
    margin-bottom: var(--section-gap);
  }
  .cdetail-stat {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
  }
  .cdetail-stat__label { font-size: 10px; }
  .cdetail-stat__value { font-size: var(--text-md); }

  /* Detail tabs */
  .cdetail-tabs__header,
  .pdetail-tabs__header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cdetail-tabs__header::-webkit-scrollbar,
  .pdetail-tabs__header::-webkit-scrollbar { display: none; }
  .cdetail-tab-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 13px;
  }
  .cdetail-tab-panel { padding: 14px; }
  .cdetail-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .cdetail-info-section {
    padding: 12px;
    border-radius: var(--radius-md);
  }
  .cdetail-info-label {
    min-width: 80px;
    font-size: 12px;
  }
  .cdetail-info-row { font-size: 12px; }

  /* ──────────────────────────────────
     3.12  PRODUCT DETAIL
     ────────────────────────────────── */
  .pdetail-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 10px;
  }
  .pdetail-hero__icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  .pdetail-hero__name {
    font-size: var(--text-lg);
    white-space: normal;
    word-break: break-word;
  }
  .pdetail-hero__actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .pdetail-hero__actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
  .pdetail-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap);
  }
  .pdetail-ozet-grid {
    grid-template-columns: 1fr !important;
  }
  .pdetail-stat-card {
    padding: 10px 12px;
  }
  .pdetail-stat-card__val { font-size: var(--text-lg); }
  .pdetail-info-card { padding: 12px; }

  /* ──────────────────────────────────
     3.13  SETTINGS
     ────────────────────────────────── */
  .settings-layout {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .settings-nav {
    position: static !important;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    border-radius: var(--radius-lg);
    padding: 0;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav__item {
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 12px;
    justify-content: center;
  }
  .settings-nav__item.is-active {
    border-bottom-color: var(--color-primary);
    border-left-color: transparent;
  }
  .settings-section {
    padding: 14px;
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
  }
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .settings-input { width: 100%; }

  /* Logo manager */
  .logo-manager__item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .logo-manager__preview { width: 100%; height: 48px; }

  /* IBAN */
  .iban-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .iban-item__actions { align-self: flex-end; }
  .iban-item__no { font-size: 11px; word-break: break-all; }

  /* Permissions */
  .perm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Integrations tab bar */
  .integ-tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .integ-tab-bar::-webkit-scrollbar { display: none; }
  .integ-tab-btn { flex: 0 0 auto; white-space: nowrap; }
  .integ-card { padding: 12px; }
  .integ-card__actions {
    flex-direction: column;
  }
  .integ-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ──────────────────────────────────
     3.14  BANK / KASA
     ────────────────────────────────── */
  .stats-grid--6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }
  .bank-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bank-tabs::-webkit-scrollbar { display: none; }
  .bank-tab-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 13px;
  }
  .bank-accounts-grid {
    grid-template-columns: 1fr !important;
  }
  .bank-account-card {
    padding: 14px;
  }
  .bank-account-card__actions { opacity: 1; }
  .bank-account-card__balance { font-size: 18px; }
  .bank-account-card__iban { font-size: 9px; }
  .bank-currency-row { gap: 6px; }
  .bank-currency-chip {
    padding: 4px 10px;
    font-size: var(--text-xs);
  }
  .bank-charts-grid { grid-template-columns: 1fr !important; }
  .bank-chart-card__body { padding: 12px; }
  .bank-pp-grid { grid-template-columns: 1fr !important; }
  .bank-adv-filters .form-group[style] {
    min-width: 0 !important;
    width: 100%;
  }

  /* ──────────────────────────────────
     3.15  STATISTICS
     ────────────────────────────────── */
  .stats-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .stats-topbar__dates {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .stats-topbar__dates::-webkit-scrollbar { display: none; }
  .stats-topbar__dates .filter-chip {
    flex: 0 0 auto;
  }
  .stats-topbar__right {
    width: 100%;
    flex-wrap: wrap;
  }
  .stats-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }
  .stats-kpi-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .stats-kpi-card__icon { width: 34px; height: 34px; font-size: 16px; }
  .stats-kpi-card__val { font-size: var(--text-base); }
  .stats-kpi-card__label { font-size: 10px; }
  .stats-tabs-nav {
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 8px;
  }
  .stats-tabs-nav::-webkit-scrollbar { display: none; }
  .stats-tab-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .stats-tab-panel { padding: 12px; }
  .stats-mini-grid,
  .stats-mini-grid--5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }
  .stats-charts-grid,
  .stats-tables-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .stats-chart-card__body { padding: 12px; min-height: 140px; }
  .stats-adv-filters {
    flex-direction: column;
    padding: 10px 12px;
    gap: 8px;
  }
  .stats-adv-filter { min-width: unset; }
  .stats-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .stats-filter-bar__right {
    align-items: flex-start;
    width: 100%;
  }
  .stats-custom-date {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .stats-custom-date .form-input--sm {
    flex: 1;
    min-width: 100px;
  }
  .stats-date-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stats-date-chips::-webkit-scrollbar { display: none; }

  /* Stats grid variants */
  .stats-grid--7,
  .stats-grid--5,
  .stats-grid--4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--card-gap) !important;
  }

  /* Distribution rows */
  .stats-dist-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .stats-dist-label {
    width: 100%;
    text-align: left;
    font-size: 11px;
  }
  .stats-dist-value { width: 60px; font-size: 11px; }
  .stats-dist-count { width: 30px; font-size: 10px; }
  .stats-rank-bar { max-width: 50px; }

  /* Stats sections */
  .stats-section { padding: 12px; }

  /* ──────────────────────────────────
     3.16  TASKS
     ────────────────────────────────── */
  .task-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin-right: 0;
    padding-bottom: 2px;
  }
  .task-filters::-webkit-scrollbar { display: none; }
  .task-filter-btn {
    flex: 0 0 auto;
    min-height: 36px;
  }

  /* ──────────────────────────────────
     3.17  LIGHTBOX
     ────────────────────────────────── */
  .lb-page-grid {
    grid-template-columns: 1fr !important;
  }
  .lb-field-row--3 { grid-template-columns: 1fr 1fr; }
  .lb-field-row--2 { grid-template-columns: 1fr; }
  .lb-panel { border-radius: var(--radius-lg); }
  .lb-panel__body { padding: 12px; }
  .lb-cart-item { gap: 8px; }
  .lb-cart-item__prices { font-size: var(--text-xs); }
  .lb-discount-input-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .lb-discount-input-row .btn { width: 100%; justify-content: center; }

  /* ──────────────────────────────────
     3.18  LOGS
     ────────────────────────────────── */
  .log-adv-filters {
    flex-direction: column;
    gap: 8px;
  }
  .log-adv-filters .form-group[style] {
    min-width: 0 !important;
    width: 100%;
  }

  /* ──────────────────────────────────
     3.19  PRINT OVERLAY
     ────────────────────────────────── */
  .print-overlay__bar {
    width: 100%;
    border-radius: 0;
    padding: 10px var(--page-pad);
    flex-wrap: wrap;
    gap: 6px;
  }
  .print-overlay__bar .btn { flex: 1; min-width: 0; justify-content: center; }
  .print-overlay__frame {
    width: 100%;
    border-radius: 0;
  }
  .print-overlay__frame .receipt {
    padding: 16px 12px;
    font-size: 11px;
  }
  .print-overlay__frame .receipt__header {
    flex-direction: column;
    gap: 10px;
  }
  .print-overlay__frame .receipt__logo { max-width: 100%; }
  .print-overlay__frame .receipt__doc { text-align: left; }
  .print-overlay__frame .receipt__info {
    flex-direction: column;
    gap: 10px;
  }
  .print-overlay__frame .receipt__table th,
  .print-overlay__frame .receipt__table td {
    padding: 5px 6px;
    font-size: 10px;
  }
  .print-overlay__frame .receipt__footer {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* ──────────────────────────────────
     3.20  TOAST — MOBILE CENTERED
     ────────────────────────────────── */
  .toast-container {
    left: var(--page-pad);
    right: var(--page-pad);
    bottom: var(--page-pad);
  }
  .toast {
    min-width: unset;
    width: 100%;
    font-size: var(--text-sm);
    padding: 10px 14px;
  }

  /* ──────────────────────────────────
     3.21  YETKILI ROWS
     ────────────────────────────────── */
  .yetkili-row {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
  }
  .yetkili-row__fields {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .yetkili-remove {
    align-self: flex-end;
    margin-top: -30px;
    padding: 6px 8px;
  }

  /* ──────────────────────────────────
     3.22  MISC
     ────────────────────────────────── */
  .empty-state { padding: 20px 12px; }
  .customer-select__item {
    padding: 12px 14px;
    font-size: var(--text-md);
    min-height: 44px;
  }
  .customer-select__dropdown { max-height: 50vh; }
  .ann-form-row { flex-direction: column; }
  .ann-form-date { width: 100%; }
  .ann-popover {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    z-index: 500;
  }
  .ekstre-tip-badge { font-size: 10px; padding: 2px 6px; }

  /* Inline style override: min-width sorunları */
  [style*="min-width:140px"],
  [style*="min-width:130px"],
  [style*="min-width:120px"] {
    min-width: 0 !important;
    width: 100%;
  }
  [style*="width:200px"],
  [style*="width:220px"] {
    width: 100% !important;
  }

  /* ══════════════════════════════════════════════════════
     3.23  MOBİL TASARIM SİSTEMİ — GLOBAL KURALLAR
     Tüm modüllerde geçerli: minimal, kontrollü, app-like
     ══════════════════════════════════════════════════════ */

  /* ── A. STAT KARTLARI: liste sayfalarında gizle ── */
  #page-cari > .stats-grid,
  #page-tahsilat > .stats-grid,
  #page-stok > .stats-grid,
  #page-teklifler > .stats-grid,
  #page-siparisler > .stats-grid,
  #page-tedarik > .stats-grid,
  #page-gorevler > .stats-grid,
  #page-users > .stats-grid,
  #page-banka-kasa > .stats-grid--6 {
    display: none !important;
  }

  /* ── B. GLOBAL METİN KONTROL — tüm tablolar ── */
  /* Tüm tablo hücreleri: kontrollü metin, kompakt */
  .table td {
    line-height: 1.3;
    font-size: 12px;
  }
  .table th {
    font-size: 10px;
  }
  /* user-cell (firma/isim hücreleri): ellipsis */
  .user-cell {
    max-width: 140px;
  }
  .user-cell__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    font-size: 12px;
  }
  .user-cell__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    font-size: 10px;
  }
  /* VKN label gizle — sadece numara göster */
  .user-cell__email .mobile-vkn-label {
    display: none;
  }
  /* Genel tablo td metin kısıtlama — liste sayfalarındaki tablolar */
  .page > .table-container .table td:first-child,
  .page > .table-container .table td:nth-child(2),
  .page > .table-container .table td:nth-child(3),
  .bank-tab-panel .table td:first-child,
  .bank-tab-panel .table td:nth-child(2),
  .bank-tab-panel .table td:nth-child(3) {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* İşlem sütunu: her zaman sığsın */
  .page > .table-container .table td:last-child,
  .bank-tab-panel .table td:last-child {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }
  /* Tutar/tarih/durum gibi kısa alanlar: nowrap, tabular */
  .table td .amount,
  .table td [data-amount],
  .table td .badge {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* ── C. BADGE SİSTEMİ — kompakt, hizalı ── */
  .badge {
    font-size: 10px;
    padding: 2px 6px;
    white-space: nowrap;
    line-height: 1.4;
  }

  /* ── D. SELECT / INPUT — minimal, okunur ── */
  .form-select--sm,
  .form-select.form-select--sm,
  .form-input--sm,
  .form-input.form-input--sm {
    font-size: 12px;
    padding: 7px 10px;
  }

  /* ── E. KUR BARI — mobilde görünür, kompakt ── */
  .exchange-rate-bar {
    display: flex !important;
    font-size: 9px;
    padding: 2px 6px;
    gap: 4px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .exchange-rate-bar .rate-badge {
    font-size: 10px;
  }

  /* ── F. COLLAPSIBLE FİLTRE SİSTEMİ ── */
  /* Bank + Log gelişmiş filtreler: varsayılan gizli, toggle ile açılır */
  .bank-adv-filters,
  .log-adv-filters {
    display: none !important;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
  }
  .bank-adv-filters.is-open,
  .log-adv-filters.is-open {
    display: flex !important;
  }
  /* Toggle buton stili */
  .mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .mobile-filter-toggle.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
  }
  .mobile-filter-toggle i {
    font-size: 13px;
  }

  /* ── G. CARİ DETAY ── */
  /* Tip sütunu gizle */
  #page-cari .table th:nth-child(2),
  #page-cari .table td:nth-child(2) {
    display: none;
  }
  /* Telefon: minimal, kompakt */
  #page-cari .table td:nth-child(4) {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: -0.2px;
  }
  /* Yetkili bilgisi: sıkı */
  #page-cari .table td:nth-child(3) .text-sm {
    font-size: 10px;
    margin-top: 1px;
  }

  /* ── H. STOK ── */
  #stock-import-btn {
    display: none !important;
  }
  /* Sıralama + filtre kontrolleri: düzgün akış */
  .stock-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    align-items: center;
  }
  .stock-filter-select {
    flex: 1;
    min-width: 80px;
    font-size: 12px;
    padding: 6px 8px;
  }
  .stock-filter-price {
    width: 60px;
    flex: 0 0 60px;
    font-size: 12px;
    padding: 6px 8px;
  }
  .stock-filter-sep {
    font-size: 10px;
    color: var(--color-text-muted);
    flex: 0 0 auto;
  }
  #stock-clear-filters,
  #order-clear-filters {
    font-size: 11px;
    padding: 5px 8px;
    min-height: 30px;
    white-space: nowrap;
  }
  #stock-clear-filters .bx,
  #order-clear-filters .bx {
    font-size: 12px;
  }
  /* Stok kolonu: kompakt */
  #page-stok .table td:nth-child(3) {
    white-space: nowrap;
    font-size: 11px;
  }

  /* ── I. TEKLİFLER — kontrollü metin + kompakt ── */
  #page-teklifler .table td:first-child {
    max-width: 80px;
    font-size: 11px;
  }
  #page-teklifler .table td:nth-child(2) {
    max-width: 90px;
  }
  #page-teklifler .table td:nth-child(3) {
    max-width: 80px;
    font-size: 11px;
  }

  /* ── J. SİPARİŞLER — aynı mantık ── */
  #page-siparisler .table td:first-child {
    max-width: 80px;
    font-size: 11px;
  }
  #page-siparisler .table td:nth-child(2) {
    max-width: 90px;
  }
  #page-siparisler .table td:nth-child(3) {
    max-width: 80px;
    font-size: 11px;
  }
  /* Sipariş filtre kontrolleri: stok ile aynı */
  .order-filter-date {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* ── K. TEDARİK — kontrollü ── */
  #page-tedarik .table td:first-child {
    max-width: 70px;
    font-size: 11px;
  }
  #page-tedarik .table td:nth-child(2) {
    max-width: 85px;
  }
  #page-tedarik .table td:nth-child(3) {
    max-width: 85px;
  }

  /* ── L. GÖREVLER — görev adı kontrollü ── */
  #page-gorevler .table td:first-child {
    max-width: 120px;
  }

  /* ── M. KULLANICILAR — kompakt ── */
  #page-users .table td:first-child {
    max-width: 110px;
  }

  /* ── N. LOGLAR — açıklama kontrollü, kompakt ── */
  #page-loglar .table td:nth-child(4) {
    max-width: 130px;
  }
  #page-loglar .table td:first-child {
    font-size: 10px;
    white-space: nowrap;
  }
  #page-loglar .section-header__actions [style*="width:200px"] {
    width: 100% !important;
  }

  /* ── O. BANKA / KASA — sade hareket ekranı ── */
  /* Döviz kırılımı: kompakt */
  .bank-currency-row {
    gap: 4px;
    margin-bottom: 8px;
  }
  .bank-currency-chip {
    font-size: 10px;
    padding: 3px 8px;
  }
  /* Tab bar: kompakt */
  .bank-tab-btn {
    font-size: 11px;
    padding: 8px 10px;
  }
  /* Hareket tablosu açıklama kısıtla */
  #bank-panel-hareketler .table td:nth-child(5) {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Referans kolonu kısıtla */
  #bank-panel-hareketler .table td:nth-child(6) {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Çek tablosu: kontrollü */
  #bank-panel-cekler .table td:nth-child(2) {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Ödeme planı: kompakt */
  #bank-panel-odemeler .table td:first-child {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Banka section header: kompakt */
  .bank-tab-panel .section-header {
    margin-bottom: 8px;
  }

  /* ── P. AYARLAR — kompakt, segmented nav ── */
  .settings-nav {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 2px;
  }
  .settings-nav__item {
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: 10px;
    border-bottom: none;
    gap: 3px;
    transition: background 0.15s, color 0.15s;
  }
  .settings-nav__item i {
    font-size: 13px;
  }
  .settings-nav__item.is-active {
    background: var(--color-primary);
    color: #fff;
    border-bottom-color: transparent;
  }
  .settings-section__title {
    font-size: 13px;
    margin-bottom: 6px;
  }
  .settings-section__desc {
    font-size: 11px;
    line-height: 1.4;
  }
  .settings-row__label {
    font-size: 12px;
  }
  .settings-row__sublabel {
    font-size: 10px;
    line-height: 1.3;
  }
  /* Yetki tablosu: kompakt, okunur */
  .perm-table {
    font-size: 11px;
  }
  .perm-table th {
    font-size: 9px;
    padding: 5px 3px;
    white-space: nowrap;
    letter-spacing: -0.2px;
  }
  .perm-table td {
    padding: 5px 3px;
    text-align: center;
  }
  .perm-table td:first-child {
    text-align: left;
    font-size: 10px;
    white-space: nowrap;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .perm-check {
    width: 18px;
    height: 18px;
  }
  /* Roller header: kompakt */
  #settings-tab-yetkiler > div:first-child {
    gap: 6px;
  }
  #settings-tab-yetkiler .settings-section__desc {
    font-size: 10px;
  }

  /* ── Q. CARİ DETAY — VKN label gizle ── */
  #cdetail-vkn .mobile-vkn-label {
    display: none;
  }

} /* end 768px */


/* ═══════════════════════════════════════════════════════
   4. SMALL PHONE (≤ 480px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Sidebar dar */
  .sidebar { width: 240px; }

  /* Topbar daha kısa */
  .topbar__title { font-size: 13px; }

  /* Page padding */
  .page { padding: var(--page-pad); }

  /* Dashboard */
  .dash-quick-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .dash-quick-btn {
    padding: 8px 2px;
    font-size: 10px;
  }
  .dash-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dash-action-cards {
    grid-template-columns: 1fr !important;
  }
  .dash-ops-row {
    grid-template-columns: 1fr !important;
  }
  .dash-four-col {
    grid-template-columns: 1fr !important;
  }
  .dash-panel--mini .dash-metric__value {
    font-size: var(--text-md);
  }

  /* Stats grid: tek sütun */
  .stats-grid,
  .stats-grid--3 {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .stats-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-mini-grid,
  .stats-mini-grid--5 {
    grid-template-columns: 1fr !important;
  }
  .stats-grid--7,
  .stats-grid--5,
  .stats-grid--4 {
    grid-template-columns: 1fr !important;
  }

  /* Customer detail stats */
  .cdetail-stats {
    grid-template-columns: 1fr !important;
  }
  .pdetail-stats {
    grid-template-columns: 1fr !important;
  }

  /* Table */
  .table { min-width: 440px; }
  .table th { padding: 6px 8px; font-size: 10px; }
  .table td { padding: 8px; font-size: 12px; }

  /* Modal */
  .modal__content,
  .modal__container {
    max-height: 95vh;
    border-radius: 14px 14px 0 0;
  }
  .modal__body { padding: var(--space-3); }
  .modal-tabs__tab { padding: 8px 4px; font-size: 11px; }

  /* Filter chips */
  .filter-chip {
    padding: 5px 9px;
    font-size: 11px;
    min-height: 32px;
  }

  /* Login */
  .login-form-panel { padding: 28px 16px; }
  .btn--login {
    min-height: 48px;
    font-size: var(--text-md);
  }

  /* Welcome */
  .welcome-card__greeting { font-size: var(--text-base); }

  /* Bank */
  .bank-account-card { padding: 12px; }
  .bank-account-card__balance { font-size: 16px; }
  .stats-grid--6 { grid-template-columns: 1fr !important; }

  /* Lightbox */
  .lb-field-row--3 { grid-template-columns: 1fr; }
  .lb-quote-boxes { gap: 8px; }
  .lb-quote-box { min-width: 50px; min-height: 36px; }

  /* Stats custom date */
  .stats-custom-date {
    flex-direction: column;
    gap: 4px;
  }
  .stats-custom-date .form-input--sm { width: 100%; }
  .stats-custom-date__sep { display: none; }

  /* Section header */
  .section-header__title { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════
   5. VERY SMALL PHONE (≤ 360px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .page { padding: 6px; }
  .topbar { padding: 0 8px; }
  .sidebar { width: 220px; }
  .modal__header { padding: 10px 12px; }
  .modal__body { padding: 10px 12px; }
  .modal__footer { padding: 10px 12px; }
  .btn { font-size: 12px; padding: 8px; }
  .stat-card__value { font-size: var(--text-lg); }
  .dash-quick-actions { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .dash-quick-btn { padding: 6px 2px; font-size: 9px; }
}


/* ═══════════════════════════════════════════════════════
   6. LANDSCAPE PHONE
   ═══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .modal__content,
  .modal__container { max-height: 96vh; }
  .modal__body { max-height: 60vh; }
  .sidebar__nav { max-height: calc(100vh - 110px); }
  .topbar { height: 44px; }
}


/* ═══════════════════════════════════════════════════════
   7. SAFE AREA (NOTCH / BOTTOM BAR)
   ═══════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .toast-container { padding-bottom: env(safe-area-inset-bottom); }
    .modal__footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
    .sidebar__footer { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
    .login-form-panel { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  }
}


/* ═══════════════════════════════════════════════════════
   7.1  MARKETING — LEAD DETAIL MOBILE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lead-detail-grid {
    grid-template-columns: 1fr !important;
  }
  #lead-detail-content h2 { font-size: var(--text-lg) !important; }
}

/* ═══════════════════════════════════════════════════════
   8. PRINT
   ═══════════════════════════════════════════════════════ */
@media print {
  .toast-container,
  .sidebar-toggle,
  .sidebar-overlay { display: none !important; }
}