/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

html{
scroll-behavior:smooth;
}

html,body{
width:100%;
overflow-x:hidden;
}

body{
background:#000;
color:#fff;
min-width:320px;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:white;
}

ul{
list-style:none;
}

.userBox .profileLink{
color:#00c8ff !important;
font-weight:700;
text-decoration:none;
}

.userBox .profileLink:hover{
color:#4ddbff !important;
}

.userBox a:not(.profileLink){
color:#e50914;
}

.userBox{
display:flex;
align-items:center;
gap:8px;

background:#0f0f0f;
padding:10px 18px;
border-radius:15px;
}

.profileLink{
display:flex;
align-items:center;
gap:8px;

color:#00c8ff;
text-decoration:none;
font-weight:700;
}

.avatar{
width:32px;
height:32px;

display:flex;
align-items:center;
justify-content:center;

background:#292626;

border-radius:50%;

font-size:16px;

color:white;
}

.userBox a:not(.profileLink){
color:#e50914;
text-decoration:none;
}
.fantasy{
background:
linear-gradient(
135deg,
#7b1fa2,
#311b92);
}

.crime{
background:
linear-gradient(
135deg,
#424242,
#111111);
}

.drama{
background:
linear-gradient(
135deg,
#795548,
#3e2723);
}

.family{
background:
linear-gradient(
135deg,
#00c853,
#009624);
}

.biography{
background:
linear-gradient(
135deg,
#3949ab,
#1a237e);
}

.history{
background:
linear-gradient(
135deg,
#6d4c41,
#3e2723);
}

.war{
background:
linear-gradient(
135deg,
#546e7a,
#263238);
}

.animation{
background:
linear-gradient(
135deg,
#00bcd4,
#006064);
}

.sport{
background:
linear-gradient(
135deg,
#43a047,
#1b5e20);
}

.music{
background:
linear-gradient(
135deg,
#ab47bc,
#6a1b9a);
}

.musical{
background:
linear-gradient(
135deg,
#ec407a,
#880e4f);
}

.western{
background:
linear-gradient(
135deg,
#8d6e63,
#4e342e);
}

.registerbtn{

background:#c81018;

padding:12px 24px;

border-radius:8px;

font-weight:700;

color:white;

transition:.3s;

border:none;

}

.registerbtn:hover{

background:#ff2430;

transform:translateY(-2px);

}


.loginbtn{

background:#e50914;

padding:12px 24px;

border-radius:8px;

font-weight:700;

color:white;

transition:.3s;

border:none;

}

.loginbtn:hover{

background:#ff2430;

transform:translateY(-2px);

}


.netflixReasons,
.faqSection{
    background:#000;
    padding:35px 0;
}

.netflixReasons h2,
.faqSection h2{
    color:#fff;
    font-size:28px;
    margin-bottom:20px;
}

.reasonGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.reasonBox{
    min-height:210px;
    padding:25px;
    border-radius:14px;
    background:linear-gradient(135deg,#171b3d,#25111f);
    color:white;
    position:relative;
}

.reasonBox h3{
    font-size:20px;
    margin-bottom:15px;
}

.reasonBox p{
    color:#cfcfcf;
    font-size:14px;
    line-height:1.4;
}

.reasonBox i{
    position:absolute;
    right:22px;
    bottom:20px;
    font-size:38px;
    color:#e50914;
}

.faqItem{
    margin-bottom:8px;
}

.faqItem button{
    width:100%;
    background:#2d2d2d;
    color:white;
    border:0;
    padding:22px;
    font-size:20px;
    text-align:left;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.faqItem button:hover{
    background:#414141;
}

.faqAnswer{
    display:none;
    background:#2d2d2d;
    color:white;
    padding:22px;
    font-size:18px;
    line-height:1.5;
    border-top:1px solid #000;
}

.faqItem.active .faqAnswer{
    display:block;
}

.faqItem.active span{
    transform:rotate(45deg);
}

.faqItem span{
    font-size:34px;
    transition:.2s;
}

@media(max-width:900px){
    .reasonGrid{
        grid-template-columns:1fr;
    }

    .faqItem button{
        font-size:17px;
    }
}




/* TRENDING */

.trending{
background:#000;
padding:70px 0;
overflow:hidden;
}

.trending h2{
color:#fff;
font-size:40px;
margin-bottom:30px;
}

.sliderWrap{
position:relative;
display:flex;
align-items:center;
}


.trend-row{

display:flex;
gap:30px;

overflow:hidden;

scroll-behavior:smooth;

width:100%;

padding:25px 40px;

}


/* Κρύβει τελείως τη γραμμή */

.trend-row::-webkit-scrollbar{
display:none;
}

.trend-row{
-ms-overflow-style:none;
scrollbar-width:none;
}


/* card */

.trend-item{

position:relative;

min-width:220px;

flex-shrink:0;

transition:.4s;

}

.trend-item:hover{

transform:scale(1.08);

z-index:10;

}

.trend-item img{

width:220px;
height:320px;

object-fit:cover;

border-radius:12px;

box-shadow:
0 10px 30px rgba(0,0,0,.7);

}



/* numbers */

.rank{

position:absolute;

left:-30px;

bottom:-15px;

font-size:120px;

font-weight:900;

color:black;

-webkit-text-stroke:3px white;

z-index:10;

}



/* arrows */

.slideBtn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:55px;
height:90px;

border:none;

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

color:white;

font-size:34px;

cursor:pointer;

z-index:999;

transition:.3s;
}


.slideBtn:hover{

background:
rgba(255,255,255,.2);

}

.left{
left:0;
}

.right{
right:0;
}


/* CONTAINER */

.wrapper{
width:100%;
max-width:1600px;
margin:auto;
padding:0 4%;
}


/* NAVBAR */

.navbar{

position:absolute;

top:0;
left:0;

width:100%;

padding:25px 0;

z-index:999;
}

.navbar .wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.logo{

font-size:clamp(34px,3vw,54px);

font-weight:900;

}

.logo span{

color:#e50914;

}

nav ul{

display:flex;

gap:35px;

align-items:center;

}

nav a{

font-size:16px;

transition:.3s;

}

nav a:hover{

color:#e50914;

}

.right{

display:flex;

align-items:center;

gap:20px;

}

.loginbtn{

background:#e50914;

padding:13px 28px;

border-radius:8px;

font-weight:700;

transition:.3s;

}

.loginbtn:hover{

background:#ff2d38;

}


/* USER AREA */

.userBox{

display:flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:#111;

border-radius:10px;

}

.userBox a{

color:#e50914;

font-weight:bold;

}


/* HERO */

.hero{

width:100%;

min-height:100vh;

padding-top:150px;

padding-bottom:170px;

display:flex;

align-items:center;

position:relative;

background:

linear-gradient(
90deg,
rgba(0,0,0,.97) 0%,
rgba(0,0,0,.85) 28%,
rgba(0,0,0,.45) 55%,
rgba(0,0,0,.15) 100%
),

url("../images/hero-bg.jpg");

background-size:cover;

background-repeat:no-repeat;

background-position:center center;

}


/* DARK OVERLAY */

.hero::after{

content:"";

position:absolute;

bottom:0;
left:0;

width:100%;
height:250px;

background:linear-gradient(
transparent,
#000
);

}


/* HERO TEXT */

.hero-content{

max-width:700px;

position:relative;

z-index:2;

}

.hero-content h1{

font-size:clamp(55px,6vw,100px);

line-height:.95;

font-weight:900;

margin-bottom:30px;

}

.hero-content p{

font-size:clamp(18px,1.5vw,28px);

line-height:1.7;

color:#bdbdbd;

margin-bottom:35px;

max-width:650px;

}


/* BUTTONS */

.buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:25px;

}

.btn-red{

background:#e50914;

padding:18px 45px;

border-radius:8px;

font-weight:700;

font-size:16px;

transition:.3s;

}

.btn-red:hover{

transform:scale(1.03);

background:#ff1d29;

}

.btn-dark{

background:rgba(255,255,255,.08);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.15);

padding:18px 45px;

border-radius:8px;

font-weight:700;

transition:.3s;

}

.btn-dark:hover{

background:rgba(255,255,255,.15);

}

.smalltext{

color:#999;

font-size:14px;

}


/* CARDS */

.cards{

max-width:1600px;

margin:auto;

padding:0 4%;

margin-top:-80px;

display:grid;

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

gap:25px;

position:relative;

z-index:20;

}

.card{

background:#0d0d0d;

border:1px solid #1f1f1f;

padding:35px;

border-radius:18px;

transition:.4s;

backdrop-filter:blur(20px);

min-height:220px;

}

.card:hover{

transform:translateY(-8px);

border-color:#333;

}

.icon{

font-size:40px;

margin-bottom:20px;

color:#e50914;

}

.card h3{

font-size:23px;

margin-bottom:15px;

}

.card p{

line-height:1.8;

color:#888;

}


/* FOOTER */

footer{

padding:80px 20px;

text-align:center;

color:#666;

border-top:1px solid #111;

margin-top:80px;

}


/* TABLETS */

@media(max-width:1100px){

.cards{

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

}

.hero{

padding-top:180px;

padding-bottom:100px;

}

.hero-content h1{

font-size:65px;

}

}


/* MOBILE */

@media(max-width:768px){

.navbar .wrapper{

flex-direction:column;

gap:20px;

}

nav{

display:none;

}

.right{

width:100%;

justify-content:center;

}

.hero{

padding-top:200px;

padding-bottom:80px;

text-align:center;

background-position:70% center;

}

.hero-content{

max-width:100%;

}

.hero-content h1{

font-size:50px;

line-height:1.05;

}

.hero-content p{

font-size:18px;

}

.buttons{

flex-direction:column;

}

.btn-red,
.btn-dark{

width:100%;

text-align:center;

}

.cards{

max-width:1400px;

margin:80px auto;

padding:0 25px;

display:grid;

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

gap:25px;
}

.card{

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

border:1px solid
rgba(255,255,255,.08);

backdrop-filter:blur(10px);

border-radius:24px;

padding:35px;

transition:.35s;

position:relative;

overflow:hidden;
}

.card:before{

content:"";

position:absolute;

top:-100px;
right:-100px;

width:220px;
height:220px;

background:
radial-gradient(
circle,
rgba(0,114,255,.25),
transparent 70%
);

}

.card:hover{

transform:
translateY(-8px);

border-color:
rgba(255,255,255,.15);

box-shadow:
0 25px 60px
rgba(0,0,0,.45);
}

.icon{

width:70px;
height:70px;

border-radius:18px;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

background:
linear-gradient(
135deg,
#0063e5,
#00a8ff
);

margin-bottom:22px;

box-shadow:
0 10px 30px
rgba(0,99,229,.35);
}

.icon i{
color:white;
}

.card h3{

font-size:24px;

font-weight:800;

margin-bottom:12px;
}

.card p{

color:#bdbdbd;

line-height:1.7;

font-size:15px;
}

@media(max-width:768px){

.cards{

padding:0 15px;

gap:15px;

margin:50px auto;

}

.card{

padding:25px;

border-radius:18px;

}

.icon{

width:55px;
height:55px;

font-size:22px;

margin-bottom:15px;

}

.card h3{

font-size:20px;

}

.card p{

font-size:14px;

line-height:1.6;

}

}

@media(max-width:480px){

.cards{

grid-template-columns:1fr;

}

.card{

padding:20px;

}

.icon{

width:50px;
height:50px;

font-size:20px;

}

.card h3{

font-size:18px;

}

.card p{

font-size:13px;

}

}

/* VERY SMALL DEVICES */

@media(max-width:420px){

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.logo{

font-size:34px;

}

.loginbtn{

padding:10px 18px;

font-size:13px;

}

}

.sectionTitle{

display:flex;
align-items:center;
gap:12px;

font-size:34px;
font-weight:900;

margin-bottom:25px;

color:white;
}

.sectionTitle i{

color:#e50914;

font-size:30px;

filter:
drop-shadow(
0 0 12px
rgba(229,9,20,.6)
);
}

.userMenu{
display:flex;
align-items:center;
gap:15px;
}

.profileLink{
display:flex;
align-items:center;
gap:15px;
color:#fff;
}

.avatarCircle{
width:60px;
height:60px;
border-radius:50%;
background:#e50914;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;
font-weight:900;

flex-shrink:0;
}

.userInfo{
display:flex;
flex-direction:column;
justify-content:center;
}

.userName{
display:block !important;
font-size:18px;
font-weight:800;
line-height:1.1;
white-space:nowrap;
}

.userRole{
display:block !important;
font-size:12px;
color:#8e8e8e;
margin-top:6px;
white-space:nowrap;
}

.logoutBtn{
width:55px;
height:55px;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:rgba(255,255,255,.08);

font-size:24px;
}

@media(max-width:768px){

.avatarCircle{
width:52px;
height:52px;
font-size:22px;
}

.userName{
font-size:16px;
}

.userRole{
font-size:11px;
display:block;
}

.logoutBtn{
width:48px;
height:48px;
}

}