/* =============================================================================
   HIZLI MASA — Gentelella SKIN (Bootstrap bileşenleri → Gentelella görünümü)
   Token bazlı: renkler gentelella-shell.css'teki :root / [data-theme=dark]
   değişkenlerinden gelir, böylece açık/koyu mod OTOMATİK çalışır.
   Bootstrap'ın grid/utility'leri (row/col/d-flex/gap...) DOKUNULMAZ.
   ============================================================================= */

/* ---- Taban ---- */
body {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text);
  background-color: var(--body-bg);
}

a {
  color: var(--primary);
}
a:hover {
  color: var(--primary-dk);
}

/* Bootstrap metin yardımcıları → token (dark uyumu) */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-body { color: var(--text) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-warning { color: var(--yellow) !important; }

.bg-body-tertiary { background-color: var(--bg-surface-secondary) !important; }
.bg-body-secondary { background-color: var(--bg-surface-secondary) !important; }
.bg-body { background-color: var(--bg-surface) !important; }

hr { border-color: var(--border-color); }

/* ---- Kartlar ---- */
.card {
  background-color: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-header,
.card-footer {
  background-color: transparent;
  border-color: var(--border-color);
}
/* AdminLTE'nin .card-header clearfix'i (::after) d-flex başlıkta üçüncü flex öğesi olur ve
   justify-content-between'i bozar: sağdaki buton ORTADA kalır (cari "+ Yeni" 2026-07-21).
   Flex başlıkta clearfix gereksiz — kapat. */
.card-header.d-flex::after { content: none; }
/* ==================== NFC KULLANIM — PROGRAM GÖRÜNÜMÜ (2026-07-31) ====================
   Sayfa işletme paneline GERİ döndü ve admin'le ORTAK gövdeye geçti (nfc-usage-report.tsx).
   Dil "bilgisayar programı": araç çubuğu (segment dönem anahtarı + yenile), stat kutuları,
   yan yana iki içten-kaydırmalı veri paneli — yapışkan tablo başlığı, zebra sık satırlar. */
.nfcu { display: flex; flex-direction: column; gap: 10px; }
.nfcu-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: calc(9px * var(--radius-scale, 1));
}
.nfcu-tenant { max-width: 280px; }
/* Segment anahtar: tek parça ray, seçili dilim dolu — program araç çubuğu hissi. */
.nfcu-seg {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: calc(7px * var(--radius-scale, 1));
  overflow: hidden;
}
.nfcu-seg-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}
.nfcu-seg-btn + .nfcu-seg-btn { border-left: 1px solid var(--border-color); }
.nfcu-seg-btn:hover { background: var(--bg-surface-secondary); }
.nfcu-seg-btn.is-on { background: var(--primary); color: #fff; }
.nfcu-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  border-radius: calc(7px * var(--radius-scale, 1));
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}
.nfcu-tool-btn:hover:not(:disabled) { background: var(--bg-surface-secondary); }
.nfcu-tool-btn:disabled { opacity: 0.55; cursor: default; }
@keyframes nfcu-spin { to { transform: rotate(360deg); } }
.nfcu-spin { display: inline-block; animation: nfcu-spin 0.9s linear infinite; }
/* Stat kutuları — kokpit diliyle akraba: küçük büyük-harf etiket + iri rakam. */
/* INCE TEK SATIR statlar (kullanici 2026-08-01: "gereksiz yukseklik kalksin, ekranda
   daha cok son siparis gorunsun") — 4 stat yan yana, etiket degerin YANINDA. */
