/*
Theme Name: AkumAnimes Plus
Theme URI: http://akumanimes.com
Description: Tema Responsivo e Semi-automático para o AkumAnimes Cor #AD0D2D
Author: RiverLab (TioRiver Nikolaevich)
Author URI: http://facebook.com/TioRiverLab
Version: 1.0
*/
/* HTML */
body {
margin: 0;
padding: 0;
color: #fff;
background: #191919;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
/* Especiais */
.spr {
background: url(img/cssprite.png) no-repeat;
}
.mwidth {
max-width: 1280px;
margin: auto;
position: relative;
z-index: 9;
}
#marionete {
transition: margin-left .5s;
}
.i-left {
background-position: -328px -26px;
width: 16px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.i-right {
background-position: -347px -26px;
width: 16px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
.i-lista {
background-position: -328px 0;
width: 30px;
height: 23px;
display: inline-block;
}
.mAlign {
text-align: center;
font-size: 12px;
}
/* Menu */
.mNav {
height: 100%;
width: 0;
position: fixed;
z-index: 99;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
white-space: nowrap;
}
.mNav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mNav li {
padding: 10px;
border-bottom: 1px solid #1d1d1d;
font-size: 14px;
}
/* Header */
.header {
background: url(img/bg.jpg);
height: 350px;
position: relative;
overflow: hidden;
border-bottom: 10px solid #222;
}
.hero_header {
background: url(img/heroheader.png) no-repeat;
width: 534px;
height: 350px;
position: absolute;
left: 0;
}
.logoheader {
background-position: 0 0;
width: 325px;
height: 74px;
position: absolute;
right: 0;
left: 0;
margin: 90px auto 0 auto;
}
.imenu {
background-position: -328px 0;
width: 31px;
height: 25px;
position: absolute;
margin: 10px;
cursor: pointer;
z-index: 99;
}
/* Busca Header */
.superbusca {
text-align: center;
position: absolute;
margin: 170px auto;
right: 0;
left: 0;
}
.superbusca input {
border: 0;
padding: 10px;
width: 600px;
border-radius: 6px;
position: relative;
}
.superbusca button {
background-position: -396px 0;
width: 24px;
height: 21px;
border: 0;
position: absolute;
margin-left: -29px;
margin-top: 8px;
cursor: pointer;
background-color: #fff;
}
/* Index */
.ContainerEps {
padding: 10px;
text-align: center;
}
.CTitulo {
background: rgba(0,0,0,0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2MQFRX9DwABwQE/q9evzAAAAABJRU5ErkJggg==") repeat-x scroll center;
text-align: center;
margin-bottom: 5px;
}
.CTitulo span {
background: #191919;
padding: 10px;
font-size: 15px;
font-weight: bolder;
text-shadow: 1px 1px 0px #000;
}
.EpsItem {
width: 300px;
height: 240px;
display: inline-table;
background: #222;
overflow: hidden;
border-radius: 3px;
margin-right: 5px;
margin-bottom: 5px;
border-top: 3px solid #AD0D2D;
position: relative;
}
.EpsItem:nth-child(4n+1) {
margin-right: 0;
}
.EpsItem:hover img {
filter:blur(2px);
	transition: all 0.8s;
    transition-property: all;
    transition-duration: 0.8s;
    transition-timing-function: initial;
    transition-delay: initial;
}
.EpsItem .uEpsInfo {
    position: absolute;
    left: 0px;
    right: 0px;
    max-width: 80%;
    z-index: 99;
    text-align: center;
	font-size: 14px;
    font-weight: bolder;
    text-transform: uppercase;
    background: rgb(173, 13, 45);
    padding: 10px;
    margin: 125px auto auto;
    border-radius: 3px;
}

.EpsItemImg {
width: 300px;
height: 170px;
}

.EpsItemImg img {
width: 100%;
height: 170px;

}
.EpsItemDesc {
padding: 10px;
}
.EpsItemData {
font-size: 12px;
text-align: right;
font-weight: bolder;
}
.EpsItemTitulo {
font-size: 13px;
text-align: left;
}
.ContainerAnimes {
padding: 10px;
text-align: center;
}
.AniItem {
width: 198px;
height: 272px;
display: inline-table;
overflow: hidden;
font-size: 12px;
text-align: center;
margin-bottom: 5px;
margin-right: 5px;
position: relative;
}
.AniItem .uEpsInfo {
width: 90%;
background: #AD0D2D;
border-radius: 3px;
font-weight: bolder;
text-align: center;
padding: 10px;
position: absolute;
bottom: 40px;
right: 0;
left: 0;
margin: auto;
text-transform: uppercase;
}
.AniItemImg {
width: 198px;
height: 272px;
overflow: hidden;
margin-bottom: 5px;
border-radius: 3px;
}
.AniItemImg img {
width: 100%;
height: 100%;
}
.AniDesc {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 198px;
}
/* Paginação */
.page-numbers {
background: #AD0D2D;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
display: inline-block;
margin: 4px 2px;
padding: 6px 10px 8px;
text-decoration: none;
}
.page-numbers.dots {
background: none;
}
.page-numbers.dots:hover {
background: none;
}
.pages {
background: #AD0D2D;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
display: inline-block;
margin: 4px 2px;
padding: 6px 10px 8px;
text-decoration: none;
}
.page-numbers.current {
background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#272727));
background: -moz-linear-gradient(top, #222, #272727);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#272727');
}
.page-numbers:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#272727));
background: -moz-linear-gradient(top, #222, #272727);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#272727');
}
/* Single - Episódio */
.SingleTitulo {
background: #222;
padding: 0 10px 10px 10px;
font-size: 13px;
}
.SingleTitulo h3 {
padding: 0;
}
.Single {
display: flex;
padding: 10px;
margin: auto;
}
.Sleft {
width: 100%;
margin-right: 20px;
display: flex;
flex-direction: column;
}
.Sright {
width: 380px;
display: flex;
flex-direction: column;
}
/* Abas */
#RiverLabAbas {
padding: 10px 0px 0px 10px;
}
#RiverLabAbas ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#RiverLabAbas li {
display: inline-block;
margin: 3px;
padding: 8px;
background: #AD0D2D;
border-radius: 3px;
font-size: 12px;
}
/* Video */
.EPvideo {
padding: 5px;
background: #222;
border-radius: 3px;
overflow: hidden;
}
#b3 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.ControlesEP {
background: #222;
display: flex;
border-radius: 3px;
margin-top: 5px;
}
.ControlesEPItem {
padding: 10px;
width: 100%;
text-align: center;
}
.ControlesEPItem:nth-child(2n+2) {
background: #252525;
}
.ControlesEPItem a {
width: 100%;
overflow: hidden;
}
/* Single - Anime */
.boxPost {
padding: 10px;
background: #222;
font-size: 15px;
}
#anime {
overflow: hidden;
clear: both;
}
#capaAnime {
width: 198px;
height: 272px;
border: 3px solid #AD0D2D;
overflow: hidden;
border-radius: 3px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#capaAnime img {
width: 198px;
height: 272px;
}
.boxAnimeSobre {
font-size: 13px;
overflow: hidden;
}
#sinopse2 {
width: 100%;
clear: both;
margin-top: 5px;
background: #2d2d2d;
padding: 10px;
font-size: 12px;
border-radius: 3px;
}
.boxAnimeSobreLinha {
border-bottom: 1px solid #2d2d2d;
padding: 3px;
}
/* Listas de Episódios / Ovas / Filmes */
.ListaContainer {
background: #222;
margin-top: 10px;
padding: 10px;
font-size: 14px;
}
.ListaContainerTitulo {
background: #AD0D2D;
padding: 5px;
font-weight: bolder;
margin: 0 -10px 5px -10px;
position: relative;
}
.ListaContainer ul {
list-style: none;
margin: 0;
padding: 0;
}
.ListaContainer li {
background: #2d2d2d;
margin: 0 -10px 5px -10px;
padding: 5px;
}
.ListaContainer a:active {
color: #AD0D2D!important;
}
.abreListaEpisodiosAtivo::before {
transform: rotate(-90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.abreListaEpisodiosInativo::before {
transform: rotate(90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.abreListaOvasAtivo::before {
transform: rotate(-90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.abreListaOvasInativo::before {
transform: rotate(90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.abreListaFilmesAtivo::before {
transform: rotate(-90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.abreListaFilmesInativo::before {
transform: rotate(90deg);
content: '\276E';
font-size: 1em;
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
/* Widgets */
.wid {
background: #222;
font-size: 12px;
padding: 10px;
margin-top: 10px;
}
.wid:first-child {
margin-top: 0px;
}
.widTitulo {
background: #2b2b2b;
padding: 5px;
text-align: center;
font-weight: bolder;
margin: -10px -10px 5px -10px;
border-radius: 2px;
}
/* Informações */
.informações {
background: #222;
width: 100%;
font-size: 14px;
padding: 10px;
margin-top: 10px;
}

/* Comentários */
.comentarios {
background: #222;
width: 100%;
font-size: 14px;
padding: 10px;
margin-top: 10px;
}
/* Lista de Animes */
.ContainerBoxLetras {
max-width: 1000px;
margin: auto;
margin-top: 10px;
padding: 10px;
background: #222;
border-radius: 3px;
text-align: center;
clear: both;
overflow: hidden;
}
.listaAnimes_RiverLab_boxLetras {
display: flex;
justify-content: space-between;
}
.ListaLetras {
float: left;
width: 3.5%;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 12px;
font-weight: bolder;
background: #2d2d2d;
overflow: hidden;
transition: .5s all;
}
.ListaLetras:hover {
background: #AD0D2D;
}
.uAnisContainer {
margin-top: 10px;
max-width: 1215px;
margin: 10px auto 0 auto;
text-align: center;
min-height: 150px;
}
.AniItem:nth-child(n+6) {
margin-right: 5px;
}
/* Lista de Gêneros */
.GenContainer {
max-width: 860px;
margin: 10px auto;
padding: 10px;
background: #222;
overflow: hidden;
border-radius: 3px;
}
.GenContainer ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.GenContainer li {
display: block;
padding: 10px;
background: #333;
margin: 5px;
width: 25%;
font-size: 12px;
font-weight: bolder;
transition: .5s all;
}
.GenContainer li:hover {
background: #AD0D2D;
}
.GenContainer li a {
text-decoration: none;
}
/* Footer */
footer .parceirosfooter {
background: url(img/bgfooter.jpg);
padding: 65px;
border-top: 0px solid #AD0D2D;
}
footer .parceirosfooter ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .parceirosfooter li {
font-size: 12px;
display: inline-block;
width: 19%;
text-shadow: 1px 1px 0 #000;
}
footer .parceirosfooter li::before {
content: '»';
margin-right: 5px;
font-weight: bolder;
color: #AD0D2D;
}
footer .creditos {
font-size: 12px;
text-align: center;
background: #ad0d2d;
color: #fff;
padding: 9px;
border-top: 0px solid #AD0D2D;
}
footer .creditos span {
font-size: 17px;
font-weight: bolder;
color: #000;
}
footer .creditos a {
color: #fff;
font-weight: bolder;
}
/* Media Querys */
/* Media Query 1000px */
@media only screen and (max-width: 1000px) {
.Single {
flex-direction: column;
}
.Sright {
margin-top: 10px;
width: 100%;
}
}
/* Media Query 790px */
@media only screen and (max-width: 790px) {
.header {
height: 200px;
}
.hero_header {
display: none;
}
.logoheader {
background-size: 300px;
width: 230px;
height: 53px;
margin-top: 60px;
}
.superbusca {
margin-top: 120px;
}
.superbusca input {
width: 80%;
}
footer .parceirosfooter li {
width: 32%;
}
/* Lista de Animes */
#capaAnime {
float: none;
margin: auto;
}
.boxAnimeSobre {
clear: both;
}
/* Controles */
.ControlesEPItem#left a b, .ControlesEPItem#right a b {
display: none;
}
.i-left {
margin-right: 0;
}
.i-right {
margin-left: 0;
}
/* Gêneros */
.GenContainer li {
width: 40%;
}
}
/* Media Query 500px */
@media only screen and (max-width: 500px) {
footer .parceirosfooter li {
width: 100%;
}
/* Gêneros */
.GenContainer {
overflow: hidden;
}
.GenContainer li {
width: 100%;
}
}
/* Media Query 390px */
@media only screen and (max-width: 390px) {
.EpsItem {
width: 100%;
}
.EpsItemImg {
width: 100%;
height: 160px;
overflow: hidden;
}
}
/* =========================================================
   HOME PREMIUM CYBER / AKUMANIMES
   ========================================================= */
body.ak-home-body {
background:
radial-gradient(circle at top right, rgba(149, 56, 255, 0.22), transparent 30%),
radial-gradient(circle at top left, rgba(255, 75, 178, 0.12), transparent 28%),
linear-gradient(180deg, #060818 0%, #090d21 40%, #070a18 100%);
color: #f7f3ff;
font-family: 'Inter', Arial, sans-serif;
}
body.ak-home-body:before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
pointer-events: none;
z-index: 0;
}
.ak-home-shell {
position: relative;
z-index: 1;
display: flex;
min-height: 100vh;
gap: 18px;
padding: 14px;
}
.ak-home-sidebar {
width: 190px;
flex: 0 0 190px;
background: linear-gradient(180deg, rgba(8,10,28,.96), rgba(8,10,28,.84));
border: 1px solid rgba(255,255,255,.06);
border-radius: 22px;
padding: 18px 14px;
box-shadow: 0 18px 45px rgba(0,0,0,.32);
display: flex;
flex-direction: column;
}
.ak-home-page {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.ak-home-brand-block {
padding: 4px 8px 14px;
}
.ak-home-brand {
display: flex;
align-items: center;
justify-content: flex-start;
}
.ak-home-brand img {
max-width: 138px;
height: auto;
filter: drop-shadow(0 8px 20px rgba(255, 0, 153, .18));
}
.ak-home-side-nav {
display: flex;
flex-direction: column;
gap: 10px;
margin: 6px 0 18px;
}
.ak-home-side-nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border-radius: 14px;
color: #d8ddff;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.04);
font-size: 14px;
font-weight: 600;
transition: .25s ease;
}
.ak-home-side-nav a i {
width: 16px;
text-align: center;
color: #f28bff;
}
.ak-home-side-nav a:hover,
.ak-home-side-nav a.active {
background: linear-gradient(90deg, rgba(122, 40, 255, .34), rgba(255, 72, 160, .18));
border-color: rgba(255,255,255,.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 25px rgba(0,0,0,.22);
color: #fff;
}
.ak-home-premium-card {
margin-top: 10px;
padding: 20px 16px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,88,143,.26), rgba(101,38,177,.26)),
linear-gradient(180deg, #311135, #15112a);
border: 1px solid rgba(255,255,255,.07);
box-shadow: 0 18px 32px rgba(0,0,0,.24);
}
.ak-home-premium-icon {
width: 46px;
height: 46px;
border-radius: 14px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #ff7cae, #7f4dff);
color: #fff;
font-size: 18px;
margin-bottom: 14px;
}
.ak-home-premium-card h3 {
margin: 0 0 10px;
font-size: 24px;
font-weight: 800;
}
.ak-home-premium-card p {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.65;
color: rgba(255,255,255,.76);
}
.ak-home-premium-card a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
border-radius: 14px;
font-weight: 700;
background: linear-gradient(90deg, #8451ff, #ff4da2);
box-shadow: 0 18px 30px rgba(127, 82, 255, .22);
}
.ak-home-socials {
margin-top: auto;
padding: 16px 8px 6px;
}
.ak-home-socials span {
display: block;
font-size: 12px;
color: rgba(255,255,255,.58);
margin-bottom: 10px;
}
.ak-home-socials div {
display: flex;
gap: 10px;
}
.ak-home-socials a {
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
color: #fff;
}
.ak-home-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 8px 8px 0;
}
.ak-home-topnav {
display: flex;
align-items: center;
gap: 28px;
min-width: 0;
}
.ak-home-topnav a {
position: relative;
font-size: 15px;
font-weight: 600;
color: #d3d8ff;
padding: 6px 0;
}
.ak-home-topnav a.active,
.ak-home-topnav a:hover {
color: #fff;
}
.ak-home-topnav a.active:after,
.ak-home-topnav a:hover:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #ff5ea6, #8b5dff);
}
.ak-home-topactions {
display: flex;
align-items: center;
gap: 12px;
}
.ak-home-search {
width: 320px;
height: 50px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
border-radius: 16px;
background: rgba(6, 10, 30, .86);
border: 1px solid rgba(255,255,255,.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.ak-home-search i {
color: rgba(255,255,255,.65);
}
.ak-home-search input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font-size: 14px;
}
.ak-home-watch-btn {
height: 50px;
padding: 0 20px;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
background: linear-gradient(90deg, #8451ff, #ff4da2);
box-shadow: 0 18px 32px rgba(101, 72, 255, .26);
}
.ak-home-icon-btn,
.ak-home-avatar {
width: 46px;
height: 46px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.04);
display: grid;
place-items: center;
color: #fff;
}
.ak-home-avatar {
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
font-size: 18px;
}
.ak-home-main {
padding: 0 8px 0;
}
.ak-home-content {
display: flex;
flex-direction: column;
gap: 18px;
}
.ak-home-hero-card {
position: relative;
min-height: 330px;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 25px 55px rgba(0,0,0,.32);
background: #0a0f28;
}
.ak-home-hero-bg,
.ak-home-special-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.01);
}
.ak-home-hero-bg {
background-image: url('img/home-dashboard-hero.jpg');
}
.ak-home-special-bg {
background-image: url('img/home-dashboard-promo.jpg');
}
.ak-home-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(5,7,23,.88) 0%, rgba(10,12,33,.68) 32%, rgba(10,12,33,.26) 64%, rgba(10,12,33,.35) 100%),
linear-gradient(180deg, rgba(65,15,94,.18), rgba(0,0,0,.22));
}
.ak-home-hero-content {
position: relative;
z-index: 2;
max-width: 520px;
padding: 56px 48px;
}
.ak-home-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 14px;
border-radius: 10px;
background: rgba(255, 62, 154, .18);
border: 1px solid rgba(255, 121, 189, .28);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: 16px;
}
.ak-home-hero-content h1 {
margin: 0 0 14px;
font-size: 58px;
line-height: .98;
font-weight: 800;
letter-spacing: -0.04em;
}
.ak-home-hero-content p {
margin: 0;
font-size: 18px;
line-height: 1.7;
color: rgba(255,255,255,.82);
max-width: 460px;
}
.ak-home-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.ak-home-btn {
height: 54px;
padding: 0 24px;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
}
.ak-home-btn-primary {
background: linear-gradient(90deg, #8451ff, #ff4da2);
box-shadow: 0 18px 30px rgba(131, 81, 255, .22);
}
.ak-home-btn-secondary {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
}
.ak-home-hero-slider {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 3;
}
.ak-home-hero-slider span {
width: 36px;
height: 5px;
border-radius: 999px;
background: rgba(255,255,255,.34);
}
.ak-home-hero-slider span.active {
background: linear-gradient(90deg, #ff5ea6, #8b5dff);
}
.ak-home-hero-nav {
position: absolute;
right: 24px;
bottom: 16px;
z-index: 3;
display: flex;
gap: 10px;
}
.ak-home-hero-nav button {
width: 46px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(6,10,24,.65);
color: #fff;
font-size: 20px;
}
.ak-home-section,
.ak-home-category-panel,
.ak-home-special-card,
.ak-home-benefits,
.ak-home-footer {
background: linear-gradient(180deg, rgba(9,12,31,.96), rgba(8,11,28,.88));
border: 1px solid rgba(255,255,255,.06);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(0,0,0,.26);
}
.ak-home-section {
padding: 16px 16px 18px;
}
.ak-home-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.ak-home-section-head h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 33px;
font-weight: 800;
letter-spacing: -0.03em;
}
.ak-home-section-head h2 i {
font-size: 18px;
color: #ff6fbe;
}
.ak-home-section-head a {
padding: 9px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
color: rgba(255,255,255,.82);
}
.ak-home-featured-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.ak-home-featured-card,
.ak-home-poster-card {
min-width: 0;
}
.ak-home-featured-card a,
.ak-home-poster-card a {
display: block;
}
.ak-home-featured-thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: inset 0 -40px 50px rgba(0,0,0,.2);
}
.ak-home-featured-thumb:before,
.ak-home-poster-thumb:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.34));
}
.ak-home-tag {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
padding: 7px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 800;
background: linear-gradient(90deg, #ff5ea6, #9b59ff);
box-shadow: 0 10px 18px rgba(255, 83, 163, .24);
}
.ak-home-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 58px;
height: 58px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(10,12,28,.52);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.15);
z-index: 2;
font-size: 20px;
}
.ak-home-featured-meta {
padding: 12px 6px 0;
}
.ak-home-featured-meta h3,
.ak-home-poster-meta h3 {
margin: 0;
font-size: 25px;
font-weight: 700;
letter-spacing: -0.03em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ak-home-featured-meta p,
.ak-home-poster-meta p {
margin: 6px 0 0;
font-size: 14px;
color: rgba(255,255,255,.62);
}
.ak-home-progress {
display: block;
width: 100%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #ff5ea6, #8b5dff 68%, rgba(255,255,255,.18) 68%);
margin-top: 12px;
}
.ak-home-lower-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) 360px;
gap: 18px;
}
.ak-home-lower-main,
.ak-home-category-panel {
padding: 16px;
background: linear-gradient(180deg, rgba(9,12,31,.96), rgba(8,11,28,.88));
border: 1px solid rgba(255,255,255,.06);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(0,0,0,.26);
}
.ak-home-side-column {
display: flex;
flex-direction: column;
gap: 18px;
}
.ak-home-poster-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.ak-home-poster-thumb {
position: relative;
aspect-ratio: 198 / 272;
border-radius: 18px;
overflow: hidden;
background-size: cover;
background-position: center;
}
.ak-home-poster-meta {
padding: 10px 4px 0;
}
.ak-home-category-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ak-home-category-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 15px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
color: #eff2ff;
min-height: 58px;
}
.ak-home-category-pill span {
font-weight: 600;
}
.ak-home-category-pill strong {
font-size: 14px;
color: #d2d8ff;
}
.ak-home-special-card {
position: relative;
min-height: 224px;
overflow: hidden;
}
.ak-home-special-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(23,10,42,.22), rgba(10,10,26,.65));
}
.ak-home-special-content {
position: relative;
z-index: 2;
padding: 26px 24px;
max-width: 250px;
}
.ak-home-special-content span {
display: inline-flex;
padding: 7px 12px;
border-radius: 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
background: rgba(161, 83, 255, .18);
border: 1px solid rgba(255,255,255,.08);
margin-bottom: 14px;
}
.ak-home-special-content h3 {
margin: 0 0 10px;
font-size: 42px;
line-height: .98;
font-weight: 800;
letter-spacing: -0.04em;
}
.ak-home-special-content p {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.6;
color: rgba(255,255,255,.76);
}
.ak-home-special-content a {
display: inline-flex;
height: 46px;
padding: 0 18px;
align-items: center;
justify-content: center;
border-radius: 14px;
font-weight: 700;
background: linear-gradient(90deg, #8451ff, #ff4da2);
}
.ak-home-benefits {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
.ak-home-benefit-card {
display: flex;
gap: 14px;
align-items: center;
padding: 22px 20px;
border-right: 1px solid rgba(255,255,255,.06);
}
.ak-home-benefit-card:last-child {
border-right: 0;
}
.ak-home-benefit-card i {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(255,255,255,.05);
color: #ff69ba;
font-size: 17px;
}
.ak-home-benefit-card strong {
display: block;
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.ak-home-benefit-card span,
.ak-home-footer p,
.ak-home-empty {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,.64);
}
.ak-home-footer {
padding: 18px 24px;
text-align: center;
}
.ak-home-footer p {
margin: 0;
}
.ak-home-empty {
padding: 20px 2px 8px;
}
@media (max-width: 1500px) {
.ak-home-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ak-home-poster-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ak-home-benefits {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.ak-home-shell {
flex-direction: column;
}
.ak-home-sidebar {
width: 100%;
flex: 0 0 auto;
}
.ak-home-side-nav {
flex-direction: row;
flex-wrap: wrap;
}
.ak-home-lower-grid {
grid-template-columns: 1fr;
}
.ak-home-topbar {
flex-direction: column;
align-items: stretch;
}
.ak-home-topactions {
justify-content: space-between;
}
.ak-home-search {
width: 100%;
}
}
@media (max-width: 920px) {
.ak-home-featured-grid,
.ak-home-poster-grid,
.ak-home-benefits,
.ak-home-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ak-home-topnav {
flex-wrap: wrap;
gap: 14px 20px;
}
.ak-home-hero-content {
padding: 34px 26px 68px;
}
.ak-home-hero-content h1 {
font-size: 42px;
}
.ak-home-section-head h2 {
font-size: 26px;
}
.ak-home-special-content h3 {
font-size: 34px;
}
}
@media (max-width: 640px) {
.ak-home-shell {
padding: 10px;
}
.ak-home-topactions {
flex-wrap: wrap;
}
.ak-home-watch-btn {
width: calc(100% - 58px);
justify-content: center;
}
.ak-home-featured-grid,
.ak-home-poster-grid,
.ak-home-benefits,
.ak-home-category-grid {
grid-template-columns: 1fr;
}
.ak-home-side-nav a {
width: 100%;
}
.ak-home-hero-content h1 {
font-size: 36px;
}
.ak-home-hero-content p {
font-size: 15px;
}
.ak-home-hero-nav {
display: none;
}
.ak-home-featured-meta h3,
.ak-home-poster-meta h3 {
font-size: 18px;
}
}


/* Fine-tuning homepage to match the approved mockup more closely */
body.ak-home-body {
    font-family: 'Inter', Arial, sans-serif;
}
.ak-home-shell {
    max-width: 1680px;
    margin: 0 auto;
    padding: 14px 14px 10px;
    gap: 16px;
}
.ak-home-sidebar {
    width: 118px;
    padding: 14px 14px 18px;
    border-radius: 22px;
}
.ak-home-brand-block {
    padding: 0 2px 10px;
}
.ak-home-brand img {
    max-width: 92px;
}
.ak-home-side-nav a {
    min-height: 46px;
    padding: 11px 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.15;
}
.ak-home-side-nav a i {
    width: 14px;
    font-size: 13px;
}
.ak-home-premium-card {
    margin-top: 8px;
    padding: 16px 14px;
}
.ak-home-premium-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
}
.ak-home-premium-card h3 {
    font-size: 18px;
    line-height: 1.05;
}
.ak-home-premium-card p {
    font-size: 12px;
    line-height: 1.5;
}
.ak-home-premium-card a {
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
}
.ak-home-socials {
    padding: 12px 2px 2px;
}
.ak-home-socials span {
    margin-bottom: 8px;
}
.ak-home-socials div {
    justify-content: space-between;
}
.ak-home-socials a {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
}
.ak-home-topbar {
    padding: 2px 2px 0;
}
.ak-home-topnav {
    gap: 24px;
}
.ak-home-topnav a {
    font-size: 14px;
    font-weight: 700;
}
.ak-home-topnav a.active:after,
.ak-home-topnav a:hover:after {
    bottom: -10px;
}
.ak-home-search {
    width: 286px;
    height: 46px;
    border-radius: 14px;
}
.ak-home-search input {
    font-size: 13px;
}
.ak-home-watch-btn {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
}
.ak-home-icon-btn,
.ak-home-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}
.ak-home-main {
    padding: 0 2px;
}
.ak-home-content {
    gap: 14px;
}
.ak-home-hero-card {
    min-height: 410px;
    border-radius: 22px;
}
.ak-home-hero-bg {
    background-position: center right;
}
.ak-home-hero-overlay {
    background:
    linear-gradient(90deg, rgba(4,6,20,.92) 0%, rgba(8,10,29,.84) 23%, rgba(9,11,31,.56) 44%, rgba(9,11,31,.18) 68%, rgba(9,11,31,.22) 100%),
    linear-gradient(180deg, rgba(58,16,92,.22), rgba(0,0,0,.16));
}
.ak-home-hero-content {
    max-width: 500px;
    padding: 44px 28px 60px 28px;
}
.ak-home-badge {
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 11px;
    margin-bottom: 18px;
}
.ak-home-hero-content h1 {
    max-width: 430px;
    margin: 0 0 12px;
    font-size: 64px;
    line-height: .94;
    letter-spacing: -0.055em;
}
.ak-home-hero-content p {
    max-width: 440px;
    font-size: 17px;
    line-height: 1.52;
    color: rgba(255,255,255,.8);
}
.ak-home-hero-actions {
    gap: 12px;
    margin-top: 22px;
}
.ak-home-btn {
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 14px;
}
.ak-home-hero-slider {
    bottom: 14px;
}
.ak-home-hero-slider span {
    width: 14px;
    height: 4px;
}
.ak-home-hero-slider span.active {
    width: 38px;
}
.ak-home-hero-nav {
    right: 18px;
    bottom: 12px;
}
.ak-home-hero-nav button {
    width: 40px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
}
.ak-home-section,
.ak-home-category-panel,
.ak-home-special-card,
.ak-home-benefits,
.ak-home-footer,
.ak-home-lower-main {
    border-radius: 20px;
}
.ak-home-section,
.ak-home-lower-main,
.ak-home-category-panel {
    padding: 14px;
}
.ak-home-section-head {
    margin-bottom: 14px;
}
.ak-home-section-head h2 {
    font-size: 22px;
}
.ak-home-section-head a {
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 11px;
}
.ak-home-featured-grid {
    gap: 12px;
}
.ak-home-featured-thumb {
    border-radius: 16px;
}
.ak-home-poster-thumb {
    border-radius: 16px;
}
.ak-home-tag {
    top: 10px;
    right: 10px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 10px;
}
.ak-home-play {
    width: 54px;
    height: 54px;
    font-size: 18px;
}
.ak-home-featured-meta {
    padding: 10px 3px 0;
}
.ak-home-featured-meta h3,
.ak-home-poster-meta h3 {
    color: #eef2ff !important;
    font-size: 15px;
    line-height: 1.28;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    min-height: 38px;
}
.ak-home-featured-meta p,
.ak-home-poster-meta p {
    margin-top: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.58) !important;
}
.ak-home-progress {
    height: 3px;
    margin-top: 10px;
}
.ak-home-lower-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 14px;
}
.ak-home-side-column {
    gap: 12px;
}
.ak-home-poster-grid {
    gap: 12px;
}
.ak-home-poster-meta {
    padding: 8px 2px 0;
}
.ak-home-category-grid {
    gap: 10px;
}
.ak-home-category-pill {
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 14px;
}
.ak-home-category-pill span {
    font-size: 13px;
    font-weight: 700;
}
.ak-home-category-pill strong {
    font-size: 12px;
}
.ak-home-special-card {
    min-height: 296px;
}
.ak-home-special-bg {
    background-position: 75% center;
    background-size: cover;
}
.ak-home-special-overlay {
    background: linear-gradient(180deg, rgba(21,12,45,.2), rgba(10,10,24,.78));
}
.ak-home-special-content {
    padding: 18px 18px 20px;
    max-width: 220px;
}
.ak-home-special-content span {
    margin-bottom: 12px;
    font-size: 10px;
}
.ak-home-special-content h3 {
    font-size: 26px;
    line-height: .96;
    margin-bottom: 8px;
}
.ak-home-special-content p {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
}
.ak-home-special-content a {
    height: 42px;
    border-radius: 12px;
    font-size: 13px;
}
.ak-home-benefit-card {
    padding: 16px 18px;
    gap: 12px;
}
.ak-home-benefit-card i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 15px;
}
.ak-home-benefit-card strong {
    font-size: 14px;
    margin-bottom: 2px;
}
.ak-home-benefit-card span,
.ak-home-footer p,
.ak-home-empty {
    font-size: 11px;
    line-height: 1.45;
}
.ak-home-footer {
    padding: 14px 20px;
}
@media (max-width: 1500px) {
    .ak-home-hero-content h1 {
        font-size: 54px;
    }
    .ak-home-lower-grid {
        grid-template-columns: 1fr 250px;
    }
}
@media (max-width: 1200px) {
    .ak-home-sidebar {
        width: 100%;
    }
    .ak-home-side-nav a {
        min-width: 140px;
    }
    .ak-home-lower-grid {
        grid-template-columns: 1fr;
    }
}


