*{
box-sizing:border-box;
}

.topbar{

position:fixed;

top:0;
left:0;
right:0;

height:80px;

display:flex;

align-items:center;
justify-content:space-between;

padding:0 40px;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.95),
rgba(0,0,0,.55),
transparent
);

z-index:999999;
}

.navUser{
position:fixed;
top:20px;
right:25px;
z-index:99999;
display:flex;
align-items:center;
gap:12px;
}

.navLogo{
position:fixed;
top:20px;
left:120px;

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

z-index:99999;
transition:.3s ease;
}

body.sidebarOpen .navLogo{
left:320px;
}


.navLogo a{

color:white;
text-decoration:none;
}

.navLogo span{

color:#e50914;
}

.navLinks{

display:flex;
align-items:center;
gap:30px;
}

.navLinks a{

color:white;

text-decoration:none;

font-size:18px;
font-weight:600;

transition:.25s;
}

.navLinks a:hover{

color:#e50914;
}

.navUser a{

color:white;

text-decoration:none;

font-size:18px;
font-weight:700;
}

.navUser i{

font-size:24px;
}

.navUser{

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

.profileBtn{

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

text-decoration:none;
color:white;
}

.avatarCircle{

width:46px;
height:46px;

border-radius:50%;

background:#e50914;

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

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

color:white;

box-shadow:
0 0 20px rgba(229,9,20,.4);
}

.userInfo{

display:flex;
flex-direction:column;
}

.userName{

font-size:15px;
font-weight:800;
line-height:1;
}

.userText{

font-size:12px;
color:#999;
margin-top:4px;
}

.logoutBtn{

width:42px;
height:42px;

border-radius:50%;

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

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

color:white;

text-decoration:none;

transition:.25s;
}

.logoutBtn:hover{

background:#e50914;
transform:scale(1.08);
}

.loginBtn{

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

padding:12px 20px;

border-radius:999px;

background:#e50914;

color:white;

text-decoration:none;

font-weight:700;
}

.loginBtn:hover{

opacity:.9;
}

.navLinks a{

display:flex;
align-items:center;
gap:8px;
}

@media(max-width:768px){

.userInfo{
display:none;
}

.logoutBtn{
display:none;
}

.avatarCircle{

width:40px;
height:40px;

font-size:15px;
}

.loginBtn{

padding:10px 14px;
font-size:14px;
}

}

.registerBtn,
.loginBtn{

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

padding:12px 20px;

border-radius:10px;

font-weight:700;

text-decoration:none;

transition:.25s;
}

.registerBtn{

background:rgba(255,255,255,.08);
color:white;
}

.registerBtn:hover{

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

.loginBtn{

background:#e50914;
color:white;
}

.loginBtn:hover{

background:#ff2633;
}

.searchBtn{

width:44px;
height:44px;

border-radius:50%;

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

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

color:white;

text-decoration:none;

transition:.25s;
}

.searchBtn:hover{

background:#e50914;

transform:scale(1.08);
}

.premiumBadge{

display:inline-block;

margin-left:8px;

padding:4px 8px;

border-radius:999px;

background:#e50914;

font-size:10px;

font-weight:800;

color:white;
}

.navLinks a i{

margin-right:8px;
}

.navLinks a:hover{

color:#e50914;
}


/* =========================
   MOBILE NAVBAR
========================= */

.mobileMenuBtn{

display:none;

font-size:28px;

cursor:pointer;

color:white;

margin-right:10px;
}

@media(max-width:900px){

.topbar{

height:65px;

padding:0 15px;
}

/* Logo */

.navLogo{

font-size:30px;
}

/* Hamburger */

.mobileMenuBtn{

display:flex;

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

width:42px;
height:42px;
}

/* Menu Drawer */

.navLinks{

position:fixed;

top:65px;
left:-100%;

width:280px;

height:calc(100vh - 65px);

background:#0d1117;

display:flex;

flex-direction:column;

gap:12px;

padding:20px;

transition:.35s;

z-index:999999;
}

.navLinks.open{

left:0;
}

.navLinks a{

display:flex;

align-items:center;

gap:12px;

padding:14px;

border-radius:12px;

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

font-size:16px;
}

/* Guest */

.registerBtn{

display:none !important;
}

.loginBtn{

display:flex !important;

padding:10px 16px;

font-size:14px;

border-radius:8px;
}

/* Logged User */

.userInfo{

display:none;
}

.logoutBtn{

display:none;
}

.searchBtn{

display:none;
}

.avatarCircle{

width:40px;
height:40px;

font-size:15px;
}

/* Right Side */

.navUser{

display:flex;
align-items:center;
gap:10px;
}

}

/* Very Small Phones */

@media(max-width:500px){

.loginBtn{

padding:8px 12px;

font-size:13px;
}

.navLogo{

font-size:26px;
}

.avatarCircle{

width:36px;
height:36px;

font-size:14px;
}

}


.notifBtn{
position:relative;
width:46px;
height:46px;
border-radius:50%;
background:#171717;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-decoration:none;
font-size:18px;
margin-right:10px;
}

.notifBtn i{
color:white;
}

.hasNotif i{
color:#ffd700;
text-shadow:0 0 12px rgba(255,215,0,.8);
animation:ring 2s infinite;
}

.notifBadge{
position:absolute;
top:-5px;
right:-3px;
background:#ffd700;
color:#000;
min-width:20px;
height:20px;
padding:0 6px;
border-radius:20px;
font-size:11px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
}

@keyframes ring{
0%{transform:rotate(0deg);}
5%{transform:rotate(20deg);}
10%{transform:rotate(-20deg);}
15%{transform:rotate(15deg);}
20%{transform:rotate(-15deg);}
25%{transform:rotate(10deg);}
30%{transform:rotate(-10deg);}
35%{transform:rotate(0deg);}
100%{transform:rotate(0deg);}
}



.activationModal{

position:fixed;
inset:0;

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

background:rgba(0,0,0,.75);
backdrop-filter:blur(12px);

z-index:999999;
}

.activationCard{

width:90%;
max-width:760px;

background:
linear-gradient(
145deg,
rgba(18,18,18,.96),
rgba(10,10,10,.96)
);

border:1px solid rgba(229,9,20,.25);

box-shadow:
0 30px 80px rgba(0,0,0,.65),
0 0 50px rgba(229,9,20,.12);

border-radius:30px;

padding:20px;

text-align:center;

position:relative;
overflow:hidden;
}

.activationCard:before{

content:"";

position:absolute;
left:-100px;
top:-100px;

width:260px;
height:260px;

background:
radial-gradient(
circle,
rgba(229,9,20,.22),
transparent 70%
);

}

.activationCard:after{

content:"";

position:absolute;
right:-100px;
bottom:-100px;

width:260px;
height:260px;

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

}

.activationIcon{

font-size:85px;
color:#e50914;

margin-bottom:25px;

position:relative;
z-index:2;
}

.activationTitle{

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

margin-bottom:20px;

color:white;

position:relative;
z-index:2;
}

.activationTitle span{
color:#e50914;
}

.activationText{

font-size:22px;
line-height:1.8;

color:#cfcfcf;

max-width:620px;
margin:auto;

position:relative;
z-index:2;
}

.activationBtn{

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

margin-top:35px;

padding:18px 45px;

background:#e50914;

color:white;

text-decoration:none;

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

border-radius:16px;

transition:.25s;

position:relative;
z-index:2;
}

.activationBtn:hover{

background:#ff1f2f;

transform:translateY(-3px);

box-shadow:
0 20px 40px
rgba(229,9,20,.35);

}


.desktopMenu{
display:flex;
}

.mobileOnly{
display:none;
}

@media(max-width:768px){

.desktopMenu{
display:none;
}

.mobileOnly{
display:flex;
}

}

#vipOffer{

position:fixed;

right:20px;
bottom:20px;

width:360px;

background:
linear-gradient(
135deg,
#141414,
#1f1f1f
);

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

border-radius:24px;

padding:18px;

display:none;

align-items:center;

gap:15px;

z-index:9999999;

box-shadow:
0 20px 80px
rgba(0,0,0,.65);

animation:
vipFloat 2s infinite;

}

.vipAvatar{

width:80px;
height:80px;

flex-shrink:0;

}

.vipAvatar img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

}

