/* ═══════════════════════════════════════════════════════════════════════
   Breva ERP — tasarım sistemi.

   REVIVA ERP'DEN BİLEREK FARKLI. Reviva: solda sabit kenar çubuğu, arduvaz
   grisi, köşeli, yoğun tablolar, 13 px gövde. Breva ERP: ÜSTTE yatay gezinti,
   krem zemin, yuvarlak (14–20 px) kartlar, 15 px gövde, nefes alan boşluk.
   Aynı işi yapan iki uygulamayı karıştırmamak için fark YÜZEYSEL DEĞİL:
   gezinme modeli ve bilgi yoğunluğu düzeyinde ayrışıyorlar.

   Renkler brevanaturals.com'un marka jetonlarından geliyor; ERP mağazanın
   devamı gibi görünsün diye.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Marka — site style.css ile aynı değerler */
  --marka:        #3f8fd0;
  --marka-koyu:   #2f6fa8;
  --marka-yumusak:#e8f2fc;
  --lacivert:     #06021d;
  --krem:         #fdf8f2;

  /* Zemin */
  --zemin:        #faf7f3;   /* krem'in daha soluk hali — sayfa zemini */
  --kart:         #ffffff;
  --kart-2:       #f7f4f0;

  /* Metin — kontrast site CSS'inde ÖLÇÜLMÜŞ değerlerden alındı.
     --ikincil beyaz üstünde 5,83:1, krem üstünde 5,52:1 (AA eşiği 4,5). */
  --metin:        #1d1d1f;
  --ikincil:      #5f666b;
  --soluk:        #656a6f;

  --cizgi:        #e7e1d9;   /* krem zeminde görünür; #e5e5e5 soluk kalıyordu */
  --cizgi-koyu:   #cfc6ba;

  /* Durum */
  --iyi:          #23a26d;
  --iyi-yumusak:  #e6f5ee;
  --uyari:        #b26a00;
  --uyari-yumusak:#fdf0dc;
  --kotu:         #d63b32;   /* #e4574f beyazda 3,4:1 idi — metin için yetmiyor */
  --kotu-yumusak: #fdecea;

  --r:            14px;
  --r-buyuk:      20px;
  --r-tam:        999px;

  --golge:        0 1px 2px rgba(29,29,31,.04), 0 4px 16px rgba(29,29,31,.06);
  --golge-kalk:   0 2px 6px rgba(29,29,31,.06), 0 12px 32px rgba(29,29,31,.10);

  /* Yuvarlak hatlı bir yığın; Comfortaa yoksa sistem yuvarlakları devreye
     girer. Web fontu YÜKLENMİYOR — bir iş uygulamasında 90 KB'lık font,
     her sayfa açılışında ödenen bir bedel. */
  --yazi: ui-rounded, "SF Pro Rounded", "Segoe UI Variable", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --yazi-sayi: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ust-y: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--yazi);
  /* 15 px — Reviva 13 px. Bu ERP telefondan da kullanılacak. */
  font-size: 15px;
  line-height: 1.55;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--marka-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--yazi-sayi); font-size: .9em; background: var(--kart-2); padding: .1em .35em; border-radius: 6px; }

/* Klavye odağı HER YERDE görünür. Reviva'da outline:none ile kaldırılmış
   yerler vardı; klavyeyle çalışan biri nerede olduğunu göremiyordu. */
