/* ---- İş emri oluşturma penceresi (Ürün Düzenleme + Sipariş Oluştur ortak) ---- */
.iep-ust { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); }
.iep-yeni-baslik { font-size: var(--yazi-sm); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.iep-yeni { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.iep-et { display: block; font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.iep-no b { font-size: var(--yazi-baslik); color: var(--brand-dark); }
.iep-tarih, .iep-not { display: flex; flex-direction: column; }
.iep-not { flex: 1 1 180px; }
.iep-yeni input { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-md); }
.iep-secim { margin-top: 8px; font-size: var(--yazi-sm); }

/* Ürünler sütunu: sayı rozeti, tıklanınca detay penceresi */
.urun-say-btn { min-width: 30px; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: var(--yazi-md); font-weight: 700; cursor: pointer; }
.urun-say-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ÜRÜN KODU LİSTESİ — sayı rozetinin yerini aldı (2026-09-06). Kodlar alt
   alta; tıklanınca yine görsel + ad + adet penceresi açılıyor.

   BAŞLIK VE HÜCRE AYNI HİZADA OLMALI. İlk sürümde hücreyi sola aldım ama
   başlıkta `num` sınıfı kaldı ve o sağa yaslıyordu; aradaki boşluk sütunu
   kaymış gösteriyordu (kullanıcı bildirimi 2026-09-06, ekran görüntüsüyle).
   İkisi de ORTALI: kod kutuları eşit uzunlukta değil, ortalanınca sütun bir
   bütün olarak okunuyor. */
/* Excel düğmesi tablonun ÜSTÜNDE ve sağa yaslı: tablo soldan okunuyor, araç
   çubuğu onun akışını kesmemeli. Altta olsaydı 34 satırlık listede aşağı
   inmek gerekirdi ve dosya listeyi okumadan önce de istenebiliyor. */
/* Arama solda, Excel sağda. Eskiden `flex-end` idi — tek düğme vardı; arama
   kutusu eklenince o hizalama ikisini birden sağa iterdi. Arama okuma
   yönünün başında durmalı, listeye bakan kişinin ilk gittiği yer orası. */
.ie-arac-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--bosluk-2); }
.ie-arac-bar #ieExcel { margin-left: auto; }
.ie-ara { flex: 0 1 340px; min-width: 0; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--yazi-md); font-family: inherit; color: inherit; background: var(--panel); }
.ie-ara:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.ie-ara-say { font-size: var(--yazi-xs); white-space: nowrap; }

.ie-urun-basi { text-align: center; }
.ie-urun-hucre { text-align: center; }
/* Kutu `inline-flex`: satır içi akışa girdiği için `text-align: center` onu
   ortalayabiliyor. Blok seviyesindeki `flex` olsaydı hücreyi doldurur ve
   ortalama hiçbir şey yapmazdı.
   İçindeki kodlar kendi aralarında SOLA yaslı kalıyor — birden çok kod alt
   alta gelince ortalanmış bir liste tırtıklı görünürdü. */
.urun-kod-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; text-align: left; max-width: 100%; }
.urun-kod-btn:hover { border-color: var(--brand); }
/* Kod TEK SATIRDA kalıyor ve sığmazsa kısaltılıyor: parça numaraları sabit
   uzunlukta değil ve sarılan bir kod iki satıra bölününce okunamaz hâle
   geliyor. Tamamı `title` içinde duruyor. */
