/* ==========================================================================
   YENİ NOT BİLDİRİMİ

   Zil rozeti KAÇ tane olduğunu söyler; bu kutu NE geldiğini söyler —
   hangi firmadan, hangi ürün için. Portal açıkken gelen notun fark
   edilmesi için rozetin sessizce artması yetmiyordu.
   ========================================================================== */

/* KAP GÖRÜNÜR ALANA YASLANIYOR, `bottom`a DEĞİL.

   `position: fixed` gövdeye değil VIEWPORT'a yaslanır — `html/body`
   yüksekliğini `--vv-h` yapmak bu kutuyu kurtarmıyordu. iOS'ta düzen
   viewport'u görünür alandan uzun olduğu için kutu ekranın altında
   kalıyordu (kullanıcı bildirimi: "PC'de görüyorum, tablette göremiyorum").

   Çözüm: kap görünür alan kadar yüksek, içerik ALTA yaslı. Kap tıklamayı
   geçiriyor (`pointer-events: none`), yalnız bildirimlerin kendisi
   tıklanabilir — yoksa görünmez bir tam boy katman ekranı kilitlerdi. */
.bildirim-yigin {
  position: fixed;
  top: 0;
  right: var(--p-a5);
  height: var(--vv-h, 100%);
  padding-bottom: var(--p-a5);
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--p-a2);
  max-width: min(360px, 84vw);
  pointer-events: none;
}

/* Yeni bildirim ALTA ekleniyor; kap alta yaslı olduğu için öncekiler
   yukarı kayıyor. Kayma yumuşak olsun diye yerleşim geçişi var. */
.bildirim {
  display: flex;
  align-items: flex-start;
  gap: var(--p-a3);
  padding: var(--p-a3) var(--p-a4);
  font-family: var(--p-font);
  text-align: left;
  color: #ffffff;
  background: var(--p-kabuk);
  border: none;
  border-left: 4px solid var(--red);
  border-radius: var(--p-radius);
  box-shadow: 0 12px 32px rgba(31, 50, 57, .3);
  cursor: pointer;
  pointer-events: auto;
  /* GİRİŞ: soldan sağa süzülerek, ~1 sn (kullanıcı kararı — 260 ms çok
     hızlıydı). Yavaşlayarak biten eğri: kutu yerine "oturuyor", ani
     durmuyor. */
  animation: bildirim-gir 1000ms cubic-bezier(.16, 1, .3, 1);
}

/* ÇIKIŞ: sağdan sola, girişle aynı ölçekte (900 ms). Sınıf JS'ten
   ekleniyor, animasyon bitince öge siliniyor — hemen silinseydi çıkış hiç
   görünmezdi. */
.bildirim.cikiyor {
  animation: bildirim-cik 900ms cubic-bezier(.4, 0, .7, .2) forwards;
  pointer-events: none;
}

.bildirim:hover { background: var(--p-aksan-koyu); }

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

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

.bildirim-firma {
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

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

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

/* Soldan sağa giriş · sağdan sola çıkış. Mesafe kendi genişliğine göre
   (`%`), sabit piksel değil: dar tablette de aynı hızda okunuyor. */
@keyframes bildirim-gir {
  from { opacity: 0; transform: translateX(-120%); }
  to   { opacity: 1; transform: none; }
}

@keyframes 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(--p-a2) * -1); }
}

/* ==========================================================================
   MESAJLAŞMA PENCERESİ
   ========================================================================== */

/* Yükseklik `--vv-h`den (görünür alan) geliyor, `100%`ten değil: klavye
   açıkken pencere klavyenin ÜSTÜNDE kalan alana sığmalı. `inset: 0` ile
   `100vh` kullanılsaydı pencerenin yarısı klavyenin altında kalırdı —
   tablette ölçülen belirti buydu. */
.mesaj-ort {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--vv-h, 100%);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-a5);
  background: rgba(31, 50, 57, .45);
}

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

.mesaj-pencere {
  display: flex;
  flex-direction: column;
  /* 920px — iki pencere (mesaj ve ürün geçmişi) aynı genişlikte (kullanıcı
     kararı 2026-09-28, 2026-09-29'da 720'den genişletildi). Tek kaynak
     burası: geçmiş penceresinin ayrı bir genişlik kuralı YOK, yoksa biri
     değişince ikisi ayrışırdı. */
  width: min(920px, 100%);
  max-height: 100%;
  background: var(--p-kart);
  border-radius: var(--p-radius);
  box-shadow: 0 24px 60px rgba(31, 50, 57, .32);
  overflow: hidden;
}

.mesaj-bas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-a3);
  padding: var(--p-a4);
  border-bottom: 1px solid var(--p-cizgi);
}

.mesaj-kimlik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mesaj-firma {
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  color: var(--p-aksan-koyu);
}

.mesaj-urun { font-size: var(--p-yazi-lg); font-weight: 700; }