:focus-visible {
  outline: 3px solid var(--marka);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Yerleşim (SPEC §2.1): üst şerit · içerik SOLDA · kenar çubuğu SAĞDA ── */
:root { --serit-y: 56px; --kenar-g: 248px; --kenar-dar-g: 60px; }

.serit {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  height: var(--serit-y); padding: 0 clamp(.75rem, 2vw, 1.25rem);
  background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.serit__marka { text-decoration: none; }
.serit__ad { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: var(--lacivert); }
.serit__ad::after { content: "erp"; margin-left: .32rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marka); vertical-align: .42em; }
.serit__ara { position: relative; max-width: 560px; width: 100%; justify-self: center; margin: 0; }
.serit__ara input {
  width: 100%; min-height: 38px; padding: .4rem .9rem; font: inherit; font-size: .93rem;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-tam); background: var(--kart);
}
.serit__ara input:focus { border-color: var(--marka); }
.serit__oneri {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-kalk);
  max-height: 60vh; overflow: auto;
}
.serit__oneri a { display: block; padding: .5rem .8rem; text-decoration: none; color: var(--metin); border-bottom: 1px solid var(--cizgi); }
.serit__oneri a:hover, .serit__oneri a.is-secili { background: var(--kart-2); }
.serit__oneri small { display: block; color: var(--soluk); font-size: .8rem; }
.serit__sag { display: flex; align-items: center; gap: .5rem; }
.serit__can { position: relative; font-size: 1.15rem; text-decoration: none; padding: .2rem .35rem; }
.serit__sayac { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--kotu); color: #fff; font-size: .68rem; font-weight: 700; line-height: 16px; text-align: center; }
.serit__kisi {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--marka-yumusak); color: var(--marka-koyu); font-weight: 800; cursor: pointer; list-style: none;
}
.serit__kisi::-webkit-details-marker { display: none; }
.serit__mobil-ac { display: none; font-size: 1.4rem; cursor: pointer; padding: .2rem .4rem; }

/* Açılır menüler — <details>, JS'siz çalışır. */
.acilir { position: relative; }
.acilir > summary { list-style: none; cursor: pointer; }
.acilir > summary::-webkit-details-marker { display: none; }
.acilir__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-kalk);
  padding: .35rem; display: grid;
}
.acilir__panel a, .acilir__dugme {
  display: block; width: 100%; text-align: left; padding: .5rem .7rem; border: 0; background: none;
  font: inherit; color: var(--metin); text-decoration: none; border-radius: 8px; cursor: pointer;
}
.acilir__panel a:hover, .acilir__dugme:hover { background: var(--kart-2); }
.acilir__baslik { padding: .5rem .7rem .3rem; font-weight: 700; border-bottom: 1px solid var(--cizgi); margin-bottom: .25rem; }

.govde { display: grid; grid-template-columns: minmax(0, 1fr) var(--kenar-g); align-items: start; }
.kenar-dar .govde { grid-template-columns: minmax(0, 1fr) var(--kenar-dar-g); }

.icerik { min-width: 0; padding: clamp(1rem, 2.5vw, 1.6rem) clamp(.75rem, 2.5vw, 1.5rem) 4.5rem; max-width: 1280px; }
.icerik--genis { max-width: none; }

.kirinti { font-size: .84rem; color: var(--soluk); margin-bottom: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.kirinti a { color: var(--ikincil); }

/* Kenar çubuğu — SAĞDA, yapışkan. */
.kenar {
  position: sticky; top: var(--serit-y); height: calc(100dvh - var(--serit-y)); overflow-y: auto;
  padding: .75rem .6rem 4rem; border-left: 1px solid var(--cizgi); background: rgba(255,255,255,.6);
  scrollbar-width: thin;
}
.kenar__ust { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--cizgi); }
.kenar__grup { margin-bottom: .25rem; }
.kenar__grup > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .45rem .6rem; border-radius: 10px; cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk);
}
.kenar__grup > summary::-webkit-details-marker { display: none; }
.kenar__grup > summary::after { content: "▾"; font-size: .7rem; opacity: .6; }
.kenar__grup:not([open]) > summary::after { content: "▸"; }
.kenar__grup > summary:hover { background: var(--kart-2); color: var(--metin); }
.kenar__bag {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .44rem .7rem; border-radius: var(--r-tam); text-decoration: none;
  color: var(--ikincil); font-weight: 600; font-size: .92rem; min-height: 36px;
}
.kenar__bag:hover { background: var(--kart-2); color: var(--metin); text-decoration: none; }
.kenar__bag.is-secili { background: var(--marka-yumusak); color: var(--marka-koyu); }
.kenar__rozet { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--kotu); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 20px; }
.kenar__daralt { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--soluk); padding: .2rem .4rem; border-radius: 8px; }
.kenar__daralt:hover { background: var(--kart-2); }
.kenar-dar .kenar { padding: .75rem .3rem; }
.kenar-dar .kenar__grup > summary { justify-content: center; font-size: .62rem; }
.kenar-dar .kenar__grup > summary::after { display: none; }
.kenar-dar .kenar__bag { justify-content: center; font-size: .72rem; padding: .35rem .2rem; text-align: center; }
.kenar-dar .kenar__daralt { transform: rotate(180deg); }
.kenar-dar .kenar__ust { justify-content: center; }

