/* ==========================================================================
   MÜŞTERİ NOTU — POP-UP (Gözlem Portalı'nın ERP tarafı)

   Sayfa değil pencere: yazışmaya bakmak bulunduğun ekrandan çıkmayı
   gerektirmesin. Düzen portaldakinin aynası — solda konuşulan ürünler,
   sağda seçili ürünün yazışması.

   RENK ANLAMI (kullanıcı kararı 2026-09-10), bizim gözümüzden:
     .d-yeni       kırmızı  müşteri yazmış, henüz açmadık
     .d-bekliyor   sarı     açtık ama cevap vermedik
     .d-cevaplandi yeşil    son söz bizim
     .d-bos        nötr     hiç mesaj yok
   Renkler DURUM kümesinden (--red/--amber/--green), seri kümesinden değil:
   burada renk gerçekten "ne hâlde" diyor.

   İLETİLDİ / GÖRÜLDÜ bilgisi ekranda YOK (kullanıcı kararı).
   ========================================================================== */

.mn-ort {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--bosluk-5);
  background: rgba(31, 50, 57, .45);
}

.mn-ort[hidden] { display: none; }

.mn-pencere {
  display: flex; flex-direction: column;
  width: min(920px, 100%); height: min(620px, 88vh);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.mn-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: 1px solid var(--line);
}

.mn-bas h2 {
  display: flex; align-items: center; gap: var(--bosluk-2);
  margin: 0; font-size: var(--yazi-lg);
}

.mn-bas h2 i { width: 18px; height: 18px; }

.mn-govde {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 320px 1fr;
}

.mn-liste-yani {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
}

.mn-arac { padding: var(--bosluk-3); margin: 0; }
.mn-arac input { width: 100%; }

.not-liste { flex: 1; min-height: 0; overflow-y: auto; }

