/* Casher – telefon, tablet, katlanır telefon ve masaüstü uyumlu temel stil */
/* ---------- Tema renkleri ----------
   Tüm renkler buradaki değişkenlerden gelir. Açık tema varsayılandır; <html data-theme="dark"> koyu temayı açar.
   Seçim tarayıcıda saklanır (js/casher.js → casher.theme). */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7; --panel: #ffffff; --panel-2: #f6f8fb;
  --ink: #0f172a; --muted: #475569; --line: #cbd5e1;
  --brand: #0a7d5a; --brand-hover: #086b4d; --brand-ink: #ffffff; --brand-soft: #d9f4ea; --brand-text: #08694c;
  --accent: #2563eb; --accent-soft: #dbe7ff;
  --danger: #c81e1e; --danger-soft: #fde4e4; --ok: #047a3e; --ok-soft: #d7f5e3;
  --warn: #8a5300; --warn-soft: #ffefc7; --star: #e09a00;
  --on-status: #ffffff; --backdrop: rgba(15, 23, 42, .55); --shadow: 0 12px 40px rgba(15, 23, 42, .18);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220; --panel: #151e2e; --panel-2: #1c2638;
  --ink: #f1f5f9; --muted: #b6c2d1; --line: #33415a;
  --brand: #22c58b; --brand-hover: #3ad79c; --brand-ink: #04140d; --brand-soft: #123a2c; --brand-text: #4fe0aa;
  --accent: #6ea8ff; --accent-soft: #1b2c4d;
  --danger: #ff6b6b; --danger-soft: #3d1a1d; --ok: #3ee08f; --ok-soft: #12352a;
  --warn: #ffc95c; --warn-soft: #3a2c0f; --star: #ffc94a;
  --on-status: #04140d; --backdrop: rgba(0, 0, 0, .65); --shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
:root {
  --radius: 12px; --gap: 14px;
  --nav-w: 232px;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16.5px; line-height: 1.45; color: var(--ink); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
h1 { font-size: 1.65rem; margin: 0 0 var(--gap); letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin: 0; }
a { color: var(--accent); }
input, select, button { font: inherit; color: inherit; }
input, select { background: var(--panel); color: var(--ink); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; min-height: 46px; }
input::placeholder { color: var(--muted); opacity: .85; }
select option { background: var(--panel); color: var(--ink); }
input:focus, select:focus { outline: 2.5px solid var(--brand); outline-offset: -1px; border-color: var(--brand-text); }
.muted { color: var(--muted); }

/* Yerleşim */
.shell { display: flex; min-height: 100dvh; }
.sidebar { width: var(--nav-w); background: var(--panel); border-right: 1px solid var(--line); padding: 12px; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; }
.sidebar { overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.4rem; color: var(--brand-text); padding: 4px 8px 14px; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: 1.15rem; flex: 0 0 auto; }
.i { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.nav-item { font: inherit; display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: none; color: var(--ink); text-decoration: none; font-weight: 500; text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--brand-soft); }
.nav-item.active { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.nav-spacer { margin-top: auto; }
.user-name { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.user-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name small { color: var(--muted); }
.bottom-nav, .menu-backdrop { display: none; }
:root { --bnav-h: 62px; }
.content { flex: 1; min-width: 0; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* Düğmeler — <a class="btn"> bağlantıları da aynı görünür (tarayıcı bağlantı rengi kullanılmaz) */
.btn, a.btn, a.btn:visited { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 9px 16px; min-height: 46px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; transition: background .12s, border-color .12s; }
.btn:hover { border-color: var(--brand-text); background: var(--panel-2); }
.btn.primary, a.btn.primary, a.btn.primary:visited { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-text); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.small { padding: 5px 12px; min-height: 36px; font-size: .92rem; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .tab:focus-visible, .ctab:focus-visible, .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.more { margin: var(--gap) auto; display: flex; }
.icon-btn { border: none; background: none; color: var(--ink); font-size: 1.25rem; cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--panel-2); }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); margin-bottom: var(--gap); }
.page-head h1 { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.toolbar .search { flex: 1 1 260px; }
.toolbar .price { width: 110px; }
.search.big { font-size: 1.2rem; min-height: 52px; }
.bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--brand-soft); border-radius: var(--radius); padding: 10px; margin-bottom: var(--gap); position: sticky; top: 0; z-index: 5; }
.quick-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Kartlar */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.8rem; font-weight: 600; }
.stat .value.small { font-size: 1rem; word-break: break-all; }

