/* =============================================================
   SABİT WHATSAPP DÜĞMESİ — resmî glif, sağ/sol alt köşe
   ============================================================= */
.waf{
  position:fixed; bottom:max(18px, env(safe-area-inset-bottom, 0px) + 14px); z-index:120;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(18,140,76,.55), 0 4px 10px -4px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .22s ease, background .18s;
  -webkit-tap-highlight-color:transparent;
}
.waf--right{right:18px}
.waf--left{left:18px}
.waf:hover{transform:translateY(-3px) scale(1.04); background:#1EBE5A; box-shadow:0 18px 34px -12px rgba(18,140,76,.7)}
.waf:active{transform:translateY(0) scale(.98)}
.waf:focus-visible{outline:3px solid rgba(37,211,102,.35); outline-offset:3px}

.waf-ico{width:32px; height:32px; display:block; color:#fff; position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.waf-ring{position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; opacity:0;
  animation:wafPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite; z-index:1}
@keyframes wafPulse{
  0%{transform:scale(1); opacity:.55}
  70%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}

/* ipucu balonu */
.waf-tip{
  position:absolute; bottom:50%; transform:translateY(50%) translateX(6px);
  background:#101317; color:#fff; border-radius:10px; padding:9px 12px; white-space:nowrap;
  font:600 12px/1.15 "Outfit",system-ui,sans-serif; letter-spacing:.01em;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:0 12px 24px -16px rgba(0,0,0,.6);
}
.waf-tip span{display:block; margin-top:3px; font-weight:400; font-size:10.5px; opacity:.7}
.waf--right .waf-tip{right:calc(100% + 12px)}
.waf--left  .waf-tip{left:calc(100% + 12px); transform:translateY(50%) translateX(-6px)}
.waf:hover .waf-tip,.waf:focus-visible .waf-tip{opacity:1; transform:translateY(50%) translateX(0)}

@media (max-width:620px){
  .waf{width:50px; height:50px; bottom:max(14px, env(safe-area-inset-bottom, 0px) + 12px)}
  .waf-ico{width:28px; height:28px}
  .waf--right{right:14px} .waf--left{left:14px}
  .waf-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .waf, .waf-ring{transition:none !important; animation:none !important}
}