/* Lumi Radyo paneli: sitenin kahve teması (cms/resources/themes/lumi/css/_temel.scss değişkenleri), açık/koyu sistemden. */
:root {
    --bg: 247 241 232; --surface: 255 255 255; --surface2: 240 230 216; --line: 229 216 196;
    --ink: 42 30 22; --ink-soft: 107 87 71;
    --primary: 154 85 34; --primary-hover: 122 66 28; --primary-ink: 255 255 255; --primary-text: 142 78 31;
    --ok: 60 122 42; --bad: 178 58 40; --shadow: 59 36 23; --grid: 154 85 34 / .05;
    --koyu: 59 36 23; --koyu-derin: 36 23 15; --koyu-yazi: 235 203 162; --koyu-acik: 245 230 208;
    --kenar: #5a3214; --canli: 229 72 77;
    --film: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: 11 11 12; --surface: 20 20 22; --surface2: 28 28 31; --line: 42 42 46;
        --ink: 237 237 237; --ink-soft: 154 154 160;
        --primary: 240 138 36; --primary-hover: 246 160 76; --primary-ink: 17 17 17; --primary-text: 245 154 69;
        --ok: 123 216 143; --bad: 255 107 91; --shadow: 0 0 0; --grid: 240 138 36 / .035;
        --koyu: 20 20 22; --koyu-derin: 6 6 7; --koyu-yazi: 170 170 176; --koyu-acik: 214 214 218;
        --kenar: #b85f0c;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
    font: 500 14px/1.45 "Plus Jakarta Sans", Ubuntu, sans-serif;
    color: rgb(var(--ink));
    background-color: rgb(var(--bg));
    background-image:
        repeating-linear-gradient(26.565deg, rgb(var(--grid)) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(-26.565deg, rgb(var(--grid)) 0 1px, transparent 1px 32px);
    display: flex; flex-direction: column; min-height: 100vh;
}
img { display: block; object-fit: cover; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; }
.gizli { display: none !important; }

/* butonlar: sitenin "basılabilir" kenarı; hover yalnızca burada */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
    background: rgb(var(--primary)); color: rgb(var(--primary-ink));
    box-shadow: 0 3px 0 0 var(--kenar); transition: transform .2s var(--film), box-shadow .2s var(--film), background-color .2s;
    white-space: nowrap;
}
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--kenar); background: rgb(var(--primary-hover)); }
.btn:not(:disabled):active { transform: translateY(3px); box-shadow: none; transition-duration: .08s; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ince { background: rgb(var(--surface)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); --kenar: rgb(var(--line)); }
.btn.ince:not(:disabled):hover { background: rgb(var(--surface)); color: rgb(var(--primary-text)); }
.btn.tehlike { background: rgb(var(--bad)); color: #fff; --kenar: #7a2418; }
.btn.kucuk { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.btn.ikon { padding: 4px 7px; min-width: 28px; }

input[type=text], input[type=time], select {
    width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgb(var(--line));
    background: rgb(var(--surface2)); outline: 0;
}
input[type=text]:focus, input[type=time]:focus, select:focus { border-color: rgb(var(--primary)); }
input[type=range] { accent-color: rgb(var(--primary)); }

/* üst çubuk */
.ust {
    display: flex; align-items: center; gap: 18px; padding: 10px 22px;
    background: rgb(var(--surface)); border-bottom: 1px solid rgb(var(--line));
}
.marka { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.marka img { height: 34px; width: auto; object-fit: contain; image-rendering: pixelated; }
.marka span { font-weight: 800; font-size: 18px; color: rgb(var(--primary-text)); }
#sekmeler { display: flex; gap: 4px; flex: 1; }
#sekmeler button {
    border: 0; background: none; padding: 8px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; color: rgb(var(--ink-soft));
}
#sekmeler button.secili { background: rgb(var(--primary)); color: rgb(var(--primary-ink)); }
.ben { display: flex; align-items: center; gap: 10px; }
.ben .kafa { width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--surface2)) center / 160% no-repeat; }
.ben b { display: block; line-height: 1.1; }
.ben small { color: rgb(var(--ink-soft)); font-size: 12px; }

/* sahne: şimdi çalıyor (koyu bant) */
.sahne {
    display: grid; grid-template-columns: 132px 1fr auto; gap: 22px; align-items: center;
    padding: 22px 28px; background: rgb(var(--koyu)); color: rgb(var(--koyu-acik));
}
.sahne-dj {
    width: 132px; height: 132px; border-radius: 18px; background: rgb(var(--koyu-derin)) center / 150% no-repeat;
    display: grid; place-items: center; overflow: hidden;
}
.sahne-dj img { width: 86px; height: auto; object-fit: contain; image-rendering: pixelated; opacity: .9; }
.etiket { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgb(var(--koyu-yazi)); }
.rozet { padding: 2px 8px; border-radius: 6px; background: rgb(255 255 255 / .12); letter-spacing: .06em; text-transform: uppercase; }
.rozet.canli { background: rgb(var(--canli)); color: #fff; }
.rozet.canli::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #fff; animation: nabiz 1.4s infinite; }
@keyframes nabiz { 50% { opacity: .3; } }
.sahne h1 { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 6px 0 2px; color: #fff; overflow-wrap: anywhere; }
.sahne .alt { color: rgb(var(--koyu-yazi)); font-weight: 600; }
.ilerleme { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .12); margin-top: 14px; overflow: hidden; }
.ilerleme i { display: block; height: 100%; width: 0; background: rgb(var(--primary)); transition: width 1s linear; }
.sureler { display: flex; justify-content: space-between; font-size: 12px; color: rgb(var(--koyu-yazi)); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sahne-oynat { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.oynat {
    width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: rgb(var(--primary)); color: rgb(var(--primary-ink)); box-shadow: 0 4px 0 0 var(--kenar);
}
.oynat:active { transform: translateY(3px); box-shadow: none; }
.oynat svg { width: 34px; height: 34px; fill: currentColor; }
.sahne-oynat input { width: 110px; }

/* içerik ızgarası */
main { flex: 1; display: grid; gap: 16px; padding: 16px 22px 22px; align-content: start; }
.izgara { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.izgara.iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kart { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kart h2 { font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kart h2 small { font-weight: 600; color: rgb(var(--ink-soft)); font-size: 12px; }
.not { color: rgb(var(--ink-soft)); font-size: 13px; }
.satir { display: flex; gap: 8px; align-items: center; }
.satir > input { flex: 1; }
.liste { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.oge { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: rgb(var(--surface2)); }
.oge .kapak { width: 64px; height: 36px; border-radius: 6px; flex: none; background: rgb(var(--line)) center / cover; }
.oge .kafa { width: 36px; height: 36px; border-radius: 8px; flex: none; background: rgb(var(--line)) center / 160% no-repeat; }
.oge .yazi { flex: 1; min-width: 0; }
.oge .yazi b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oge .yazi small { color: rgb(var(--ink-soft)); font-size: 12px; display: block; overflow-wrap: anywhere; }
.oge .dugmeler { display: flex; gap: 4px; flex: none; }
.oge.bekliyor { opacity: .6; }
.bos { padding: 18px; text-align: center; color: rgb(var(--ink-soft)); border: 1px dashed rgb(var(--line)); border-radius: 12px; }

.durum-kutu { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgb(var(--surface2)); font-weight: 700; }
.durum-kutu .nokta { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--ink-soft)); flex: none; }
.durum-kutu.sende .nokta { background: rgb(var(--canli)); animation: nabiz 1.4s infinite; }
.olcer { height: 10px; border-radius: 5px; background: rgb(var(--surface2)); overflow: hidden; }
.olcer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgb(var(--ok)), rgb(var(--primary)) 70%, rgb(var(--bad))); }

/* program */
.hafta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gun { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gun > b { font-size: 12px; text-align: center; padding: 4px; border-radius: 8px; background: rgb(var(--surface2)); }
.gun.bugun > b { background: rgb(var(--primary)); color: rgb(var(--primary-ink)); }
.dilim { padding: 6px; border-radius: 8px; background: rgb(var(--surface2)); font-size: 12px; min-width: 0; }
.dilim b { display: block; font-variant-numeric: tabular-nums; }
.dilim span { display: block; overflow-wrap: anywhere; color: rgb(var(--ink-soft)); }
.dilim.simdi { outline: 2px solid rgb(var(--canli)); }
.dilim .sil { float: right; }

/* bildirim ve pencere */
.bildirimler { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.bildirim { max-width: 360px; padding: 10px 14px; border-radius: 12px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-left: 4px solid rgb(var(--ok)); box-shadow: 0 10px 24px -12px rgb(var(--shadow) / .5); font-weight: 600; animation: gel .25s var(--film); }
.bildirim.hata { border-left-color: rgb(var(--bad)); }
@keyframes gel { from { opacity: 0; transform: translateY(8px); } }
.pencere { position: fixed; inset: 0; background: rgb(0 0 0 / .5); display: grid; place-items: center; z-index: 30; }
.pencere .kart { width: min(420px, 92vw); }

@media (max-width: 1100px) { .izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
    .izgara, .izgara.iki { grid-template-columns: minmax(0, 1fr); }
    .sahne { grid-template-columns: 84px 1fr; padding: 16px; }
    .sahne-dj { width: 84px; height: 84px; }
    .sahne-oynat { grid-column: 1 / -1; flex-direction: row; }
    .sahne h1 { font-size: 20px; }
    .hafta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ust { flex-wrap: wrap; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }