/* =====================================================================
   Sosyal medya ikonları — "sakin marka çipi"
   Koyu yüzey, markadan hafif ton + ince kenarlık, ikon düz marka renginde.
   Kullanım: çipe --brand (renk) verilir. Tek kaynak; ana sayfa sosyal puanlar,
   görevler sayfası ve footer aynı çipi kullanır.
   ===================================================================== */

:root {
    --bt-telegram: #229ed9;
    --bt-instagram: #e4405f;
    --bt-youtube: #ff0000;
    --bt-discord: #5865f2;
    --bt-kick: #53fc18;
    --bt-twitter: #e1e8ed;
}

.social-icon-wrap,
.task-brand-icon,
.topbar-brand-chip,
.social-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand, #9ca3af) 12%, var(--surface-900, #0b0b0e));
    border: 1px solid color-mix(in srgb, var(--brand, #9ca3af) 26%, transparent);
    box-shadow: none;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.social-icon-wrap i,
.social-icon-wrap .brand-kick-k,
.task-brand-icon i,
.task-brand-icon .brand-kick-k,
.topbar-brand-chip i,
.topbar-brand-chip .brand-kick-k,
.social-icon-box svg,
.social-icon-box svg path,
.social-icon-box .brand-kick-k {
    color: var(--brand, #9ca3af) !important;
    fill: var(--brand, #9ca3af);
    filter: none;
    text-shadow: none;
    transition: transform 0.2s ease;
}

.social-icon-box svg defs {
    display: none;
}

.brand-kick-k {
    font-family: Arial, sans-serif;
    font-weight: 900;
    line-height: 1;
}

/* — ana sayfa sosyal puan kartları ve görevler sayfası — */
.social-icon-wrap,
.task-icon-box .task-brand-icon {
    width: 44px;
    height: 44px;
}

.social-icon-wrap i,
.task-brand-icon i {
    font-size: 22px;
}

.social-icon-wrap .brand-kick-k,
.task-brand-icon .brand-kick-k {
    font-size: 21px;
}

/* — üst şerit alt linkleri — */
.topbar-brand-chip {
    width: 24px;
    height: 24px;
    border-radius: 8px;
}

.topbar-brand-chip i {
    font-size: 14px !important;
    line-height: 1;
}

.topbar-brand-chip .brand-kick-k {
    font-size: 13px;
}

.telegram-link:hover .topbar-brand-chip {
    background: color-mix(in srgb, var(--brand, #9ca3af) 20%, var(--surface-900, #0b0b0e));
    border-color: color-mix(in srgb, var(--brand, #9ca3af) 50%, transparent);
}

/* — footer — */
.social-icon-box {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
}

.social-icon-box svg {
    width: 17px;
    height: 17px;
}

.social-icon-box .brand-kick-k {
    font-size: 17px;
}

.social-icon-box.telegram { --brand: var(--bt-telegram); }
.social-icon-box.instagram { --brand: var(--bt-instagram); }
.social-icon-box.youtube { --brand: var(--bt-youtube); }
.social-icon-box.discord { --brand: var(--bt-discord); }
.social-icon-box.kick { --brand: var(--bt-kick); }
.social-icon-box.twitter { --brand: var(--bt-twitter); }

/* hover */
.social-icon-box:hover,
.social-card:hover .social-icon-wrap,
.task-card:hover .task-brand-icon {
    background: color-mix(in srgb, var(--brand, #9ca3af) 20%, var(--surface-900, #0b0b0e));
    border-color: color-mix(in srgb, var(--brand, #9ca3af) 50%, transparent);
}

.social-icon-box:hover svg,
.social-icon-box:hover .brand-kick-k,
.social-card:hover .social-icon-wrap i,
.social-card:hover .social-icon-wrap .brand-kick-k,
.task-card:hover .task-brand-icon i,
.task-card:hover .task-brand-icon .brand-kick-k {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .social-icon-wrap,
    .task-brand-icon,
    .social-icon-box,
    .social-icon-wrap i,
    .social-icon-box svg {
        transition: none;
    }
}