.not-satir {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: var(--bosluk-3) var(--bosluk-4);
  font-family: inherit; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.not-satir:hover { background: var(--hover); }

.not-satir.secili {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.not-satir-ust { display: flex; align-items: center; gap: var(--bosluk-2); }

/* Durum noktası — satırın rengini taşıyan tek işaret. */
.not-nokta {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: var(--faint);
}

.d-yeni .not-nokta { background: var(--red); }
.d-bekliyor .not-nokta { background: var(--amber); }
.d-cevaplandi .not-nokta { background: var(--green); }

.not-urun-no { font-weight: 700; font-size: var(--yazi-md); }

.not-durum {
  margin-left: auto;
  padding: 1px 6px;
  font-size: var(--yazi-xs); font-weight: 700;
  border: 1px solid transparent; border-radius: var(--radius);
}

.d-yeni .not-durum { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.d-bekliyor .not-durum { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.d-cevaplandi .not-durum { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }

.not-urun-tanim { font-size: var(--yazi-sm); color: var(--muted); }

.not-onizleme {
  font-size: var(--yazi-sm); color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mn-sohbet-yani { display: flex; flex-direction: column; min-height: 0; }

.mn-sohbet-bas {
  padding: var(--bosluk-3) var(--bosluk-4);
  font-size: var(--yazi-md); font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.not-akis {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--bg);
}

/* BİZİM mesajlarımız sağda. Portalda tam tersi — aynı veri, iki bakış;
   taraf `kim` alanından geliyor, ada bakılarak değil. */
.mn-balon { max-width: 78%; padding: var(--bosluk-3); border-radius: var(--radius); }

.mn-balon.musteri {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
}

.mn-balon.biz {
  align-self: flex-end;
  color: #fff;
  background: var(--brand-dark);
}

/* Balon dikey akıyor: ad+ünlem üstte, metin ortada, saat SAĞ ALTTA. */
.mn-balon { display: flex; flex-direction: column; gap: 4px; }

.mn-balon-bas {
  display: flex; align-items: center; gap: var(--bosluk-2);
  font-size: var(--yazi-xs); font-weight: 700; color: var(--faint);
}
.mn-balon.biz .mn-balon-bas { color: rgba(255, 255, 255, .9); }   /* .75 → 6.0:1; .9 → 7.8:1 AAA */
.mn-balon-ad { flex: 1; min-width: 0; }
.mn-balon-metin { font-size: var(--yazi-sm); line-height: 1.5; white-space: pre-wrap; }

/* SAAT SAĞ ALTTA — küçük ve soluk (kullanıcı isteği 2026-09-29). */
.mn-balon-saat {
  align-self: flex-end;
  margin-top: 2px;
  font-size: var(--yazi-xs); line-height: 1;   /* 10px ölçek dışıydı */
  color: var(--faint);
}
.mn-balon.biz .mn-balon-saat { color: rgba(255, 255, 255, .9); }   /* .6 → 4.5:1; AAA için .9 */

/* GÜN AYRACI (WhatsApp kalıbı) — portaldaki `.gun-ayrac` ile aynı biçim. */
.mn-gun-ayrac {
  display: flex; align-items: center; gap: var(--bosluk-3);
  margin: var(--bosluk-3) 0 var(--bosluk-2);
  color: var(--muted); font-size: var(--yazi-xs); font-weight: 700;
}
.mn-gun-ayrac::before, .mn-gun-ayrac::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.mn-gun-ayrac span {
  padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); white-space: nowrap;
}

.not-yaz {
  display: flex; gap: var(--bosluk-2);
  /* Alan büyüdükçe tik ve Gönder ALTTA kalıyor — portaldaki `.mesaj-yaz` ile
     aynı kural: düğmelerin yeri yazarken değişmesin. */
  align-items: flex-end;
  padding: var(--bosluk-3) var(--bosluk-4);
  border-top: 1px solid var(--line);
}

/* Çok satırlı alan (2026-09-29): Enter gönderir, Shift+Enter satır ekler.
   Yükseklik JS ile içeriğe göre ayarlanıyor, `resize` kapalı — elle tutamaç
   aynı şeyi söyleyen ikinci bir kural olurdu. */
.not-yaz textarea {
  flex: 1; min-width: 0;
  min-height: 34px; max-height: 120px;
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: var(--yazi-sm); line-height: 1.4;
  resize: none; overflow-y: auto;
}
.not-yaz textarea:focus { outline: 2px solid var(--odak); outline-offset: 1px; }

@media (max-width: 860px) {
  .mn-govde { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .mn-liste-yani { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   YENİ MÜŞTERİ NOTU BİLDİRİMİ (ERP) — portaldaki kutunun karşılığı

   Kenar çubuğundaki nokta "bekleyen var" der; bu kutu NE geldiğini söyler.
   Davranış portalla birebir aynı olsun diye ölçüler de aynı: 1 sn soldan
   sağa giriş · 3 sn okunabilir · 0,9 sn sağdan sola çıkış · en fazla 2 kutu.
   Aynı işin iki ucu aynı ritimde davranmalı.

   Kap tıklamayı GEÇİRİYOR; yalnız kutular tıklanabilir. Yoksa görünmez bir
   tam boy katman ekranı kilitlerdi.
   ========================================================================== */

.mn-bildirim-yigin {
  position: fixed;
  top: 0;
  right: var(--bosluk-5);
  height: 100%;
  padding-bottom: var(--bosluk-5);
  z-index: 65;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--bosluk-2);
  max-width: min(360px, 84vw);
  pointer-events: none;
}

.mn-bildirim {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  font-family: inherit;
  text-align: left;
  color: #fff;
  background: var(--chrome);
  border: 0;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(31, 50, 57, .3);
  cursor: pointer;
  pointer-events: auto;
  animation: mn-bildirim-gir 1000ms cubic-bezier(.16, 1, .3, 1);
}

.mn-bildirim:hover { background: var(--brand-dark); }

.mn-bildirim.cikiyor {
  animation: mn-bildirim-cik 900ms cubic-bezier(.4, 0, .7, .2) forwards;
  pointer-events: none;
}

.mn-bildirim i { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }

.mn-bildirim-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mn-bildirim-bas {
  font-size: var(--yazi-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.mn-bildirim-urun { font-size: var(--yazi-sm); font-weight: 700; }

.mn-bildirim-metin {
  font-size: var(--yazi-sm);
  color: rgba(255, 255, 255, .85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mesafe kendi genişliğine göre (%), sabit piksel değil. */
@keyframes mn-bildirim-gir {
  from { opacity: 0; transform: translateX(-120%); }
  to   { opacity: 1; transform: none; }
}

@keyframes mn-bildirim-cik {
  from { opacity: 1; transform: none; max-height: 200px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(-120%); max-height: 0; margin-bottom: calc(var(--bosluk-2) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .mn-bildirim, .mn-bildirim.cikiyor { animation: none !important; }
}

/* Konu tarihi — ürün numarasının yanında. Konu artık ürün+tarih ile
   tekil; aynı ürünün farklı teslim tarihleri ayrı yazışmalar. */
.not-tarih {
  padding: 1px 6px;
  font-size: var(--yazi-xs); font-weight: 700;
  color: var(--brand-dark); background: var(--brand-soft);
  border-radius: var(--radius);
}

/* VSRM tarihi — iş emri ürün tablosunda, planlanandan önce. Plan bu tarihten
   SONRAYSA kırmızı: söz verdiğimiz gün müşterinin istediği günden geç. */
.iut-vsrm { white-space: nowrap; color: var(--muted); }
.iut-vsrm.gec { color: var(--red); font-weight: 700; }

/* ---------- KARAKTERİSTİK TÜRLERİ (kullanıcı isteği 2026-09-23) ----------
   Satır aracı biçimi kullanıcı kararı: araç çubuğunda Ekle/Sil/Kaydet YOK.
   Ekle tablonun altında tam genişlikte, Sil her satırın en sağında, Kaydet
   hiç yok — hücreden çıkınca kaydediliyor. */
/* BAŞLIK KURALLARI KALDIRILDI (P2 tablo standardı, 2026-10-11).

   Bu tablo kendi başlık biçimini yazıyordu: `text-align: left`, kendi punto,
   kendi harf aralığı, kendi alt çizgisi. Standart zaten aynı şeyleri
   söylüyor (`.table-wrap th` — küçük punto, muted, büyük harf, harf
   aralığı, yapışkan) ama ORTALI. İki kural çarpışınca kimlik seçicisi
   kazanıyor ve başlık solda kalıyordu; hücreler standarttan ortalı
   geldiği için ikisi hiç hizalanmıyordu — görsel denetim bunu altı koşum
   boyunca bildirdi.

   Kendi biçimini yazan tablo, standardı sessizce dışarıda bırakıyor:
   standart değiştiğinde bu tablo eski hâlinde kalır ve kimse fark etmez.
   Kalan kurallar yalnız BU tabloya özgü olanlar — sütun genişlikleri ve
   çok satırlı hücrenin üstten hizası. */
#karTurTablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-md); }
#karTurTablo td { vertical-align: top; }
#karTurTablo th:first-child, #karTurTablo td:first-child { width: 24%; }
#karTurTablo th:nth-child(2), #karTurTablo td:nth-child(2) { width: 18%; }
#karTurTablo th:last-child, #karTurTablo td:last-child { width: 44px; }
#karTurTablo input {
  width: 100%; min-width: 0; padding: 5px 7px; font: inherit; font-size: var(--yazi-sm);
  border: 1px solid transparent; border-radius: var(--radius); background: transparent;
}
/* Kenarlık yalnız odakta/üstünde: 25 satırlık tabloda her hücrenin çerçevesi
   olsaydı ekran forma değil ızgaraya benzerdi. */
#karTurTablo input:hover { border-color: var(--line); background: var(--panel); }
#karTurTablo input:focus { border-color: var(--brand); background: #fff; outline: none; }

/* Çip: seçili olanlar OKUNUYOR. `<select multiple>` olsaydı kaç tanesinin
   seçili olduğu kaydırmadan görünmez, ctrl+tık bilmeyi gerektirirdi. */
.ktur-cipler { display: flex; flex-wrap: wrap; gap: 4px; }
.ktur-cip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 2px 9px; font: inherit; font-size: var(--yazi-xs); color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.ktur-cip:hover { border-color: var(--brand); color: var(--brand); }
.ktur-cip.secili { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
/* Tam genişlikte + : "Ekle" düğmesinin yeri, tablonun devamı olduğu görünsün */
.ktur-ekle-btn { width: 100%; margin-top: 8px; justify-content: center; border-style: dashed; }

/* Ekipman dokümanları — sertifikanın KENDİSİ. Numara kalibrasyon
   geçmişinde duruyor, bu onun dayandığı dosya. */
.ekdok-liste { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; }
.ekdok-satir {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); font-size: var(--yazi-sm);
}
.ekdok-satir .ekdok-ad { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.ekdok-satir .ekdok-tarih { color: var(--muted); font-size: var(--yazi-xs); white-space: nowrap; }
.ekdok-bos { margin: 6px 0 0; font-size: var(--yazi-sm); color: var(--muted); }

/* ---------- KONTROL KARAKTERİSTİKLERİ ÇEKMECESİ (2026-09-23) ----------
   Satır aracı biçimi kullanıcı kararı: Kaydet YOK (hücreden çıkınca
   kaydediliyor), Sil satırın en sağında, Ekle tablonun altında. */
.kkc-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-sm); }
.kkc-tablo th {
  font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; text-align: left; padding: 5px 6px;
  border-bottom: 1.5px solid var(--line-strong); white-space: nowrap;
}
/* HÜCRELER DE SOLA — BAŞLIKLA AYNI (ölçülen kusur 2026-10-11). Başlık
   yukarıda `text-align: left` alıyordu ama hücrenin kendi yaslaması yoktu;
   tablo `.table-wrap` içinde olduğu için `.table-wrap td`nin ORTALI
   varsayılanı geçerliydi. Üç sütunda (Kontrol karakteristiği · Ölçüm aleti ·
   Özellik) başlık solda, hücre ortadaydı. `.num` sütunları aşağıdaki
   kuralla sağa yaslanmaya devam ediyor. */
.kkc-tablo td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.kkc-tablo td.num, .kkc-tablo th.num { text-align: right; }
.kkc-tablo input, .kkc-tablo select {
  width: 100%; min-width: 0; padding: 4px 6px; font: inherit; font-size: var(--yazi-sm);
  border: 1px solid transparent; border-radius: var(--radius); background: transparent;
}
/* Kenarlık yalnız odakta/üstünde: on sütunluk tabloda her hücrenin çerçevesi
   olsaydı ekran forma değil ızgaraya benzerdi. */
.kkc-tablo input:hover, .kkc-tablo select:hover { border-color: var(--line); background: var(--panel); }
.kkc-tablo input:focus, .kkc-tablo select:focus { border-color: var(--brand); background: #fff; outline: none; }
.kkc-tablo .kkc-ntl, .kkc-tablo .kkc-ltl, .kkc-tablo .kkc-utl {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* Sayı sütunları dar, açıklama geniş: tolerans üç kısa sayı, ad uzun metin */
/* "#" sütunu kalktı (2026-09-29) — sayı sütunları artık 3·4·5, birim 6 */
.kkc-tablo th:nth-child(3), .kkc-tablo th:nth-child(4), .kkc-tablo th:nth-child(5) { width: 78px; }
.kkc-tablo th:nth-child(6) { width: 70px; }
.kkc-tablo th:last-child, .kkc-tablo td:last-child { width: 1%; white-space: nowrap; }

/* LTL / UTL AÇIKLAMASI (Selim 2026-09-29: "LTL, UTL ne demek? Yanına bir
   soru işareti koyup açıklamak gerekiyor"). Üzerine gelince ya da
   klavyeyle/dokunarak odaklanınca kısa açıklama. Balon `body`de sabit
   konumlu (ekranlar/urun-karti.js): tablo kabı `overflow-x: auto` olduğu için içinde
   çizilen balon kırpılırdı. */
.kkc-soru {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 2px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--panel);
  font-size: var(--yazi-xs); font-weight: 700; line-height: 1; cursor: help; vertical-align: middle;
}
.kkc-soru:hover, .kkc-soru:focus-visible { color: var(--brand-dark); border-color: var(--brand); outline: none; }
.kkc-ipucu {
  position: fixed; z-index: 1000; max-width: 220px; padding: 6px 8px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  font-size: var(--yazi-sm); line-height: 1.35; pointer-events: none;
}
.kkc-tablo td.sag > .satir-eylem { display: flex; gap: 2px; justify-content: flex-end; }
/* ALT BİLEŞEN ŞERİDİ AYNI KURALDA (KDE-0078): iki ekleme düğmesi aynı
   görünmeli ve kuralı kopyalarsam biri değişince öteki ayrışır — bu kartta
   bir kez yaşandı (KDE-0039). Davranışları farklı (biri boş satır açıyor,
   öteki form — bileşen Parça No olmadan kurulamaz) ama GÖRÜNÜM tek. */
.kkc-ekle,
.ab-ekle-serit { width: 100%; margin-top: 8px; justify-content: center; border-style: dashed; }
.kkc-govde { min-width: 0; }

/* Ölçü birimi satırı: ad + sembol rozeti + düzenle/sil (2026-09-23).
   Sembol rozet olarak ayrı duruyor — "Derece(°)" gibi tek dizeye
   sıkıştırılmış yazımlar karakteristik türündeki sembolle eşleşmiyordu. */
.tn-sembol {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-dark); font-size: var(--yazi-xs); font-weight: 700;
}
.tn-satir-eylem { display: flex; gap: 6px; align-items: center; }
.tn-ekle-satir .tn-yeni-sembol { max-width: 180px; }

/* ---------- Resmî tatil yıl şeridi (2026-09-23) ----------
   83 satırlık liste yerine yıl başına bir kutu. Resmî tatil yönetilen bir
   kayıt değil, gelen bir veri — ekranda da öyle duruyor. Ayrıntı ikinci
   sınıf bilgi: şeride tıklayınca açılıyor. */
.resmi-ozet { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--bosluk-3); }
.resmi-yil {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); padding: 7px 13px; font: inherit; cursor: pointer;
  min-width: 118px; text-align: left;
}
.resmi-yil:hover { border-color: var(--brand); }
.resmi-yil.acik { background: var(--brand-soft); border-color: var(--brand); }
.resmi-yil b { font-size: var(--yazi-lg); color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.resmi-yil span { font-size: var(--yazi-sm); color: var(--muted); }
.resmi-yil .resmi-kaynak { font-size: var(--yazi-xs); color: var(--faint); }