/* v3 pixel-tuning for featured, recent and categories */
body.ak-home-body .ak-home-section,
body.ak-home-body .ak-home-lower-main,
body.ak-home-body .ak-home-category-panel,
body.ak-home-body .ak-home-special-card,
body.ak-home-body .ak-home-benefits,
body.ak-home-body .ak-home-footer {
    background: linear-gradient(180deg, rgba(6,10,28,.98) 0%, rgba(5,9,25,.93) 100%);
    border: 1px solid rgba(120, 98, 255, .10);
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}

body.ak-home-body .ak-home-section,
body.ak-home-body .ak-home-lower-main,
body.ak-home-body .ak-home-category-panel {
    padding: 15px;
    border-radius: 18px;
}

body.ak-home-body .ak-home-section-head {
    margin-bottom: 12px;
}

body.ak-home-body .ak-home-section-head h2 {
    font-size: 21px;
    line-height: 1.1;
    color: #f6f2ff;
    letter-spacing: -0.035em;
}

body.ak-home-body .ak-home-section-head h2 i {
    color: #ff62b8;
    font-size: 14px;
}

body.ak-home-body .ak-home-section-head a {
    min-width: 50px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 10px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
}

body.ak-home-body .ak-home-featured-grid {
    gap: 13px;
}

body.ak-home-body .ak-home-featured-card a,
body.ak-home-body .ak-home-poster-card a {
    color: #eef1ff !important;
}

