@import "reset.css";

/*
maincolors:
BACKGROUND:#fff
COLOR:#000
MAINCOLOR:#000
MAINCOLOR2:#c00
COLOR_ON_MAIN:#fff;
*/

html {  -webkit-text-size-adjust: none;scroll-behavior: smooth;	}
body {background: #111111;color: rgba(255,255,255,0.78);font-family: Outfit, Arial;font-size: 18px;font-weight: 300;}
/*body.page1 {background: url(../images/UTM.jpg) no-repeat center center fixed #dddbd6;background-size: cover;}
body.page1:before {content: "";position: fixed;top: 0px;left: 0px;height: 100vh;width: 100%;background: rgba(0, 0, 0, 0.4);background-blend-mode: unset;}
body.page2 {background: url(../images/bg.jpg) no-repeat center center fixed #121619;background-size: cover;}
body.page3 {background: url(../images/cc.jpg) no-repeat center right fixed #121619;background-size: cover;}
body.page4 {background: url(../images/bg.jpg) no-repeat center right fixed #121619;background-size: cover;}
body.page8 {background: url(../images/bg.jpg) no-repeat center right fixed #121619;background-size: cover;}
body.page9 {background: url(../images/survivors.jpg) no-repeat center center fixed #121619;background-size: cover;}
body.page1:before, body.page2:before, body.page3:before, body.page4:before, body.page8:before {content: "";position: fixed;top: 0px;left: 0px;height: 100vh;width: 100%;background: rgba(0, 0, 0, 0.4);background-blend-mode: unset;}
body.page9:before {content: "";position: fixed;top: 0px;left: 0px;height: 100vh;width: 100%;background: rgba(0, 0, 0, 0.7);background-blend-mode: unset;}*/
body, html {height: 100%;}
body::-webkit-scrollbar {width: 12px;}
body::-webkit-scrollbar-track {background: #000;}
body::-webkit-scrollbar-thumb {background-color: #FE4833;border-radius: 20px;border: 3px solid #000;}
.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear{clear:both;}
a{color:#fff;word-wrap: break-word;}
a:hover{color:#FE4833;}
a.action{display:inline-block;background-color:#000;border:solid 1px #000;color:#fff;padding:5px 10px 5px 10px;text-decoration:none;border-radius:7px;box-sizing:border-box;}
a.action:after {content:"\f105";font-family: "Font Awesome 7 Pro"; font-weight: 900;padding-left:7px;}
a.action:hover{background-color:#fff;color:#000;border:solid 1px #000;}
a.tel{text-decoration:none;display:block;}
b,strong{font-weight:bold;}
em {font-style: italic;font-size: 12px;}

#superwrapper {min-height: 100%;height: auto !important;height: 100%;}
.wrapper {max-width: 1400px;width:92%;height: auto;margin: 0px auto;position:relative;}

.table{display:table;width:100%;}
.tr{display:table-row;}
.td{display:table-cell;box-sizing:border-box;padding:3px;}

.placeholder {color:#aaa;}
::-webkit-input-placeholder, ::-webkit-textarea-placeholder {color:#aaa;}
:-moz-placeholder {color:#aaa;opacity:1;}
::-moz-placeholder {color:#aaa;opacity:1;}
:-ms-input-placeholder, :-ms-textarea-placeholder {color:#aaa;}	
input[placeholder], textarea[placeholder] {color:#aaa;}

/*ENTER BUTTON
**************/
#enter{position:absolute;bottom:10px;width:100%;text-align:center}
#enter a{background-color:#fff;padding:10px;display:inline-block;text-decoration:none;border-radius:10px;font-size:20px;}

/*PAGE_TITEL
**************/
h1 {color:#fff;font-size:34px;line-height:normal;font-weight:800;margin-bottom: 20px;letter-spacing: 1px;}
h2 {color:#fff;font-size:34px;line-height:normal;font-weight:700;margin-bottom: 10px;letter-spacing: 0.5px;}
h3 {color:#fff;font-size:20px;line-height:normal;font-weight:600;margin-bottom: 20px;letter-spacing: 0.5px;}

/*HEADER MOB
**************/
#navMobMenu{display:none;}
#navMob,#searchMob,#loginLnksmob,#languagesMob {background-color:#fff;display:none;}

/*HEADER
******************/
#top {padding: 15px 0;position: fixed;top: 0px;left: 0px;width: 100%;z-index: 999;background-color: #111;}
#header {width:100%;position: relative;display: flex;align-items: center;}
#logo {flex: 1;display: flex;justify-content: center;}
#logo img {height: 60px;transition: height .25s ease, transform .25s ease;}
#top.is-scrolled {border-bottom: 1px solid rgba(255,255,255,.06);}
#top.is-scrolled #logo img {height: 30px;}

#release {width: 100%;text-align: center;position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;padding: 130px 0 40px 0;background: url(../images/UTM.jpg) no-repeat center center fixed #dddbd6;background-size: cover;}
#release:before {content: "";position: absolute;top: 0px;left: 0px;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.4);background-blend-mode: unset;}
.imageholder {width: 450px;position: relative;z-index: 3;}
.imageholder img {box-shadow: 0px 0px 17px rgba(0,0,0,0.12);}

.mob {display: none;}

/*#socials {position: absolute;bottom: 25px;right: 0px;display: flex;width: 100%;z-index: 9999;}*/
#socials {flex: 1;}
#socials ul {list-style-type: none;display: flex;justify-content: flex-end;gap: 15px;margin: 0;}
#socials ul li {display: inline-flex;}
#socials ul li a {display: block;text-decoration: none;color: #fff;font-size: 20px;}
#socials ul li a.spotify:hover {color: #22C95C;}
#socials ul li a.apple:hover {color: #d60017;}
#socials ul li a.instagram:hover {color: #DC4681;}
#socials ul li a.facebook:hover {color: #365795;}
#socials ul li a.soundcloud:hover {color: #F75600;}
#socials ul li a.youtube:hover {color: #F30E0D;}

.referral {font-weight: 700;font-size: 20px;letter-spacing: 0.95px;text-decoration: none;padding-bottom: 5px;border-bottom: 2px solid #fff;}

.play {margin-top: 20px;}

#recent, #about {padding: 80px 0;line-height: 28px;overflow: hidden;}

#stats {padding: 80px 0;background-color: #000;}
.stat{
  text-align: center;
}

.stat__num{
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  color: #FE4833;
  letter-spacing: .01em;
}

.stat__num span{
  font-size: .65em;
  vertical-align: top;
  margin-left: 2px;
}

.stat__label{
  margin-top: 10px;
  letter-spacing: .18em;
}
.about-image{
  position: relative;
  border-radius: 18px;
  z-index: 1;
}

/* DE GLOW */
.about-image::before{
  content:"";
  position: absolute;
  inset: -60px;                 /* hoe ver glow uitloopt */
  z-index: -1;

  background:
    radial-gradient(
      circle at 70% 40%,
      rgba(255, 43, 43, .45),
      rgba(255, 43, 43, .15) 35%,
      rgba(0,0,0,0) 70%
    );

  filter: blur(60px);
  opacity: .85;
}
.btn-cc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
margin-top: 30px;line-height: normal;
  padding: 14px 22px;
  border-radius: 12px;

  background: #FE4833;
  color: #fff;
  text-decoration: none;

  font-weight: 700;

  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 28px rgba(255, 43, 43, .22);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-cc:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 43, 43, .28);
  filter: brightness(1.05);color: #fff;
}

.btn-cc:active{
  transform: translateY(0px);
  box-shadow: 0 10px 24px rgba(255, 43, 43, .18);
}

.btn-cc__arrow{
  display: inline-block;
  transition: transform .18s ease;
}

.btn-cc:hover .btn-cc__arrow{
  transform: translateX(4px);
}

.supported-by{text-align: center;
  position: relative;
  padding: 80px 0;
  background: #000;
  overflow: hidden;
}

/* subtiele vignet / fade */
.supported-by::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.85),
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.85)
    );
  pointer-events:none;
}


.supported-by__label{
  display: block;
  margin-bottom: 18px;

  font-size: 16px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* artiesten */
.supported-by__names{
  margin: 0;
  font-size: 36px;font-weight: 700;
  color: #f1f1f1;
  text-transform: uppercase;
}



/*IMAGES FIT
******************/
img.cover{object-fit:cover;}
img.coverT{object-fit:cover;object-position:left top;}
img.coverB{object-fit:cover;object-position:left bottom;}
img.contain{object-fit:contain;}

/*MAIN CONTENT
*********************************/
#main {width: 100%;padding: 130px 0 60px 0;line-height: 30px;overflow: hidden;}

/*CONTENT BLOCK
*******************/
#contenthome{}
#content {width:100%;}
#sec3 {width: 60%;}
#sec4, #sec11, #sec12 {text-align: center;width: 100%;max-width: 640px;margin: 0 auto;}
#sec11 {margin-bottom: 30px;}

/*MOZAIEK
***************/
#mozaiek {width: 100%;column-gap: 20px;box-sizing: border-box;}
#mozaiek .mozaiek {width: 100%;margin: 0 0 20px;break-inside: avoid;}
#mozaiek .mozaiek a {display: block;}

.releases {margin-top: 60px;}

.release-card{
  text-decoration: none;

  display: block;
  border-radius: 18px;

  background: linear-gradient(
    160deg,
    rgba(255,255,255,.06),
    rgba(0,0,0,.35)
  );

  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 20px 40px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03);

  padding: 18px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.release-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* artwork */
.release-card__art{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;

  background:
    radial-gradient(circle at top left,
      rgba(240,122,26,.25),
      transparent 55%
    );
}

.release-card__art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;

  transform: scale(1);
  transition: transform .4s ease;
}

.release-card:hover .release-card__art img{
  transform: scale(1.04);
}

/* meta */
.release-card__meta h3{
  margin: 0 0 6px;
}

.release-card__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.release-card .label{
	font-size: 16px;
}

.release-card .year{
  font-weight: 600;
  color: #FE4833;font-size: 14px;
}


.grid-6 							{display: grid;grid-gap: 20px;grid-template-columns: repeat(6,1fr);}
.grid-5 							{display: grid;grid-gap: 30px;grid-template-columns: repeat(5,1fr);}
.grid-4 							{display: grid;grid-gap: 40px;grid-template-columns: repeat(4,1fr);}
.grid-4-m1 							{display: grid;grid-gap: 40px;grid-template-columns: repeat(4,1fr);}
.grid-4-m2 							{display: grid;grid-gap: 40px;grid-template-columns: repeat(4,1fr);}
.grid-4-s 							{display: grid;grid-gap: 40px;grid-template-columns: repeat(4,1fr);}
.grid-3 							{display: grid;grid-gap: 50px;grid-template-columns: repeat(3,1fr);}
.grid-2 							{display: grid;grid-gap: 60px;grid-template-columns: repeat(2,1fr);}
.grid-2-a 							{display: grid;grid-gap: 60px;grid-template-columns: 1.5fr 1fr;}
.cols-2 {display: flex;align-items: center;justify-content: center;gap: 60px;}
.cols-2 div {flex: 4;}
.cols-2 div:last-child {flex: 3;}
.img img {height: 100%;border-radius: 12px;object-fit: cover;}
.section {margin-top: 60px;}

.cc-contact__left {display: flex;gap: 40px;flex-direction: column;}

/* cards */
.cc-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;

  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

.cc-card--big{
  min-height: 520px;
}

/* contact info rows */
.cc-info{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
	line-height: normal;
}

.cc-ico{
  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255, 45, 45, .12);
  border: 1px solid rgba(255,45,45,.22);
  color: #FE4833;
}

.cc-ico i{ font-size: 16px; }

.cc-label{
  
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}


/* socials */
.cc-socials{
  display: flex;
  gap: 14px;
}

.cc-socials a{
  width: 40px;
  height: 40px;
  border-radius: 12px;

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

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);

  color: rgba(255,255,255,.60);
  text-decoration: none;

  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.cc-socials a:hover{
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(255,45,45,.28);
  background: rgba(255,45,45,.10);
}



/*.year {margin-bottom: 15px;font-size: 12px;font-style: italic;line-height: normal;}*/
.artwork {margin-bottom: 20px;position: relative;}
.artwork a {display: block;}
.artwork img {transform: scale(1);transition: transform .2s;}
.artwork img:hover {transform: scale(1.05);}
.artworkc {margin-bottom: 20px;position: relative;}
.artworkc a {display: block;}
.remix {display: inline-block;color: #00ff00;text-transform:uppercase;text-decoration: none;line-height: normal;letter-spacing: 2.6px;font-size: 8px;font-weight: 700;border-radius: 20px;padding-left: 5px;}
.play a {display: inline-block;background-color: #FE4833;color: #fff;border-radius: 20px;padding: 15px 20px;text-transform:uppercase;text-decoration: none;line-height: normal;border: 1px solid #FE4833;letter-spacing: 2.6px;font-size: 10px;font-weight: 700;}
.play a:hover {background-color: transparent !important;}
.play span {display: inline-block;background-color: #732017;color: #fff;border-radius: 20px;padding: 15px 20px;text-transform:uppercase;text-decoration: none;line-height: normal;border: 1px solid #732017;letter-spacing: 2.6px;font-size: 10px;font-weight: 700;}
.timer {list-style-type: none;margin: 0;}
.timer li {display: inline-block;margin: 0 2px;}

/*NIEUWSBALK
*************/
.newsHome{margin-top:20px;}
.newsHome a{text-align:center;font-size:20px;color:#000;display:block;text-decoration:none;padding:5px;text-transform:uppercase;}
.newsHome a i{color:#000;}
.newsHome a:hover{outline:solid 1px #ccc;background-color:#fff;}
#nieuw h3{text-transform:uppercase}
.newsTotal{float:left;width:60%;margin-left:10%;}

.RSFIQ {padding: 0 !important;}

.cc-footer{
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

/* subtiele “cinematic” fade */
.cc-footer::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.85),
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,.85)
  );
  pointer-events:none;
}

.cc-footer__inner{
  

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

  position: relative;
  z-index: 1;
}

/* 3 zones even breed => socials écht in het midden */
.cc-footer__logo,
.cc-footer__socials,
.cc-footer__copy{
  flex: 1;
  font-size: 13px;
}

.cc-footer__logo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.cc-footer__logo img{
  height: 34px;
  width: auto;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}

.cc-footer__logo:hover img{
  opacity: 1;
  transform: translateY(-1px);
}

/* socials */
.cc-footer__socials{
  display: flex;
  justify-content: center;
  gap: 12px;
}

.cc-footer__socials a{
  width: 34px;
  height: 34px;
  border-radius: 999px;

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

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);

  color: rgba(255,255,255,.55);
  text-decoration: none;

  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.cc-footer__socials a i{
  font-size: 14px;
}

.cc-footer__socials a:hover{
  transform: translateY(-2px);
  color: #fff;
  background: rgba(255,43,43,.10);
  border-color: rgba(255,43,43,.22);
}

/* copyright */
.cc-footer__copy{
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.cc-footer__copy a {color: rgba(255,255,255,.78);}
.cc-footer__copy a:hover {color: #fff;}

/*FOOTER TOP
***********/

#contact {float: left;padding: 21px 0;}

#socials2 {float: right;padding: 18px 0;}
#socials2 ul {list-style-type: none;margin: 0;}
#socials2 ul li {display: inline-block;}
#socials2 ul li a {display: block;margin-left: 20px;text-decoration: none;color: #fff;font-size: 20px;}
#socials2 ul li:first-child a {margin-left: 0px;}
#socials2 ul li a.spotify:hover {color: #22C95C;}
#socials2 ul li a.apple:hover {color: #d60017;}
#socials2 ul li a.instagram:hover {color: #DC4681;}
#socials2 ul li a.facebook:hover {color: #365795;}
#socials2 ul li a.soundcloud:hover {color: #F75600;}
#socials2 ul li a.youtube:hover {color: #F30E0D;}
#socials2 ul li a.mail:hover {color: #C3A701;}

#footer					{padding: 20px 0px;color: #fff;background-color: #000;position: relative;bottom: 0px;left: 0px;width: 100%;z-index: 999;}
#footer a 				{color:#fff;text-decoration:none;}
#fct 					{float:left;}
#fct ul 				{margin:0px;list-style-type:none;}
#fct ul li 				{display:inline-block;margin-right:3px;}
#fct ul li:last-child 	{margin-right:0px;}
#fct2 					{float:right;}
#fct a.tel 				{display:inline-block;}
.navB					{display:none;}
#footer2 				{background-color:#ededed;border-top:1px solid #d8d8d8;padding:75px 0px;font-size:15px;}

/*FORMS
********/
.required {color: #FE4833;}
.field_heading {font-weight: bold;padding-top: 10px;}
.field_title {margin-bottom:10px;}
.field_input {margin-bottom:10px;}
.field_checkbox {float:left;width: 100%;margin-bottom:10px;}
.field_title2 {width:100%;margin-bottom:10px;}
.field_input2 {width:100%;margin-bottom:10px;}
input[type='checkbox'] {width:auto;}
input[type='radio'] {width:auto;}
button:focus {outline:0;appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;}
.textarea{width:100%;}
.email,.textfield,.textarea,select {color:#7c7c7c;background-color:#333;border:1px solid rgba(255,255,255,.06);padding:10px;width:100%;box-sizing: border-box;font-family:Outfit, Arial;font-size:16px;}
.email,.textfield,.textarea{border-radius: 12px;outline: none;}
.textarea {height: 100px;}
.checkbox_label {cursor: pointer;}
.radio_label {cursor: pointer;}
.nixhier {display:none;}
.submit {outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;display: inline-block;background-color: #FE4833;color: #fff;border-radius: 20px;padding: 15px 20px;text-decoration: none;line-height: normal;border: 0;letter-spacing: 1px;font-weight: 700;margin-top: 20px;font-family:Outfit, Arial;font-size: 18px;}
.gdpr {font-size:10px;line-height: normal;}

#mc_embed_signup .asterisk {color: #FE4833 !important;}
#mc_embed_signup input {border: 0px !important;margin: 0 auto !important;}



/* --- Hero (blurred background) --- */
       .hero {
    position: relative;
    height: 500px;                 /* pas aan naar smaak */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;       /* horizontaal centreren */
    align-items: center;           /* verticaal centreren */
}

/* blur + overlay laag */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    background: inherit;           /* neemt background-image van .hero over */
    filter: blur(6px);
    transform: scale(1.06);        /* randen blur wegwerken */
}

.hero::after {
    background: rgba(0,0,0,0.25);  /* donker laagje */
}

/* PLAYER CARD: GEWOON RELATIVE, NIET ABSOLUTE */
.player-card {
	color: #000;
    position: relative;            /* geen absolute, geen bottom, geen transform */
    z-index: 1;                    /* boven de blur-lagen */
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    text-align: center;
}

        /* --- Page content --- */
        .page {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 16px 60px;
            text-align: center;
        }

      .player-cover {
	margin-bottom: 12px;
    width: 350px;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.progress-container {
    width: 100%;
    height: 5px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-top: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #FE4833;     /* jouw rode accentkleur */
    transition: width 0.1s linear;
}

        .player-bar::before {
            content: none !important;
        }

        .player-time {
            margin-left: auto;
            opacity: .7;
        }

        /* --- Titel & byline --- */
        /*h1 {
            font-weight: 800;
            font-size: 26px;
            margin: 26px 0 4px;
            letter-spacing: .03em;
        }*/

        .byline {
            font-size: 13px;
            margin-bottom: 20px;
        }

        .byline a {
            color: #333;
            text-decoration: none;
            border-bottom: 1px dotted rgba(0,0,0,0.4);
        }

        .byline a:hover {
            border-bottom-style: solid;
        }

        .section-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .16em;
            margin-bottom: 12px;
            opacity: .6;
        }

        /* --- Buttons --- */
        .platform-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(140px, 170px));
            gap: 8px 14px;
            justify-content: center;
            margin-bottom: 16px;
        }

        .btn-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 18px;
            border-radius: 999px;
            border: 1px solid #c6c4c0;
            background: #f8f7f5;
            font-size: 12px;
            cursor: pointer;
            text-decoration: none;
            color: #333;
            min-height: 28px;
        }

        .btn-pill i {
            margin-right: 6px;
            font-size: 14px;
        }

        .btn-pill:hover {
            background: #ebe9e6;
        }

        .btn-primary {
            margin-top: 6px;
            padding: 7px 24px;
            background: #f1ede6;
            border: 1px solid #c2b8aa;
            font-size: 12px;
        }

        .btn-primary i {
            margin-right: 7px;
            font-size: 13px;
        }

        /* --- Description & meta --- */
        .description {
            margin: 22px auto 14px;
            max-width: 340px;
            font-size: 10px;
            line-height: 1.5;
            color: #777;
        }

        .release-info {
            font-size: 10px;
            opacity: .6;
            margin-bottom: 18px;
        }

        /* --- Socials --- */
        .socials {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 38px;
        }

        .socials a {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid #bbb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #555;
            text-decoration: none;
        }

        .socials a:hover {
            background: #ebe9e6;
        }

       
#trackTitle {font-weight: 700;font-family: Inter;}
.player-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    border-radius: 8px;
    background: #ffffff;
    padding: 6px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* PLAY KNOP */
#playBtn {
	line-height: normal;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #FE4833;
    color: #FE4833;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* PLAY-ICON */
#playBtn::before {
    content: "\f04b";
    font-family: "Font Awesome 7 Pro";
    font-weight: 700;
	font-size: 10px;
}

/* PAUSE-ICON */
.player-playing #playBtn::before {
    content: "\f04c";
    margin-left: 0;
}

/* INLINE PROGRESS BAR */
.progress-inline {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* FILL */
.progress-bar {
    height: 100%;
    width: 0%;
    background: #FE4833;
}

/* TIME */
.player-time {
    min-width: 36px;
    text-align: right;
}