/*==================================================
JENOM Official Website
Premium Dark Theme
Version 2.0
==================================================*/

:root{

--bg:#050505;
--bg2:#0d0d0d;
--bg3:#151515;

--card:#111111;

--border:#242424;

--primary:#e50914;
--primary-hover:#ff1f2d;

--white:#ffffff;
--light:#d9d9d9;
--gray:#9c9c9c;

--shadow:0 15px 45px rgba(0,0,0,.35);

--radius:18px;

--transition:.35s;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg);

color:var(--white);

font-family:'Inter',sans-serif;

overflow-x:hidden;

line-height:1.7;

}



img{

display:block;

max-width:100%;

}



a{

text-decoration:none;

transition:var(--transition);

}



ul{

list-style:none;

}



.container{

width:92%;

max-width:1320px;

margin:auto;

}



/*===================================
Scrollbar
===================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}



/*===================================
Selection
===================================*/

::selection{

background:var(--primary);

color:white;

}



/*===================================
Buttons
===================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 42px;

border-radius:50px;

font-weight:700;

font-size:15px;

letter-spacing:.5px;

transition:.35s;

cursor:pointer;

}



.primary{

background:var(--primary);

color:white;

}



.primary:hover{

background:var(--primary-hover);

transform:translateY(-5px);

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

}



.secondary{

border:2px solid white;

color:white;

background:transparent;

}



.secondary:hover{

background:white;

color:black;

}



/*===================================
Navigation
===================================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:rgba(5,5,5,.82);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,.05);

}



.navbar .container{

height:85px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

font-family:'Bebas Neue',sans-serif;

font-size:42px;

letter-spacing:4px;

color:var(--primary);

}



nav{

display:flex;

gap:34px;

}



nav a{

font-size:14px;

text-transform:uppercase;

font-weight:600;

color:#dddddd;

position:relative;

}



nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}



nav a:hover::after,

nav a.active::after{

width:100%;

}



nav a:hover,

nav a.active{

color:white;

}



/*===================================
Hero
===================================*/

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

position:relative;

text-align:center;

overflow:hidden;

background:

linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.75)),

url("../assets/images/hero.jpg") center center/cover;

}



.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:rgba(229,9,20,.12);

filter:blur(160px);

}



.hero-content{

position:relative;

z-index:2;

}



.hero h1{

font-family:'Bebas Neue';

font-size:150px;

letter-spacing:10px;

margin-bottom:10px;

}



.hero p{

font-size:20px;

color:var(--light);

margin-bottom:45px;

letter-spacing:2px;

}



.buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



/*===================================
Page Hero
===================================*/

.page-hero{

padding-top:180px;

padding-bottom:120px;

text-align:center;

background:

linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.85)),

url("../assets/images/banner.jpg") center/cover;

}



.page-hero h1{

font-size:85px;

font-family:'Bebas Neue';

letter-spacing:6px;

margin-bottom:15px;

}



.page-hero p{

max-width:700px;

margin:auto;

color:var(--gray);

font-size:18px;

}



/*===================================
Section
===================================*/

section{

padding:100px 0;

}



h2{

font-family:'Bebas Neue';

font-size:58px;

letter-spacing:3px;

margin-bottom:25px;

}



h3{

font-size:28px;

}



p{

color:var(--light);

}



/*===================================
Cards
===================================*/

.card{

background:var(--card);

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

border-radius:var(--radius);

transition:.35s;

box-shadow:var(--shadow);

}



.card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

/*==================================================
Latest Release
==================================================*/

.latest{

background:var(--bg2);

text-align:center;

}

.album-box{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.album-cover{

border-radius:25px;

overflow:hidden;

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

}

.album-cover img{

width:100%;

transition:.5s;

}

.album-cover:hover img{

transform:scale(1.08);

}

.badge{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:var(--primary);

font-size:13px;

font-weight:700;

margin-bottom:25px;

letter-spacing:1px;

}

.album-details h2{

font-size:70px;

margin-bottom:20px;

}

.album-details p{

font-size:18px;

margin-bottom:40px;

max-width:650px;

}

.album-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}



