.trending-anime {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    top: 40px;
    width: 100%;
}

.anime-card:nth-child(-n+4) {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: 220px; 
    padding: 10px;
    background: linear-gradient(to top,
    #977900c4 0%,      /* jos – violet regal închis */
    #ffffffa6 40%,     
    rgba(10, 10, 10, 0.5) 70%, 
    transparent 100%
    );
}

.anime-card {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px;
} 


.trending-section {
    background-color: #0e0e0e ;
    height: 360px;
}

.trending-title {
    display: inline-block; /* Containerul se mulează pe dimensiunea textului */
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
    letter-spacing: 1px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    left: 15px;
}




.anime-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* Plasează rangul la partea de jos */
    position: relative;
    height: 100%;  /* Se extinde pe toată înălțimea cardului */
}

.anime-title {
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    white-space: nowrap;
    color: #ffffff;
    transform: translateX(-50%) rotate(180deg);  /* Centrat pe orizontală și rotit pentru verticală */
    writing-mode: vertical-rl;  /* Scrierea pe vertical */  
}

/* Rangul - Conturul textului */
.anime-rank {
    font-size: 20px;
    font-weight: bold;
    color: transparent;  /* Culoare transparentă pentru text */
    -webkit-text-stroke: 2px #476452;  /* Conturul textului, 2px grosime și culoare implicită */
    width: 30px;  /* Lățimea rangului */
    height: 30px;  /* Înălțimea rangului */
    display: flex;
    align-items: center;
    justify-content: center;
     border-radius: 50%;  /* Formă rotundă */
    position: relative;
    z-index: 1;
}

