:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #030504;
    --panel: rgba(13, 19, 15, 0.78);
    --panel-strong: rgba(20, 29, 23, 0.88);
    --text: #eef5ec;
    --muted: #a7b3a6;
    --brand: #cdd9ca;
    --line: rgba(205, 217, 202, 0.16);
    --danger: #ffb4a8;
    --success: #dff4df;
    background: var(--bg);
    color: var(--text);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% 10%, rgba(133, 150, 126, 0.22), transparent 30rem),
        radial-gradient(circle at 18% 36%, rgba(205, 217, 202, 0.13), transparent 28rem),
        linear-gradient(135deg, #030504 0%, #0d130f 100%);
}

button { font: inherit; }

.kabuk {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0;
}

.ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    padding: 10px 12px 10px 18px;
}

.marka { color: var(--text); font-weight: 800; text-decoration: none; }

.ust-sag { display: flex; align-items: center; gap: 12px; }
.kisi { color: var(--muted); font-size: 0.92rem; }

.link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-weight: 700;
    padding: 9px 14px;
    text-decoration: none;
}

.hero { margin-bottom: 28px; }
.goz, .bolum-etiket {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1, h2 { margin: 0; }
h1 { max-width: 760px; font-size: clamp(2.1rem, 6vw, 4.4rem); line-height: 0.98; }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.silik { color: var(--muted); }

.oynatici {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.3fr);
    gap: 24px;
}

.sol, .sag {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
    padding: 28px;
}

.kategori-grid { display: grid; gap: 12px; margin-top: 22px; }

.kategori-buton {
    position: relative;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    min-height: 96px;
    border-radius: 18px;
    background: rgba(205, 217, 202, 0.08);
    background-size: cover;
    background-position: center;
    color: var(--text);
    padding: 16px 18px;
    text-align: left;
    transition: 160ms ease;
    overflow: hidden;
}
.kategori-buton.kapakli { background-color: #0a0f0c; }
.kategori-buton:hover { transform: translateY(-2px); }
.kategori-buton.aktif { outline: 2px solid var(--brand); }
.kategori-buton strong { font-size: 1.05rem; }
.kategori-buton span { color: var(--muted); font-size: 0.9rem; }
.kategori-buton.aktif span, .kategori-buton:hover span { color: var(--text); }

/* Çalan parça kapak alanı */
.kapak-blok {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 12px;
}
.kapak {
    width: 132px; height: 132px;
    border-radius: 18px;
    background: rgba(205, 217, 202, 0.08);
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.kapak.dolu { background-color: #0a0f0c; }
.kapak-bilgi h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 6px; }

audio { width: 100%; margin: 18px 0 16px; }

.kontroller { display: flex; gap: 10px; flex-wrap: wrap; }
.kontroller button {
    flex: 1;
    min-width: 110px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--brand);
    color: #08100b;
    font-weight: 700;
    padding: 12px 16px;
    transition: transform 120ms ease, opacity 120ms ease;
}
.kontroller button:hover { transform: translateY(-1px); }
#shuffle {
    background: rgba(205, 217, 202, 0.12);
    color: var(--text);
    border: 1px solid var(--line);
}
#shuffle.aktif {
    background: var(--brand);
    color: #08100b;
}

.playlist-bilgi {
    display: flex;
    justify-content: space-between;
    margin: 18px 0 10px;
    color: var(--muted);
    font-size: 0.9rem;
}

.playlist {
    display: grid;
    gap: 8px;
    max-height: 420px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.playlist li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-radius: 14px;
    background: rgba(205, 217, 202, 0.07);
}
.playlist li.aktif { outline: 2px solid var(--brand); }
.playlist .cal-btn {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: var(--text);
    padding: 10px 12px;
    text-align: left;
    min-width: 0;
}
.playlist img, .playlist .kapak-yer {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(205, 217, 202, 0.12);
    display: block;
}
.playlist .parca-yazi { display: grid; gap: 2px; min-width: 0; }
.playlist .parca-yazi span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.playlist small { color: var(--muted); display: block; }

.kalp {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 8px 14px;
    transition: transform 120ms ease, color 120ms ease;
}
.kalp:hover { color: var(--text); transform: scale(1.12); }
.kalp.dolu { color: #ff6b8b; }
.kalp.dolu:hover { color: #ff8aa3; }
.kalp:disabled { opacity: 0.6; cursor: default; }

.daha-fazla-blok {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
#dahaFazla {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(205, 217, 202, 0.08);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    padding: 12px 24px;
    font: inherit;
    transition: background 120ms;
}
#dahaFazla:hover:not(:disabled) { background: rgba(205, 217, 202, 0.16); }
#dahaFazla:disabled { opacity: 0.6; cursor: default; }

.tek-sutun { grid-template-columns: 1fr !important; }

.giris-sayfa { display: grid; place-items: center; padding: 24px; min-height: 100vh; }
.giris-kabuk { width: min(460px, 100%); }
.giris-kart {
    display: grid;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--panel-strong);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    padding: 34px;
}
.giris-kart h1 { font-size: clamp(2rem, 6vw, 3.4rem); }

.form { display: grid; gap: 16px; }
.form label {
    display: grid;
    gap: 8px;
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 700;
}
.form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(3, 5, 4, 0.66);
    color: var(--text);
    font: inherit;
    padding: 13px 14px;
}

.ana-buton {
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: #08100b;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 14px 18px;
}

.bildirim { border-radius: 18px; padding: 14px 18px; }
.basari { background: rgba(106, 166, 115, 0.18); color: var(--success); }
.hata   { background: rgba(210, 91, 80, 0.18); color: var(--danger); }

@media (max-width: 880px) {
    .oynatici { grid-template-columns: 1fr; }
    .ust, .ust-sag { align-items: stretch; flex-direction: column; }
    .kapak-blok { grid-template-columns: 1fr; text-align: left; }
    .kapak { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}