/* =========================================================
   WENJYO
   Style.css Oficial
   Versão 1.0
=========================================================*/


/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

background:#090909;

    color:#ffffff;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    line-height:1.5;

    overflow-x:hidden;

}


/*=========================
CORES
=========================*/

:root{

--cor-principal:#8B5CF6;

--cor-hover:#7C3AED;

--cor-fundo:#090909;

--cor-card:#171717;

--cor-card2:#202020;

--cor-texto:#F2F2F2;

--cor-cinza:#B0B0B0;

--cor-borda:#2A2A2A;

--sombra:
0 15px 40px rgba(0,0,0,.45);

}


/*=========================
LINKS
=========================*/

a{

text-decoration:none;

color:inherit;

transition:.30s;

}


img{

display:block;

max-width:100%;

}


/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--cor-principal);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--cor-hover);

}


/*=========================
HEADER
=========================*/

header{

position:sticky;

top:0;

z-index:9999;

height:75px;

background:#0d0d0d;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 7%;

border-bottom:1px solid #1d1d1d;

backdrop-filter:blur(10px);

}


/*=========================
LOGO
=========================*/

.logo{

font-size:34px;

font-weight:700;

letter-spacing:3px;

color:var(--cor-principal);

}


/*=========================
MENU
=========================*/

nav{

display:flex;

gap:35px;

}


nav a{

font-size:16px;

font-weight:600;

position:relative;

}


nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--cor-principal);

transition:.3s;

}


nav a:hover{

color:var(--cor-principal);

}


nav a:hover::after{

width:100%;

}


/*=========================
CONTAINER
=========================*/

.container{

width:92%;

max-width:1400px;

margin:auto;

}


/*=========================
BANNER
=========================*/

.banner{

position:relative;

height:650px;

overflow:hidden;

background:#000;

}


.banner img{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.38);

animation:fadeBanner .8s;

}


.banner-info{

position:absolute;

left:8%;

bottom:80px;

max-width:650px;

}


.banner-info h1{

font-size:54px;

margin-bottom:18px;

font-weight:700;

}


.banner-info p{

font-size:18px;

color:#dddddd;

margin-bottom:35px;

}


.banner-info a{

display:inline-block;

padding:16px 40px;

background:var(--cor-principal);

border-radius:8px;

font-size:18px;

font-weight:700;

transition:.30s;

}


.banner-info a:hover{

background:var(--cor-hover);

transform:translateY(-3px);

}


/*=========================
BOTÕES DO BANNER
=========================*/

.banner-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:32px;

background:rgba(0,0,0,.45);

color:white;

transition:.30s;

}


.banner-btn:hover{

background:var(--cor-principal);

}


.anterior{

left:30px;

}


.proximo{

right:30px;

}


/*=========================
INDICADORES
=========================*/

.indicadores{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:12px;

}


.ponto{

width:13px;

height:13px;

border-radius:50%;

background:white;

opacity:.35;

cursor:pointer;

transition:.30s;

}


.ponto.ativo{

opacity:1;

background:var(--cor-principal);

transform:scale(1.3);

}


/*=========================
TÍTULOS DAS SEÇÕES
=========================*/

.titulo-secao{

font-size:34px;

margin:50px 0 25px;

font-weight:700;

padding-left:5%;

}


/*=========================
ANIMAÇÕES
=========================*/

@keyframes fadeBanner{

from{

opacity:0;

transform:scale(1.05);

}

to{

opacity:1;

transform:scale(1);

}

}

/*=========================================================
SEÇÕES
=========================================================*/

.secao{

padding:20px 5% 50px;

}

.secao:last-child{

padding-bottom:80px;

}


/*=========================================================
GRID DE CARDS
=========================================================*/

.cards{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:28px;

margin-top:20px;

}


/*=========================================================
CARD
=========================================================*/

.card{

background:var(--cor-card);

border-radius:14px;

overflow:hidden;

transition:.35s;

box-shadow:var(--sombra);

border:1px solid transparent;

position:relative;

}

.card:hover{

transform:translateY(-10px);

border-color:var(--cor-principal);

}

.card img{

width:100%;

height:330px;

object-fit:cover;

transition:.4s;

}

.card:hover img{

transform:scale(1.08);

}


/*=========================================================
CONTEÚDO DO CARD
=========================================================*/

.card-conteudo{

padding:16px;

}