.uk-kod { font-family: ui-monospace, monospace; font-size: var(--yazi-sm);
  font-weight: 700; color: var(--ink); max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.urun-kod-btn:hover .uk-kod { color: var(--brand); }
.uk-daha { font-size: var(--yazi-xs); color: var(--muted); }

.ie-urun-kartlar { display: flex; flex-direction: column; gap: 8px; }
.ieu-kart { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.ieu-gorsel { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; flex: none; }
.ieu-gorsel.bos { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--yazi-sm); }
.ieu-bilgi { flex: 1 1 auto; min-width: 0; }
.ieu-kod { font-weight: 700; font-size: var(--yazi-md); }
.ieu-ad { font-size: var(--yazi-sm); color: var(--muted); }
.ieu-adet { text-align: right; flex: none; }
.ieu-adet b { display: block; font-size: var(--yazi-baslik); line-height: 1.1; }
.ieu-adet span { font-size: var(--yazi-xs); color: var(--muted); }

/* Sipariş Oluştur — satır etiketleri (müşteri · bekleyen · teslim · stok) */
.sip-urun-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.sue { font-size: var(--yazi-xs); padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--muted); white-space: nowrap; }
.sue.musteri { background: #e0e7ff; color: #3730a3; font-weight: 700; }
.sue.musteri.eksik { background: #fee2e2; color: var(--red); }
.sue.bekleyen { background: #dcfce7; color: #166534; font-weight: 700; }
.sue.teslim { background: #fef3c7; color: var(--amber-ink); }
.sue.teslim.gec { background: #fee2e2; color: var(--red); font-weight: 700; }
.sue.stok.eksi { background: #fee2e2; color: var(--red); font-weight: 700; }
.sue.sonuk { opacity: .7; }

/* Çok müşterili seçim — hata değil, müşteri başına ayrı emir önerisi */
.iep-cok-uyari { margin-bottom: 10px; padding: 9px 12px; background: #fff7ed; border: 1px solid #fdba74;
  border-radius: var(--radius); font-size: var(--yazi-sm); line-height: 1.5; }
.iep-gruplar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.iepg { flex: 1 1 190px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); }
.iepg.hatali { border-left-color: var(--red); background: #fef2f2; }
.iepg-mus { font-size: var(--yazi-md); font-weight: 700; }
.iepg-no { font-size: var(--yazi-sm); color: var(--brand-dark); font-family: ui-monospace, monospace; }
.iepg-hata { color: var(--red); font-family: inherit; }
.iepg-kalem { font-size: var(--yazi-xs); color: var(--muted); }

/* ---- Hammadde tanımlama (Master Veri) ---- */
.hm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hm-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-sm); color: var(--muted); font-weight: 700; }
/* Satır boyu alan — `label` şartı yoktu: sarmalayıcı div olunca kural tutmuyor
   ve alan 170px'lik dar hücrede sıkışıyordu. */
.hm-form > .tam { grid-column: 1 / -1; }
.hm-form input, .hm-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-md); color: var(--ink); font-weight: 400; }
.hm-form-alt { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.hm-ekad { margin-left: 5px; color: var(--amber); font-weight: 700; cursor: help; }

/* ---- Parça → hammadde bağı kutusu (ürün + yarı mamül ortak) ---- */
.hmb-kutu { }
.hmb-kutu h5 { margin: 0 0 8px; font-size: var(--yazi-lg); }
.hmb-ekle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
/* Seçiciler kademe kutularına bağlı: geniş `.hmb-ekle select/input` kuralı
   kademe listelerinin içindeki denetimleri de yakalardı. */
.hmb-bicim-alan select { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-md); }
.hmb-mik-alan input { width: 110px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-md); }
.hmb-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-md); }
.hmb-tablo th { font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid var(--line-strong); }
.hmb-tablo td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.hmb-tablo tr.hmb-eksik td { background: #fef2f2; color: var(--red); }
.hmb-bos { margin: 0; font-size: var(--yazi-sm); }
tr.hm-eksik-satir > td { background: #fffbeb; }
.hm-eksik-et { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-ink); font-size: var(--yazi-xs); font-weight: 700; }
/* Kenar menüde sayaç rozeti (hammadde) */
.nav-say { margin-left: auto; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.16);
  font-size: var(--yazi-xs); font-weight: 700; }
#hmFormKap { margin-bottom: 16px; }
/* Kategori birim seçicisi */
.kat-birim { display: inline-flex; align-items: center; gap: 5px; font-size: var(--yazi-xs); color: var(--muted); }
.kat-birim select { padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-sm); }
.sablon-adim .sa-birim { margin-left: 6px; font-style: normal; font-size: var(--yazi-xs); color: var(--muted); }
.sablon-adim.birim-gun .sa-birim { color: var(--amber); font-weight: 700; }
.metod-ro .pm-birim:disabled { opacity: .65; cursor: not-allowed; }

