/* =========================================================
   HIZLI SOSYAL MEDYA (hizli-sosyal-medya.php ile eşleşir)
   Masaüstü: sağ ortada dikey beyaz cam şerit + neon çizgi uçları
   Mobil: kenarda küçük sekme, dokununca açılır
   Konum: --hsm-right
   ========================================================= */
.hsm {
    --hsm-right: 22px;
    position: fixed;
    right: var(--hsm-right);
    top: 50%;
    transform: translateY(-50%);
    z-index: 94;
}

/* neon çizgi uçları (zemin çizgisiyle aynı dil) */
.hsm::before,
.hsm::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 46px;
    margin-left: -1px;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 217, 255, .85));
}
.hsm::before { bottom: 100%; margin-bottom: 8px; background: linear-gradient(0deg, #00d9ff, rgba(0, 217, 255, 0)); }
.hsm::after  { top: 100%;    margin-top: 8px;    background: linear-gradient(180deg, #00d9ff, rgba(0, 217, 255, 0)); }

.hsm-handle { display: none; }

/* ---------- ŞERİT ---------- */
.hsm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(10, 90, 170, .14);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(240, 248, 255, .86) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(37, 195, 253, .18);
}

.hsm-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6f6ff, #cdeeff);
    color: #0a8fe8;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hsm-link svg { width: 21px; height: 21px; }
.hsm-link:focus-visible { outline: 2px solid #0a8fe8; outline-offset: 2px; }

/* marka renkleri (hover) */
.hsm-link:hover { color: #fff; transform: translateX(-3px); }
.hsm-ig:hover { background: linear-gradient(45deg, #f9a825 0%, #e1306c 50%, #833ab4 100%); box-shadow: 0 6px 16px -4px rgba(225, 48, 108, .7); }
.hsm-fb:hover { background: #1877f2; box-shadow: 0 6px 16px -4px rgba(24, 119, 242, .7); }
.hsm-yt:hover { background: #ff0000; box-shadow: 0 6px 16px -4px rgba(255, 0, 0, .65); }

/* yeni platformlar */
.hsm-x:hover  { background: #0f0f0f; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6); }
.hsm-in:hover { background: #0a66c2; box-shadow: 0 6px 16px -4px rgba(10, 102, 194, .7); }
.hsm-tt:hover { background: #0f0f0f; box-shadow: -2px -2px 0 0 #25f4ee, 2px 2px 0 0 #fe2c55, 0 6px 16px -4px rgba(0, 0, 0, .6); }

/* ipucu etiketi (solda açılır) */
.hsm-link::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    padding: 6px 12px;
    border-radius: 999px;
    background: #0b2a4a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(8px, -50%);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events: none;
}
@media (hover: hover) {
    .hsm-link:hover::after,
    .hsm-link:focus-visible::after { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
}

/* ---------- MOBİL ---------- */
@media (max-width: 900px) {
    .hsm { --hsm-right: 0px; }
    .hsm::before, .hsm::after { display: none; }

    .hsm-handle {
        display: grid;
        place-items: center;
        width: 26px;
        height: 60px;
        padding: 0;
        border: 0;
        border-radius: 14px 0 0 14px;
        background: linear-gradient(135deg, #1aa7ff, #0a7fe0);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 8px 20px -6px rgba(0, 150, 255, .75);
    }
    .hsm-handle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
    .hsm-handle svg { width: 18px; height: 18px; transition: transform .3s ease; }
    .hsm.is-open .hsm-handle svg { transform: rotate(180deg); }

    .hsm-list {
        position: absolute;
        right: 100%;
        top: 50%;
        margin-right: 8px;
        gap: 6px;
        padding: 6px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(14px, -50%);
        transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .35s;
    }
    .hsm.is-open .hsm-list { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); transition-delay: 0s; }

    .hsm-link { width: 40px; height: 40px; }
    .hsm-link svg { width: 19px; height: 19px; }
    .hsm-link::after { display: none; }
    .hsm-link:hover { transform: none; }
}

/* ---------- TASARIM İYİLEŞTİRMELERİ ---------- */
/* masaüstü: ikonlar sırayla süzülerek gelir (hover transform'unu bozmamak için yalnızca 'backwards') */
@media (min-width: 901px) {
    .hsm-link { animation: hsmIn .6s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms + 350ms); }
    @keyframes hsmIn { from { opacity: 0; transform: translateX(18px) scale(.8); } }
}

/* kısa ekranlarda (düşük yükseklik) şerit sığsın: 5-6 ikon olunca da taşmaz */
@media (min-width: 901px) and (max-height: 640px) {
    .hsm-list { gap: 5px; padding: 6px; }
    .hsm-link { width: 38px; height: 38px; }
    .hsm-link svg { width: 18px; height: 18px; }
    .hsm::before, .hsm::after { height: 26px; }
}
@media (max-width: 900px) and (max-height: 560px) {
    .hsm-link { width: 34px; height: 34px; }
    .hsm-link svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .hsm-list, .hsm-link, .hsm-link::after, .hsm-handle svg { transition: none; animation: none; }
}