/*==================================================
  OFFICIAL YOGI
  COMPONENTS.CSS
  Part 1
  Navigation • Hero • Buttons • Section Header
==================================================*/



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

.site-header{

    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(11,11,11,.92);
    backdrop-filter:blur(12px);

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

}

.site-header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:80px;

}

.logo{

    color:var(--white);
    font-size:30px;
    font-weight:700;
    letter-spacing:1px;

}

.logo:hover{

    color:var(--gold);

}

.site-nav{

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

}

.site-nav a{

    color:var(--grey);
    font-size:16px;
    font-weight:500;

    position:relative;

}

.site-nav a:hover{

    color:var(--white);

}

.site-nav a.active{

    color:var(--gold);

}

.site-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

.site-nav a:hover::after,
.site-nav a.active::after{

    width:100%;

}





/*==================================================
  HERO
==================================================*/

.hero{

    position:relative;

    display:flex;
    align-items:center;

    min-height:90vh;

    background-size:cover;
    background-position:center;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.70)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

}

.hero-subtitle{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:20px;

}

.hero-title{

    font-size:64px;

    font-weight:700;

    margin-bottom:25px;

    color:var(--white);

}

.hero-description{

    font-size:22px;

    color:var(--light);

    margin-bottom:40px;

    line-height:1.8;

}





/*==================================================
  HERO BUTTON GROUP
==================================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:180px;

}





/*==================================================
  PAGE HERO
==================================================*/

.page-hero{

    position:relative;

    text-align:center;

    padding:140px 20px;

    background-size:cover;

    background-position:center;

}

.page-hero::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.page-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}





/*==================================================
  SECTION HEADER
==================================================*/

.section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.section-header.left{

    text-align:left;

    margin-left:0;

}

.section-header .section-title{

    margin-bottom:15px;

}

.section-header .section-description{

    margin-top:20px;

}





/*==================================================
  BUTTON GROUP
==================================================*/

.button-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    align-items:center;

}





/*==================================================
  OUTLINE BUTTON
==================================================*/

.btn-dark-outline{

    color:var(--white);

    border:2px solid rgba(255,255,255,.25);

    background:transparent;

}

.btn-dark-outline:hover{

    background:var(--gold);

    border-color:var(--gold);

    color:#111;

}





/*==================================================
  GLASS BUTTON
==================================================*/

.btn-glass{

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

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

    color:#fff;

    backdrop-filter:blur(8px);

}

.btn-glass:hover{

    background:var(--gold);

    color:#111;

}





/*==================================================
  SMALL BADGES
==================================================*/

.badge-gold{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(255,193,7,.12);

    color:var(--gold);

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

.badge-dark{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:#242424;

    color:var(--grey);

    font-size:13px;

}





/*==================================================
  DIVIDER
==================================================*/

.gold-divider{

    width:90px;

    height:4px;

    background:var(--gold);

    border-radius:20px;

    margin:25px auto;

}

.section-header.left .gold-divider{

    margin-left:0;

}





/*==================================================
  ICON CIRCLE
==================================================*/

.icon-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--card);

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:var(--gold);

}



/*==================================================
  MUSIC SHOWCASE
==================================================*/

.music-showcase{

    background:var(--card);

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

    border-radius:28px;

    padding:50px;

    margin-bottom:60px;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.music-showcase:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:var(--shadow-lg);

}

.music-showcase .row{

    align-items:center;

}



/*==================================================
  ALBUM COVER
==================================================*/

.album-cover{

    width:100%;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.album-cover img{

    width:100%;

    display:block;

    transition:.45s;

}

.album-cover:hover img{

    transform:scale(1.05);

}



/*==================================================
  SONG INFO
==================================================*/

.song-category{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:10px;

}

.song-title{

    font-size:42px;

    color:var(--white);

    margin-bottom:18px;

}

.song-meta{

    color:var(--grey);

    margin-bottom:25px;

}

.song-description{

    color:var(--light);

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}



/*==================================================
  SONG TAGS
==================================================*/

.song-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}

.song-tag{

    background:#262626;

    color:var(--gold);

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

}



/*==================================================
  MUSIC BUTTONS
==================================================*/

.music-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}



/*==================================================
  DISCOGRAPHY GRID
==================================================*/

.discography-grid{

    display:grid;

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

    gap:35px;

}



/*==================================================
  MUSIC CARD
==================================================*/

.music-card{

    background:var(--card);

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

    border-radius:24px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow);

    height:100%;

}

.music-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:var(--shadow-lg);

}



/*==================================================
  MUSIC CARD IMAGE
==================================================*/

.music-card-image{

    overflow:hidden;

}

.music-card-image img{

    width:100%;

    transition:.45s;

}

.music-card:hover img{

    transform:scale(1.08);

}



/*==================================================
  MUSIC CARD BODY
==================================================*/