/* Tablo */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.grid th { font-size: .82rem; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
.grid tr:last-child td { border-bottom: none; }
.grid .num { text-align: right; white-space: nowrap; }
.grid .chk { width: 36px; }
.grid .name { cursor: pointer; font-weight: 500; }
.grid .actions { text-align: right; white-space: nowrap; }
.grid tr.passive td { color: var(--muted); }
.grid tr.system { background: var(--brand-soft); }
.grid input:not([type=checkbox]) { width: 100%; }
.grid input.tiny { width: 70px; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--brand-text); }
.tag { display: inline-block; font-size: .72rem; padding: 1px 6px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); margin-left: 4px; vertical-align: middle; }
.tag.gray { background: var(--line); color: var(--ink); }

/* Pencere (modal) */
.modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 20; }
.modal { position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.modal.small { width: min(420px, calc(100vw - 24px)); }
.modal-head, .modal-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; gap: 8px; }
.modal-foot { justify-content: flex-end; border-top: 1px solid var(--line); }
.modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.form-grid label input, .form-grid label select { color: var(--ink); font-size: 1rem; }
.form-grid label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field-label { font-size: .85rem; color: var(--muted); display: block; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.chip { background: var(--brand-soft); border-radius: 99px; padding: 4px 4px 4px 10px; display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, Consolas, monospace; }
.chip button { border: none; background: none; cursor: pointer; color: var(--muted); }
.chip-input { flex: 1 1 200px; border: none !important; outline: none !important; }
.audit { font-size: .85rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.errors { color: var(--danger); background: var(--danger-soft); border-radius: 8px; padding: 8px 12px 8px 28px; margin: 0; }
p.errors { padding-left: 12px; }

/* Bildirim */
.toast { position: fixed; z-index: 30; top: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 12px; color: var(--on-status); font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.toast.ok { background: var(--ok); }
.toast.error { background: var(--danger); }

/* Fiyat gör */
.price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; max-width: 640px; }
.price-card.passive { opacity: .7; }
.pc-name { font-size: 1.3rem; font-weight: 600; }
.pc-price { font-size: 2.6rem; font-weight: 700; color: var(--brand-text); margin: 6px 0 12px; }
.price-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.price-card dt { color: var(--muted); }
.price-card dd { margin: 0; }
.camera { display: none; max-width: 480px; margin-bottom: var(--gap); border-radius: 12px; overflow: hidden; background: #000; }
.camera.on { display: block; }
.camera video { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.match-list { list-style: none; padding: 0; margin: 0; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.match-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.match-list li:last-child { border-bottom: none; }
.match-list li:hover { background: var(--brand-soft); }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--warn-soft); color: var(--ink); border-top: 2px solid var(--warn); padding: 10px 16px; z-index: 40; }
#blazor-error-ui .reload { margin-left: 8px; }

/* --- Tablet ve açık katlanır ekran (~700–1100 px): ikon + kısa yazılı dar menü --- */
@media (max-width: 1100px) and (min-width: 700px) {
  :root { --nav-w: 84px; }
  .sidebar { padding: 8px 6px; gap: 2px; }
  .brand { justify-content: center; padding: 2px 0 10px; }
  .brand-name, .user-name { display: none; }
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 2px; text-align: center; }
  .nav-item .i { width: 24px; height: 24px; }
  .nav-item .lbl { font-size: .68rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 14px; }
}

/* --- Katlanır cihaz iki ekrana yayılmışsa (Window Segments API) içerik ekran ortasındaki ekleme denk gelmesin --- */
@media (horizontal-viewport-segments: 2) {
  .modal { left: env(viewport-segment-left 1 0, 50%); transform: translate(0, -50%); width: min(560px, env(viewport-segment-width 1 0, 560px)); }
}

/* --- Telefon (kapalı katlanır dahil): alt menü, tablo yerine kart görünümü --- */
@media (max-width: 699px) {
  .shell { flex-direction: column; }
  /* Alt menü: 4 ana bölüm + Menü */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; background: var(--panel); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bottom-nav .nav-item { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; font-size: .74rem; text-align: center; min-height: calc(var(--bnav-h) - 8px); }
  .bottom-nav .nav-item .i { width: 24px; height: 24px; }
  .bottom-nav .nav-item.active { background: var(--brand-soft); color: var(--brand-text); }
  /* Menü: tüm bölümler, tema, uygulama, çıkış — alttan açılan kutucuklar */
  .sidebar { display: none; }
  .shell.menu-open .sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; position: fixed; left: 0; right: 0; top: auto; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); width: 100%; height: auto; max-height: 75dvh; z-index: 15; padding: 12px; border-right: none; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
  .shell.menu-open .sidebar .brand, .shell.menu-open .sidebar .nav-spacer { display: none; }
  .shell.menu-open .sidebar .user-name { grid-column: 1 / -1; order: -1; border-top: none; border-bottom: 1px solid var(--line); margin: 0 0 6px; padding: 0 4px 8px; }
  .shell.menu-open .sidebar .nav-item { flex-direction: column; justify-content: center; gap: 4px; padding: 12px 4px; text-align: center; font-size: .85rem; }
  .shell.menu-open .sidebar .nav-item .i { width: 26px; height: 26px; }
  .menu-backdrop { display: block; position: fixed; inset: 0; background: var(--backdrop); z-index: 14; }
  .content { padding: 12px 12px calc(var(--bnav-h) + 16px + env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: 1fr; }
  .modal { top: auto; bottom: 0; transform: translateX(-50%); width: 100vw; border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .toolbar .price { flex: 1 1 40%; }
  .toolbar select { flex: 1 1 45%; }

  .table-wrap { background: transparent; border: none; }
  table.grid thead { display: none; }
  table.grid, .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
  .grid tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; padding: 6px 10px; position: relative; }
  .grid td { border: none; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .grid td::before { content: attr(data-label); color: var(--muted); font-size: .82rem; text-align: left; }
  .grid td.name { font-size: 1.05rem; padding-right: 30px; text-align: left; }
  .grid td.name::before, .grid td.chk::before, .grid td.actions::before { content: none; }
  .grid td.chk { position: absolute; right: 8px; top: 8px; width: auto; padding: 0; }
  .grid td.actions { justify-content: flex-end; padding-top: 6px; }
}
.warn { color: var(--warn); display: block; margin-top: 4px; font-weight: 600; }
.criteria { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 var(--gap); }
.crit { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); cursor: pointer; font-size: .9rem; user-select: none; }
.crit.on { border-color: var(--brand-text); background: var(--brand-soft); }
.crit input { width: 16px; height: 16px; }

/* ================= Satış ekranı ================= */
@media (min-width: 700px) { .content:has(.sale-layout) { padding-bottom: 12px; } }
.sale-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: var(--gap); height: calc(100dvh - 40px); }
.sale-products { min-width: 0; overflow-y: auto; padding-right: 4px; }
.sale-cart { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-height: 0; }
.toolbar.compact { margin-top: -4px; }
.btn.muhtelif { border-style: dashed; border-color: var(--brand-text); color: var(--brand-text); }
.sale-switch { display: none; }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
.tab { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-text); }
.tab.add, .tab.edit { border-style: dashed; color: var(--muted); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; min-height: 92px; display: flex; flex-direction: column; gap: 2px; user-select: none; }
.tile:hover { border-color: var(--brand-text); }
.tile:active { transform: scale(.98); }
.t-name { font-weight: 600; line-height: 1.25; padding-right: 18px; }
.t-meta { font-size: .75rem; color: var(--muted); }
.t-price { margin-top: auto; font-weight: 700; color: var(--brand-text); }
.t-stock { font-size: .75rem; color: var(--muted); }
.t-stock.out { color: var(--danger); }
.star { position: absolute; top: 6px; right: 6px; border: none; background: none; font-size: 1.1rem; color: var(--line); cursor: pointer; }
.star.on { color: var(--star); }

