/* ✅ Solistim Mobil Stil - Optimize Edildi */

@font-face {
  font-family: 'Sofia Pro';
  src: url('fonts/sofia-pro/Sofia Pro Regular Az.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@media screen and (max-width: 768px) {

    * {
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Sofia Pro', Arial, sans-serif !important;
        background-color: #f8f8f8 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }


    .container {
        width: 100% !important;
        padding: 15px !important;
        margin: 0 auto !important;
        background-color: #fff !important;
    }

    /* 🔹 Header */
    .header-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background-color: #252f39 !important;
        padding: 10px 15px !important;
        height: 60px !important;
    }

    .logo-title-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .site-logo {
        margin-right: 0 !important;
    }

    .site-title {
        font-size: 20px !important;
        color: #fff !important;
        margin: -10px !important;
    }

    /* 🔹 Menü */
    .main-navigation {
        width: 100% !important;
    }

    .main-menu {
        display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 5px !important;
            padding: 10px 0 !important;
            margin-right: -20px !important;
        }

    .main-menu a {
        width: 90% !important;
        background-color: #0073aa !important;
        color: #fff !important;
        padding: 12px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .main-menu a:hover {
        background-color: #005a87 !important;
    }

    .main-navigation.desktop-menu {
        display: none !important;
    }

    /* 🔹 Başvuru Butonu */
    .basvuru-buton a {
background: linear-gradient(355deg, #af3f3f, #c73232e0) !important;
            color: #fff !important;
            font-weight: normal !important;
            display: block !important;
            width: 59% !important;
            margin: 0px auto !important;
            padding: 5px !important;
            text-align: center !important;
            border-radius: 6px !important;
            font-size: 13px !important;
            margin-left: 83px !important;
            margin-right: 45px !important;
            line-height: 24px !important;
    }

    /* 🔹 Seçim Alanı */
    .secim-alani {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 20px 0 !important;
        padding: 10px !important;
        width: 100% !important;
    }
.iletisim-formu {
    max-width: 600px !important;
    margin: 30px auto !important;
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    font-family: 'Sofia Pro', sans-serif !important;
}

.iletisim-formu label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: bold !important;
    color: #333 !important;
}

.iletisim-formu input[type="text"],
.iletisim-formu input[type="email"],
.iletisim-formu textarea {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 18px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 15px !important;
}

.iletisim-formu button {
    background-color: #d1314b !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
}

.iletisim-formu button:hover {
    background-color: #b3203b !important;
}

.kvkk-metni {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.iletisim-basarili, .iletisim-hata {
    padding: 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
}

.iletisim-basarili {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.iletisim-hata {
    background-color: #ffffff !important;
            color: #55470e !important;
}
.sss-container {
    max-width: 800px !important;
    margin: 40px auto !important;
    padding: 20px !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    font-family: 'Sofia Pro', sans-serif !important;
}

.sss-container h1 {
    font-size: 28px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    color: #2c3e50 !important;
}

.sss-item {
    margin-bottom: 20px !important;
    padding: 15px !important;
    background-color: #f9f9f9 !important;
    border-left: 5px solid #0073aa !important;
    border-radius: 6px !important;
}

.sss-item h3 {
    margin-top: 0 !important;
    color: #0073aa !important;
    font-size: 18px !important;
}

.sss-item p {
    margin-bottom: 0 !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

.note-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0px;
}

.note-icon path {
  fill: #FFFFFF; /* İstediğin renk */
}

    /* 🔹 Başlık */
    .en-cok-seslendiren {
        font-size: 15px !important;
            font-weight: normal;
            text-align: center !important;
            color: white !important;
            background: linear-gradient(to right, #e60023, #ff6600) !important;
            padding: 12px !important;
            border-radius: 8px !important;
            margin: 10px auto !important;
            width: 90% !important;
            margin-bottom: -10px !important;
            text-shadow: 1px 3px 4px rgb(17 19 39 / 32%) !important;
    }

    /* 🔹 Solist Kartları */
    .solist-item {
        width: 100% !important;
            background: linear-gradient(90deg, #523495, #8d3e3e) !important;
            padding: 0px 0px 0px 0px !important;
            margin-bottom: 25px !important;
            border-radius: 10px !important;
            text-align: center !important;
            position: relative !important;
    }

    .solist-resim img {
       width: 100% !important;
            height: 200px !important;
            object-fit: cover !important;
            border-radius: 10px 10px 0px 0px !important;
    }
.solist-bilgileri {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-top: -25px !important;
    display: initial !important;
}

.solist-baslik {
    font-size: 24px !important;
    margin-bottom: 10px !important;
}
.solist-tanitim-alani {
  text-align: center !important;
            padding: 10px 10px 0px 10px !important;
            background-color: #ffffff !important;
            margin-bottom: 16px !important;
            box-shadow: 0 1px 7px rgb(0 0 0 / 24%) !important;
            border-radius: 0px !important;
            margin-top: 0px !important;
}
.solist-item audio {
    width: 100% !important;
    height: 30px !important;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}
.solist-aciklama {
    font-size: 13px !important;
    color: #555 !important;
}
    .solist-item h3 a {
font-size: 25px !important;
            color: #ffffff !important;
            text-decoration: none !important;
            display: flex !important;
            align-items: stretch !important;
            margin-bottom: 33px !important;
            margin-top: -93px !important;
            position: relative !important;
            justify-content: space-around !important;
            align-content: space-around !important;
            text-align: center !important;
            width: 100% !important;
}
@media screen and (max-width: 768px) {
  /* Masaüstü için olan default player'ı gizle */
  .default-audio-player,
  .desktop-only-player {
    display: none !important;
  }

  /* Plyr player'ı göster ve stillendir */
  .plyr--full-ui.plyr--audio {
    display: block !important;
                width: 100% !important;
                padding: 0px !important;
                margin-top: -3px !important;
                height: auto !important;
                padding-top: 28px !important;
  }

  .plyr--full-ui .plyr__controls {
    padding: 5px 10px !important;
  }

  .plyr--full-ui .plyr__time,
  .plyr--full-ui .plyr__volume,
  .plyr--full-ui .plyr__menu {
    font-size: 14px !important;
  }
}

    /* 🔹 Diğer Şarkılar Butonu */
    .diger-sarkilar a {
display: inline-block !important;
            font-size: 15px !important;
            padding: 11px 0px !important;
            background: linear-gradient(90deg, #513b7f, #652f2f) !important;
            color: white !important;
            text-decoration: none !important;
            border-radius: 0px 0px 10px 10px !important;
            margin-top: 18px !important;
            max-width: 100% !important;
            min-width: 100% !important;
            margin-bottom: -12px !important;

    }

    .diger-sarkilar a:hover {
        opacity: 0.85 !important;
    }

    /* 🔹 Emoji Düzeltme */
    img.emoji {
        width: 18px !important;
        height: 18px !important;
        vertical-align: middle !important;
        display: inline !important;
        margin: 0 2px !important;
        max-width: 100% !important;
    }

/* 🔹 Solist Puan Yıldız (Mobil İçin Düzenlenmiş) */
.solist-puan-yildiz {
    position: absolute !important;
            top: 0px !important;
            left: 0px !important;
            background: rgba(0, 0, 0, 0.7) !important;
            color: gold !important;
            font-weight: bold !important;
            border-radius: 10px !important;
            z-index: 5 !important;
}
@media only screen and (max-width: 768px) {
  .solist-puan-yildiz {
    font-size: 16px !important; /* Daha belirgin */
    padding: 6px 8px !important; /* Daha dengeli */
  }
    /* 🔹 Artı Butonu */
    .solist-item::after {
content: '+' !important;
                position: absolute !important;
                top: -1px !important;
                right: -6px !important;
                width: 30px !important;
                height: 30px !important;
                background-color: #a13131 !important;
                color: white !important;
                font-size: 25px !important;
                font-weight: bold !important;
                font-family: Arial, sans-serif !important;
                text-align: center !important;
                line-height: 29px !important;
                border-radius: 50% !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
                cursor: pointer !important;
                transition: background-color 0.3s ease !important;
}

    /* 🔹 Sipariş Formu */
    .siparis-container {
        max-width: 95% !important;
        margin: 20px auto !important;
        padding: 20px !important;
        background: #fff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .input-field {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
 .solist-secim-alani {
display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 15px !important;
                padding: 10px !important;
                margin: 0px auto !important;
                text-align: center !important;
                background-color: #fcfcfc !important;
                box-shadow: 0 0px 0px rgb(0 0 0 / 0%) !important;
    }

    .solist-secim-alani select,
    .solist-secim-alani button {
        width: 100% !important;
                padding: 15px !important;
                font-size: 16px !important;
                border-radius: 6px !important;
                border: 1px solid #ccc !important;
                height: 50px !important;
    }

    .solist-secim-alani button {
        background-color: #0073aa !important;
                color: white !important;
                font-weight: bold !important;
                border: none !important;
                margin-bottom: 10px !important;
                height: 45px !important;
                line-height: 0px !important;
    }

    .solist-secim-alani button:hover {
        background-color: #005a87 !important;
    }

    @media screen and (max-width: 768px) {
    .lyrics-generator-buton a {
        display: block !important;
                width: 100% !important;
                margin: 0px auto !important;
                padding: 5px 5px !important;
                color: #fff !important;
                font-weight: normal !important;
                text-align: center !important;
                border-radius: 6px !important;
                font-size: 13px !important;
                text-decoration: none !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
                margin-right: 0px !important;
                margin-left: -14px !important;
                line-height: 17px !important;
                background: linear-gradient(47deg, #974946ed, #2e86debd) !important;
    
    }

    .lyrics-generator-buton a:hover {
        background-color: #005a87 !important;
}


.solist-ucret {
position: absolute !important;
                    top: 158px !important;
                    right: 8px !important;
                   background: linear-gradient(357deg, #3b8f45, #319751e0) !important;
                    color: white !important;
                    padding: 4px 10px !important;
                    border-radius: 7px !important;
                    font-size: 14px !important;
                    z-index: 5 !important;
                    box-shadow: 0 2px 6px rgb(193 77 77 / 20%) !important;
                    text-shadow: 1px 3px 3px rgb(16 45 39 / 30%) !important;
                    display: flex !important;
                    justify-content: center !important;
                    align-items: center !important;
                    height: 31px !important;
gap: 3px;
}
.solist-tarz {
font-size: 15px !important;
                    font-weight: normal !important;
                    position: absolute !important;
                    margin-top: -46px !important;
                    text-align: center !important;
                    background: #512553 !important;
                    color: white !important;
                    padding: 4px 8px !important;
                    border-radius: 6px !important;
                    z-index: 5 !important;
                    box-shadow: 0 2px 6px rgb(193 77 77 / 20%) !important;
                    text-shadow: 1px 3px 3px rgb(16 45 39 / 31%) !important;
                    margin-left: 10px !important;
                    display: flex !important;
                    justify-content: center !important;
                    align-items: center !important;
                    height: 31px !important;
}
body.single-solistler .solist-ucret-icerik {
    background: linear-gradient(357deg, #3b8f45, #319751e0);
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    display: table;
    margin-top: -2px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

body.single-solistler .solist-tarz-icerik {
background: linear-gradient(126deg, #6b3ce5, #8f4d4d);
                    color: white;
                    padding: 5px 12px;
                    border-radius: 6px;
                    display: table;
                    margin-top: -2px;
                    margin-bottom: 10px;
                    font-size: 14px;
                    font-weight: normal;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
                    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}


/* ✅ Sadece solist iç sayfasındaki yıldız kutusuna özel stil */
@media screen and (max-width: 768px) {
body.single-solistler .solist-puan {
font-size: 13px !important;
                        padding: 3px 6px !important;
                        border-radius: 5px !important;
                        color: #ffac33 !important;
                        line-height: 1.1 !important;
                        transform: none !important;
                        height: auto !important;
                        max-width: 90% !important;
margin-top: 20px !important;
                    }


/* ✅ Sadece solistin detay (tekil) sayfasındaki resme özel stil */
body.single-solistler .solist-resim img {
    width: 120px !important;               /* Genişlik sabitlendi */
    height: 120px !important;              /* Yükseklik sabitlendi */
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;             /* Ortalamak için */
    border-radius: 50% !important;         /* Tam yuvarlak yapmak için */
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);  /* İsteğe bağlı gölge */
    border: 3px solid #fff !important;     /* İsteğe bağlı beyaz çerçeve */
}


body.single-solistler .solist-resim {
    width: 100% !important;
    max-width: 100% !important;
}

/* ✅ Solist İç Sayfası - Solist İsmi */
body.single-solistler .solist-profile h1 {
font-size: 17px !important;
                        font-weight: normal !important;
                        color: #ffffff !important;
                        margin: 30px 7px 10px 0px !important;
                        text-align: center !important;
                        background: #475b8b !important;
                        width: auto !important;
                        padding: 6px 10px !important;
                        border-radius: 5px !important;
                        display: inline-flex !important;
                        height: auto !important;
                        line-height: 1.2 !important;
                        align-items: center !important;
                        justify-content: center !important;
                        gap: 6px;
}
/* ✅ Solist İç Sayfası - Örnek Şarkılarım Başlığı */
body.single-solistler .solist-sarkilar h2 {
font-size: 18px !important;
                        font-weight: normal !important;
                        color: #222 !important;
                        margin-top: -24px !important;
                        margin-bottom: 3px !important;
                        text-align: left !important;
                        width: 100% !important;
                        margin-left: -204px !important;
}
@media screen and (max-width: 768px) {
  body.single-solistler .solist-sarkilar .sarki-item audio {
object-fit: cover;
                            width: 293% !important;
                            height: 40px !important;
                            border-radius: 20px !important;
                            margin-top: 15px !important;
                            margin-left: -205px !important;
                            padding: 1px !important;
                            display: block !important;
}

  body.single-solistler .sarki-item {
    margin-bottom: 15px !important;
  }
/* 🔹 Hamburger Menü Butonu */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    width: 30px;
    height: 34px;
    z-index: 1001;
    margin-left: auto;
}

.hamburger-menu .bar {
    height: 3px;
    background-color: white;
    margin: 4px 0;
    border-radius: 2px;
    transition: 0.3s;
}

/* 🔹 X simgesi dönüşümü */
.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* 🔹 Menü İçeriği (Animasyonlu) */
.hamburger-menu-content {
    position: absolute;
    top: 60px;
    right: 10px;
    background-color: #252f39;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 15px;
    display: flex;
align-items: center;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
    min-width: 220px;
}

.hamburger-menu-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 🔹 Kapanma Butonu */
.hamburger-menu-content .hamburger-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 1002;
}

.hamburger-menu-content.active .hamburger-close {
  display: block;
}

/* 🔹 Menü Linkleri */
.hamburger-menu-content a {
  color: white;
  text-decoration: none;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hamburger-menu-content a:last-child {
  border-bottom: none;
}

/* 🔹 Masaüstünde de görünür */
@media screen and (min-width: 769px) {
  .hamburger-menu {
    display: flex;
  }
}