/* ═══════════════════════════════════════════════════════
   WUFFI RAILS — v45 deep-audit: 3 ortak sekme rayı + z-index token sistemi
   Daha önce 5 template'te tekrarlı CSS kopyaları vardı (Mesajlar+Bildirimler,
   Favoriler+Kaydedilenler, Araçlar+Blog) — burada DRY.
   ═══════════════════════════════════════════════════════ */

/* ─── z-index tokens (1234 !important çakışmalarına çözüm) ─── */
:root {
    --wf-z-base:      1;
    --wf-z-content:   10;
    --wf-z-sticky:    100;
    --wf-z-header:    1000;
    --wf-z-dock:      9999;
    --wf-z-modal:     10000;
    --wf-z-popover:   10500;
    --wf-z-toast:     20000;
    --wf-z-tooltip:   30000;
    --wf-z-overlay:   40000;
    --wf-z-max:       2147483000; /* iframe/full-screen takeover */
}

/* ─── Ortak sekme rayları (Aktivite/Koleksiyon/Keşfet) ─── */
.wf-act-tabs,
.wf-col-tabs,
.wf-kes-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.wf-act-tab,
.wf-col-tab,
.wf-kes-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #cfc6ef;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}

.wf-act-tab:hover,
.wf-col-tab:hover,
.wf-kes-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.wf-act-tab.on,
.wf-col-tab.on,
.wf-kes-tab.on {
    background: linear-gradient(135deg, #FFB923, #FFD78A);
    color: #13102b;
}

.wf-act-tab svg,
.wf-col-tab svg,
.wf-kes-tab svg {
    flex-shrink: 0;
}

/* Mobil: rayları biraz daha kompakt */
@media (max-width: 640px) {
    .wf-act-tabs,
    .wf-col-tabs,
    .wf-kes-tabs {
        gap: 4px;
        padding: 4px;
        margin-bottom: 10px;
    }
    .wf-act-tab,
    .wf-col-tab,
    .wf-kes-tab {
        padding: 9px 10px;
        font-size: 12.5px;
        gap: 6px;
    }
}