﻿/* ===========================
   CREATOR PROFILE
=========================== */

.creator-profile{
    margin:40px 0;
}

/* ===========================
   HEADER
=========================== */

.creator-header{
    display:flex;
    align-items:center;
    gap:30px;
    background:#101d3d;
    padding:30px;
    border-radius:15px;
    border:1px solid #1d3566;
    margin-bottom:30px;
}

.creator-avatar{

width:130px;
height:130px;

border-radius:50%;

overflow:hidden;

background:#00ffd5;

display:flex;

align-items:center;

justify-content:center;

font-size:60px;

font-weight:bold;

color:#071129;

flex-shrink:0;

}

.creator-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.creator-header h1{
    margin:0;
    color:#fff;
    font-size:34px;
}

.creator-header h3{
    margin:8px 0;
    color:#00ffd5;
    font-size:22px;
}

.creator-header p{
    color:#b8c7e0;
    margin-top:10px;
}

/* ===========================
   BADGES
=========================== */

.creator-badges{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.creator-badge{
    padding:8px 14px;
    border-radius:30px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
}

.badge-verified{
    background:#007bff;
}

.badge-top{
    background:#ff9800;
}

.badge-trending{
    background:#ff0066;
}

/* ===========================
   STATS
=========================== */

.creator-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:40px;
}

.stat-box{
    background:#101d3d;
    border:1px solid #1d3566;
    border-radius:12px;
    text-align:center;
    padding:25px;
    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-5px);
    border-color:#00ffd5;
}

.stat-box h2{
    margin:0;
    color:#00ffd5;
    font-size:32px;
}

.stat-box p{
    margin-top:10px;
    color:#ddd;
    font-size:16px;
}

/* ===========================
   SECTION TITLE
=========================== */

.section-title{
    color:#00ffd5;
    margin:40px 0 25px;
    font-size:28px;
}

/* ===========================
   EMPTY CARD
=========================== */

.card{
    background:#101d3d;
    border-radius:12px;
    border:1px solid #223355;
    padding:25px;
    text-align:center;
    color:#fff;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1000px){

.creator-stats{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.creator-header{
    flex-direction:column;
    text-align:center;
}

.creator-avatar{
    width:90px;
    height:90px;
    font-size:45px;
}

.creator-header h1{
    font-size:28px;
}

.creator-header h3{
    font-size:20px;
}

.creator-stats{
    grid-template-columns:1fr;
}

.creator-badges{
    justify-content:center;
}

}