<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ ayarlar.station_name }}</title>
    <style>
        * { box-sizing: border-box; }
        html, body { margin: 0; width: 100%; overflow: hidden; font-family: Arial, sans-serif; color: #fff; }
        .box { width: 100%; display: grid; overflow: hidden; }
        .station { opacity: .82; }
        .art { display: none; }
        .title { font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
        .artist { color: rgba(255,255,255,.78); overflow: hidden; text-overflow: ellipsis; }
        audio { width: 100%; height: 34px; display: block; }
        .dark.classic {
            min-height: 180px;
            padding: 18px;
            align-content: center;
            gap: 12px;
            background: linear-gradient(135deg, #16213e, #126a78);
        }
        .light.classic { min-height: 180px; padding: 18px; align-content: center; gap: 12px; background: #f7fbff; color: #17212b; border-top: 5px solid #1f7a8c; }
        .neon.classic { min-height: 180px; padding: 18px; align-content: center; gap: 12px; background: #080b12; color: #e9fbff; border: 1px solid #2de2e6; box-shadow: inset 0 0 30px rgba(45,226,230,.18); }
        .minimal.classic { min-height: 180px; padding: 18px; align-content: center; gap: 12px; background: #fff; color: #111827; border: 1px solid #d9dee7; }
        .classic .station { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
        .classic .title { font-size: 22px; }
        .classic .artist { min-height: 20px; }
        .compact {
            min-height: 112px;
            grid-template-columns: 54px minmax(0, 1fr);
            grid-template-areas: "mark info" "mark player";
            gap: 8px 12px;
            align-items: center;
            padding: 12px 14px;
            background: #f4f7fb;
            color: #17212b;
            border-left: 6px solid #1f7a8c;
        }
        .dark.compact { background: #f4f7fb; color: #17212b; border-left-color: #1f7a8c; }
        .light.compact { background: #ffffff; color: #17212b; border-left-color: #0d6efd; }
        .neon.compact { background: #090d16; color: #e9fbff; border-left-color: #2de2e6; }
        .minimal.compact { background: #fff; color: #111827; border-left-color: #adb5bd; }
        .compact .station {
            grid-area: mark;
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: #14213d;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .08em;
            text-align: center;
            line-height: 1.1;
            opacity: 1;
        }
        .compact .track { grid-area: info; min-width: 0; }
        .compact .title { font-size: 18px; white-space: nowrap; }
        .compact .artist { color: #5c6875; white-space: nowrap; }
        .compact audio { grid-area: player; height: 30px; }
        .bar {
            min-height: 72px;
            grid-template-columns: auto minmax(0, 1fr) 240px;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: #111827;
            border-bottom: 4px solid #1f7a8c;
        }
        .dark.bar { background: #111827; border-bottom-color: #1f7a8c; }
        .light.bar { background: #f8fafc; color: #17212b; border-bottom-color: #0d6efd; }
        .neon.bar { background: #070a12; color: #e9fbff; border-bottom-color: #2de2e6; }
        .minimal.bar { background: #fff; color: #111827; border-bottom-color: #adb5bd; }
        .bar .station {
            width: 10px;
            height: 42px;
            border-radius: 10px;
            background: #29b6c8;
            color: transparent;
            opacity: 1;
        }
        .bar .track { min-width: 0; }
        .bar .title { font-size: 16px; white-space: nowrap; }
        .bar .artist { display: none; }
        .bar audio { height: 30px; }
        .showcase {
            min-height: 240px;
            grid-template-columns: 92px minmax(0, 1fr);
            grid-template-areas: "art info" "player player";
            align-items: center;
            gap: 16px;
            padding: 20px;
            background: radial-gradient(circle at 20% 20%, rgba(41,182,200,.35), transparent 32%), linear-gradient(145deg, #101820, #19313a);
            border: 1px solid rgba(255,255,255,.14);
        }
        .light.showcase { background: radial-gradient(circle at 20% 20%, rgba(13,110,253,.18), transparent 32%), linear-gradient(145deg, #ffffff, #eaf3f8); color: #17212b; }
        .neon.showcase { background: radial-gradient(circle at 20% 20%, rgba(45,226,230,.42), transparent 34%), linear-gradient(145deg, #070a12, #151a2b); color: #e9fbff; }
        .minimal.showcase { background: #fff; color: #111827; border: 1px solid #d9dee7; }
        .showcase .station { grid-column: 1 / -1; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
        .showcase .art {
            grid-area: art;
            width: 92px;
            height: 92px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: linear-gradient(135deg, #1f7a8c, #14213d);
            box-shadow: 0 14px 34px rgba(0,0,0,.24);
        }
        .showcase .art span { width: 8px; margin: 0 3px; border-radius: 8px; background: rgba(255,255,255,.88); animation: bounce 1.1s infinite ease-in-out; }
        .showcase .art span:nth-child(2) { height: 48px; animation-delay: .12s; }
        .showcase .art span:nth-child(3) { height: 34px; animation-delay: .24s; }
        .showcase .art span:nth-child(1) { height: 28px; }
        .showcase .track { grid-area: info; min-width: 0; }
        .showcase .title { font-size: 24px; }
        .showcase .artist { font-size: 15px; }
        .showcase audio { grid-area: player; height: 34px; }
        @keyframes bounce { 0%, 100% { transform: scaleY(.72); opacity: .68; } 50% { transform: scaleY(1.18); opacity: 1; } }
        @media (max-width: 520px) {
            .bar { grid-template-columns: 10px minmax(0, 1fr); min-height: 96px; }
            .bar audio { grid-column: 1 / -1; }
            .showcase { grid-template-columns: 1fr; grid-template-areas: "art" "info" "player"; }
        }
    
        /* Mobile shell fix: keep the sidebar from squeezing content on phones. */
        @media (max-width: 767px) {
            html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
            .container-fluid > .row.g-0 { display: block; width: 100%; margin: 0; }
            aside.sidebar,
            .sidebar {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                min-height: auto !important;
                height: auto !important;
                position: relative !important;
                top: auto !important;
                flex-direction: row !important;
                align-items: stretch;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            .brand { min-width: 188px; padding: 10px 12px !important; }
            .brand img { width: 40px !important; height: 40px !important; }
            .brand-name { font-size: 1rem !important; }
            .brand-subtitle { font-size: .55rem !important; letter-spacing: .9px !important; }
            .sidebar a { flex: 0 0 auto; padding: 12px 10px !important; }
            .sidebar a .nav-icon { width: 28px; height: 28px; min-width: 28px; }
            .sidebar-footer { display: flex; flex: 0 0 auto; }
            main.col,
            main[class*="col"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 100% !important;
                min-width: 0 !important;
            }
            .topbar { position: sticky; top: 0; z-index: 50; padding: 10px 14px !important; }
            .topbar-title { font-size: 1rem; }
            .topbar-status { font-size: .75rem; padding: 4px 9px; }
            main > .p-4 { padding: 14px !important; }
            .card-panel { border-radius: 10px; }
            .card-panel-header { align-items: flex-start; flex-direction: column; padding: 14px !important; }
            .card-panel-header > .d-flex,
            .card-panel-header .d-flex { flex-wrap: wrap; }
            .card-panel-body { padding: 14px !important; }
            .broadcast-controls { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
            .broadcast-controls .action-btn { width: 100%; min-height: 44px; }
            .stream-row,
            .stream-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
            .stream-url,
            .stream-row a { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
            .history-item { align-items: flex-start; }
            .history-time { margin-left: 0; white-space: normal; }
            .now-playing-card { padding: 16px !important; }
            .next-track-box .next-path { white-space: normal; overflow-wrap: anywhere; }
        }
    </style>
</head>
<body>
<div class="box {{ style }} {{ theme }}">
    <div class="station">{{ ayarlar.station_name }}</div>
    <div class="art"><span></span><span></span><span></span></div>
    <div class="track">
        <div id="title" class="title">Yayın bilgisi yükleniyor</div>
        <div id="artist" class="artist"></div>
    </div>
    <audio controls preload="none" src="{{ stream_url }}"></audio>
</div>
<script>
async function refreshNowPlaying() {
    try {
        const res = await fetch('/api/now-playing', { cache: 'no-store' });
        const data = await res.json();
        const now = data.now || {};
        document.getElementById('title').textContent = now.title || now.filename || '{{ ayarlar.station_name }}';
        document.getElementById('artist').textContent = now.artist || '';
    } catch (e) {
        document.getElementById('title').textContent = '{{ ayarlar.station_name }}';
    }
}
refreshNowPlaying();
setInterval(refreshNowPlaying, 5000);
</script>
</body>
</html>