body.ak-home-body .ak-home-featured-thumb {
    aspect-ratio: 16 / 8.25;
    border-radius: 14px;
    box-shadow: inset 0 -70px 60px rgba(3,7,20,.72), inset 0 0 0 1px rgba(255,255,255,.03);
}

body.ak-home-body .ak-home-featured-thumb:before {
    background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(4,7,18,.18) 36%, rgba(4,7,18,.78) 100%);
}

body.ak-home-body .ak-home-featured-meta {
    margin-top: -58px;
    position: relative;
    z-index: 3;
    padding: 0 12px 0;
}

body.ak-home-body .ak-home-featured-meta h3 {
    color: #ffffff !important;
    font-size: 13px;
    line-height: 1.22;
    min-height: 17px;
    -webkit-line-clamp: 1;
}

body.ak-home-body .ak-home-featured-meta p {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.86) !important;
}

body.ak-home-body .ak-home-progress {
    width: calc(100% - 4px);
    height: 3px;
    margin-top: 11px;
    background: linear-gradient(90deg, #ff5dae 0%, #a457ff 70%, rgba(255,255,255,.18) 70%);
    box-shadow: 0 0 10px rgba(151,84,255,.18);
}

body.ak-home-body .ak-home-tag {
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 9px;
    background: linear-gradient(90deg, #ff6cb9, #a55aff);
}

body.ak-home-body .ak-home-play {
    width: 52px;
    height: 52px;
    background: rgba(20,24,44,.50);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 20px rgba(0,0,0,.20);
}

body.ak-home-body .ak-home-lower-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

body.ak-home-body .ak-home-lower-main {
    align-self: start;
    height: auto;
}

body.ak-home-body .ak-home-poster-grid {
    gap: 12px;
    align-items: start;
}

body.ak-home-body .ak-home-poster-thumb {
    aspect-ratio: 195 / 270;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

body.ak-home-body .ak-home-poster-thumb:before {
    background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(3,6,17,.16) 40%, rgba(3,6,17,.40) 100%);
}

body.ak-home-body .ak-home-poster-meta {
    padding: 10px 2px 0;
}

body.ak-home-body .ak-home-poster-meta h3 {
    color: #eaf0ff !important;
    font-size: 13px;
    line-height: 1.26;
    min-height: 32px;
    -webkit-line-clamp: 2;
}

body.ak-home-body .ak-home-poster-meta p {
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255,255,255,.56) !important;
}

body.ak-home-body .ak-home-category-panel {
    padding: 14px;
}

body.ak-home-body .ak-home-category-grid {
    gap: 11px;
}

body.ak-home-body .ak-home-category-pill {
    min-height: 54px;
    padding: 12px 14px;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(12,17,40,.82), rgba(10,14,34,.86));
    border: 1px solid rgba(125, 122, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.ak-home-body .ak-home-category-pill:hover {
    border-color: rgba(255, 102, 186, .26);
    background: linear-gradient(180deg, rgba(16,22,50,.90), rgba(12,16,40,.92));
}

body.ak-home-body .ak-home-category-pill span {
    font-size: 13px;
    font-weight: 700;
    color: #eef2ff;
}

body.ak-home-body .ak-home-category-pill strong {
    font-size: 11px;
    font-weight: 700;
    color: #b8c1ff;
}

body.ak-home-body .ak-home-special-card {
    min-height: 208px;
    border-radius: 18px;
}

body.ak-home-body .ak-home-special-content {
    max-width: 180px;
    padding: 16px 16px 18px;
}

body.ak-home-body .ak-home-special-content h3 {
    font-size: 18px;
    line-height: 1.0;
    margin-bottom: 8px;
}

body.ak-home-body .ak-home-special-content p {
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 14px;
}

body.ak-home-body .ak-home-special-content a {
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: 10px;
}

body.ak-home-body .ak-home-benefit-card {
    padding: 16px 16px;
}

@media (max-width: 1500px) {
    body.ak-home-body .ak-home-lower-grid {
        grid-template-columns: minmax(0, 1fr) 285px;
    }
}

@media (max-width: 1200px) {
    body.ak-home-body .ak-home-lower-grid {
        grid-template-columns: 1fr;
    }
}