/* Gradientul aplicat pe textul rangului */
.rank-gradient {
    background: linear-gradient(135deg, #ffffff, #ffcc00);
    width: 30px;  /* Lățimea rangului */
    height: 30px;  /* Înălțimea rangului */
    background-clip: text;
    color: transparent;  /* Textul este transparent pentru a arăta doar gradientul */
    font-size: 20px;
    font-weight: bold;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Ranguri cu culori diferite pentru contur */
.rank-1 {
    -webkit-text-stroke: 1px #476452;  /* Contur roșu */
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-1 {
    background-image: linear-gradient(135deg, #FFD700, #FF8C00);
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

/* Mută titlul pentru fiecare card de anime */
.title-1 { 
    bottom: 23.5px;  /* Distanta fata de rang (45px plus un mic spatiu pentru a fi mai sus) */
    left: 5.5px;  /* Centrat pe orizontală */
}

.card-1 { 
    width: 33px;
    height: 225px;
    left: 90px;
    bottom: 5px;
}

.rank-2 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
    -webkit-text-stroke: 1px #476452;  /* Contur albastru */
}

.rank-gradient-2 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
    background-image: linear-gradient(135deg, #00B8D4, #0288D1);
}

.title-2 {
    bottom: 23.5px;  /* Distanta fata de rang (45px plus un mic spatiu pentru a fi mai sus) */
    left: 5.5px;  
}

.card-2 { 
    width: 33px;
    height: 225px;
    left: 260px;
    bottom: 5px;
}

.rank-3 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
    -webkit-text-stroke: 1px #476452;
}

.rank-gradient-3 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
    background-image: linear-gradient(135deg, #E1BEE7, #F06292);
}

.title-3 {
    bottom: 23.5px;
    left: 5.5px;
}

.card-3 { 
    width: 33px;
    height: 225px;
    left: 427px;
    bottom: 5px;
}

.rank-4 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
    -webkit-text-stroke: 1px #476452;
}

.rank-gradient-4 {
    background-image: linear-gradient(135deg, #00C853, #00B0FF);
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-4 {
    bottom: 23.5px;
    left: 5.5px;
}

.card-4 { 
    width: 33px;
    height: 225px;
    left: 593px;
    bottom: 5px;
}

.rank-5 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-5 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-5 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-5 { 
    width: 33px;
    height: 225px;
    left: 761px;
    bottom: 5px;
}

.rank-6 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-6 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-6 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-6 { 
    width: 33px;
    height: 225px;
   left: 931px;
   bottom: 5px;
}

.rank-7 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-7 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-7 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-7 { 
    width: 33px;
    height: 225px;
    left: 1100px;
    bottom: 5px;
}

.rank-8 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-8 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-8 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-8 { 
    width: 33px;
    height: 225px;
    left: 1269px;
    bottom: 5px;
}


/* Ranguri cu culori diferite pentru contur */
.rank-9 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-9 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

/* Mută titlul pentru fiecare card de anime */
.title-9 { 
    bottom: 27.5px;  /* Distanta fata de rang (45px plus un mic spatiu pentru a fi mai sus) */
    left: 5.5px;  /* Centrat pe orizontală */
}

.card-9 { 
    width: 33px;
    height: 225px;
    left: 90px;
    bottom: 5px;
}

.rank-10 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-10 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-10 {
    bottom: 27.5px;  /* Distanta fata de rang (45px plus un mic spatiu pentru a fi mai sus) */
    left: 5.5px;  
}

.card-10 { 
    width: 33px;
    height: 225px;
    left: 260px;
    bottom: 5px;
}

.rank-11 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-11 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-11 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-11 { 
    width: 33px;
    height: 225px;
    left: 427px;
    bottom: 5px;
}

.rank-12 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-12 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-12 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-12 { 
    width: 33px;
    height: 225px;
    left: 593px;
    bottom: 5px;
}

.rank-13 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-13 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-13 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-13 { 
    width: 33px;
    height: 225px;
    left: 761px;
    bottom: 5px;
}

.rank-14 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-14 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-14 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-14 { 
    width: 33px;
    height: 225px;
   left: 931px;
   bottom: 5px;
}

.rank-15 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-15 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-15 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-15 { 
    width: 33px;
    height: 225px;
    left: 1100px;
    bottom: 5px;
}

.rank-16 {
    position: absolute;
    bottom: -10px;
    left: -6.5px;
}

.rank-gradient-16 {
    position: absolute;
    bottom: -12.5px;
    left: -8.5px;
}

.title-16 {
    bottom: 27.5px;
    left: 5.5px;
}

.card-16 { 
    width: 33px;
    height: 225px;
    left: 1269px;
    bottom: 5px;
}


.anime-images {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    position: relative; /* Asigură context de poziționare */
}

.anime-image {
    position: absolute; /* Poziționează toate imaginile pe același plan */
    width: 170px;
    height: 225px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out; /* Animare pentru mișcare */
}

.anime-image img {
    width: 170px;
    height: 225px;
    object-fit: cover;
    border-radius: 8px;
}

/* Poziționăm fiecare imagine ușor diferit pentru a se suprapune */
.image-1 {
    top: -190px;
    left: 125px;
}

.image-2 {
    top: -190px;
    left: 343px;
}

.image-3 {
    top: -190px;
    left: 558px;
}

.image-4 {
    top: -190px;
    left: 772px;
}

.image-5 {
    top: -190px;
    left: 987.5px;
}

.image-6 {
    top: -190px;
    left: 1205.5px;
}

.image-7 {
    top: -190px;
    left: 1422.5px;
}

.image-8 {
    top: -190px;
    left: 1640px;
}

/* Poziționăm fiecare imagine ușor diferit pentru a se suprapune */
.image-9 {
    top: -190px;
    left: 125px;
}

.image-10 {
    top: -190px;
    left: 343px;
}

.image-11 {
    top: -190px;
    left: 558px;
}

.image-12 {
    top: -190px;
    left: 772px;
}

.image-13 {
    top: -190px;
    left: 987.5px;
}

.image-14 {
    top: -190px;
    left: 1205.5px;
}

.image-15 {
    top: -190px;
    left: 1422.5px;
}

.image-16 {
    top: -190px;
    left: 1640px;
}


.anime-rating {
    position: absolute;
    top: 6px;
    right: 13px;
    background: linear-gradient(900deg, #ffffff, #ffcc00);
    color: #000000;
    font-weight: bold;
    padding: 3px 6px; /* mai mic pe verticală și orizontală */
    border-radius: 18px; /* adaptat la noul padding */
    font-size: 13px; /* puțin mai mic */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.322);
    z-index: 2;
}