body{
 margin:0;
 font-family:Inter, sans-serif;
 background:#0b0f19;
 color:#fff;
}

/* HEADER */
.header{
 background:#0f172a;
 padding:15px 0;
 position:sticky;
 top:0;
 z-index:999;
}

.header-inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.logo{
 font-size:22px;
 font-weight:bold;
}

.menu a{
 margin:0 10px;
 color:#fff;
 text-decoration:none;
}

/* HERO */
.hero{
 height:500px;
 background:url('https://picsum.photos/1600/700') center/cover;
 position:relative;
}

.hero-overlay{
 background:rgba(0,0,0,0.6);
 width:100%;
 height:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
}

.hero h1{
 font-size:60px;
 margin:0;
}

.btn{
 background:linear-gradient(45deg,#ff0040,#ff7b00);
 border:none;
 padding:12px 25px;
 color:#fff;
 border-radius:10px;
 cursor:pointer;
}

/* INFO BAR */
.info-bar{
 background:#ff0040;
 padding:10px;
}

.info-inner{
 display:flex;
 justify-content:space-between;
}

/* GRID */
.container{
 width:1200px;
 margin:auto;
}

.main-grid{
 display:flex;
 gap:20px;
 margin-top:20px;
}

.left{flex:3;}
.right{flex:1;}

/* CARD */
.card{
 background:#121826;
 padding:20px;
 border-radius:15px;
 margin-bottom:20px;
}

/* DJ */
.dj-grid{
 display:flex;
 gap:15px;
}

.dj img{
 width:100%;
 border-radius:10px;
}

/* POST */
.post{
 padding:10px 0;
 border-bottom:1px solid #333;
}

/* RESPONSIVE */
@media(max-width:900px){
 .main-grid{flex-direction:column;}
 .container{width:90%;}
}