.mobil-menu-kutu, .mobil-perde, .mobil-bar { display: none; }

/* Grafik stilleri */
.grafik { display: block; max-width: 100%; font-family: var(--yazi); }
.grafik__etiket { font-size: 12px; fill: var(--ikincil); }
.grafik__deger  { font-size: 12px; fill: var(--metin); font-weight: 700; }
.grafik__eksen  { font-size: 10.5px; fill: var(--soluk); }
.grafik__kilavuz { stroke: var(--cizgi); stroke-width: 1; }
.grafik__merkez { font-size: 11px; fill: var(--metin); font-weight: 800; }
.grafik--halka { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.grafik__legend { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.grafik__legend li { display: flex; align-items: center; gap: .45rem; padding: .18rem 0; }
.grafik__nokta { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.grafik-isi { border-collapse: collapse; font-size: .78rem; }
.grafik-isi th { font-weight: 600; color: var(--soluk); padding: .2rem .35rem; }
.grafik-isi td { width: 28px; height: 22px; text-align: center; border: 1px solid #fff; border-radius: 4px; font-variant-numeric: tabular-nums; }

.ara-form { display: flex; gap: .5rem; align-items: center; }
.ara-form .alan__girdi { flex: 1; }
.akis-satir { display: flex; align-items: center; gap: .7rem; }
.akis-simge { width: 28px; text-align: center; flex: none; }
.akis-govde { flex: 1; min-width: 0; }

/* ── Kart ─────────────────────────────────────────────────────────────── */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  box-shadow: var(--golge);
  padding: clamp(.9rem, 2.2vw, 1.3rem);
}
.kart + .kart { margin-top: 1rem; }
.kart__baslik {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-bottom: .85rem;
}
.kart__baslik h2 { margin: 0; }

/* ── Düğme ────────────────────────────────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  /* 40 px yükseklik — parmakla basılabilir alt sınır. */
  min-height: 40px; padding: .5rem 1rem;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-tam);
  background: var(--kart); color: var(--metin);
  font: inherit; font-weight: 650; font-size: .93rem;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .08s;
}
.dugme:hover { background: var(--kart-2); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme--birincil { background: var(--marka); border-color: var(--marka); color: #fff; }
.dugme--birincil:hover { background: var(--marka-koyu); border-color: var(--marka-koyu); }
.dugme--sade { border-color: transparent; background: transparent; color: var(--ikincil); }
.dugme--sade:hover { background: var(--kart-2); color: var(--metin); }
.dugme--blok { width: 100%; }
.dugme--kucuk { min-height: 32px; padding: .28rem .7rem; font-size: .86rem; }

/* ── Form ─────────────────────────────────────────────────────────────── */
.alan { display: block; margin-bottom: .85rem; }
.alan__etiket {
  display: block; margin-bottom: .28rem;
  font-size: .84rem; font-weight: 650; color: var(--ikincil);
}
.alan__girdi, .alan select, .alan textarea {
  width: 100%; min-height: 42px; padding: .5rem .75rem;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r);
  background: var(--kart); color: var(--metin);
  /* 16 px — iOS Safari daha küçük yazıda girdiye odaklanınca sayfayı
     ZORLA yakınlaştırır ve düzen bozulur. */
  font: inherit; font-size: 16px;
}
@media (min-width: 640px) { .alan__girdi, .alan select, .alan textarea { font-size: 15px; } }
.alan__girdi:focus { border-color: var(--marka); }
.alan__ipucu { margin: .28rem 0 0; font-size: .82rem; color: var(--soluk); }

/* ── Bildirim / uyarı ─────────────────────────────────────────────────── */
.bildirimler {
  position: fixed; top: calc(var(--ust-y) + .6rem); right: .8rem; z-index: 60;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(28rem, calc(100vw - 1.6rem));
}
.bildirim {
  padding: .62rem .9rem; border-radius: var(--r);
  background: var(--kart); border: 1px solid var(--cizgi-koyu);
  box-shadow: var(--golge-kalk); font-weight: 600; font-size: .92rem;
}
.bildirim--iyi   { background: var(--iyi-yumusak);   border-color: #b9e3cf; color: #14603f; }
.bildirim--uyari { background: var(--uyari-yumusak); border-color: #f0d6a8; color: #7a4a00; }
.bildirim--kotu  { background: var(--kotu-yumusak);  border-color: #f3c1bc; color: #97241d; }

.uyari {
  padding: .6rem .8rem; margin: 0 0 .9rem;
  background: var(--kotu-yumusak); border: 1px solid #f3c1bc; border-radius: var(--r);
  color: #97241d; font-weight: 600; font-size: .92rem;
}

/* ── Boş / hata durumu ────────────────────────────────────────────────── */
.bos { text-align: center; padding: clamp(2rem, 8vw, 4rem) 1rem; }
.bos__ikon { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.bos h1 { font-size: 1.35rem; }
.bos p { color: var(--ikincil); max-width: 42ch; margin-inline: auto; }
.hata-izi {
  text-align: left; max-width: 60rem; margin: 1rem auto; padding: .8rem;
  background: var(--lacivert); color: #e6e6ea; border-radius: var(--r);
  font-family: var(--yazi-sayi); font-size: .78rem;
  overflow-x: auto; white-space: pre;
}

/* ── Giriş ekranı ─────────────────────────────────────────────────────── */
.giris-sayfa {
  min-height: 100svh; display: grid; place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--marka-yumusak), transparent 60%),
    var(--zemin);
}
.giris-kart {
  width: min(26rem, 100%);
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk); box-shadow: var(--golge-kalk);
  padding: clamp(1.3rem, 5vw, 2rem);
}
.giris-marka { text-align: center; margin-bottom: 1.35rem; }
.giris-marka__ad {
  display: block; font-size: 1.85rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--lacivert);
}
.giris-marka__alt {
  display: block; margin-top: .1rem;
  font-size: .82rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marka);
}
.giris-not { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--soluk); }