/*==================================================
Songs
==================================================*/

.songs-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.song-card{

background:var(--card);

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

border-radius:20px;

overflow:hidden;

transition:.35s;

}

.song-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

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

}

.song-card img{

width:100%;

height:320px;

object-fit:cover;

transition:.45s;

}

.song-card:hover img{

transform:scale(1.08);

}

.song-card h3{

padding:25px 25px 5px;

}

.song-card span{

display:block;

padding:0 25px;

color:var(--gray);

}

.stream-icons{

padding:25px;

display:flex;

gap:20px;

font-size:24px;

}

.stream-icons a{

color:#d5d5d5;

}

.stream-icons a:hover{

color:var(--primary);

}



/*==================================================
Videos
==================================================*/

.video-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.video-card{

background:var(--card);

border-radius:20px;

overflow:hidden;

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

transition:.35s;

}

.video-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.video-thumbnail{

position:relative;

overflow:hidden;

}

.video-thumbnail img{

width:100%;

height:250px;

object-fit:cover;

transition:.45s;

}

.video-card:hover img{

transform:scale(1.08);

}

.play-button{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:85px;

height:85px;

border-radius:50%;

background:rgba(229,9,20,.9);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

transition:.35s;

}

.video-card:hover .play-button{

transform:translate(-50%,-50%) scale(1.12);

}

.video-card h3{

padding:25px 25px 8px;

}

.video-card p{

padding:0 25px 25px;

}

.video-card .btn{

margin:0 25px 25px;

}



/*==================================================
Gallery
==================================================*/

.gallery-grid{

display:grid;

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

gap:20px;

margin-top:50px;

}

.gallery-item{

overflow:hidden;

border-radius:20px;

background:#111;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.1);

filter:brightness(.75);

}



/*==================================================
Streaming Platforms
==================================================*/

.platforms{

display:grid;

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

gap:25px;

margin-top:50px;

}

.platforms a{

background:var(--card);

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

padding:30px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

gap:15px;

font-size:22px;

color:white;

transition:.35s;

}

.platforms a:hover{

background:var(--primary);

transform:translateY(-6px);

}

.platforms i{

font-size:32px;

}

/*==================================================
About
==================================================*/

.about-grid{

display:grid;

grid-template-columns:450px 1fr;

gap:70px;

align-items:center;

}

.about-image{

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.about-image:hover img{

transform:scale(1.05);

}

.about-content h2{

margin-bottom:25px;

}

.about-content p{

font-size:18px;

margin-bottom:40px;

}



.stats{

display:grid;

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

gap:25px;

margin-top:40px;

}



.stat-box{

background:var(--card);

padding:35px;

text-align:center;

border-radius:18px;

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

transition:.35s;

}



.stat-box:hover{

border-color:var(--primary);

transform:translateY(-6px);

}



.stat-box h3{

font-size:52px;

font-family:'Bebas Neue';

letter-spacing:2px;

color:var(--primary);

margin-bottom:10px;

}



.stat-box p{

color:var(--gray);

}



.quote-section{

background:var(--bg2);

text-align:center;

}



.quote-section h2{

font-size:56px;

max-width:900px;

margin:auto;

line-height:1.3;

}



/*==================================================
Merchandise
==================================================*/

.products-grid{

display:grid;

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

gap:35px;

margin-top:50px;

}



.product-card{

background:var(--card);

border-radius:20px;

overflow:hidden;

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

transition:.35s;

}



.product-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}



.product-card img{

width:100%;

height:320px;

object-fit:cover;

}



.product-card h3{

padding:25px 25px 8px;

}



.product-card p{

padding:0 25px;

color:var(--gray);

}



.product-card h4{

padding:20px 25px;

font-size:26px;

color:var(--primary);

}



.product-card .btn{

margin:0 25px 30px;

width:calc(100% - 50px);

}