/* ---- SOHBET ARAÇLARI (2026-09-29) ---- */

.mesaj-araclar { display: flex; align-items: center; gap: var(--p-a2); flex: none; }

/* PENCERE ARAÇLARI — 25×25 kare, Ocean Sunset (kullanıcı kararı 2026-09-29).
   Her düğme İŞİNİN rengini taşıyor: arama Dark Teal, indirme Dark Cyan,
   temizleme Burnt Caramel, kapatma Brown Red. Duruşta zayıf zemin + güçlü
   ikon; üstüne gelince ikisi YER DEĞİŞTİRİYOR (zemin güçlü, ikon beyaz) —
   tablodaki mesaj kutusunun kuralıyla aynı, iki ayrı davranış öğrenmek
   gerekmesin.

   Renk düğmenin KENDİSİNDE, ailesinde değil: `.mesaj-kapat` portalın bütün
   pencerelerinde (süzgeç, geçmiş) aynı sınıf, dolayısıyla
   kapatma düğmesi her pencerede aynı kırmızıyı alıyor. */
/* SEÇİCİLER `.p-btn` İLE YAZILI (0,2,0). Bu düğmeler `p-btn sade` sınıfını
   da taşıyor ve `.p-btn.sade` min-height 44px ile şeffaf zemin veriyor; tek
   sınıflı bir kural (0,1,0) onu geçemiyor — ölçüldü: 26x44 ve zemin yok.
   Aynı özgüllükte ve DAHA SONRA yazıldığı için burası kazanıyor. */