.vipTitle{

font-size:18px;

font-weight:900;

color:#ffb300;

margin-bottom:6px;

}

.vipMessage{

font-size:14px;

line-height:1.5;

color:#ddd;

margin-bottom:10px;

}

.vipCountdown{

font-size:22px;

font-weight:900;

color:#00e676;

margin-bottom:12px;

}

.vipBtn{

display:block;

text-align:center;

background:#e50914;

color:white;

padding:12px;

border-radius:12px;

font-weight:800;

text-decoration:none;

}

.vipBtn:hover{

background:#ff1f2f;

}

.vipClose{

position:absolute;

top:10px;
right:12px;

cursor:pointer;

font-size:18px;

color:#aaa;

}

@keyframes vipFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0);
}

}

@media(max-width:700px){

#vipOffer{

left:10px;
right:10px;

width:auto;

bottom:10px;

}

}

.vipAvatar{

width:80px;
height:80px;

border-radius:50%;

display:flex;

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

font-size:26px;

font-weight:900;

color:white;

background:
linear-gradient(
135deg,
#e50914,
#ff3d47
);

box-shadow:
0 0 30px
rgba(229,9,20,.45);

flex-shrink:0;

animation:
vipPulse 1.5s infinite;

}

@keyframes vipPulse{

0%{

transform:scale(1);

box-shadow:
0 0 20px
rgba(229,9,20,.35);

}

50%{

transform:scale(1.08);

box-shadow:
0 0 40px
rgba(229,9,20,.7);

}

100%{

transform:scale(1);

box-shadow:
0 0 20px
rgba(229,9,20,.35);

}

}
*{

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

-webkit-touch-callout:none;

}

