/* ═══════════════════════════════════════════════════════════
   Sosyal bağlantılar — sağ altta sabit, zarif cam düğmeler
   Varsayılan açık zemin içindir; koyu sahnelerde
   [data-ton="koyu"] ile krem tonuna döner.
   ═══════════════════════════════════════════════════════════ */

.sosyal {
  position: fixed;
  right: clamp(.9rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 70;
  display: grid;
  gap: clamp(.5rem, 1.1vh, .75rem);
}

.sosyal a {
  --boy: clamp(42px, 2.4vw + 32px, 52px);
  position: relative;
  width: var(--boy);
  height: var(--boy);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #24120A;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(36, 18, 10, .13);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: 0 6px 20px rgba(36, 18, 10, .12);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .42s cubic-bezier(.34, 1.4, .64, 1),
    background .32s ease, color .32s ease,
    border-color .32s ease, box-shadow .32s ease;
}

.sosyal svg { width: 46%; height: 46%; display: block; }

/* Koyu sahne — krem cam */
[data-ton="koyu"] .sosyal a {
  color: #F3EEE4;
  background: rgba(243, 238, 228, .13);
  border-color: rgba(243, 238, 228, .26);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

/* Üzerine gelince marka rengine döner */
.sosyal a:hover,
.sosyal a:focus-visible { transform: translateY(-4px) scale(1.06); }

.sosyal .s-wp:hover,
.sosyal .s-wp:focus-visible {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
}

.sosyal .s-ig:hover,
.sosyal .s-ig:focus-visible {
  background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(238, 42, 123, .4);
}

.sosyal a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Etiket — soldan açılır, yalnızca imleçli cihazlarda */
.sosyal a::after {
  content: attr(data-etiket);
  position: absolute;
  right: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: .42rem .72rem;
  border-radius: 999px;
  font: 700 .72rem/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  background: #24120A;
  color: #F3EEE4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .sosyal a:hover::after,
  .sosyal a:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@media (hover: none) { .sosyal a::after { content: none; } }

/* Zayıf cihaz: cam bulanıklığı pahalı — düz zemine düş */
body.hafif .sosyal a {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, .82);
}
body.hafif[data-ton="koyu"] .sosyal a { background: rgba(36, 18, 10, .58); }

@media (prefers-reduced-motion: reduce) {
  .sosyal a, .sosyal a::after { transition-duration: .01ms; }
  .sosyal a:hover, .sosyal a:focus-visible { transform: none; }
}