.p-btn.mesaj-arac, .p-btn.mesaj-kapat {
  box-sizing: border-box;
  /* KUTU 35x35, İKON 25x25 (kullanıcı düzeltmesi 2026-09-29): ölçü ikonun,
     kutu onu saracak kadar büyük. Ortalama `inline-flex` + iki eksende
     `center` ile; ikon `::before` üzerinden çizildiği için kutu ölçüsü tek
     başına ortalamıyor, `<i>`nin de tam ölçüde olması gerekiyor. */
  width: 35px; height: 35px; min-width: 35px; min-height: 35px;
  padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px;
  /* DURUŞTA ARKA PLAN YOK (kullanıcı düzeltmesi): rengi yalnız ikon taşıyor.
     `.p-btn` dolu bir zemin veriyor, bu yüzden açıkça şeffafa çekiliyor. */
  background: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.p-btn.mesaj-arac i, .p-btn.mesaj-kapat i {
  width: 25px; height: 25px;
  display: block;
}
/* Maske çizimi `::before`den geliyor ve `1em`e göre ölçekleniyor — `<i>`ye
   verilen ölçü tek başına yetmiyor, kutunun içinde küçük kalıp kayık
   görünüyordu. */
.p-btn.mesaj-arac i::before, .p-btn.mesaj-kapat i::before {
  display: block; width: 100%; height: 100%; vertical-align: 0;
}

.p-btn.arac-ara     { color: var(--p-arac-ara); }
.p-btn.arac-indir   { color: var(--p-arac-indir); }
.p-btn.arac-temizle { color: var(--p-arac-temizle); }
.p-btn.mesaj-kapat  { color: var(--p-arac-kapat); }

/* Takas: `:focus-visible` de dahil — klavyeyle gezen kişi de aynı geri
   bildirimi görmeli. */
.p-btn.arac-ara:hover,     .p-btn.arac-ara:focus-visible,     .p-btn.arac-ara[aria-expanded="true"]
  { color: #fff; background: var(--p-arac-ara);     border-color: var(--p-arac-ara); }
.p-btn.arac-indir:hover,   .p-btn.arac-indir:focus-visible
  { color: #fff; background: var(--p-arac-indir);   border-color: var(--p-arac-indir); }
.p-btn.arac-temizle:hover, .p-btn.arac-temizle:focus-visible
  { color: #fff; background: var(--p-arac-temizle); border-color: var(--p-arac-temizle); }
.p-btn.mesaj-kapat:hover,  .p-btn.mesaj-kapat:focus-visible
  { color: #fff; background: var(--p-arac-kapat);   border-color: var(--p-arac-kapat); }

/* Arama şeridi başlığın ALTINDA açılıyor, akışın üstünde: arama kutusu
   yazının içinde değil, onu yöneten yerde durmalı. */
.sohbet-ara {
  display: flex;
  align-items: center;
  gap: var(--p-a2);
  padding: var(--p-a2) var(--p-a4);
  border-bottom: 1px solid var(--p-cizgi);
  background: var(--p-kart-2);
}

.sohbet-ara > i { width: 18px; height: 18px; color: var(--p-soluk); flex: none; }

.sohbet-ara .p-girdi {
  flex: 1;
  min-width: 0;
  min-height: var(--p-hedef-sm);
  height: var(--p-hedef-sm);
  font-size: var(--p-yazi-sm);
}

.sohbet-ara-sayac {
  flex: none;
  font-size: var(--p-yazi-xs);
  color: var(--p-ikincil);
  white-space: nowrap;
}

.sohbet-ara-gez { color: var(--p-soluk); min-width: 32px; padding: 0; }
.sohbet-ara-gez:hover { color: var(--p-ink); background: var(--p-kart); }
.sohbet-ara-gez i { width: 16px; height: 16px; }

/* Eşleşme vurgusu: hepsi soluk sarı, GEÇERLİ olan marka renginde. İkisi
   aynı olsaydı "kaçıncı eşleşmedeyim" sorusu sayaçtan okunmak zorunda
   kalırdı. */
.sohbet-vurgu {
  background: var(--amber-line);
  color: var(--p-ink);
  border-radius: 3px;
  padding: 0 2px;
}

.sohbet-vurgu.etkin {
  background: var(--p-aksan);
  color: #ffffff;
}

/* Temizleme onayı — pencerenin içinde, sarı zeminde: geri alınamayan bir
   şey yapılmıyor ama veri ekrandan kalkıyor, uyarı tonunda durması doğru. */
.sohbet-onay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--p-a3);
  padding: var(--p-a3) var(--p-a4);
  border-bottom: 1px solid var(--amber-line);
  background: var(--amber-bg);
  font-size: var(--p-yazi-sm);
  color: var(--amber-ink);
}

.sohbet-onay-dugmeler { display: flex; gap: var(--p-a2); flex: none; }

/* `.mesaj-kapat`ın eski gri/soluk kuralları KALDIRILDI (2026-09-29): Ocean
   Sunset kuralı yukarıda, bu satırlar aşağıda kaldığı için onu eziyordu. */

.mesaj-akis {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  gap: var(--p-a3);
  padding: var(--p-a4);
  background: var(--p-zemin);
}

/* Balonlar: tedarikçi solda beyaz, müşteri sağda marka renginde. Taraf
   `kim` alanından geliyor, ada bakılarak değil — firma adı değişirse
   balonlar taraf değiştirmesin. */
.balon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
  padding: var(--p-a3);
  border-radius: var(--p-radius);
}

.balon.tedarikci {
  align-self: flex-start;
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi);
}

.balon.musteri {
  align-self: flex-end;
  color: #ffffff;
  background: var(--p-aksan-koyu);
}

.balon-bas {
  display: flex;
  gap: var(--p-a2);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  color: var(--p-soluk);
}

.balon.musteri .balon-bas { color: rgba(255, 255, 255, .9); }   /* .7 → 5.5:1; .9 → 7.8:1 AAA */

.balon-bas { align-items: center; }
.balon-ad { flex: 1; min-width: 0; }


.balon-metin { font-size: var(--p-yazi-sm); line-height: 1.5; white-space: pre-wrap; }

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

/* GÜN AYRACI (WhatsApp kalıbı). Çizgi ortadan geçiyor, etiket ortada:
   akışın içinde bir kesme işareti olduğu tek bakışta okunsun. */
.gun-ayrac {
  display: flex;
  align-items: center;
  gap: var(--p-a3);
  margin: var(--p-a3) 0 var(--p-a2);
  color: var(--p-soluk);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
}
.gun-ayrac::before, .gun-ayrac::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--p-cizgi);
}
.gun-ayrac span {
  padding: 3px 10px;
  border: 1px solid var(--p-cizgi);
  border-radius: 999px;
  background: var(--p-kart-2);
  white-space: nowrap;
}

.mesaj-yaz {
  display: flex;
  /* Alan büyüdükçe tik ve Gönder ALTTA kalıyor: `center` olsaydı üç satırlık
     bir mesajda düğmeler ortaya kayar, yazarken yerleri değişirdi. */
  align-items: flex-end;
  gap: var(--p-a2);
  padding: var(--p-a3) var(--p-a4);
  border-top: 1px solid var(--p-cizgi);
}

/* Çok satırlı alan (2026-09-29). `resize: none` — yükseklik yazdıkça JS ile
   ayarlanıyor; elle tutamaç aynı şeyi söyleyen ikinci bir kural olurdu. */
.mesaj-yaz .p-girdi {
  flex: 1; min-width: 0;
  min-height: var(--p-hedef);
  max-height: 120px;
  padding-top: 10px; padding-bottom: 10px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}


.mesaj-gonder { min-width: var(--p-hedef); padding: 0; }

/* Gönder oku BÜYÜK (kullanıcı kararı 2026-09-29): 20 → 28px. Çizim
   `::before` üzerinden geldiği için orada da ezilmesi gerekiyor — `1em`
   yazı boyutundan türüyor, `<i>`ye verilen ölçüden değil. */
.mesaj-gonder i { width: 28px; height: 28px; }

.mesaj-gonder i::before { display: block; width: 100%; height: 100%; vertical-align: 0; }