:root {
  /* Kullanici talebi (2026-09-10): "sistemin bazi bolumleri Excel gibi
     gorunuyor, profesyonellestir" - varsayilan Bootstrap mavisi (#0d6efd,
     degistirilmeden birebir kullanilinca genellikle "amator/varsayilan"
     hissi verir) daha derin/ayirt edici bir tona cekildi; asil "Excel"
     hissini yaratan ise DUZ, golgesiz, ince gri cizgili kart/tablo tasarimi
     oldugu icin asagida bir golge (shadow) katmani + tablo zebra/baslik
     dolgusu eklendi - degisikliklerin cogu TEK stylesheet uzerinden TUM
     sisteme yayilsin diye burada, sayfa sayfa degil. */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --accent: #7c3aed;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e5e9f0;
  --danger: #dc2626;
  --success: #15803d;
  --warning: #b45309;

  /* Golge katmani - kartlar/menuler/modallar arasi gorsel derinlik icin.
     Onceden hicbir yerde box-shadow kullanilmiyordu, bu da her seyin AYNI
     duz zeminde durup bir "veri izgarasi" (Excel) hissi vermesine yol
     aciyordu. */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 2px 6px rgba(15,23,42,0.06), 0 8px 20px rgba(15,23,42,0.07);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
  --sidebar-width: 260px;
  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-text-active: #ffffff;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-accent: #4361ee;
  --sidebar-accent-dark: #3a56d4;

  /* Bootstrap 5 kok degiskenlerini kendi paletimize gore ayarla - boylece
     Bootstrap'in TUM bilesenleri (butonlar, badge'ler, alert'ler, ileride
     eklenebilecek modal/dropdown/nav-tabs) otomatik olarak markamizin
     renklerini kullanir, tek tek her bilesende renk override etmeye gerek
     kalmaz. --bs-primary zaten varsayilan olarak #0d6efd oldugundan (bizim
     --primary ile ayni) o zaten uyumluydu; digerlerini hizaliyoruz. */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 13, 110, 253;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-success: var(--success);
  --bs-success-rgb: 21, 128, 61;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 180, 83, 9;
  --bs-body-font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 10px;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  /* Genel guvenlik agi: masaustu icin tasarlanmis (yan yana flex kart,
     genis tablo vb.) bir eleman mobilde taskiginda TUM SAYFA yatay
     kaydirilabilir hale gelmesin - sadece o elemanin KENDI ICINDE
     (orn. .card { overflow-x: auto } ile) kaydirilir. */
  overflow-x: hidden;
  /* '-webkit-font-smoothing: antialiased' / '-moz-osx-font-smoothing: grayscale'
     BILEREK KALDIRILDI - bu ozellik macOS Retina'da hafif inceltme yapar
     ama Windows Chrome/Edge'de Inter gibi ince govdeli fontlarin
     ClearType'in normalde sagladigi subpixel netligini kapatip metni
     "silik/soluk" gosterir (kullanici talebi, 2026-09-09 - ekran
     goruntusu Windows Chrome idi). Kaldirinca tarayici platformun kendi
     varsayilan (Windows'ta ClearType) render motorunu kullanir, metin
     daha net/koyu gorunur; macOS'ta gorsel fark ihmal edilebilir duzeyde. */
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 12px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  border-right: 1px solid var(--sidebar-border);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  font-weight: 800;
  font-size: 1.08rem;
  color: #fff;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand i {
  color: #fff; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(13,110,253,0.35);
}

