html,
 body {
    font: 300 18px/18px Roboto, sans-serif;
    margin: 0;
    overflow: hidden;
    background-color: rgb(245, 245, 245);

 }

 #button_Back {

   cursor: pointer;

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 83, 103);
    border: 0ch;


 }

 



 




 .infoContent{
   font-size: 15px;
   line-height: 25px;
   padding-bottom: 15px;
 }




 .infoPanel {
    
    background-color: rgba(255, 255, 255, 1);
    border-style:solid;
    border-color: #ffffff;
    border-width: 15px;    
    /* height: 100%; */
    right: 0px;        
    border-radius: 10px;
    z-index: 0;    
    overflow: auto;
    max-height: 100%;
    /* İçeriğin maksimum yüksekliği */
 }




 #button_Back:hover {
    

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 114, 130);
    border: 0ch;


 }




 #button_Back:active {

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 144, 157);
    border: 0ch;


 }



 #button_Home {

   cursor: pointer;
    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 83, 103);
    border: 0ch;

 }


 #button_Home:hover {

    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 114, 130);
    border: 0ch;

 }



 #button_Home:active {

    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 144, 157);
    border: 0ch;

 }



 .button_ModelAdi {

   

    padding: 12px;
    text-align: center;
    background-color: transparent;
    border: 0ch;

 }







 #button_Icons {

   cursor: pointer;
    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 #button_Icons:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }

 #button_Icons:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 /*-----------------------------------*/



 .button_Icons_right {
   cursor: pointer;

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 .button_Icons_right:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }

 .button_Icons_right:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }

 /*---------------------------------*/



 .button_Icons_orta {
   cursor: pointer;

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 .button_Icons_orta:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }


 .button_Icons_orta:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 .button_Icons_left {

   cursor: pointer;

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }


 .button_Icons_left:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }


 .button_Icons_left:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 .renk {

   cursor: pointer;

    color: rgb(121, 121, 121);

    margin-left: 5px;

    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 7px 7px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }





 .closeRenk {

   cursor: pointer;

    color: white;


    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;

    border-radius: 40px;
    text-align: center;
    background-color: rgb(247, 57, 79);
    border: 0ch;

 }

 .closeRenk:hover {

    color: white;
    background-color: rgb(255, 89, 108);


 }

 .closeRenk:active {

    color: white;
    background-color: rgb(255, 135, 149);


 }










 .color {
    width: auto;
    height: auto;
    display: inline-block;
    padding: 20px;
    margin: 2px;
    cursor: pointer;
    border: 1px solid rgb(216, 216, 216);
    border-radius: 100%;

    /* Stroke rengi ve kalınlığı */
 }



 #colorPalette {
    margin: 10px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);

 }

 .colorpaleting {
   text-align: center;
    width: auto;
    height: auto;

    padding: 5px;

    border-radius: 15%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
 }







 /*model adı*/
 .modelAdi_dark {
    font-family: inter;
    color: rgb(121, 121, 121);
    font-size: 20px;
    padding-left: 10px;
 }


 .modelAdi_light {
    font-family: inter;
    color: rgb(235, 235, 235);
    font-size: 20px;
    padding-left: 10px;
 }



 /*Buton calss - my-button*/
 .buttonContainer {
   cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
 }


 /* Normal durum */
 .my-button {
   cursor: pointer;
    background-color: #f1f1f1;
    color: #333;
    display: block;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 20px;
    padding: 15px;
    border: none;
    border-radius: 5px;
 }

 /* Farenin üzerine geldiği durum */
 .my-button:hover {
    background-color: #ddd;
 }

 /* Tıklanma durumu */
 .my-button:active {
    background-color: #bbb;
 }

 /* Odaklanma durumu (klavye ile erişildiğinde) */
 .my-button:focus {
    outline: none;
    box-shadow: 0 0 5px #888;
 }

 /* Devre dışı (disable) durumu */
 .my-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
 }











 /*Loading style*/



 #loading-bar {
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
 }

 #progress-bar {
    width: 0%;
    height: 100%;
    background-color: #bc3958;
 }

 #progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }



 /*loading bar cube*/


 #loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

 #loading-bar {
    width: 200px;
    /* Yüklenme çubuğunun genişliği */
    height: 50px;
    /* Yüklenme çubuğunun yüksekliği */
    background-color: #f0f0f0;
    /* Yüklenme çubuğunun arka plan rengi */
 }

 #progress-bar {
    height: 100%;
    background-color: #00bfff;
    /* Yüklenme çubuğunun dolma rengi */
    width: 0%;
    /* Başlangıçta yüzde doluluk değeri sıfır */
    transition: width 0.5s ease;
    /* Genişlik geçiş efekti */
 }

 #progress-percent {
    margin-top: 5px;
    /* Yüzde değeriyle yüklenme çubuğu arasındaki boşluk */
 }

 /*--------------*/



 /*Loading yeni daire*/






 /*Loading end*/





 /*player stilleri*/

 *,
 :after,
 :before {
    box-sizing: border-box
 }

 .pull-left {
    float: left
 }

 .pull-right {
    float: right
 }

 .clearfix:after,
 .clearfix:before {
    content: '';
    display: table
 }

 .clearfix:after {
    clear: both;
    display: block
 }

 .track {
    width: 2px;
    margin-right: 5px;
    background: rgba(0, 0, 0, 0);
    transition: background 250ms linear;
 }

 .track:hover,
 .track.dragging {
    background: #d9d9d9;
    background: rgba(0, 0, 0, .15);
 }

 .handle {
    right: 0;
    width: 2px;
    background: #999;
    transition: width 250ms;
    background: rgba(255, 255, 255, .2);
 }










 .mhn-player {
   width: 80%; /* Tam genişlik alacak */
   max-width: 530px; /* İsteğe bağlı, en fazla 500px genişlik */
    padding: 5px;
    position: relative;
    margin: 55px auto 0;
    /*Player arka planı*/
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .10), 0 4px 10px 0 rgba(0, 0, 0, .10);
    border-radius: 25px;
    /* Çizgi kalınlığı ve rengi */
    border: 0.1px solid rgba(255, 255, 255, 0.5);
    /* Çizgi kalınlığı ve rengi burada belirtiliyor */
 }







 .mhn-player a {
    color: inherit;
    text-decoration: none;
 }

 .mhn-player .current-info {
    left: 30px;
    right: 30px;
    color: #ccc;
    bottom: 160px;
    margin-left: -15px;
    margin-right: -15px;
    position: absolute;
    text-shadow: 0 2px 4px #000;
 }

 .mhn-player .current-info>div {
    margin-top: 10px;
 }

 .mhn-player .current-info .song-title {
    font-size: 24px;
    margin-top: 10px;
    font-weight: 400;
 }

 .mhn-player .current-info .fa {
    min-width: 30px;
    font-size: 18px;
    text-align: center;
    font-weight: normal;
 }

 .mhn-player .controls {
    margin: 13px;
    position: relative;
 }

 .mhn-player .controls .toggle-play-list {
    right: 5px;
    width: 40px;
    color: #ccc;
    height: 40px;
    bottom: 100px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    position: absolute;
    background-color: crimson;
 }

 .mhn-player .controls .fa-pp:before {
    content: '\f04b';
 }

 .mhn-player .controls .active .fa-pp:before {
    content: '\f04c';
 }

 .mhn-player .controls .progress {
    height: 1px;
    margin: 15px 0;
    position: relative;
    background: #262626;
 }

 .mhn-player .controls .duration {

    color: #ccc;
    font-size: 14px;
 }

 .mhn-player .controls .progress .bar {
    width: 0;
    display: block;
    height: inherit;
    background: #bc3958;
    box-shadow: 0 0 5px 0 #bc3958;
 }

 .mhn-player .controls .action-button a {
    width: 40px;
    height: 40px;
    font-size: 16px;
    margin-right: 5px;
    border: 2px solid;

    /*Buton renkleri*/
    color: rgba(0, 0, 0, 0.2);

    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
 }

 .mhn-player .controls .action-button a:hover,
 .mhn-player .controls .action-button a.active {
    color: rgba(196, 164, 132, 0.7);
 }

 .mhn-player .controls .action-button a .fa {
    font-size: inherit;
 }




 .volume {
   height: 50%;
   width: 90%;
   max-width: 400px;
   /* width: 250px; eski ayar*/
   margin: 0 10px;
   font-size: 14px;
   cursor: pointer;
   border-radius: 10px;
   display: inline-block;
   -webkit-appearance: none;
   background: transparent;
}













 .volume::-webkit-slider-runnable-track {
    height: .5em;

    /*çubuk renk*/
    background-color: rgba(0, 0, 0, 0.2);

    border-radius: .25em;
    -webkit-appearance: none;
 }

 .volume::-moz-range-track {
    border: none;
    height: .5em;
    background: #be3333;
    border-radius: .25em;
 }

 .volume::-ms-track {
    border: none;
    height: .5em;
    color: transparent;
    background: #d8d8d8;
    border-radius: .25em;
 }

 /*Boncuk değeri*/
 /*
 .volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;    
    margin: -.25em;
    border: none;
    /* Firefox, IE */
 /*
    width: 1.5em;
    height: 1.5em;
    border-radius: 1em;
 }*/
 /*BURADA*/
 .volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    /* margin: -.25em; */
    top: 50%;
    transform: translateY(-50%);
    border: none;
    /* Firefox, IE */
    width: 2em;
    height: 2em;
    border-radius: 1em;
 }



 .volume::-moz-range-thumb {
    border: none;
    /* Firefox, IE */
    width: 1em;
    height: 1em;
    cursor: ew-resize;
    border-radius: .5em;
 }

 .volume::-ms-thumb {
    border: none;
    /* Firefox, IE */
    width: 1em;
    height: 1em;
    border-radius: .5em;
 }

 .volume::-ms-fill-lower,
 .volume::-ms-fill-upper {
    border-radius: 5em;
    background: transparent;
 }

 .volume::-ms-tooltip {
    display: none;
 }

 .volume::-ms-fill-lower {
    background: #f05e7b;
 }

 .volume::-webkit-slider-thumb {
    /*Boncuk rengi*/
    background: #dc143c;
 }

 .volume::-moz-range-thumb {
    background: hwb(348 8% 14%);
 }

 .volume::-ms-thumb {
    background: #dc143c;
 }

 .volume::-webkit-slider-runnable-track {

    /*slider iç dolgu eski*/
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background: rgba(220, 20, 60, 0);
    /* background-image: linear-gradient(#f05e7b, #f05e7b); */
 }

 .volume::-moz-range-track {
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(#f05e7b, #f05e7b);
 }

 .volume[data-css="0"]::-webkit-slider-runnable-track {
    background-size: 0% 100%
 }

 .volume[data-css="0"]::-moz-range-track {
    background-size: 0% 100%
 }

 .volume[data-css="0.1"]::-webkit-slider-runnable-track {
    background-size: 10% 100%
 }

 .volume[data-css="0.1"]::-moz-range-track {
    background-size: 10% 100%
 }

 .volume[data-css="0.2"]::-webkit-slider-runnable-track {
    background-size: 20% 100%
 }

 .volume[data-css="0.2"]::-moz-range-track {
    background-size: 20% 100%
 }

 .volume[data-css="0.3"]::-webkit-slider-runnable-track {
    background-size: 30% 100%
 }

 .volume[data-css="0.3"]::-moz-range-track {
    background-size: 30% 100%
 }

 .volume[data-css="0.4"]::-webkit-slider-runnable-track {
    background-size: 40% 100%
 }

 .volume[data-css="0.4"]::-moz-range-track {
    background-size: 40% 100%
 }

 .volume[data-css="0.5"]::-webkit-slider-runnable-track {
    background-size: 50% 100%
 }

 .volume[data-css="0.5"]::-moz-range-track {
    background-size: 50% 100%
 }

 .volume[data-css="0.6"]::-webkit-slider-runnable-track {
    background-size: 60% 100%
 }

 .volume[data-css="0.6"]::-moz-range-track {
    background-size: 60% 100%
 }

 .volume[data-css="0.7"]::-webkit-slider-runnable-track {
    background-size: 70% 100%
 }

 .volume[data-css="0.7"]::-moz-range-track {
    background-size: 70% 100%
 }

 .volume[data-css="0.8"]::-webkit-slider-runnable-track {
    background-size: 80% 100%
 }

 .volume[data-css="0.8"]::-moz-range-track {
    background-size: 80% 100%
 }

 .volume[data-css="0.9"]::-webkit-slider-runnable-track {
    background-size: 90% 100%
 }

 .volume[data-css="0.9"]::-moz-range-track {
    background-size: 90% 100%
 }

 .volume[data-css="1"]::-webkit-slider-runnable-track {
    background-size: 100% 100%
 }

 .volume[data-css="1"]::-moz-range-track {
    background-size: 100% 100%
 }

 /*player stilleri end*/




















 /* CSS stil örnekleri */
 .timeline {
    width: 100%;
    height: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
 }

 .progress {
    height: 100%;
    background-color: #6dd5ed;
 }






 .renk:hover {

    color: rgb(121, 121, 121);

    margin-left: 5px;

    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 7px 7px 7px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }

 .renk:active {

    color: rgb(121, 121, 121);

    margin-left: 5px;

    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 7px 7px 7px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }


 .container {
    float: left;
    width: 20%;
 }