/* WhatsApp yuvarlak buton + sohbet balonu (9 Kasim 2026). Kaynak: tasarimcinin whatsapp-button-example.html.
   Sayfa css'inden SONRA yuklenir (buton 56px -> 72px). Balonun HTML'i soho-wa.js ile eklenir. */
.whatsapp-icon {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(90deg, #34ec7a, #30932a);
  box-shadow: 0 12px 32px rgba(48,147,42,.45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.whatsapp-icon:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 38px rgba(48,147,42,.55); }
.whatsapp-icon svg { width: 36px; height: 36px; fill: #fff; }

.wa-teaser {
  position: fixed; right: 22px; bottom: 104px; z-index: 30;
  width: 290px; max-width: calc(100vw - 44px); box-sizing: border-box;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(8,8,61,.16);
  padding: 16px 18px 18px; animation: waTeaserIn .32s ease both;
  font-family: "Poppins", Arial, sans-serif; text-align: left;
}
.wa-teaser[hidden] { display: none; }
.wa-teaser::after {
  content: ''; position: absolute; right: 28px; bottom: -8px; width: 16px; height: 16px;
  background: #fff; transform: rotate(45deg); border-radius: 3px;
}
.wa-teaser-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent; cursor: pointer;
  color: #242453; font-size: 13px; line-height: 1; padding: 6px; font-family: inherit;
}
.wa-teaser-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.wa-teaser-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(90deg, #34ec7a, #30932a);
}
.wa-teaser-avatar svg { display: block; width: 18px; height: 18px; fill: #fff; }
.wa-teaser-status {
  display: inline-flex; align-items: center; gap: 6px; color: #242453; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.wa-teaser-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34ec7a;
  box-shadow: 0 0 0 0 rgba(52,236,122,.6); animation: waDotPulse 1.8s ease-out infinite;
}
.wa-teaser p { margin: 0 0 14px; color: #08083d; font-size: 13.5px; line-height: 1.55; }
.wa-teaser .wa-teaser-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 0 18px; box-sizing: border-box;
  border: 0; border-radius: 999px; color: #fff; background: #b1a084; box-shadow: 0 10px 24px rgba(177,160,132,.32);
  font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .16s ease, transform .16s ease;
}
.wa-teaser .wa-teaser-cta:hover { background: #988567; color: #fff; transform: translateY(-1px); }
@keyframes waTeaserIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes waDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(52,236,122,.55); }
  70% { box-shadow: 0 0 0 7px rgba(52,236,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,236,122,0); }
}
@media (max-width: 520px) {
  .whatsapp-icon { right: 16px; bottom: 16px; }
  .wa-teaser { right: 16px; bottom: 96px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) { .wa-teaser, .wa-teaser-status::before { animation: none; } }