
.navbar{
    background-color:var(--color-bg-navbar) !important;
    border-bottom:1px solid var(--color-border-soft);
}
.navbar a:hover{
    color:var(--color-accent) !important;
}
section h3{
    color:var(--color-text);
    font-family: var(--font-display);
    font-size:1.5rem;
}
section .links-tv-shows button{
    color:var(--color-text-muted);
    background-color:var(--color-bg-card);
    border:1px solid var(--color-border-soft);
}
section .links-tv-shows button.active{
    background-color:var(--color-accent) !important;
    color:var(--color-text);
    border:none;
}
section .links-tv-shows button:hover{
    background-color:var(--color-accent) !important;
    color:var(--color-text) !important;
    border:none !important;
}
.tv-shows-careds{
    cursor:pointer;
    opacity:0;
    transform:translateY(25px);
    animation:cardReveal .7s ease forwards;
}
@keyframes cardReveal {
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.tv-shows-postar{
    position:relative;
    width:100%;
    aspect-ratio: 2 / 3;
    overflow:hidden;
    border-radius:var(--radius-md);
    background-color:var(--color-bg-card);
    transition:transform .4s ease, box-shadow .4s ease;
}
.tv-shows-postar img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transition:transform .6s ease, filter .6s ease;
}
.tv-shows-postar::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0, 0, 0, .75),transparent 55% );
    opacity:0;
    transition:opacity .4s ease;
}
.tv-shows-careds:hover .tv-shows-postar{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0, 0, 0, .45)
}
.tv-shows-careds:hover .tv-shows-postar img{
    transform:scale(1.08);
    filter:brightness(.75);
}

.tv-shows-careds:hover .tv-shows-postar::after{
    opacity:1;
}
.tv-shows-rating{
    position:absolute;
    top:8px;
    left:8px;
    z-index:2;
    background-color:var(--color-bg-icon);
    color:var(--color-text);
    border-radius:5px;
    padding:4px 8px;
    font-weight:bold;
    border:1px solid var(--color-border-soft);
    transition:transform .4s ease,background-color .4s ease;
}
.tv-shows-careds:hover .tv-shows-rating{
    transform:translateY(-3px) scale(1.05);
    background-color:var(--color-accent);
}
.tv-shows-careds h4{
    color:var(--color-text);
    font-size:14px;
    margin:8px 0 2px;
    transition:transform .4s ease,color .4s ease;
}
.tv-shows-careds:hover h4{
    transform:translateX(4px);
    color:var(--color-accent);
}
.tv-shows-careds p{
    color:var(--color-text-subtle);
    font-size:12px;
    margin:0;
    transition:transform .4s ease,;
}

.tv-shows-careds:hover p{
    transform:translateX(4px);
}