/* Günün sevk listesi (ASN, portaldan): sevk edilebilir yeşil, bakiye (geçmiş) kehribar, yasak soluk */
.asn-liste-tablo td, .asn-liste-tablo th { padding: 5px 8px; font-size: var(--yazi-sm); }
.asn-liste-tablo tr.asn-yasak td { color: var(--faint); }
.asn-liste-tablo tr.asn-bakiye td:first-child { border-left: 3px solid var(--amber, var(--amber)); }
.asn-liste-tablo tr.asn-ok td:first-child { border-left: 3px solid var(--green, var(--green)); }
.asn-liste-tablo .asn-tarihler { color: var(--muted); white-space: normal; }
.asn-liste-tablo .asn-t-gec { color: var(--amber); font-weight: 700; }
.asn-liste-tablo .asn-t-yasak { color: var(--faint); text-decoration: line-through; }
.asn-liste-tablo .asn-bakiye-sayi { color: var(--amber); }
.rozet.kirmizi { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.sekme-bar .sekme-eylem { margin-left: auto; align-self: center; margin-bottom: 4px; }
/* Master Veri akordeon: başlık tıklanır, içerik açılır-kapanır; ok yönü durumu söyler */
.panel.akordeon > h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.panel.akordeon > h2::before { content: '▾'; font-size: var(--yazi-sm); color: var(--muted); transition: transform .15s; }
.panel.akordeon.kapali > h2::before { transform: rotate(-90deg); }
.panel.akordeon.kapali > h2 { margin-bottom: 0; }
/* Yükseklik animasyonu: gövde grid, satır 1fr ↔ 0fr; iç kap min-height 0 ile küçülür.
   display:none yok — kapanış/açılış 0,22 sn'de akar, sayfa zıplamaz. */
.panel.akordeon > .akordeon-govde { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.panel.akordeon > .akordeon-govde > .akordeon-ic { min-height: 0; overflow: hidden; opacity: 1; transform: translateY(0); transition: opacity .3s ease .1s, transform .4s cubic-bezier(.4,0,.2,1); }
.panel.akordeon.kapali > .akordeon-govde { grid-template-rows: 0fr; }
.panel.akordeon.kapali > .akordeon-govde > .akordeon-ic { opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .2s ease, transform .4s cubic-bezier(.4,0,.2,1), visibility 0s .4s; }
.panel.akordeon > h2::before { transition: transform .3s ease; }
.panel.akordeon > h2:hover { color: var(--brand-dark); }
/* Aşama paneli başlığındaki şablon düğmesi sağda; şablon alanı panel içinde ayrı blok */
.panel.akordeon > h2 .sablon-btn { margin-left: auto; font-weight: 700; }
.panel.akordeon > h2 .sablon-btn.acik { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.sablon-alan { margin: 0 0 14px; padding: 10px 12px 12px; border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--brand-soft); }
.sablon-alan .sablon-baslik { font-weight: 700; margin-bottom: 8px; }
/* Şablon penceresi (Selim tasarımı, KD-0012): üst satır kod + ad + Kaydet; altta havuz ve sıra.
   Önek sbp- : Efkan'ın .sb/.sb-ust sınıflarıyla çakışmasın. */
.sbp { display: flex; flex-direction: column; gap: 12px; min-width: min(780px, 90vw); }
.sbp-ust { display: flex; align-items: flex-end; gap: 10px; }
.sbp-alan { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-sm); color: var(--muted); }
.sbp-alan input { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 9px; font: inherit; min-width: 140px; }
.sbp-alan input:disabled { background: #f3f3f3; color: var(--muted); }
.sbp-genis { flex: 1; }
.sbp-ust .btn { margin-left: auto; }
.sbp-uyari { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); border-radius: var(--radius); padding: 8px 10px; font-size: var(--yazi-sm); }
.sbp-govde { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sbp-bolge h4 { margin: 0 0 8px; font-size: var(--yazi-md); display: flex; flex-direction: column; gap: 2px; }
.sbp-bolge h4 small { font-weight: 400; }
.sbp-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.sbp-cip { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sbp-cip:hover { border-color: var(--brand); }
.sbp-cip.secili { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.sbp-cip b { background: var(--brand); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; font-size: var(--yazi-xs); display: inline-flex; align-items: center; justify-content: center; }
.sbp-sira { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.sbp-satir { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 6px 8px; transition: transform .15s, background .12s; }
.sbp-satir b { background: var(--brand); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; font-size: var(--yazi-xs); display: inline-flex; align-items: center; justify-content: center; }
.sbp-satir .sbp-ad { flex: 1; }
.sbp-tut { cursor: grab; color: var(--faint); user-select: none; touch-action: none; padding: 0 2px; letter-spacing: -2px; }
.sbp-tut:active { cursor: grabbing; }
.sbp-cikar { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: var(--yazi-sm); }
.sbp-cikar:hover { color: var(--red); }
.sbp-satir.sbp-suruklenen { opacity: .4; }
.sbp-satir.sbp-hedef { border-color: var(--brand); box-shadow: 0 -2px 0 var(--brand); transform: translateY(6px); }
.sbp-hayalet { position: fixed; z-index: 400; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: .95; list-style: none; }
.sbp-bos { font-size: var(--yazi-sm); }
@media (max-width: 760px) { .sbp-govde { grid-template-columns: 1fr; } .sbp-ust { flex-wrap: wrap; } }
.panel .alt-baslik { margin: 18px 0 8px; font-size: var(--yazi-md); color: var(--ink); }
.panel.akordeon > h2 .btn.ikincil.sm { font-weight: 700; }
/* Menü / Modül Sihirbazı */
[data-menu-gizli] { display: none !important; }
/* Lisansta kapalı modül (Gözlem Ağı F3) — sihirbazdan açılamaz, ayrı öznitelik. */
[data-lisans-gizli] { display: none !important; }
/* KENAR ÇUBUĞU ALT BLOĞU — Müşteri Notu · Menü Sihirbazı · Ayarlar
   Üçü alt alta duruyor ve ÜÇÜ DE AYNI SOL HİZADAN başlamalı. Kayma ölçüldü
   ve düzeltildi (kullanıcı bildirimi 2026-09-10): kap 8px içeriden
   başlıyordu ama `.nav-ayarlar` başlamıyordu; ayrıca düğmenin sol payı
   (3px kenarlık + 10px = 13px) `.nav-item`inkinden (2 + 14 = 16px)
   farklıydı, ikon genişliği ve aralık da ayrışıyordu. Hepsi `.nav-item`
   ölçüsüne çekildi. */
.nav-alt { padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.nav-sihirbaz { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--row-h, 36px); padding: 0 12px 0 14px;
  font: inherit; font-size: var(--yazi-lg); font-weight: 400; text-align: left; color: var(--chrome-ink); background: transparent;
  border: 0; border-left: 2px solid transparent; cursor: pointer; }
.nav-sihirbaz:hover { color: #fff; background: var(--chrome-2); }
.nav-sihirbaz .ic { width: 18px; height: 18px; flex: 0 0 auto; text-align: center; }

/* Müşteri Notu — bekleyen konu varsa yanındaki nokta yanıyor.
   Sayı değil NOKTA (kullanıcı: "yanında bir ünlem veya belirteç"): koyu
   kabukta küçük bir rakam okunmuyordu. Renk DURUM kümesinden. */
/* SATIRIN KENDİSİ RENK DEĞİŞTİRİYOR. 9px'lik nokta koyu kabukta yeterince
   görünmüyordu (kullanıcı bildirimi: "icon çok küçük olduğu için belli
   olmuyor, satır renk değiştirsin"). Nokta duruyor ama tek işaret değil.

   İKİ AYRI ANLAM — eskiden ikisi tek sayıda toplandığı için nokta devamlı
   kırmızı yanıyordu ve "yeni geldi" sinyali anlamını yitirmişti:
     d-yeni      kırmızı  müşteri yazmış, HENÜZ AÇMADIK
     d-bekliyor  sarı     açtık ama cevap vermedik */
.nav-not-btn.d-yeni {
  color: #fff;
  background: rgba(185, 28, 28, .32);
  border-left-color: var(--red);
}
.nav-not-btn.d-yeni:hover { background: rgba(185, 28, 28, .46); }

/* YANITLANMAMIŞ (görülmüş ama cevap verilmemiş) konu satırı BOYAMIYOR —
   kullanıcı kararı: "yeni mesaj geldiğinde kırmızı olsun, yanıtlanmamış
   olursa eskisi gibi kalsın". Sürekli boyalı duran bir satır dikkat
   çekmeyi bırakıyor; renk yalnız GERÇEKTEN yeni bir şey için. */

.nav-not-isaret {
  width: 9px; height: 9px; margin-left: auto; flex: 0 0 auto;
  background: var(--red); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .25);
}
.nav-not-isaret[hidden] { display: none; }
.msh { display: flex; flex-direction: column; gap: 6px; min-width: min(520px, 90vw); }
.msh-bolum { margin: 10px 0 2px; font-size: var(--yazi-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.msh-bolum-anahtar { transform: scale(.85); }
.msh-satir { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: #fff; cursor: pointer; }
.msh-satir.zorunlu { cursor: default; }
.msh-satir.rol-yok { opacity: .6; }
.msh-ik { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); border-radius: 6px; color: var(--brand-dark); }
/* Menü ikonunun kendisi — kutu 28px, ikon 18px. Çizim `::before` üzerinden
   geliyor ve boyutunu `1em`den, yani yazı boyutundan alıyor; verilen genişlik
   glifi büyütmediği için burada ezilmesi gerekiyor. */
.msh-ik .ic { width: 18px; height: 18px; display: block; }
.msh-ik .ic::before { width: 100%; height: 100%; display: block; vertical-align: 0; }
.msh-ad { flex: 1; display: flex; flex-direction: column; font-weight: 700; }
.msh-ad small { font-weight: 400; color: var(--muted); font-size: var(--yazi-xs); }
.msh-kilit { font-size: var(--yazi-sm); color: var(--muted); }
.msh-anahtar { position: relative; width: 44px; height: 24px; flex: none; }
.msh-anahtar input[type="checkbox"] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; margin: 0; cursor: pointer; }
.msh-anahtar i { position: absolute; inset: 0; border-radius: 999px; background: #cfd6d6; transition: background .15s; pointer-events: none; }
.msh-anahtar i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.msh-anahtar input:checked + i { background: var(--brand); }
.msh-anahtar input:checked + i::after { transform: translateX(20px); }
.msh-not { margin-top: 10px; font-size: var(--yazi-sm); }
/* VSRM Bağlantısı penceresi */
.vb { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 90vw); }
/* Otomatik çekim ayarı — Bağlantılar sekmesi */
.oc-anahtar { display: flex; align-items: flex-start; gap: 8px; font-size: var(--yazi-md); cursor: pointer; }
.oc-anahtar small { display: block; color: var(--muted); font-size: var(--yazi-sm); }
.oc-satir { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.oc-satir label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.oc-satir input[type="time"] { padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius); }
.oc-not { font-size: var(--yazi-sm); flex: 1 1 300px; }
.oc-durum { font-size: var(--yazi-sm); color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 700px) { .vb { min-width: 0; } }
/* Bağlı müşteri listesi (2026-10-01): satır düğmeleri tek satırda, sağda */
.vb .vb-eylem { white-space: nowrap; text-align: right; }
#vbForm { display: flex; flex-direction: column; gap: 12px; }
#vbForm[hidden] { display: none; }
.vb-not { font-size: var(--yazi-xs); }
.vb-ayak { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.vb-ayak .hata-metin { margin-right: auto; }

/* Sistem Yedekleme — Bağlantılar sekmesindeki .vb kalıbının aynısı */
.yd { display: flex; flex-direction: column; gap: 12px; min-width: min(620px, 90vw); }
/* İndir / Yükle ikilisi — TABLONUN ALTINDA (kullanıcı kararı 2026-09-08).
   Başlığın yanındayken düğmeler kapsam tablosundan önce geliyordu; oysa
   sıralama işin sırasına uymalı: önce ne yedekleneceğini gör, sonra indir. */
.yd-eylem { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
/* Geri yükleme, aynı panelin devamı — üstten çizgiyle ayrılıyor ki
   "burası başka bir iş" görünsün, ama ayrı bir pencere olmasın. */
.yd-geri { display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.yd-geri h3 { margin: 0; font-size: var(--yazi-md); }
/* TELEFONDA min-width KALKIYOR. `min(620px, 90vw)` masaüstünde paneli
   dar içerikte çökmekten koruyor, ama 390px'lik ekranda 351px'i zorluyor
   ve panelin iç genişliği bundan küçük olduğu için akordeon YATAY TAŞIYOR:
   "861,0 KB" → "861,0 K", "1,5 MB" → "1,5 M" diye kırpılıyordu. Sayıların
   birimi kesilen bir yedekleme ekranı, yanlış okunmaya açık. */
@media (max-width: 700px) {
  .yd { min-width: 0; }
  .yd-kalem { flex-wrap: wrap; }
  .yd-kalem span { white-space: normal; }
}
.yd-aciklama { margin: 0; font-size: var(--yazi-sm); color: var(--muted); }
.yd-alt { font-weight: 400; font-size: var(--yazi-sm); }
.yd-kapsam, .yd-oz, .yd-liste { display: flex; flex-direction: column; gap: 2px; }
.yd-kalem { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px;
  border-bottom: 1px solid var(--line); font-size: var(--yazi-sm); }
.yd-kalem:last-child { border-bottom: 0; }
.yd-kalem span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yd-kalem b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.yd-kalem.yd-toplam { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 2px; }
.yd-kalem.yd-toplam span { color: var(--ink); font-weight: 700; }
.yd-secim { display: flex; align-items: flex-start; gap: 8px; font-size: var(--yazi-sm); cursor: pointer; }
.yd-secim small { display: block; color: var(--muted); font-size: var(--yazi-xs); }
.yd-yukle { display: flex; align-items: center; gap: 10px; }
.yd-ayak { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.yd-ayak .hata-metin { margin-right: auto; }
.yd-kimlik-not, .yd-uyari, .yd-korunan, .yd-atlanan {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; font-size: var(--yazi-sm); background: var(--panel-2); }
.yd-kimlik-not { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.yd-uyari { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.yd-atlanan small { display: block; color: var(--muted); font-size: var(--yazi-xs); }
.yd-onizleme { display: flex; flex-direction: column; gap: 10px; }
.yd-korunan code { font-size: var(--yazi-xs); }

.vsrm-cek .dosya-sec.sag { margin-left: auto; }