.cust-box { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.cust-box .btn { flex: 1; justify-content: center; }
.cust-info { flex: 1; display: flex; flex-direction: column; cursor: pointer; }
.cust-info small { color: var(--muted); }
.debt { color: var(--danger); }
.credit { color: var(--ok); }

.cart-lines { flex: 1; overflow-y: auto; padding: 4px 10px; }
.center { text-align: center; margin-top: 30px; }
.cline { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "qty price" "act act"; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cl-name { grid-area: name; font-weight: 500; }
.cl-qty { grid-area: qty; display: flex; align-items: center; gap: 4px; }
.cl-qty input { width: 70px; text-align: center; min-height: 34px; padding: 4px; }
.qbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 1.1rem; }
.cl-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; font-size: .9rem; }
.cl-price b { font-size: 1rem; }
.disc { color: var(--ok); }
.cl-act { grid-area: act; display: flex; justify-content: flex-end; gap: 4px; }
.warn-tag { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

.cart-foot { border-top: 1px solid var(--line); padding: 10px; }
.cart-foot .r-row { display: flex; justify-content: space-between; padding: 2px 0; }
.cart-foot .grand { font-size: 1.5rem; font-weight: 700; margin: 6px 0; }
.link { border: none; background: none; color: var(--brand-text); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.link:disabled { color: var(--muted); text-decoration: none; }
.foot-btns { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.btn.big { min-height: 56px; font-size: 1.15rem; font-weight: 700; justify-content: center; }

/* İndirim / ödeme pencereleri */
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.seg button { flex: 1; border: none; background: var(--panel); padding: 10px; cursor: pointer; }
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.quick-values, .cash-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.modal.payment { width: min(560px, calc(100vw - 24px)); }
.pay-total { font-size: 1.8rem; font-weight: 700; color: var(--brand-text); }
.pay-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; }
.pay-row.sub { grid-template-columns: 140px 1fr; padding-top: 0; }
.pay-row.sub .cash-notes { grid-column: 2; margin: 0; }
.pay-row.disabled { opacity: .6; }
.pay-row input { font-size: 1.15rem; min-height: 46px; }
.pay-label { font-weight: 600; }
.pay-row.sub .pay-label { font-weight: 400; color: var(--muted); font-size: .9rem; }
.pay-summary { display: flex; justify-content: space-between; gap: 12px; font-size: 1.15rem; margin: 10px 0; padding: 10px; background: var(--bg); border-radius: 10px; }
.pay-summary .change b, .big-change { color: var(--ok); }
.big-change { font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 10px; }
.check-line { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }

/* Fiş (80 mm) */
.receipt { font-family: ui-monospace, Consolas, monospace; font-size: 12px; max-width: 80mm; margin: 0 auto; background: #fff; color: #000; padding: 10px; border: 1px dashed #bbb; }
.receipt hr { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.r-row { display: flex; justify-content: space-between; gap: 8px; }
.r-center { text-align: center; }
.r-title { font-size: 15px; font-weight: 700; }
.r-total { font-weight: 700; font-size: 14px; }
.r-sub { font-size: 11px; color: #444; }
.r-item { margin-bottom: 4px; }
.r-section { font-weight: 700; margin-bottom: 2px; }
.r-foot { margin-top: 8px; }

@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 80mm; }
  .print-area .receipt { border: none; }
}

/* Satış ekranı: tablet / açık katlanır ekran */
@media (max-width: 1100px) and (min-width: 700px) {
  .sale-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* Satış ekranı: telefon — Ürünler / Sepet arasında geçiş */
@media (max-width: 699px) {
  .sale-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; position: sticky; top: 0; z-index: 6; background: var(--bg); padding-bottom: 4px; }
  .sale-switch button { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 10px; font-weight: 600; }
  .sale-switch button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-text); }
  .sale-layout { display: block; height: auto; }
  .sale-layout.view-urun .sale-cart, .sale-layout.view-sepet .sale-products { display: none; }
  .sale-cart { min-height: calc(100dvh - 190px - var(--bnav-h)); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .pay-row, .pay-row.sub { grid-template-columns: 100px 1fr auto; }
  .pay-row.sub .cash-notes { grid-column: 1 / -1; }
}

/* Çoklu sepet sekmeleri */
.cart-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
.ctab { position: relative; display: flex; flex-direction: column; min-width: 130px; max-width: 200px; padding: 6px 28px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; flex-shrink: 0; text-align: left; }
.ctab.on { border-color: var(--brand-text); box-shadow: inset 0 -3px 0 var(--brand); }
.ctab.empty .ct-sum { font-style: italic; }
.ct-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sum { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ct-close { position: absolute; top: 4px; right: 4px; border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px; }
.ct-close:hover { color: var(--danger); }
.ctab.new { justify-content: center; align-items: center; padding: 6px 14px; border-style: dashed; color: var(--brand-text); font-weight: 600; min-width: auto; }
@media (min-width: 700px) { .sale-layout { height: calc(100dvh - 110px); } }
@media (max-width: 699px) {
  .ctab { min-width: 110px; }
  .ctab.new { font-size: .85rem; }
}
.save-state { align-self: center; margin-left: auto; font-size: .78rem; white-space: nowrap; padding: 0 6px; }
.save-state.ok { color: var(--ok); }
.save-state.busy { color: var(--muted); }
.save-state.err { color: var(--danger); font-weight: 600; }

.stat { border-left: 5px solid var(--brand); }
.stat .value { color: var(--ink); }

/* ================= Siparişler / Cariler / Dashboard ================= */
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.head-actions .search { min-width: 220px; }
.section-title { font-size: 1.15rem; margin: 22px 0 10px; }
.sub-head { font-size: 1.05rem; margin: 14px 0 6px; }
.small-note { font-size: .85rem; margin-top: 8px; }
.back-link { color: var(--accent); text-decoration: none; font-weight: 600; display: inline-block; margin-bottom: 4px; }
.clickable { cursor: pointer; }
.grid tbody tr.clickable:hover td { background: var(--panel-2); }
.grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.grid th.sortable:hover, .grid th.sorted { color: var(--ink); }
.grid tfoot .totals td { font-weight: 700; background: var(--panel-2); border-top: 2px solid var(--line); }
.grid.orders td { white-space: nowrap; }
.compact-grid td, .compact-grid th { padding: 6px 8px; }
.qty-pick { display: inline-flex; gap: 6px; align-items: center; }
.qty-pick input { width: 90px; min-height: 38px; text-align: right; }
.danger-tag { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.modal-foot.wrap { flex-wrap: wrap; }
.inline-seg { margin: 0; flex: 0 1 auto; }
.inline-seg button { padding: 8px 12px; white-space: nowrap; }

/* Tarih aralığı seçici */
.range-picker { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: var(--gap); }
.range-picker .presets { margin: 0; }
.range-picker .presets button { padding: 9px 14px; font-weight: 600; white-space: nowrap; }
.range-picker .custom { display: flex; align-items: center; gap: 6px; }
.range-picker .custom input { min-height: 42px; }

/* Cari detay */
.balance-box { text-align: right; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.balance-box .label { color: var(--muted); font-size: .85rem; }
.balance-box .value { font-size: 1.5rem; font-weight: 800; }
.balance-box.debt { border-color: var(--danger); color: var(--danger); }
.balance-box.credit { border-color: var(--ok); color: var(--ok); }
.stat.debt-stat { border-left-color: var(--danger); }
.stat.credit-stat { border-left-color: var(--ok); }

/* Dashboard */
.live { font-size: .8rem; font-weight: 600; color: var(--muted); vertical-align: middle; margin-left: 8px; }
.live.on { color: var(--ok); }
.hero-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat.hero { border-left-color: var(--accent); }
.stat.hero .value { font-size: 2.2rem; }
.stat.cash { border-left-color: var(--ok); }
.stat .label { line-height: 1.3; }
.pay-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pay-cards .value { font-size: 1.45rem; }
.share-track { height: 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); margin: 6px 0 4px; overflow: hidden; }
.share-fill { height: 100%; background: var(--brand); border-radius: 99px; }
.recent li { cursor: default; }

/* Tek serili çubuk grafik: ince çubuk, 4px yuvarlatılmış uç, 2px boşluk, üzerine gelince değer */
.bar-chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 6px; position: relative; }
.bc-max { position: absolute; top: 8px; left: 12px; font-size: .78rem; color: var(--muted); }
.bc-bars { display: flex; align-items: flex-end; gap: 2px; height: 220px; padding-top: 22px; border-bottom: 1px solid var(--line); }
.bc-col { position: relative; flex: 1 1 0; min-width: 6px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.bc-bar { width: min(100%, 38px); background: var(--brand); border-radius: 4px 4px 0 0; min-height: 0; transition: opacity .1s; }
.bc-bar.neg { background: var(--danger); }
.bc-col:hover .bc-bar, .bc-col:focus .bc-bar { opacity: .8; outline: 2px solid var(--ink); outline-offset: 1px; }
.bc-x { position: absolute; bottom: -22px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.bc-bars { margin-bottom: 22px; }
.bc-tip { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 6px 10px; border-radius: 8px; font-size: .82rem; white-space: nowrap; z-index: 5; pointer-events: none; box-shadow: var(--shadow); }
.bc-col:hover .bc-tip, .bc-col:focus .bc-tip { display: block; bottom: auto; top: 0; }

/* Yazdırma: rapor (A4) ve fiş (80 mm) ayrı sayfa düzeni */
.print-only { display: none; }
.report-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
@media print {
  @page { size: A4; margin: 12mm; }
  .print-area { page: receipt; }
  @page receipt { size: 80mm auto; margin: 0; }
  .print-report, .print-report * { visibility: visible; }
  .print-report { position: absolute; left: 0; top: 0; width: 100%; color: #000; }
  .print-report .table-wrap { border: none; overflow: visible; }
  .print-report .grid th, .print-report .grid td { color: #000 !important; background: #fff !important; padding: 4px 6px; font-size: 10pt; }
  .print-only { display: block; }
  .no-print, .print-report .no-print { display: none !important; }
  /* Fiş penceresi açıkken yalnızca fiş basılsın */
  body:has(.modal .print-area) .print-report, body:has(.modal .print-area) .print-report * { visibility: hidden !important; }
}

@media (max-width: 699px) {
  .sidebar { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sidebar .nav-item { flex: 0 0 auto; min-width: 72px; }
  .range-picker .presets { overflow-x: auto; width: 100%; }
  .range-picker .custom { width: 100%; }
  .range-picker .custom input { flex: 1; }
  .head-actions { width: 100%; }
  .head-actions .search { flex: 1; min-width: 0; }
  .page-head { flex-wrap: wrap; }
  .balance-box { text-align: left; width: 100%; }
  .grid.orders td { white-space: normal; }
  .bc-bars { height: 160px; }
  .stat.hero .value { font-size: 1.8rem; }
}
/* Tutarlar satır kırılmasın; dar kutuda yazı boyu küçülsün */
.stat .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.hero .value { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
@media (max-width: 699px) {
  .hero-cards, .pay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-cards .stat.hero { grid-column: 1 / -1; }
  .hero-cards .stat, .pay-cards .stat { padding: 10px 12px; }
  .hero-cards .value, .pay-cards .value { font-size: 1.2rem; }
  .stat.hero .value { font-size: 1.9rem; }
  .stat .label { font-size: .8rem; }
}

/* Form pencereleri: kutular her zaman pencereye sığar */
.modal.medium { width: min(580px, calc(100vw - 24px)); }
.form-grid > * { min-width: 0; }
.form-grid label input:not([type=checkbox]):not([type=radio]), .form-grid label select { width: 100%; min-width: 0; }
.form-grid label.check { justify-content: flex-start; }
.form-grid label.check input { flex: 0 0 auto; width: 22px; height: 22px; }
.modal-body input:not([type=checkbox]):not([type=radio]), .modal-body select { max-width: 100%; }
.pay-row input { min-width: 0; width: 100%; }
@media (max-width: 699px) {
  .modal.medium { width: 100vw; }
}

/* ================= Aktarım ================= */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--panel); }
.choice:hover { border-color: var(--brand); }
.choice.on { border-color: var(--brand); background: var(--brand-soft); }
.choice input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--brand); }
.choice small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.format-seg { flex-wrap: wrap; }
.format-seg button { flex: 1 1 auto; white-space: nowrap; padding: 10px 14px; font-weight: 600; }
.steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.steps span { padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--line); color: var(--muted); font-weight: 600; font-size: .88rem; }
.steps span.on { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.dropzone { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--brand); border-radius: 14px; padding: 34px 16px; cursor: pointer; background: var(--panel-2); position: relative; }
.dropzone:hover { background: var(--brand-soft); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone small { color: var(--muted); }
.map-grid select { width: 100%; }
.options { margin: 14px 0; }
.foot-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.grid tr.row-error td { background: var(--danger-soft); }
.warn-text { color: var(--warn); }
.accent-tag { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.big-track { height: 14px; margin: 10px 0 12px; }
.check-line input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; }
.panel .check-line { margin-top: 12px; }
.error-panel { background: var(--panel); border: 2px solid var(--danger); border-radius: var(--radius); padding: 22px; max-width: 720px; }
.error-panel h2 { color: var(--danger); margin-bottom: 8px; }
.error-panel p { margin: 0 0 14px; }
.error-panel .btn { margin-right: 8px; }
.cache-panel { margin-top: 18px; }
.cache-panel summary { cursor: pointer; font-weight: 600; }
.cache-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }

/* ================= Giriş ve kullanıcı ================= */
.login-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; background: var(--bg); }
.login-brand { font-size: 2rem; font-weight: 800; color: var(--brand-text); letter-spacing: -.02em; }
.login-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 1.4rem; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); }
.login-form label input:not([type=checkbox]) { width: 100%; color: var(--ink); font-size: 1rem; }
.login-form label.check-line { flex-direction: row; align-items: center; color: var(--ink); }
.login-form .btn.big { width: 100%; justify-content: center; margin-top: 4px; }
.login-form .validation-message, .login-form ul.errors { margin: 0; }
.setup-steps { padding-left: 20px; line-height: 1.6; }
.setup-steps code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .88em; }