.card h3{

font-size:19px;

margin-bottom:10px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.card p{

font-size:14px;

color:var(--cor-cinza);

margin-bottom:8px;

}


/*=========================================================
BADGES
=========================================================*/

.badges{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-bottom:14px;

}

.badge{

background:#272727;

padding:5px 12px;

border-radius:30px;

font-size:12px;

color:#DDD;

}


/*=========================================================
BOTÃO DO CARD
=========================================================*/

.card a{

display:block;

text-align:center;

padding:12px;

background:var(--cor-principal);

font-weight:bold;

border-radius:8px;

margin-top:14px;

}

.card a:hover{

background:var(--cor-hover);

}


/*=========================================================
CATÁLOGO
=========================================================*/

.cabecalho-catalogo{

padding:50px 5% 20px;

}

.cabecalho-catalogo h1{

font-size:42px;

margin-bottom:10px;

}

.cabecalho-catalogo p{

color:var(--cor-cinza);

font-size:17px;

}


/*=========================================================
CATÁLOGO GRID
=========================================================*/

.catalogo{

padding:10px 5% 60px;

}


/*=========================================================
PAGINAÇÃO
=========================================================*/

.paginacao{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:12px;

margin-top:50px;

}

.paginacao button{

width:45px;

height:45px;

border:none;

border-radius:8px;

background:#202020;

color:white;

cursor:pointer;

font-size:16px;

transition:.3s;

}

.paginacao button:hover{

background:var(--cor-principal);

}

.paginacao button.ativa{

background:var(--cor-principal);

}


/*=========================================================
LETRAS
=========================================================*/

.letras{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(55px,1fr));

gap:15px;

padding:50px 5%;

}

.letras a{

display:flex;

justify-content:center;

align-items:center;

height:60px;

background:#1b1b1b;

border-radius:10px;

font-size:22px;

font-weight:bold;

transition:.3s;

border:1px solid transparent;

}

.letras a:hover{

background:var(--cor-principal);

border-color:white;

transform:translateY(-5px);

}


/*=========================================================
TÍTULO DAS LETRAS
=========================================================*/

.titulo-letras{

padding:50px 5% 20px;

font-size:34px;

}


/*=========================================================
EFEITO GERAL
=========================================================*/

.card,
.letras a,
.paginacao button{

transition:
transform .3s,
background .3s,
border .3s,
box-shadow .3s;

}

.card:hover{

box-shadow:

0 20px 45px rgba(139,92,246,.25);

}

/*=========================================================
PÁGINA DE DETALHES
=========================================================*/


.pagina-detalhes{

width:100%;

}


/*=========================================================
BANNER DETALHES
=========================================================*/


.banner-detalhes{

width:100%;

height:550px;

position:relative;

overflow:hidden;

}


.banner-detalhes::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
to bottom,
transparent,
#090909
);

}



.banner-detalhes img{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.45);

}



/*=========================================================
INFORMAÇÕES DO FILME
=========================================================*/


.bloco-informacao{

width:90%;

max-width:1300px;

margin:-120px auto 0;

position:relative;

z-index:2;

display:flex;

gap:40px;

align-items:flex-start;

}




.capa-detalhes{

width:280px;

height:420px;

object-fit:cover;

border-radius:15px;

box-shadow:

0 20px 50px rgba(0,0,0,.7);

}





.informacoes-filme{

flex:1;

padding-top:30px;

}



.informacoes-filme h1{

font-size:45px;

margin-bottom:25px;

}




.dados-filme p{

color:#d0d0d0;

font-size:17px;

margin-bottom:12px;

}





.sinopse{

margin-top:30px;

max-width:850px;

font-size:18px;

line-height:1.7;

color:#ddd;

}



/*=========================================================
DOWNLOADS
=========================================================*/


.downloads{

width:90%;

max-width:1300px;

margin:70px auto;

}



.downloads h2{

font-size:32px;

margin-bottom:30px;

}




#lista-downloads{

display:flex;

flex-wrap:wrap;

gap:20px;

}



.download-item{

background:var(--cor-card);

border:1px solid var(--cor-borda);

border-radius:12px;

padding:25px;

min-width:220px;

transition:.3s;

}



.download-item:hover{

transform:translateY(-5px);

border-color:var(--cor-principal);

}





.download-item h3{

margin-bottom:15px;

}




.download-item a{

display:block;

background:var(--cor-principal);

padding:12px;

border-radius:8px;

text-align:center;

font-weight:bold;

}




.download-item a:hover{

background:var(--cor-hover);

}



/*=========================================================
PUBLICIDADE
=========================================================*/


#anuncio-detalhes,

#anuncio-rodape{


width:90%;

max-width:1200px;

height:90px;

margin:30px auto;

background:#111;

border:1px solid #222;

display:flex;

align-items:center;

justify-content:center;

color:#777;

border-radius:10px;

}



/*=========================================================
RODAPÉ
=========================================================*/


footer{


background:#050505;

border-top:1px solid #222;

padding:35px;

text-align:center;

color:#999;

margin-top:50px;

}


footer p{

font-size:15px;

}



/*=========================================================
RESPONSIVIDADE DETALHES
=========================================================*/


@media(max-width:900px){


.bloco-informacao{


flex-direction:column;

align-items:center;

text-align:center;

}


.capa-detalhes{


width:230px;

height:350px;

}


.informacoes-filme h1{


font-size:34px;


}


.banner-detalhes{


height:400px;


}


}