.nfcu-stats { display: flex; flex-wrap: nowrap; gap: 6px; }
.nfcu-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: calc(9px * var(--radius-scale, 1));
  padding: 4px 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  /* basis AUTO (2026-08-01): esit bolusumde genis degerli kutunun etiketi kirpiliyordu
     ("TU..."); icerige gore paylasince hepsi tek satirda tam okunur. */
  flex: 1 1 auto;
}
.nfcu-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nfcu-stat-value { font-size: 14.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
/* Veri panelleri: geniş ekranda yan yana (gün özeti dar, sipariş dökümü geniş);
   her panel kendi içinde kayar — sayfa değil, "pencere içindeki pencere" kayar. */
.nfcu-panes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; align-items: start; }
.nfcu-pane {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: calc(9px * var(--radius-scale, 1));
  overflow: hidden;
}
.nfcu-pane-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
}
.nfcu-pane-head .bi { font-size: 13px; color: var(--text-muted); }
.nfcu-pane-cnt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.nfcu-pane-body { max-height: min(560px, calc(100dvh - 340px)); overflow-y: auto; }
.nfcu-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nfcu-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.nfcu-table th.text-end { text-align: right; }
.nfcu-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.nfcu-table tbody tr:last-child td { border-bottom: 0; }
.nfcu-table tbody tr:nth-child(even) td { background: var(--body-bg); }
.nfcu-table tbody tr:hover td { background: var(--bg-surface-secondary); }
.nfcu-items { min-width: 180px; }
.nfcu-empty { text-align: center; color: var(--text-muted); padding: 26px 10px !important; }
/* Masa çipi + kaynak/durum pilleri — rozet dili kasa kartlarıyla akraba. */
.nfcu-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 12px;
}
.nfcu-src {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.nfcu-src.is-nfc { color: #17724a; background: rgba(23, 114, 74, 0.1); border-color: rgba(23, 114, 74, 0.3); }
.nfcu-src.is-qr { color: #8a5a00; background: rgba(201, 143, 29, 0.12); border-color: rgba(201, 143, 29, 0.35); }
.nfcu-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.nfcu-pill.is-paid { color: #fff; background: var(--sweet-green-dk, #17724a); }
.nfcu-pill.is-open { color: #6b4a00; background: rgba(240, 173, 78, 0.28); }
[data-theme="dark"] .nfcu-src.is-nfc { color: #5fd39f; }
[data-theme="dark"] .nfcu-src.is-qr { color: #e8b04b; }
[data-theme="dark"] .nfcu-pill.is-open { color: #ffd58a; }
/* Telefon: stat kutuları 2'li, paneller alt alta, satırlar bir tık sıkışır. */
@media (max-width: 991.98px) {
  .nfcu-panes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  /* Tek satir 4 mini stat (etiketler JSX'te kisalir: Ort. / Masa). */
  .nfcu-stat { padding: 3px 7px; gap: 4px; }
  .nfcu-stat-label { font-size: 9px; }
  .nfcu-stat-value { font-size: 12.5px; }
  .nfcu-table { font-size: 11px; }
  .nfcu-table td, .nfcu-table th { padding: 4px 6px; }
  /* Urunler hucre geniz zorlamasin: kalan sutunlar tek ekrana sigar, uzun ad kirpilir. */
  .nfcu-items { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nfcu-pane-body { max-height: none; overflow-y: visible; }
  .nfcu-tenant { max-width: 100%; }
}
/* GUN FILTRESI (2026-08-01): gun satiri = buton; secili gun vurgulu, sag panel basliginda
   "Tumunu goster" cipi. Telefonda secim sonrasi ray otomatik sag kata kayar. */
.nfcu-day-row { cursor: pointer; }
.nfcu-day-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nfcu-table tbody tr.is-day-selected td { background: var(--primary-lt) !important; }
.nfcu-day-clear {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--primary); background: var(--primary-lt);
  color: var(--primary); border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px 10px;
  min-width: 0; max-width: 55%;
}
.nfcu-day-clear-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfcu-day-clear:hover { background: var(--primary); color: #fff; }
.nfcu-day-clear .bi { font-size: 10px; flex-shrink: 0; }

/* SON SIPARISLER — TELEFON TEK SATIR + dokununca detay (2026-08-01, kasa defteri
   hareket deseni): satir = [saat] [masa cipi] [urunler...] [tutar] [ok]; detayda
   Kaynak/Durum pilleri + tam urun listesi. Yatay scroll tamamen biter. */
.nfcu-mlist { display: grid; gap: 5px; padding: 6px; }
.nfcu-mrow { border: 1px solid var(--border-color); border-radius: calc(8px * var(--radius-scale, 1)); background: var(--bg-surface); min-width: 0; }
.nfcu-mrow-line {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; padding: 4px 8px; text-align: left;
  color: inherit; font-size: 12.5px; min-height: 30px;
}
.nfcu-mrow-time { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; flex-shrink: 0; }
.nfcu-mrow-items { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nfcu-mrow-total { font-weight: 700; white-space: nowrap; flex-shrink: 0; font-size: 12px; }
.nfcu-mrow-chev { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.nfcu-mrow-detail { padding: 0 8px 8px; display: grid; gap: 6px; font-size: 12px; }
.nfcu-mrow-badges { display: flex; gap: 8px; align-items: center; }
.nfcu-mrow-ul { margin: 0; padding-left: 18px; }

/* CARI HESAPLAR — PROGRAM PENCERESI (2026-08-01, diger sayfalarin deseni): masaustu (xl+)
   sabit ekran + icten kayan liste/ekstre; TELEFONDA 2 KAT (liste -> detay) elle kaydirmali
   ray, isme dokununca detaya OTOMATIK kayar. */
.cari-fit { display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 1200px) {
  .page-wrapper:has(.cari-fit) { padding-top: 8px; padding-bottom: 10px; }
  .cari-fit { height: 100%; }
  .cari-fit > .cari-body { flex: 1 1 auto; min-height: 0; align-items: stretch; margin-top: 0 !important; }
  .cari-body > * { min-height: 0; height: 100%; margin-top: 0 !important; }
  .cari-body .card { height: 100%; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0 !important; }
  /* Icerik USTE yapisik (kullanici 2026-08-01): bootstrap card-body'nin varsayilan flex:1'i
     ara govdeleri sisirip icerigi ortaya dagitiyordu — yalniz kaydirma bolgesi esner. */
  .cari-body .card > * { flex: 0 0 auto; }
  .cari-body .list-group { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; max-height: none !important; }
  .cari-body .col-xl-8 .card > .card-body.p-0 { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
@media (max-width: 767.98px) {
  .page-wrapper:has(.cari-fit) { padding-top: 8px; }
  body.has-mobile-tabbar .page-wrapper:has(.cari-fit) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .cari-fit { height: 100%; min-height: 0; }
  .cari-fit > .cari-body {
    flex: 1 1 auto; min-height: 0; margin-top: 0 !important;
    display: flex; flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cari-fit > .cari-body::-webkit-scrollbar { display: none; }
  .cari-body > * {
    flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0;
    height: 100%; margin-top: 0 !important; scroll-snap-align: start;
    display: flex; flex-direction: column;
  }
  .cari-body .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0 !important; }
  .cari-body .card > * { flex: 0 0 auto; }
  /* Detay basligi + tahsilat formu SIKI (kullanici 2026-08-01: "cok yer kapliyor"):
     dolgu ve buton boylari kucultulur — ekstreye daha cok satir kalir. */
  .cari-body .card-header { padding: 6px 10px; row-gap: 6px; }
  .cari-body .card-header .card-title { font-size: 16px; }
  .cari-body .card-header .btn { padding: 3px 10px; font-size: 12.5px; }
  .cari-body .card-header .fs-5 { font-size: 17px !important; }
  /* Baslik ic duzeni (kullanici 2026-08-01 "cok kotu"): satir 1 = AD ..... BAKIYE,
     satir 2 = [Mutfaga Siparis (genis)] [Sil] — order ile. */
  .cari-body .cari-dh-name { order: 1; flex: 1 1 auto; }
  .cari-body .cari-dh-bal { order: 2; margin-left: auto !important; }
  .cari-body .cari-dh-order { order: 3; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; }
  .cari-body .cari-dh-del { order: 4; flex: 0 0 auto; }
  .cari-body .card > .card-body.border-bottom { padding: 8px 10px; }
  .cari-body .card > .card-body.border-bottom .row { --bs-gutter-y: 6px; }
  .cari-body .list-group { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; max-height: none !important; }
  .cari-body .col-xl-8 .card > .card-body.p-0 { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* Liste seçimi tema kırmızısı — bootstrap mavisi panelde yabancı (cari listesi 2026-07-21). */
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg, #fff);
}
.card-title { font-weight: var(--font-weight-bold); color: var(--text); }
/* AdminLTE "card-outline card-primary" üst çizgisi → teal */
.card.card-outline.card-primary { border-top: 3px solid var(--primary); }

/* ---- Butonlar ---- */
.btn { border-radius: var(--radius); font-weight: var(--font-weight-medium); }
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg, #fff);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dk) !important;
  border-color: var(--primary-dk) !important;
  color: var(--primary-fg, #fff) !important;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg, #fff);
}
.btn-success { background-color: var(--green); border-color: var(--green); }
.btn-danger { background-color: var(--red); border-color: var(--red); }

/* Tatlı yeşil/kırmızı butonlar (masa durumları) */
.btn-sweet-green { background-color: var(--sweet-green); border-color: var(--sweet-green); color: #fff; }
.btn-sweet-green:hover, .btn-sweet-green:focus, .btn-sweet-green:active {
  background-color: var(--sweet-green-dk) !important; border-color: var(--sweet-green-dk) !important; color: #fff !important;
}
.btn-outline-sweet-green { background-color: transparent; color: var(--sweet-green); border-color: var(--sweet-green-bd); }
.btn-outline-sweet-green:hover, .btn-outline-sweet-green:focus {
  background-color: var(--sweet-green); border-color: var(--sweet-green); color: #fff;
}
.btn-sweet-red { background-color: var(--sweet-red); border-color: var(--sweet-red); color: #fff; }
.btn-sweet-red:hover, .btn-sweet-red:focus, .btn-sweet-red:active {
  background-color: var(--sweet-red-dk) !important; border-color: var(--sweet-red-dk) !important; color: #fff !important;
}
.btn-outline-sweet-red { background-color: transparent; color: var(--sweet-red); border-color: var(--sweet-red-bd); }
.btn-outline-sweet-red:hover, .btn-outline-sweet-red:focus {
  background-color: var(--sweet-red); border-color: var(--sweet-red); color: #fff;
}

/* =============================================================================
   KASA — DURUM BİLGİ PANELİ: premium yatay KPI paneli (ikon + etiket + değer, ayraçlı)
   sağ uçta sıralama filtresi. Light & dark uyumlu.
   ============================================================================= */
/* KOMPAKT BANNER (kullanıcı 2026-07-13: "banner az yer kaplasın, kasa ekranında da aynı
   boyut") — hem masalar ana ekranı hem adisyon aynı alçak şeridi kullanır. */
.kasa-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* ÜST ŞERİT SABİT (kullanıcı 2026-08-02: "head bölümü scrollda kaymasın"): masa listesi
     kayarken KPI + arama + sıralama şeridi yerinde kalır. -8px = page-wrapper üst padding'i
     — şerit tepeye yapışır, üstünden kart sızmaz. */
  position: sticky;
  top: -8px;
  z-index: 20;
  /* Kompakt serit (kullanici 2026-07-31: "yukseklikler azaltilsin") — tek satirlik banner. */
  padding: 4px 14px;
  margin-bottom: 6px;
  /* Kose masa kartiyla AYNI aile (kullanici 2026-08-01: "keskinlessin") — 16px tabani 9px'e indi. */
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-float);
}
/* Bardak dolgu hücresi: yer tutar, görünmez (eksik satır boşluğu üstte kalsın diye). */
.masa-pad { visibility: hidden; }
.kasa-panel-stats { display: flex; flex-wrap: wrap; align-items: center; }
.kasa-kpi { position: relative; display: flex; align-items: center; gap: 8px; padding: 1px 12px; }
.kasa-kpi:first-child { padding-left: 4px; }
.kasa-kpi:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  height: 28px;
  width: 1px;
  background: var(--border-color);
}
.kasa-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: calc(12px * var(--radius-scale, 1));
  font-size: 15px;
}
.kasa-kpi-text { display: flex; flex-direction: column; gap: 2px; }
.kasa-kpi-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; letter-spacing: 0.2px; }
.kasa-kpi-value { font-size: 16px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; }
.kasa-panel-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Panel aksiyonları (Masa Aktar / Kasaya Dön) — KPI stat'larıyla aynı dil: ikon çipi + etiket,
   aralarında dikey ayraç, ferah ikon-yazı boşluğu. Borderless (stat gibi), hover'da turuncu. */
.kasa-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 16px;
  border: 0;
  background: transparent;
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease;
}
.kasa-action:hover,
.kasa-action:focus { color: var(--primary) !important; }
.kasa-action:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  width: 1px;
  background: var(--border-color);
}
.kasa-action .kasa-kpi-icon { width: 30px; height: 30px; font-size: 14px; }
.kasa-action.is-on .kasa-kpi-icon { box-shadow: 0 0 0 2px var(--primary); }
.kasa-action.is-on { color: var(--primary) !important; }
/* RENKLİ aksiyonlar (kullanıcı 2026-07-13: "Masa Aktar ve Kasaya Dön renkli olsun") —
   2-vurgu dili: yeşil = adisyon işlemi (Masa Aktar), kırmızı = navigasyon (Kasaya Dön). */
.kasa-action.act-green { color: var(--sweet-green) !important; }
.kasa-action.act-green .kasa-kpi-icon { background: var(--sweet-green-lt); color: var(--sweet-green); }
.kasa-action.act-red { color: var(--primary) !important; }
.kasa-action.act-red .kasa-kpi-icon { background: var(--primary-lt); color: var(--primary); }
/* Mobil adisyon başlık tuşları (2026-07-30): telefonda banner gizlenince Kasaya Dön /
   Masa Aktar adisyon başlığına ikon olarak taşındı (d-md-none ile yalnız telefonda). */
.adisyon-head-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; border: 0; flex-shrink: 0;
  background: var(--primary-lt); color: var(--primary); font-size: 15px;
  text-decoration: none !important;
}
.adisyon-head-act.act-green { background: var(--sweet-green-lt); color: var(--sweet-green); }
.adisyon-head-act.is-on { box-shadow: 0 0 0 2px var(--sweet-green); }
/* Mobilde başlık nefes alsın (kullanıcı 2026-07-30: tuşlar üst/alt kenara yapışık durdu) —
   inline minHeight:52'yi ezmek için !important. */
@media (max-width: 767.98px) {
  .adisyon-bill-card > .card-header { min-height: 66px !important; }
}
/* Adisyon / Kategoriler kartları — ince turuncu border + yumuşak yüzen gölge (üst banner uyumu).
   overflow:hidden → header'ın köşeleri 16px yuvarlağa kırpılır (üst köşeler kaybolmaz). */
.hm-panel-card { border: 1px solid rgba(201,53,29,0.5) !important; border-radius: calc(18px * var(--radius-scale, 1)) !important; box-shadow: var(--shadow-float); overflow: hidden; }
/* İç banner (Adisyon/Kategoriler başlık bandı) köşeleri kartla BİREBİR hizalanır — sabit 17px
   radius-scale'li kart köşesinden (18×0.65≈11.7px) BÜYÜK kalıp köşede boşluk bırakıyordu
   (kullanıcı 2026-07-13); iç köşe = dış köşe − 1px kenar → çentiksiz dolar. Footer da aynı. */
.hm-panel-card > .card-header:first-child {
  border-top-left-radius: calc(18px * var(--radius-scale, 1) - 1px) !important;
  border-top-right-radius: calc(18px * var(--radius-scale, 1) - 1px) !important;
}
.hm-panel-card > .card-footer:last-child {
  border-bottom-left-radius: calc(18px * var(--radius-scale, 1) - 1px) !important;
  border-bottom-right-radius: calc(18px * var(--radius-scale, 1) - 1px) !important;
}
/* Dark modda turuncu border çok canlı → yumuşat (düşük opaklık). */
[data-theme=dark] .hm-panel-card { border-color: rgba(201,53,29,0.35) !important; }
/* Şık geri tuşu (kategori header'ının solunda) — yuvarlak, turuncu, hover'da dolu. */
.hm-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: calc(10px * var(--radius-scale, 1));
  border: 1px solid var(--primary);
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.hm-back-btn:hover { background: var(--primary); color: #fff; transform: translateX(-1px); }
.hm-back-btn:active { transform: translateX(-1px) scale(0.96); }
/* BÖLÜM SEKMELERİ (kullanıcı 2026-07-19, tasarım v2: hap-buton beğenilmedi) — klasik
   ALT-ÇİZGİLİ sekme: çıplak metin + aktifte primary çizgi; şerit altında hairline ray.
   Üstteki kapsül dilinden bilinçli AYRIŞIR = gerçek sekme gibi okunur, dikeyde az yer.
   Rozet = bölümdeki DOLU masa sayısı. Taşarsa görünmez scrollbar'la yatay kayar. */
.kasa-area-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.kasa-area-tabs::-webkit-scrollbar { display: none; }
.kasa-area-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 11px 9px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease;
}
.kasa-area-tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 999px;
  background: transparent;
  transition: background 140ms ease;
}
.kasa-area-tab:hover { color: var(--text); }
.kasa-area-tab.is-active { color: var(--text); font-weight: 700; }
.kasa-area-tab.is-active::after { background: var(--primary); }
/* Ad + aralık sarmalı: telefonda tek satır (aralık gizli), webte iki katlı (aşağıda). */
.kasa-area-tab-main { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.kasa-area-tab-range { display: none; }
/* Dolu rozeti SÖNÜK (kullanıcı 2026-08-01: "kırmızılar çok parlamasın") — doygun dolgu
   yerine hafif kırmızı tül + metne karışmış ton; aktif sekmede bir tık belirginleşir. */
.kasa-area-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: color-mix(in srgb, var(--primary) 62%, var(--text));
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.kasa-area-tab.is-active .kasa-area-tab-count {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
}

/* Zil (Garson Çağrıları) popover — dar ekranda sağa çapalı 290px kutu SOL kenardan
   taşıyordu (kullanıcı 2026-07-19): telefonda ekrana sabit, kenarlardan 12px içeride. */
@media (max-width: 575.98px) {
  .hm-bell-pop {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 62px !important;
    width: auto !important;
  }
}

/* Masa arama kutusu (✕ ile temizlenir) */
.kasa-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  /* Masa kartiyla AYNI kose (2026-07-31) — kapsul dili birakildi. */
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kasa-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.kasa-search > i { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
/* input kendi çerçevesini/odak halkasını ÜRETMESİN — tek kutu .kasa-search'tür (büyüteç içeride). */
.kasa-search input,
.kasa-search input:focus,
.kasa-search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text);
  font-size: 13px;
  width: 110px;
  min-width: 0;
  padding: 0;
}
.kasa-search input::placeholder { color: var(--text-muted); }
.kasa-search > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 0; border-radius: 999px;
  background: var(--text-muted); color: var(--bg-surface);
  font-size: 10px; line-height: 1; cursor: pointer;
}
.kasa-search > button:hover { background: var(--primary); }
/* Mobil mini-KPI şeridi (kasa-home yalnız yetkiliye render eder) — masaüstünde gizli,
   orada tam .kasa-panel-stats paneli var; telefon kuralları aşağıdaki 767.98 bloğunda. */
.kasa-mini-stats { display: none; }
/* İkon renk paletleri (soft zemin + dolu ikon) */
.kpi-blue   { background: var(--blue-lt);    color: var(--blue); }
.kpi-orange { background: var(--primary-lt); color: var(--primary); }
.kpi-green  { background: var(--green-lt);   color: var(--sweet-green); }
.kpi-azure  { background: var(--azure-lt);   color: var(--azure); }
.kpi-cyan   { background: var(--cyan-lt);    color: var(--cyan); }
.kpi-red    { background: rgba(214, 57, 57, 0.12); color: #d63939; }

/* Yönetim hızlı erişim — kurumsal dil: beyaz yüzey kart-buton, turuncu ikon çipi,
   hover'da turuncu çerçeve + hafif yükselme (tıklanabilirliği tartışmasız). */
.yonetim-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: calc(12px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, color 140ms ease;
}
.yonetim-quick:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.yonetim-quick .q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 16px;
}
@media (max-width: 991.98px) {
  .kasa-kpi { padding: 6px 14px; }
  .kasa-kpi:first-child { padding-left: 6px; }
  .kasa-kpi:not(:last-child)::after { display: none; }
}
/* TELEFON: kasa üst alanı kompakt. GÜNCELLEME (kullanıcı 2026-07-19): istatistik + Bakiye
   telefonda ARAMA SATIRINDA mini ikon+değer şeridi olarak görünür — ama YALNIZ patron/
   rapor-yetkili (kasa-home render etmez, 2026-07-11 "personel para görmesin" kuralı sürer).
   Satır 1 = arama (esner) + mini-KPI; satır 2 = Rezervasyon + Sıralama. */
@media (max-width: 767.98px) {
  /* TEK KART (kullanıcı 2026-07-19: "hepsi ayrı kötü, bütüncül olsun") — eski "panel erir,
     öğeler serbest yüzer" yaklaşımı geri alındı: panel mobilde de TEK yüzey kart; içindeki
     arama/butonlar sessiz (gölgesiz, ikincil yüzey), tek hairline durum satırını ayırır. */
  /* KOMPAKT (kullanıcı 2026-07-19: "çok yer kaplıyor, masalara yer kalmıyor") —
     iç boşluk/yükseklikler kısıldı; kart + sekmeler toplamda ~35px alçaldı. */
  .kasa-panel {
    padding: 8px;
    gap: 7px;
    margin-bottom: 8px;
  }
  .kasa-panel-stats { display: none; }
  /* Kart içi sıra: durum satırı (order:-1) → arama → butonlar. Durum yoksa (yetkisiz)
     kart arama+butonlardan ibaret kalır, kompozisyon bozulmaz. */
  .kasa-panel-filter { width: 100%; align-items: center; gap: 7px; }
  .kasa-filter-actions { width: 100%; display: flex; align-items: center; gap: 7px; }
  /* Kart İÇİ öğeler sessiz: gölge yok, ikincil yüzey — kabuk tek başına kart. */
  .kasa-search { padding: 5px 12px; box-shadow: none; min-height: 34px; }
  .kasa-sort-wrap { background: var(--bg-surface-secondary); box-shadow: none; min-height: 34px; }
  .kasa-resv-btn { box-shadow: none; min-height: 34px; }
  .kasa-filter-actions > label[for="kasa-sort"] { display: none; }
  /* İki butonda da YAZI var (kullanıcı 2026-07-11): "Rezervasyon" + "Sıralama";
     uzun seçim metni yerine kısa sabit etiket — yarı yarıya rahat sığar. */
  .kasa-resv-btn { flex: 1 1 50%; justify-content: center; min-width: 0; padding: 5px 10px; font-size: 12px; }
  .kasa-sort-btn .kasa-sort-current,
  .kasa-sort-btn .kasa-sort-caret { display: none; }
  .kasa-sort-btn .kasa-sort-mobile-label { display: inline; }
  .kasa-sort-wrap { flex: 1 1 50%; justify-content: center; min-width: 0; padding: 5px 10px; font-size: 12px; }
  .kasa-search { flex: 1 1 100%; }
  .kasa-search input { width: 100%; flex: 1; }
  /* Bölüm sekmeleri mobilde bir tık daha sıkı. */
  .kasa-area-tabs { margin-bottom: 8px; }
  .kasa-area-tab { padding: 5px 9px 7px; font-size: 12.5px; }
  /* DURUM SATIRI: kartın başlık bandı — kapsül değil, çıplak satır + altta hairline.
     Dolu solda, Bakiye sağda (space-between); kapsül/gölge yok = kartla TEK parça. */
  .kasa-mini-stats {
    order: -1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 1px 2px 7px;
    border-bottom: 1px solid var(--border-color);
  }
  .kasa-mini-stats::-webkit-scrollbar { display: none; }
  .kasa-mini-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
  }
  .kasa-mini-stat > i { font-size: 12.5px; color: var(--text-muted); }
  /* Etiketler (Dolu/Bakiye) masaüstü kasa-kpi-label diliyle: küçük, sönük, 600. */
  .kasa-mini-stat .mini-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.2px; }
  /* "/100" kuyruğu: sönük ve küçük — dolu sayısı öne çıkar. */
  .kasa-mini-stat .mini-sub { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
  /* Para = yeşil (2-vurgu dili: yeşil=para) — ikon + değer birlikte, etiket sönük kalır. */
  .kasa-mini-stat.is-money, .kasa-mini-stat.is-money > i { color: var(--sweet-green); }
  /* Masa kartı: STANDART iskelet (rozet hep kendi satırında) — telefonda rozet/pause küçük. */
  .masa-badge { font-size: 9.5px; padding: 2px 7px 2px 6px; gap: 4px; }
  .masa-badge::before { width: 5px; height: 5px; }

  /* RAPORLAR — telefon: buyuk stat kutulari (small-box) ve mini statlar kompaktlasir;
     yazi/ikon kuculur, ic bosluk daralir → ekranda kaydirmadan daha cok icerik. */
  .rapor-stat .inner { padding: 8px 10px; }
  .rapor-stat .inner h3 { font-size: 19px; margin-bottom: 1px; }
  .rapor-stat .inner p { font-size: 11.5px; margin-bottom: 0; line-height: 1.2; }
  .rapor-stat .inner small { font-size: 9.5px; margin-top: 2px !important; }
  .rapor-stat .small-box-icon { font-size: 26px; opacity: 0.25; }
  /* Dönem kartı: çipler telefonda EŞİT genişlikte 3'lü ızgara (dağınık sarma yerine 2 düzenli
     sıra), tarih ortalanmış kompakt satır; iç boşluk daralır (kart yarım ekran yiyordu) */
  .rapor-donem .card-body { padding: 8px 10px; }
  .rapor-donem .rapor-donem-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .rapor-donem .hm-chip { min-height: 33px; padding: 3px 8px; font-size: 12.5px; justify-content: center; white-space: nowrap; }
  .rapor-donem .rapor-donem-tarih { margin-left: 0; width: 100%; justify-content: center; font-size: 11.5px; }
  .rapor-mini .card-body { padding: 5px 8px !important; gap: 6px !important; }
  .rapor-mini .fs-4 { font-size: 15px !important; }
  .rapor-mini .fw-bold { font-size: 13px; line-height: 1.2; }
  .rapor-mini .small { font-size: 10.5px; }
}

/* =============================================================================
   RAPORLAR — Geçmiş Adisyonlar: filtre çubuğu + özet şeridi + telefon kart listesi
   (2026-07-22: btn-group ve 9 kolonlu tablo telefonda taşıyor/okunmuyordu).
   ============================================================================= */
/* Büyük statlar — kurumsal 2-vurgu (gökkuşağı yok): para = solid marka kırmızısı (Ciro) +
   tatlı yeşil (Tahsilat); kalanlar sakin yüzey kartı (is-quiet), para değeri yeşil yazı (is-money). */
/* AdminLTE tabanı .small-box'a 20px margin-bottom basar — satır aralığını row gutter (g-2/g-3)
   yönetir, bu marj çift boşluk yaratıyordu (mobilde ~28px "gereksiz mesafe"nin kökü). */
.rapor-stat { margin-bottom: 0; }
.rapor-stat.is-brand { background: var(--primary); color: #fff; }
.rapor-stat.is-green { background: var(--sweet-green); color: #fff; }
.rapor-stat.is-quiet {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-color);
}
.rapor-stat.is-quiet .inner p,
.rapor-stat.is-quiet .inner small { color: var(--text-secondary); }
.rapor-stat.is-quiet .small-box-icon { color: var(--text-muted); opacity: 0.3; }
.rapor-stat.is-quiet.is-money .inner h3 { color: var(--sweet-green); }

/* Mini statlar — telefon 2-2-3 (ilk 4 stat ikişerli geniş hücre, son 3'ü üçlü sıra),
   tablet 4'lü, ≥1200px TEK satır (7 sütun). 6 kolonlu ızgara: span 3 = ikili, span 2 = üçlü. */
.rapor-minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 767.98px) {
  .rapor-minis .rapor-mini { grid-column: span 3; }
  .rapor-minis .rapor-mini:nth-child(n+5) { grid-column: span 2; }
}
@media (min-width: 768px) { .rapor-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { .rapor-minis { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Dönem çip şeridi + tarih etiketi — masaüstü: yanyana akış, tarih sağa yaslı
   (telefon ızgara düzeni yukarıdaki mobil blokta .rapor-donem önekiyle ezer) */
.rapor-donem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rapor-donem-tarih { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 12px; }

/* Özel dönem tarih girişleri: masaüstü sabit genişlik, telefonda yan yana esner */
.rapor-date { width: 150px; }
@media (max-width: 575.98px) {
  .rapor-date { flex: 1 1 40%; width: auto; min-height: 38px; }
}

/* Filtre çubuğu: ikonlu arama + hap (pill) select'ler; seçili filtre marka rengiyle yanar */
.rapor-adfiltre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rapor-adfiltre-search { width: 250px; }
.rapor-adfiltre-search .input-group-text {
  background: var(--bg-surface);
  border-right: 0;
  color: var(--text-muted);
  border-radius: 999px 0 0 999px;
}
.rapor-adfiltre-search .form-control { border-left: 0; border-radius: 0 999px 999px 0; }
.rapor-adfiltre-search .form-control:focus { box-shadow: none; border-color: var(--primary); }
.rapor-adfiltre-search:focus-within .input-group-text { border-color: var(--primary); }
.rapor-adfiltre .form-select { width: auto; border-radius: 999px; padding-left: 13px; }
.rapor-adfiltre .form-select.is-active {
  border-color: var(--primary);
  background-color: var(--primary-lt);
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 767.98px) {
  .rapor-adfiltre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 satır düzeni (kullanıcı 2026-07-30): arama tek hücre — yanına ilk filtre gelir;
     kalan 4 filtre 2×2 dizilir (tek başına sarkan satır kalmaz). */
  .rapor-adfiltre-search { width: 100%; }
  .rapor-adfiltre-search .form-control { min-height: 40px; min-width: 0; }
  .rapor-adfiltre .form-select { width: 100%; min-height: 40px; }
  .rapor-adfiltre-clear { grid-column: 1 / -1; justify-content: center; }
}

/* Özet şeridi: etiket üstte / değer altta mini statlar; ödeme kırılımı masaüstünde sağa yaslı,
   telefonda 3 kolonlu ızgaraya karışır (display: contents) */
.rapor-adsum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
}
.rapor-adsum-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rapor-adsum-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.rapor-adsum-val { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--text); white-space: nowrap; }
.rapor-adsum-val small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.rapor-adsum-val.is-green { color: var(--sweet-green); }
.rapor-adsum-val.is-amber { color: var(--yellow); }
.rapor-adsum-val.is-red { color: var(--sweet-red); }
.rapor-adsum-pay { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
@media (max-width: 767.98px) {
  .rapor-adsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .rapor-adsum-pay { display: contents; }
  .rapor-adsum-val { white-space: normal; }
}

/* Telefon adisyon kartı: dokunulabilir başlık + açılır detay (finans/cari kart dili) */
.rapor-adcard { border-top: 1px solid var(--border-color); }
.rapor-adcard:first-child { border-top: 0; }
.rapor-adcard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
}
.rapor-adcard-head > i { grid-column: 2; grid-row: 1 / span 3; color: var(--text-muted); font-size: 15px; }
.rapor-adcard-title { grid-column: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; }
.rapor-adcard-meta { grid-column: 1; font-size: 11.5px; color: var(--text-secondary); }
.rapor-adcard-sums {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}
.rapor-adcard-sums b { font-weight: 700; color: var(--text); }
.rapor-adcard-sums b.is-green { color: var(--sweet-green); }
.rapor-adcard-sums b.is-amber { color: var(--yellow); }
.rapor-adcard.is-open .rapor-adcard-head { background: var(--bg-surface-secondary); }
.rapor-adcard-body { padding: 2px 14px 12px; }

/* =============================================================================
   MASA KARTI (Kasa) — PREMIUM pastel: Boş = temiz sıcak-beyaz / slate, Dolu = sıcak şeftali.
   Nokta-rozet + katmanlı yüzey CTA + yumuşak yüzen gölge + hover yükselme. Light & dark uyumlu.
   ============================================================================= */
/* Kompakt ızgara — ekrana daha çok masa sığsın (auto-fill: dar kartlar otomatik sıralanır) */
.masa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
/* Izgara kabinin ic paddingi UST BANNER (.kasa-panel) ile AYNI hizada (kullanici
   2026-08-01): masaustu 14px, telefon 8px yatay. :has() DEGIL sinif (2026-08-01):
   150 kartli ekranda her stil hesabinda :has taramasi yan menu animasyonunu tekliyordu. */
.masa-grid-body { padding: 8px 14px 12px; }
@media (max-width: 767.98px) {
  .masa-grid-body { padding: 6px 8px 8px; }
}
@media (max-width: 575.98px) {
  /* TEK SATIRDA 3 KARE MASA + SADE İÇ (kullanıcı 2026-07-13): numara = sol üstte PLAKA
     ÇİPİ (yarı saydam kapsülde kalın rakam — "başka bir yöntem"), tutar MİNİK, ok gizli,
     boş masada "0 TL" yok. .masa-grid öneki ŞART: taban kurallar (19px tutar, inline-flex
     ok, 14px ad) dosyada bu bloktan SONRA geliyor, eşit özgüllükte onlar kazanıyordu. */
  .masa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .masa-grid .masa-card { aspect-ratio: 1 / 1; overflow: hidden; }
  .masa-grid .masa-card .card-body { padding: 7px 8px; min-height: 0; }
  .masa-grid .masa-card .masa-name-word { display: none; }
  .masa-grid .masa-card .masa-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    border-radius: 8px;
    background: var(--masa-onfill-chip);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }
  /* Rezerve kart dolgusuz (krem) — beyaz çip görünmez, kehribar tint kullan. */
  .masa-grid .masa-card.is-reserved .masa-no { background: var(--masa-resv-soft); }
  /* KOMPOZİSYON (kullanıcı 2026-07-13: "iç yerleşim güzel olsun"): köşeler İŞLEV
     (sol üst plaka, sağ üst pause), MERKEZ para (tutar kartın tam ortasında),
     alt-orta DURUM pili — üç bölge, simetrik ve dengeli. */
  .masa-grid .masa-card .masa-amount-lg {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .masa-grid .masa-card.is-empty .masa-amount-lg { display: none; }
  /* Tutar yetkisi olmayanda BOŞ kartta da merkez "Masa N" (kullanıcı 2026-07-30) —
     yazı görünür kalır, "Boş" pili dolu kartlardaki gibi alta iner. */
  .masa-grid .masa-card.is-empty .masa-amount-lg.masa-center-name { display: flex; }
  .masa-grid .masa-card.is-empty:has(.masa-center-name) .card-body > .mt-auto {
    flex: 0 0 auto;
    margin-top: auto !important;
  }
  .masa-grid .masa-card .masa-amount-lg.masa-center-name { font-size: 18px; }
  /* Özel masa etiketi mobil karede gizli (kalabalık; adisyon başlığında görünür) —
     rezervasyon satırı (p.masa-amount-lg) HARİÇ, o ortada kalır. */
  .masa-grid .masa-card .card-body > p:not(.masa-amount-lg) { display: none; }
  /* Alt satır: rozet ORTADA (ok zaten gizli) — bootstrap utility'yi ezmek için !important. */
  .masa-grid .masa-card .card-body > .mt-auto {
    justify-content: center !important;
    padding-top: 0 !important;
  }
  /* BOŞ masada rozet, fiyatın yerini alır: satır ortaya büyür, pil kartın merkezinde
     (kullanıcı 2026-07-13). Dolu masada düzen aynı (tutar ortada, rozet altta). */
  .masa-grid .masa-card.is-empty .card-body > .mt-auto {
    flex: 1 1 auto;
    margin-top: 0 !important;
  }
  .masa-grid .masa-badge { font-size: 9.5px; padding: 3px 8px 3px 7px; gap: 4px; }
  .masa-grid .masa-badge::before { width: 5px; height: 5px; }
  .masa-grid .masa-card .masa-go { display: none; }
  .masa-grid .masa-card .masa-pause-btn { width: 24px; height: 24px; font-size: 12px; }
  /* Açılış saati dar karta sığsın (kullanıcı 2026-07-30: saat sağdan taşıp kırpılıyordu):
     rozet-saat arası boşluk daralır, saat küçülür. .masa-grid öneki ŞART (taban kural sonda).
     flex:1 + center: rozet+saat kümesi kartta TAM ortalanır (kalan boşluk tek yana yığılmaz). */
  .masa-grid .masa-card .masa-foot { gap: 4px !important; flex: 1 1 auto; justify-content: center; }
  .masa-grid .masa-card .masa-opened { font-size: 9px; gap: 2px; }
  .masa-grid .masa-card .masa-opened .bi { font-size: 8.5px; }
}
.masa-card {
  display: flex;
  flex-direction: column;
  /* Daha koseli kart (kullanici 2026-07-31: "koseler cok yuvarlak") — 16px tabani 9px'e indi. */
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.masa-card .card-body { padding: 12px 13px; }
.masa-card .masa-name { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.masa-card .masa-amount { font-size: 15px; font-weight: 800; }
/* DOLGULU KARTLAR (kullanıcı 2026-07-13, %50 saydam dolgu): dolu=kırmızı, boş=yeşil.
   İçerik rengi = --masa-*-ink (dark'ta beyaz, light'ta pastelin koyu mürekkebi);
   kart köküne color verilir, alt öğeler inherit/currentColor'dan türer. */
.masa-card.is-empty { background: var(--masa-empty-bg); border-color: var(--masa-empty-bd); box-shadow: var(--shadow); color: var(--masa-empty-ink); }
.masa-card.is-full  { background: var(--masa-full-bg);  border-color: var(--masa-full-bd);  box-shadow: var(--shadow); color: var(--masa-full-ink); }
.masa-card.is-empty .masa-amount { color: color-mix(in srgb, currentColor 80%, transparent); font-weight: 700; }
.masa-card.is-full  .masa-amount { color: inherit; }
.masa-card.is-empty .masa-name,
.masa-card.is-full .masa-name { color: inherit; }
.masa-card.is-empty .text-secondary,
.masa-card.is-full .text-secondary { color: color-mix(in srgb, var(--masa-empty-ink) 72%, transparent) !important; }
.masa-card.is-full .text-secondary { color: color-mix(in srgb, var(--masa-full-ink) 72%, transparent) !important; }
.masa-card:hover { transform: translateY(-2px); }
.masa-card.is-empty:hover { border-color: var(--masa-empty-bd); box-shadow: 0 10px 26px -12px rgba(23,114,74,0.4); }
.masa-card.is-full:hover  { border-color: var(--masa-full-bd); box-shadow: 0 10px 26px -12px rgba(201,53,29,0.45); }
.masa-card.is-empty:focus-visible,
.masa-card.is-full:focus-visible { outline-color: currentColor; }

/* REZERVE — kehribar: boş ama ayrılmış masa */
.masa-card.is-reserved { background: var(--masa-resv-bg); border-color: var(--masa-resv-bd); box-shadow: var(--shadow); }
.masa-card.is-reserved .masa-amount { color: var(--masa-resv-fg); font-weight: 700; }
.masa-card.is-reserved:hover { border-color: var(--masa-resv-fg); box-shadow: var(--shadow-card); }
.badge.badge-masa-resv { background: var(--masa-resv-soft); color: var(--masa-resv-fg); }

/* Masa açılış saati (2026-07-21): dolu kartta rozetin yanında sessiz saat —
   kart mürekkebinden türeyen soluk renk, kırmızı/yeşil kartta da okunur. */
.masa-card .masa-opened {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.masa-card .masa-opened .bi { font-size: 10px; line-height: 1; }

/* Nokta-rozet (Boş/Dolu) */
.masa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
}
.masa-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge.badge-masa-empty { background: var(--masa-empty-soft); color: var(--masa-empty-fg); }
.badge.badge-masa-full  { background: var(--masa-full-solid);  color: #fff; }
/* v6 "kızgın kart": kart sakin (tint+kenar), tek bağıran öğe DOLU kırmızı "Dolu" çipi —
   göz masayı çipten yakalar. Boş kartta yumuşak yeşil çip kalır. */
.masa-card.is-full .badge.badge-masa-full { background: var(--masa-full-solid); color: #fff; }
/* Dark'ta dolu kartın ADI beyaz (tutar kırmızı mürekkepte kalır) — içerik net okunsun. */
[data-theme=dark] .masa-card.is-full .masa-name { color: #ffffff; }
/* Pause düğmesi kartın mürekkebini alır — kırmızı/yeşil kart üstünde silik gri kalmasın. */
.masa-card.is-full .masa-pause-btn,
.masa-card.is-empty .masa-pause-btn {
  color: color-mix(in srgb, currentColor 80%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* MASA/BÖLÜM SELF-SİPARİŞ PAUSE (2026-07-11) — duraklatılan masa KESİK KEHRİBAR çerçeve;
   mini buton eylemi gösterir (pause=duraklat, play=devam), kehribar dolgu = duraklatılmış. */
.masa-card.is-so-paused { border-style: dashed; border-color: color-mix(in srgb, var(--masa-resv-fg) 55%, transparent); }
/* Duraklatılmış masa dolgulu kartta da KEHRİBAR kesik çerçeve (kullanıcı 2026-07-13:
   "pause'daki masa belli olsun") — hafif saydam ki bağırmasın. */
.masa-card.is-empty.is-so-paused,
.masa-card.is-full.is-so-paused { border-color: color-mix(in srgb, var(--masa-paused-accent) 85%, transparent); }
.masa-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.masa-pause-btn:hover { color: var(--masa-resv-fg); border-color: var(--masa-resv-fg); }
/* Duraklatılmış hal SOFT kehribar (kullanıcı 2026-07-11: "renkler çok canlı"):
   dolu kehribar yerine yumuşak tint + kehribar ikon. */
.masa-pause-btn.is-paused { background: var(--masa-resv-soft); border-color: var(--masa-resv-fg); color: var(--masa-resv-fg); }
/* Dolgulu kart üstünde pause butonu kartın mürekkep ailesinde. */
.masa-card.is-empty .masa-pause-btn,
.masa-card.is-full .masa-pause-btn { border-color: color-mix(in srgb, currentColor 40%, transparent); color: color-mix(in srgb, currentColor 88%, transparent); background: transparent; }
.masa-card.is-empty .masa-pause-btn:hover,
.masa-card.is-full .masa-pause-btn:hover { border-color: currentColor; color: currentColor; }
/* Duraklatılmış = DOLU kehribar play düğmesi (kullanıcı 2026-07-13: "play tuşu sarı
   olsun, pause'da olduğu belli olsun"). */
.masa-card.is-empty .masa-pause-btn.is-paused,
.masa-card.is-full .masa-pause-btn.is-paused { background: var(--masa-paused-accent); border-color: var(--masa-paused-accent); color: var(--masa-paused-ink); }
.masa-pause-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 767.98px) {
  .masa-pause-btn { width: 26px; height: 26px; font-size: 14px; }
}
.kasa-area-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--masa-resv-bd);
  background: transparent;
  color: var(--masa-resv-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.kasa-area-pause:hover { background: var(--masa-resv-soft); }
.kasa-area-pause.is-paused { background: var(--masa-resv-fg); border-color: var(--masa-resv-fg); color: #fff; }
.kasa-area-pause:disabled { opacity: 0.6; cursor: default; }

/* Katmanlı CTA — tint kart üzerinde temiz yüzey buton; hover'da markaya doyar */
.masa-card .btn-sm { padding: 6px 8px; font-size: 12px; }
/* Adisyona giriş = İKON buton ("içeri gir" oku — kullanıcı 2026-07-11); dolgu/çerçeve yok,
   hover'da yalnız renk sarıya döner. */
/* KART = tıklanabilir bütün (2026-07-11): tutar BÜYÜK ana bilgi; sağ altta yön oku
   affordansı (hover'da sarıya kayar); klavye için focus halkası. */
.masa-card { cursor: pointer; }
.masa-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.masa-card .masa-amount-lg {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 6px 0 2px;
}
.masa-card.is-empty .masa-amount-lg { color: color-mix(in srgb, currentColor 80%, transparent); font-weight: 700; }
.masa-card.is-full .masa-amount-lg { color: inherit; }
/* Tutar yetkisi olmayanda (garson/mutfak) kart merkezi "Masa N" (2026-07-30) —
   üst numara çipi de KALKTI: bu yazı kartın TEK kimliği, belirgin ama para gibi bağırmaz. */
.masa-card .masa-amount-lg.masa-center-name {
  font-weight: 800;
  color: color-mix(in srgb, currentColor 88%, transparent);
  font-size: 19px;
  letter-spacing: -0.01em;
}
.masa-card.is-reserved .masa-amount-lg { font-size: 14px; font-weight: 700; color: var(--masa-resv-fg); }
.masa-card .masa-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 16px;
  transition: color 120ms ease, transform 120ms ease;
}
.masa-card.is-empty .masa-go,
.masa-card.is-full .masa-go { color: color-mix(in srgb, currentColor 85%, transparent); }
.masa-card:hover .masa-go { color: var(--masa-resv-fg); transform: translateX(2px); }
.masa-card.is-empty:hover .masa-go,
.masa-card.is-full:hover .masa-go { color: currentColor; }

/* Dolgusuz buton temeli (kullanıcı 2026-07-11): dolgu ve çerçeve YOK;
   hover'da SADECE renk sarıya (kehribar) döner — alt çizgi HİÇBİR durumda yok. */
.btn-masa-empty {
  background: transparent; border: 0; color: var(--text-secondary);
  font-weight: 600; box-shadow: none; text-decoration: none !important;
}
.btn-masa-empty:hover, .btn-masa-empty:focus, .btn-masa-empty:active {
  background: transparent !important; border: 0 !important;
  color: var(--masa-resv-fg) !important; text-decoration: none !important;
}
.btn-masa-full {
  background: transparent; border: 0; color: var(--masa-full-fg);
  font-weight: 700; box-shadow: none; text-decoration: none !important;
}
.btn-masa-full:hover, .btn-masa-full:focus, .btn-masa-full:active {
  background: transparent !important; border: 0 !important;
  color: var(--masa-resv-fg) !important; text-decoration: none !important;
}

/* =============================================================================
   YERLEŞİM / NFC TANIMLAMA KARTI (kullanıcı 2026-07-21) — kasa masa kartından AYRIK:
   doluluk (Dolu/Boş) bu sayfada yok, kart nötr. Kasa'nın mobil kare-kart kuralları
   (.masa-grid aspect-ratio + overflow:hidden) burada içeriği kırpıyordu; o yüzden
   kendi grid sınıfı. İçerik: ad + kalem (düzenle) + 2 kompakt eylem — telefonda tam sığar.
   ============================================================================= */
.nfc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.nfc-card { border-radius: calc(14px * var(--radius-scale, 1)); }
.nfc-card .card-body { padding: 9px 10px; }
.nfc-card .nfc-card-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nfc-card .btn-sm { padding: 5px 6px; font-size: 12px; }
.nfc-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.nfc-edit-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@media (max-width: 575.98px) {
  .nfc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .nfc-card .card-body { padding: 7px 7px 8px; }
  .nfc-card .nfc-card-name { font-size: 12.5px; }
  .nfc-card .btn-sm { padding: 4px 4px; font-size: 11px; }
}

/* Sık Kullanılanlar kutusu: içi DİĞERLERİ GİBİ (dolgusuz), yalnız ALTIN çerçeve + altın
   yıldız (kullanıcı 2026-07-13: "içi beyaz olsun, altın border yeter"). */
.adisyon-cat-simple.is-fav-tile { border-color: rgba(194, 142, 46, 0.6); }
[data-theme="dark"] .adisyon-cat-simple.is-fav-tile { border-color: rgba(232, 182, 76, 0.45); }

/* ADİSYON FLASH TOAST (kullanıcı 2026-07-13): DÜZ/DOLU renk — bootstrap alert soluktu.
   En üstte, ortada; 1.5sn sonra JS düşürür. */
.adisyon-flash {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  min-width: 300px;
  max-width: min(92vw, 560px);
  padding: 11px 18px;
  border: 0;
  border-radius: calc(12px * var(--radius-scale, 1));
  font-weight: 600;
  text-align: center;
  opacity: 1;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.45);
}
.adisyon-flash.is-success { background: var(--sweet-green); color: #fff; }
.adisyon-flash.is-error { background: var(--sweet-red-dk); color: #fff; }

/* ORTAK TOAST DOLU RENK (kullanıcı 2026-07-19: "tüm uyarılar tam görünen olsun") —
   ToastAlert'in soluk bootstrap alert'i sistem genelinde .adisyon-flash diline çekilir:
   dolu zemin + beyaz (warning'de koyu) yazı, kenarlıksız, belirgin gölge. */
.hm-toast .alert {
  border: 0;
  font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.45);
}
.hm-toast .alert-success { background: var(--sweet-green); color: #fff; }
.hm-toast .alert-danger { background: var(--sweet-red-dk); color: #fff; }
.hm-toast .alert-warning { background: var(--masa-paused-accent, #e8b64c); color: #2b2005; }
.hm-toast .alert-info { background: #33415f; color: #fff; }
.hm-toast .alert-success .btn-close,
.hm-toast .alert-danger .btn-close,
.hm-toast .alert-info .btn-close { filter: brightness(0) invert(1); }

/* SÜRÜKLE-SIRALA (kullanıcı 2026-07-13): sık kullanılanlar + kategoriler. Basılı tutmada
   metin seçimi/iOS callout çıkmasın; sürüklenen öğe hafif kalkık. */
.drag-sort-item {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* KALDIRMA hissi (kullanıcı 2026-07-13): kesik vurgu halkası + derin gölge + üst katman.
   Ölçek/eğim ve PARMAĞI TAKİP eden translate INLINE transform'da (use-drag-reorder) —
   class'a transform/animation koyma, inline ile çakışır. */
.drag-sort-item.is-drag-src {
  opacity: 0.95;
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.5);
  outline: 2px dashed color-mix(in srgb, var(--primary) 65%, transparent);
  outline-offset: 2px;
  z-index: 5;
  position: relative;
}
body.drag-sorting, body.drag-sorting * { cursor: grabbing !important; }
/* Sürükleme boyunca sayfada metin seçimi başlamasın (masaüstünde hızlı sürüklemede
   komşu yazılar maviye boyanıyordu). */
body.drag-sorting { user-select: none; -webkit-user-select: none; }

/* Telefonda masa kartı butonları parmak hedefi boyutunda (44px kuralı) */
@media (max-width: 767.98px) {
  .masa-card .btn-sm {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
}

/* =============================================================================
   YÖNETİM CANLI SATIRI — CANLI: arka plansız kırmızı metin + ÇOK HAFİF ve YAVAŞ
   yanıp sönen nokta (kullanıcı 2026-07-11: kırmızı arkaplan pili kaldırıldı).
   Saat: gerçek zamanlı dijital pil — tabular rakamlar, saniye kısmı soluk.
   ============================================================================= */
.hm-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
/* Koyu modda CANLI daha PARLAK kırmızı (kullanıcı 2026-07-11: "belirgin ve parlak"). */
[data-theme=dark] .hm-live-badge.is-live { color: #e85454; }
/* İkonlu durum: CANLI = yayın (broadcast) ikonu hafif nabızlı; DURDU = koyu sarı pause.
   Durum masadan sipariş anahtarına bağlıdır (kapalı = duraklatıldı). */
.hm-live-badge .hm-live-ico { font-size: 13px; line-height: 1; }
.hm-live-badge.is-live .hm-live-ico { animation: hm-live-pulse 2.6s ease-in-out infinite; }
.hm-live-badge.is-paused { color: var(--masa-resv-fg); }
@keyframes hm-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-live-badge.is-live .hm-live-ico { animation: none; }
}
.hm-live-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow);
}
.hm-live-clock .bi { font-size: 13px; color: var(--primary); align-self: center; }
.hm-clock-sec { color: var(--text-muted); font-weight: 600; }

/* =============================================================================
   İŞLEMLER ŞERİDİ (hm-ops) — sayfa üstü komuta çubuğu: solda özet rozetler,
   sağda eylem butonları. Telefonda: rozetler üst satır, butonlar 2 sütunlu ızgara,
   ana eylem (hm-ops-cta) tam genişlik son satır.
   ============================================================================= */
.hm-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-ops-stats { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; }
.hm-ops-actions { display: flex; align-items: center; gap: 8px; }
.hm-ops-field { min-width: 0; }
@media (max-width: 767.98px) {
  .hm-ops-stats { width: 100%; }
  .hm-ops-field { width: 100%; }
  .hm-ops-field .form-select { flex: 1 1 auto; width: auto; min-height: 42px; }
  .hm-ops-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hm-ops-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
  }
  .hm-ops-actions .hm-ops-cta { grid-column: 1 / -1; }
  /* Depo mobil kartı: Hareket/Düzenle/Sil butonları eşit + parmak dostu */
  .hm-stock-card-actions .btn {
    flex: 1 1 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Diyet/özellik etiket çipi — seçilmemiş: sade yüzey; seçili: yumuşak turuncu dolgu */
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  /* Cip metni ASLA kirilmaz (2026-08-01): "Son 7 Gun" iki satira inip filtre
     satirini dikeyde buyutuyordu (Bugun secilince baslik eki alani daraltinca). */
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.hm-chip:hover { border-color: var(--primary); color: var(--primary); }
.hm-chip.is-on {
  background: var(--primary-lt);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(201, 53, 29, 0.18);
}
@media (max-width: 767.98px) {
  .hm-chip { min-height: 38px; padding: 5px 13px; font-size: 13px; }
}

/* Yerleşim: alan ⋮ menüsü — dokunmatik dostu satır yüksekliği */
.yerlesim-area-menu { min-width: 200px; }
.yerlesim-area-menu .dropdown-item { padding: 9px 14px; font-size: 13.5px; }
.yerlesim-area-menu .dropdown-item:active { background-color: var(--bg-surface-secondary); color: var(--text); }

.btn-secondary {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border-color);
  color: var(--text);
}
.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-outline-secondary:hover {
  background-color: var(--bg-surface-secondary);
  color: var(--text);
  border-color: var(--border-color);
}

/* ---- Tablolar ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: var(--bg-surface-secondary);
  --bs-table-striped-color: var(--text);
  color: var(--text);
}
.table > thead th {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom-color: var(--border-color);
}
.table > tbody td { border-color: var(--border-color); }

/* ---- Formlar ---- */
.form-control,
.form-select {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--font-size);
}
.form-control::placeholder { color: var(--text-disabled); }
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
  color: var(--text);
}
.form-label { color: var(--text-secondary); font-size: 13px; font-weight: var(--font-weight-medium); }
/* iOS odak-zoom önlemi: telefonda input yazısı 16px'in altına inmesin */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .form-select-sm { font-size: 16px; }
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.input-group-text {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

/* ---- Rozetler / renk kutuları (text-bg-*) ---- */
.badge { border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); }
.text-bg-primary { background-color: var(--primary) !important; color: var(--primary-fg, #fff) !important; }
.text-bg-success { background-color: var(--green) !important; color: #fff !important; }
.text-bg-danger  { background-color: var(--red) !important; color: #fff !important; }
.text-bg-warning { background-color: var(--yellow) !important; color: #1e2633 !important; }
.text-bg-info    { background-color: var(--azure) !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--text-muted) !important; color: #fff !important; }

/* Yumuşak (pastel) rozetler — solid text-bg-* yerine daha sakin, uyumlu görünüm.
   Açık zemin + aynı renkte yazı; her temada okunur (var(--*-lt) tema duyarlı). */
.badge.badge-soft-primary   { background: var(--primary-lt); color: var(--primary); }
.badge.badge-soft-success   { background: var(--green-lt);   color: var(--green); }
.badge.badge-soft-danger    { background: var(--red-lt);     color: var(--red); }
.badge.badge-soft-warning   { background: var(--yellow-lt);  color: var(--yellow); }
.badge.badge-soft-info      { background: var(--azure-lt);   color: var(--azure); }
.badge.badge-soft-secondary { background: rgba(128,141,160,0.15); color: var(--text-secondary); }
/* Tatlı yeşil/kırmızı (masa durumları) — soft ve solid varyantlar */
.badge.badge-sweet-green { background: var(--sweet-green-lt); color: var(--sweet-green); }
.badge.badge-sweet-red   { background: var(--sweet-red-lt);   color: var(--sweet-red); }
.badge.badge-sweet-green-solid { background: var(--sweet-green); color: #fff; }
.badge.badge-sweet-red-solid   { background: var(--sweet-red);   color: #fff; }
/* Masa durumu pastel rozetleri (Boş = slate, Dolu = turuncu) */
.badge.badge-masa-empty { background: var(--masa-empty-soft); color: var(--masa-empty-fg); }
.badge.badge-masa-full  { background: var(--masa-full-solid);  color: #fff; }
/* Marka turuncu rozet (sweet-red yerine chrome/aksiyon etiketleri için) */
.badge.badge-brand-solid { background: var(--primary); color: #fff; }
.badge.badge-brand { background: var(--primary-lt); color: var(--primary); }
/* Solid renkli rozetler (istatistik/etiketler) */
.badge.badge-solid-azure  { background: var(--azure);  color: #fff; }
.badge.badge-solid-indigo { background: var(--indigo); color: #fff; }
.badge.badge-solid-purple { background: var(--purple); color: #fff; }
.badge.badge-solid-cyan   { background: var(--cyan);   color: #fff; }

/* ---- AdminLTE small-box (dashboard stat kutuları) ---- */
.small-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.small-box > .inner { padding: 16px; }
.small-box h3 { font-size: 1.7rem; font-weight: 700; margin: 0; }
.small-box p { margin: 0; font-size: 0.9rem; opacity: 0.95; }
.small-box .small-box-icon {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 2.6rem;
  opacity: 0.25;
}
.small-box.text-bg-primary { background-color: var(--primary) !important; }
.small-box.text-bg-success { background-color: var(--green) !important; }
.small-box.text-bg-warning { background-color: var(--yellow) !important; color: #1e2633 !important; }
.small-box.text-bg-danger  { background-color: var(--red) !important; }
.small-box.text-bg-info    { background-color: var(--azure) !important; }

/* ---- Progress ---- */
.progress { background-color: var(--bg-surface-secondary); border-radius: calc(99px * var(--radius-scale, 1)); }
.progress-bar { background-color: var(--primary); }

/* ---- Modal / dropdown ---- */
.modal-content,
.dropdown-menu {
  background-color: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.modal-header, .modal-footer { border-color: var(--border-color); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background-color: var(--bg-surface-secondary); color: var(--text); }

/* ---- Alert ---- */
.alert-warning { background-color: var(--yellow-lt); border-color: transparent; color: var(--text); }
.alert-danger { background-color: var(--red-lt); border-color: transparent; color: var(--text); }
.alert-success { background-color: var(--green-lt); border-color: transparent; color: var(--text); }

/* NOT (2026-07-20): buradaki eski "yüzen toast -lt opaklaştırma" bloğu kaldırıldı —
   yukarıdaki ORTAK TOAST DOLU RENK kurallarını (dolu zemin + beyaz yazı) eziyor,
   beyaz yazı açık zeminde okunmuyordu. Dolu renk zaten opak; ayrıca katmana gerek yok. */

/* ---- Dark mode: Bootstrap/Tailwind'in çevirmediği SABİT açık class'lar ---- */
[data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; }
[data-theme="dark"] .bg-light { background-color: var(--bg-surface-secondary) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-light { border-color: var(--border-color) !important; }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
  --bs-table-bg: var(--bg-surface-secondary);
  --bs-table-color: var(--text);
  background-color: var(--bg-surface-secondary) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .alert-light {
  background-color: var(--bg-surface-secondary);
  color: var(--text);
  border-color: var(--border-color);
}
[data-theme="dark"] .list-group-item {
  background-color: var(--bg-surface);
  color: var(--text);
  border-color: var(--border-color);
}
/* Tailwind gri tonları (yardım vb. eski sayfalar) dark'ta okunur kalsın */
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 { color: var(--text) !important; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 { color: var(--text-secondary) !important; }
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-100 { border-color: var(--border-color) !important; }

/* ---- Sidebar üst: işletme + kullanıcı hesabı ---- */
/* Sol üst köşe hamburger — sidebar hesap başlığının ilk öğesi (kullanıcı 2026-07-11). */
.hm-account .hm-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: -4px;
  border: 0;
  background: transparent;
  color: var(--sidebar-text-hover);
  border-radius: calc(8px * var(--radius-scale, 1));
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.hm-account .hm-burger:hover { background: var(--sidebar-hover); color: #fff; }

/* KOMPAKT hesap başlığı (kullanıcı 2026-07-11): topbar ile AYNI 56px yükseklik —
   yatay dizilim, küçük avatar; işletme adı + rol yan yana sığar. */
.hm-account {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 10px;
  height: 56px;
  padding: 0 12px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.hm-account .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
}
.hm-account .avatar .online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: var(--green);
  border: 2px solid var(--sidebar-bg);
  border-radius: 50%;
}
.hm-account .sidebar-user-info { width: 100%; min-width: 0; }
.hm-account .name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-account .role {
  color: var(--sidebar-text);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-account .more-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  border-radius: calc(6px * var(--radius-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.hm-account .more-btn:hover { background: var(--sidebar-hover); color: #fff; }

/* ---- Sidebar alt: çıkış + HIZLI MASA tanıtım ---- */
.hm-logout {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.hm-logout:hover {
  background: rgba(214, 57, 57, 0.12);
  border-color: rgba(214, 57, 57, 0.35);
  color: #ff8585;
}
.hm-logout svg { flex-shrink: 0; }

.hm-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sidebar-border);
  transition: background 120ms;
}
.hm-promo:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.hm-promo .brand-icon {
  width: 30px;
  height: 30px;
  border-radius: calc(7px * var(--radius-scale, 1));
  background: var(--primary);
  color: var(--primary-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.hm-promo-logo {
  display: block;
  width: 100%;
  max-height: 30px;
  object-fit: contain;
  object-position: left center;
  /* Logodaki turuncu alevi tatlı kırmızıya kaydır (beyaz yazı etkilenmez). */
  filter: hue-rotate(-33deg) saturate(0.9);
}
.hm-promo-text { min-width: 0; }
.hm-promo-name { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
.hm-promo-tag { color: var(--sidebar-text); font-size: 10.5px; line-height: 1.3; margin-top: 1px; }

/* Rail (daraltılmış) modda: çıkış ikon-only ortalanır, logo gizlenir. */
@media (min-width: 769px) {
  body.sidebar-rail .hm-logout {
    justify-content: center;
    padding: 9px 0;
  }
  body.sidebar-rail .hm-logout-text { display: none; }
  body.sidebar-rail .hm-promo { display: none; }
}
/* HIZLI MASA tanitim blogu WEB'de KALKTI (kullanici 2026-08-01) — mobil cekmecede durur.
   (Kural skin'de: .hm-promo taban stili burada, shell'deki gizleme yukleme sirasi
   nedeniyle eziliyordu.) */
@media (min-width: 769px) {
  .hm-promo { display: none !important; }
}

/* ---- Masaüstü sidebar daraltma (hamburger) ---- */
@media (min-width: 769px) {
  body.hm-sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.hm-sidebar-collapsed .main { margin-left: 0; }
  body.hm-sidebar-collapsed .topbar { left: 0; }
}

/* ---- Sayfa header'ı: başlık + sağda aksiyon/istatistik ---- */
.page-actions { align-items: center; }
.page-actions .badge { font-size: 12px; padding: 6px 10px; }

/* ---- Login sayfaları (AdminLTE login-page) ---- */
.login-page { background-color: var(--body-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-logo { text-align: center; margin-bottom: 16px; font-size: 1.6rem; color: var(--text); }
.login-box { width: 360px; max-width: 92vw; }

/* ---- Sağ kenar açılır işlem menüsü (EdgeActionMenu) ---- */
.edge-action-menu {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 85;
  display: flex;
  align-items: stretch;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: calc(12px * var(--radius-scale, 1)) 0 0 12px;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.14);
  /* Kapalı: yalnızca soldaki ~30px tab görünür, gerisi sağ kenarın dışında. */
  transform: translateY(-50%) translateX(calc(100% - 30px));
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
.edge-action-menu.open {
  transform: translateY(-50%) translateX(0);
}
.edge-action-tab {
  flex: 0 0 30px;
  width: 30px;
  border: none;
  background: var(--primary);
  color: var(--primary-fg, #fff);
  border-radius: calc(12px * var(--radius-scale, 1)) 0 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edge-action-tab svg {
  transition: transform 240ms ease;
}
.edge-action-menu.open .edge-action-tab svg {
  transform: rotate(180deg);
}
.edge-action-panel {
  width: 210px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edge-action-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.edge-action-panel .btn {
  width: 100%;
}
@media (max-width: 768px) {
  .edge-action-panel { width: 180px; }
}

/* ---- Ürün kartı (Ürünler sayfası) — kompakt, tıklanabilir ---- */
.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--bg-surface);
  padding: 0;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.product-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.product-card:hover .product-card-edit { opacity: 1; }
/* SEÇİLİ ÜRÜN — KOYU YEŞİL (kullanıcı 2026-07-12: vurgu çerçevesi yerine sepet yeşili);
   adet rozeti ve sağdaki sayı da yeşile döner. */
.product-card.is-picked { border-color: var(--sweet-green-dk) !important; }
.product-card.is-picked .badge-brand-solid { background: var(--sweet-green-dk) !important; }
.product-card.is-picked .product-card-add.has-qty { color: var(--sweet-green-dk); }
/* ADET DÜŞÜR (−): masaüstünde kartın sol-üst köşesinde yüzer; mobil satır düzeninde
   satırın BAŞINDA durur (aşağıdaki media bloğu). */
.product-card-minus {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--sweet-green-bd);
  color: var(--sweet-green-dk);
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.product-card-minus:active { transform: scale(0.92); }
/* SEÇİLİ ÜRÜN STEPPER (2026-07-19 v3: bölmeli hap "güzel değil" → TAMAMI dolu yeşil tek
   hap, beyaz − adet + — ayraç/çerçeve yok, modern adet kapsülü). Uçlar yine uzak →
   ikinci dokunuş kazayla silmez; dokunuşta uç hafif kararır. */
/* STEPPER v5 (kullanici 2026-08-01: "sisteme uygun, modern"): dolu yesil kapsul yerine
   SISTEM DILI — soluk yesil zemin (color-mix), ince yesil-karisim cerceve, keskin kose
   (radius-scale ailesi), ortada yuzey renkli sayi hucresi. Segmentli kontrol hissi. */
.product-card-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  padding: 0;
  border-radius: calc(8px * var(--radius-scale, 1));
  background: color-mix(in srgb, var(--sweet-green) 10%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--sweet-green) 45%, var(--border-color));
  overflow: hidden;
  box-shadow: none;
}
.pcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 0;
  font-size: 12px;
  color: var(--sweet-green);
  background: transparent;
  cursor: pointer;
  transition: background 100ms ease;
}
.pcs-btn:active { background: color-mix(in srgb, var(--sweet-green) 20%, var(--bg-surface)); }
.pcs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 4px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  background: var(--bg-surface);
  border-left: 1px solid color-mix(in srgb, var(--sweet-green) 30%, var(--border-color));
  border-right: 1px solid color-mix(in srgb, var(--sweet-green) 30%, var(--border-color));
  font-variant-numeric: tabular-nums;
  animation: pcs-pop 150ms ease-out;
}
/* Adet değişince minik "pop" (React key={qty} → remount → animasyon yeniden oynar). */
@keyframes pcs-pop {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}
/* Stepper fiyatı sıkıştırınca "250 TL" iki satıra kırılıyordu — fiyat tek satır kalır. */
.adisyon-prod-grid.is-compact .product-card-price { white-space: nowrap; }
.product-card-img {
  position: relative;
  display: block;
  width: 100%;
  height: 76px;
  background: var(--bg-surface-secondary);
}
.product-card-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  opacity: 0.5;
  color: var(--text-disabled);
}
/* Öneriler sayfası — sistem satır kartları (tam genişlik; sağda seçili ürün önizlemesi) */
.rec-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 96px;
  padding: 18px 20px;
  border-radius: calc(18px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.rec-row + .rec-row { margin-top: 14px; }
.rec-row:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.rec-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: calc(16px * var(--radius-scale, 1));
  flex-shrink: 0;
  font-size: 30px;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
}
.rec-row-main { flex-shrink: 0; width: 220px; max-width: 38%; }
.rec-row-title { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.rec-row-desc {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-row-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.rec-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  max-width: 170px;
}
.rec-row-chip img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.rec-row-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row-more { font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.rec-row-empty { font-size: 12.5px; color: var(--text-muted); }
.rec-row-chevron { margin-left: auto; font-size: 24px; line-height: 1; color: var(--text-muted); flex-shrink: 0; padding-left: 6px; }

/* İşletme Önerisi rozeti (kategori-bazlı öneri = isCategoryPick) — kart sol-üst, altın */
.product-card-pick {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6b73c, #ef9e1f);
  color: #3a2400;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
}
.product-card-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(6px * var(--radius-scale, 1));
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 140ms ease;
}
.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  flex: 1;
}
.product-card-name {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.product-card-price {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--primary);
}
/* Müşteri beğeni sayısı (üyeliksiz kalp) — yalnız beğenisi olan üründe görünür */
.product-card-likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #e2574c;
  flex-shrink: 0;
}
.product-card-likes .bi { font-size: 10px; line-height: 1; }
.product-card-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ürünler ekranı — premium modül: kategori kutuları + ürün drill-down.
   Token tabanlı: dark mode'da slate+turuncu premium, light mode'da temiz beyaz — panelle uyumlu.
   Derinlik: sayfa (body) > modül "kuyu" (surface-secondary) > kartlar (surface, kabarık). */
.menu-premium {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 16px;
  color: var(--text);
}
.mp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.mp-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.mp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mp-title-icon { font-size: 19px; }
.mp-title-sub { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.mp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.mp-back:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(201, 53, 29, 0.5);
}
.mp-search {
  width: 260px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mp-search::placeholder { color: var(--text-muted); }
.mp-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }

/* Kategori kutuları */
.cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: calc(16px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
}
/* Üst medya: gerçek resim (cover) ya da kategori renginde büyük ikon */
.cat-tile-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 104px;
  overflow: hidden;
}
.cat-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile-emoji { font-size: 34px; line-height: 1; }
.cat-tile-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.cat-tile-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.cat-tile-count { font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* Ürün Durumu (2026-07-30): telefonda kategoriler TEK SATIRDA 3'LÜ küçük kutu —
   garson tek bakışta daha çok kategori görsün (yalnız .cat-tile-grid-sm işaretli ızgara). */
@media (max-width: 575.98px) {
  .cat-tile-grid.cat-tile-grid-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile { border-radius: 12px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-media { height: 64px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-emoji { font-size: 24px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-body { padding: 7px 8px; gap: 1px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-name {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-count { font-size: 10px; }
  .cat-tile-grid.cat-tile-grid-sm .cat-tile-sold { font-size: 9px; }
}

/* Arama alt-başlıkları */
.mp-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mp-section-head > [aria-hidden] { font-size: 15px; }
.mp-section-name { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.3px; }
.mp-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Ürün ızgarası */
.cat-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 12px;
}
.mp-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border-color);
  border-radius: calc(14px * var(--radius-scale, 1));
}

/* Premium yüzeyde ürün kartları: daha büyük görsel (kart stili zaten token'lı, her temada uyumlu) */
.menu-premium .product-card-img { height: 94px; }

/* =============================================================================
   ANASAYFA DÜZENLEYİCİ (HomepageSection editörü) — token tabanlı, dark/light uyumlu
   ============================================================================= */
.hs-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
}
.hs-tab {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.hs-tab:hover { color: var(--text); }
.hs-tab.is-active { background: var(--primary); color: #fff; }

.hs-list { display: flex; flex-direction: column; gap: 10px; }
.hs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow);
  transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}
.hs-row:hover { border-color: var(--primary); }
.hs-row.is-inactive { opacity: 0.55; }
.hs-row.is-dragover { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-lt); transform: translateY(-1px); }
.hs-handle { cursor: grab; color: var(--text-muted); font-size: 18px; line-height: 1; user-select: none; }
.hs-handle:active { cursor: grabbing; }
.hs-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  font-size: 19px;
}
.hs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-title { font-size: 14.5px; font-weight: 800; color: var(--text); }
.hs-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-lt);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.hs-badge-off { background: var(--bg-surface-secondary); color: var(--text-muted); border-color: var(--border-color); }
.hs-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.hs-link {
  align-self: flex-start;
  margin-top: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.hs-link:hover { text-decoration: underline; }

.hs-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* TELEFON: bolum satirlari kompakt iki-katli duzene gecer — ust satir: emoji + baslik + rozetler,
   alt satir: aksiyon butonlari (tam genislik, sag yasli, buyuk dokunma hedefi). Aciklama 2 satirla
   kirpilir, dikine sikismis metin sutunu olusmaz; surukleme sapi gizlenir (mobilde ok butonlari esas). */
@media (max-width: 767.98px) {
  .hs-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .hs-handle { display: none; }
  .hs-emoji { width: 30px; height: 30px; font-size: 15px; border-radius: calc(8px * var(--radius-scale, 1)); }
  .hs-main { flex: 1 1 0; }
  .hs-title { font-size: 13.5px; }
  .hs-desc {
    font-size: 11.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hs-actions {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
  }
  .hs-actions .hs-iconbtn { width: 38px; height: 34px; font-size: 15px; }
  /* Modul basligi: baslik tek satir, alt-baslik altina iner; butonlar sikismaz */
  .mp-title { font-size: 15px; flex-wrap: wrap; row-gap: 2px; flex: 1 1 auto; min-width: 0; }
  .mp-title-sub { flex-basis: 100%; font-size: 11.5px; }
  /* Telefonda başlık şeridi yerleşimi: başlık solda + Geri sağda AYNI satır,
     arama alta tam genişlik iner. display:contents ile sağ grup çocukları
     doğrudan .mp-head'in flex satırlarına katılır (DOM değişmeden). */
  .mp-head { row-gap: 8px; }
  .mp-head-right { display: contents; }
  .mp-back { order: 2; margin-left: auto; padding: 7px 14px; }
  .mp-search { order: 3; width: 100%; min-height: 42px; font-size: 16px; }
  /* Oneriler: secili urun onizleme cipleri telefonda YOK (yarim kesik gorunuyordu) —
     baslik + aciklama yeterli, secim detayi icine girince gorulur. Web'de aynen kalir. */
  .rec-row-preview { display: none; }

  /* Urunler: topbar istatistik rozetleri telefonda gizli (kirpiliyordu) — ayni bilgi
     sayfa icinde "18 kategori · 238 urun" olarak zaten var; web'de aynen kalir. */
  .topbar-actions .hm-stat { display: none; }

  /* Islemler cubugu telefonda KOMPAKT cip izgarasi (2026-08-02: "cok daha az yer kaplasin"):
     etiket gizli, kucuk esit butonlar; genislige gore 2-3 sutun kendiliginden oturur. */
  .hm-actbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; padding: 8px; }
  .hm-actbar-label { display: none; }
  .hm-actbar .hm-act { width: 100%; justify-content: center; padding: 8px 6px; font-size: 12px; border-radius: calc(9px * var(--radius-scale, 1)); margin-left: 0 !important; }
}

/* Tablet araligi (768-991.98): alt nav'li mobil kabuk hala aktifken islemler cubugu
   masaustu duzenine donup dikey yigilabiliyordu — ayni kompakt izgara burada da gecerli. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hm-actbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding: 8px; }
  .hm-actbar-label { display: none; }
  .hm-actbar .hm-act { width: 100%; justify-content: center; padding: 8px 8px; font-size: 12.5px; border-radius: calc(9px * var(--radius-scale, 1)); margin-left: 0 !important; }
}
.hs-iconbtn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.hs-iconbtn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.hs-iconbtn:disabled { opacity: 0.35; cursor: default; }
.hs-iconbtn-danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }

/* Görünürlük anahtarı */
.hs-switch { position: relative; display: inline-flex; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; }
.hs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.hs-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--text-disabled);
  transition: background 160ms ease;
}
.hs-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease;
}
.hs-switch input:checked + .hs-switch-track { background: var(--primary); }
.hs-switch input:checked + .hs-switch-track::after { transform: translateX(18px); }

/* Bölüm ekle kartları */
.hs-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hs-add-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.hs-add-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.hs-add-emoji { font-size: 28px; }
.hs-add-name { font-size: 15px; font-weight: 800; color: var(--text); }
.hs-add-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }

/* Modal form alanları */
.hs-field { margin-bottom: 14px; }
.hs-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }
.hs-banner-preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hs-banner-preview img { width: 100%; max-height: 160px; object-fit: cover; border-radius: calc(12px * var(--radius-scale, 1)); border: 1px solid var(--border-color); }
.hs-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: calc(10px * var(--radius-scale, 1));
  border: 1px dashed var(--border-color);
  background: var(--bg-surface-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hs-upload:hover { border-color: var(--primary); color: var(--primary); }

/* Seçili ürün çipleri */
.hs-chiplist { display: flex; flex-direction: column; gap: 6px; }
.hs-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: calc(10px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
}
.hs-chip img { width: 28px; height: 28px; border-radius: calc(7px * var(--radius-scale, 1)); object-fit: cover; flex-shrink: 0; }
.hs-chip-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-chip button {
  width: 26px; height: 26px; border-radius: calc(7px * var(--radius-scale, 1)); border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; font-size: 12px; flex-shrink: 0;
}
.hs-chip button:hover { border-color: var(--primary); color: var(--primary); }

/* Ürün seçici liste */
.hs-picker { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: calc(12px * var(--radius-scale, 1)); padding: 6px; }
.hs-picker-group { margin-bottom: 6px; }
.hs-picker-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; color: var(--text-muted); padding: 6px 6px 4px; text-transform: uppercase; }
.hs-picker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: calc(9px * var(--radius-scale, 1));
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.hs-picker-item:hover { background: var(--bg-surface-secondary); }
.hs-picker-item.is-on { background: var(--primary-lt); border-color: var(--primary); }
.hs-picker-check {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: calc(6px * var(--radius-scale, 1)); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color); background: var(--bg-surface); color: #fff; font-size: 12px; font-weight: 900;
}
.hs-picker-item.is-on .hs-picker-check { background: var(--primary); border-color: var(--primary); }
.hs-picker-item img { width: 32px; height: 32px; border-radius: calc(7px * var(--radius-scale, 1)); object-fit: cover; flex-shrink: 0; }
.hs-picker-noimg { width: 32px; height: 32px; border-radius: calc(7px * var(--radius-scale, 1)); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-surface-secondary); font-size: 16px; }
.hs-picker-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-picker-price { font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }

/* Modal kabuğu */
.hs-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(10, 16, 28, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hs-modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: calc(16px * var(--radius-scale, 1));
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.hs-modal-wide { max-width: 600px; }
.hs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}
.hs-modal-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.hs-modal-x {
  width: 32px; height: 32px; border-radius: calc(8px * var(--radius-scale, 1)); border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-secondary); cursor: pointer; font-size: 14px;
}
.hs-modal-x:hover { border-color: var(--red); color: var(--red); }
.hs-modal-body { padding: 18px; overflow-y: auto; }
.hs-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* =============================================================================
   İŞLEMLER araç çubuğu (EdgeActionMenu) — çarpıcı/şık, turuncu markalı, dark/light uyumlu
   ============================================================================= */
.hm-actbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 16px 13px 20px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hm-actbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dk));
}
.hm-actbar-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hm-actbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}

/* Pill aksiyon butonları — tutarlı hiyerarşi (primary turuncu / accent altın / ghost nötr) */
.hm-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.hm-act svg, .hm-act i { font-size: 14px; }
.hm-act:hover { transform: translateY(-1px); }
.hm-act-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(201, 53, 29, 0.5);
}
.hm-act-primary:hover { background: var(--primary-dk); box-shadow: 0 7px 18px -4px rgba(201, 53, 29, 0.6); }
.hm-act-accent {
  background: linear-gradient(135deg, #f6b73c, #ef9e1f);
  color: #3a2400;
  box-shadow: 0 4px 12px -3px rgba(239, 158, 31, 0.5);
}
.hm-act-accent:hover { filter: brightness(1.05); box-shadow: 0 7px 18px -4px rgba(239, 158, 31, 0.6); }
.hm-act-ghost {
  background: var(--bg-surface-secondary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.hm-act-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-lt); }

/* Araç çubuğundaki düz Bootstrap butonları da (başka sayfalar) pill görünsün */
.hm-actbar .btn { border-radius: 999px; font-weight: 600; }

/* Şık istatistik rozetleri (topbar bilgi etiketleri) — renkli nokta + değer + etiket */
.hm-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.hm-stat b { color: var(--text); font-weight: 800; }
.hm-stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Urun Durumu (tukendi/satista) sayfasi --- */
/* Ust "tukendi spotlight" karti — en belirgin, en ustte */
.ud-spotlight {
  border: 1px solid rgba(229, 72, 77, 0.32);
  border-left: 4px solid #e5484d;
  background: var(--bg-surface);
  border-radius: calc(16px * var(--radius-scale, 1));
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 28px -16px rgba(229, 72, 77, 0.55);
}
.ud-sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ud-sp-icon { color: #e5484d; display: inline-flex; }
.ud-sp-title { font-weight: 800; font-size: 15px; color: var(--text); }
.ud-sp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  background: #e5484d; color: #fff; border-radius: 999px; font-size: 13px; font-weight: 800;
}
.ud-sp-list { display: flex; flex-direction: column; gap: 6px; }
.ud-sp-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-surface-secondary); border: 1px solid var(--border-color);
  border-radius: calc(12px * var(--radius-scale, 1)); padding: 6px 8px 6px 10px;
}
.ud-sp-row-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-sp-row-cat { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.ud-btn-open {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: calc(10px * var(--radius-scale, 1));
  background: #22c55e; color: #04240f; border: none; font-weight: 800; font-size: 13px;
  cursor: pointer; transition: transform 0.12s ease, filter 0.15s ease; white-space: nowrap;
}
.ud-btn-open:hover { filter: brightness(1.06); }
.ud-btn-open:active { transform: scale(0.96); }
.ud-btn-open:disabled { opacity: 0.55; cursor: default; }

/* "Hepsi satista" hos durum */
.ud-allgood {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08);
  border-radius: calc(14px * var(--radius-scale, 1)); padding: 12px 14px; margin-bottom: 18px;
  color: #22c55e; font-weight: 700; font-size: 14px;
}

/* Kategori kutusundaki tukendi rozeti */
.cat-tile-sold {
  position: absolute; top: 6px; right: 6px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
}

/* Urun satiri (kategori drill / arama) — KOMPAKT (2026-08-02): daha kucuk thumb/segment,
   dar bosluklar; "Garsondan" anahtari da ayni satira sigar. */
.ud-rows { display: flex; flex-direction: column; gap: 6px; }
.ud-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: calc(14px * var(--radius-scale, 1)); padding: 6px 10px 6px 6px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ud-row.is-sold { background: rgba(229, 72, 77, 0.07); border-color: rgba(229, 72, 77, 0.4); }
.ud-row.is-flagged { border-color: rgba(245, 158, 11, 0.45); }
/* "Menude Gosterme" acik: urun musteri menusunde HIC gorunmez — satir gri/soluk */
.ud-row.is-hidden { background: rgba(100, 116, 139, 0.08); border-color: rgba(100, 116, 139, 0.45); }
.ud-row.is-hidden .ud-thumb img { filter: grayscale(0.9); opacity: 0.55; }
.ud-row.is-hidden .ud-row-name { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ud-thumb {
  width: 40px; height: 40px; border-radius: calc(10px * var(--radius-scale, 1)); overflow: hidden; flex-shrink: 0;
  background: var(--bg-surface-secondary); position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ud-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ud-row.is-sold .ud-thumb img { filter: grayscale(0.7); opacity: 0.7; }
.ud-row-main { flex: 1 1 120px; min-width: 0; }
/* Ad ustte, fiyat altta (block sart — inline span'da ad+fiyat yan yana yapisiyordu: "Krep120 TL") */
.ud-row-name { display: block; font-weight: 700; color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-row-price { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 600; margin-top: 1px; }

/* Kontrol sargisi: genis ekranda satir sonunda tek sira; mobilde (asagida media query)
   kendi satirina iner — urun adi tam genislik, dokunma hedefleri buyur. */
.ud-ctrl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* "Garsondan" anahtari — menude gorunur ama musteri (QR/NFC) siparis EDEMEZ, garson ekler.
   Amber = kilitli/ozel durum dili (yesil satis, kirmizi tukendi ile karismaz). */
.ud-flag {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 32px; padding: 0 10px; border-radius: calc(9px * var(--radius-scale, 1));
  background: var(--bg-surface-secondary); border: 1px solid var(--border-color);
  color: var(--text-muted); font-weight: 700; font-size: 12px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ud-flag:disabled { cursor: default; opacity: 0.7; }
.ud-flag:not(.is-on):not(:disabled):hover { color: var(--text); }
.ud-flag.is-on { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.55); color: #f59e0b; }
/* "Gizle" varyanti: acikken koyu gri-mavi (menude yok dili; amber "Garsondan"la karismaz) */
.ud-flag-hide.is-on { background: rgba(100, 116, 139, 0.2); border-color: rgba(100, 116, 139, 0.65); color: #94a3b8; }

/* TAM MOBIL DUZEN (2026-08-02, "genelde mobilden kullanacaklar"): dar ekranda kontroller
   urun bilgisinin ALTINA kendi satirina iner; Gizle/Garsondan solda, Satista|Tukendi sagda
   kalan alani doldurur; dokunma hedefleri 38px'e buyur. */
@media (max-width: 640px) {
  /* KOMPAKT v2 (kullanici 2026-08-02: "butonlar cok yer kapliyor"): kart = 2 ince kat.
     Tum kontroller TEK seritte kucuk (30px): Gizle+Garsondan solda, Satista|Tukendi
     kalani doldurur — segment ikinci satira TASMAZ (min-width kaldirildi). */
  .ud-row { padding: 8px; gap: 8px; row-gap: 6px; }
  .ud-thumb { width: 38px; height: 38px; border-radius: calc(10px * var(--radius-scale, 1)); font-size: 18px; }
  .ud-row-main { flex: 1 1 auto; min-width: 0; }
  .ud-row-name { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .ud-row-price { font-size: 11.5px; margin-top: 1px; }
  .ud-ctrl { flex-basis: 100%; margin-left: 0; gap: 4px; padding-top: 0; border-top: 0; flex-wrap: nowrap; justify-content: flex-start; }
  .ud-ctrl .ud-seg { flex: 1; min-width: 0; padding: 2px; gap: 2px; }
  .ud-ctrl .ud-seg-btn { flex: 1; min-width: 0; height: 26px; padding: 0 6px; font-size: 11px; gap: 3px; }
  .ud-ctrl .ud-seg-btn svg { width: 12px; height: 12px; }
  .ud-flag { height: 30px; padding: 0 7px; font-size: 11px; gap: 3px; }
  .ud-flag svg { width: 12px; height: 12px; }
  .ud-sp-row { flex-wrap: wrap; }
  .ud-btn-open { height: 34px; }
  .ud-skel-row { height: 78px; }
}

/* Segmentli anahtar: Satista | Tukendi (net iki-durumlu toggle) */
.ud-seg {
  display: inline-flex; flex-shrink: 0; padding: 2px; gap: 2px;
  background: var(--bg-surface-secondary); border: 1px solid var(--border-color); border-radius: calc(11px * var(--radius-scale, 1));
}
.ud-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; min-width: 76px; padding: 0 10px; border: none; background: transparent;
  color: var(--text-muted); font-weight: 700; font-size: 12.5px; border-radius: calc(8px * var(--radius-scale, 1));
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.ud-seg-btn:disabled { cursor: default; }
.ud-seg-btn:not(.is-active):not(:disabled):hover { color: var(--text); }
.ud-seg-on.is-active { background: #22c55e; color: #04240f; }
.ud-seg-off.is-active { background: #e5484d; color: #fff; }

/* URUN EKLE/DUZENLE modallari mobil KOMPAKT (2026-08-02: "scroll olmadan sigsin"):
   telefonda etiket/alan/bosluklar kucultulur — form tek ekrana yaklasir. Web etkilenmez. */
@media (max-width: 767.98px) {
  .hm-compact-form { font-size: 12.5px; }
  .hm-compact-form .form-label,
  .hm-compact-form label { margin-bottom: 2px !important; font-size: 11.5px !important; }
  .hm-compact-form .form-control,
  .hm-compact-form .form-select,
  .hm-compact-form input[type="text"],
  .hm-compact-form input[type="number"] { padding: 5px 8px !important; font-size: 12.5px !important; min-height: 32px; }
  .hm-compact-form textarea { padding: 5px 8px !important; font-size: 12.5px !important; min-height: 34px !important; height: 34px; }
  .hm-compact-form .row.g-2 { --bs-gutter-y: 0.35rem; --bs-gutter-x: 0.35rem; }
  .hm-compact-form.d-grid { gap: 6px !important; }
  .hm-compact-form .d-grid.gap-2 { gap: 6px !important; }
  .hm-compact-form .space-y-2\.5 > * + *,
  .hm-compact-form > * + * { margin-top: 6px !important; }
  .hm-compact-form .btn { padding: 5px 9px; font-size: 12px; }
  .hm-compact-form .btn-lg, .hm-compact-form button[type="submit"] { padding: 8px 12px; font-size: 13.5px; }
}

/* Urunler sayfasi: kategori ici URUN LISTESI (2026-08-02; kutu grid emekli) —
   satir = duzenle, basili tut + surukle = musteri menusundeki sira. */
.prod-rows-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px; color: var(--text-muted); }
.prod-rows { display: flex; flex-direction: column; gap: 6px; }
.prod-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: calc(12px * var(--radius-scale, 1)); padding: 8px 10px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.prod-row:hover { border-color: var(--primary); }
.prod-row.is-dragging { border-color: var(--primary); background: var(--primary-lt); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); }
.prod-row-grip { color: var(--text-muted); flex-shrink: 0; display: inline-flex; font-size: 15px; }
.prod-row-thumb {
  width: 42px; height: 42px; border-radius: calc(10px * var(--radius-scale, 1)); overflow: hidden; position: relative; flex-shrink: 0;
  background: var(--bg-surface-secondary); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.prod-row-main { flex: 1; min-width: 0; }
.prod-row-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-row-pick { color: var(--sweet-orange, #ef9e1f); margin-right: 4px; }
.prod-row-meta { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-row-price { font-weight: 800; font-size: 13.5px; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.prod-row-edit { color: var(--text-muted); flex-shrink: 0; display: inline-flex; font-size: 14px; }
@media (max-width: 640px) {
  .prod-row { padding: 7px 8px; gap: 8px; }
  .prod-row-thumb { width: 38px; height: 38px; font-size: 17px; }
  .prod-row-price { font-size: 13px; }
}

/* Skeleton yukleme */
.ud-skel-row { height: 54px; border-radius: calc(14px * var(--radius-scale, 1)); background: var(--bg-surface-secondary); position: relative; overflow: hidden; }
.ud-skel-row + .ud-skel-row { margin-top: 8px; }
.ud-skel-row::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-100%); animation: ud-shimmer 1.3s infinite;
}
@keyframes ud-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ud-skel-row::after { animation: none; } }

/* Yönetim "Masadan Sipariş" anahtarı — CANLI rozetiyle aynı satırda durur. Gerçek switch
   dili: yeşil ray + top sağda = AÇIK, kırmızı ray + top solda = KAPALI; durum kelimesi de
   aynı renkte. (Eski tek renkli buton "açık mı kapalı mı" net okunmuyordu.) */
.hm-order-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.hm-order-toggle:disabled { opacity: 0.55; cursor: default; }
.hm-order-toggle .hm-ot-track {
  position: relative;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 999px;
  transition: background 160ms ease;
}
.hm-order-toggle .hm-ot-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease;
}
.hm-order-toggle .hm-ot-state {
  min-width: 44px;
  text-align: left;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.hm-order-toggle.is-on  { border-color: var(--sweet-green-bd); }
.hm-order-toggle.is-on  .hm-ot-track { background: var(--sweet-green); }
.hm-order-toggle.is-on  .hm-ot-knob  { transform: translateX(17px); }
.hm-order-toggle.is-on  .hm-ot-state { color: var(--sweet-green); }
.hm-order-toggle.is-off { border-color: var(--sweet-red-bd); }
.hm-order-toggle.is-off .hm-ot-track { background: var(--sweet-red); }
.hm-order-toggle.is-off .hm-ot-state { color: var(--sweet-red); }
/* Telefonda toggle KOMPAKT ve TEK SATIR garantili (kullanıcı 2026-07-11): CANLI + saat
   piliyle hep aynı satıra sığar — alt satıra İNMEZ; yer kalmazsa etiket "..." ile kısalır. */
/* Telefon dengesi (kullanıcı 2026-07-11): saat BELİRGİN kalır, toggle bir kademe
   küçülür, boşluklar sıkı — "Masadan Sipariş" yazısı kırpılmadan TEK satır sığar. */
@media (max-width: 575.98px) {
  .hm-order-toggle { padding: 4px 8px 4px 10px; font-size: 11px; gap: 5px; min-width: 0; }
  .hm-order-toggle > .text-nowrap { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hm-order-toggle .hm-ot-state { min-width: 0; flex-shrink: 0; font-size: 10.5px; }
  .hm-order-toggle .hm-ot-track { width: 30px; height: 17px; }
  .hm-order-toggle .hm-ot-knob { width: 13px; height: 13px; }
  .hm-order-toggle.is-on .hm-ot-knob { transform: translateX(13px); }
  .hm-live-clock { font-size: 13px; padding: 3px 11px; gap: 6px; }
  .hm-live-badge { font-size: 11.5px; letter-spacing: 0.06em; gap: 5px; }
}

/* Yönetim kasa-kapanış durum kartı — eski bootstrap alert yerine kurumsal kart:
   renkli ikon çipi (amber = bugünkü kapanış bekliyor, yeşil = yapıldı), iki satırlı
   metin, sağda küçük "Kapanışa Git" pili; kartın TAMAMI /kasa-kapanis linkine gider. */
.hm-close-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: calc(12px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.hm-close-card:hover {
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
/* Link altı çizgisi HİÇBİR durumda görünmesin (vendor a:hover kuralı + mobil "yapışkan
   hover" ikisi de eziliyor — kullanıcı 2026-07-11). */
.hm-close-card,
.hm-close-card:hover,
.hm-close-card:focus,
.hm-close-card:active,
.hm-close-card span,
.hm-close-card:hover span {
  text-decoration: none !important;
}
.hm-close-card .hm-cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: calc(11px * var(--radius-scale, 1));
  font-size: 17px;
}
.hm-close-card.is-due .hm-cc-icon { background: rgba(221, 161, 58, 0.16); color: #a97a12; }
.hm-close-card.is-ok  .hm-cc-icon { background: var(--sweet-green-lt); color: var(--sweet-green); }
.hm-close-card .hm-cc-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.hm-close-card .hm-cc-title { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.hm-close-card.is-due .hm-cc-title { color: #a97a12; }
.hm-close-card.is-ok  .hm-cc-title { color: var(--sweet-green); }
[data-theme=dark] .hm-close-card.is-due .hm-cc-icon,
[data-theme=dark] .hm-close-card.is-due .hm-cc-title { color: #e3b357; }
.hm-close-card .hm-cc-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-close-card .hm-cc-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.hm-close-card:hover .hm-cc-go { background: var(--primary); color: var(--primary-fg); }
/* Dar ekran: pil metni gizlenir, yalnız ok kalır (alt metin taşmasın diye 2 satıra da izin ver). */
@media (max-width: 575.98px) {
  .hm-close-card .hm-cc-go .hm-cc-go-text { display: none; }
  .hm-close-card .hm-cc-go { width: 32px; height: 32px; justify-content: center; padding: 0; border-radius: 50%; }
  .hm-close-card .hm-cc-sub { white-space: normal; }
}

/* Kasa filtre aksiyonları (Rezervasyon + Sıralama) — masaüstünde arama ile aynı satırda grup. */
.kasa-filter-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Rezervasyon — belirgin turuncu-soft pill + sayı rozeti (eski soluk outline buton kayboluyordu). */
/* Sıralama butonundaki mobil kısa etiket masaüstünde gizli (orada seçim metni görünür). */
/* "Siralama" etiketi ARTIK kutunun ICINDE (kullanici 2026-07-31: "kendi icinde butun") —
   solda sonuk etiket + secim; distaki <label> her boyutta gizli. */
.kasa-sort-mobile-label { display: inline; color: var(--text-muted); font-weight: 500; }
.kasa-filter-actions > label[for="kasa-sort"] { display: none; }

/* Rezervasyon butonu YEŞİL ailede (kullanıcı 2026-07-11) — turuncu yükünü azaltır. */
.kasa-resv-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--sweet-green-bd);
  background: var(--sweet-green-lt);
  color: var(--sweet-green);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.kasa-resv-btn:hover { background: var(--sweet-green); border-color: var(--sweet-green); color: #fff; }
.kasa-resv-btn .kasa-resv-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sweet-green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
.kasa-resv-btn:hover .kasa-resv-count { background: #fff; color: var(--sweet-green); }

/* Sıralama — sistem dilinde pill select: solda ikon, sağda özel ok; tarayıcının
   varsayılan form görünümü kapatılır, yazı Inter ile arama kutusuyla aynı tona gelir. */
.kasa-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 28px 6px 13px;
  border-radius: calc(9px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kasa-sort-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.kasa-sort-wrap > i { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
/* Pill artık BUTON — native select popup'ı stillenemediği için özel menü açar. */
.kasa-sort-btn {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.kasa-sort-btn:disabled { color: var(--text-muted); cursor: default; opacity: 0.6; }
.kasa-sort-btn .kasa-sort-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kasa-sort-wrap .kasa-sort-caret {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 160ms ease;
}
.kasa-sort-wrap .kasa-sort-caret.is-open { transform: translateY(-50%) rotate(180deg); }

/* Sıralama açılır menüsü — sistem dilinde kart: yumuşak gölge, aktif satır turuncu + tik.
   Aksiyon satırına (position:relative) çıpalanır; telefonda satırın TAMAMINI yatayda kaplar,
   masaüstünde pilin altına sağa hizalı açılır. */
.kasa-filter-actions { position: relative; }
.kasa-sort-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  border: 0;
  background: transparent;
  cursor: default;
}
.kasa-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1050;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--border-translucent);
}
.kasa-sort-menu > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: calc(9px * var(--radius-scale, 1));
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.kasa-sort-menu > button:hover { background: var(--bg-surface-secondary); }
.kasa-sort-menu > button.is-active {
  background: var(--primary-lt);
  color: var(--primary);
  font-weight: 700;
}
.kasa-sort-menu > button.is-active i { font-size: 14px; flex-shrink: 0; }
@media (max-width: 767.98px) {
  .kasa-sort-menu { left: 0; right: 0; min-width: 0; }
  .kasa-sort-menu > button { padding: 11px 14px; font-size: 13.5px; }
}

/* Adisyon "Menü" (kategori) ızgarası — masaüstünde genişliğe göre otomatik sütun,
   TELEFONDA HEP 2 SÜTUN (kullanıcı kararı, 2026-07-10): kartlar iri ve dokunması kolay. */
/* KATEGORI IZGARASI ISKELETI (2026-08-04): masaya dokununca ILK gelen ekran menu oldugu
   icin, urunler gelmeden once izgara bos kaliyor ve tek kutu tum boyu geriyordu. Iskelet
   kutucuklari dogru duzeni ilk kareden gosterir; hafif nabizla "yukleniyor" hissi verir. */
.hm-cat-skeleton {
  background: color-mix(in srgb, var(--text) 6%, var(--bg-surface));
  border: 1px solid var(--border-color-light, var(--border-color));
  pointer-events: none;
  animation: hmCatSkeleton 1.1s ease-in-out infinite;
}
@keyframes hmCatSkeleton {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-cat-skeleton { animation: none; }
}

.adisyon-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 10px 4px 4px;
}
@media (max-width: 767.98px) {
  .adisyon-cat-grid {
    /* TELEFONDA 3 SÜTUN (kullanıcı 2026-07-12): patron/garson aynı ekranı app gibi
       kullanacak — kategoriler daha küçük kutularda, tek satıra 3 tane. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 0 6px;
  }
  /* 3 sütunda kutular küçülür: yükseklik ve etiket de orantılı iner (yükseklik/font
     inline geldiğinden !important şart). */
  .adisyon-cat-grid .cat-tile { height: 86px !important; border-radius: 12px !important; }
  .adisyon-cat-grid .cat-tile span.fw-bold {
    font-size: 11.5px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 7px !important;
    /* Ad TAM görünür (kullanıcı 2026-07-12): tek satır + üç nokta yerine sar — gerekirse
       2-3 satır; alttan yukarı büyür, gradyan perde okunurluğu korur. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  /* Kategori ızgarası içeren kart gövdesi: 16px dolgu kartları menüden dar gösteriyordu. */
  .card-body:has(> .adisyon-cat-grid) { padding-left: 8px !important; padding-right: 8px !important; }
}

/* KATEGORİ KUTUSU — RESİMSİZ (kullanıcı 2026-07-12): ikon + ad; sade yüzey, vurgu yok. */
.adisyon-cat-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 86px;
  padding: 10px 6px;
  border-radius: calc(14px * var(--radius-scale, 1));
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
}
.adisyon-cat-simple:active { transform: scale(0.98); }
/* İkon boyutu SABİT (kullanıcı 2026-07-13: "bazı kategorilerin ikonu küçük/yok") —
   width/height attribute'unu ezen ne varsa etkisiz kalsın; flex de daraltmasın. */
.adisyon-cat-simple > svg { width: 30px !important; height: 30px !important; flex: 0 0 auto; }
[data-theme="dark"] .adisyon-cat-simple { background: #0e1013; border-color: rgba(255, 255, 255, 0.07); }
.adisyon-cat-emoji { font-size: 24px; line-height: 1; }
.adisyon-cat-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* GENİŞ EKRAN 3'LÜ DÜZEN (kullanıcı 2026-07-12): adisyon | kategoriler (dar, ikon+ad) |
   ürünler — kategoriler ayrı yüzen kutuda, yalnız ≥1200px'te görünür. */
.adisyon-cats-col { display: none; }
@media (min-width: 1200px) {
  .adisyon-cats-col { display: block; flex: 0 0 216px; min-width: 0; }
  .adisyon-cat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: calc(10px * var(--radius-scale, 1));
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
  }
  .adisyon-cat-item:hover { background: var(--bg-surface-secondary); }
  .adisyon-cat-item.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-lt);
  }
  /* GERİ OKU GENİŞ EKRANDA YOK (kullanıcı 2026-07-13): kategoriler zaten solda görünür,
     ilk ekrana dönüş soldaki "Sık Kullanılanlar" bağlantısıyla. 768–1200 arası dar
     pencerede kategoriler ekranda olmadığından geri oku orada kalır. */
  .adisyon-catalog-card .card-header .hm-back-btn,
  .adisyon-catalog-card .card-header .adisyon-back-spacer { display: none; }
}

/* Adisyon kart İÇLERİ light modda KEMİK (kullanıcı 2026-07-12: "bu kadar beyaz olmasın") —
   gövde krem zemine iner, ürün/sipariş kartları sıcak beyaz olarak üstünde yüzer. */
html:not([data-theme="dark"]) .adisyon-split .card-body { background: var(--body-bg); }
/* Dark modda da kap GENEL SİYAH zeminle bütünleşir (kullanıcı 2026-07-12) — ürün satırları
   bir tık AÇIK "hafif" zeminle üstünde ayrışır (aşağıdaki product-card kuralı). */
[data-theme="dark"] .adisyon-split .card-body { background: var(--body-bg); }

/* SAYFA EKRANA TAM OTURUR (kullanıcı 2026-07-13): üst bilgi şeridi headera yapışmaz
   (nefes payı) ve sayfa scroll üretmez — topbar(56) + sarmalayıcı dolgular(20+40)
   düşülür, kalan yükseklik panellere gider; kaydırma panel İÇLERİNDE. Çözünürlük
   değişse de oran korunur; aşırı basık pencerede 420px tabanına iner (o zaman sayfa
   kayar, paneller ezilmez). */
@media (min-width: 769px) {
  /* Üst KPI banner headera YAKLAŞIR (kullanıcı 2026-07-13: "mesafeyi kapatalım"):
     sayfa sarmalayıcının 16px üst dolgusu banner'lı sayfalarda (kasa + adisyon) 6px'e
     iner (:has); adisyonun kendi üst dolgusu 10→4 → kısılan alan alt panellere gider
     (height 116→104). Banner boyutları taban .kasa-panel kurallarında (her iki sayfa). */
  .page-wrapper:has(.kasa-panel) { padding-top: 6px; }
  /* Adisyonda sarmalayıcının 40px alt dolgusu da kısılır (kullanıcı 2026-07-31:
     "paneller ekranın EN ALTINA uzasın") — kalan çerçeve: topbar 56 + üst 6 + alt 10
     + durum çubuğu 36 = 108; paneller footer'a 10px nefesle dayanır. */
  .page-wrapper:has(.adisyon-page) { padding-bottom: 10px; }
  .adisyon-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 108px);
    min-height: 420px;
    padding-top: 4px;
  }
  .adisyon-page .kasa-panel { flex: 0 0 auto; }
  .adisyon-page .adisyon-split { flex: 1 1 auto; min-height: 0; height: auto; }
}
@media (max-width: 768px) {
  /* Telefonda üst şerit zaten boş (KPI/aksiyonlar gizli) — kalıntı boşluk yaratmasın,
     menü/adisyon katları tam ekran kalsın (150px hesabı bozulmaz). */
  .adisyon-page { padding-top: 0; }
  .adisyon-page .kasa-panel { display: none; }
}

/* Adisyon iki-panel satırının yüksekliği (masaüstü). TELEFONDA TAM SAYFA KATLAR
   (kullanıcı 2026-07-12): kap = dikey scroll-snap rayı; 1. kat ADİSYON kartı (tam ekran,
   içerik iç-scroll, ödeme butonu altta sabit), 2. kat MENÜ/kategoriler (aynı davranış).
   Katlar arası geçiş kabın snap kaydırmasıyla; iç scroll uçtayken sürükleme dışa zincirlenir
   (menü tepedeyken yukarı çekince adisyona döner). 150px = üst bar 56 + alt bar ~78 + nefes. */
.adisyon-split { height: clamp(440px, calc(100vh - 240px), 1600px); }
/* YÜZEN SEPET — HER boyutta (kullanıcı 2026-07-13: sepet adisyondan ayrıldı, MODAL olarak
   açılır): ürün eklenince sağ altta belirir; dokununca Sepet modalı açılır. */
.adisyon-fab {
  display: flex;
  position: fixed;
  right: 22px;
  /* Footer artık tam genişlik FIXED (36px) — sepet altına girmesin (kullanıcı 2026-08-02:
     "webde sepet sağ alt köşede yanlış yerde"): footer üstünde nefes payıyla durur. */
  bottom: 52px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--sweet-green-dk);
  color: #fff;
  border: 0;
  font-size: 22px;
  box-shadow: 0 10px 26px -8px rgba(17, 85, 56, 0.6), 0 3px 10px rgba(0, 0, 0, 0.35);
  z-index: 95;
  cursor: pointer;
  transition: transform 120ms;
  animation: adisyon-fab-nudge 3.6s ease-in-out 1.5s infinite;
}
.adisyon-fab:active { transform: scale(0.94); }
.adisyon-fab .adisyon-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--sweet-green-dk);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Menüye-dön FAB'i yalnız telefonda (masaüstünde kategoriler zaten solda görünür). */
.adisyon-fab-left { display: none; }
@media (max-width: 768px) {
  body.has-mobile-tabbar .adisyon-split {
    height: calc(100dvh - 150px - env(safe-area-inset-bottom));
    /* KATLAR YATAY (kullanıcı 2026-07-13): adisyon solda, menü sağda — "sağ/sol ekran".
       Eski dikey blok hiç dikey ÇALIŞMADI: markup'taki Bootstrap .flex-wrap (wrap
       !important) kolonu sardırıp katları yana diziyordu ve x ekseninde snap tanımlı
       olmadığından yarıda bırakınca ORTADA KİLİTLENİYORDU. Yatay + MANDATORY snap:
       bırakınca hep bir kata oturur. */
    flex-direction: row;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.has-mobile-tabbar .adisyon-split > div {
    /* Inline flex-basis: 360px (masaüstü sütun genişliği) → !important ile tam kat
       genişliğine sabitle. */
    flex: 0 0 100% !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0 !important;
    scroll-snap-align: start;
  }
  body.has-mobile-tabbar .adisyon-catalog-card { height: 100% !important; }
  /* ÜST SIKIŞTIRMA (kullanıcı 2026-07-12): kart başlıkları telefonda incelir — 6 sıra
     kategori tek ekrana sığsın. Inline minHeight: 52 geldiğinden !important şart. */
  body.has-mobile-tabbar .adisyon-split .card-header {
    min-height: 36px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  body.has-mobile-tabbar .adisyon-split .adisyon-cat-title-text { font-size: 19px; }
  /* Scrollbar'lar telefonda GİZLİ (app hissi; masaüstü responsive modda kalın gri
     baloncuk çiziliyordu) + kart gövdesinde yatay taşma kapalı. */
  body.has-mobile-tabbar .adisyon-split,
  body.has-mobile-tabbar .adisyon-split .card-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.has-mobile-tabbar .adisyon-split::-webkit-scrollbar,
  body.has-mobile-tabbar .adisyon-split .card-body::-webkit-scrollbar { display: none; }
  body.has-mobile-tabbar .adisyon-split .card-body { overflow-x: hidden; }
  /* YÜZEN SEPET FAB (kullanıcı 2026-07-12) — müşteri menüsündeki sepet butonuyla aynı
     dil: turuncu daire + beyaz rozet, sağ alt, alt kısayol barının üstünde. Yalnız mobil. */
  body.has-mobile-tabbar .adisyon-fab {
    display: flex;
    position: fixed;
    right: 14px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    /* KOYU TATLI YEŞİL (kullanıcı 2026-07-12: tema kırmızıya dönünce sepet yeşile) —
       ikon beyaz; seçili ürün/sepet aksiyonlarının yeşiliyle aynı. SEPET ÜSTTE:
       menüye-dön butonu altına geldiği için bir kademe yukarı alındı. */
    background: var(--sweet-green-dk);
    color: #fff;
    border: 0;
    font-size: 22px;
    /* Menüye-dön FAB'i kalktı (kullanıcı 2026-07-13) — sepet alttaki eski yerine indi. */
    bottom: calc(94px + env(safe-area-inset-bottom));
    box-shadow: 0 10px 26px -8px rgba(17, 85, 56, 0.6), 0 3px 10px rgba(0, 0, 0, 0.35);
    z-index: 95;
    transition: transform 120ms;
    /* Sepette ürün varken periyodik yumuşak dürtme (müşteri menüsü FAB'iyle aynı). */
    animation: adisyon-fab-nudge 3.6s ease-in-out 1.5s infinite;
  }
  body.has-mobile-tabbar .adisyon-fab:active { transform: scale(0.94); }
  /* GERİ/MENÜ butonu (kullanıcı 2026-07-12): SAĞ ALTTA, sepetin ALTINDA — iki yüzen buton
     sağda dikey dizilir (üstte yeşil sepet, altta nötr menü). Header'daki geri oku +
     sağ simetri boşluğu mobilde gizlenir. */
  body.has-mobile-tabbar .adisyon-catalog-card .card-header .hm-back-btn,
  body.has-mobile-tabbar .adisyon-catalog-card .card-header .adisyon-back-spacer { display: none; }
  body.has-mobile-tabbar .adisyon-fab-left {
    right: 14px;
    left: auto;
    bottom: calc(94px + env(safe-area-inset-bottom));
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border-color);
    font-size: 19px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
    animation: none;
  }
  [data-theme="dark"] body.has-mobile-tabbar .adisyon-fab-left,
  html[data-theme="dark"] .adisyon-fab-left {
    background: #000000;
    border-color: rgba(255, 255, 255, 0.14);
    color: #e9eaee;
  }
  body.has-mobile-tabbar .adisyon-fab .adisyon-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--sweet-green-dk);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
}
/* FAB dürtmesi: döngünün son diliminde küçük zıplama + hafif sallanma, kalanında dinlenir. */
@keyframes adisyon-fab-nudge {
  0%, 78%, 100% { transform: scale(1) rotate(0deg); }
  84% { transform: scale(1.12) rotate(-6deg); }
  89% { transform: scale(0.96) rotate(5deg); }
  94% { transform: scale(1.06) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .adisyon-fab { animation: none !important; }
}

/* Adisyon ürün ızgarası — masaüstünde kart grid; TELEFONDA müşteri menüsü dili:
   tek sütun yatay satırlar (56px görsel solda, ad+fiyat ortada, sağda turuncu + çipi). */
.adisyon-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.product-card-add { display: none; }
@media (max-width: 767.98px) {
  .adisyon-prod-grid { grid-template-columns: 1fr; gap: 8px; }
  .adisyon-prod-grid .product-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 8px;
    border-radius: calc(14px * var(--radius-scale, 1));
  }
  .adisyon-prod-grid .product-card:hover { transform: none; box-shadow: none; }
  .adisyon-prod-grid .product-card:active { transform: scale(0.99); }
  /* Ürün satırları dark modda HAFİF AÇIK zemin (kullanıcı 2026-07-12: kap genel siyah,
     ürün kutuları bir tık kalkık) — siyah kabın üstünde yumuşak ayrışma. */
  [data-theme="dark"] .adisyon-prod-grid .product-card {
    background: #0e1013;
    border-color: rgba(255, 255, 255, 0.07);
  }
  .adisyon-prod-grid .product-card-img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: calc(10px * var(--radius-scale, 1));
    overflow: hidden;
  }
  /* − butonu mobil satırda satır BAŞINDA (görselden önce), parmak boyu. */
  .adisyon-prod-grid .product-card .product-card-minus {
    position: static;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    font-size: 16px;
  }
  /* Stepper mobil: parmak boyu uçlar. */
  .adisyon-prod-grid .product-card .pcs-btn { width: 30px; height: 30px; font-size: 14px; }
  .adisyon-prod-grid .product-card .pcs-count { min-width: 24px; font-size: 14px; }
  /* Liste sonuna NEFES (yüzen sepet son ürünün +'sını kapatmasın); tek FAB kaldı
     (2026-07-13: menüye-dön butonu silindi) — pay ona göre. */
  .adisyon-cat-page { padding-bottom: 110px !important; }
  .adisyon-prod-grid .product-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
  }
  .adisyon-prod-grid .product-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* Köşe rozeti yerine sağdaki + çipi adet sayısını gösterir. */
  .adisyon-prod-grid .product-card > .badge { display: none; }
  /* + çipi DOLGUSUZ (kullanıcı 2026-07-12): turuncu kutu yerine yalnız TURUNCU İKON;
     adet girilince sayı da turuncu. Dokunma alanı 40px korunur. */
  .adisyon-prod-grid .product-card-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    color: var(--primary);
    font-size: 20px;
    font-weight: 800;
  }
  .adisyon-prod-grid .product-card-add.has-qty { font-size: 18px; }
}

/* SIK KULLANILANLAR (kullanıcı 2026-07-13): adisyonda sağ panelin İLK ekranı (≥1200px) —
   personelin kendi hızlı ürün listesi. Kesikli "Ürün Ekle" kutusu listenin buradan
   düzenlendiğini görünür kılar; ürün kartlarındaki ★ aynı listeye ekler/çıkarır. */
.product-card-priceline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.fav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -5px -6px -5px 0; /* dokunma alanı geniş, görsel iz küçük — satır yüksekliğini büyütmez */
  border-radius: 50%;
  color: var(--text-disabled);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.fav-star:hover { color: #c28e2e; background: var(--bg-surface-secondary); }
.fav-star.is-on { color: #c28e2e; }
/* Yıldız MOBİLDE DE görünür (kullanıcı 2026-07-13: "mobil ürünlerde de ekle/çıkar
   olsun") — dar satır düzeninde parmak boyu dokunma alanı. */
@media (max-width: 1199.98px) {
  .adisyon-prod-grid .fav-star {
    width: 34px;
    height: 34px;
    margin: -7px -6px -7px 0;
    font-size: 15px;
  }
}
.fav-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 62px; /* kompakt ürün kutusuyla aynı sıra yüksekliği (grid satırını büyütmesin) */
  padding: 8px 10px;
  border: 2px dashed var(--border-color);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, color 140ms ease;
}
.fav-add-tile:hover { border-color: var(--primary); color: var(--primary); }
.fav-add-tile .bi { font-size: 16px; line-height: 1; }
.fav-add-hint { font-size: 10.5px; opacity: 0.8; }
[data-theme="dark"] .fav-add-tile { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .fav-add-tile:hover { border-color: var(--primary); }
/* Düzenleme modalındaki ürün satırları: dokun = ekle/çıkar; seçili satır kehribar. */
.fav-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: calc(10px * var(--radius-scale, 1));
  background: var(--bg-surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fav-pick-row:hover { border-color: var(--primary); }
.fav-pick-row.is-on { border-color: #c28e2e; background: rgba(194, 142, 46, 0.08); }
/* Modalda kategori başlıkları BELİRGİN (kullanıcı 2026-07-13: geçişler anlaşılsın) —
   tema renginde + alt çizgi + kaydırırken üstte YAPIŞKAN (hangi kategorideyiz hep görünür). */
.fav-pick-cat {
  position: sticky;
  top: -16px; /* modal gövdesinin p-4 üst dolgusunu telafi eder */
  z-index: 1;
  background: var(--bs-body-bg, var(--bg-surface));
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 8px 2px 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--primary);
}

/* ADİSYON KARTI VURGUSU (kullanıcı 2026-07-13 v2: parlak halka/ışıma BEĞENİLMEDİ —
   "gölgeli gibi görünen tatlılıkta olsun", deneme: sistemin KOYU YEŞİLİ): yarı saydam
   yeşil kenar + yumuşak yeşilimsi gölge; halka yok, parlama yok. */
/* YESIL KIMLIK KALKTI (kullanici 2026-08-01: "adisyon ve cari fisi de menudeki gibi
   KIRMIZI tonlu border olsun, yesil yesil istemiyorum"): tum split panelleri ayni ince
   kirmizi cerceve ailesinde; bill basligi da varsayilan (kirmizi el yazisi) kalir. */
.adisyon-split .hm-panel-card { border-color: rgba(201, 53, 29, 0.45) !important; }
[data-theme="dark"] .adisyon-split .hm-panel-card {
  border-color: rgba(214, 69, 48, 0.4) !important;
}
/* Menü içindeki ürün kartları/satırları da ince kırmızı tonlu çerçeve alır. */
.adisyon-prod-grid .product-card { border-color: rgba(201, 53, 29, 0.3); }
[data-theme="dark"] .adisyon-prod-grid .product-card { border-color: rgba(214, 69, 48, 0.32); }

/* MOBİL MENÜ KATI EKRANA TAM OTURUR (kullanıcı 2026-07-13: başlık üstü/altı boştu, bir
   sıra daha sığsın): başlık bandı incelir, ızgara kalan yüksekliği EŞİT satırlara böler
   (grid-auto-rows 1fr) — kategori sayısı/çözünürlük ne olursa olsun kaydırmasız tam oturur. */
@media (max-width: 768px) {
  body.has-mobile-tabbar .adisyon-catalog-card .card-header {
    min-height: 38px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  body.has-mobile-tabbar .adisyon-split .adisyon-cat-title-text { font-size: 17px; }
  body.has-mobile-tabbar .adisyon-catalog-card .card-body:has(> .adisyon-cat-grid) {
    overflow: hidden !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }
  /* KATEGORİLER TEK EKRANA KAYDIRMASIZ SIĞAR (kullanıcı 2026-07-13: "garson/patron tüm
     kategorileri tek ekranda görsün") — ızgara pane yüksekliğini EŞİT satırlara böler;
     kategori sayısı artsa da (Moda'da daha fazla) satırlar incelir, kaydırma çıkmaz.
     Kare kutu denemesinin yerine geçti (kare + tam-sığma birlikte olmuyor). */
  body.has-mobile-tabbar .adisyon-cat-page:has(> .adisyon-cat-grid) {
    padding: 8px 10px 10px !important;
    overflow-y: hidden;
  }
  body.has-mobile-tabbar .adisyon-cat-grid {
    height: 100%;
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
    padding: 0;
  }
  body.has-mobile-tabbar .adisyon-cat-grid .cat-tile {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.has-mobile-tabbar .adisyon-cat-grid .adisyon-cat-simple {
    aspect-ratio: auto;
    padding: 4px;
    gap: 4px;
    overflow: hidden;
  }
  body.has-mobile-tabbar .adisyon-cat-simple > svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 1;
  }
  body.has-mobile-tabbar .adisyon-cat-grid .adisyon-cat-name {
    font-size: 10.5px;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* KOMPAKT ÜRÜN KUTULARI (kullanıcı 2026-07-13): sipariş ekranı RESİMSİZ ve sık dizilimli —
   tek ekranda daha çok ürün, ad+fiyat yine rahat okunur; görselli büyük kart müşteri
   menüsünün reklam dili olarak kalır. Kurallar yalnız .is-compact ızgarayı etkiler
   (cari sipariş ekranındaki eski görselli ızgara bozulmaz). */
.adisyon-prod-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.adisyon-prod-grid.is-compact .product-card {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  min-height: 62px;
}
.adisyon-prod-grid.is-compact .product-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  padding: 9px 10px 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.adisyon-prod-grid.is-compact .product-card-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 20px; /* köşedeki adet rozetiyle çakışmasın */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adisyon-prod-grid.is-compact .product-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.adisyon-prod-grid.is-compact .product-card-minus {
  position: static;
  width: 25px;
  height: 25px;
  font-size: 13px;
  box-shadow: none;
}
@media (max-width: 767.98px) {
  /* Telefonda 2 sütun; dokunma hedefleri irileşir, adet rozeti kompaktta GÖRÜNÜR
     (eski satır düzeninin gizleme kuralını geri alır). */
  .adisyon-prod-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .adisyon-prod-grid.is-compact .product-card-minus { width: 30px; height: 30px; font-size: 15px; }
  .adisyon-prod-grid.is-compact .product-card > .badge { display: inline-block; }
}

/* SAKİN RENK GEÇİŞİ (kullanıcı 2026-07-13: "aynı anda çok fazla canlı renk var") —
   sipariş ekranında vurgu TEK ailede (tema kırmızısı) toplanır; yeşil yalnız sepet/para
   aksiyonu, kehribar yalnız aktif ★. Kalan her şey nötr tona iner. */
/* 1. Ürün fiyatları nötr — her kutuda ayrı turuncu leke olmasın. */
.adisyon-prod-grid.is-compact .product-card-price { color: var(--text); opacity: 0.82; }
/* 2. Kategori ikon renkleri ÜST GRUP renginden gelir (kullanıcı 2026-07-13: biralar sarı
   gibi — anlamlı, az sayıda renk; bkz. lib/category-groups.ts, inline style ile basılır). */
/* 3. Üst şerit KPI/aksiyon çipleri tek nötr ton (mavi/yeşil/turuncu karışımı yerine). */
.kpi-mono { background: var(--bg-surface-secondary); color: var(--text-muted); }
[data-theme="dark"] .kpi-mono { background: rgba(255, 255, 255, 0.06); color: #b9bcc4; }
/* 4. Adisyondaki kalem iptal (✕) butonları nötr; kırmızı yalnız üzerine gelince/basınca. */
.adisyon-bill-card .btn-outline-danger {
  --bs-btn-color: var(--text-muted);
  --bs-btn-border-color: var(--border-color);
}

/* Adisyon kategori PAGER'ı — müşteri menüsüyle aynı native scroll-snap mekanizması:
   ray yatay momentumla kayar, her sayfa kendi içinde dikey kayar; üst başlık şeridi
   JS ile rayla birebir senkron kaydırılır (bkz onTrackScroll). */
.adisyon-cat-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* contain YOK (kullanıcı 2026-07-13): iç ray uçtayken YENİ sürükleme dış kata
     zincirlenir — kategorilerden bir kez daha sola kaydırınca adisyon katına dönülür. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.adisyon-cat-track::-webkit-scrollbar { display: none; }
.adisyon-cat-page {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow-y: auto;
  /* Dikey zincirleme AÇIK (kullanıcı kararı): iç liste sonuna gelince sürükleme dış
     sayfaya devam eder — kategori ızgarasındaki hisle aynı. (Yatay kilit track'te durur.)
     Üstte ekstra nefes: ilk kart banner'a yapışmasın. */
  padding: 18px 12px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.adisyon-cat-page::-webkit-scrollbar { display: none; }
/* Başlık şeridi: tek kategori görünür, hücreler sayfa genişliğinde; scrollLeft JS'ten gelir. */
.adisyon-cat-titlewrap {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.adisyon-cat-title {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* SOLA DAYALI (kullanici 2026-08-04: "secilen menu yazisi sola dayali olsun") — eskiden
     ortaliydi; sola dayanmasi arama kutusuna satirin kalanini birakir. */
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Pager banner yazısı — müşteri menüsü kategori başlığıyla aynı dil: el yazısı (Caveat),
   turuncu, ortalı; ürün sayısı/ikon yok. */
.adisyon-cat-title-text {
  max-width: 100%;
  font-family: var(--hm-script, "Caveat", cursive);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
  color: var(--primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  /* Caveat eğik glifin kuyruğu kutudan taşar; truncate/overflow kırpmasın diye iki
     yana nefes (ortalı başlıklar ortalı kalır) — kullanıcı 2026-07-13: "Menü'nün ü'sü kırpık". */
  padding-inline: 0.14em;
}

/* PANEL BASLIKLARI KOMPAKT (kullanici 2026-08-04: "bu headerlarin yuksekligini alip daha
   compact yap") — masaustunde Adisyon / Menu / Sik Kullanilanlar seridi 52px'ten 38px'e indi
   (inline minHeight + py-1). El yazisi punto 25 -> 21 ve satir boslugu 1.0: alcak seritte
   ortali durur, Caveat'in kuyruklari kirpilmaz. Telefon kurallari !important oldugu icin
   (36px serit, 17-19px punto) etkilenmez. */
@media (min-width: 769px) {
  .adisyon-split .card-header .adisyon-cat-title-text,
  .cari-sip .card-header .adisyon-cat-title-text {
    font-size: 21px;
    line-height: 1.0;
  }
  .adisyon-split .adisyon-cat-title { min-height: 0; }
}

/* Ödeme/Tahsilat — mobil düzeni. Liste gövdesi: yatay taşma kapalı (satır içi rozet/uzun
   adlar kart altında yatay scrollbar üretiyordu); telefonda liste ekranın yarısında kalır
   ki ödeme paneli uzun listede kaybolmasın. Kart butonu telefonda YOK (yalnız Nakit + Cari). */
.odeme-list-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
/* ODEME TAM EKRAN FIT (2026-08-01, kasa defteri deseni): masaustunde iki kolon ekranin
   altina kadar uzar, listeler kart icinde kayar; sag panelin sticky'si gereksizlesir. */
.odeme-fit { display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 992px) {
  .page-wrapper:has(.odeme-fit) { padding-top: 8px; padding-bottom: 10px; }
  .odeme-fit { height: 100%; }
  .odeme-fit .odeme-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; margin-top: 0 !important; }
  .odeme-fit .odeme-grid > * { margin-top: 0 !important; }
  /* flex-wrap cizgi tuzagi (finans dersi): kolonlara ACIK yukseklik. */
  .odeme-fit .odeme-grid > * { min-height: 0; height: 100%; }
  .odeme-fit .odeme-grid .hm-panel-card { height: 100%; display: flex; flex-direction: column; min-height: 0; position: static !important; }
  .odeme-fit .odeme-list-body { flex: 1 1 auto; min-height: 0; max-height: none; }
  .odeme-fit .odeme-grid .hm-panel-card > .card-body { min-height: 0; overflow-y: auto; }
}
/* CARI SIPARIS (2026-08-01): hesap adi banner ile BUTUNLESIK — ayni el yazisi ailesi,
   yesil, saga dayali (badge degil); altta 24px nefes (diger sayfalar gibi). */
/* Hesap adi = musteri menusundeki cafe-adi FONTU (Baloo 2; kullanici 2026-08-01). */
.cari-fis-account { font-family: var(--hm-display, "Baloo 2", sans-serif); font-size: 16px; font-weight: 700; letter-spacing: 0.2px; color: var(--text); }
/* Topbar'da masa/hesap kimligi — ayni Baloo ailesi (adisyon mobil masa no). */
.hm-title-masa { font-family: var(--hm-display, "Baloo 2", sans-serif); font-weight: 700; letter-spacing: 0.2px; }
/* Cari Fisi geri: KUTUSUZ yalin simge (kullanici 2026-08-01 "kare kotu duruyor —
   sadece simge olsun"): cerceve/zemin yok, basinca yuvarlak hafif vurgu. */
.cari-sip .hm-back-btn {
  width: 32px; height: 32px; min-width: 32px;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 999px;
  color: var(--primary);
  font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cari-sip .hm-back-btn:active { background: var(--primary-lt) !important; }
/* Topbar basligin yaninda kucuk resmi ek yazi (el yazisi ailesini ezer). */
.hm-title-aside {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--text-muted);
}
@media (min-width: 1200px) {
  /* Yukseklik SABIT CALC DEGIL flex'ten (2026-08-01: calc tahmini 14px sasiyordu, sayfa
     minik kayiyordu): wrapper kaymaz, split kalan alani doldurur — tasma yapisal sifir. */
  .page-wrapper:has(.cari-sip) { padding-top: 8px; padding-bottom: 10px; }
  .cari-sip { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .cari-sip .adisyon-split { flex: 1 1 auto; min-height: 0; height: auto; }
}

/* ADISYON MASA CIPI (2026-08-01): baslik yaninda hangi masa oldugu web+mobil gorunur. */
.adisyon-masa-chip {
  font-size: 12px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.4;
  padding: 2px 9px; white-space: nowrap;
  border-radius: calc(7px * var(--radius-scale, 1));
  background: color-mix(in srgb, var(--sweet-green) 10%, var(--bg-surface));
  color: var(--sweet-green);
  border: 1px solid color-mix(in srgb, var(--sweet-green) 35%, var(--border-color));
}
.odeme-methods { grid-template-columns: 1fr 1fr; }
@media (max-width: 767.98px) {
  /* Ekran değişimi modeli (2026-07-19): liste kendi ekranında — 54dvh kısıtı kalktı,
     sayfa doğal akar (ödeme paneli artık altta değil, ayrı adımda). */
  .odeme-list-body { max-height: none; overflow-y: visible; }
  .odeme-methods { grid-template-columns: 1fr; }
  .odeme-method-card { display: none; }
}

/* Ödeme — satır tipografisi ve üst bar rozeti. Masaüstü boyutlar temel; telefonda
   fontlar/butonlar kısılır ki satırlar dar ekrana TAM sığsın (+ çipi kesilmesin).
   REDESIGN 2026-07-19: satırlar nefesli (min 44px dokunma hedefi), KDV dökümü katlanır,
   Kalan hero rakamı, mobil yapışkan ödeme çubuğu. */
.odeme-top-badge { font-size: 13px; padding: 8px; }
.odeme-line { min-height: 46px; }
.odeme-line-minus { width: 2.1rem; align-self: stretch; font-size: 1.1rem; line-height: 1; }
.odeme-line-name { font-size: 0.95rem; }
.odeme-line-sub { font-size: 0.72rem; }
.odeme-line-plus { width: 1.85rem; height: 1.85rem; font-size: 0.78rem; }
.odeme-kalan-hero { font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; }
.odeme-summary { border-color: var(--border-color) !important; background: var(--bg-surface-secondary); }
.odeme-kdv > summary { cursor: pointer; padding: 4px 2px; user-select: none; }
.odeme-kdv > summary:hover { color: var(--text); }
/* Mobil yapışkan ödeme çubuğu — alt kısayol barının ÜSTÜNDE durur.
   width/max-width: .row'un doğrudan çocuğu olduğundan Bootstrap .row > * width:100%
   basıyor; fixed'te width+left varken right YOK SAYILIR → çubuk sağdan taşıyordu.
   width:auto ile left/right çifti genişliği belirler (telefon taşma fix'i 2026-07-20). */
.odeme-paybar {
  position: fixed;
  left: 10px;
  right: 10px;
  width: auto;
  max-width: none;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: calc(14px * var(--radius-scale, 1));
  border: 1px solid var(--sweet-green-bd);
  background: var(--bg-surface);
  box-shadow: var(--shadow-float);
}
.odeme-paybar-info { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; padding-left: 2px; }
.odeme-paybar-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.odeme-paybar-amount { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 991.98px) {
  /* Çubuk içeriği örtmesin: ızgaranın altına nefes. */
  .odeme-grid { padding-bottom: 84px; }
}
@media (max-width: 575.98px) {
  .odeme-top-badge { font-size: 11.5px; padding: 5px 8px; }
  .odeme-line { padding-left: 6px !important; padding-right: 6px !important; gap: 6px !important; min-height: 44px; }
  .odeme-line-minus { width: 2rem; font-size: 1rem; }
  .odeme-line-name { font-size: 0.85rem; }
  .odeme-line-sub { font-size: 0.66rem; }
  .odeme-line-plus { width: 1.7rem; height: 1.7rem; font-size: 0.72rem; }
  .odeme-hint { display: none; }
}

/* Cari sipariş — MOBİL yüzen sepet (FAB): sağ altta, alt kısayol barının üstünde;
   alışveriş sitesi dili (çanta ikonu + kırmızı sayaç). Modal açılınca buton gizlenir
   (koşullu render); çekmece perdesi (120) üstünü örter. */
.cari-cart-fab {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 105;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(201, 53, 29, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease;
}
.cari-cart-fab:active { transform: scale(0.94); }
.cari-cart-fab .fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sweet-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Cari sipariş başlığı — kompakt: arama kutusu dar, banner yazısı telefonda tek satır küçülür. */
/* KIBAR arama kutusu (kullanici 2026-08-01: "banner'i kaplamasin, koseler yuvarlak"):
   hap formu, ince, yari-saydam zemin — banner el yazisi basligini ezmez. */
.cari-search {
  max-width: 190px;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12.5px;
  min-height: 0;
  height: 28px;
  background: var(--bg-surface-secondary);
  border-color: var(--border-color);
}
.cari-search:focus { background: var(--bg-surface); }

/* URUN ARA KUTUSU — ADISYON/CARI SIPARIS BASLIK SERIDI (kullanici 2026-08-04):
   "arama kutusunu da biraz buyutelim web gorunumunde; mobilde de menu sola dayali ve arama
   satiri tamamlayacak buyuklukte olsun." Baslik sola dayandigi icin kalan genislik aramaya
   kalir: masaustunde ferah sabit kutu, telefonda satirin kalanini DOLDURUR. */
@media (min-width: 769px) {
  .adisyon-split .cari-search,
  .cari-sip .cari-search {
    /* 30px: 38px'lik kompakt seride py-1 (4+4) ile TAM oturur — serit geri buyumez. */
    max-width: 300px;
    width: 300px;
    height: 30px;
    font-size: 13.5px;
    padding: 3px 14px;
  }
}
@media (max-width: 768px) {
  /* Baslik seridi icerigi kadar yer kaplar (hucreler bu genisligi referans alir),
     arama kalan satiri doldurur. */
  .adisyon-split .adisyon-cat-titlewrap,
  .cari-sip .adisyon-cat-titlewrap { flex: 0 0 46%; }
  .adisyon-split .cari-search,
  .cari-sip .cari-search {
    flex: 1 1 auto !important;
    max-width: none;
    width: auto;
    min-width: 0;
    height: 30px;
    font-size: 13px;
  }
}
@media (max-width: 575.98px) {
  .cari-search { max-width: 128px; height: 26px; font-size: 12px; }
  .adisyon-cat-title-text { font-size: 21px; white-space: nowrap; }
}

/* Cari sipariş kategori kartı — müşteri menüsündeki kartlarla aynı dil:
   4:3 kapak, altta karartma + BÜYÜK isim (2 satıra sarabilir, "..." yok), turuncu çerçeve. */
.cari-cat-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: calc(14px * var(--radius-scale, 1));
  overflow: hidden;
  border: 1px solid rgba(201, 53, 29, 0.5);
  cursor: pointer;
  background: var(--bg-surface-secondary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  transition: transform 120ms ease;
}
.cari-cat-tile:active { transform: scale(0.98); }
.cari-cat-tile .tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.05) 75%);
}
.cari-cat-tile .tile-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* Cari kategori kartları — WEB'de kategori sayısı ne olursa olsun EKRANA SIĞAR
   (kullanıcı kararı 2026-07-11): taban yükseklik 128px; dikey yer daralınca satırlar
   EŞİT küçülür (44px tabanına kadar), ancak o tabanın da altına inerse kaydırma açılır.
   4:3 oran mobil deneyim içindi; mobil kural (2 sütun iri kart) DEĞİŞMEDİ. */
@media (min-width: 768px) {
  .cari-cat-tile {
    aspect-ratio: auto;
    height: 128px;
  }
  /* 215px = üst bar + kart başlığı + dolgular; kalan dikey alan ızgaranın tavanı. */
  .cari-cat-fit {
    max-height: calc(100dvh - 215px);
    overflow-y: auto;
    grid-auto-rows: minmax(44px, 128px);
  }
  .cari-cat-fit .cari-cat-tile { height: 100%; }
}

/* ================= YONETIM = PROGRAM PENCERESI (2026-07-31) =================
   Kullanici karari: uygulama "bilgisayar programi" gibi — sayfa scroll URETMEZ; icerik
   tum cihazlarda (telefon/tablet/masaustu) tek cerceveye oturur. Esneyen parca GRAFIK
   (flex:1); basik ekranda ikincil satirlar (.yf-sub) gizlenir. Asiri basik pencerede
   min-height devreye girer ve sayfa kayar (iceriik EZILMEZ — adisyon kuralinin aynisi). */
.yonetim-fit {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.1vh, 14px);
  height: calc(100dvh - 110px);
  min-height: 480px;
  overflow: hidden;
}
.page-wrapper:has(.yonetim-fit) { padding-top: 6px; }
.yonetim-fit > * { flex: 0 0 auto; min-height: 0; }
.yf-grid { display: grid; gap: 8px; }
.yf-live.yf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yf-live.yf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yf-today { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yf-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Grafik karti kalan alani alir; govde yuzde-yukseklikli ResponsiveContainer'a taban verir. */
.yonetim-fit .yf-chart { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 96px; margin-bottom: 0; }
.yf-chart .yf-chart-body { flex: 1 1 auto; min-height: 0; }
/* Tablet: BUGUN kartlari 2x2 (4'lu dar kaliyor); canli kartlar tek satir kalir. */
@media (max-width: 991.98px) {
  .yf-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: 2'li izgaralar; tek kalan canli kart tam satira yayilir; tabbar dusulur. */
@media (max-width: 767.98px) {
  body.has-mobile-tabbar .yonetim-fit {
    height: calc(100dvh - 138px - env(safe-area-inset-bottom));
    min-height: 430px;
  }
  .yf-live.yf-cols-3, .yf-live.yf-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yf-span-all-sm { grid-column: 1 / -1; }
  /* Telefonda kart ici biraz sikisir — pencereye sigma oncelikli. */
  .yonetim-fit .card-body { padding-top: 6px; padding-bottom: 6px; }
  .yonetim-fit .fs-4 { font-size: 1.15rem !important; }
  .yonetim-fit .hm-cc-sub { display: none; }
}
/* Basik ekran (yukseklik dar — cihazdan bagimsiz): ikincil satirlar gizlenir, pencere korunur. */
@media (max-height: 760px) {
  .yonetim-fit .yf-sub { display: none; }
  .yonetim-fit .fs-4 { font-size: 1.1rem !important; }
  .yonetim-fit .hm-cc-sub { display: none; }
}

/* YONETIM ORTA BOLGE (2026-07-31): kalan alan 3 kolon — grafik | en cok satan | personel+nabiz.
   Kolon govdeleri kendi icinde kayar (pencere sabit); tablet 2 kolon + alt serit, telefonda
   orta bolge TEK IC scroll olur (cerceve yine sabit). */
.yf-mid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
}
.yf-mid > * { min-height: 0; }
.yf-panel { display: flex; flex-direction: column; margin-bottom: 0; }
.yf-panel > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px; }
.yf-col3 { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.yf-col3 .yf-panel { flex: 1 1 auto; }
.yf-col3 .yf-pulse { flex: 0 0 auto; }
/* Masaustunde yf-scroll sargisi GORUNMEZ (display:contents): cocuklar yonetim-fit'in
   dogrudan flex ogesi kalir, fit duzeni degismez. Telefon kurali asagidaki media'da. */
.yf-scroll { display: contents; }
/* Bolum ayraci (2026-08-01): kapanis karti ile mali bolge arasinda ince cizgi. */
.yf-sec-divider { border-top: 1px solid var(--border-color); }
/* NFC KULLANIM — TAM EKRAN FIT (2026-08-01, kullanici: "kasa defterindeki gibi"):
   .nfcu-fit sargisi ARTIK ADMIN SAYFASINDA DA VAR (kullanici 2026-08-04: "mobilde
   isletmedeki NFC takibi ekraninin aynisi olsun, tek fark isletme secimi") — eskiden
   yalniz isletme sayfasindaydi, bu yuzden admin'de mobil kat duzeni hic uygulanmiyor
   ve iki bolme dar ekranda yan yana eziliyordu.
   Masaustu: iki bolme ekranin altina kadar uzar, icleri kendi icinde kayar.
   Telefon: bolmeler adisyon-split tarzi ELLE kaydirmali yatay kat
   (Gun Gun Kullanim solda, Son Siparisler sag katta; mandatory snap). */
.nfcu-fit { display: flex; flex-direction: column; min-height: 0; }
.nfcu-fit > .nfcu { flex: 1 1 auto; min-height: 0; }
@media (min-width: 992px) {
  .page-wrapper:has(.nfcu-fit) { padding-top: 8px; padding-bottom: 10px; }
  .nfcu-fit { height: 100%; }
  .nfcu-fit .nfcu-panes { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .nfcu-fit .nfcu-pane { min-height: 0; display: flex; flex-direction: column; }
  .nfcu-fit .nfcu-pane-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
}
@media (max-width: 767.98px) {
  .page-wrapper:has(.nfcu-fit) { padding-top: 8px; }
  body.has-mobile-tabbar .page-wrapper:has(.nfcu-fit) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .nfcu-fit { height: 100%; }
  .nfcu-fit .nfcu-panes {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    gap: 10px;
  }
  .nfcu-fit .nfcu-panes::-webkit-scrollbar { display: none; }
  .nfcu-fit .nfcu-pane {
    flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0;
    height: 100%; scroll-snap-align: start;
    display: flex; flex-direction: column; min-height: 0;
  }
  .nfcu-fit .nfcu-pane-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
}

/* BUGUN STAT KARTI (2026-08-01 redesign): [renkli baslik ... mini ikon rozeti] ustte,
   buyuk deger ortada, sonuk alt satir altta. Ikon buyuk cipten mini rozete indi —
   deger nefes alir; rozet zemini yesilin soluk karisimi (tema ailesi), koseler keskin. */
.yf-stat .card-body { padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.yf-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.yf-stat-name { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--sweet-green); white-space: nowrap; }
.yf-stat-ico {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: calc(7px * var(--radius-scale, 1));
  background: color-mix(in srgb, var(--sweet-green) 12%, var(--bg-surface));
  color: var(--sweet-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}
/* Baslik eki "(00:00'dan beri)" minik ve TEK satir (2026-08-01). */
.yf-since { font-size: 11px; white-space: nowrap; }
@media (max-width: 767.98px) { .yf-since { font-size: 10px; } }
/* Display boyutunda PROPORTIONAL rakam (tabular genis '1'lerle gevsek durur). */
.yf-stat-val { font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; }
.yf-stat-sub { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
@media (max-width: 767.98px) {
  .yf-stat-val { font-size: 19px; }
  .yf-stat .card-body { padding: 7px 10px 8px; }
  /* Delta/alt satirlar dar kartta TEK satira sigsin (kullanici 2026-08-01). */
  .yf-stat-sub { font-size: 10.5px; letter-spacing: -0.1px; }
}
/* Liste satiri: sira rozeti + ad + adet + tutar (tabular rakam). */
.yf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 12.5px;
  color: inherit;
  text-decoration: none !important;
}
.yf-row:last-child { border-bottom: 0; }
.yf-rank {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--primary-lt); color: var(--primary);
  font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.yf-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.yf-row-meta { color: var(--text-muted); flex-shrink: 0; font-size: 11.5px; }
.yf-row-val { font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
a.yf-row:hover .yf-row-name { color: var(--primary); }
/* Tablet: grafik+satan ust satir, personel+nabiz alt serit (yan yana). */
@media (max-width: 1199.98px) {
  .yf-mid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .yf-col3 { grid-column: 1 / -1; flex-direction: row; }
  .yf-col3 .yf-panel { flex: 1 1 0; }
  .yf-col3 .yf-panel > .card-body { max-height: 132px; }
}
/* Telefon: orta bolge tek IC scroll; grafik sabit boy, listeler dogal akista. */
@media (max-width: 767.98px) {
  .yf-mid { display: flex; flex-direction: column; overflow-y: auto; }
  /* Kartlar kucultulmesin: kart kutusu kuculup govdesi overflow:visible ile tasinca
     satirlar alttaki kartlarin arkasina siziyordu. */
  .yf-mid > *, .yf-col3 .yf-panel { flex-shrink: 0; }
  .yf-mid .yf-chart { flex: 0 0 auto; }
  .yf-chart .yf-chart-body { flex: 0 0 auto; height: 150px; min-height: 150px; }
  .yf-col3 { flex-direction: column; }
  .yf-col3 .yf-panel > .card-body { max-height: none; }
  .yf-panel > .card-body { overflow: visible; }
  /* ALT STAT SCROLL (2026-08-01): donem filtresinin ALTI (mali kartlar + grafik +
     listeler) TEK kayan bolge — grafik/listeler dipte ezilmez. Masaustu: display:contents. */
  .yf-scroll {
    display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 14px);
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .yf-scroll::-webkit-scrollbar { display: none; }
  .yf-scroll > * { flex: 0 0 auto; }
  .yf-scroll .yf-mid { overflow-y: visible; flex: 0 0 auto; }
  /* Donem cipleri: daha UFAK + koseleri BELIRGIN (999px kapsul degil) — yalniz kokpit. */
  .yonetim-fit .hm-chip {
    min-height: 28px; padding: 3px 9px; font-size: 12px;
    border-radius: calc(7px * var(--radius-scale, 1));
  }
}

/* ================= IPTAL & IKRAM = PROGRAM PENCERESI (2026-08-02) =================
   Kullanici: "donem banneri + dokum tek tablo gibi; sayfa ekranin altina kadar."
   Tek kart: ust bant (donem + tur cipleri + tarih) + ozet serit sabit; yalniz liste
   (.ii-scroll) kayar; sayfalama kaydirmanin DISINDA hep gorunur. */
.ii-fit { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ii-fit .ii-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
.ii-fit .ii-card > * { flex: 0 0 auto; }
.ii-fit .ii-card > .ii-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.page-wrapper:has(.ii-fit) { padding-top: 8px; padding-bottom: 10px; }
@media (max-width: 767.98px) {
  body.has-mobile-tabbar .page-wrapper:has(.ii-fit) {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
}
/* Tarih SOLDA donem ciplerine yapisik (kullanici 2026-08-02) — genel .rapor-donem-tarih
   margin-left:auto kuralini bu sayfada ezer; tur cipleri ms-auto ile EN SAGDA. */
.ii-card .ii-tarih { margin-left: 0; padding-left: 4px; }
/* Rozetler daha KOSELI (kullanici 2026-08-02: "köşeli badgeler") — kapsul degil etiket. */
.ii-card .badge { border-radius: calc(5px * var(--radius-scale, 1)); }
/* Telefon: ust bant TAM OTURUR (kullanici 2026-08-02: "tek satirlara sigsin, cok az yer
   kaplasin") — satir 1: donem cipleri TEK SATIR (yatay kaydirmali, cubuk gizli);
   satir 2: tarih solda + tur cipleri & Excel sagda. Cipler kokpit boyutu, koseli. */
@media (max-width: 767.98px) {
  .ii-card > .card-body.py-2 { padding: 6px 8px; row-gap: 6px; column-gap: 6px; }
  .ii-card .rapor-donem-chips {
    /* Genel rapor kuralı telefonda 3'lü GRID yapıyor (773) — burada tek satır kaydırmalı. */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ii-card .rapor-donem-chips::-webkit-scrollbar { display: none; }
  /* Tarih satırı telefonda gizli — seçili çip dönemi zaten söylüyor, 1 satır kazanılır. */
  .ii-card .ii-tarih { display: none; }
  .ii-card .hm-chip {
    min-height: 27px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: calc(7px * var(--radius-scale, 1));
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ii-card .ii-tarih {
    margin-left: 0;
    width: auto;
    justify-content: flex-start;
    font-size: 11px;
    padding-left: 2px;
  }
  .ii-card .btn-sm { padding: 2px 8px; }
  .ii-card .rapor-adsum { padding-top: 4px; padding-bottom: 4px; }
}
/* Telefon TEK SATIR dokum — kasa defteri hareket deseniyle ayni dil. */
.ii-mlist { display: grid; align-content: start; }
.ii-mlist > div { border-bottom: 1px solid var(--border-color-light); }
.ii-mlist > div:last-child { border-bottom: 0; }
.ii-mrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
}
.ii-mrow .badge { flex-shrink: 0; }
.ii-mrow:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ii-mdetail { padding: 0 10px 8px 10px; display: grid; gap: 2px; }

/* ================= YONETIM PANO BOLUM PANOLARI (2026-08-02 denemeleri -> A secildi 2026-08-04) =================
   Kullanici: "bolumleri gorsel olarak ayirmak anlamayi kolaylastiriyor + cok renkli, acaba daha
   stabil mi olsa". 4 deneme (A/B/C/D) gecici bir secici seritle sunuldu; karar A oldu ve
   kalicilasti -> B/C/D kurallari ve secici serit SILINDI (2026-08-04).
   A = SOLUK RENKLI BOLUM PANOLARI (kasa kapanisi form dili): her bolum color-mix %3-4 tonlu
   kapta — CANLI kirmizimsi (operasyon), BUGUN yesilimsi (para), HIZLI ERISIM notr. Ic kartlar
   yuzey renginde kalip kaptan ayrisir; bolum arasi ayrac cizgisine gerek kalmaz. */

/* Sargi = flex kolonu (duzen iskeleti). */
.yonetim-fit > .yf-sec {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.1vh, 14px);
  min-height: 0;
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  border-radius: calc(14px * var(--radius-scale, 1));
  padding: 8px;
}
.yonetim-fit > .yf-sec-bugun { flex: 1 1 auto; }

.yonetim-fit > .yf-sec-canli {
  background: color-mix(in srgb, var(--primary) 4%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border-color));
}
.yonetim-fit > .yf-sec-bugun {
  background: color-mix(in srgb, var(--sweet-green) 4%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--sweet-green) 14%, var(--border-color));
}
.yonetim-fit > .yf-sec-quick { background: color-mix(in srgb, var(--text) 3%, var(--bg-surface)); }
/* Kaplar bolumleri zaten ayiriyor — eski ayrac cizgisi gereksiz. */
.yonetim-fit .yf-sec-divider { display: none; }

/* Mobil (juri duzeltmesi): kap padding'i dar ekranda satiri sikip "Masadan Sip..." kirpiyordu
   -> 6px; saniye blogu gizlenir (satira ~20px geri gelir). */
@media (max-width: 767.98px) {
  .yonetim-fit > .yf-sec { padding: 6px; }
  .yonetim-fit .hm-clock-sec { display: none; }
}

/* MASA IZGARASI — YOGUN MOD (2026-07-31): tutar gormeyen kullanici (kasa/garson) icin
   bilgisayarda kartlar kuculur, ayni ekranda cok daha fazla masa gorunur. Kart icerigi
   zaten sade (merkez "Masa N" + durum pili + saat) — kucuk kartta da okunur. Telefon
   kurallari (3'lu kare izgara) DEGISMEZ. */
@media (min-width: 576px) {
  .masa-grid.masa-grid-dense { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .masa-grid-dense .masa-card .card-body { padding: 8px 9px; }
  .masa-grid-dense .masa-card .masa-amount-lg { margin: 2px 0; }
  .masa-grid-dense .masa-card .masa-amount-lg.masa-center-name { font-size: 15.5px; }
  .masa-grid-dense .masa-card .masa-go { display: none; }
  .masa-grid-dense .masa-card .masa-badge { font-size: 9.5px; padding: 2px 7px 2px 6px; gap: 4px; }
  .masa-grid-dense .masa-card .masa-badge::before { width: 5px; height: 5px; }
  .masa-grid-dense .masa-card .masa-opened { font-size: 10px; }
  .masa-grid-dense .masa-card .masa-foot { gap: 4px; flex: 1 1 auto; justify-content: center; }
  .masa-grid-dense .masa-card .card-body > .mt-auto { justify-content: center; padding-top: 4px !important; }
  .masa-grid-dense .masa-card .masa-pause-btn { width: 22px; height: 22px; font-size: 11px; }
}

/* YOGUN MOD — TELEFON (2026-07-31 deneme): tutar gormeyen kullanicida telefonda da
   TEK SATIRDA 4 MASA. Kart ici mini olcek: merkez "Masa N", altta kucuk pil + saat. */
@media (max-width: 575.98px) {
  .masa-grid.masa-grid-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .masa-grid-dense .masa-card .card-body { padding: 4px 5px; }
  .masa-grid-dense .masa-card .masa-amount-lg.masa-center-name { font-size: 12.5px; }
  .masa-grid-dense .masa-badge { font-size: 8px; padding: 2px 5px 2px 4px; gap: 3px; }
  .masa-grid-dense .masa-badge::before { width: 4px; height: 4px; }
  .masa-grid-dense .masa-card .masa-opened { font-size: 8px; }
  .masa-grid-dense .masa-card .masa-opened .bi { font-size: 7.5px; }
  .masa-grid-dense .masa-card .masa-foot { gap: 2px !important; }
  .masa-grid-dense .masa-card .masa-pause-btn { width: 18px; height: 18px; font-size: 10px; }
}

/* KASA BANNER — TELEFON 2 INCE SATIR (2026-07-31): [arama + tumunu-duraklat] ustte,
   [Rezervasyon + Siralama] altta. Kapsul (999px) yerine masa kartiyla AYNI kose;
   yukseklikler 34 -> 28px — serit zarifler, masalara yer kalir. */
@media (min-width: 768px) {
  /* Masaustunde duraklat sag ucta kalir (banner'in dogrudan cocugu oldu, order ile). */
  .kasa-panel-filter > .kasa-area-pause { order: 5; }
}
@media (max-width: 767.98px) {
  .kasa-panel { padding: 6px 8px; gap: 6px; }
  .kasa-panel-filter { gap: 6px; }
  .kasa-panel-filter > .kasa-search { order: 1; flex: 1 1 55%; }
  .kasa-panel-filter > .kasa-area-pause { order: 2; flex: 0 0 auto; margin-left: 0; }
  .kasa-panel-filter > .kasa-filter-actions { order: 3; }
  .kasa-filter-actions { gap: 6px; }
  /* Ince + masa kosesi: tum kontroller ayni dil. */
  .kasa-search,
  .kasa-resv-btn,
  .kasa-sort-wrap,
  .kasa-panel-filter > .kasa-area-pause {
    min-height: 28px;
    border-radius: calc(9px * var(--radius-scale, 1));
  }
  .kasa-search { padding: 3px 10px; }
  .kasa-resv-btn, .kasa-sort-wrap { padding: 3px 8px; font-size: 11.5px; }
  .kasa-panel-filter > .kasa-area-pause { padding: 3px 9px; font-size: 12px; }
}

/* KASA BANNER — WEB (2026-07-31): arama kutusu yatayda yayilir (stats ile butonlar
   arasindaki bosluk aramaya gider); kontroller masa kosesiyle ayni ailede. */
@media (min-width: 768px) {
  .kasa-panel-filter { flex: 1 1 auto; justify-content: flex-end; }
  .kasa-panel-filter > .kasa-search { flex: 1 1 auto; max-width: 520px; }
  .kasa-search input { width: 100%; flex: 1 1 auto; }
}

/* KOMPAKT MASA KARTI — WEB (kullanici 2026-07-31: puzzle panosu KALKTI, "bolume gore"
   geniste de klasik ALT ALTA bolum listesi; kart boyutu her gorunumde pano kadar kucuk).
   Taban 158px -> 126px, ic dolgu kisilir, ok gizli (karta tiklama zaten gidiyor).
   Telefon kurallari (3'lu / 4'lu izgara) ayri blokta, bu blok yalniz >=768px. */
@media (min-width: 768px) {
  .masa-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 9px; }
  .masa-grid .masa-card .card-body { padding: 8px 9px; }
  .masa-grid .masa-card .masa-go { display: none; }
  /* MASA ZOOM (kullanici 2026-07-31): kullanici +/- ile satirdaki masa sayisini secti —
     auto-fill yerine SABIT kolon; kartlar 1fr olarak buyur/kuculur. Yalniz web: telefonun
     3'lu/4'lu duzeni asagidaki dar-ekran kurallarinda kalir (has-cols orada tanimsiz). */
  .masa-grid.has-cols { grid-template-columns: repeat(var(--masa-cols, 12), minmax(0, 1fr)); }
  /* ORANTILI BUYUME (kullanici 2026-07-31: "cok yatay duruyor" + "icerik oranli kuculmeli,
     ust uste binmeyecek"): zoom aktifken kart 4:3 oranini korur ve KART ICINDEKI HER SEY
     (ad, tutar, rozet, saat, pause, dolgular) kart genisligiyle olceklenir — container
     query (kart kendi kabi, cqw birimi). Kucuk kolonda 72px taban + gizleme esikleri
     icerigi korur; tasma/binme olmaz. Kutu arasi bosluk da zoom'a uyar: az kolon (buyuk
     kart) = ferah, cok kolon (kucuk kart) = siki. */
  .masa-grid.has-cols { gap: clamp(4px, calc(14px - var(--masa-cols, 12) * 0.5px), 11px); }
  .masa-grid.has-cols .masa-card {
    aspect-ratio: 4 / 3;
    min-height: 72px;
    overflow: hidden;
    container-type: inline-size;
  }
  .masa-grid.has-cols .masa-card .card-body {
    padding: clamp(3px, 4cqw, 12px) clamp(4px, 4.5cqw, 13px);
    min-height: 0;
  }
  /* Orta bolge (tutar / merkez ad / rezervasyon) kalan yuksekligi alir, ORTALANIR. */
  .masa-grid.has-cols .masa-card .masa-amount-lg {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(11px, 11cqw, 26px);
  }
  /* KIMLIK YAZISI daha az kuculur (kullanici 2026-08-01: "yer varken cok kuculuyor"):
     alt sinir yuksek + egim dik — kucuk kartta bile "Masa N" okunakli kalir. */
  .masa-grid.has-cols .masa-card .masa-amount-lg.masa-center-name { font-size: clamp(13px, 13cqw, 23px); }
  .masa-grid.has-cols .masa-card .masa-name { font-size: clamp(11.5px, 11cqw, 14px); }
  .masa-grid.has-cols .masa-card .card-body > p:not(.masa-amount-lg) { font-size: clamp(8px, 8cqw, 12px); }
  .masa-grid.has-cols .masa-card .masa-pause-btn {
    width: clamp(14px, 13cqw, 26px);
    height: clamp(14px, 13cqw, 26px);
    font-size: clamp(8px, 8cqw, 13px);
  }
  .masa-grid.has-cols .masa-card .masa-badge {
    font-size: clamp(7px, 6.5cqw, 11.5px);
    padding: clamp(1px, 1.5cqw, 3px) clamp(4px, 5cqw, 10px);
    gap: clamp(2px, 2cqw, 5px);
  }
  .masa-grid.has-cols .masa-card .masa-badge::before { width: clamp(3px, 3cqw, 6px); height: clamp(3px, 3cqw, 6px); }
  .masa-grid.has-cols .masa-card .masa-opened { font-size: clamp(7px, 6.5cqw, 11px); gap: clamp(1px, 1.5cqw, 3px); }
  .masa-grid.has-cols .masa-card .masa-opened .bi { font-size: clamp(6.5px, 6cqw, 10px); }
  .masa-grid.has-cols .masa-card .card-body > .mt-auto {
    padding-top: clamp(1px, 2cqw, 8px) !important;
    gap: clamp(2px, 2.5cqw, 8px) !important;
    min-height: 0;
  }
  /* COK KUCUK KART (dar kolon): ikincil bilgiler cekilir — "Masa" kelimesi, ozel etiket
     ve acilis saati gizlenir; numara + durum pili + pause kalir. Binme sifir. */
  @container (max-width: 118px) {
    .masa-card .masa-name .masa-name-word { display: none; }
    .masa-card .card-body > p:not(.masa-amount-lg) { display: none; }
    .masa-card .masa-opened { display: none; }
  }
}
/* MASA ZOOM butonlari — Siralama kutusuyla ayni aile: iki dilimli kucuk ray.
   Telefonda da VAR (kullanici 2026-08-01): ayri tercih, 2-5 kolon. */
.kasa-zoom {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: calc(9px * var(--radius-scale, 1));
  overflow: hidden;
  background: var(--bg-surface-secondary);
}
.kasa-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.kasa-zoom-btn + .kasa-zoom-btn { border-left: 1px solid var(--border-color); }
.kasa-zoom-btn:hover:not(:disabled) { background: var(--bg-surface); color: var(--primary); }
.kasa-zoom-btn:disabled { color: var(--text-muted); opacity: 0.5; cursor: default; }

/* ---- MASA ZOOM: TELEFON (kullanici 2026-08-01) ---- */
@media (max-width: 767.98px) {
  /* Banner mobil yuksekligiyle (28px) ayni ince ray. */
  .kasa-zoom-btn { min-height: 28px; width: 32px; font-size: 12.5px; }
  /* Kullanici kolon sectiyse telefonun 3'lu/4'lu sabiti yerine secim gecerli. */
  .masa-grid.has-cols-m { grid-template-columns: repeat(var(--masa-cols-m, 3), minmax(0, 1fr)); gap: clamp(4px, calc(13px - var(--masa-cols-m, 3) * 2px), 8px); }
  /* Icerik kartla oranlanir (webteki cqw yaklasimi) — 2'li buyuk kartta yazi buyur,
     5'li mini kartta kuculur; kimlik yazisi az kuculur, saat cok dar kartta gizlenir. */
  .masa-grid.has-cols-m .masa-card { container-type: inline-size; }
  .masa-grid.has-cols-m .masa-card .masa-amount-lg { font-size: clamp(10px, 12cqw, 22px); }
  .masa-grid.has-cols-m .masa-card .masa-amount-lg.masa-center-name { font-size: clamp(11.5px, 15cqw, 26px); }
  .masa-grid.has-cols-m .masa-card .masa-no {
    font-size: clamp(10px, 11cqw, 18px);
    min-width: clamp(20px, 24cqw, 38px);
    height: clamp(17px, 19cqw, 30px);
  }
  .masa-grid.has-cols-m .masa-card .masa-badge {
    font-size: clamp(6.5px, 7.5cqw, 12px);
    padding: clamp(1px, 1.5cqw, 4px) clamp(3px, 5cqw, 9px);
  }
  .masa-grid.has-cols-m .masa-card .masa-pause-btn {
    width: clamp(15px, 18cqw, 30px);
    height: clamp(15px, 18cqw, 30px);
    font-size: clamp(8px, 9cqw, 14px);
  }
  .masa-grid.has-cols-m .masa-card .masa-opened { font-size: clamp(6.5px, 7cqw, 11px); }
  @container (max-width: 88px) {
    .masa-card .masa-opened { display: none; }
  }
}

/* FADE GIRIS — TUM BOYLAR (2026-08-01, kullanici: "webte de fade in out"): giren sayfa
   .main'de 100ms belirir; cikis lib/page-slide.ts fadeOutPage (70ms, artik masaustunde de).
   Telefonun itme gecisleri (hm-slide-in-*) alttaki blokta; masaustu ayni siniflara FADE
   ile karsilik verir (kayma yalniz telefon dili). */
@keyframes hm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.main.hm-fade-in { animation: hm-fade-in 100ms ease-out; }
@media (min-width: 768px) {
  .main.hm-slide-in-right, .main.hm-slide-in-left { animation: hm-fade-in 100ms ease-out; }
}

/* ---- KAYAN SAYFA GECISI (kullanici 2026-08-01): masa karti -> adisyon SAGDAN kayar;
   adisyondan geri-kaydirma -> kasa SOLDAN kayar. Yalniz telefon; 240ms, snap egrisi.
   Transform animasyon bitince kalkar (fixed modallar etkilenmez). ---- */
@media (max-width: 767.98px) {
  /* HIZLI FADE GECISI (kullanici 2026-08-01: klon/kayma denemeleri GERI ALINDI —
     "fade in fade out, hizli"; tempo 120/160 -> 70/100 "yavas kaldi"): cikan ekran JS'te
     ~70ms sonumlenir (lib/page-slide.ts fadeOutPage), giren sayfanin .main'i burada
     ~100ms fade ile belirir. Yalniz telefon. */
  .main.hm-fade-in { animation: hm-fade-in 100ms ease-out; }
  /* GERCEK ITME GECISI (2026-08-01, adisyon<->odeme): fade YOK — giren sayfanin ICERIGI
     (.page-wrapper) karsi yonden TAM genislik kayarak girer; ayni anda page-slide.ts'in
     klonu eski icerigi ayni tempoda disari kaydirir → iki ekran ayni karede gorunur
     (adisyon-split/menu his). Sure+egri klonla BIREBIR AYNI olmali (240ms, snap). */
  @keyframes hm-wrap-in-right {
    from { transform: translateX(100%); }
    to { transform: none; }
  }
  @keyframes hm-wrap-in-left {
    from { transform: translateX(-100%); }
    to { transform: none; }
  }
  .main.hm-slide-in-right .page-wrapper { animation: hm-wrap-in-right 240ms cubic-bezier(0.2, 0, 0, 1); }
  .main.hm-slide-in-left .page-wrapper { animation: hm-wrap-in-left 240ms cubic-bezier(0.2, 0, 0, 1); }
}

/* BOLUM SEKMELERI — WEB "PROGRAM" RAYI (kullanici 2026-07-31): sekmeler artik masaustunde
   de aktif (telefondaki gibi tek bolum gosterimi). Telefonda alt-cizgili ince sekme kalir
   (taban kurallar yukarida); masaustunde farkli dil — koyu zeminli RAY, aktif sekme
   yuzey renginde kabarik dilim (golge + kirmizi metin), pasifler sonuk. */
@media (min-width: 768px) {
  .kasa-area-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 5px;
    padding: 5px;
    margin-bottom: 12px;
    max-width: 100%;
    overflow-x: auto;
    background: var(--bg-surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: calc(11px * var(--radius-scale, 1));
  }
  /* Iki katli dilim: ustte bolum adi, altta masa araligi ("Masa 1-20"); sagda sonuk
     dolu rozeti. Aktif dilim yuzeye cikar: ince kirmizi cerceve + yumusak golge —
     parlak dolgu YOK (kullanici 2026-08-01: "kirmizilar cok parlamasin"). */
  .kasa-area-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: calc(8px * var(--radius-scale, 1));
  }
  .kasa-area-tab::after { content: none; }
  .kasa-area-tab:hover { background: var(--bg-surface); }
  .kasa-area-tab.is-active {
    background: var(--bg-surface);
    border-color: color-mix(in srgb, var(--primary) 36%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  }
  .kasa-area-tab.is-active .kasa-area-tab-name { color: var(--primary); }
  .kasa-area-tab-main { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kasa-area-tab-name { font-size: 13px; font-weight: 700; line-height: 1.1; }
  .kasa-area-tab-range {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-muted);
  }
  .kasa-area-tab-count { min-width: 20px; height: 17px; font-size: 10.5px; }
}
/* Rozet: dolu/toplam — toplam kismi yari sonuk. */
.kasa-area-tab-total { font-weight: 600; opacity: 0.75; }

/* KASA DEFTERI (2026-08-01): ekrana tam oturan duzen + kompakt ozet seridi.
   Masaustunde (lg+) sayfa kaymaz: ust bantlar dogal boy, hareket karti kalan
   yuksekligi doldurur; satir sayisini JS olcer (finans/page.tsx). Telefonda
   dogal akis surer, ozet seridi 2x2 kucuk hucre olur. */
.finans-fit { display: flex; flex-direction: column; gap: 8px; }
/* Ust bosluk kisilir: banner ile Donem seridi arasi dar (kullanici 2026-08-01 "kompakt"). */
.page-wrapper:has(.finans-fit) { padding-top: 8px; }
/* Kart basliklari ince: Hareketler/kategori header'i icerige yer birakir. */
.finans-fit .card-header { padding-top: 6px; padding-bottom: 6px; }
.finans-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 18px; align-items: center; }
/* Deger + altyazi ayni satirda (Satis Tahsilati'nin Nakit/Kart kirilimi) — serit tek boy kalir. */
.fk-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fk-line .fk-sub { flex: 1 1 auto; }
/* Ozel donem tarih kutulari (masaustu sabit genislik; telefonda esit bolusur, asagida). */
.finans-dates input[type="date"] { width: 132px; }
.fk-item { min-width: 0; display: flex; flex-direction: column; }
.fk-label { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-label .badge { font-size: 9px; vertical-align: 1px; }
.fk-val { font-size: 17px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fk-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .finans-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
}
/* TELEFON KOMPAKT (kullanici 2026-08-01: "bir ekranda daha fazla veri gorebilmeliyim"):
   donem secimi + para butonlari TEK satir (butonlar ikon-only), Hareketler basligi
   TEK satir (arama + CSV/Excel dahil), hareket kartlari sikisik. hm-ops'un genel
   telefon kurallari (2'li izgara, 44px buton) BU SAYFADA gecersiz — scope .finans-fit. */
@media (max-width: 767.98px) {
  .finans-fit .hm-ops { flex-wrap: nowrap; gap: 6px; }
  .finans-fit .hm-ops-stats { width: auto; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
  .finans-fit .hm-ops-stats .btn-group .btn { padding: 4px 6px; font-size: 11.5px; }
  /* Ozel donem acilinca butonlar YERINDE kalir (ilk satir hizasinda), asagi kaymaz. */
  .finans-fit .hm-ops { align-items: flex-start; }
  .finans-fit .hm-ops-actions { width: auto; display: flex; gap: 6px; align-self: flex-start; }
  /* Para butonlari donem butonlariyla AYNI boyda (kullanici 2026-08-01). */
  .finans-fit .hm-ops-actions .btn { min-height: 0; padding: 3px 9px; font-size: 13px; line-height: 1.6; }
  /* Ozel tarihler kendi satirinda TEK satir, iki kutu esit bolusur. */
  .finans-fit .finans-dates { width: 100%; flex-wrap: nowrap; }
  .finans-fit .finans-dates input[type="date"] { flex: 1 1 0; width: auto; min-width: 0; padding: 2px 6px; font-size: 13px; }
  .finans-card > .card-header { flex-wrap: nowrap !important; gap: 6px; }
  .finans-card .card-title { font-size: 15px; flex-shrink: 0; }
  .finans-card > .card-header input[type="search"] { min-width: 60px !important; flex: 1 1 auto; }
  .finans-card > .card-header .btn { padding: 3px 8px; font-size: 12px; }
  /* Alt pay = bar boyu (54px) + 8px NEFES (kullanici 2026-08-01: "alti yapismis") —
     kart alt bara degmez; satir sayisini JS bar konumundan olctugu icin icerik tasmaz. */
  body.has-mobile-tabbar .page-wrapper:has(.finans-fit) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* KATEGORI YAN EKRANDA (kullanici 2026-08-01): hareketler sayfanin sonuna kadar uzanir,
     "Para Nereye Gitti" sagdaki kata kayarak gelir — adisyon-split / musteri menusu
     mekanizmasi: yatay MANDATORY snap rayi, kat = tam genislik, scrollbar gizli. */
  /* Katlar EKRANIN KALANINI kaplar (2026-08-01 fix): az kayitta kart kisa kalinca
     altindaki bos alan page-wrapper'a dusuyordu — orada kaydirma rayi TUTMUYORDU
     ("yana kaymiyor"). Tam boy kat = her yerden kaydirilir. */
  .finans-fit { height: 100%; min-height: 0; }
  .finans-fit > .finans-body { flex: 1 1 auto; min-height: 0; }
  /* g-3 DIKEY gutter tuzagi (tum telefonlarda dogrulandi): Bootstrap dikey gutter'i
     kolonlara MARGIN-TOP verir — kat yuksekligini 16px sasirtip karti alt bara
     tasiriyordu. Dikey gutter sifir (yatay ic bosluk kalir). */
  .finans-fit > .finans-body { margin-top: 0 !important; margin-bottom: 0; }
  .finans-body > * { margin-top: 0 !important; }
  .finans-body {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .finans-body::-webkit-scrollbar { display: none; }
  .finans-body > * {
    flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0;
    height: 100%; scroll-snap-align: start;
    display: flex; flex-direction: column;
  }
  .finans-body > * > .card { flex: 1 1 auto; min-height: 0; }
  /* Kategori kati sigmazsa kendi icinde kayar. */
  .finans-body > .col-lg-4 .card > .card-body { min-height: 0; overflow-y: auto; }
  /* Hareket kartinin ICI de flex (2026-08-01): satir sayisi KUTUDAN olculur — kart alt
     bara 8px tasiyordu (olcum bar konumuna, kutu paddinge gore doluyordu). */
  .finans-body .finans-card { display: flex; flex-direction: column; }
  .finans-body .finans-card > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* align-content: start SART (2026-08-01): grid'in tek/son satiri kalan yukseklige
     STRETCH olup kart icinde bos dev cerceve gibi gorunuyordu ("fazladan container"). */
  .finans-body .finans-card .finans-mrows { flex: 1 1 auto; min-height: 0; overflow: hidden; align-content: start; }
}
/* Telefon TEK SATIR hareket listesi: tutar (yon rengi) + aciklama + kisa saat + ok;
   ayrintiya dokununca acilir. d-md-none oldugu icin media disinda da guvenli. */
.finans-mrows { gap: 5px; }
.finans-mrow { min-width: 0; }
.finans-mrow-line {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; padding: 4px 8px; text-align: left;
  color: inherit; font-size: 13px; min-height: 28px;
}
.finans-mrow-amt { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.finans-mrow-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.finans-mrow-time { color: var(--text-muted); font-size: 11px; flex-shrink: 0; white-space: nowrap; }
.finans-mrow-chev { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.finans-mrow-detail { padding: 0 8px 8px; display: grid; gap: 6px; }

/* KASA KAPANISI (2026-08-01): finans deseni — xl+ ekrana tam oturur, formun esneyen
   bolgesi Kasa Hareketleri (olculu sayfalama, kasa-kapanis/page.tsx), gecmis kapanislar
   kendi icinde kayar. Dar ekranda dogal akis. Kompakt satis seridi her boyutta. */
.kapanis-fit { display: flex; flex-direction: column; }
.page-wrapper:has(.kapanis-fit) { padding-top: 8px; }
.kapanis-fit .card-header { padding-top: 6px; padding-bottom: 6px; }
/* BOLUM KAPLARI (kullanici 2026-08-01: "bolum bolum anlasilir, soluk renkler"):
   tema yuzeyine %5-6 renk karistirilir (color-mix) — acik/koyu temada da soluk kalir.
   Mavi=donem, yesil=tahsilat, kehribar=hareketler, kirmizi=mutabakat (2-vurgu ailesi). */
.kapanis-sec { border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.kapanis-sec-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.kapanis-sec-donem { background: color-mix(in srgb, #4a6fa5 6%, var(--bg-surface)); }
.kapanis-sec-tahsilat { background: color-mix(in srgb, #17724a 6%, var(--bg-surface)); }
.kapanis-sec-hareket { background: color-mix(in srgb, #c28e2e 6%, var(--bg-surface)); }
.kapanis-sec-mutabakat { background: color-mix(in srgb, #b0262f 5%, var(--bg-surface)); }
.kapanis-sales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kapanis-sales > div {
  border: 1px solid var(--border-color); border-radius: 8px;
  padding: 3px 8px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 6px; min-width: 0;
  background: var(--bg-surface); /* soluk kap icinde cipler yuzey renginde one cikar */
}
.kapanis-sales .fw-bold { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Hesap "Beklenen" satiri: masaustunde formul satirindan cizgiyle ayrilir; telefonda
   formul gizli oldugundan cizgi/pay yok. */
.kapanis-hesap-line { border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 4px; }
/* TELEFON (2026-08-01): sol kat TEK EKRAN (dikey scroll yok) — kart basligi/bilgi kutusu/
   "DONEM" basligi gizli, alanlar yan yana; GECMIS KAPANISLAR YAN KATTA (finans/adisyon
   yatay snap rayi). Esneyen bolge yine Kasa Hareketleri listesi. */
@media (max-width: 767.98px) {
  /* 54 -> 62: alt bara 8px nefes (kullanici 2026-08-01: "buton yapisik"). */
  body.has-mobile-tabbar .page-wrapper:has(.kapanis-fit) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .kapanis-fit { height: 100%; min-height: 0; }
  .kapanis-fit > .kapanis-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .kapanis-fit > .kapanis-body::-webkit-scrollbar { display: none; }
  /* g-3 DIKEY gutter tuzagi (kullanici 2026-08-01: "beyaz kartin alt koseleri gorunmuyor"):
     Bootstrap dikey gutter'i kolonlara MARGIN-TOP verir — kart 16px alta tasiyordu.
     Dikey gutter sifir; 62px alt pay ile kartin DORT kosesi her zaman gorunur. */
  .kapanis-fit > .kapanis-body { margin-top: 0 !important; margin-bottom: 0; }
  .kapanis-body > * { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; height: 100%; scroll-snap-align: start; margin-top: 0 !important; }
  .kapanis-body .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .kapanis-body .card > .card-body { flex: 1 1 auto; min-height: 0; }
  /* overflow AUTO (hidden degil): cok kisa ekranda buton kirpilmaz, form incecik kayar. */
  .kapanis-form-body { display: flex; flex-direction: column; overflow-y: auto; padding: 8px 10px; }
  .kapanis-form-body > * { flex: 0 0 auto; }
  /* SABIT 5 HAREKET (kullanici 2026-08-01): kutu buyumez, icerik kadar — bosluk
     kutunun icinde degil altta kalir; 5'ten fazlasi sayfalamayla gezilir. */
  .kapanis-mv { flex: 0 0 auto !important; min-height: 0; display: flex; flex-direction: column; }
  .kapanis-mv-list { flex: 0 0 auto; min-height: 0; overflow: visible; }
  .kapanis-history-body { overflow-y: auto; }
  /* Tarih kutusu yazisi kutuya gore buyuk kaliyordu (kullanici 2026-08-01) — kucult. */
  .kapanis-sec-donem input[type="datetime-local"] { font-size: 12px; }
  /* Hareket formu + Mutabakat giris kutulari INCE (kullanici 2026-08-01: "textbox'lari
     kucultelim") — dikeyde ~8px/kutu kazanilir, dokunma hedefi yine yeterli. */
  .kapanis-mv .form-select, .kapanis-mv .form-control, .kapanis-mv .btn,
  .kapanis-sec-mutabakat .form-control {
    padding-top: 3px; padding-bottom: 3px; font-size: 13px; min-height: 0;
  }
  /* Tahsilat cipleri dikey mini kutu, icerik ORTALI (kullanici 2026-08-01). */
  .kapanis-sales > div { flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 2px 6px; }
  .kapanis-sales .small { font-size: 10.5px; white-space: nowrap; }
  .kapanis-sales .fw-bold { font-size: 13px; }
  /* Veresiye bilgisi TEK satir (tasani ... ile kirp). */
  .kapanis-veresiye { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .kapanis-sec { padding: 6px 8px; }
  .kapanis-sec-title { margin-bottom: 4px; }
  .kapanis-hesap-line { border-top: 0; margin-top: 0; padding-top: 0; }
}
/* KISA TELEFONLAR (iPhone SE 667 / 640p Android — cihaz-uyum taramasi 2026-08-01):
   icerik kucultulur ki beyaz kart TASMADAN tam otursun (hareket sayisi JS'te 3'e iner). */
@media (max-width: 767.98px) and (max-height: 719.98px) {
  .kapanis-sec { padding: 4px 8px; }
  /* Basliklar kisa ekranda GIZLI (~60px kazanc): soluk bolum renkleri kimligi tasir;
     hareket basligindaki Giris/Cikis toplamlari gorunur kalir. */
  .kapanis-sec-title { display: none; }
  .kapanis-form-body { padding: 6px 8px; }
  .kapanis-form-body .form-label { margin-bottom: 1px !important; font-size: 10.5px; }
  .kapanis-form-body .mb-2 { margin-bottom: 6px !important; }
  .kapanis-veresiye { display: none; } /* bilgi satiri — ayrinti tooltip'te zaten var */
  .kapanis-sales .fw-bold { font-size: 12px; }
  .kapanis-mv .form-select, .kapanis-mv .form-control, .kapanis-mv .btn { padding-top: 2px; padding-bottom: 2px; }
}
@media (min-width: 1200px) {
  .page-wrapper:has(.kapanis-fit) { padding-bottom: 10px; }
  .kapanis-fit { height: 100%; min-height: 0; }
  .kapanis-fit > .kapanis-body { flex: 1 1 auto; min-height: 0; margin-top: 0 !important; }
  .kapanis-body > * { margin-top: 0 !important; }
  /* flex-wrap satir cizgisi icerige gore buyumesin: kolonlara ACIK yukseklik (finans dersi). */
  .kapanis-body > * { min-height: 0; height: 100%; }
  .kapanis-body .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .kapanis-body .card > .card-body { flex: 1 1 auto; min-height: 0; }
  /* Form govdesi kolon-flex: hareket kutusu kalani doldurur; cok dar yukseklikte govde kayar. */
  .kapanis-form-body { display: flex; flex-direction: column; overflow-y: auto; }
  .kapanis-form-body > * { flex: 0 0 auto; }
  .kapanis-mv { flex: 1 1 auto !important; min-height: 118px; display: flex; flex-direction: column; }
  .kapanis-mv-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .kapanis-history-body { overflow-y: auto; }
}
@media (min-width: 992px) {
  .page-wrapper:has(.finans-fit) { padding-bottom: 10px; }
  .finans-fit { height: 100%; min-height: 0; }
  .finans-fit > * { flex: 0 0 auto; }
  .finans-fit > .finans-body { flex: 1 1 auto; min-height: 0; margin-top: 0 !important; }
  .finans-body > * { margin-top: 0 !important; }
  /* Kolonlara ACIK yukseklik sart: flex-wrap satirinin cizgi boyu icerige gore
     buyudugunden height:auto kolon karti tasiriyordu (1366x720'de goruldu). */
  .finans-body > * { min-height: 0; height: 100%; }
  .finans-body .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .finans-body .card > .card-body { flex: 1 1 auto; min-height: 0; }
  /* Kategori kirilimi sigmazsa kendi icinde kayar (sayfayi uzatmaz). */
  .finans-body .col-lg-4 .card > .card-body { overflow-y: auto; }
  .finans-card > .card-body { display: flex; flex-direction: column; }
  .finans-card .finans-rows { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}