.sidebar-search { position: relative; padding: 14px 16px 6px; }
.sidebar-search i { position: absolute; left: 28px; top: 24px; color: #94a3b8; font-size: 0.8rem; }
.sidebar-search input {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 8px 10px 8px 30px; color: #fff; font-size: 0.82rem; font-family: inherit;
}
.sidebar-search input::placeholder { color: #94a3b8; }
.sidebar-search input:focus { outline: none; border-color: var(--sidebar-accent); background: rgba(255,255,255,0.1); }
.sidebar-currency {
  display: flex; align-items: center; gap: 10px; margin: 0 16px 10px; padding: 8px 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px;
}
.sidebar-currency-item { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; }
.sidebar-currency-label { color: #94a3b8; font-weight: 700; }
.sidebar-currency-value { color: #fff; font-weight: 700; }
.sidebar-currency-time { margin-left: auto; color: #64748b; font-size: 0.68rem; }
.global-search-results {
  position: absolute; top: 100%; left: 16px; right: 16px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.14);
  max-height: 60vh; overflow-y: auto; z-index: 1200; padding: 6px 0;
}
.gsr-group-label { padding: 6px 14px 2px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.gsr-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 14px; color: var(--text); font-size: 0.85rem; }
.gsr-item:hover { background: var(--primary-light); text-decoration: none; }
.gsr-sub { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.gsr-empty { padding: 12px 14px; color: var(--text-muted); font-size: 0.85rem; }

.sidebar-section-label {
  padding: 18px 20px 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1px 10px;
  padding: 9px 10px;
  color: var(--sidebar-text);
  font-size: 0.87rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a i {
  width: 26px; height: 26px; text-align: center; flex-shrink: 0; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(255,255,255,0.07);
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.sidebar-nav a.active {
  background: linear-gradient(90deg, var(--sidebar-accent) 0%, var(--sidebar-accent-dark) 100%);
  color: var(--sidebar-text-active);
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(67,97,238,0.4);
}
.sidebar-nav a.active i { background: rgba(255,255,255,0.22); color: #fff !important; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 0.8rem;
}
.sidebar-footer .user-name { color: #fff; font-weight: 600; display: block; margin-bottom: 8px; }
.sidebar-footer-links { display: flex; gap: 12px; align-items: center; }
.sidebar-footer-links a { color: var(--sidebar-text); font-size: 0.8rem; }
.sidebar-footer-links a:hover { color: #fff; }
.notif-badge {
  background: var(--danger); color: white; border-radius: 999px;
  padding: 1px 6px; font-size: 0.68rem; margin-left: 3px; font-weight: 700;
}

.mobile-topbar { display: none; }
.mobile-bottom-nav { display: none; }
.mobile-fab { display: none; }
.sidebar-overlay { display: none; }

/* ===== MAIN CONTENT ===== */
.main-content { margin-left: var(--sidebar-width); min-height: 100vh; }
/* embed=true render edilen sayfalar (bkz. header.ejs) - sidebar/topbar hic
   basilmadigi icin sol bosluk da kaldirilir; bu sayfalar sadece bir iframe
   icinde gosterilmek uzere render edilir. */
.main-content.embed { margin-left: 0; min-height: auto; }
/* Bootstrap'in KENDI ".container" sinifi (responsive max-width breakpoint'leri
   olan: 1400px+ ekranda 1320px'e sabitler vb.) bizim ana icerik sarmalayicimizla
   (header.ejs VE dealer-header.ejs'teki <div class="container">) AYNI ADI
   tasidigi icin, Bootstrap CSS'i eklendikten sonra sayfa icerigi 1920x1080
   gibi genis ekranlarda ortaya kucuk bir sutuna sikismis gibi gorunuyordu -
   Bootstrap'in max-width/margin:auto kurallari bizim kuralimizin dokunmadigi
   ozelliklerdi. Ayni sinifi (ozgullugu esit) ama SONRA tanimlayarak tam
   genislige geri sabitliyoruz - iki farkli layout'ta da (admin + bayi
   portali) calisir. */
.container { max-width: none; margin-left: 0; margin-right: 0; padding: 24px 30px; }

@media (max-width: 991px) {
  /* iOS Safari, bir input'un font-size'i 16px'in altindaysa dokunulunca
     sayfayi otomatik yakinlastirir - sidebar arama kutusu (0.82rem=13.12px)
     ve "Genel Bilgiler" compact-form alanlari (0.94rem=15.04px) bu esigin
     altindaydi (2026-09-11 mobil testte bulundu). Sadece mobilde 16px'e
     cikariliyor, masaustu gorunumu degismesin diye. */
  .sidebar-search input, .compact-form .form-group input, .compact-form .form-group select, .compact-form .form-group textarea,
  .kayit-zamani-field input, .hw-test-row input[type="text"], .hkm-banner select, .hkm-banner input, .status-select {
    font-size: 16px !important;
  }
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,0.3); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 14px;
    background: var(--sidebar-bg); color: #fff; padding: 12px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    position: sticky; top: 0; z-index: 900;
  }
  .mobile-topbar button { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
  .mobile-topbar .brand { font-weight: 800; }
  .sidebar-overlay.open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999;
  }
  .container { padding: 20px; }
  /* .search-form site genelinde kullanilan paylasilan bir sinif - bazi
     sayfalarda (Primler filtresi gibi) tek input+buton yerine 4-5 alan
     (select/tarih/buton) icerdiginde flex-wrap olmadigi icin mobilde
     sayfayi yatay kaydiriyordu (kullanici bulgusu, 2026-09-11). Genis
     ekranda zaten tek satira sigdigi icin bu satirin gorsel etkisi yok. */
  .search-form { flex-wrap: wrap; }
  .search-form .form-group { flex: 1 1 100% !important; }
  /* Mobil hamburger cekmecesi (sidebar) ~20 menu ogesi + 6 grup basligi
     yuzunden masaustu boyutlarla 1000px'i asip cekmece icinde kaydirma
     gerektiriyordu - kullanici "tek ekrana sigsin" dedi (2026-09-11).
     Doviz kutusu dekoratif/tekrar bilgi oldugu icin mobilde kaldirildi,
     geri kalan her ogenin dikey boslugu sikistirildi. */
  .sidebar-brand { padding: 8px 16px 6px; font-size: 0.9rem; }
  .sidebar-brand i { width: 24px; height: 24px; font-size: 0.8rem; }
  .sidebar-search { padding: 4px 16px 2px; }
  .sidebar-search input { padding: 4px 10px 4px 30px; font-size: 0.76rem; }
  .sidebar-search i { top: 15px; }
  .sidebar-currency { display: none; }
  .sidebar-section-label { padding: 4px 16px 1px; font-size: 0.56rem; }
  .sidebar-nav a { margin: 0 8px; padding: 2.5px 10px; font-size: 0.78rem; gap: 9px; }
  .sidebar-nav a i { width: 18px; height: 18px; font-size: 0.68rem; }
  .sidebar-footer { padding: 4px 16px; }
  /* Masaustunde yan yana durmasi icin inline "flex:X;min-width:Ypx" verilmis
     kartlar (13 sayfada ayni desen: Dashboard'daki "Son Islemler", Cari'deki
     "Tahsilat Kaydi", POS'un yan paneli vb.) - dar ekranda bu sabit
     min-width degeri asilip TUM SAYFAYI yatay kaydirilabilir yapiyordu
     (kullanici bulgusu, 2026-09-11: mobil test sirasinda tespit edildi).
     Inline style'i ezmek icin !important sart - tek tek 13 dosyayi
     duzenlemek yerine tek noktadan cozuluyor. */
  .card[style*="min-width"], .card[style*="flex"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }


  /* Canlinin alt sekme cubugu (Servis/Cari/Satış/Cihazlar/Menü) - birebir
     eslesme icin bkz. header.ejs. Safe-area-inset ile iPhone'un alt
     home-indicator seridinin altina gizlenmesi engellenir. */
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.66rem; font-weight: 600; text-decoration: none;
  }
  .mobile-bottom-nav a i, .mobile-bottom-nav button i { font-size: 1.15rem; }
  .mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color: var(--primary); }
  .mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover { text-decoration: none; color: var(--primary); }
  /* Alt cubuk icerigin ustune binmesin diye sayfa altina bosluk verilir. */
  .container { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)); }

  /* Canlida "Servis" (dashboard) listesinin ustunde, sagda kalici duran
     yuzen "+ Yeni Servis" dugmesi - alt sekme cubugunun tam ustune, ona
     binmeyecek sekilde konumlandirilir (canlida bu dugme liste icerigine
     biniyordu, bu gercek bir hata oldugu icin burada duzeltildi). */
  .mobile-fab {
    display: flex; position: fixed; right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0));
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: #fff; align-items: center; justify-content: center;
    font-size: 1.3rem; box-shadow: 0 6px 16px rgba(37,99,235,0.4); z-index: 940; text-decoration: none;
  }
  .mobile-fab:hover { color: #fff; text-decoration: none; }
}

/* ===== WHATSAPP SABLONLARI (canliyla birebir eslesen kategori/kart yapisi,
   2026-09-11) - onceden tek bir <table> satiri olarak listeleniyordu,
   canlida her sablon kendi kartinda, kategoriye gore renkli etiketle
   gruplanmis goruntuleniyor. ===== */
.wa-tpl-group-label {
  display: inline-block; color: #fff; font-weight: 700; font-size: 0.72rem;
  padding: 5px 14px; border-radius: 20px; margin: 4px 0 10px;
}
.wa-tpl-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.wa-tpl-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.wa-tpl-card-body { color: var(--text-muted); font-size: 0.82rem; white-space: pre-wrap; line-height: 1.5; }
.wa-tpl-add-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; border-radius: 10px;
  padding: 12px 16px; font-weight: 700; cursor: pointer;
}
.wa-tpl-vars-box { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 12px 14px; font-size: 0.8rem; color: #065f46; }
.wa-tpl-var-chip {
  display: inline-block; background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0;
  border-radius: 8px; padding: 4px 10px; margin: 3px 4px 3px 0; font-family: 'Courier New', monospace;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.wa-tpl-var-chip:hover { background: #a7f3d0; }

/* ===== BASIT TOPBAR (Bayi Portali gibi kucuk alanlar icin) ===== */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
}
.topbar .brand { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--text-muted); font-weight: 600; font-size: 0.88rem; }
.topbar nav a:hover { color: var(--primary); text-decoration: none; }

/* ===== CARDS / TABLES ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin-top: 0; font-size: 1.05rem; padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Kartlar icindeki tablolar dar (mobil) ekranlarda sikismak/satirlari
   cirkin sekilde kirmak yerine kendi icinde yatay kaydirilir - tabloyu
   her view dosyasinda ayri bir wrapper'a sarmadan genel bir cozum. */
.card { overflow-x: auto; scrollbar-width: thin; }
.card::-webkit-scrollbar { height: 6px; }
.card::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.card::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
/* Gercek Bootstrap .table sinifi HTML'e eklendi (bkz. views'teki <table
   class="table">) - kendi hucre dolgusu/kenarlik tasarimimizin Bootstrap'in
   varsayilan (daha dar) hucre dolgusu tarafindan ezilmemesi icin kendi
   kurallarimiz ".table" sinifini da ayni ozgullukte hedefler; boylece
   Bootstrap'in tablo motoru (degiskenler, hover/striped modifier'lari
   ileride kullanilabilir hale gelir) devrede ama gorunum degismez. */
table, .table { width: 100%; border-collapse: collapse; }
@media (max-width: 900px) { table, .table { min-width: 620px; } }
/* dash-service-table mobilde tablo degil, yigilan kart gorunumune
   donusuyor (asagida @media max-width:991px) - min-width:620px bu donusumu
   engelleyip kartin disina tasiyordu, ozellikle bu sinif icin iptal. */
@media (max-width: 991px) { table.dash-service-table, table.service-list-table, table.customers-list-table, table.devices-list-table, table.dealers-list-table, table.suppliers-list-table, table.b2b-orders-table, table.cari-servis-table, table.cari-payments-table, #cariPerakendeTable, table.material-requests-table, table.commissions-table, table.commissions-detail-table, table.pos-cart-table { min-width: 0; } }
th, td, .table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 1rem; }
/* Basligin arkasina hafif bir renk dolgusu + kalinca alt cizgi verildi -
   onceden govdeyle AYNI beyaz zeminde duran, sadece kucuk harfle ayirt
   edilen bir baslik satiri "veri izgarasi" (Excel) hissi veriyordu. */
th, .table th {
  color: var(--text-muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: .06em; font-weight: 700;
  white-space: nowrap; background: #f8fafc; border-bottom: 2px solid var(--border);
}
td, .table td { color: #000; }
tr > *:first-child { padding-left: 24px; }
tr > *:last-child { padding-right: 24px; }
/* Zebra: satirlar birbirinden ayirt edilsin, tek duz beyaz blok olmasin. */
tbody tr:nth-child(even) td { background: #f6f8fb; }
tbody tr:hover td { background: var(--primary-light); }
tbody tr:last-child td { border-bottom: none; }
th.sortable-th { cursor: pointer; user-select: none; transition: color .12s; }
th.sortable-th:hover { color: var(--primary); }
th.sortable-th .sort-arrow { color: var(--primary); font-size: 0.65rem; }

/* Canlı sistemdeki gibi gerçek Bootstrap ".table-sm"/".table-borderless"
   (ör. stok detay modalının bilgi tabloları) kullanılan yerlerde yukarıdaki
   kendi tablo tasarımımız (kalın hücre dolgusu, alt çizgi, büyük harf başlık,
   satır hover'ı, ilk/son hücre 24px boşluk) devreye girmesin - Bootstrap'in
   kendi kompakt/çizgisiz görünümü aynen korunsun (2026-09-08 pixel-parity
   denetiminde bulundu: bu genel kurallar canlının modal tablolarını da
   kalın çizgili bir listeye çeviriyordu).  Bu seçicilerin özgüllüğü ".table
   td" ile eşit olup dosyada SONRA geldiği için kazanır. */
/* DIKKAT: sadece ".table-sm.table-borderless" (ikisi BIRLIKTE, ör. stok
   detay modalinin etiket:deger tablosu) hedeflenir - sadece ".table-sm"
   (ör. musteri detayindaki cok kolonlu Servis/Odeme tablolari, "cd-table")
   bu resetten ETKILENMEMELI, yoksa kolonlar arasi bosluk sifirlanip
   metinler birbirine yapisir (2026-09-09, musteri detay sayfasinda
   yasandi - tek basina ".table-sm" cok genis bir secici oldugu icin bu
   kural yanlislikla ilgisiz tablolari da eziyordu). */
.table-sm.table-borderless td, .table-sm.table-borderless th {
  padding: 0.15rem 0; border-bottom: 0; text-align: left; text-transform: none;
  font-size: inherit; font-weight: inherit; letter-spacing: normal; color: inherit; white-space: normal;
}
.table-sm.table-borderless tr > *:first-child { padding-left: 0; }
.table-sm.table-borderless tr > *:last-child { padding-right: 0; }
.table-sm.table-borderless tbody tr:hover td { background: transparent; }
/* Duz ".table-borderless" (sinif tek basina) kullanan yerler icin de ayni
   kompakt gorunum korunur - bu daha az riskli, sadece cizgi/padding
   kaldiriyor, kolon genisligini etkilemiyor. */
.table-borderless td, .table-borderless th { border-bottom: 0; }
/* Genel ".table-sm" (baska hicbir ozel sinif olmadan) icin sadece
   Bootstrap'in kendi kompakt dolgusu (0.25rem) kullanilsin - bizim genel
   agir tablo dolgumuz (padding:12px 14px, buyuk harf baslik) devreye
   girmesin ama kolonlar arasi normal bosluk KALSIN. */
.table-sm td, .table-sm th { padding: 0.35rem 0.5rem; text-transform: none; font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.table-sm th { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: .05em; }

/* ===== BUTTONS =====
   Gercek Bootstrap 5 .btn/.btn-primary/.btn-outline-secondary/.btn-danger/
   .btn-sm bilesenleri kullanilir (bkz. header.ejs'teki Bootstrap CDN linki
   ve tum view'lerdeki class="btn btn-primary" vb.) - kendi eski ozel .btn
   tanimimiz KALDIRILDI ki Bootstrap'in gercek renk/hover/focus-ring/active
   motoru devreye girsin. Sadece marka kimligimize ozgu ince ayarlar (emoji+
   metin arasi bosluk, biraz daha yuvarlak kose, kalin yazi) Bootstrap'in
   KENDI CSS degiskenleri uzerinden ekleniyor - boylece btn-outline-secondary/
   btn-danger/btn-sm gibi TUM varyantlara otomatik yansir. */
.btn {
  --bs-btn-border-radius: 12px;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-y: 9px;
  --bs-btn-padding-x: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: box-shadow .15s, transform .1s, filter .15s;
}
.btn-sm { --bs-btn-border-radius: 10px; }
.btn-primary, .btn-success, .btn-danger { box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { box-shadow: var(--shadow-md); filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }

/* ===== FORMS ===== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 400; font-size: 0.9rem; color: #1e293b; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 14px 12px; border: 1px solid rgba(15,23,42,0.08); border-radius: 12px; font-size: 1rem;
  background: #fff; transition: border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 160px; }

/* ===== IÇ İÇE MODÜL KARTLARI (nested "module inside module" cards) =====
   Canlı sistemin servis kayıt modalındaki iki panelli ("Müşteri & Cihaz
   Tanımı" / "Arıza & Finans Detayları") görünümüyle eşleşir: dış kart
   içinde başlıklı, kendi arka planı olan alt kartlar. */
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .module-grid { grid-template-columns: 1fr; } }
.subcard {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 18px 6px;
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; margin-bottom: 14px;
  border-bottom: 2px solid var(--border); padding-bottom: 10px;
}
.section-title .icon { font-size: 1rem; }

/* Servis detay sayfasının "Genel Bilgiler" sekmesi tek ekrana sığsın diye
   (kullanıcı talebi, 2026-09-11: "kaydırma özelliğini istemiyorum") -
   SADECE bu sayfaya özel, global .form-group/.subcard varsayılanlarını
   (diğer tüm sayfaları) ETKİLEMEZ. Etiketler ayrıca daha belirgin/kalın
   yapıldı ("yazı kalınlıkları daha belirgin olsun"). */
.compact-form.module-grid { gap: 16px; }
.compact-form .form-group { margin-bottom: 9px; }
.compact-form .form-group label { margin-bottom: 3px; font-size: 0.82rem; font-weight: 700; color: #0f172a; }
.compact-form .form-group input, .compact-form .form-group select, .compact-form .form-group textarea {
  padding: 9px 11px; font-size: 0.94rem; border-radius: 9px;
}
.compact-form .form-group textarea { min-height: 0; }
.compact-form .subcard { padding: 13px 16px 8px; }
.compact-form .section-title { margin-bottom: 8px; padding-bottom: 7px; font-size: 0.78rem; }
.compact-form .hkm-banner { padding: 8px 12px !important; margin-bottom: 9px !important; }

/* Kayıt Türü / benzeri iki-seçenekli pill-radio grubu */
.pill-radio-group { display: inline-flex; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.pill-radio-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pill-radio-group label {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px;
  font-weight: 700; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.pill-radio-group input[type="radio"]:checked + label { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(15,23,42,.08); }

/* Kayıt Zamanı - başlık yanında küçük alan */
.kayit-zamani-field { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); }
.kayit-zamani-field input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.82rem; }

/* Genel Bilgiler / Garanti & Kontrol Listesi sekmeleri */
.form-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.form-tab-btn {
  background: none; border: none; padding: 12px 18px; font-weight: 700; font-size: 0.88rem;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.form-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.form-tab-panel[hidden] { display: none; }

/* Kontrol Listesi (Donanım Testleri) satırları */
.hw-test-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.hw-test-row:last-child { border-bottom: none; }
.hw-test-row input[type="text"] { flex: 1; min-width: 140px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.88rem; font-weight: 600; }
.hw-status-group { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.hw-status-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.hw-status-group label { padding: 5px 10px; border-radius: 7px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.hw-status-group input[value="test_edilmedi"]:checked + label { background: #f1f5f9; color: var(--text-muted); }
.hw-status-group input[value="calisiyor"]:checked + label { background: #f0fdf4; color: var(--success); }
.hw-status-group input[value="arizali"]:checked + label { background: #fef2f2; color: var(--danger); }
.hw-test-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 4px 8px; }

/* ===== HESAP KAPATMA / TESLİMAT PANELİ (canlının "hkm" paneliyle
   ayni renk/duzen dili) ===== */
.hkm-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }
.hkm-banner-status { background: #f8fafc; border: 1px solid var(--border); }
.hkm-banner-warranty { background: #f0fdf4; border: 1px solid #bbf7d0; }
.hkm-banner-label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); white-space: nowrap; }
.hkm-banner select, .hkm-banner input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; font-weight: 700; }

/* Servis durumu ozel dropdown'u - native <select><option> HTML/ikon render
   edemedigi icin (tarayici kurali), gercek Font Awesome ikonlu secim bir
   <button>+<div> menu ile yapiliyor, gercek <select> gizli kalip form
   submit'i onun uzerinden gider (bkz. services/detail.ejs). */
.status-dropdown { position: relative; min-width: 200px; }
.status-dropdown-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer; background-image: none !important;
}
.status-dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)); padding: 6px; max-height: 280px; overflow-y: auto;
}
.status-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.status-dropdown-item:hover { background: var(--primary-light); }
.status-dropdown-item.active { background: var(--primary-light); color: var(--primary-dark); }

.hkm-summary { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hkm-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.85rem; background: #fff; }
.hkm-summary-row:last-child { border-bottom: none; }
.hkm-summary-row span { color: var(--text-muted); font-weight: 600; }
.hkm-summary-row strong { font-weight: 700; }
.hkm-summary-row.muted { background: var(--primary-light); }
.hkm-summary-row.income { background: rgba(21,128,61,0.06); }
.hkm-summary-row.income span, .hkm-summary-row.income strong { color: var(--success); }
.hkm-summary-row.expense { background: rgba(220,38,38,0.06); }
.hkm-summary-row.expense span, .hkm-summary-row.expense strong { color: var(--danger); }
.hkm-summary-row.highlight { background: rgba(21,128,61,0.1); }
.hkm-summary-row.highlight strong { font-size: 1.05rem; color: var(--success); }

/* ===== BADGES =====
   ":not([class*="text-bg-"])" ile sinirlandi ki canlideki gibi gercek
   Bootstrap "badge text-bg-success/text-bg-light" bilesenleri (ör. stok
   detay modalinin B2B/kategori rozetleri) kendi ozel yuvarlak-hap
   tasarimimizla ezilmesin, Bootstrap'in kendi dolu-renk gorunumunu korusun
   (2026-09-08 pixel-parity denetiminde bulundu). */
.badge:not([class*="text-bg-"]) { display: inline-block; padding: 4px 11px; border-radius: 20px; font-weight: 600; font-size: 0.7rem; border: 1px solid; letter-spacing: .02em; }
.badge-onay_bekliyor { background:#fffbeb;color:var(--warning);border-color:#fcd34d; }
.badge-tamirde { background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe; }
.badge-hazir { background:#f0fdf4;color:var(--success);border-color:#86efac; }
.badge-test_asamasinda { background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe; }
.badge-emanet_alindi { background:#f0fdfa;color:#0f766e;border-color:#99f6e4; }
.badge-dis_serviste { background:#fff7ed;color:#c2410c;border-color:#fed7aa; }
.badge-kargoda { background:#eef2ff;color:#4338ca;border-color:#c7d2fe; }
.badge-parca_bekleniyor { background:#f8fafc;color:#64748b;border-color:var(--border); }
.badge-iade_edilecek { background:#fff7ed;color:#c2410c;border-color:#fed7aa; }
.badge-teslim_edildi { background:#f0fdf4;color:var(--success);border-color:#86efac; }
.badge-iptal, .badge-iade { background:#fef2f2;color:var(--danger);border-color:#fecaca; }
.badge-default { background:#f8fafc;color:var(--text-muted);border-color:var(--border); }
.badge-pending { background:#fffbeb;color:var(--warning);border-color:#fcd34d; }
.badge-accepted { background:#f0fdf4;color:var(--success);border-color:#86efac; }
.badge-rejected { background:#fef2f2;color:var(--danger);border-color:#fecaca; }
.badge-expired { background:#f8fafc;color:var(--text-muted);border-color:var(--border); }
.badge-return_requested { background:#fdf4ff;color:#a21caf;border-color:#f0abfc; }
.status-select { padding:4px 9px;border-radius:20px;font-weight:600;font-size:0.7rem;letter-spacing:.02em;border:1px solid;cursor:pointer;background:#f8fafc;color:var(--text-muted);border-color:var(--border); }
.status-select-pending { background:#fffbeb;color:var(--warning);border-color:#fcd34d; }
.status-select-in_progress { background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe; }
.status-select-completed { background:#f0fdf4;color:var(--success);border-color:#86efac; }
.status-select-cancelled { background:#fef2f2;color:var(--danger);border-color:#fecaca; }
.badge-returned { background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe; }
.badge-approved { background:#f0fdf4;color:var(--success);border-color:#86efac; }
.badge-dusuk { background:#f8fafc;color:var(--text-muted);border-color:var(--border); }
.badge-orta { background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe; }
.badge-yuksek { background:#fef2f2;color:var(--danger);border-color:#fecaca; }

/* ===== DETAY PANELLERI (canlidaki kart/panel gorunumu) =====
   "Bu tarz text bir panel istemiyorum, canli paneldeki gibi olsun"
   istegiyle eklendi (2026-09-08) - duz "Etiket: Deger" metin listesi
   yerine canlinin stok/urun detay modalindaki gibi rozetli baslik +
   iki sutunlu bilgi paneli + tam genislik aciklama karti duzeni.
   Var olan yuzlerce .card kullanimini etkilememek icin bilincli olarak
   ayri bir sinif seti (.info-panel, .info-row...) kullanildi, .card
   yeniden tanimlanmadi. */
.detail-header { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.detail-avatar { width:46px; height:46px; border-radius:12px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }
.detail-title-block h1 { margin:0 0 6px; }
.detail-badges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:760px) { .info-grid { grid-template-columns:1fr; } }
.info-panel { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.info-panel-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.info-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.info-row:last-child { border-bottom:none; }
.info-row-label { color:var(--text-muted); flex-shrink:0; }
.info-row-value { font-weight:600; text-align:right; }
.info-row-value .value-sub { color:var(--text-muted); font-weight:400; font-size:0.78rem; margin-left:4px; }

/* ===== FILTERS / SEARCH ===== */
.status-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.86rem; font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.status-chip i { color: var(--chip-color, var(--primary)); font-size: 0.95rem; }
.status-chip strong { font-weight: 700; }
.status-chip:hover { text-decoration: none; border-color: var(--chip-color, var(--primary)); box-shadow: var(--shadow-md); }
.status-chip.active { background: var(--primary-light); border-color: #c7d2fe; color: var(--primary-dark); box-shadow: none; }
.status-chip.active i { color: var(--primary); }

/* Dashboard durum kartlari (Onay Bekliyor/Tamirde/Hazir vb.) masaustunde
   buyuk kart olarak 2'li dizilince mobilde asiri yer kaplayip asil onemli
   "Son Islemler" listesini ekranin cok altina itiyordu - canlida ayni
   kartlar kucuk, 3'lu izgarada, tek satirlik "rozet" gorunumunde
   (kullanici "tek ekranda kaydirmadan gorulebilsin" dedi, 2026-09-11,
   canlinin mobil goruntusuyle karsilastirildi). */
@media (max-width: 991px) {
  /* Canlida rozetler SABIT 3'lu izgara DEGIL, dogal flex-wrap - kisa
     etiketler ("0 Kargoda" gibi) ayni satira 4 tane sigarken uzun etiketler
     3 taneye dusuyor. Grid'e sabitlemek kisa etiketlerde yer israf ediyordu
     (kullanicinin canli/klon ekran goruntusu karsilastirmasiyla bulundu,
     2026-09-11). */
  .status-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  /* Canlida mobilde "Dashboard" basligi + "Yeni Servis Kaydi" butonu hic
     gorunmuyor, rozetler direkt basliyor - topbar zaten marka/kimligi,
     .mobile-fab zaten "yeni servis" eylemini karsiliyor, bu satir sadece
     tekrar ve bosuna yer kaplıyordu (kullanicinin canli/klon ekran
     goruntusu karsilastirmasiyla bulundu, 2026-09-11). */
  .dashboard-page-header { display: none !important; }

  /* Dashboard "Son Islemler" - canlida bu bir masaustu TABLOSU degil, alt
     alta yigilan bir kart/liste gorunumu (Takip Kodu solda + Durum rozeti
     sagda AYNI SATIRDA, altinda Musteri, Cihaz, Ariza, Renk noktasi -
     IMEI/Ucret kolonlari mobilde hic gorunmuyor). Bizim <table> yapimiz
     ayni HTML'i degistirmeden CSS ile bu gorunume donusturuluyor
     (kullanicinin canli/klon ekran goruntusu karsilastirmasiyla bulundu,
     2026-09-11 - "aynı ekranda kaç satır görünüyor" farkinin asil sebebi
     buydu, sadece kart boyutu degil). td sirasi nth-child ile canlinin
     gorsel sirasina (Takip, Musteri, Cihaz, Ariza, Renk) donduruluyor. */
  .dash-service-table thead { display: none; }
  .dash-service-table, .dash-service-table tbody { display: block; width: 100%; }
  /* Bootstrap'in kendi kart dilini kullaniyor (card border/shadow/radius
     degerleri, alert-warning renkleri) - onceki gecis "arka planda anlamsiz
     bir renk kutusu" ve "kesikli cizgiler" gibi rastgele/amaturce
     durduğu icin kullanici tarafindan reddedildi (2026-09-11: "bootstrap
     yapisinda olsun, profesyonel yap"). Kesikli ic bolucu cizgiler
     tamamen kaldirildi, sadece bosluk ile gruplaniyor; tek "kutu" olan
     ariza notu artik Bootstrap'in gercek alert-warning renk paletiyle
     (sol kenarlik + acik sari) bilinçli bir "not/uyari" bileseni gibi
     duruyor; fiyat kartin altinda gercek bir Bootstrap card-footer
     (bg-light + ust cizgi) olarak ayriliyor. */
  .dash-service-table tr.dash-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 0; margin-bottom: 12px; border-radius: 10px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .dash-service-table tr.dash-row td { display: block; padding: 0 16px !important; border: none !important; max-width: none !important; }
  .dash-service-table tr.dash-row td:nth-child(1) { order: 1; padding-top: 14px !important; }
  .dash-service-table tr.dash-row td:nth-child(1) span { font-size: 0.72rem; letter-spacing: 0.02em; }
  .dash-service-table tr.dash-row td:nth-child(2) { order: 2; margin-top: 6px; }
  .dash-service-table tr.dash-row td:nth-child(2) .fw-bold { font-size: 1.05rem; letter-spacing: -0.01em; }
  .dash-service-table tr.dash-row td:nth-child(3) { order: 3; margin-top: 10px; }
  .dash-service-table tr.dash-row td:nth-child(3) .fw-bold { font-size: 0.95rem; }
  .dash-service-table tr.dash-row td:nth-child(4) > span.text-muted { display: none; }
  .dash-service-table tr.dash-row td:nth-child(6) { order: 4; margin-top: 10px; padding-bottom: 14px !important; font-size: 0.86rem; }
  .dash-service-table tr.dash-row td:nth-child(4) { order: 5; margin-top: 6px; }
  .dash-service-table tr.dash-row td:nth-child(5) { display: none; }
  .dash-service-table tr.dash-row td:nth-child(7) { position: absolute; top: 14px; right: 16px; }
  .dash-service-table tr.dash-row td:nth-child(8) {
    order: 6; text-align: right; margin-top: 4px; padding: 10px 16px !important;
    background: #f8f9fa; border-top: 1px solid rgba(0,0,0,.08) !important;
    font-size: 1.1rem; font-weight: 700; color: var(--text);
  }

  /* Servis Gecmisi listesi - ayni yigilan-kart mantigi, 7 kolonluk daha
     basit tablo icin (Takip Kodu, Musteri, Cihaz, Durum, Tarih, Ucret,
     Islemler). Islemler (Duzenle butonu) mobilde gizli - zaten satirin
     tamamina tiklamak ayni detay modalini aciyor. */
  .service-list-table thead { display: none; }
  .service-list-table, .service-list-table tbody { display: block; width: 100%; min-width: 0; }
  .service-list-table tr.svc-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 14px 78px 14px 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .service-list-table tr.svc-row td { display: block; padding: 3px 0 !important; border: none !important; }
  .service-list-table tr.svc-row td:nth-child(1) { order: 1; font-size: 0.72rem; letter-spacing: 0.02em; }
  .service-list-table tr.svc-row td:nth-child(2) { order: 2; margin-top: 4px; font-size: 1.02rem; }
  .service-list-table tr.svc-row td:nth-child(3) { order: 3; margin-top: 6px; }
  .service-list-table tr.svc-row td:nth-child(5), .service-list-table tr.svc-row td:nth-child(6) {
    order: 4; display: inline-block !important; color: var(--text-muted); font-size: 0.78rem; margin-right: 10px; margin-top: 8px;
  }
  .service-list-table tr.svc-row td:nth-child(7) { display: none; }
  .service-list-table tr.svc-row td:nth-child(4) { position: absolute; top: 14px; right: 14px; }

  /* Musteri Yonetimi listesi - avatar dekoratif oldugu icin mobilde
     gizlendi, isim en ustte buyuk baslik gibi, sonra iletisim, sonra kucuk
     ikincil satirda servis/ciro/son ziyaret. "Detayi Gor" butonu mobilde
     gizli - isim zaten /customers/:id'ye link. */
  .customers-list-table thead { display: none; }
  .customers-list-table, .customers-list-table tbody { display: block; width: 100%; min-width: 0; }
  .customers-list-table tr.cust-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .customers-list-table tr.cust-row td { display: block; padding: 3px 0 !important; border: none !important; }
  .customers-list-table tr.cust-row td:nth-child(1) { display: none; }
  .customers-list-table tr.cust-row td:nth-child(2) { order: 1; font-size: 1.02rem; }
  .customers-list-table tr.cust-row td:nth-child(3) { order: 2; margin-top: 3px; }
  .customers-list-table tr.cust-row td:nth-child(4), .customers-list-table tr.cust-row td:nth-child(5), .customers-list-table tr.cust-row td:nth-child(6) {
    order: 3; display: inline-block !important; margin-right: 10px; font-size: 0.78rem;
  }
  .customers-list-table tr.cust-row td:nth-child(4) { margin-top: 8px; width: 100%; text-align: left !important; }
  .customers-list-table tr.cust-row td:nth-child(4) .badge { margin-left: 0 !important; }
  .customers-list-table tr.cust-row td:nth-child(7) { display: none; }

  /* Satilik Cihazlar listesi - resim mobilde gizli (dekoratif), islem
     butonlari (Satis Kapat/Duzenle/Detay/Sil) bu sayfada satir tiklamasiyla
     acilan bir alternatifi olmadigi icin (digerlerinden farkli) GIZLENMEDI,
     alta tam-genislik bir buton sirasi olarak birakildi. */
  .devices-list-table thead { display: none; }
  .devices-list-table, .devices-list-table tbody { display: block; width: 100%; min-width: 0; }
  .devices-list-table tr.dev-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .devices-list-table tr.dev-row td { display: block; padding: 3px 0 !important; border: none !important; }
  .devices-list-table tr.dev-row td:nth-child(1) { display: none; }
  .devices-list-table tr.dev-row td:nth-child(2) { order: 1; }
  .devices-list-table tr.dev-row td:nth-child(3) { order: 2; }
  .devices-list-table tr.dev-row td:nth-child(4), .devices-list-table tr.dev-row td:nth-child(5) {
    order: 3; display: inline-block !important; margin-right: 12px; color: var(--text-muted); font-size: 0.76rem;
  }
  .devices-list-table tr.dev-row td:nth-child(6) { position: absolute; top: 14px; right: 14px; }
  .devices-list-table tr.dev-row td:nth-child(7) { order: 4; margin-top: 8px; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }

  /* Bayi Hesaplari listesi - 8 kolon, ayni yigilan-kart mantigi. */
  .dealers-list-table thead { display: none; }
  .dealers-list-table, .dealers-list-table tbody { display: block; width: 100%; min-width: 0; }
  .dealers-list-table tr.dealer-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .dealers-list-table tr.dealer-row td { display: block; padding: 3px 0 !important; border: none !important; text-align: left !important; }
  .dealers-list-table tr.dealer-row td:nth-child(1) { display: none; }
  .dealers-list-table tr.dealer-row td:nth-child(2) { order: 1; font-size: 1.02rem; }
  .dealers-list-table tr.dealer-row td:nth-child(3) { order: 2; color: var(--text-muted); font-size: 0.85rem; }
  .dealers-list-table tr.dealer-row td:nth-child(4) { order: 3; margin: 4px 0; }
  .dealers-list-table tr.dealer-row td:nth-child(5), .dealers-list-table tr.dealer-row td:nth-child(6), .dealers-list-table tr.dealer-row td:nth-child(7) {
    order: 4; display: inline-block !important; margin-right: 14px; font-size: 0.82rem;
  }
  .dealers-list-table tr.dealer-row td:nth-child(5) { margin-top: 8px; width: 100%; }
  .dealers-list-table tr.dealer-row td:nth-child(8) { order: 5; margin-top: 8px; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
  .dealers-list-table tr.dealer-row td:nth-child(8) .justify-content-end { justify-content: flex-start !important; }

  /* Tedarikciler listesi - 6 kolon, tum veri korunuyor (hicbir kolon
     kaldirilmadi), sadece yigilan-kart gorunumune donusturuluyor. */
  .suppliers-list-table thead { display: none; }
  .suppliers-list-table, .suppliers-list-table tbody { display: block; width: 100%; min-width: 0; }
  .suppliers-list-table tr.supplier-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .suppliers-list-table tr.supplier-row td { display: block; padding: 3px 0 !important; border: none !important; text-align: left !important; }
  .suppliers-list-table tr.supplier-row td:nth-child(1) { order: 1; font-size: 1.02rem; }
  .suppliers-list-table tr.supplier-row td:nth-child(2), .suppliers-list-table tr.supplier-row td:nth-child(3) { order: 2; }
  .suppliers-list-table tr.supplier-row td:nth-child(4), .suppliers-list-table tr.supplier-row td:nth-child(5) {
    order: 3; display: inline-block !important; margin-right: 14px; margin-top: 8px;
  }
  .suppliers-list-table tr.supplier-row td:nth-child(4) { text-align: left !important; }
  .suppliers-list-table tr.supplier-row td:nth-child(6) { order: 4; margin-top: 8px; padding-top: 8px !important; border-top: 1px solid var(--border) !important; }
  .suppliers-list-table tr.supplier-row td:nth-child(6) .justify-content-end { justify-content: flex-start !important; }

  /* B2B Siparisler - accept/reject/return islemleri BU LISTEDE ([[project-b2b-orders-twin]]
     geregi canliyla eslesen tek yer) oldugu icin mobilde HICBIR ISLEM
     butonu gizlenmiyor, tam genislikte, sarilabilir bir buton sirasi olarak birakiliyor. */
  .b2b-orders-table thead { display: none; }
  .b2b-orders-table, .b2b-orders-table tbody { display: block; width: 100%; min-width: 0; }
  .b2b-orders-table tr.b2b-order-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 14px 100px 14px 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .b2b-orders-table tr.b2b-order-row td { display: block; padding: 3px 0 !important; border: none !important; white-space: normal !important; }
  .b2b-orders-table tr.b2b-order-row td:nth-child(1) { order: 1; }
  .b2b-orders-table tr.b2b-order-row td:nth-child(2) { order: 2; margin-top: 4px; font-weight: 600; }
  .b2b-orders-table tr.b2b-order-row td:nth-child(3) { order: 3; margin-top: 4px; }
  .b2b-orders-table tr.b2b-order-row td:nth-child(4) { position: absolute; top: 14px; right: 14px; }
  .b2b-orders-table tr.b2b-order-row td:nth-child(5) { order: 4; margin-top: 10px; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }

  /* Malzeme Talepleri - 8 kolon, hicbiri kaldirilmadi. Durum bir <select>
     (rozet degil) oldugu icin tam genislikte, dokunmaya uygun birakildi. */
  .material-requests-table thead { display: none; }
  .material-requests-table, .material-requests-table tbody { display: block; width: 100%; min-width: 0; }
  .material-requests-table tr.material-request-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 14px 90px 14px 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .material-requests-table tr.material-request-row td { display: block; padding: 3px 0 !important; border: none !important; white-space: normal !important; }
  .material-requests-table tr.material-request-row td:nth-child(1) { order: 1; color: var(--text-muted); font-size: 0.75rem; }
  .material-requests-table tr.material-request-row td:nth-child(2) { order: 2; font-weight: 600; margin-top: 2px; }
  .material-requests-table tr.material-request-row td:nth-child(3), .material-requests-table tr.material-request-row td:nth-child(4), .material-requests-table tr.material-request-row td:nth-child(7) {
    order: 3; display: inline-block !important; margin-right: 10px; margin-top: 6px; color: var(--text-muted); font-size: 0.78rem;
  }
  .material-requests-table tr.material-request-row td:nth-child(5) { position: absolute; top: 14px; right: 14px; }
  .material-requests-table tr.material-request-row td:nth-child(6) { order: 4; margin-top: 10px; }
  .material-requests-table tr.material-request-row td:nth-child(6) select { width: 100%; }
  .material-requests-table tr.material-request-row td:nth-child(8) { order: 5; margin-top: 10px; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }

  /* Primler - Personel Bazli Ozet, 7 kolon, hicbiri kaldirilmadi. */
  .commissions-table thead { display: none; }
  .commissions-table, .commissions-table tbody { display: block; width: 100%; min-width: 0; }
  .commissions-table tr.commission-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .commissions-table tr.commission-row td { display: block; padding: 3px 0 !important; border: none !important; }
  .commissions-table tr.commission-row td:nth-child(1) { order: 1; font-size: 1.02rem; }
  .commissions-table tr.commission-row td:nth-child(2), .commissions-table tr.commission-row td:nth-child(3), .commissions-table tr.commission-row td:nth-child(4) {
    order: 2; display: inline-block !important; margin-right: 12px; margin-top: 4px; color: var(--text-muted); font-size: 0.8rem;
  }
  .commissions-table tr.commission-row td:nth-child(2)::before { content: "Servis: "; }
  .commissions-table tr.commission-row td:nth-child(3)::before { content: "Parça: "; }
  .commissions-table tr.commission-row td:nth-child(4)::before { content: "Net Kâr: "; }
  .commissions-table tr.commission-row td:nth-child(5) { order: 3; margin-top: 10px; padding-top: 8px !important; border-top: 1px solid var(--border) !important; display: inline-block !important; margin-right: 12px; }
  .commissions-table tr.commission-row td:nth-child(6) { order: 3; margin-top: 10px; padding-top: 8px !important; display: inline-block !important; font-weight: 700; }
  .commissions-table tr.commission-row td:nth-child(7) { order: 4; margin-top: 8px; }

  /* Primler - alt taraftaki detayli islem gecmisi tablosu, 11 kolon, hicbiri
     kaldirilmadi (Tarih/Personel/Servis No/Parca-Islem/Adet/Alis/Satis/
     NetKar/Prim%/PrimUSD/PrimTL). */
  .commissions-detail-table thead { display: none; }
  .commissions-detail-table, .commissions-detail-table tbody { display: block; width: 100%; min-width: 0; }
  .commissions-detail-table tr.commission-detail-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 14px; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .commissions-detail-table tr.commission-detail-row td { display: block; padding: 2px 0 !important; border: none !important; font-size: 0.85rem; }
  .commissions-detail-table tr.commission-detail-row td:nth-child(1) { order: 1; color: var(--text-muted); font-size: 0.72rem; }
  .commissions-detail-table tr.commission-detail-row td:nth-child(2) { order: 2; font-weight: 700; }
  .commissions-detail-table tr.commission-detail-row td:nth-child(3), .commissions-detail-table tr.commission-detail-row td:nth-child(5) {
    order: 3; display: inline-block !important; margin-right: 10px; color: var(--text-muted); font-size: 0.78rem;
  }
  .commissions-detail-table tr.commission-detail-row td:nth-child(4) { order: 4; margin-top: 4px; }
  .commissions-detail-table tr.commission-detail-row td:nth-child(6), .commissions-detail-table tr.commission-detail-row td:nth-child(7),
  .commissions-detail-table tr.commission-detail-row td:nth-child(8), .commissions-detail-table tr.commission-detail-row td:nth-child(9) {
    order: 5; display: inline-block !important; margin-right: 10px; margin-top: 6px; color: var(--text-muted); font-size: 0.74rem;
  }
  .commissions-detail-table tr.commission-detail-row td:nth-child(10), .commissions-detail-table tr.commission-detail-row td:nth-child(11) {
    order: 6; display: inline-block !important; margin-right: 12px; margin-top: 8px; padding-top: 8px !important;
    border-top: 1px solid var(--border) !important; font-weight: 700; font-size: 0.95rem;
  }

  /* POS sepeti - Adet/Birim Fiyat DUZENLENEBILIR input olduğu icin (statik
     rozete cevrilemez), yan yana kucuk bir input cifti olarak korunuyor,
     geri kalani (urun adi, kur, toplam, sil) yigilan-kart duzeninde. Sepet
     bu sayfanin ANA islevi oldugu icin hicbir alan gizlenmedi. */
  .pos-cart-table thead { display: none; }
  .pos-cart-table, .pos-cart-table tbody { display: block; width: 100%; min-width: 0; }
  .pos-cart-table tr.pos-cart-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 12px 40px 12px 12px; margin-bottom: 8px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  .pos-cart-table tr.pos-cart-row td { display: block; padding: 2px 0 !important; border: none !important; }
  .pos-cart-table tr.pos-cart-row td:nth-child(1) { order: 1; }
  .pos-cart-table tr.pos-cart-row td:nth-child(2) { order: 2; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }
  .pos-cart-table tr.pos-cart-row td:nth-child(3), .pos-cart-table tr.pos-cart-row td:nth-child(4) {
    order: 3; display: inline-block !important; margin-right: 10px; margin-top: 8px;
  }
  .pos-cart-table tr.pos-cart-row td:nth-child(3)::before { content: "Adet"; display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 2px; }
  .pos-cart-table tr.pos-cart-row td:nth-child(4)::before { content: "Birim Fiyat"; display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 2px; }
  .pos-cart-table tr.pos-cart-row td:nth-child(5) {
    order: 4; margin-top: 8px; padding-top: 8px !important; border-top: 1px solid var(--border) !important;
    font-weight: 700; font-size: 1rem;
  }
  .pos-cart-table tr.pos-cart-row td:nth-child(6) { position: absolute; top: 12px; right: 8px; }

  /* Cari drawer icindeki Servis/Odeme gecmisi tablolari - musteri detay
     panelini mobilde acinca yatay kaydirma gerektiriyordu (kullanici
     bulgusu, 2026-09-11). Servis: Tarih/Takip/Cihaz/Islem/Tutar/Durum -
     hicbir kolon kaldirilmadi. */
  .cari-servis-table thead, .cari-payments-table thead { display: none; }
  .cari-servis-table, .cari-servis-table tbody, .cari-payments-table, .cari-payments-table tbody { display: block; width: 100%; min-width: 0; }
  .cari-servis-table tr.cari-servis-row {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 12px; margin-bottom: 8px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
  }
  .cari-servis-table tr.cari-servis-row td { display: block; padding: 2px 0 !important; border: none !important; font-size: 0.85rem; }
  .cari-servis-table tr.cari-servis-row td:nth-child(1) { order: 1; color: var(--text-muted); font-size: 0.75rem; }
  .cari-servis-table tr.cari-servis-row td:nth-child(2) { order: 2; font-weight: 600; }
  .cari-servis-table tr.cari-servis-row td:nth-child(3) { order: 3; }
  .cari-servis-table tr.cari-servis-row td:nth-child(4) { order: 4; color: var(--text-muted); }
  .cari-servis-table tr.cari-servis-row td:nth-child(5), .cari-servis-table tr.cari-servis-row td:nth-child(6) {
    order: 5; display: inline-block !important; margin-right: 10px; margin-top: 4px; font-weight: 600;
  }
  .cari-payments-table tbody tr {
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
    padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
  }
  .cari-payments-table tbody tr td { display: block; padding: 2px 0 !important; border: none !important; font-size: 0.85rem; }
  .cari-payments-table tbody tr td:nth-child(1) { order: 1; color: var(--text-muted); font-size: 0.75rem; }
  .cari-payments-table tbody tr td:nth-child(2) { order: 2; font-weight: 600; }
  .cari-payments-table tbody tr td:nth-child(3) { order: 3; }
  .cari-payments-table tbody tr td:nth-child(4) { order: 4; color: var(--text-muted); font-size: 0.78rem; }

  /* Cari Hesaplar listesi - kolon 1'de zaten avatar+isim+telefon birlikte,
     geri kalanlari (tip rozeti, servis sayisi, odeme, bakiye) altina
     yigilan ikincil satirlara donusturur, ok isareti sag ustte kalir. */
  table.table:has(tr.cari-row) { min-width: 0; }
  table.table:has(tr.cari-row) thead { display: none; }
  table.table:has(tr.cari-row), table.table:has(tr.cari-row) tbody { display: block; width: 100%; }
  tr.cari-row {
    display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
    padding: 14px 34px 14px 14px !important; margin-bottom: 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  }
  tr.cari-row td { display: block; padding: 3px 0 !important; border: none !important; }
  tr.cari-row td:nth-child(1) { order: 1; }
  tr.cari-row td:nth-child(2) { order: 2; font-size: 0.8rem; }
  tr.cari-row td:nth-child(3) { order: 3; color: var(--text-muted); font-size: 0.78rem; }
  tr.cari-row td:nth-child(4), tr.cari-row td:nth-child(5) { order: 4; display: inline-block !important; margin-right: 14px; font-size: 0.85rem; }
  tr.cari-row td.cari-row-chevron { position: absolute; top: 14px; right: 10px; width: auto; }
  .status-chip {
    padding: 7px 9px; font-size: 0.64rem; gap: 4px; border-radius: 8px;
    white-space: nowrap;
  }
  .status-chip i { font-size: 0.72rem; }
}

/* .alert / .alert-danger artik Bootstrap'in gercek alert bileseni - sadece
   yazi boyutu gibi ince bir marka dokunuşu ekleniyor, renk/arka plan/kenarlik
   Bootstrap'in kendi --bs-danger degiskenimize baglanmis motorundan gelir. */
.alert { font-size: 0.88rem; }

.search-form { margin-bottom: 18px; display: flex; gap: 8px; }
.search-form input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 9px; }

/* ===== SUMMARY / STAT CARDS ===== */
.summary-cards { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.summary-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px;
  padding: 14px 18px; flex: 1; min-width: 180px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.summary-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.summary-card.income { border-left-color: #22c55e; }
.summary-card.expense { border-left-color: var(--danger); }
.summary-card.net { border-left-color: var(--primary); }
.summary-card .label { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; font-weight: 600; }
.summary-card .value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.summary-card.income .value { color: var(--success); }
.summary-card.expense .value { color: var(--danger); }
.summary-card.net .value { color: var(--primary); }

/* ===== CARI: ikonlu ozet kartlari, satir tiklamayla acilan yan panel ===== */
.cari-summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1200px) { .cari-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cari-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.cari-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-left: 3px solid transparent;
  /* Grid/flex ogeleri varsayilan min-width:auto tasir - deger metni
     kirilamayinca (orn. "561.294 ₺") 1fr/flex paylasimini yok sayip
     konteynerin disina tasiyordu (kullanici bulgusu, 2026-09-11: bu karti
     iceren HEM cari-summary-grid HEM cari-drawer-stats mobilde sayfayi
     yatay kaydiriyordu). Tabanda tek noktadan duzeltildi. */
  min-width: 0;
}
.cari-stat-value { overflow-wrap: break-word; }
.cari-stat-card.accent-primary { border-left-color: var(--primary); }
.cari-stat-card.accent-success { border-left-color: #22c55e; }
.cari-stat-card.accent-danger { border-left-color: var(--danger); }
.cari-stat-card.accent-warning { border-left-color: #f59e0b; }
.cari-stat-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.cari-stat-card.accent-primary .cari-stat-icon { background: var(--primary-light); }
.cari-stat-card.accent-success .cari-stat-icon { background: #dcfce7; }
.cari-stat-card.accent-danger .cari-stat-icon { background: #fee2e2; }
.cari-stat-card.accent-warning .cari-stat-icon { background: #fef3c7; }
.cari-stat-label { color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 4px; }
.cari-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.cari-stat-sub { color: var(--text-muted); font-size: 0.74rem; margin-top: 3px; }

.cari-row { cursor: pointer; transition: background-color .12s; }
.cari-row:hover td { background: var(--primary-light) !important; }
.cari-row-chevron { color: var(--text-muted); font-size: 1.1rem; text-align: right; width: 24px; }

/* Sag'dan acilan detay paneli */
.cari-drawer-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  z-index: 2100; backdrop-filter: blur(1px);
}
.cari-drawer-overlay.open { display: block; }
.cari-drawer {
  /* 100vw kaydirma cubugu genisligini de sayar (klasik CSS tuzagi), bu
     yuzden position:fixed bir elemente verilince sayfayi hafifce
     tasiriyordu (kullanici bulgusu, 2026-09-11: mobil cari panelinde
     yatay kaydirma). Fixed elemanlarda % gercek viewport genisligini
     (scrollbar haric) verir, 100vw vermez - bu yuzden 100% kullanildi. */
  position: fixed; top: 0; right: 0; height: 100%; width: min(900px, 100%);
  background: var(--surface); z-index: 2101; box-shadow: -8px 0 30px rgba(15,23,42,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
}
.cari-drawer.open { transform: translateX(0); }

/* SweetAlert2 varsayilan z-index'i (1060) kendi modallarimizin (orn. HKM
   modali 2000, cari drawer 2101) altinda kaliyordu - bir modal icinden
   confirm() -> Swal donusumu tetiklendiginde onay penceresi gorunse de
   tiklamalar altta kalan modal ogeleri tarafindan yutuluyordu (orn. "parca
   iptal edilemiyor" hatasi). Swal her zaman en ustte olmali. */
.swal2-container { z-index: 9999 !important; }
.cari-drawer-header {
  display: flex; align-items: center; gap: 14px; padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--surface) 100%);
}
.cari-drawer-avatar {
  width: 50px; height: 50px; border-radius: 15px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent, #7c3aed));
  box-shadow: 0 8px 20px rgba(37,99,235,0.32);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0;
}
.cari-drawer-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.cari-drawer-sub { color: var(--text-muted); font-size: 0.84rem; margin-top: 2px; }
.cari-drawer-close {
  margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  width: 32px; height: 32px; font-size: 1.05rem; color: var(--text-muted);
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: color .12s, box-shadow .12s;
}
.cari-drawer-close:hover { color: var(--danger); box-shadow: var(--shadow-md); }
.cari-drawer-actions { display: flex; gap: 8px; padding: 16px 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* Grid ogeleri varsayilan olarak min-width:auto tasir - icerik (etiket/
   deger metni) kirilamayinca 1fr paylasimini yok sayip track'i konteynerin
   disina tasiriyordu (klasik CSS Grid tuzagi, kullanici bulgusu, 2026-09-11:
   USD Bakiye karti mobilde sayfayi yatay kaydiriyordu). min-width:0 gercek
   1fr esit-bolusum davranisini geri getirir. */
.cari-drawer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 22px; flex-shrink: 0; }
.cari-drawer-stats .cari-stat-card { min-width: 0; }
.cari-drawer-stats .cari-stat-card { padding: 12px 14px; }
.cari-drawer-stats .cari-stat-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
.cari-drawer-stats .cari-stat-label { font-size: 0.64rem; margin-bottom: 3px; }
.cari-drawer-stats .cari-stat-value { font-size: 1.08rem; }
.cari-drawer-tabs {
  display: flex; gap: 2px; margin: 0 22px 0; background: var(--sidebar-bg); border-radius: 12px;
  padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.cari-drawer-tab {
  flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  color: var(--sidebar-text); font-size: 0.82rem; font-weight: 600; user-select: none;
  transition: background-color .15s, color .15s;
}
.cari-drawer-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cari-drawer-tab .badge-count { background: rgba(255,255,255,0.15); border-radius: 999px; padding: 1px 7px; font-size: 0.7rem; margin-left: 5px; }
.cari-drawer-tab.active .badge-count { background: var(--primary-light); color: var(--primary); }
.cari-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 22px; }
/* Drawer tablolari (Servis/Perakende) sayfa genelindeki tablolardan daha
   dar bir alanda daha fazla sutun tasidigi icin biraz daha kompakt bir
   yazi boyutu kullanir (kullanici talebi, 2026-09-10: "yazı fontlarını
   biraz küçült"). Sadece govde hucreleri kucultuluyor, baslik satiri zaten
   genel kuraldan (0.68rem) kucuk oldugu icin dokunulmadi. */
.cari-drawer-body td, .cari-drawer-body .table td { font-size: 0.86rem; padding: 10px 12px; }
.cari-drawer-inline-form { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.cari-drawer-inline-form h4 { margin: 0 0 10px; font-size: 0.86rem; }

/* ===== LOGIN ===== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(37,99,235,0.35), transparent),
    radial-gradient(800px 500px at 85% 90%, rgba(124,58,237,0.35), transparent),
    linear-gradient(135deg, #0f172a, #1e293b);
}
.login-card {
  background: var(--surface); border-radius: 20px; padding: 44px; width: 100%; max-width: 400px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.login-card h1 { font-size: 1.5rem; margin-bottom: 26px; letter-spacing: -0.02em; }
.login-logo {
  width: 52px; height: 52px; border-radius: 10px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem;
  box-shadow: 0 8px 24px rgba(37,99,235,0.35);
}

.pos-result-row:hover { background: var(--primary-light); }

/* ===== MÜŞTERİ DETAY (customer_detail.php birebir kopyası) =====
   2026-09-09: canlıda GERÇEKTEN ayrı bir sayfa olduğu (customers.php'nin
   satırları buraya link veriyor) doğrudan kaynaktan doğrulandı - önceki
   turda "canlıda karşılığı yok, kendi eklentimiz" diye işaretlenmişti, bu
   YANLIŞTI. Sınıflar/renkler canlının gerçek CSS'inden (getComputedStyle +
   <style> bloğu) birebir alındı. */
.cd-profile-card {
  background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
  border-radius: 20px; padding: 28px; color: #fff;
  box-shadow: 0 8px 32px rgba(67,97,238,.25);
}
.cd-profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.kpi-card {
  background: #fff; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05); height: 100%;
  display: flex; align-items: center; gap: 14px;
}
.kpi-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.kpi-val { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: #1e293b; }
.kpi-lbl { font-size: .72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.cd-section-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.05); overflow: hidden; margin-bottom: 24px; }
.cd-tabs-nav { background: #0f172a; padding: 10px 12px 0; border: 0; }
.cd-tabs-nav .nav-link { color: rgba(255,255,255,.65); border: 0; border-radius: 10px 10px 0 0; font-size: .85rem; font-weight: 600; padding: 10px 16px; }
.cd-tabs-nav .nav-link.active { background: #fff; color: #0f172a; }
.cd-tabs-nav .badge-count { margin-left: 4px; font-size: .68rem; }
.cd-empty-tab { text-align: center; padding: 48px 16px; color: #94a3b8; }
.cd-srv-row { cursor: pointer; }
.cd-srv-row:hover { background: #f8fafc; }
.pay-badge { border-radius: 6px; padding: 2px 8px; font-size: .78rem; font-weight: 600; }
.pay-badge.nakit { background: #dcfce7; color: #15803d; }
.pay-badge.kredi_karti, .pay-badge.kart { background: #dbeafe; color: #1d4ed8; }
.pay-badge.veresiye { background: #fef3c7; color: #b45309; }
.pay-badge.manuel, .pay-badge.bakiye, .pay-badge.usd_bakiye, .pay-badge.havale { background: #f1f5f9; color: #475569; }
@media print { .btn-print-hide { display: none !important; } }

/* Barkod/IMEI giris alanlari - kullanici talebi (2026-09-10): tarama
   sirasinda ya da elle yazarken rakamlarin daha okunakli/dogrulanabilir
   olmasi icin kalin font. Servisler/Satilik Cihazlar/Cihaz Alim-Satim/
   Stok modullerindeki tum barkod/IMEI alanlarinda kullanilir. */
.barcode-input { font-weight: 700; letter-spacing: .3px; }
.barcode-lookup-hint { font-size: .78rem; margin-top: 4px; min-height: 18px; }
.barcode-lookup-hint.found { color: #b45309; }
.barcode-lookup-hint.empty { color: var(--text-muted, #94a3b8); }