:root { --utp-wa-color:#25D366; }

.utp-wa-wrap { position:fixed; bottom:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.utp-pos-right { right:18px; }
.utp-pos-left  { left:18px; align-items:flex-start; }

.utp-wa-main, .utp-wa-item {
  position: relative;
  width:56px; height:56px; border-radius:999px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--utp-wa-color); color:#fff; text-decoration:none;
  box-shadow:0 8px 28px rgba(0,0,0,.2); transition:transform .15s, box-shadow .15s, opacity .15s;
}
.utp-wa-item { width:52px; height:52px; background:#36d67b; }

/* Aç/kapa */
.utp-wa-items { display:flex; flex-direction:column; gap:10px; max-height:0; overflow:hidden; }
.utp-wa-wrap.open .utp-wa-items { max-height:600px; }
/* İSTENEN: Açıldığında ana düğmeyi gizle */
.utp-wa-wrap.open .utp-wa-main{ display:none; }

/* Görüntülenen img ikonlar */
.utp-img{ width:28px; height:28px; object-fit:contain; display:block; filter:none; opacity:1; mix-blend-mode:normal; image-rendering:auto; }

/* Ana buton etiket (kapalıyken görünür) */
.utp-main-label{
  position:absolute; top:50%; transform:translateY(-50%);
  margin-right:8px; right:68px;
  background:#fff; color:#222; border-radius:999px; padding:6px 10px;
  font: 500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  white-space:nowrap;
}
.utp-pos-left .utp-main-label{ left:68px; right:auto; }
.utp-wa-wrap.open .utp-main-label{ display:none; }

/* Hover tooltip for items */
.utp-wa-item::after{
  content: attr(data-label);
  position:absolute; top:50%; transform:translateY(-50%);
  right:64px; background:#fff; color:#222;
  border-radius:999px; padding:6px 10px;
  font: 500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.utp-pos-left .utp-wa-item::after{ left:64px; right:auto; }

.utp-wa-item:hover::after{ opacity:1; transform:translateY(-50%) translateX(-2px); }
.utp-pos-left .utp-wa-item:hover::after{ transform:translateY(-50%) translateX(2px); }

/* Arka planlar */
.utp-wa-item.item--phone{ background:#2cd46f; }
.utp-wa-item.item--wa   { background:#25D366; }
.utp-wa-item.item--ig   { background:#f58529; }
.utp-wa-item.item--mail { background:#00a2ff; }
.utp-wa-item.item--close{ background:#9bd5a8; } /* X butonu en altta */

/* Hover efekti */
.utp-wa-main:hover, .utp-wa-item:hover { transform:translateY(-1px); box-shadow:0 10px 32px rgba(0,0,0,.26); }

@media (max-width:480px){
  .utp-wa-wrap{ bottom:14px; }
  .utp-main-label{ display:none; } /* mobilde sabit etiket gizli */
}

/* Ana düğmede ikon yoksa yedek SVG göster */
.utp-wa-main img[src=""], .utp-wa-main img:not([src]) { display:none; }
.utp-wa-main::before{
  content:"";
  width:24px;height:24px; display:block;
  background-repeat:no-repeat; background-size:contain;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 2H4a2 2 0 0 0-2 2v14l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 7h12v2H6V7zm0 4h8v2H6v-2z"/></svg>');
}