.newsletter-section{

background:var(--bg2);

text-align:center;

}



.newsletter-section form{

display:flex;

justify-content:center;

gap:15px;

margin-top:35px;

flex-wrap:wrap;

}



.newsletter-section input{

width:420px;

padding:18px 25px;

background:#111;

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

border-radius:50px;

color:white;

font-size:16px;

outline:none;

}



.newsletter-section input:focus{

border-color:var(--primary);

}



/*==================================================
Contact
==================================================*/

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}



.contact-info h2{

margin-bottom:25px;

}



.info-box{

display:flex;

gap:20px;

margin-top:35px;

align-items:flex-start;

}



.info-box i{

font-size:24px;

width:60px;

height:60px;

background:var(--primary);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.contact-form{

background:var(--card);

padding:40px;

border-radius:20px;

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

}



.contact-form input,

.contact-form textarea{

width:100%;

padding:18px 20px;

background:#101010;

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

margin-bottom:20px;

border-radius:12px;

color:white;

font-size:16px;

outline:none;

}



.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--primary);

}



.contact-form textarea{

resize:vertical;

min-height:180px;

}



.contact-form button{

width:100%;

}



.social-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}



.social-grid a{

background:var(--card);

padding:30px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

gap:15px;

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

font-size:20px;

color:white;

transition:.35s;

}



.social-grid a:hover{

background:var(--primary);

transform:translateY(-6px);

}



.social-grid i{

font-size:28px;

}

/*==================================================
Footer
==================================================*/

footer{

background:#030303;

padding:70px 0 35px;

text-align:center;

border-top:1px solid var(--border);

}



footer h2{

font-size:54px;

margin-bottom:10px;

}



footer p{

color:var(--gray);

margin-top:10px;

}



.footer-social{

display:flex;

justify-content:center;

gap:20px;

margin:35px 0;

}



.footer-social a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#111;

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

font-size:22px;

color:white;

transition:.35s;

}



.footer-social a:hover{

background:var(--primary);

border-color:var(--primary);

transform:translateY(-6px);

}



/*==================================================
404 Page
==================================================*/

.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.88)),

url("../assets/images/error-bg.jpg") center/cover;

}



.error-content h1{

font-family:'Bebas Neue';

font-size:220px;

line-height:1;

color:var(--primary);

margin-bottom:10px;

}



.error-content h2{

font-size:60px;

margin-bottom:20px;

}



.error-content p{

max-width:650px;

margin:0 auto 40px;

font-size:18px;

}



.error-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



/*==================================================
Animations
==================================================*/

.hidden{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}



.show{

opacity:1;

transform:translateY(0);

}



.fade{

animation:fade .8s ease;

}



@keyframes fade{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}



@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



.float{

animation:float 4s ease-in-out infinite;

}



/*==================================================
Utility Classes
==================================================*/

.text-center{

text-align:center;

}



.mt-20{

margin-top:20px;

}



.mt-40{

margin-top:40px;

}



.mt-60{

margin-top:60px;

}



.mb-20{

margin-bottom:20px;

}



.mb-40{

margin-bottom:40px;

}



.mb-60{

margin-bottom:60px;

}



/*==================================================
Inputs
==================================================*/

input,

textarea,

button{

font-family:'Inter',sans-serif;

}



/*==================================================
Placeholder
==================================================*/

::placeholder{

color:#777;

}



/*==================================================
Image Hover Glow
==================================================*/

.gallery-item,

.song-card,

.video-card,

.product-card,

.album-cover{

position:relative;

overflow:hidden;

}



.gallery-item::after,

.song-card::after,

.video-card::after,

.product-card::after,

.album-cover::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

180deg,

transparent,

rgba(229,9,20,.08)

);

opacity:0;

transition:.35s;

pointer-events:none;

}



.gallery-item:hover::after,

.song-card:hover::after,

.video-card:hover::after,

.product-card:hover::after,

.album-cover:hover::after{

opacity:1;

}



/*==================================================
End of File
==================================================*/