:root {
    color-scheme: dark;
    --zemin: #0e1116;
    --kart: #171c24;
    --alan: #1c2330;
    --yazi: #f4f7fb;
    --soluk: #9aa6b8;
    --vurgu: #4c8dff;
    --hata: #ff8d8d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: var(--zemin);
    color: var(--yazi);
}

.giris-sayfa {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.kart {
    width: min(420px, 100%);
    background: var(--kart);
    border-radius: 16px;
    padding: 28px;
    display: grid;
    gap: 14px;
}

h1 { margin: 0; font-size: 28px; }
.alt, .ust p, #kanal-adi, .ayarlar p { color: var(--soluk); }
.hata { color: var(--hata); margin: 0; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--soluk); }

input, button {
    font: inherit;
    border-radius: 10px;
    border: 0;
    padding: 12px;
}

input { background: var(--alan); color: var(--yazi); }
button { background: var(--vurgu); color: white; cursor: pointer; }

.ust {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
}

.ust h1 { font-size: 22px; }
.ust p { margin: 4px 0 0; }
.ust-sag { display: flex; gap: 14px; align-items: center; }
.ust a { color: var(--yazi); }

main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 16px;
    padding: 0 20px 20px;
}

.oynatici, .liste, .ayarlar {
    background: var(--kart);
    border-radius: 16px;
}

.oynatici { padding: 12px; }
video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: black;
    border-radius: 12px;
}
#kanal-adi { margin: 10px 4px 4px; }

.liste { padding: 12px; min-height: 420px; }
#kanallar { margin-top: 10px; max-height: 62vh; overflow: auto; }

.kanal {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--yazi);
    border-radius: 10px;
    padding: 12px 8px;
}
.kanal small { display: block; color: var(--soluk); margin-top: 2px; }
.kanal.secili, .kanal:hover { background: var(--alan); }

.ayarlar { margin: 0 20px 24px; padding: 12px 16px 16px; }
.ayarlar form { display: grid; gap: 10px; margin-top: 12px; }

@media (max-width: 800px) {
    main { grid-template-columns: 1fr; }
    #kanallar { max-height: 50vh; }
}