/* ============================================================
   Page: resmi — Resmi Muhasebe (Panel · Faturalar · POS · Stok · KDV)
   TAM EKRAN ALT-UYGULAMA: kendi sidebar + topbar'ı vardır; ERP kabuğu
   `body.resmi-app` ile gizlenir (bkz. pages/resmi.js → shellOn/shellOff).

   ⛔ SABİT HEX/PX YAZILMAZ — her değer `var(--token)`. Tokenlar
   css/core/variables.css (light) + themes.css (dark) içinden gelir; koyu
   tema kendiliğinden döner. Bileşenler (.btn/.badge/.card/.stat-card/
   .data-table/.field/.input/.modal/.action-bar/.page-head) PROJENİN
   mevcut components/*.css'inden gelir — burada YENİDEN TANIMLANMAZ.
   Buradaki iş yalnız kabuk + ekrana özgü yerleşim (grid/flex + tokenlı gap).
   ============================================================ */

/* ── ERP kabuğunu gizle (tam ekran) ───────────────────────── */
body.resmi-app .app-sidebar,
body.resmi-app .app-topbar,
body.resmi-app .app-overlay { display: none !important; }
/* ⚠ Masaüstünde layout.css `.app-shell`'i `auto minmax(0,1fr)` + iki kolonlu
   areas ile kurar. Yalnız areas'ı tek kolona indirmek YETMEZ: kolon şablonu iki
   kolon kaldığı için içerik `auto` genişlikteki İLK kolona düşer ve daralır.
   Kolon şablonu da tek kolona indirilmeli. */
body.resmi-app .app-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "content";
}
body.resmi-app .app-content { padding: 0; max-width: none; }

/* ── Kabuk ────────────────────────────────────────────────── */
.rs-shell {
  display: grid;
  /* minmax(0,1fr): geniş tablo içerik kolonunu şişirip sayfayı yatay taşırmasın. */
  grid-template-columns: var(--rs-sb-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text);
  --rs-sb-w: 244px;
}

/* Sidebar */
.rs-sb {
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  position: sticky; top: 0; height: 100vh;
  box-sizing: border-box;
}
.rs-sb-logo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-5) var(--space-2);
}
.rs-sb-mark {
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: -.02em;
  flex: 0 0 auto;
}
.rs-sb-name { color: var(--sb-text-active); font-size: var(--fs-sm); font-weight: 700; }
.rs-sb-sub  { color: var(--sb-text); font-size: var(--fs-xs); }

.rs-sb-cap {
  color: var(--sb-text); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 0 var(--space-2) var(--space-2) var(--space-2);
}
.rs-nav { display: flex; flex-direction: column; gap: 4px; }
.rs-navbtn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  color: var(--sb-text);
  transition: background var(--transition), color var(--transition);
}
.rs-navbtn:hover { background: var(--sb-hover); color: var(--sb-text-active); }
.rs-navbtn.is-active { background: var(--sb-active); color: var(--sb-text-active); }
.rs-navbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rs-pill {
  min-width: 20px; text-align: center;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .10); color: var(--sb-text);
  font-variant-numeric: tabular-nums;
}
.rs-navbtn.is-active .rs-pill { background: rgba(255, 255, 255, .16); color: var(--sb-text-active); }
/* Dikkat çeken sayaç (negatif stok / ödenecek KDV) — nötr pill'den ayrışır. */
.rs-pill--alert { background: var(--red-soft); color: var(--red); }

/* ERP'ye dönüş — tasarımda yoktu; kendi kabuğunda kullanıcı ERP menüsünü
   göremediği için ZORUNLU çıkış kapısı (yoksa yalnız tarayıcı geri tuşu kalır). */
