/* =====================================================================
   Sosyal medya ikonları — "premium marka karosu"
   Marka renginden degrade, üstte cam parlaması, altta derinlik gölgesi; ikon beyaz ve gölgeli.
   Kullanım: karoya --brand (renk) verilir; footer ve görev kartlarında marka sınıfından gelir.
   ===================================================================== */

:root {
    --bt-telegram: #229ed9;
    --bt-instagram: #e4405f;
    --bt-youtube: #ff0000;
    --bt-discord: #5865f2;
    --bt-kick: #2fa80f;
    --bt-twitter: #2a2d33;
}

/* ortak karo */
.social-icon-wrap,
.task-brand-icon,
.social-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0) 47%),
        linear-gradient(160deg, color-mix(in srgb, var(--brand, #6b7280) 88%, #fff), color-mix(in srgb, var(--brand, #6b7280) 78%, #000));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 8px 16px -8px var(--brand, #6b7280);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.25s ease;
}

.social-icon-wrap svg,
.social-icon-wrap i,
.task-brand-icon svg,
.social-icon-box svg {
    color: #fff;
    fill: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.social-icon-wrap i {
    color: #fff !important;
}

/* gradyanlı / renkli SVG parçalarını beyaza çevir (instagram degradesi dahil) */
.social-icon-box svg path,
.social-icon-box svg circle,
.social-icon-box svg rect {
    fill: #fff !important;
}

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

/* <img> tabanlı (kick, görev ikonları): koyu/renkli SVG'yi beyaz glife çevir */
.social-icon-box img,
.task-brand-icon img {
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)) !important;
}

.brand-kick-k {
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

/* — ana sayfa sosyal puan kartları — */
.social-icon-wrap {
    width: 46px;
    height: 46px;
}

/* eski marka tonlu arka planlar bu karoyla çakışmasın */
.social-icon-wrap.telegram,
.social-icon-wrap.twitter,
.social-icon-wrap.instagram,
.social-icon-wrap.kick,
.social-icon-wrap.youtube,
.social-card:hover .social-icon-wrap.telegram,
.social-card:hover .social-icon-wrap.twitter,
.social-card:hover .social-icon-wrap.instagram,
.social-card:hover .social-icon-wrap.kick,
.social-card:hover .social-icon-wrap.youtube {
    border: 0;
}

/* — görevler sayfası — */
.task-icon-box .task-brand-icon {
    width: 46px;
    height: 46px;
}

.task-icon-box .task-brand-icon img {
    width: 26px;
    height: 26px;
}

/* — footer — */
.social-icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
}

.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); }

.social-icon-box.instagram {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0) 47%),
        linear-gradient(45deg, #f9a03f 0%, #e4405f 45%, #833ab4 100%);
}

.social-icon-box svg,
.social-icon-box img {
    width: 18px;
    height: 18px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .social-icon-box:hover,
    .social-card:hover .social-icon-wrap,
    .task-card:hover .task-brand-icon {
        transform: translateY(-2px) scale(1.06);
        filter: brightness(1.08);
    }
}

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

/* footer.css'teki hover arka plan/kenarlık kuralları karoyu bozmasın */
.social-icon-box:hover,
.social-icon-box.telegram:hover,
.social-icon-box.kick:hover,
.social-icon-box.instagram:hover,
.social-icon-box.youtube:hover,
.social-icon-box.discord:hover,
.social-icon-box.twitter:hover {
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 10px 18px -8px var(--brand, #6b7280);
}

.social-icon-box:hover svg {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}