.music-card-body{

    padding:30px;

}

.music-card-body h3{

    color:var(--white);

    margin-bottom:12px;

}

.music-card-body p{

    color:var(--grey);

    margin-bottom:20px;

}



/*==================================================
  RELEASE YEAR
==================================================*/

.release-year{

    color:#888;

    font-size:14px;

    margin-bottom:15px;

}



/*==================================================
  STREAMING PLATFORMS
==================================================*/

.platform-list{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

}

.platform-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#222;

    color:#fff;

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

    padding:14px 24px;

    border-radius:50px;

    transition:var(--transition);

}

.platform-button:hover{

    background:var(--gold);

    color:#111;

    border-color:var(--gold);

}



/*==================================================
  FEATURED RELEASE
==================================================*/

.featured-release{

    position:relative;

    overflow:hidden;

}

.featured-release::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,193,7,.04),
        transparent
    );

    pointer-events:none;

}



/*==================================================
  ALTERNATE LAYOUT
==================================================*/

.music-showcase.reverse .row{

    flex-direction:row-reverse;

}



/*==================================================
  PLAY BUTTON
==================================================*/

.play-button{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    transition:var(--transition);

    cursor:pointer;

}

.play-button:hover{

    transform:scale(1.08);

}



/*==================================================
  NOW PLAYING BADGE
==================================================*/

.now-playing{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--gold);

    font-weight:600;

    margin-bottom:18px;

}

.now-playing::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--gold);

}



/*==================================================
  SONG STATS
==================================================*/

.song-stats{

    display:flex;

    gap:35px;

    margin-top:35px;

}

.song-stat{

    text-align:center;

}

.song-stat h4{

    color:var(--gold);

    margin-bottom:5px;

}

.song-stat p{

    color:var(--grey);

    font-size:14px;

    margin:0;

}



/*==================================================
  BLOG SECTION
==================================================*/

.blog-grid{

    display:grid;

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

    gap:35px;

}

.blog-card{

    background:var(--card);

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

    border-radius:22px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow);

    height:100%;

}

.blog-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:var(--shadow-lg);

}

.blog-card-image{

    overflow:hidden;

}

.blog-card-image img{

    width:100%;

    transition:.45s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-card-body{

    padding:30px;

}

.blog-card-body h3{

    color:var(--white);

    margin-bottom:15px;

}

.blog-card-body p{

    color:var(--grey);

}

.blog-meta{

    color:var(--gold);

    font-size:14px;

    margin-bottom:15px;

}



/*==================================================
  FEATURE BOXES
==================================================*/

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-box{

    background:var(--card);

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

    border-radius:22px;

    padding:40px;

    transition:var(--transition);

    text-align:center;

}

.feature-box:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}

.feature-icon{

    font-size:48px;

    color:var(--gold);

    margin-bottom:20px;

}

.feature-box h3{

    color:var(--white);

    margin-bottom:15px;

}

.feature-box p{

    color:var(--grey);

}



/*==================================================
  CALL TO ACTION
==================================================*/

.cta{

    background:linear-gradient(135deg,#181818,#101010);

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

    border-radius:30px;

    padding:80px 60px;

    text-align:center;

    overflow:hidden;

    position:relative;

}

.cta::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

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

    border-radius:50%;

    right:-100px;

    top:-100px;

}

.cta>*{

    position:relative;

    z-index:2;

}

.cta h2{

    color:var(--white);

    margin-bottom:20px;

}

.cta p{

    color:var(--grey);

    max-width:700px;

    margin:0 auto 35px;

}



/*==================================================
  ARTIST PROFILE
==================================================*/

.artist-profile{

    display:flex;

    align-items:center;

    gap:60px;

}

.artist-photo{

    flex:0 0 380px;

}

.artist-photo img{

    border-radius:24px;

    box-shadow:var(--shadow-lg);

}

.artist-content{

    flex:1;

}

.artist-content h2{

    color:var(--white);

}

.artist-content p{

    color:var(--grey);

}



/*==================================================
  SERVICE CARDS
==================================================*/

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:var(--card);

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

    border-radius:22px;

    padding:35px;

    transition:var(--transition);

}

.service-card:hover{

    border-color:var(--gold);

    transform:translateY(-8px);

}

.service-card h3{

    color:var(--white);

}

.service-card p{

    color:var(--grey);

}



/*==================================================
  SOCIAL BUTTONS
==================================================*/

.social-grid{

    display:grid;

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

    gap:20px;

}

.social-card{

    background:var(--card);

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

    border-radius:20px;

    padding:25px;

    text-align:center;

    transition:var(--transition);

}

.social-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

}

.social-card i{

    font-size:40px;

    margin-bottom:15px;

    color:var(--gold);

}

.social-card h4{

    color:var(--white);

    margin-bottom:10px;

}

