/* ==========================================================
   Sosyal platform katmanı (views/layouts/main.php):
   - Sabit "Paylaş" düğmesi (.sp-fab) + yukarı çık düğmesiyle çakışmama
   - Başlıktaki bildirim zili yeri (.hdr-bell → cmNotifBellHtml())
   - Marka alt satırı ("Listeler · Testler · Gündem · Topluluk")
   Renkler site.css değişkenlerinden gelir; koyu tema kendiliğinden uyar.
   ========================================================== */

/* ---------- Marka alt satırı: daha uzun metin, daha sıkı harf aralığı ---------- */
.brand-tag { letter-spacing: .1em; }

/* ---------- Bildirim zili (başlık araçları) ---------- */
/* Kapsayıcı yalnızca yerleşimi verir: açılır panel bu kutuya göre konumlanabilir (position: absolute) */
.hdr-bell { position: relative; flex: none; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
    .hdr-bell { margin-right: -2px; }
}

/* ---------- Sabit "Paylaş" düğmesi ---------- */
.sp-fab {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 41;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 20px 0 18px;
    border-radius: 999px;
    background: var(--grad); color: #fff;
    font: 800 15px/1 var(--f-head);
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(46, 91, 255, .38), 0 2px 6px rgba(15, 23, 42, .12);
    transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
.sp-fab i { font-size: 16px; }
.sp-fab:hover, .sp-fab:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(46, 91, 255, .45), 0 2px 6px rgba(15, 23, 42, .12); }
.sp-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 3px; }
.sp-fab:active { transform: translateY(0) scale(.97); }
[data-theme="dark"] .sp-fab { box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }

/* Mobil menü açıkken gizle */
body.menu-open .sp-fab { opacity: 0; pointer-events: none; }

/* Yukarı çık düğmesi Paylaş düğmesinin üstüne çıkar (aynı sağ kenar, çakışma yok) */
.sp-fab ~ .back-to-top {
    right: calc(19px + env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}

/* Topluluk ana sayfasının kendi mobil düğmesi (.cm-fab): aynı görünüm, güvenli alan ve yukarı çık düğmesiyle çakışmama */
.cm-fab {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 899px) {
    body:has(.cm-fab) .back-to-top {
        right: calc(19px + env(safe-area-inset-right, 0px));
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }
}

/* Ortada duran ilerleme hapları (liste haberleri, galeri) ile çakışmasın: telefonda düğmeler bir sıra yukarı */
@media (max-width: 640px) {
    body:has(.lst-progress) .sp-fab,
    body:has(.mhg-progress) .sp-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    body:has(.lst-progress) .sp-fab ~ .back-to-top,
    body:has(.mhg-progress) .sp-fab ~ .back-to-top { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}

/* Telefonda daha derli toplu */
@media (max-width: 640px) {
    .sp-fab { min-height: 50px; padding: 0 18px 0 16px; font-size: 14.5px; }
}

/* Yazdırırken gizle */
@media print { .sp-fab { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sp-fab { transition: none; } .sp-fab:hover { transform: none; } }