/* Bileşen: Yüzen butonlar (WhatsApp · Telefon · Yukarı dön).
   Boyut ve renkler Tema Ayarları'ndan gelen özel belirteçlerle sürülür. */

.ar-yuzen {
  --ar-yuzen-boyut: 56px;

  position: fixed;
  inset: auto 0 0 0;
  z-index: 995;
  pointer-events: none;
}

.ar-yuzen__grup {
  position: absolute;
  bottom: clamp(16px, 3vw, 26px);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: auto;
}

.ar-yuzen__grup--sol { left: clamp(14px, 3vw, 24px); }
.ar-yuzen__grup--sag { right: clamp(14px, 3vw, 24px); }

.ar-yuzen__dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ar-yuzen-boyut);
  height: var(--ar-yuzen-boyut);
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: var(--ar-yuzen-renk, var(--ar-navy));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgb(15 27 70 / 22%);
  transition: transform var(--ar-transition), box-shadow var(--ar-transition);
}

.ar-yuzen__dugme:hover,
.ar-yuzen__dugme:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgb(15 27 70 / 30%);
}

.ar-yuzen__dugme:focus-visible {
  outline: 3px solid var(--ar-mint);
  outline-offset: 3px;
}

.ar-yuzen__dugme svg { display: block; }

/* Yukarı dön: açık zeminli olabildiği için ikon rengi ayrı belirteçten.
   Beyaz zemine beyaz ikon basmamak için varsayılan lacivert. */
.ar-yuzen__dugme--yukari {
  color: var(--ar-yuzen-ikon, var(--ar-navy));
  border: 1px solid rgb(15 27 70 / 12%);
}

.ar-yuzen__dugme--yukari:hover,
.ar-yuzen__dugme--yukari:focus-visible {
  color: var(--ar-yuzen-ikon, var(--ar-navy));
}

/* [hidden] özniteliği JS ile kaldırılır; JS çalışmazsa buton hiç görünmez
   ve klavye sırasına da girmez — çalışmayan bir kontrol göstermek yerine
   hiç göstermemek yeğdir. */
.ar-yuzen__dugme--yukari[hidden] { display: none; }

/* Popup açıkken sağdaki butonlar onun altında kalmasın. */
body.ar-pop-acik .ar-yuzen__grup--sag { bottom: calc(clamp(16px, 3vw, 26px) + 6px); }

@media (width <= 560px) {
  .ar-yuzen { --ar-yuzen-boyut: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-yuzen__dugme { transition: none; }
  .ar-yuzen__dugme:hover { transform: none; }
}