/* LB Connect — panel partnera.
   Sade ve islevsel: partner masaustunden girer, is yapar, cikar. */

/*
 * ⛔ `:root` SHADOW ROOT ICINDE ESLESMEZ.
 *
 * `:root` dokumanin <html>'ini secer; shadow root'ta oyle bir dugum
 * yoktur. Olculdu 25.09.2026 (lab, gercek tarayici): gomulu modda
 * `--accent` TANIMSIZ kaldi ve vurgu rengi `currentColor`a (#333)
 * dustu -- panel griye caldi.
 *
 * Degiskenler bu yuzden IKI seciciye birden yaziliyor. Ikisi ayni
 * degerleri tasir; biri degisirse OTEKI DE degismeli.
 */
:root, :host {
  --paper: #F3F2EE;
  --ink: #121211;
  --accent: #7C2D3A;
  --line: #DEDCD5;
  --muted: #6B6862;
  --card: #FFFFFF;
  --ok: #2F6B4F;
  --warn: #8A6410;
  --stop: #8C3A2E;
  /*
   * ⛔ ISKELET RENGI (09.10.2026) -- `app.js`in `SKEL_CSS`iyle AYNI
   *    deger (#ddd8cf). Iki yerde yasiyor cunku `SKEL_CSS` `app.css`
   *    GELMEDEN once ciziliyor (olculdu 04.10: `app.css` gercek
   *    icerikten SONRA hazir). Deger degisirse IKISI birden
   *    degismeli -- bir birim testi ayrismayi yakaliyor.
   */
  --skel: #ddd8cf;

  /*
   * ⛔⛔ ORTAK BOSLUK OLCEGI (Emin, 02.10.2026). Dort deger, dort
   *     ILISKI -- "biraz bosluk" diye elle yazilan her yeni px, bir
   *     sonraki ekranda baska bir sayi olurdu.
   *
   *       --gap-title  baslik -> metin        8px
   *       --gap-field  metin -> alan, alanlar arasi   16px
   *       --gap-card   kart / bolum arasi     24px
   *
   * ⚠ TEK YERDE: yeni bir ekran eklenince bu degiskenler kullanilir,
   *   yeni bir sabit YAZILMAZ -- iki olcek bir gun ayrisir.
   */
  --gap-title: 8px;
  --gap-field: 16px;
  --gap-card: 24px;
}

* { box-sizing: border-box; }

:host {
  /*
   * ⛔ GOMULU MOD: shadow root icinde `html`/`body` YOKTUR -- o
   *    seciciler hicbir seyle eslesmez. `:host` shadow kokunun
   *    kendisidir; zemin, renk ve yazi tipi buradan gelir.
   *
   * Asagidaki `html, body` kurali BAGIMSIZ mod icin duruyor. Ikisi
   * ayni degerleri tasir; degistirilirken IKISI BIRDEN degismeli.
   */
  display: block;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.view { min-height: 100vh; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.spacer { flex: 1; }

/* ---------------- logowanie ---------------- */

#view-login {
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
}

.brand {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--accent);
}
.brand.small { font-size: 17px; margin-right: 12px; }

.login-card .muted { margin: 4px 0 24px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 14px 0 5px;
}

/*
 * ⛔⛔ STIL TIPE DEGIL, "METIN ALANI OLMAYANLARI DISLA"YA BAGLI
 *     (Emin, 04.10.2026 — GORSEL REGRESYON).
 *
 *     Liste `email · password · search · number` idi ve `text` ORADA
 *     YOKTU. 04.10 (b) turunde carpan kutulari virgulu kabul etsin
 *     diye `type="number"` -> `type="text"` yapildi ve kutular
 *     STILINI KAYBETTI: cerceve, dolgu, yukseklik gitti; yanlarindaki
 *     `select`ten alcak, tarayici varsayilani bir alan kaldilar
 *     (`ceny-virgul` ve `basliklar` goruntulerinde goruldu).
 *
 * ⛔ DERS: gorunum kurali, alanin TEKNIK TIPINE degil ROLUNE
 *    baglanmali. Tipi degistirmek bir DAVRANIS karariydi; gorunumu
 *    sessizce dusurmesi, listenin tipe bagli olmasindandi.
 *
 * ⇒ Artik kural TERSTEN yazilir: kutu/radyo/dosya DISINDA her input
 *   metin alanidir. Yeni bir tip (`tel`, `url`, `date`…) eklendiginde
 *   stil KENDILIGINDEN gelir -- liste bir daha eksik kalamaz.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: inherit;
  font: inherit;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primary,
#btn-login {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover:not(:disabled),
#btn-login:hover { filter: brightness(1.08); }

#btn-login { width: 100%; margin-top: 22px; padding: 10px; }

button.link {
  border: none;
  background: none;
  color: var(--muted);
  padding: 8px 0;
  text-decoration: underline;
}
button.link:hover { color: var(--ink); }
#btn-reset { display: block; margin: 10px auto 0; }

/* ---------------- komunikaty ---------------- */

.msg {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 14px;
}
.msg.error { border-color: var(--stop); color: var(--stop); }
.msg.ok { border-color: var(--ok); color: var(--ok); }

/* ---------------- aplikacja ---------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar nav { display: flex; align-items: center; gap: 6px; }

.tab {
  border: none;
  background: none;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 7px;
}
.tab:hover { background: var(--paper); color: var(--ink); }
.tab.is-active { background: var(--paper); color: var(--ink); font-weight: 500; }

.tabpanel { padding: 22px; max-width: 1180px; margin: 0 auto; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.toolbar #q { max-width: 300px; }
.toolbar select { width: auto; }

/* ---------------- tabela ---------------- */

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.grid th, .grid td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.grid thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--paper);
}
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: #FAFAF8; }

.c-check { width: 34px; }
.c-img { width: 52px; }
.c-num { text-align: right; }
.c-act { width: 130px; text-align: right; }
td.c-num { text-align: right; font-variant-numeric: tabular-nums; }

.grid td.c-img img {
  width: 40px; height: 52px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--paper);
  display: block;
}

.pname { font-weight: 500; }
.pref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--muted); }
/*
 * Partnerin KENDI magazasindaki urun ID'si (gereksinim: Emin, 25.09.2026).
 * Referansin ALTINDA, ayri satir: referans LB'nin kimligi, bu PARTNERIN
 * magazasindaki kimlik -- yan yana yazilsa ikisi tek sayi gibi okunurdu.
 */