.social-card p{

    color:var(--grey);

    font-size:15px;

}



/*==================================================
  IMAGE EFFECTS
==================================================*/

.image-hover{

    overflow:hidden;

    border-radius:22px;

}

.image-hover img{

    transition:.45s;

}

.image-hover:hover img{

    transform:scale(1.06);

}



/*==================================================
  SECTION SPACING
==================================================*/

.section-gap{

    margin-top:100px;

}

.section-gap-small{

    margin-top:60px;

}



/*==================================================
  VIDEO WRAPPER
==================================================*/

.video-wrapper{

    max-width:1140px;

    margin:70px auto;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

}

.video-wrapper iframe{

    width:100%;

    aspect-ratio:16/9;

    border:0;

    display:block;

}



/*==================================================
  EMBED CONTAINER
==================================================*/

.embed-box{

    background:var(--card);

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

    border-radius:24px;

    overflow:hidden;

    padding:20px;

}



/*==================================================
  FAQ
==================================================*/

.faq{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:var(--card);

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

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

}

.faq-question{

    padding:22px 28px;

    color:var(--white);

    font-size:20px;

    font-weight:600;

}

.faq-answer{

    padding:0 28px 24px;

    color:var(--grey);

}



/*==================================================
  TIMELINE
==================================================*/

.timeline{

    position:relative;

    margin:60px auto;

    max-width:900px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--gold);

}

.timeline-item{

    position:relative;

    padding-left:80px;

    margin-bottom:50px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:16px;

    top:6px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--gold);

}

.timeline-year{

    color:var(--gold);

    font-weight:700;

    margin-bottom:10px;

}

.timeline-item h3{

    color:var(--white);

}

.timeline-item p{

    color:var(--grey);

}



/*==================================================
  QUOTE BLOCK
==================================================*/

.quote-box{

    background:linear-gradient(135deg,#1a1a1a,#111);

    border-left:5px solid var(--gold);

    padding:45px;

    border-radius:20px;

    margin:60px 0;

}

.quote-box p{

    font-size:24px;

    color:var(--white);

    font-style:italic;

    margin-bottom:20px;

}

.quote-author{

    color:var(--gold);

    font-weight:600;

}



/*==================================================
  GALLERY
==================================================*/

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

}

.gallery-item img{

    width:100%;

    transition:.4s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}



/*==================================================
  FOOTER
==================================================*/

.site-footer{

    background:#090909;

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

    padding:70px 0 40px;

}

.footer-title{

    color:var(--white);

    margin-bottom:20px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:30px;

}

.footer-links a{

    color:var(--grey);

}

.footer-links a:hover{

    color:var(--gold);

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:35px 0;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--card);

    color:var(--gold);

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--gold);

    color:#111;

}

.footer-copy{

    color:#777;

    text-align:center;

    font-size:15px;

}



/*==================================================
  HOVER LIFT
==================================================*/

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}



/*==================================================
  GOLD UNDERLINE
==================================================*/

.gold-underline{

    position:relative;

    display:inline-block;

}

.gold-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:60%;

    height:3px;

    background:var(--gold);

    border-radius:10px;

}



/*==================================================
  PREMIUM DIVIDER
==================================================*/

.section-divider{

    width:120px;

    height:4px;

    margin:30px auto 50px;

    background:linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );

    border-radius:50px;

}



/*==================================================
  LOADING PLACEHOLDER
==================================================*/

.loading{

    text-align:center;

    color:var(--grey);

    padding:60px;

}



/*==================================================
  EMPTY STATE
==================================================*/

.empty-state{

    text-align:center;

    padding:80px 20px;

    color:var(--grey);

}

.empty-state h3{

    color:var(--white);

    margin-bottom:20px;

}



/*==========================================
STREAMING PLATFORMS
==========================================*/

.streaming-platforms{

display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:30px;

}


.streaming-platforms a{

background:#171717;
border:1px solid #333;
border-radius:12px;

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

width:92px;
height:52px;

}

.streaming-platforms a:hover{

border-color:var(--gold);

transform:translateY(-4px);

box-shadow:0 0 18px rgba(255,193,7,.25);

}


.streaming-platforms img{

max-width:70px;
max-height:28px;

object-fit:contain;

display:block;

}




/*==========================================
JOIN THE JOURNEY
==========================================*/

.social-connect{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:45px;

}

.social-btn{

display:flex;

align-items:center;

gap:14px;

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

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

border-radius:14px;

padding:14px 22px;

text-decoration:none;

transition:var(--transition);

color:var(--white);

min-width:180px;

}

.social-btn:hover{

border-color:var(--gold);

transform:translateY(-5px);

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

}

.social-btn img{

width:34px;

height:34px;

object-fit:contain;

}

.social-btn span{

font-size:17px;

font-weight:600;

color:var(--white);

}