/* Ana sayfa: sağ alt köşedeki 3 çizgili menü düğmesi. Açılınca aşağıdan yukarı: Topluluk, WhatsApp, Instagram (hepsi aynı hizada ve boyutta). */
.hs-fab { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1500; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; --fab: 44px}
.hs-fab__btn, .hs-fab__item { width: var(--fab); height: var(--fab); border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; text-decoration: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); transition: transform .18s ease, box-shadow .18s ease, background .18s ease}
.hs-fab__btn { background: #9b1c2a; color: #fff; position: relative; box-shadow: 0 8px 22px -6px rgba(155, 28, 42, .6), 0 2px 6px rgba(0, 0, 0, .3)}
.hs-fab__btn:hover, .hs-fab__item:hover { transform: scale(1.07)}
.hs-fab__btn:active, .hs-fab__item:active { transform: scale(.96)}
.hs-fab__btn:focus-visible, .hs-fab__item:focus-visible { outline: 3px solid #fff; outline-offset: 2px}
.hs-fab__bars { width: 18px; height: 13px; position: relative; display: block}
.hs-fab__bars i { position: absolute; left: 0; right: 0; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .18s ease, top .22s ease}
.hs-fab__bars i:nth-child(1) { top: 0}
.hs-fab__bars i:nth-child(2) { top: 5.4px}
.hs-fab__bars i:nth-child(3) { top: 10.8px}
.hs-fab.is-open .hs-fab__bars i:nth-child(1) { top: 5.4px; transform: rotate(45deg)}
.hs-fab.is-open .hs-fab__bars i:nth-child(2) { opacity: 0}
.hs-fab.is-open .hs-fab__bars i:nth-child(3) { top: 5.4px; transform: rotate(-45deg)}
.hs-fab__list { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none}
.hs-fab__list li { position: relative; display: block}
.hs-fab__item svg { width: 22px; height: 22px; display: block}
.hs-fab__item--topluluk { background: #2e3c54; color: #8ab4f8; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .55), 0 0 0 1.5px #5c7096 inset}
.hs-fab__item--wa { background: #25D366}
.hs-fab__item--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.hs-fab__tip { position: absolute; right: calc(var(--fab) + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--kart, #343739); color: var(--yazi, #fff); border: 1px solid var(--cizgi, #4f5153); border-radius: 999px; padding: 7px 14px; font: 600 13px/1 var(--font, inherit); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); pointer-events: none}
/* kapalıyken gizli; açılırken sırayla yukarı doğru belirir */
.hs-fab__list li { opacity: 0; transform: translateY(12px) scale(.9); visibility: hidden; transition: opacity .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .22s}
.hs-fab.is-open .hs-fab__list li { opacity: 1; transform: none; visibility: visible; transition-delay: 0s}
.hs-fab.is-open .hs-fab__list li:nth-child(2) { transition-delay: .04s}
.hs-fab.is-open .hs-fab__list li:nth-child(3) { transition-delay: .08s}
@media (min-width: 861px) { .hs-fab { right: 24px; bottom: 24px; --fab: 48px} .hs-fab__item svg { width: 24px; height: 24px}}
@media (prefers-reduced-motion: reduce) { .hs-fab__btn, .hs-fab__item, .hs-fab__bars i, .hs-fab__list li { transition: none}}
@media print { .hs-fab { display: none}}
body.ap-menu-open .hs-fab, html.kl-lock .hs-fab { display: none}