.rs-sb-back {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-3); margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--sb-text);
  transition: background var(--transition), color var(--transition);
}
.rs-sb-back:hover { background: var(--sb-hover); color: var(--sb-text-active); }
.rs-sb-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rs-sb-card {
  margin-top: auto; display: grid; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--sb-surface); border: 1px solid var(--sb-border);
}
.rs-sb-card-t { color: var(--sb-text); font-size: var(--fs-xs); font-weight: 600; }
.rs-sb-card-v {
  color: var(--sb-text-active); font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rs-sb-card-s { color: var(--sb-text); font-size: var(--fs-xs); }

/* Ana kolon */
.rs-main { display: flex; flex-direction: column; min-width: 0; }
.rs-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.rs-tb-left { display: flex; align-items: center; gap: var(--space-3); }
.rs-tb-cap {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.rs-tb-left .input { min-width: 170px; }
.rs-tb-right { display: flex; align-items: center; gap: var(--space-4); }
.rs-user { display: flex; align-items: center; gap: var(--space-3); }
.rs-user-txt { display: grid; gap: 1px; text-align: right; }
.rs-user-name { font-size: var(--fs-sm); font-weight: 700; }
.rs-user-role { font-size: var(--fs-xs); color: var(--text-faint); }
.rs-user-av {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: var(--navy-tint); color: var(--navy);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700; flex: 0 0 auto;
}

.rs-content { padding: var(--space-8); display: grid; gap: var(--space-6); align-content: start; }

/* ── Ortak yardımcılar ────────────────────────────────────── */
.rs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.rs-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Sayısal her hücre/değer tabular — rakamlar sütunda kaymasın. */
.rs-num, .stat-value, .rs-shell .col-num { font-variant-numeric: tabular-nums; }
/* Dar kolonda "₺" ile rakam alt alta düşmesin; sığmazsa punto küçülür. */
.rs-shell .stat-value { white-space: nowrap; }
@media (max-width: 1200px) { .rs-shell .stat-value { font-size: var(--fs-xl); } }

/* Tablo KENDİ kutusunda yatay kayar; sayfa gövdesi kaymaz. min-width olmadan
   tarayıcı kolonları sıkıştırıp para değerlerini iki satıra böler. */
.rs-tw { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-tw > .data-table { min-width: 900px; }
/* Yan yana iki tablo (KDV oran kırılımı) 4 kolonludur — 900px min-genişlik
   burada gereksiz taşma yapıp "Pay" kolonunu görünmez kılıyordu. */
.rs-2eq .rs-tw > .data-table { min-width: 360px; }
/* Sayısal ve rozet hücreleri BÖLÜNMEZ — "₺ 1.282.900" tek satır kalmalı. */
.rs-tw .data-table td.col-num,
.rs-tw .data-table th.col-num,
.rs-tw .data-table td.col-center { white-space: nowrap; }
.rs-empty {
  text-align: center; padding: var(--space-6);
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55;
}

/* StatCard alt ipucu — DS'te `hint` prop'u var, CSS karşılığı yok. */
.rs-stat-hint { font-size: var(--fs-xs); color: var(--text-faint); }

/* Kart varyantları: rs-flat = padding'siz (tablo/ActionBar taşıyan kart),
   rs-pad6 = README'nin "padding var(--space-6)" dediği içerik kartı. */
.rs-flat { padding: 0; overflow: hidden; }
.rs-pad6 { padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.rs-flat .rs-ab { padding: var(--space-4) var(--space-5); margin-bottom: 0; border-bottom: 1px solid var(--border); }

.rs-h   { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.rs-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.rs-cap {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.rs-big {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* İkili yerleşim — README §5.1: sol geniş kart, sağ kolon */
.rs-2col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rs-2col--kdv { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }   /* §5.5 alt satır */
.rs-2eq  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rs-col  { display: grid; gap: var(--space-5); align-content: start; }

/* Panel — POS yükümlülük kartı */
.rs-poscard { padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; }
.rs-poscard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.rs-progress-wrap { display: grid; gap: var(--space-3); }
.rs-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.rs-progress-top .rs-big { color: var(--red); }
.rs-bar {
  height: 12px; border-radius: var(--radius-full);
  background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden;
}
.rs-bar--sm { height: 8px; margin-top: var(--space-2); }
.rs-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--brand); transition: width .35s ease; }

/* ⚠ README §5.1/4: progress bar ile POS satırları ARASI ve POS satırları ile
   butonlar ARASI 16px boşluk BİLİNÇLİDİR — kaldırma. (rs-poscard'ın grid gap'i
   space-5=20px; buradaki margin'ler README'nin istediği space-4=16px'i ekler.) */
.rs-posrows { display: grid; gap: var(--space-2); margin-top: var(--space-4); margin-bottom: var(--space-4); }
.rs-posrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px 120px;
  align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt);
}
/* Yükümlülük kaynağı satırı (POS cihazı / KDV'li satışlar) — cihaz başına
   "açık" kolonu YOK, yalnız tutar + kaynak rozeti. */
.rs-posrow--3 { grid-template-columns: minmax(0, 1fr) 150px 160px; }
.rs-posrow-id { display: grid; gap: 2px; min-width: 0; }
.rs-posrow-ad { font-size: var(--fs-sm); font-weight: 700; }
.rs-posrow-alt { font-size: var(--fs-xs); color: var(--text-faint); }
.rs-posrow-cell { display: grid; gap: 2px; text-align: right; }
.rs-posrow-v { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-posrow-badge { display: flex; justify-content: flex-end; }
.rs-btnrow { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Etiket–değer satırı (KDV pozisyonu / POS kart özeti / dönem hesabı) */
.rs-kvlist { display: grid; gap: var(--space-2); }
.rs-kv {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rs-kv--tight { padding: 0; border-bottom: none; font-size: var(--fs-sm); }
.rs-kv-l { font-size: var(--fs-sm); color: var(--text-muted); }
.rs-kv-v { font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-kv--tight .rs-kv-v { font-size: var(--fs-sm); }

/* Dikkat gerektiren — solda renk şeridi */
.rs-alerts { display: grid; gap: var(--space-3); }
.rs-alert { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
.rs-alert-bar { border-radius: var(--radius-full); }
.rs-alert-t { font-size: var(--fs-sm); font-weight: 700; }
.rs-alert-d { font-size: var(--fs-xs); color: var(--text-muted); text-wrap: pretty; }

/* Açıklama notu (tasarımda olmayan ama veriyi dürüst anlatan satırlar) */
.rs-note {
  font-size: var(--fs-xs); color: var(--text-muted); text-wrap: pretty;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--yellow-soft); border: 1px solid var(--yellow);
}
.rs-note--flat {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; color: var(--text-faint); padding: var(--space-3) var(--space-5);
}

/* Filtre pill'leri — README §5.2 */
.rs-pillbtn {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 7px 14px; border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.rs-pillbtn:hover { border-color: var(--brand); color: var(--brand); }
.rs-pillbtn.is-active { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand); }
/* ⚠ `.input` global olarak `width:100%` → ActionBar'da tüm satırı kaplar ve
   yanındaki butonu alt satıra iter. Genişlik sabitlenir, esnemesi kapatılır. */
.rs-search { width: 220px; min-width: 220px; flex: 0 0 auto; }
/* Araç şeridi geniş ekranda TEK satır (pill'ler + arama + buton yan yana). */
.rs-flat .rs-ab .action-bar-tools { flex-wrap: nowrap; }
.rs-belge { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.rs-kod { font-family: var(--font-mono); font-size: var(--fs-xs); }
.rs-ad { font-weight: 600; }
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable:hover td { background: var(--row-hover); }

/* POS ekranı — 3'lü kart ızgarası */
.rs-poscards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.rs-poscardx { gap: var(--space-5); }
.rs-posx-ad { font-size: var(--fs-base); font-weight: 700; }

/* Stok uyarı şeridi — README §5.4 */
.rs-warn {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--yellow-soft); border-color: var(--yellow);
}
.rs-warn-bar { align-self: stretch; border-radius: var(--radius-full); background: var(--yellow); }
.rs-warn-t { font-size: var(--fs-sm); font-weight: 700; }
.rs-warn-d { font-size: var(--fs-xs); color: var(--text-muted); text-wrap: pretty; }

/* KDV — aylık pozisyon grafiği (README §5.5) */
.rs-chart {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3); align-items: end; height: 150px;
}
.rs-bar-col { display: grid; gap: var(--space-2); justify-items: center; align-content: end; height: 100%; }
.rs-bar-val { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-bar-rect {
  width: 100%; max-width: 46px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height .35s ease;
}
.rs-bar-ay { font-size: var(--fs-xs); color: var(--text-faint); }
.rs-bar-col.is-secili .rs-bar-ay { color: var(--text); font-weight: 700; }

/* KDV — dönem sonucu bloğu */
.rs-sonuc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius); background: var(--brand-tint);
}
.rs-sonuc-l { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-dark); }
.rs-sonuc-v {
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--brand-dark);
}

/* ══ Fatura kesme modalı (README §6) ══════════════════════ */
.rs-modal { display: grid; gap: var(--space-5); }

/* Bilgi şeridi — solda 4px mavi şerit */
.rs-info {
  display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius); background: var(--blue-soft);
}
.rs-info-bar { border-radius: var(--radius-full); background: var(--blue); }
.rs-info-t { font-size: var(--fs-xs); color: var(--text-muted); text-wrap: pretty; }

.rs-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

/* Müşteri arama — sonuç listesi alanın üstüne açılır (modal içinde taşmasın). */
.rs-party { position: relative; }
.rs-party-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.rs-party-item {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: 9px var(--space-3); font-size: var(--fs-sm);
}
.rs-party-item:hover { background: var(--row-hover); }
.rs-party-vno { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rs-party-bos { padding: 9px var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
/* Seçili cari rozeti */
.rs-party-sel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 9px var(--space-3); border-radius: var(--radius-sm);
  background: var(--brand-tint); border: 1px solid var(--brand);
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-dark);
}
.rs-party-x {
  all: unset; cursor: pointer; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  color: var(--brand-dark); font-size: var(--fs-md); line-height: 1; flex: 0 0 auto;
}
.rs-party-x:hover { background: rgba(0, 0, 0, .07); }
.rs-opt { font-weight: 400; color: var(--text-faint); font-size: var(--fs-xs); }

/* Kalemler bloğu */
.rs-kalemblok {
  display: grid; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
}
.rs-kalem-t { font-size: var(--fs-base); font-weight: 700; }
.rs-modpills { display: flex; gap: var(--space-2); flex-shrink: 0; }
.rs-pillbtn--sm { padding: 6px 14px; font-size: var(--fs-xs); font-weight: 700; }

/* Ürün / miktar / birim fiyat / ekle — README §6 Mod A */
.rs-kalemsatir {
  display: grid; grid-template-columns: minmax(0, 2.4fr) 110px 140px auto;
  gap: var(--space-3); align-items: end;
}
/* ⚠ `.field` global olarak 16px alt boşluk taşır → align-items:end ile hizalanan
   "Kaleme Ekle" butonu inputlardan 16px AŞAĞI kayıyordu. Satır içinde sıfırla. */
.rs-kalemsatir .field { margin-bottom: 0; }
.rs-kalemsatir--serbest { grid-template-columns: minmax(0, 1fr); }

.rs-ipucu { font-size: var(--fs-xs); color: var(--text-faint); text-wrap: pretty; }
/* Padding'siz kart (tablo taşıyan) içindeki ipucu kenara yapışmasın. */
.rs-flat > .rs-ipucu { padding: var(--space-4) var(--space-5); }
.rs-ipucu--hata { color: var(--red); font-weight: 600; }

/* Sepet (eklenen kalemler) */
.rs-sepet { display: grid; gap: var(--space-2); }
.rs-sepet-r {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px 120px 52px 130px 34px;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3); border-radius: var(--radius); background: var(--surface-alt);
}
.rs-sepet-r .rs-num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
/* Sepet içi düzenleme alanları — satıra sığsın diye kompakt, sağa hizalı. */
.rs-sepet-in { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rs-sepet-in .input {
  padding: 6px var(--space-2); font-size: var(--fs-sm);
  text-align: right; font-variant-numeric: tabular-nums; min-width: 0;
}
.rs-birim { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.rs-sil {
  width: 30px; height: 30px; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--red); font-size: var(--fs-md); line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.rs-sil:hover { background: var(--red-soft); border-color: var(--red); }

/* Özet şeridi */
.rs-ozet {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.rs-ozet-h { display: grid; gap: 4px; }
.rs-ozet-v { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-ozet-v[data-kalin] { font-weight: 800; }

.rs-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* Fatura detayındaki e-Fatura eki satırı */
.rs-ekrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--border);
}

@media (max-width: 720px) {
  .rs-form { grid-template-columns: minmax(0, 1fr); }
  .rs-kalemsatir { grid-template-columns: minmax(0, 1fr); }
  .rs-sepet-r { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .rs-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobil kabuk içinde (embed) ───────────────────────────────
   Mobilde sayfa `makeEmbedScreen('resmiApp','resmi',…)` ile mobil kabuğun
   içine gömülür: üstte mobil appbar (GERİ TUŞU) + altta mobil nav yerinde
   kalır. Bu yüzden sayfanın kendi tam-ekran davranışı burada geri alınır:
   100vh yüksekliği ve sticky rayı mobil kabukla çakışırdı; "Panele dön"
   ise gereksizdir — geri tuşu zaten var. */
.m-embed .rs-shell { min-height: 0; }
.m-embed .rs-sb { position: static; height: auto; }
.m-embed .rs-topbar { position: static; }
.m-embed .rs-sb-back { display: none; }
/* Alt nav + FAB içeriğin son satırını örtmesin (mobil kabuk boşluğu embed'e
   inmiyor; sayfa kendi alt payını verir). */
.m-embed .rs-content { padding-bottom: 96px; }

/* ── Dar ekran ────────────────────────────────────────────────
   244px sabit ray telefonda içeriğe yer bırakmaz → sidebar üstte yatay
   şeride döner (sticky kalır), topbar/içerik iç boşlukları küçülür.
   overflow-x:hidden: iOS'ta dikey kaydırılan konteyner hayalet yatay
   kaydırma üretir (bkz. project_mobile_overflow_x). */
@media (max-width: 900px) {
  /* Tek kolon → iki SATIR olur. `auto 1fr` olmadan sidebar satırı esner ve
     koyu şerit sayfanın yarısını kaplar (içerik aşağı itilir). */
  .rs-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rs-sb {
    position: sticky; top: 0; height: auto; z-index: 6;
    border-right: none; border-bottom: 1px solid var(--sb-border);
    padding: var(--space-3);
    overflow-x: auto; overflow-y: hidden;
  }
  .rs-sb-logo { padding: 0 var(--space-2) var(--space-3) var(--space-2); }
  .rs-sb-cap, .rs-sb-card { display: none; }
  .rs-nav { flex-direction: row; gap: var(--space-2); }
  .rs-navbtn { white-space: nowrap; }
  .rs-sb-back { margin-bottom: 0; }
  .rs-topbar { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .rs-content { padding: var(--space-4); gap: var(--space-4); overflow-x: hidden; }
  .rs-stats, .rs-stats--3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .rs-user-txt { display: none; }
  /* Çok kolonlu yerleşimler tek kolona iner; POS satırı ızgarası sarar. */
  .rs-2col, .rs-2col--kdv, .rs-2eq { grid-template-columns: minmax(0, 1fr); }
  .rs-poscards { grid-template-columns: minmax(0, 1fr); }
  .rs-posrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .rs-posrow-badge { grid-column: 2; }
  .rs-poscard, .rs-pad6 { padding: var(--space-4); }
  .rs-search { width: auto; min-width: 0; flex: 1 1 140px; }
  .rs-flat .rs-ab .action-bar-tools { flex-wrap: wrap; }
  .rs-chart { height: 130px; }
}