/* ── Telefon (<900 px): kenar sağdan kayan panel, altta hızlı bar ────── */
@media (max-width: 900px) {
  .serit { grid-template-columns: auto 1fr auto; gap: .5rem; }
  .serit__ara { max-width: none; }
  .serit__mobil-ac { display: inline-block; }
  .govde { grid-template-columns: minmax(0, 1fr); }
  .kenar {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 320px); height: 100dvh; z-index: 80;
    background: var(--kart); box-shadow: var(--golge-kalk); transform: translateX(105%); transition: transform .2s;
    padding-top: 1rem;
  }
  .mobil-menu-kutu:checked ~ .kenar, .mobil-menu-kutu:checked ~ * .kenar { transform: none; }
  .mobil-perde { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(6,2,29,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .mobil-menu-kutu:checked ~ .mobil-perde { opacity: 1; pointer-events: auto; }
  .kenar__daralt { display: none; }
  .mobil-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--cizgi);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobil-bar__bag { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem 0 .4rem; font-size: .72rem; font-weight: 700; color: var(--ikincil); text-decoration: none; min-height: 52px; }
  .mobil-bar__bag.is-secili { color: var(--marka-koyu); }
  .mobil-bar__simge { font-size: 1.15rem; line-height: 1; }
  .icerik { padding-bottom: 5.5rem; }
}
@media (max-width: 640px) {
  .serit__ad::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Sayfa başlığı ────────────────────────────────────────────────────── */
.sayfa-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.sayfa-bas h1 { margin: 0; }
.sayfa-bas__alt { margin: .2rem 0 0; color: var(--ikincil); font-size: .93rem; }
.sayfa-bas__eylem { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Ölçüm kartları ───────────────────────────────────────────────────── */
.olcumler {
  display: grid; gap: .75rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.olcum {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk); padding: .95rem 1.05rem; box-shadow: var(--golge);
}
.olcum__etiket {
  font-size: .79rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--soluk);
}
.olcum__deger {
  margin-top: .25rem; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.olcum__alt { margin-top: .1rem; font-size: .84rem; color: var(--ikincil); }
.olcum--vurgu { background: linear-gradient(160deg, var(--marka-yumusak), var(--kart) 70%); border-color: #bcdcf5; }

/* ── Tablo ────────────────────────────────────────────────────────────── */
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.tablo { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tablo th {
  text-align: left; padding: .55rem .7rem; white-space: nowrap;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--soluk);
  border-bottom: 1px solid var(--cizgi-koyu);
}
.tablo th a { color: inherit; }
.tablo td { padding: .62rem .7rem; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--kart-2); }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo .daralt { width: 1%; white-space: nowrap; }

/* ── Rozet ────────────────────────────────────────────────────────────── */
.rozet {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .16rem .55rem; border-radius: var(--r-tam);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: var(--kart-2); color: var(--ikincil); border: 1px solid var(--cizgi);
}
.rozet--iyi   { background: var(--iyi-yumusak);   color: #14603f; border-color: #b9e3cf; }
.rozet--uyari { background: var(--uyari-yumusak); color: #7a4a00; border-color: #f0d6a8; }
.rozet--kotu  { background: var(--kotu-yumusak);  color: #97241d; border-color: #f3c1bc; }
.rozet--marka { background: var(--marka-yumusak); color: var(--marka-koyu); border-color: #bcdcf5; }

/* Kanal rozetleri — pazaryerleri tek bakışta ayrışsın. */
.kanal { display:inline-flex; align-items:center; gap:.3rem; font-weight:700; font-size:.82rem; }
.kanal::before { content:""; width:8px; height:8px; border-radius:50%; flex:none; }
.kanal--web::before         { background: var(--marka); }
.kanal--trendyol::before    { background: #f27a1a; }
.kanal--hepsiburada::before { background: #ff6000; }

/* ── Ölçek çubuğu (stok, kanal payı) ─────────────────────────────────── */
.cubuk { height: 8px; border-radius: var(--r-tam); background: var(--kart-2); overflow: hidden; min-width: 60px; }
.cubuk__ic { height: 100%; border-radius: var(--r-tam); background: var(--marka); }
.cubuk__ic--uyari { background: var(--uyari); }
.cubuk__ic--kotu  { background: var(--kotu); }

/* ── Küçük ekran: tabloyu karta çevir ─────────────────────────────────── */
@media (max-width: 640px) {
  .tablo--mobil-kart thead { display: none; }
  .tablo--mobil-kart tbody tr {
    display: block; margin-bottom: .6rem; padding: .7rem .8rem;
    border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kart);
  }
  .tablo--mobil-kart tbody td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .22rem 0; border: 0; text-align: left;
  }
  .tablo--mobil-kart tbody td::before {
    content: attr(data-etiket); font-size: .78rem; font-weight: 700;
    color: var(--soluk); text-transform: uppercase; letter-spacing: .04em;
  }
  .tablo--mobil-kart tbody td.sayi { text-align: right; }
}

.stok-form__satir {
  display: grid; gap: 0 .8rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sayfalama { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .9rem; }

/* ── Süzgeç şeridi ────────────────────────────────────────────────────── */
.suzgec {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cizgi);
}
.suzgec .alan__girdi { width: auto; min-height: 40px; }
.suzgec__ara { flex: 1 1 240px; min-width: 0; }

/* ── Form ızgarası ────────────────────────────────────────────────────── */
.izgara {
  display: grid; gap: 0 .9rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.izgara--genis { grid-column: 1 / -1; }

/* ── İki sütun: ana içerik + yan panel ────────────────────────────────── */
.anl-ikili { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .anl-ikili { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); } }
.mini { padding: .5rem 0; border-bottom: 1px solid var(--cizgi); font-size: .92rem; }
.mini:last-child { border-bottom: 0; padding-bottom: 0; }

.tablo tfoot td { padding: .35rem .7rem; border: 0; color: var(--ikincil); }
.tablo tfoot tr:first-child td { border-top: 1px solid var(--cizgi-koyu); padding-top: .6rem; }
.form-onay { display: flex; gap: .5rem; align-items: flex-start; margin-top: .6rem; font-size: .92rem; }
.form-onay input { margin-top: .25rem; }