@media(max-width:600px){



header{

padding:0 20px;

}



.logo{

font-size:26px;

}



nav{

gap:15px;

}



nav a{

font-size:14px;

}




.banner-detalhes{

height:300px;

}



.download-item{

width:100%;

}
}

/*=========================================================
ACABAMENTO FINAL WENJYO
=========================================================*/


/*=========================================================
ANIMAÇÃO DE ENTRADA DOS CARDS
=========================================================*/


.card{

animation: aparecerCard .5s ease forwards;

opacity:0;

}


@keyframes aparecerCard{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}



/*=========================================================
SEÇÕES DA PÁGINA INICIAL
=========================================================*/


#filmes-destaque,
#series-destaque,
#animes-destaque,
#recentes{


padding-left:5%;

padding-right:5%;

}




/*=========================================================
EFEITO NAS CAPAS
=========================================================*/


.card{

overflow:hidden;

}



.card img{

transition:

transform .5s ease,

filter .5s ease;

}



.card:hover img{


transform:scale(1.1);


filter:brightness(.75);


}




/*=========================================================
BOTÕES GERAIS
=========================================================*/


button{

font-family:inherit;

}




/*=========================================================
MENU MOBILE
=========================================================*/


@media(max-width:700px){



header{


height:auto;

min-height:70px;

flex-direction:column;

gap:20px;

padding:20px;


}




nav{


width:100%;

justify-content:center;

flex-wrap:wrap;


}




}



/*=========================================================
MELHORIAS DO BANNER MOBILE
=========================================================*/


@media(max-width:600px){



.banner{


height:450px;


}




.banner-info{


left:25px;

right:25px;

bottom:50px;


}




.banner-info h1{


font-size:32px;


}




.banner-info p{


font-size:15px;

}



.banner-btn{


width:45px;

height:45px;

font-size:22px;


}




}



/*=========================================================
PÁGINA SEM RESULTADOS
=========================================================*/


.sem-resultados{


width:100%;

padding:60px;

text-align:center;

font-size:22px;

color:#aaa;


}



/*=========================================================
SELEÇÃO DE TEXTO
=========================================================*/


::selection{


background:var(--cor-principal);

color:white;


}



/*=========================================================
TRANSIÇÃO ENTRE PÁGINAS
=========================================================*/


main{


animation:entradaPagina .5s ease;


}



@keyframes entradaPagina{


from{


opacity:0;


}


to{


opacity:1;


}


}



/*=========================================================
MELHORIA DO FOOTER
=========================================================*/


footer{


display:flex;

justify-content:center;

align-items:center;


}



footer p{


letter-spacing:1px;


}

/*=========================================================
PÁGINA DE ESCOLHA DE LETRAS
=========================================================*/


.pagina-letras{

min-height:70vh;

padding:60px 5%;

}



/* título */

.pagina-letras h1{

font-size:42px;

margin-bottom:15px;

}



.pagina-letras p{

color:#aaa;

font-size:18px;

margin-bottom:40px;

}

/*=========================================================
ESCOLHA DE LETRAS
=========================================================*/

.letras{

display:grid;

grid-template-columns:repeat(10, 1fr);

gap:15px;

width:100%;

max-width:900px;

margin:40px auto;

}


.letras a{

display:flex;

align-items:center;

justify-content:center;

height:60px;

background:#171717;

border:1px solid #2a2a2a;

border-radius:12px;

font-size:22px;

font-weight:bold;

color:white;

transition:.3s;

}



.letras a:hover{

background:#8B5CF6;

transform:translateY(-5px);

}


/* Tablet */

@media(max-width:900px){

.letras{

grid-template-columns:repeat(6,1fr);

}

}


/* Celular */

@media(max-width:600px){

.letras{

grid-template-columns:repeat(4,1fr);

gap:10px;

}


.letras a{

height:50px;

font-size:18px;

}

}

/*=========================================================
PÁGINA DE ESCOLHA DE LETRAS
=========================================================*/


.letras{

padding:60px 5%;

}



.letras h1{

font-size:40px;

margin-bottom:40px;

text-align:center;

}



/* GRID DAS LETRAS */

.lista-letras{

display:grid;

grid-template-columns:repeat(10, 1fr);

gap:18px;

max-width:1000px;

margin:auto;

}



/* BOTÕES DAS LETRAS */

.lista-letras a{

height:65px;

display:flex;

align-items:center;

justify-content:center;

background:#171717;

border:1px solid #2a2a2a;

border-radius:12px;

font-size:24px;

font-weight:bold;

color:white;

transition:.3s;

}



.lista-letras a:hover{

background:#8B5CF6;

transform:translateY(-6px);

box-shadow:

0 10px 25px rgba(139,92,246,.35);

}



/* TABLET */

@media(max-width:900px){


.lista-letras{

grid-template-columns:repeat(6,1fr);

}


}



/* CELULAR */

@media(max-width:600px){


.lista-letras{

grid-template-columns:repeat(4,1fr);

gap:12px;

}


.lista-letras a{

height:55px;

font-size:20px;

}


}