/* ================= Yazarkasa ================= */
.kasa-chip { align-self: center; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.kasa-chip.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.kasa-chip.err { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.fiscal-lock { margin: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cart-lines.locked { pointer-events: none; opacity: .65; }
.fiscal-tag { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }

/* ================= Android uygulaması ================= */
/* casher.js, sayfa Casher Android uygulamasında açıldıysa <html>'e "in-android" ekler */
.app-only { display: none !important; }
html.in-android .app-only { display: inline-flex !important; }

/* ================= Görünüm: renk temaları =================
   <html data-accent="..."> ana rengi değiştirir; açık ve koyu temanın ikisi için ayrı tonlar. */
:root[data-accent="blue"]   { --brand: #1d4ed8; --brand-hover: #1e40af; --brand-ink: #ffffff; --brand-soft: #dbe7ff; --brand-text: #1d4ed8; }
:root[data-accent="purple"] { --brand: #6d28d9; --brand-hover: #5b21b6; --brand-ink: #ffffff; --brand-soft: #ede4ff; --brand-text: #6022c4; }
:root[data-accent="orange"] { --brand: #c2410c; --brand-hover: #9a3412; --brand-ink: #ffffff; --brand-soft: #ffe6d5; --brand-text: #b33d0b; }
:root[data-accent="yellow"] { --brand: #f2b705; --brand-hover: #d9a300; --brand-ink: #1f1600; --brand-soft: #fff3c4; --brand-text: #8a6500; }
:root[data-accent="teal"]   { --brand: #0e7490; --brand-hover: #155e75; --brand-ink: #ffffff; --brand-soft: #d5f3f9; --brand-text: #0e6a83; }
:root[data-theme="dark"][data-accent="blue"]   { --brand: #4f8cff; --brand-hover: #6aa0ff; --brand-ink: #04102a; --brand-soft: #16264a; --brand-text: #7fb0ff; }
:root[data-theme="dark"][data-accent="purple"] { --brand: #a37bff; --brand-hover: #b493ff; --brand-ink: #14062e; --brand-soft: #2a1d4d; --brand-text: #bfa2ff; }
:root[data-theme="dark"][data-accent="orange"] { --brand: #ff8a3d; --brand-hover: #ffa060; --brand-ink: #2a1003; --brand-soft: #3d2312; --brand-text: #ffa566; }
:root[data-theme="dark"][data-accent="yellow"] { --brand: #ffcc33; --brand-hover: #ffd65c; --brand-ink: #1f1600; --brand-soft: #3a300f; --brand-text: #ffd75e; }
:root[data-theme="dark"][data-accent="teal"]   { --brand: #2cc6e0; --brand-hover: #4fd3e8; --brand-ink: #03191e; --brand-soft: #0f3540; --brand-text: #5bd8ec; }

.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-pick button, .swatch { font: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font-weight: 600; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { justify-content: flex-start; }
.swatch .dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.sw-green .dot { background: #0a7d5a; } .sw-blue .dot { background: #1d4ed8; } .sw-purple .dot { background: #6d28d9; }
.sw-orange .dot { background: #c2410c; } .sw-yellow .dot { background: #f2b705; } .sw-teal .dot { background: #0e7490; }
:root[data-theme="light"] .mode-light, :root[data-theme="dark"] .mode-dark,
:root[data-accent="green"] .sw-green, :root[data-accent="blue"] .sw-blue, :root[data-accent="purple"] .sw-purple,
:root[data-accent="orange"] .sw-orange, :root[data-accent="yellow"] .sw-yellow, :root[data-accent="teal"] .sw-teal {
  border-color: var(--brand-text); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-text);
}
.modal-head .icon-btn .i { width: 22px; height: 22px; }

/* ================= Arama kutusunun içindeki kamera düğmesi ================= */
.search-wrap { position: relative; flex: 1 1 260px; display: flex; min-width: 0; }
.search-wrap > input { flex: 1; width: 100%; min-width: 0; }
.search-wrap:has(.scan-btn) > input { padding-right: 56px; }
.scan-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 46px; height: calc(100% - 10px); max-height: 44px; border: none; border-radius: 8px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; cursor: pointer; }
.scan-btn.on { background: var(--danger); color: #fff; }
.scan-btn .i { width: 24px; height: 24px; }
.chips .scan-btn { position: static; transform: none; height: 36px; width: 44px; }

/* ================= Satış: dar ekranlarda filtre satırı ve sabit toplam ================= */
@media (max-width: 1100px) {
  .sale-products .toolbar.compact select { flex: 1 1 100%; }
  .sale-products .toolbar.compact .price { flex: 1 1 0; width: auto; min-width: 0; }
  .sale-products .toolbar.compact .muhtelif { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 699px) {
  /* Toplam ve Ödeme düğmeleri alt menünün üstünde sabit kalır */
  .sale-cart .cart-foot { position: sticky; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); z-index: 3; background: var(--panel); border-radius: 0 0 14px 14px; box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, .25); }
}

/* ================= Platformlar ================= */
.small { font-size: .85rem; }
.platform-card { margin-bottom: var(--gap); }
.platform-card .pc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.platform-card .pc-title { font-size: 1.25rem; font-weight: 700; color: var(--brand-text); }
.pc-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; }
.steps { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.file-pick input[type=file] { max-width: 100%; min-height: 0; padding: 8px; }
.result-list { margin-top: 14px; border-top: 1px solid var(--line); }
.result-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.platform-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-tag { background: var(--accent-soft); color: var(--ink); }
.form-grid .platform-checks label.crit { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: .95rem; }
.form-grid .platform-checks label.crit small { font-size: .8rem; }
.sub-title { font-size: 1rem; margin: 16px 0 8px; }
.tag.danger-tag { background: var(--danger); color: #fff; }
.log-detail { background: var(--panel-2); }
.log-detail p { margin: 0 0 6px; }
.fail-list { margin: 4px 0 8px; padding-left: 18px; max-height: 260px; overflow-y: auto; font-size: .9rem; }
.result-row code { font-size: .85em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; word-break: break-all; }

/* ================= Ayarlar ================= */
.settings-panel { max-width: 640px; }
.brand-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 800; font-size: 1.3rem; color: var(--brand-text); flex-wrap: wrap; }
.brand-preview .small { font-weight: 400; color: var(--muted); }
.settings-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(240px, 320px); gap: var(--gap); align-items: start; margin-top: var(--gap); }
.settings-layout .settings-panel { margin-top: 0; }
.receipt-preview { position: sticky; top: 12px; }
.r-pre { white-space: pre-line; }
textarea { font: inherit; background: var(--panel); color: var(--ink); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; resize: vertical; width: 100%; }
.form-grid label textarea { color: var(--ink); font-size: 1rem; }
@media (max-width: 1100px) { .settings-layout { grid-template-columns: 1fr; } .receipt-preview { position: static; } }

/* ================= Tedarikçiler ================= */
.modal.supplier-modal { width: min(960px, calc(100vw - 24px)); }
details.mapping { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
details.mapping summary { cursor: pointer; font-weight: 600; }
.preview-box { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.supplier-search { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel-2); }
.supplier-search .ss-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.offer:first-of-type { border-top: none; }
.offer .o-name { font-weight: 600; }
.offer .o-meta { font-size: .85rem; color: var(--muted); }
.offer .o-price { text-align: right; font-size: .9rem; }
.offer .o-price b { font-size: 1.05rem; color: var(--brand-text); }
.offer .o-act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }