.footer-head {
    padding: 25px;
    background-color: rgba(31, 35, 64, 1);
}

.logo-area img {
    width: 150px;
}

.category-ul {
    display: flex;
    gap: 25px;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 5px;
    background-color: rgba(22, 26, 51, 1);
    border-radius: 25px;
}

.category-ul li {
    padding: 5px 20px;
    border-radius: 25px;
    color: #fff;
}

.category-ul li .nav-link {
    padding: 5px 20px;
}

.category-ul li.active {
    background-color: #fff;
    color: rgba(22, 26, 51, 1);
}

.category-ul li a {
    color: inherit;
    font-size: 16px;
}

.platforms-area {
    display: flex;
    gap: 15px;
    margin-right: 50px;
}

.platforms-area i {
    color: #fff;
    font-size: 38px;
}

.footer-body {
    padding: 25px 25px 0 25px;
    background-color: rgba(22, 26, 51, 1);
}

.list-area .platform-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(31, 35, 64, 1);
    border-radius: 0.5rem;
}

.list-area .platform-icon-circle {
    width: 50px;
    height: 50px;
    background-color: rgba(22, 26, 51, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: #fff;
    font-size: 23px;
}

.list-area .platform-info {
    flex-grow: 1;
    color: #fff;
}

.list-area .platform-info .browse {
    color: rgba(141, 147, 191, 1);
    font-size: 14px;
}

.list-area .platform-info .name {
    font-size: 16px;
    color: #fff;
}

.list-area .service-count {
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(141, 147, 191, 1);
}

.list-area .platform-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 20px;
}

.platform-card:hover {
    background-color: #fff;
}


.list-area .platform-card:hover .platform-info .name {
    font-size: 16px;
    color: var(--text-primary);
}


.platform-card.instagram:hover .platform-icon-circle {
    background: linear-gradient(135deg, rgba(147, 51, 234, 1), rgba(219, 39, 119, 1));
}

.platform-card.tiktok:hover .platform-icon-circle {
    background: linear-gradient(135deg, #25f4ee, #fe2c55);
    /* TikTok */
}

.platform-card.facebook:hover .platform-icon-circle {
    background: linear-gradient(135deg, #1877f2, #3b5998);
    /* Facebook */
}

.platform-card.youtube:hover .platform-icon-circle {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    /* YouTube */
}

.platform-card.spotify:hover .platform-icon-circle {
    background: linear-gradient(135deg, #1db954, #1ed760);
    /* Spotify */
}

.platform-card.kick:hover .platform-icon-circle {
    background: linear-gradient(135deg, #53fc18, #0f0);
    /* Kick (yeşil) */
}

.platform-card.telegram:hover .platform-icon-circle {
    background: linear-gradient(135deg, #0088cc, #229ed9);
    /* Telegram */
}

.platform-card.twitch:hover .platform-icon-circle {
    background: linear-gradient(135deg, #9146ff, #6441a5);
    /* Twitch */
}

.platform-card.twitter:hover .platform-icon-circle {
    background: linear-gradient(135deg, #1da1f2, #0d8ddb);
    /* Twitter */
}

.platform-card.discord:hover .platform-icon-circle {
    background: linear-gradient(135deg, #5865f2, #404eed);
    /* Discord */
}

.platform-card.google:hover .platform-icon-circle {
    background: linear-gradient(135deg, #4285f4, #ea4335, #fbbc05, #34a853);
    /* Google renkleri */
}

.platform-card.linkedin:hover .platform-icon-circle {
    background: linear-gradient(135deg, #0077b5, #0e76a8);
    /* LinkedIn */
}

.platform-card.snapchat:hover .platform-icon-circle {
    background: linear-gradient(135deg, #fffc00, #ffe600);
}

.footer-bottom {
    font-size: 17px;
    color: #9ca3af;
}

@media (max-width: 992px) {
    .footer-head {
        padding: 5px;
    }

    .logo-area img {
        width: 120px;
    }

    .platforms-area {
        gap: 5px;
        margin-right: 0;
    }

    .platforms-area i {
        font-size: 25px;
    }

    .category-area {
        margin-bottom: 10px;
    }

    .category-ul {
        gap: 10px;
        background-color: rgba(31, 35, 64, 1);
    }

    .category-ul li {
        padding: 5px 10px
    }

    .category-ul li .nav-link {
        padding: 5px 10px;
        font-size: 14px;
        color: var(--text-secondary)
    }

    .category-ul li.active .nav-link {
        color: #000
    }

    .list-area .platform-grid {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 10px;
        row-gap: 10px;
    }
}