.shop-id { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

tr.empty td { text-align: center; color: var(--muted); padding: 28px; }
/* ⛔ Hata satirindaki yeniden-deneme dugmesi metnin ALTINDA: yan yana
 *    olsaydi sebep ile eylem tek cumle gibi okunurdu. */
tr.empty td > div { margin-bottom: 8px; }

/* ------------- ILK EKRAN = SON EKRAN (09.10.2026) --------------------
 *
 * ⛔ Iskelet satirlari GERCEK satir yapisinda (9 hucre) ciziliyor;
 *    buradaki is yalnizca "henuz veri yok"u gostermek. Yukseklik
 *    gercek satira yakin tutuldu ki taze veri gelince duzen KAYMASIN
 *    -- zaten duzeltilen kusur tam olarak buydu.
 *
 * ⚠ Animasyon YOK ve bu bilincli: `prefers-reduced-motion` icin ayri
 *   bir kural yazmak gerekmiyor ve surekli calisan bir animasyon
 *   partnerin dikkatini bekleme suresine baglardi.
 */
.skel-row td { padding: 10px 8px; }
.skel-bar {
  display: block; height: 12px; border-radius: 6px;
  background: var(--skel, #ddd8cf);
}
/* Ad hucresi daha genis: satirin agirligi orada. */
.skel-row td:nth-child(2) .skel-bar { height: 14px; }
.skel-row td:first-child .skel-bar { width: 14px; height: 14px; }

/*
 * ⛔ BAYAT DAMGASI. Onbellekten cizilen baslik "taze" gibi
 *    gorunmemeli; metin sunucudan DEGIL panelden gelir cunku bu bir
 *    ISTEMCI durumu (`details.pl` kurali sunucunun urettigi tipli
 *    hatalar icin).
 */
.head-stale {
  display: inline-block; margin-left: 8px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------- status ---------------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.staged { color: var(--muted); }
.badge.live { color: var(--ok); border-color: var(--ok); }
.badge.paused { color: var(--warn); border-color: var(--warn); }
.badge.withdrawn,
.badge.withdrawn_pending { color: var(--stop); border-color: var(--stop); }
.badge.mixed { border-style: dashed; }

.row-busy { opacity: 0.5; pointer-events: none; }

/* ---------------- dziennik ---------------- */

.run-err {
  color: var(--stop);
  font-size: 13px;
  display: block;
  max-width: 520px;
  overflow-wrap: anywhere;
}
/*
 * §14 Presta ac/kapa esitlemesi notu. HATA DEGIL -- bu yuzden `--stop`
 * degil normal metin rengi: partner "urunumu Presta'dan actim" satirini
 * bir arizayla karistirmasin.
 */
.run-note {
  color: var(--ink);
  font-size: 13px;
  display: block;
  max-width: 520px;
  overflow-wrap: anywhere;
}
/*
 * Stok durumu TEK SATIR (26.09.2026). Kutu kaldirildi; satir hem
 * zamani hem dugmeyi tasiyor.
 */
.stock-status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 13px; }
.stock-status .linkish {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-size: 13px; cursor: pointer; text-decoration: underline;
}
/* ⛔ 2 saatten eskiyse UYARI rengi -- yoklama sessizce durmus olabilir. */
#stock-last.stale { color: var(--warn); font-weight: 600; }

/* Satir basina hata: toplu islemde hangi urunun dustugu gorunsun. */
.row-error { background: color-mix(in srgb, var(--stop) 6%, transparent); }
.row-err { display: block; font-size: 12px; color: var(--stop); margin-top: 2px; }

/*
 * ⛔ MONOSPACE KALDIRILDI (Emin, 26.09.2026). Sutun ham `type`
 *    degerini ("stockPoll") gosterdigi surece monospace mantikliydi --
 *    teknik bir kimlikti. Artik Lehce bir ETIKET gosteriyor
 *    ("Aktualizacja stanów"); monospace onu kod gibi gosteriyordu.
 */
.run-type { font-size: 13px; }
.run-dry { color: var(--muted); font-size: 12px; }

/* ---------------- stan magazynowy ---------------- */

.stock { font-size: 13px; }
.stock .sz { white-space: nowrap; }
.stock .sep { color: var(--line); margin: 0 5px; }

/* Bedeni tukenmis: soluk + ustu cizili. Partner bir bakista gorsun. */
.stock .zero {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.stock .none { color: var(--muted); }

.note {
  font-size: 13px;
  margin: 0 0 var(--gap-field);
  max-width: 62ch;
}

/* Hata referans kodu -- partner okuyup soyleyecek, okunakli olmali. */
.errref {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* ---------------- ustawienia ---------------- */

/* ⛔ Olcek: kart ici dolgu ve kartlar arasi bosluk --gap-card'tan. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--gap-card);
  margin-bottom: var(--gap-card);
  max-width: 760px;
}
.card h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--gap-title);
}
.card h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: var(--gap-card) 0 var(--gap-title);
}

.fields { display: flex; gap: var(--gap-field); flex-wrap: wrap; margin-top: var(--gap-field); }
.field { flex: 1 1 160px; }
.field.wide { max-width: 340px; }
.field label { margin-top: 0; }
.field select, .field input { width: 100%; }

.hint { font-size: 12px; margin: var(--gap-field) 0 0; }

/* Onay kutulari: tiklama alani etiketin tamami olsun. */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

.actions { display: flex; justify-content: flex-end; gap: 10px; max-width: 760px; margin-bottom: var(--gap-card); }
.actions.left { justify-content: flex-start; margin: var(--gap-field) 0 0; }

#settings-msg, #reprice-msg { max-width: 760px; }

/* Onizleme tablosu: alis -> raf. */
.grid.preview { margin-top: 8px; }
.grid.preview td, .grid.preview th { padding: 8px 12px; }
.c-arrow { width: 28px; text-align: center; color: var(--muted); }
td.sell { font-weight: 600; }

/* Fiyat yazma bolumu: gorsel olarak AYRI dursun -- buradaki dugme
   partnerin magazasindaki 800 urunu degistirir. */
.danger-zone { border-color: #D8C9AE; background: #FCFAF5; }
.plan-text {
  font-size: 14px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--warn);
  color: var(--warn);
  background: #FFFDF7;
}

/* Carpan birimi: %, zł ya da x -- rakamin yaninda dursun. */
.field { position: relative; }
/*
 * ⛔ BIRIM GIRDININ ICINDE DURUR — ve bu `bottom` ile DEGIL `top` ile
 *    olculur (duzeltildi 04.10.2026).
 *
 *    `bottom: 9px` alanin ALTINA yaslaniyordu; altina ikinci bir satir
 *    ("= ×3,00") eklenince birim ONUNLA BIRLIKTE asagi kaydi ve
 *    kutunun DISINA cikti (galeride goruldu). Konum girdinin kendi
 *    yuksekligine baglanmali, alanin toplam yuksekligine degil.
 */
.unit {
  position: absolute;
  right: 11px;
  top: 32px;
  font-size: 13px;
  pointer-events: none;
}
#set-markup-value,
#wiz-markup-value { padding-right: 42px; }

/* "= ×3,00" karsiligi girdinin ALTINDA, kendi satirinda. */
.eq { display: block; margin: 4px 0 0; }

/* ================= DAR EKRAN ================= */

/**
 * Tablo SAYFAYI tasirmaz, KENDI icinde kayar.
 *
 * overflow-x dogrudan <table> uzerinde guvenilir calismaz; kaydirma
 * bir sarmalayiciya verilir. Cerceve ve kose yuvarlamasi da oraya
 * tasindi -- tabloda kalsaydi kaydirirken cerceve icerikle birlikte
 * kayardi.
 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.grid { border: none; border-radius: 0; overflow: visible; }

/* Sutunlar ezilmesin: bu genisligin altinda tablo KAYAR, sikismaz.
   Onizleme tablolari (4 sutun) dar ekrana zaten sigar. */
#tab-products .grid { min-width: 700px; }
#tab-runs .grid { min-width: 660px; }

@media (max-width: 760px) {
  .tabpanel { padding: 14px; }

  /* Topbar iki satira duser: marka ustte, gezinme altta.
     Sekmeler sigmazsa YATAY KAYAR -- "Wyloguj" asla kaybolmaz. */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .topbar nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab, .topbar nav button { white-space: nowrap; flex: 0 0 auto; }

  /* Arama kutusu tam genislik; suzgec ve toplu dugmeler altina gecer. */
  .toolbar { flex-wrap: wrap; }
  .toolbar #q { max-width: none; flex: 1 1 100%; }
  .toolbar select { flex: 1 1 auto; }
  .spacer { display: none; }
  #sel-count { flex: 1 1 100%; }

  .card { padding: 16px 14px; }
  .fields .field { flex: 1 1 100%; }
  .field.wide { max-width: none; }

  /* Dugmeler tam genislik ve daha yuksek: parmakla basiliyor. */
  .actions { flex-direction: column; align-items: stretch; }
  .actions button { width: 100%; }
  button { padding: 11px 16px; }

  .note, .hint { max-width: none; }
}

/* Cok dar (kucuk telefon): baslik ve tenant adi alt alta. */
@media (max-width: 420px) {
  .topbar > div { display: flex; flex-direction: column; gap: 2px; }
  .brand.small { margin-right: 0; }
  .login-card { padding: 24px 18px; }
}

/* Satis fiyati: partnerin kendi rafindaki rakam -- goz once ona gitsin. */
td.sell { font-weight: 600; }
/* Carpan ayarlanmamis: "—" soluk dursun, bir eksigi isaret ediyor. */
td.sell.unset { font-weight: 400; color: var(--muted); }

/* ================= GENISLEYEN SATIR ================= */

/* Ad hucresi ayni zamanda acma dugmesi: cerceve yok, hizalama tabloya
   uysun. Odak halkasi KORUNUR -- klavyeyle gezen biri nerede oldugunu
   gormeli. */
/*
 * ⛔ IKI SATIR, IZGARA ILE -- `flex` DEGIL (Emin, 26.09.2026).
 *
 *    Onceki hal `display: flex` idi: ucgen · ad · beden sayisi AYNI
 *    satirda yan yanaydi ve beden etiketinin yatay yeri AD UZUNLUGUNA
 *    gore kayiyordu. Uzun adli bir urunde sagda, kisa adlida solda
 *    duruyordu; goz sutun boyunca onu ARAMAK zorunda kaliyordu.
 *
 *    Izgara iki satir tanimliyor ve etiket HER ZAMAN ikinci satirda,
 *    adin tam altinda -- ad ne kadar uzun olursa olsun.
 *
 * ⚠ `flex` ile de cozulebilirdi (`flex-wrap` + ad'a `flex-basis: 100%`)
 *   ama o, sarmanin GENISLIGE bagli olmasi demekti: dar sutunda iki
 *   satir, genis sutunda tek satir. Izgara bunu SABITLER -- istenen
 *   tam olarak "sabitlensin"di.
 */
.disclosure {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: start;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.disclosure:hover:not(:disabled) { border: none; }
.disclosure .pname { font-weight: 500; grid-area: 1 / 2; }
/* Beden etiketi: 2. satir, adin ALTINDA (ucgen sutununu atlar). */
.disclosure .vcount { grid-area: 2 / 2; }

/* Ucgen: acikken 90 derece doner. */
.caret {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.12s ease;
  /*
   * ⚠ Izgarada `flex: 0 0 auto` etkisiz; ucgen 1. satirda kalir ve
   *   adin ilk satiriyla hizalanmasi icin kucuk bir ust bosluk alir
   *   (11px ucgen, 14px ad -- optik hizalama).
   */
  grid-area: 1 / 1;
  margin-top: 2px;
}
tr.is-open .caret { transform: rotate(90deg); }

.vcount {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Acik urunun basligi ve detayi ayni zeminde -- goz ikisini
   birbirine baglasin. */
tr.is-open { background: #FAFAF8; }
tr.is-open > td { border-bottom-color: transparent; }

.vrow > td { padding: 0 12px 12px 12px; background: #FAFAF8; }

/* Ic tablo: bedenler. Dis tablonun cizgilerini TEKRARLAMAZ --
   ayni kalinlikta ikinci bir izgara gorsel gurultu olurdu. */
.vgrid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.vgrid th, .vgrid td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.vgrid thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--paper);
}
.vgrid tbody tr:last-child td { border-bottom: none; }
.vgrid td.c-num, .vgrid th.c-num { text-align: right; font-variant-numeric: tabular-nums; }

.vsize { font-weight: 500; white-space: nowrap; }
.vean { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }

/* Tukenmis beden: soluk + ustu cizili (gorsel) + sr-only metin
   (ekran okuyucu). Ustu cizili olmak tek basina bir sey SOYLEMEZ. */
.vgrid td.zero { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Toplam stok sifir: satirda da soluk dursun. */
td.stock.zero { color: var(--muted); }

/* Yalnizca ekran okuyucu icin. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  /* Ic tabloda EAN cok yer kapliyor; dar ekranda dusurulur --
     bedeni ve stogu gormek daha onemli. */
  .vgrid .vean { display: none; }
}

/* ================= SUZGECLER ================= */

.toolbar.second { margin-top: -8px; margin-bottom: 12px; }
.rangelbl { margin: 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.range { width: 96px; }
.rangesep { color: var(--muted); }

/* Etiket cipleri: tenant'in KENDI urunlerinden. Cok olabilir --
   sarilir, sayfayi tasirmaz. */
.tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.chip {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
.chip:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
/* Secili cip: yalnizca RENKLE degil, dolgu ve kalinlikla da ayrilir. */
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
.chip.on:hover { border-color: var(--accent); filter: brightness(1.08); }

/* Aktif suzgec seridi: ne suzuldugu her an gorunur. */
.activefilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
#activelist { display: flex; flex-wrap: wrap; gap: 6px; }
.afchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: var(--paper);
  color: var(--ink);
}
.afchip:hover:not(:disabled) { border-style: solid; border-color: var(--stop); color: var(--stop); }
.afchip .x { font-size: 14px; line-height: 1; color: var(--muted); }
.afchip:hover .x { color: var(--stop); }
#btn-clear-filters { padding: 0; }

@media (max-width: 760px) {
  /* Dar ekranda suzgecler alt alta; aralik kutulari yan yana kalir. */
  .toolbar select, .toolbar.second { flex: 1 1 100%; }
  .toolbar.second { display: flex; align-items: center; gap: 8px; }
  .range { flex: 1 1 0; width: auto; }
  .rangelbl { flex: 1 1 100%; }
  /* Etiket seridi cok yer kaplamasin: kaydirilabilir tek satir. */
  .tagbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .chip { flex: 0 0 auto; }
}

/* ---------------- marka ---------------- */

/*
  ⛔ `logo-topbar.png` KULLANILMADI ve sebebi olculdu (25.09.2026):
     o dosya BEYAZ murekkeplidir, ust bar ise `--card` (#FFFFFF).
     Beyaz zemine beyaz logo = gorunmez. Koyu bir bar gelirse dogru
     dosya odur; bugunku tasarimda degil.

  Her iki yerde de `logo-login.png` (siyah, 360x72) kullaniliyor,
  yalnizca yuksekligi farkli. Tek dosya iki olcek: kaynak 360px
  genislikte oldugu icin 20px yukseklikte de keskin kaliyor.
*/
.logo-login {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 0 2px;
}

.logo-topbar {
  display: block;
  height: 20px;
  width: auto;
  margin-right: 12px;
}

/* Ust bardaki logo + tenant adi ayni satirda hizali dursun. */
.topbar > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 720px) {
  .logo-login { height: 28px; }
  .logo-topbar { height: 18px; margin-right: 8px; }
}

/* ---------------- alt sekmeler (durum = konum) ---------------- */

/*
  ⛔ 25.09.2026: durum bir acilir kutudan CIKARILIP sekmeye tasindi.
     Arastirilan alti sistemin ortak dersi: urun hangi asamadaysa o
     asamanin ekraninda durur.
*/
.subtabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.subtab {
  border: none;
  background: none;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.subtab:hover { background: var(--paper); color: var(--ink); }
.subtab.is-active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

/* Sayi rozeti: sekmenin ADINDAN sonra, soluk -- gezinmeyi bozmasin. */
.subtab .cnt {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.subtab.is-active .cnt { background: var(--accent); color: #fff; }
.subtab .cnt:empty { display: none; }

.subhint {
  margin: -4px 0 14px;
  font-size: 14px;
}

/*
 * ⛔ RAF OKUMA DURUMU -- bir HATA degil bir DURUM, bu yuzden hata
 *    rengi KULLANILMAZ. `syncRuns` notlarinda (`.run-note`) verilen
 *    kararla ayni: tasarlanmis bir durumu kirmiziya boyamak, partnere
 *    bir arizanin oldugunu dusundururdu.
 */
.shelf-state {
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

/*
 * ⛔ BEKLEYEN FIYAT KARTI -- DIKKAT CEKER ama HATA RENGI DEGIL.
 *    Bekleyen bir degisiklik bir ariza degil bir KARAR isteği;
 *    kirmiziya boyamak partnere bir sey bozuldu sandirirdi
 *    (`.run-note` ve `.shelf-state` ile ayni gerekce).
 */
.pending-prices {
  border-left: 3px solid var(--bordo, #7b2d3b);
  background: #fdf8f4;
}
.pending-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 6px;
}
.pending-head strong { flex: 1 1 auto; }
.pending-tbl { margin-top: 10px; width: 100%; }
/*
 * ⛔ 768'DE DE EYLEM DUGMESI GORUNUR (D2 kurali, 03.10): tablo kendi
 *    sarmalayicisinda kayar, dugme ekran disinda kalmaz.
 */
#pending-list { overflow-x: auto; }

/* ---------------- katlanan suzgecler ---------------- */

.filters { position: relative; }
.filters > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters[open] > summary,
.filters.has-active > summary { color: var(--ink); border-color: var(--muted); }

.filters > summary .cnt {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
}
.filters > summary .cnt:empty { display: none; }

.filters-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.filters-body .tagbar { margin: 0; width: 100%; }
.rangewrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- toplu islem seridi ---------------- */

/*
  ⛔ YALNIZCA SECIM VARKEN. Pasif dugme birakmak, satirdaki dugmeyle
     ayni adi tasiyan ama calismayan bir ikiz uretiyordu.
*/
.bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
}
.bulkbar #sel-count { font-weight: 500; }

@media (max-width: 720px) {
  .subtab { padding: 8px 10px; font-size: 14px; }
  .bulkbar { flex-wrap: wrap; }
}

/* ================= GOMULU MOD ==================================== */
/*
 * ⛔ TEK ISARET, SIFIR YENI `if (MODE)`.
 *
 * `app.js` gomulu modda sarmalayiciya `.lb-embed` sinifini koyuyor
 * (mod tespitinin uc yerinden biri). Asagisi tamamen gorunum kurali --
 * yeni bir gomulu-mod farki gerekirse yine BURAYA yazilir, koda degil.
 *
 * Bagimsiz modda sarmalayici yok, yani bu kurallarin hicbiri eslesmez.
 */

/*
 * ⛔ BU KURAL KALDIRILDI 26.09.2026 -- ve kaldirilma sebebi OLCULDU.
 *
 *    Eskiden: "logo iki kez cikiyordu, host sayfadaki kalir, panelinki
 *    gizlenir." Karar mantikliydi ama SONUCU yanlisti:
 *
 *      satir 1 : modulun KENDI logosu  (`shell-<v>.tpl`, HOST DOM)
 *      satir 2 : panelin ust bari      (magaza adi + sekmeler, SHADOW ROOT)
 *
 *    Ikisi AYRI DOM AGACINDA ⇒ hicbir CSS onlari ayni satira getiremez.
 *    Emin'in gordugu "iki satir" tam olarak buydu; panelin kendi
 *    basligi zaten TEK SATIRDI (olculdu: merkez farki 0).
 *
 * ⇒ Artik PANELIN logosu gorunur ve `app.js` HOST'takini gizler
 *   (`gizleHostLogosu`). Boylece logo + magaza adi + sekmeler AYNI
 *   satirda, TEK DOM agacinda.
 *
 * ⚠ Modul surumu DEGISMEDI: sablon hala kendi logosunu ciziyor, onu
 *   calisma aninda gizliyoruz. Ricca'da modul degistirmek guvenli mod
 *   geregi Emin'in onayina bagli -- bu cozum onu GEREKTIRMIYOR.
 *
 * OLCULDU (_lab Presta admin, gercek konteyner):
 *   Presta karti 1670 px · panel 1628 px
 *   konteyner 1628 -> 700 px arasi HEPSINDE tek satir, merkez farki 0
 *   panel logosu 170x34 · nav 431 px
 */

/*
 * "Wyloguj" gomulu modda ANLAMSIZ: partner Presta admin'inde oturum
 * acmis, panel oturumu ondan tureniyor. Basmak panel oturumunu kapatir,
 * sayfa yenilenince modul yeniden giris yapar -- yani hicbir sey olmaz
 * ama partner "cikti" saniyor. Gorunmeyen dugme yaniltmayan dugmedir.
 *
 * ⚠ Bagimsiz panelde DURUYOR: orada gercek bir cikis eylemi.
 */
.lb-embed #btn-logout { display: none; }

/*
 * ⛔ TENANT ADI KALIYOR -- ve bu bilincli bir karsi oneri.
 *
 * Logo gidince ust bar "magaza adi | sekmeler" oluyor; zaten en temiz
 * duzen bu. Gizlemenin bedeli olculebilir bir korumayi kaybetmek:
 * ad, "bu panel HANGI tenant'in" sorusunun TEK gorunur cevabi.
 * Takma ad / sessiz ikiz kapisi (409) tam bu hatayi onlemek icin var;
 * yanlis tenant'a baglanmis bir modulun tek belirtisi burada yanlis
 * bir isim gormek olurdu.
 *
 * `ready` bir tenant'ta Konfiguracja sekmesi gizli oldugu icin magaza
 * adi baska hicbir yerde gorunmuyor -- ölçüldü.
 *
 * Gurultu itirazi hakli, o yuzden kuculuyor: bilgi kaliyor, agirligi
 * gidiyor.
 */
.lb-embed #tenant-name { font-size: 12px; }

/*
 * Host sayfa logoyu ve baslik alanini zaten ciziyor; panelin ust bari
 * onun hemen altinda. Ikinci bir kalin cerceve yerine daha dar bir
 * bant: yukseklik kazanci, urun listesi yukari cikar.
 */
.lb-embed .topbar { padding: 10px 16px; }

/* ================= STOK TAZELEME ================= */
/*
 * Kutu `Produkty` > `W sprzedazy` alt sekmesinde duruyor; islemin
 * kapsami (`state === "live"`) ile ekranin kapsami birebir ayni.
 */
.stock-refresh { margin: 0 0 14px; }
.stock-refresh .note { margin-top: 0; }

/*
 * Tukenen deger goze carpsin: partnerin onay ekraninda gorecegi en
 * onemli satir "rafa 0 yazilacak" olanidir -- stok 0 demek urunun
 * satilamaz hale gelmesi demek ve bu bilinerek onaylanmali.
 */
.grid.preview td.c-num.out { color: var(--stop); font-weight: 600; }

/*
 * ⛔ ON-ONERI GORSEL OLARAK ISARETLENIR (KATMAN 2, 26.09.2026).
 *
 *    Partner hangi satirin KENDI karari, hangisinin BIZIM tahminimiz
 *    oldugunu ayirt edebilmeli. Ayirt edemezse onerileri kendi secimi
 *    sanip onaylar -- yani "secilmemis bir degeri secilmis gibi
 *    gostermek" tuzaginin arayuz yuzu.
 */
#cat-table select.suggested {
  border-color: var(--accent, #6b46c1);
  background: color-mix(in srgb, var(--accent, #6b46c1) 8%, transparent);
}
#cat-table td:first-child { font-weight: 600; }
#cat-table select { width: 100%; max-width: 30rem; }
#cat-load-hint { margin-left: .5rem; }

/* KATMAN 3 -- urun bazinda ek kategori */
.extra-cats { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.extra-cats label { display: block; font-weight: 600; margin-bottom: .25rem; }
.extra-cats select { width: 100%; max-width: 30rem; }

/*
 * ⛔ KAYDEDILMEMIS DEGISIKLIK -- kart duzeyinde (karar: Emin, 26.09.2026).
 *    Tek bir global uyari hangi karta ait oldugunu soylemezdi.
 */
.dirty-flag {
  font-size: 12px; font-weight: 500; margin-left: .5rem;
  padding: .1rem .4rem; border-radius: 4px;
  color: var(--warn-ink, #8a5300);
  background: var(--warn-bg, #fff4e0);
  border: 1px solid var(--warn-line, #f0d0a0);
}
.card.is-dirty { border-left: 3px solid var(--warn-line, #f0d0a0); }
/* Guvenli mod notu: esleme kaydedilebilir ama UYGULANMAZ. */
/*
 * ⛔ CERCEVELI KUTU YALNIZCA GERCEK UYARI ICIN (Emin, 02.10.2026):
 *    bilgi notlari duz metin kalir. Her seyi cerceveye almak,
 *    uyarinin kendisini gorunmez kilar.
 *
 * ⛔ ICERDE VE ALTINDA YETERLI BOSLUK: serit metne yapisirsa
 *    okunmuyor (02.10 gorsel denetimi).
 */
.note.warn {
  color: var(--warn-ink, #8a5300);
  background: var(--warn-bg, #fff4e0);
  border: 1px solid var(--warn-line, #f0d0a0);
  border-radius: 6px;
  padding: var(--gap-title) 12px;
  margin-bottom: var(--gap-field);
}


/* ⛔ REFERENCJA hucresi: iki satir, etiket yok (Emin, 26.09.2026) */
.pref { line-height: 1.35; }
.pref .ref-lb { display: block; font-variant-numeric: tabular-nums; }
.pref .shop-id {
  display: block;
  font-size: 12px;
  /* Daha ACIK renk: ikincil bilgi oldugu RENKTEN anlasilsin, etiketten degil. */
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ⛔ RAFTA GORUNEN STOK (Emin, 26.09.2026) -- ikincil, daha kucuk */
.shelf-stock {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Raf 0 iken RENK uyarir: partnerin gormesi gereken tek durum bu. */
.shelf-stock.zero { color: var(--danger, #b42318); font-weight: 600; }

/*
 * ⛔ SEKME RENKLERI AYRISIR (Emin, 26.09.2026).
 *
 *    "Zamknięte (Ty)" ile "Zamknięte (LB)" ayni ada sahip iki durum;
 *    yalnizca parantez icindeki harf ayiriyordu. Renk, hangisinin
 *    partnerin kendi karari oldugunu bir bakista soyluyor.
 *
 * ⚠ RENK TEK AYIRT EDICI DEGIL: metin zaten "(Ty)" / "(LB)" tasiyor.
 *   Renk korlugunde bilgi KAYBOLMAZ.
 */
.subtab-mine.is-active { border-color: var(--warn-line, #f0d0a0); }
.subtab-mine .cnt { background: var(--warn-bg, #fff4e0); color: var(--warn-ink, #8a5300); }
.subtab-lb.is-active { border-color: var(--line); }
.subtab-lb .cnt { background: var(--bg-subtle, #f1f1f4); color: var(--muted); }

/*
 * ⛔ FILTRE PANELI TEK BLOK, HIZA BOZULMAZ (Emin, 26.09.2026).
 *
 *    `.filters-body` AKIS ICINDE aciliyordu: `<details>` buyuyunce
 *    esnek araç çubugu satirini yeniden boyutlandiriyor ve arama/
 *    siralama alanlarinin hizasi KOPUYORDU.
 *
 * ⇒ Acilan panel artik bir ACILIR KUTU: `position: absolute`, satirin
 *   YUKSEKLIGINI DEGISTIRMEZ.
 */
.filters { align-self: center; }
.filters-body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: min(560px, 88vw);
  background: var(--card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
/* Dar ekranda sola tasmasin. */
@media (max-width: 560px) {
  .filters-body { left: auto; right: 0; }
}
/* Toolbar satiri TEK SATIR kalsin; tasarsa yatay kaydirilir. */
.toolbar { flex-wrap: nowrap; overflow: visible; }
.toolbar > * { flex: 0 0 auto; }
.toolbar #q { flex: 1 1 240px; min-width: 140px; }

/* ==================================================================
 * ⛔ BASLIK TEK SATIR -- IKINCI DENEME (Emin, 26.09.2026)
 *
 *    Ilk denemem yetmedi ve sebebi OLCULDU: dar ekran media query'si
 *
 *        @media (max-width: 420px) { .topbar > div { flex-direction: column } }
 *
 *    `.topbar-brand`i de yakaliyor (o da `.topbar > div`) ⇒ logo ve
 *    magaza adi ALT ALTA duşuyor; `.topbar nav { width: 100% }` de
 *    sekmeleri ikinci satira atiyor. Sonuc: logo ustte, ad + sekmeler
 *    altta -- Emin'in gordugu tam bu.
 *
 * ⇒ Marka bloğu HER ZAMAN yatay: `.topbar > .topbar-brand` secicisi
 *   `.topbar > div`i SINIF ustunlugu ile yener (`!important` YOK).
 * ================================================================== */
.topbar > .topbar-brand {
  display: flex;
  flex-direction: row;          /* dar ekranda da YATAY */
  align-items: center;
  gap: 12px;
  min-width: 0;                 /* uzun magaza adi satiri tasirmasin */
  flex: 1 1 auto;
}
/*
 * Logo YUKSEKLIKLE sinirlanir, genislik oranla gelir. `width/height`
 * oznitelikleri HTML'de duruyor (yerlesim kaymasini onlerler) ama
 * gorunen boyut CSS'ten: 72 px bir baslik satiri icin fazlaydi.
 */
.topbar > .topbar-brand .logo-topbar { height: 34px; width: auto; flex: 0 0 auto; }
.topbar > .topbar-brand #tenant-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/*
 * GENIS EKRAN: tek satir. Eski media query'nin `nav { width: 100% }`
 * kurali burada geri alinir; dar ekran icin ASAGIDA kendi esigimiz var.
 */
.topbar > nav { width: auto; flex: 0 0 auto; }

/*
 * ⚠ DAR EKRANDA SEKMELER ALTA KAYABILIR (Emin'in izni). Esik 720 px:
 *   sekmeler + logo + magaza adi bunun altinda tek satira sigmiyor.
 *   Marka blogu YINE yatay kalir.
 */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .topbar > nav { width: 100%; overflow-x: auto; }
}

/* Gomulu modda logo gizli -- magaza adi yalniz basina kalir, kucuk. */
.lb-embed .topbar > .topbar-brand #tenant-name { font-size: 12px; }

/*
 * ⛔ REFERANS TEK SATIR (Emin, 26.09.2026). "LB-" ile numara iki
 *    satira kiriliyordu: tire bir satir sonu firsati sayiliyor.
 */
.pref .ref-lb { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* SIPARISLER -- 26.09.2026                                            */
/* ------------------------------------------------------------------ */

/*
 * Durum renkleri mevcut `.badge` kalibini izler. Onek `ord-` cunku
 * urun durumlariyla (`live`/`staged`/`paused`) ADLARI CAKISMIYOR ama
 * ANLAMLARI farkli -- ayni sinifi paylasirlarsa biri degistiginde
 * oteki sessizce kayar.
 */
.badge.ord-new { color: var(--muted); }
.badge.ord-queued,
.badge.ord-sending { color: var(--warn); border-color: var(--warn); }
.badge.ord-sent { color: var(--ok); border-color: var(--ok); }
.badge.ord-failed { color: var(--stop); border-color: var(--stop); }
.badge.ord-skipped,
.badge.ord-cancelled_in_shop { color: var(--muted); border-style: dashed; }

/*
 * Gonderim tipi secicisi. Tablo icinde dar kalsin diye 13px --
 * satir yuksekligini buyutmemeli.
 */
.ship-sel { font-size: 13px; padding: 2px 4px; max-width: 220px; }
.ship-sel option:disabled { color: var(--muted); }

/*
 * KATALOG YAZMA MODU SERIDI -- `hiddenOnly` / `readOnly`de gorunur.
 * ⛔ Kalici: kapatilamaz. Partner o modda oldugunu HER ekranda gormeli;
 *    kapatilabilir bir serit, kapatildiktan sonra "normal" izlenimi
 *    verirdi.
 */
.catalog-banner {
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--warn);
  border-radius: 6px;
  background: #FFF8E6;
  color: var(--ink);
  margin: 0 0 12px;
}
.catalog-banner.stop { border-color: var(--stop); background: #FDECEC; }

/* ==================================================================
 * 02.10.2026 — PARTNER PANELI SON HAL (Emin)
 *   · ⓘ acilir pencere      · sunucu tarafi sayfalama
 *   · manuel fiyat alani    · uc degerli fiyat zinciri
 *   · kart ici izleyen adim · 7 adimli kreator
 * ================================================================== */

/*
 * ⓘ SIMGESI -- GERCEK BIR DUGME (klavye + mobil). `title` ipucu
 * mobilde HIC gorunmuyordu; tap hedefi 24px'in altina DUSMEMELI
 * (WCAG 2.5.8).
 */
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.info-dot:hover { color: var(--accent); border-color: var(--accent); }
/*
 * ⛔ ⓘ AIT OLDUGU CUMLEYLE AYNI SATIRDA (Emin, 03.10.2026).
 *
 *    24 px'lik dokunma hedefi `inline-flex` oldugu icin satir sonuna
 *    sigmadiginda TEK BASINA alt satira dusuyordu ve hangi cumleye
 *    ait oldugu kayboluyordu (Kategorie kartinda goruldu).
 *
 * ⇒ Simge, kendinden ONCEKI kelimeyle birlikte tasinir: metnin son
 *   parcasi ile simge arasinda satir sonu YASAK. Dokunma hedefi
 *   kucultulmedi -- erisilebilirlik bir yerlesim sorununa feda
 *   edilmez; bunun yerine negatif dikey marj satir yuksekligini
 *   buyutmesini engelliyor.
 */
.note .info-dot,
.subhint .info-dot,
label .info-dot {
  margin-top: -4px;
  margin-bottom: -4px;
}
.nowrap-with-info { white-space: nowrap; }

.infopop {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 17, 0.45);
  display: grid;
  place-items: center;
  padding: var(--gap-field);
  z-index: 60;
}
.infopop-box {
  background: var(--card);
  border-radius: 10px;
  padding: var(--gap-card);
  max-width: 44ch;
  width: 100%;
}
.infopop-box h3 {
  margin: 0 0 var(--gap-title);
  font-size: 15px;
  font-weight: 600;
}
.infopop-box p { margin: 0; font-size: 14px; }
.infopop-box .actions.left { margin-top: var(--gap-field); margin-bottom: 0; }

/* ---- SAYFALAMA ---- */
.pager {
  display: flex;
  align-items: center;
  gap: var(--gap-field);
  max-width: 760px;
  margin: var(--gap-field) 0 var(--gap-card);
  flex-wrap: wrap;
  font-size: 13px;
}
.pager .pg-size { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pager .pg-size select { width: auto; padding: 4px 8px; }

/* ---- MANUEL FIYAT (K2) ---- */
.manual-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.manual-price .mp-input { width: 108px; text-align: right; padding: 5px 8px; }
.manual-price.is-dirty .mp-input { border-color: var(--warn); }
.mp-note {
  font-size: 11px;
  color: var(--warn);
  font-weight: 600;
  white-space: nowrap;
}
.mp-changed {
  display: block;
  font-size: 11px;
  color: var(--warn);
  white-space: nowrap;
}
/*
 * ⛔ TEK EYLEM (03.10.2026): onayli ve degismemis fiyatta DUGME YOK.
 *    Yesil tik, "burada yapilacak is kalmadi" demenin en sessiz yolu;
 *    ikinci bir dugme olmayan bir adimi vaat ediyordu.
 */
.mp-ok {
  font-size: 11px;
  color: var(--ok);
  font-weight: 600;
  white-space: nowrap;
}
/*
 * Onerilen fiyat -- bir METIN degil bir DUGME: tek tikla uygulanir.
 * Tam genislikte, kutunun ALTINDA: fiyatla ayni satirda durursa bir
 * etiket sanilir ve tiklanabilir oldugu kaybolur.
 */
.mp-suggest {
  flex-basis: 100%;
  text-align: right;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  min-height: 24px;
}
.mp-suggest:hover { color: var(--ink); }

/*
 * ⛔ URUN BAZINDA ISTISNA (04.10): satirda GORUNUR olmasi sart --
 *    yoksa partner genel carpanini degistirir, o urunun degismedigini
 *    gorur ve sebebini bulamaz.
 */
.own-price-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.own-price-reset {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  min-height: 24px;
}

/*
 * ⛔ ANA RAKAM + ROZET AYNI SATIRDA (04.10 b): rozet ana rakami
 *    NITELER. Ayri satira dustugunde neyi niteledigi okunmuyordu.
 */
.price-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

/*
 * ⛔ "w sklepie teraz: X zł · Zaktualizuj" — ANA RAKAMIN ALTINDA,
 *    kucuk. Iki sayiyi tek hucrede BIRBIRININ YERINE gostermek,
 *    04.10'da olculen celiskinin ta kendisiydi.
 */
.shelf-diff {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.shelf-diff button { font-size: 11px; min-height: 24px; }

/* ==================================================================
 * 04.10.2026 — SADELESTIRME (Emin, madde 5-6)
 *   · rakamli fiyat sorusu   · "Więcej opcji"
 *   · tek kaydet cubugu      · erisilebilirlik (44 px, odak)
 * ================================================================== */

/*
 * ⛔ RAKAMLI SORU (madde 5): secenek bir TERIM degil bir TUTAR.
 *    Tutar buyuk ve once; aciklama altinda ve kucuk -- partner once
 *    rakama bakar, gerekirse aciklamaya iner.
 */
.qbox {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--gap-field);
  margin: 0 0 var(--gap-card);
}
.qbox legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.qbox .choice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio main" "radio sub";
  gap: 0 10px;
  align-items: center;
  /* ⛔ 44 px DOKUNMA ALANI (madde 6g). */
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.qbox .choice:hover { background: var(--paper); }
.qbox .choice input { grid-area: radio; width: 20px; height: 20px; }
.qbox .choice-main {
  grid-area: main;
  font-size: 16px;
  font-weight: 600;
}
.qbox .choice-sub {
  grid-area: sub;
  font-size: 12px;
  color: var(--muted);
}
/* ⛔ "Zalecane" isareti SUNUCUDAN gelir; burasi yalnizca gosterir. */
.qbox .choice.is-recommended .choice-main::after {
  content: " — Zalecane";
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
}

/* Yuzde/kwota girdisinin altindaki "= ×3,00" karsiligi. */
.eq {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/*
 * ⛔ IKINCIL AYARLAR KAPALI (madde 6d). Ozet satiri bir DUGMEDIR:
 *    44 px ve odaklanabilir.
 */
.more { margin: 0 0 var(--gap-card); }
.more > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.more[open] > summary { margin-bottom: var(--gap-field); }

/*
 * ⛔ TEK KAYDET CUBUGU (madde 6e). Sabit alt serit; YALNIZCA
 *    degisiklik varken gorunur.
 */
.savebar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gap-card);
  margin-top: var(--gap-card);
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}
.savebar .spacer { flex: 1; }
.savebar button { min-height: 44px; }

/*
 * ⛔ ODAK GORUNUR (madde 6g) -- klavyeyle gezen biri nerede oldugunu
 *    gormeli. `:focus-visible` fare tiklamasinda halka cizmez.
 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .savebar { padding: 10px var(--gap-field); flex-wrap: wrap; }
  .savebar #savebar-text { flex-basis: 100%; font-size: 13px; }
}
/*
 * "brak danych o stanie" — bir SAYI degil, bir DURUM. Sayi hizasindan
 * cikarilir ki rakamlarla karistirilmasin.
 */
.stock-unknown {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Onizlemede "pominięte (N)" / "Wycofywane (N)" satiri -- urun satiri DEGIL. */
.skipped-row td {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  background: var(--paper);
}

/*
 * ---- UC DEGERLI FIYAT ZINCIRI (K1) ----
 * Satir acilinca detayda: alis netto -> magaza netto -> musteri brut.
 */
.price-chain {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--gap-field);
  padding-top: var(--gap-field);
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.price-chain .pc-item { color: var(--muted); }
.price-chain .pc-item b { color: var(--ink); margin-left: 4px; }
.price-chain .pc-arrow { color: var(--muted); }

/* ---- KART ICI IZLEYEN ADIM (reprice · kategori tasima) ---- */
.inline-followup {
  margin-top: var(--gap-card);
  padding-top: var(--gap-field);
  border-top: 1px solid var(--line);
}

/* "Nie wystawiamy" rozeti -- tip disi birakilmis urun. */
.badge.excluded { background: #EFEDE8; color: var(--muted); }

/* Önizleme tablosu alt başlığı ("teraz" / "po zmianie"). */
.th-sub { font-weight: 400; color: var(--muted); font-size: 11px; }

/* Yalnizca mobilde gorunen etiket (masaustunde baslik zaten var). */
.only-mobile { display: none; }
.check-all-wrap { display: inline-flex; align-items: center; }

/* ⓘ satır içinde küçük hali (stok hücresi). */
.info-dot.tiny { width: 20px; height: 20px; min-width: 20px; font-size: 10px; margin-left: 4px; }

/*
 * ⛔ ⓘ AIT OLDUGU METINLE AYNI SATIRDA (Emin, 03.10.2026): 02.10'da
 *    dar ekranda alt satira dusuyordu ve neyi anlattigi belirsizdi.
 *    `white-space: nowrap` ile son kelimeye BAGLANAN bir sarmalayici
 *    gerekmez -- `display:inline-flex` + `vertical-align:middle`
 *    yeterli, ama paragrafin TASMAMASI icin satir yuksekligi sabit.
 */
.note .info-dot, .hint .info-dot { vertical-align: text-bottom; }

/*
 * ⛔ ACILIR LISTELERDE METIN KESILMESIN (Emin, 03.10.2026).
 *    02.10'da "cena dla klienta br…" ve "Aktualizowane au…" kesiliyordu.
 *    Alan genisligi tabandan buyutuldu; dar ekranda tam genislik.
 */
.field select { min-width: 0; text-overflow: ellipsis; }
.field.wide { max-width: 420px; }
.fields .field { flex: 1 1 200px; }

/* ---- KREATOR (7 adim) ---- */
.wizard-head { gap: var(--gap-field); align-items: center; }
.wizard-page { margin-bottom: var(--gap-card); }
.wizard-page h3 {
  margin: 0 0 var(--gap-title);
  font-size: 15px;
  font-weight: 600;
}
.wizard-foot { margin-top: var(--gap-card); }
.summary { margin: 0; padding-left: 18px; font-size: 14px; }
.summary li { margin-bottom: var(--gap-title); }

/* ==================================================================
 * MOBIL (≤480 px) — URUN TABLOSU KART DUZENINE GECER (Emin, 03.10.2026)
 *
 * ⛔ NEDEN: 02.10 galerisinde 360 px'te tablo yatay KAYDIRILIYORDU ve
 *    partner fiyati gormek icin saga kaydirmak zorundaydi. Mobilde
 *    yatay kaydirma, bilgiyi GIZLEMENIN en sinsi bicimi.
 *
 * ⛔ SAYFA YATAY KAYDIRMAZ: `document.scrollWidth === innerWidth` bir
 *    testle sabitlendi (galeri uretiminde olculuyor).
 *
 * ⚠ TABLO SEMANTIGI KORUNUR: `display:block` ile satirlar karta
 *    donusuyor ama `<table>` yapisi duruyor -- ekran okuyucu icin
 *    baslik/hucre iliskisi `data-label` ile tasiniyor.
 * ================================================================== */
/*
 * ⛔⛔ ESIK 480 -> 768 (D2, Emin 03.10.2026) — ve bir OLCUMDEN sonra.
 *
 *    768 px'te tablo kendi sarmalayicisinda yatay kayiyordu ve EYLEM
 *    SUTUNU (`Wystaw` / `Zatwierdź`) ekran disinda kaliyordu: partner
 *    yapacagi isi gormek icin saga kaydirmak zorundaydi.
 *
 *    "Yatay kaydirma, bilgiyi GIZLEMENIN en sinsi bicimi" cumlesi 480
 *    icin yazilmisti; 768'de ayni sey oluyordu ve eylem dugmesi
 *    kaybolduğu icin DAHA agirdi.
 *
 * ⇒ Kural: EYLEM DUGMESI HER GENISLIKTE GORUNUR.
 */
@media (max-width: 768px) {
  .table-wrap { overflow-x: visible; }

  /*
   * ⛔ `min-width: 700px` SIFIRLANIR -- ve bu OLCULEREK bulundu
   *    (03.10): kart duzeni dogru calisiyordu ama sayfa 360 px'te
   *    **715 px** genisligindeydi, cunku `#tab-products .grid`in
   *    masaustu icin konmus `min-width: 700px`i mobilde de
   *    geciyordu. `overflow-x: hidden` kaydirmayi gizler ama
   *    `scrollWidth`i KUCULTMEZ -- yani kusur gorunmez olur, YOK
   *    olmaz. Galeri artik her cekimde `scrollWidth`i olcuyor.
   */
  #tab-products .grid,
  #tab-runs .grid,
  #tab-orders .grid { min-width: 0; }

  #tab-products .grid,
  #tab-products .grid tbody,
  #tab-products .grid tr,
  #tab-products .grid td { display: block; width: auto; }

  /*
   * ⛔ BASLIK SATIRI GIZLENIR ama "hepsini sec" KUTUSU KALIR
   *    (03.10.2026). Ilk surumde butun `thead` ekran disina
   *    atiliyordu ve mobilde TOPLU SECIM YAPILAMIYORDU -- aynı-hash
   *    kontrolu bunu yakaladi (iki ekran birebir ayni cikti, cunku
   *    tiklama hicbir seye ulasmamisti).
   */
  #tab-products .grid thead { display: block; }
  #tab-products .grid thead tr { display: block; }
  #tab-products .grid thead th { display: none; }
  #tab-products .grid thead th.c-check {
    display: block;
    padding: 0 0 var(--gap-field);
    border: 0;
  }
  .check-all-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    min-height: 24px;
  }
  .only-mobile { display: inline; }

  #tab-products .grid tbody tr {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: var(--gap-field);
    margin-bottom: var(--gap-field);
    position: relative;
  }

  #tab-products .grid tbody td {
    border: 0;
    padding: 2px 0;
    text-align: left !important;
  }

  /* Etiket: hucrenin ne oldugu KARTTA da okunsun. */
  #tab-products .grid tbody td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--muted);
    font-size: 12px;
    margin-right: 6px;
  }

  /* Secim kutusu ve gorsel kartin ust kosesinde. */
  #tab-products .grid td.c-check { position: absolute; top: 12px; right: 12px; padding: 0; }
  /*
   * ⛔ GORSEL HUCRESI ICERIGINE GORE DARALIR — olculdu 04.10 (b):
   *    768'de gorselsiz bir urunde bos hucre kartin ustunde BUYUK bir
   *    bosluk birakiyordu (blok oldugu icin tam genislik aliyordu).
   */
  #tab-products .grid td.c-img { float: left; margin: 0 12px 8px 0; width: 56px; min-height: 0; }
  #tab-products .grid td.c-img:empty { display: none; }
  #tab-products .grid td.c-img img { width: 56px; height: auto; display: block; }

  /*
   * ⛔⛔ URUN ADI GORSELIN YANINA GECMIYORDU — SEBEP OLCULDU 04.10:
   *
   *     c-img       float:left · 56 px
   *     .disclosure display:grid (BFC) · width:100%  <- SUCLU
   *
   * Bir **BFC kutusu float'in uzerine BINEMEZ** (CSS2.1 §9.5): ya
   * yanina gecer ya ALTINA iner. `width:100%` ACIK bir genislik
   * verdigi icin kutu 700 px isteyip 632 px'lik bosluga sigmiyor ⇒
   * **altina dusuyor** ve kartin ustunde gorselin boyu kadar bos bir
   * serit kaliyordu.
   *
   * ⇒ `width: auto` ile tarayici BFC kutusunu floatin yanindaki
   *   bosluga **daraltir**. Dusus ortadan kalkar.
   *
   * ⚠ Bosluk "bos bir dolgu" DEGILDI -- bu yuzden padding/margin
   *   kurcalamak dogru cozum olmazdi; ilk tahminim (CSP gorselleri
   *   engelliyor) da YANLISTI, gorseller yukleniyordu.
   *
   * ⚠ `width:100%` genis ekranda GEREKLI (ucgen + ad hizalamasi icin
   *   hucreyi doldurmali), bu yuzden yalniz kart duzeninde geri alinir.
   */
  #tab-products .grid td .disclosure { width: auto; }

  /*
   * ⛔ "Hepsini sec" etiketi SARMALANMAZ: blok hucrede dar bir sutuna
   *    sikisip dort satira boluniyordu (768 olcumu).
   */
  #tab-products .grid thead th.c-check { width: auto; }
  .check-all-wrap .only-mobile { white-space: nowrap; }

  /* Islem dugmesi tam genislik -- parmakla basilabilir olmali. */
  #tab-products .grid td.c-act { margin-top: var(--gap-title); }
  #tab-products .grid td.c-act button { width: 100%; min-height: 40px; }

  /* Detay satiri kart icinde kalir. */
  #tab-products .grid tr.vrow td { padding: 0; }
  .vgrid { font-size: 13px; }

  /*
   * ⛔⛔ ARAC CUBUGU SUTUNA DONUNCE `flex-basis` YUKSEKLIK OLUR —
   *     OLCULDU 04.10 (b): arama kutusu 768 px'te **240 px boyunda**
   *     cikti.
   *
   *     Sebep: `.toolbar #q { flex: 1 1 240px }` SATIR icin yazilmisti
   *     ve `flex-basis` ANA EKSENI olcer. `flex-direction: column`
   *     olunca ana eksen DIKEY ⇒ 240px bir GENISLIK degil YUKSEKLIK.
   *
   * ⇒ Sutun duzeninde `flex` SIFIRLANIR. Sinif bir CSS kusuru degil,
   *   eksen degisiminin sessiz sonucu -- bu yuzden kural yaninda
   *   duruyor.
   */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > * { width: 100%; flex: 0 0 auto; }
  .toolbar #q { flex: 0 0 auto; }
  .pager { flex-direction: column; align-items: flex-start; }

  /* Sihirbaz ve kartlar tasmasin. */
  .wizard-box { width: 100%; max-width: 100%; padding: var(--gap-field); }
  .card { padding: var(--gap-field); }
  .fields { flex-direction: column; }
  .field, .field.wide { max-width: 100%; flex: 1 1 auto; }
  .price-chain { flex-direction: column; align-items: flex-start; gap: 4px; }
  .price-chain .pc-arrow { display: none; }
}

/*
 * ⛔ SAYFA ASLA YATAY KAYDIRMAZ. Tek bir tasan oge (uzun referans,
 *    genis tablo) butun sayfayi kaydirilabilir yapar ve o, mobilde
 *    duzenin bozuldugunun en gorunur isaretidir.
 */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==================================================================
 * C7 · DAR EKRAN / TABLET (768–1100 px) — Emin, 26–27.09.2026
 *
 * Uc somut kusur vardi:
 *   (a) yatay kaydirirken URUN ADI kayboluyordu
 *   (b) logonun yanindaki PARTNER ADI kesiliyordu (…)
 *   (c) sigmazsa ad sekmelerin ALTINA insin
 * ================================================================== */

/*
 * (a) URUN ADI SUTUNU SOLDA SABIT.
 *
 * ⛔ `position: sticky` SECILDI, ikinci bir tablo DEGIL. "Donmus
 *    sutun" kalibinin klasik cozumu iki tabloyu ust uste bindirmektir
 *    ve o, satir yuksekliklerini elle esitlemek demek -- iki kaynak,
 *    bir gun ayrisir (bu deponun `panel-body.html` dersi).
 *
 * ⛔ ESIK 1100 px: bunun USTUNDE tablo zaten sigiyor ve sabit sutun
 *    yalnizca bir golge cizgisi eklerdi. ALT sinir YOK -- telefonda da
 *    ise yariyor; "768-1100" gereksinimin olculdugu aralik, kuralin
 *    kapsami degil.
 *
 * ⚠ `background` ZORUNLU: seffaf bir sticky hucre kayan icerigin
 *   uzerine biner ve okunmaz olur.
 */
@media (max-width: 1100px) {
  #tab-products .grid th:nth-child(3),
  #tab-products .grid td:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    /* Kayan icerikle arasinda gorunur bir sinir. */
    box-shadow: 1px 0 0 var(--line);
  }
  /* Secim kutusu ve gorsel sutunlari dar ekranda yer yer -- ad sutunu
     sola yapisabilsin diye onlar KAYAR (gizlenmez: secim kutusu toplu
     islemin tek yolu). */
  #tab-products .grid th:nth-child(3),
  #tab-products .grid td:nth-child(3) { min-width: 180px; }
}

/*
 * (b) + (c) PARTNER ADI KESILMESIN.
 *
 * ⛔ `text-overflow: ellipsis` KALDIRILDI bu aralikta: kesilen bir ad
 *    hangi magazada oldugunu SOYLEMEZ -- ve o bilgi cok-magaza
 *    geleceginin arayuz geregi (CLAUDE.md: ad gizlenmedi, kucultuldu).
 *
 * ⇒ Once satir sonu (`normal` + `break-word`); hala sigmazsa marka
 *   blogu tam genislik alir ve sekmeler ALTA iner.
 */
@media (max-width: 1100px) {
  .topbar > .topbar-brand #tenant-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .topbar > .topbar-brand { flex: 1 1 100%; }
  .topbar > nav { width: 100%; overflow-x: auto; }
}

/*
 * C3 · GIZLI MODDA ELLE ACILAN URUN ISARETI.
 *
 * ⛔ Kirmizi DEGIL: bu bir HATA degil, partnerin KARARI. Uyari rengi,
 *    "yanlis yaptin" demek olurdu -- oysa Connect'in tek isi bunu
 *    GORUNUR kilmak.
 */
.manual-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--warn-bg, #fff4e5);
  color: var(--warn-fg, #8a5a00);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

/* ==================================================================
 * C11 · "Edytowany w sklepie" + C1 · SZYBKI START (27.09.2026)
 * ================================================================== */

/*
 * ⛔ Kirmizi DEGIL: partnerin kendi duzenlemesi bir HATA degil. Rozet
 *    yalnizca "bu urune dokunmuyoruz" diyor.
 */
.badge.edited {
  margin-left: 6px;
  background: var(--warn-bg, #fff4e5);
  color: var(--warn-fg, #8a5a00);
  border-color: var(--warn-fg, #8a5a00);
}
.c-act button.small { font-size: 11px; padding: 3px 8px; margin-left: 4px; }

/* ---------------- Szybki start ---------------- */
.wizard {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  z-index: 50;
  overflow: auto;
}
.wizard[hidden] { display: none; }
.wizard-box {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(760px, 100%);
  padding: 20px 22px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.wizard-head { display: flex; align-items: center; gap: 12px; }
.wizard-head h2 { margin: 0; flex: 1 1 auto; }
.wizard-step { font-size: 12px; }
.wizard-page { margin-top: 14px; }
.wizard-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.wizard-foot .spacer { flex: 1 1 auto; }
.summary { margin: 8px 0 0 18px; line-height: 1.7; }

/* Dar ekran: katman tam genislik, tablo kendi icinde kayar. */
@media (max-width: 760px) {
  .wizard { padding: 8px; }
  .wizard-box { padding: 14px; }
}


/* ============ BAYAT SEKME UYARISI + KILITLI DUGME SEBEBI ==========
   ⛔ 04.10.2026, bir olaydan. Satir ici stil YOK: CSP `style-src
      'self'` ('unsafe-inline' yok) onu blokluyor -- 03.10'da iskelet
      tam bu yuzden canlida STILSIZ ciziliyordu.
   ================================================================= */

.stale-banner {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--stop);
  /* Token yok: tanimsiz bir degiskene yaslanmak sessizce seffaf kalirdi. */
  background: rgba(140, 58, 46, 0.08);
  border-bottom: 1px solid var(--stop);
}

/*
 * Kilitli dugmenin yanindaki sebep. `button:disabled` zaten
 * `opacity: .45` + `cursor: not-allowed` veriyor (satir 159) --
 * ikinci bir soluklastirma yazilmadi.
 */
#catmove-locked {
  font-size: 12px;
  line-height: 1.35;
  max-width: 46ch;
}

/* Dar ekranda sebep dugmenin ALTINA gecer, yanina sikismaz. */
@media (max-width: 768px) {
  #catmove-locked { max-width: 100%; }
}


/* ============ KATEGORI AGACI (B, 04.10.2026) =====================
   ⛔ Satir ici stil YOK: CSP `style-src 'self'` onu blokluyor
      (03.10 iskelet olayi).
   ⛔ Secim bileseni UYDURULMADI -- sihirbazin `qbox` kalibi
      kullaniliyor; burada yalnizca AGACA OZGU satirlar var.
   ================================================================ */

.field-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.field-row label { font-size: 13px; }

#tree-box { margin: 0 0 14px; }
#tree-table .c-num { text-align: right; }
#tree-table tr.tree-root td { font-weight: 600; }
#tree-locked, #tree-migrate-locked { font-size: 12px; line-height: 1.35; max-width: 46ch; }

/* Rozet: agac satirlarinda "widoczna / ukryta". */
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.muted { color: var(--muted); }

/* Dar ekranda sebep dugmenin ALTINA gecer. */
@media (max-width: 768px) {
  #tree-locked, #tree-migrate-locked { max-width: 100%; }
  .field-row { align-items: stretch; }
}

/* ==================================================================
 * KATEGORI YONTEMI — EKRANDA YALNIZ SECILI OLAN DURUR (Faz 0.1, 05.10.2026)
 *
 * ⛔ Bir OLAYDAN yazildi: 04.10 galerisinde agac tablosu ile eski
 *    esleme tablosu (`TYP LABALANCIA / KATEGORIA W TWOIM SKLEPIE`)
 *    AYNI EKRANDA duruyordu. Partner hangisinin gecerli oldugunu
 *    bilemiyordu; ustelik "Spodniczki/Spodnie" gibi AGACTA KARSILIGI
 *    OLMAYAN satirlar da goruluyordu.
 *
 * ⛔ GIZLEME TAMAMEN BURADA. Dorduncu bir `if (MODE)` yazilmadi:
 *    `renderCategoriesCard` karta `.mode-tree` sinifini koyuyor,
 *    gerisi CSS. Deponun *"yeni mod farki = yeni CSS, yeni kod
 *    DEGIL"* kuralinin ayni uygulamasi (gomulu mod `.lb-embed` ile
 *    birebir ayni kalip).
 *
 * ⚠ OLCUT: `categoryTree.rootId != null`. Ayri bir "yontem" alani
 *   YAZILMADI -- agac kurulmussa yontem agactir. Olmayan bir alani
 *   okumak yerine KENDI KAYDIMIZA bakmak, 04.10'da `legacyStillUsed`
 *   icin ogrenilen dersin aynisi.
 * ================================================================== */

#card-categories.mode-tree .cat-legacy-only { display: none !important; }
#card-categories:not(.mode-tree) .cat-tree-only { display: none !important; }

/* ==================================================================
   FEED PROFIL FORMU — C maddesi (19.10.2026)

   ⛔ YENI GOMULU-MOD FARKI = YENI CSS, YENI KOD DEGIL (25.09 kurali).
      Form `app.css`te stillenir; `panel.js` yalnizca sinif adi verir.

   ⛔ `:root, :host` KURALI: shadow root icinde `:root` ESLESMEZ --
      bu dosyadaki degiskenler ikisini birden hedefliyor, yeni kurallar
      da o degiskenleri kullaniyor.
   ================================================================== */
.feed-form{display:grid;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line,#e3e3e3)}
.feed-alan{display:grid;gap:4px}
.feed-alan > span{font-size:12px;color:var(--muted,#666)}
/* ⚠ Genislik `auto`: BFC kutusu float'in uzerine binemez (CSS2.1 §9.5)
   ve 768'de ad gorselin altina duser -- 03.10'da olculen kusur. */
.feed-ceny{display:flex;flex-wrap:wrap;gap:12px;width:auto}
.feed-ceny label{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.feed-form button{justify-self:start}