img{

pointer-events:none;

}




.netflixSidebar{
position:fixed;
left:0;
top:0;
width:82px;
height:100vh;
background:rgba(0,0,0,.96);
z-index:99999;
overflow:hidden;
transition:width .28s ease;
padding-top:35px;
box-shadow:25px 0 60px rgba(0,0,0,.65);
}

.netflixSidebar:hover{
width:280px;
}

.netflixSidebar a{
display:flex;
align-items:center;
gap:24px;
height:54px;
padding:0 26px;
color:#aaa;
text-decoration:none;
font-size:17px;
font-weight:600;
white-space:nowrap;
transition:.25s;
}

.netflixSidebar a:hover{
color:#fff;
background:linear-gradient(90deg,rgba(229,9,20,.35),transparent);
}

.netflixSidebar i{
width:28px;
font-size:21px;
text-align:center;
color:#cfcfcf;
}

.netflixSidebar a:hover i{
color:#e50914;
}

.netflixSidebar span{
opacity:0;
transform:translateX(-8px);
transition:.25s;
}

.netflixSidebar:hover span{
opacity:1;
transform:translateX(0);
}

.profileSide{
margin-bottom:35px;
color:#fff !important;
}

.sideAvatar{
min-width:34px;
width:34px;
height:34px;
border-radius:6px;
background:linear-gradient(135deg,#e50914,#85000a);
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
color:#fff;
}
.netflixSidebar{
position:fixed;
left:0;
top:0;
width:80px;
height:100vh;
transition:.3s;
z-index:99999;
}

body{
transition:padding-left .3s;
padding-left:80px;
}

body.sidebarOpen{
padding-left:280px;
}

@media(max-width:991px){

.netflixSidebar{
display:none !important;
}

.navLogo{
left:20px !important;
}

.navUser{
right:15px !important;
}

body{
padding-left:0 !important;
}

#siteContent{
margin-left:0 !important;
}

}

@media(max-width:991px){

.netflixSidebar{
display:none !important;
}

.mobileMenuBtn{
display:flex !important;
}

}

@media(max-width:991px){

.netflixSidebar{
display:none !important;
}

body.sidebarOpen{
padding-left:0 !important;
}

.navLogo{
left:75px !important;
}

}