<?php
/**
 * radyo.php - aahaber.com Canlı Radyo Dinle (SEO Uyumlu)
 */

// 1. Slug Fonksiyonu
if (!function_exists('aahaber_slugify')) {
    function aahaber_slugify($text) {
        $char_map = [
            'İ' => 'i', 'I' => 'i', 'ı' => 'i',
            'Ğ' => 'g', 'ğ' => 'g',
            'Ü' => 'u', 'ü' => 'u',
            'Ş' => 's', 'ş' => 's',
            'Ö' => 'o', 'ö' => 'o',
            'Ç' => 'c', 'ç' => 'c'
        ];
        $text = strtr($text, $char_map);
        $text = strtolower($text);
        $text = preg_replace('/[^a-z0-9]+/i', '-', $text);
        return trim($text, '-');
    }
}

// 2. Radyoları Yükle
$raw_radio_json = @file_get_contents(__DIR__ . '/data/radio_tr.json');
$radio_stations_data = $raw_radio_json ? json_decode($raw_radio_json, true) : [];
if (!is_array($radio_stations_data)) $radio_stations_data = [];

// 3. Parametreleri Çözümle (istasyon / radyo / slug & ulke)
$selected_radio_country = isset($_GET['ulke']) ? strtolower(trim($_GET['ulke'])) : 'tr';
if ($selected_radio_country === 'il' || $selected_radio_country === 'israel') $selected_radio_country = 'tr';

$requested_radio_slug = isset($_GET['istasyon']) ? trim($_GET['istasyon']) : (isset($_GET['radyo']) ? trim($_GET['radyo']) : (isset($_GET['slug']) ? trim($_GET['slug']) : ''));
$requested_station = null;

if (!empty($requested_radio_slug)) {
    // Hem 'kral-fm' hem de 'kral-fm-canli-dinle' biçimlerini destekle
    $clean_radio_slug = preg_replace('/-(canli-dinle|canli-yayin|canli|dinle)$/i', '', $requested_radio_slug);
    foreach ($radio_stations_data as $st) {
        $s = aahaber_slugify($st['name'] ?? '');
        if ($s === $clean_radio_slug || $s === $requested_radio_slug || ($st['nanoid'] ?? '') === $requested_radio_slug) {
            $requested_station = $st;
            $requested_station['slug'] = $s;
            break;
        }
    }
}

// 4. SEO Başlık, Açıklama, Canonical & Schema Yapılandırması
if ($requested_station) {
    $current_station_name = $requested_station['name'];
    $current_station_slug = $requested_station['slug'];

    $page_title = "{$current_station_name} Canlı Dinle — Kesintisiz HD Canlı Radyo | aahaber.com";
    $page_desc = "{$current_station_name} canlı radyo yayınını yüksek ses kalitesiyle, donmadan ve kesintisiz aahaber.com üzerinden dinleyin. {$current_station_name} frekans ve yayın bilgileri.";
    $page_keywords = "{$current_station_name} dinle, {$current_station_name} canlı radyo, {$current_station_name} online dinle, kesintisiz radyo, aahaber";
    $canonical_url = "radyo.php?istasyon=" . urlencode($current_station_slug . '-canli-dinle');

    $schema_json = [
        "@context" => "https://schema.org",
        "@type" => "RadioStation",
        "name" => $current_station_name,
        "url" => $canonical_url,
        "description" => $page_desc
    ];
} elseif ($selected_radio_country !== 'tr') {
    $countries_meta_raw = @file_get_contents(__DIR__ . '/data/countries_metadata.json');
    $c_meta = $countries_meta_raw ? json_decode($countries_meta_raw, true) : [];
    $country_name = $c_meta[$selected_radio_country]['name_tr'] ?? strtoupper($selected_radio_country);

    $current_station_name = "{$country_name} Radyoları";
    $current_station_slug = '';

    $page_title = "{$country_name} Canlı Radyolarını Dinle — Kesintisiz Müzik | aahaber.com";
    $page_desc = "{$country_name} canlı radyo istasyonlarını HD ses kalitesinde ve kesintisiz aahaber.com üzerinden dinleyin.";
    $canonical_url = "radyo.php?ulke=" . urlencode($selected_radio_country);
} else {
    $first_station = !empty($radio_stations_data[0]) ? $radio_stations_data[0] : null;
    $current_station_name = $first_station ? $first_station['name'] : 'Canlı Radyo';
    $current_station_slug = $first_station ? aahaber_slugify($first_station['name']) : '';

    $page_title = "Canlı Radyo Dinle — aahaber.com Kesintisiz Canlı Radyolar";
    $page_desc = "Türkiye ve dünyanın 260+ popüler radyo istasyonunu kesintisiz HD ses kalitesiyle canlı dinleyin. Nostaljik radyo temaları ve canlı spektrum.";
    $canonical_url = "radyo.php";
}

$page_active = "radyo";
$search_placeholder = "Radyo ara (örn: Power, Kral, TRT, Best)...";

$user_volume = '0.35';
if (isset($_COOKIE['aahaber_radio_volume'])) {
  $v_float = floatval($_COOKIE['aahaber_radio_volume']);
  if ($v_float >= 0 && $v_float <= 1) {
    $user_volume = number_format($v_float, 2, '.', '');
  }
}
$user_volume_pct = round(floatval($user_volume) * 100);

require_once __DIR__ . '/ust.php';
?>

<div class="radio-page-container">

  <!-- Üst Breadcrumb ve Bilgi Şeridi -->
  <div class="radio-header-banner">
    <div class="radio-breadcrumb">
      <a href="index.php">Haberler</a>
      <span>&rsaquo;</span>
      <span style="color: var(--text-main); font-weight: 700;">Radyo Dinle</span>
    </div>

    <div class="radio-banner-notice">
      <span class="radio-pulse-dot active"></span>
      <span>260+ Canlı Radyo İstasyonu • Kesintisiz HD Ses Akışı</span>
    </div>
  </div>

  <!-- 2 Kolonlu Canlı Radyo Sahnesi Düzeni -->
  <div class="radio-main-layout">

    <!-- 1. SOL KOLON: Stüdyo Oynatıcı & Ekolayzır -->
    <div class="radio-stage-col">

      <!-- Radyo Görünüm / Tema Seçici -->
      <div class="radio-skin-switcher-bar">
        <div class="skin-switcher-title">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          <span>Radyo Teması:</span>
        </div>
        <div class="skin-switcher-options" id="radioSkinSelector">
          <button type="button" class="skin-btn active" data-skin="vintage-wood" onclick="window.switchRadioSkin('vintage-wood')">
            <span class="skin-icon">📻</span>
            <span class="skin-label">Nostaljik Ahşap</span>
          </button>
          <button type="button" class="skin-btn" data-skin="retro-boombox" onclick="window.switchRadioSkin('retro-boombox')">
            <span class="skin-icon">📼</span>
            <span class="skin-label">80'ler Boombox</span>
          </button>
          <button type="button" class="skin-btn" data-skin="winamp-classic" onclick="window.switchRadioSkin('winamp-classic')">
            <span class="skin-icon">⚡</span>
            <span class="skin-label">Winamp 2.91</span>
          </button>
          <button type="button" class="skin-btn" data-skin="aimp-player" onclick="window.switchRadioSkin('aimp-player')">
            <span class="skin-icon">🔥</span>
            <span class="skin-label">AIMP Hi-Fi</span>
          </button>
          <button type="button" class="skin-btn" data-skin="cyber-hifi" onclick="window.switchRadioSkin('cyber-hifi')">
            <span class="skin-icon">📟</span>
            <span class="skin-label">Cyber Hi-Fi</span>
          </button>
          <button type="button" class="skin-btn" data-skin="modern-studio" onclick="window.switchRadioSkin('modern-studio')">
            <span class="skin-icon">✨</span>
            <span class="skin-label">Modern Stüdyo</span>
          </button>
        </div>
      </div>

      <!-- Radyo Oynatıcı Sahnesi -->
      <div id="radioHeroCard" class="radio-hero-card skin-vintage-wood">
        <!-- Audio Nesnesi -->
        <audio id="radioAudioElement" preload="none" referrerpolicy="strict-origin-when-cross-origin"></audio>

        <!-- 1. NOSTALJİK AHŞAP GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-vintage">
          <div class="vintage-cabinet-header">
            <span class="vintage-screw"></span>
            <div class="vintage-plaque-title">
              <span class="vintage-crown-icon">👑</span>
              <span>AA HABER NOSTALJİK RADYO • 1968 EDİTİON</span>
            </div>
            <span class="vintage-screw"></span>
          </div>

          <div class="vintage-grille-row">
            <div class="vintage-speaker-grille">
              <div class="vintage-cloth-pattern"></div>
              <div class="vintage-cloth-crest">
                <span class="vintage-crest-symbol">🎙️</span>
                <span class="vintage-crest-name">Hi-Fi DE LUXE</span>
              </div>
            </div>

            <!-- Sihirli Göz (Magic Eye Tube) -->
            <div class="vintage-tube-housing" title="Sinyal ve Katot Vakum Lambası">
              <div class="vintage-tube-socket">
                <div class="vintage-tube-glass">
                  <div class="vintage-tube-glow"></div>
                  <div class="vintage-magic-eye-beam" id="vintageMagicEye"></div>
                </div>
              </div>
              <span class="vintage-tube-tag">TUNING EYE</span>
            </div>
          </div>

          <!-- Frekans Skalası -->
          <div class="vintage-dial-wrapper">
            <div class="vintage-dial-glass">
              <div class="vintage-dial-scales">
                <div class="vintage-band-line fm-band">
                  <span class="vintage-band-title">FM</span>
                  <div class="vintage-freq-marks">
                    <span>88</span><span>90</span><span>92</span><span>94</span><span>96</span><span>98</span><span>100</span><span>102</span><span>104</span><span>106</span><span>108</span>
                  </div>
                  <span class="vintage-band-unit">MHz</span>
                </div>
                <div class="vintage-dial-ticks">
                  <span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span><span>·</span><span>|</span>
                </div>
                <div class="vintage-band-line am-band">
                  <span class="vintage-band-title">AM</span>
                  <div class="vintage-freq-marks">
                    <span>540</span><span>600</span><span>700</span><span>800</span><span>1000</span><span>1200</span><span>1400</span><span>1600</span>
                  </div>
                  <span class="vintage-band-unit">kHz</span>
                </div>
              </div>
              <div class="vintage-tuner-needle" id="vintageNeedle" style="left: 50%;">
                <div class="needle-line"></div>
                <div class="needle-tip"></div>
              </div>
            </div>
          </div>

          <!-- İstasyon Pirinç Bilgi Plaketi -->
          <div class="vintage-brass-panel">
            <div class="vintage-panel-left">
              <div class="vintage-signal-light" id="vintageSignalLight"></div>
              <div class="vintage-meta-info">
                <h2 class="vintage-station-name js-station-title" id="vintageStationTitle">Radyo İstasyonu Seçin</h2>
                <p class="vintage-station-genre js-station-genre" id="vintageStationGenre">Nostalji & Genel Canlı Yayın</p>
              </div>
            </div>
            <div class="vintage-freq-tag" id="vintageFreqBadge">FM 98.4 MHz</div>
          </div>

          <!-- Kontroller -->
          <div class="vintage-controls-bar">
            <div class="vintage-knob-container">
              <button type="button" class="vintage-rotary-knob js-radio-play" id="vintagePlayBtn" title="Aç / Kapat">
                <div class="rotary-face">
                  <span class="rotary-indicator" id="vintagePlayIcon">▶</span>
                </div>
              </button>
              <span class="vintage-knob-text">GÜÇ / ÇAL</span>
            </div>

            <div class="vintage-slider-container">
              <div class="vintage-slider-labels">
                <span>MIN</span>
                <span>SES SEVİYESİ</span>
                <span>MAX</span>
              </div>
              <input type="range" class="vintage-fader-input js-radio-vol" id="vintageVolumeSlider" min="0" max="1" step="0.05" value="<?= $user_volume ?>">
            </div>

            <div class="vintage-knob-container">
              <button type="button" class="vintage-rotary-knob js-radio-fav" id="vintageFavBtn" title="Favorilere Ekle">
                <div class="rotary-face">
                  <span class="rotary-indicator" id="vintageFavIcon">☆</span>
                </div>
              </button>
              <span class="vintage-knob-text">FAVORİ</span>
            </div>
          </div>
        </div>

        <!-- 2. 80'LER RETRO BOOMBOX GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-boombox">
          <div class="boombox-roof">
            <div class="boombox-antenna left-antenna"></div>
            <div class="boombox-handle"></div>
            <div class="boombox-antenna right-antenna"></div>
          </div>

          <div class="boombox-body">
            <!-- Sol Hoparlör -->
            <div class="boombox-speaker left-speaker">
              <div class="speaker-tweeter"></div>
              <div class="speaker-outer-rim">
                <div class="speaker-cone">
                  <div class="speaker-dustcap"><span>BASS</span></div>
                </div>
              </div>
              <span class="speaker-label">TWIN WOOFER • 2-WAY</span>
            </div>

            <!-- Orta Kasetçalar & Kontrol Paneli -->
            <div class="boombox-center-deck">
              <!-- Analog VU Metreler -->
              <div class="boombox-vu-meters">
                <div class="vu-dial-box">
                  <div class="vu-dial-face">
                    <span class="vu-scale-txt">-20 -10 -5 0 +3 dB</span>
                    <div class="vu-needle" id="boomboxNeedleL"></div>
                  </div>
                  <span class="vu-ch-label">LEFT CH</span>
                </div>
                <div class="vu-dial-box">
                  <div class="vu-dial-face">
                    <span class="vu-scale-txt">-20 -10 -5 0 +3 dB</span>
                    <div class="vu-needle" id="boomboxNeedleR"></div>
                  </div>
                  <span class="vu-ch-label">RIGHT CH</span>
                </div>
              </div>

              <!-- Kaset Yuvası ve Dönen Makaralar -->
              <div class="boombox-cassette-pocket">
                <div class="cassette-glass-window">
                  <div class="cassette-top-label">
                    <span>STEREO CASSETTE DECK</span>
                    <span>AUTO REVERSE / METAL CrO2</span>
                  </div>
                  <div class="cassette-spools-area">
                    <div class="cassette-spool" id="boomboxSpoolL">
                      <div class="spool-cog"></div>
                    </div>
                    <div class="tape-bridge"></div>
                    <div class="cassette-spool" id="boomboxSpoolR">
                      <div class="spool-cog"></div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- LCD İstasyon ve Frekans Ekranı -->
              <div class="boombox-lcd-strip">
                <div class="lcd-live-dot"></div>
                <div class="lcd-info-wrap">
                  <h3 class="lcd-station-title js-station-title" id="boomboxStationTitle">Radyo İstasyonu Seçin</h3>
                  <span class="lcd-station-freq" id="boomboxFreq">FM STEREO 98.4 MHz</span>
                </div>
              </div>

              <!-- Mekanik Piyano Tuşları ve Ses Ayarı -->
              <div class="boombox-deck-controls">
                <div class="boombox-piano-keys">
                  <button type="button" class="boombox-key key-play js-radio-play" id="boomboxPlayBtn" title="Oynat / Duraklat">
                    <span class="key-icon" id="boomboxPlayIcon">▶</span>
                    <span class="key-label">PLAY</span>
                  </button>
                  <button type="button" class="boombox-key key-mute js-radio-mute" id="boomboxMuteBtn" title="Sesi Aç / Kapat">
                    <span class="key-icon" id="boomboxMuteIcon">🔊</span>
                    <span class="key-label">MUTE</span>
                  </button>
                  <button type="button" class="boombox-key key-fav js-radio-fav" id="boomboxFavBtn" title="Favorilere Ekle">
                    <span class="key-icon" id="boomboxFavIcon">☆</span>
                    <span class="key-label">MEMO</span>
                  </button>
                </div>

                <div class="boombox-vol-group">
                  <span class="vol-label">VOL</span>
                  <input type="range" class="boombox-vol-slider js-radio-vol" id="boomboxVolumeSlider" min="0" max="1" step="0.05" value="<?= $user_volume ?>">
                </div>
              </div>
            </div>

            <!-- Sağ Hoparlör -->
            <div class="boombox-speaker right-speaker">
              <div class="speaker-tweeter"></div>
              <div class="speaker-outer-rim">
                <div class="speaker-cone">
                  <div class="speaker-dustcap"><span>STEREO</span></div>
                </div>
              </div>
              <span class="speaker-label">WIDE DISPERSION</span>
            </div>
          </div>
        </div>

        <!-- 3. CYBER HI-FI RACK GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-cyber">
          <div class="cyber-rack-face">
            <div class="cyber-top-rack">
              <span class="rack-hex-bolt"></span>
              <div class="cyber-rack-title">
                <span class="cyber-led-dot"></span>
                <span>AA AUDIO • QUANTUM HI-FI DSP COMPONENT</span>
              </div>
              <span class="rack-hex-bolt"></span>
            </div>

            <div class="cyber-vfd-screen">
              <div class="cyber-vfd-top">
                <span class="vfd-status-tag live">LIVE HD</span>
                <span class="vfd-status-tag">48 kHz // 320 kbps</span>
                <span class="vfd-status-tag js-station-genre" id="cyberCategory">Yabancı</span>
              </div>
              <h2 class="cyber-title js-station-title" id="cyberStationTitle">Radyo İstasyonu Seçin</h2>

              <div class="cyber-eq-bars" id="cyberEqBars">
                <div class="c-bar cb1"></div><div class="c-bar cb2"></div><div class="c-bar cb3"></div><div class="c-bar cb4"></div>
                <div class="c-bar cb5"></div><div class="c-bar cb6"></div><div class="c-bar cb7"></div><div class="c-bar cb8"></div>
                <div class="c-bar cb9"></div><div class="c-bar cb10"></div><div class="c-bar cb11"></div><div class="c-bar cb12"></div>
                <div class="c-bar cb13"></div><div class="c-bar cb14"></div><div class="c-bar cb15"></div><div class="c-bar cb16"></div>
              </div>
            </div>

            <div class="cyber-dock">
              <button type="button" class="cyber-play-btn js-radio-play" id="cyberPlayBtn" title="Oynat / Duraklat">
                <span class="cyber-play-ring"></span>
                <span class="cyber-play-icon" id="cyberPlayIcon">▶</span>
              </button>

              <div class="cyber-fader-wrap">
                <div class="cyber-fader-header">
                  <span>DIGITAL GAIN</span>
                  <span id="cyberVolVal"><?= $user_volume_pct ?>%</span>
                </div>
                <input type="range" class="cyber-fader-input js-radio-vol" id="cyberVolumeSlider" min="0" max="1" step="0.05" value="<?= $user_volume ?>">
              </div>

              <div class="cyber-actions">
                <button type="button" class="cyber-action-btn js-radio-mute" id="cyberMuteBtn" title="Mute">🔊</button>
                <button type="button" class="cyber-action-btn js-radio-fav" id="cyberFavBtn" title="Favori">☆</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 4. MODERN STÜDYO GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-modern">
          <div class="radio-studio-visual">
            <div class="radio-disc-halo" id="modernDiscHalo">
              <div class="radio-disc-inner">
                <span style="font-size: 34px;">📻</span>
              </div>
            </div>
            <div class="radio-eq-container" id="modernEqContainer">
              <span class="radio-eq-bar bar1"></span>
              <span class="radio-eq-bar bar2"></span>
              <span class="radio-eq-bar bar3"></span>
              <span class="radio-eq-bar bar4"></span>
              <span class="radio-eq-bar bar5"></span>
              <span class="radio-eq-bar bar6"></span>
              <span class="radio-eq-bar bar7"></span>
              <span class="radio-eq-bar bar8"></span>
            </div>
          </div>

          <div class="radio-station-info">
            <span id="radioStatusBadge" class="radio-status-tag">
              <span class="radio-pulse-dot"></span>
              <span>İstasyon Seçiniz</span>
            </span>
            <h2 id="radioStationTitle" class="radio-station-title js-station-title">Radyo İstasyonu Seçin</h2>
            <p id="radioStationGenre" class="radio-station-genre js-station-genre">Haber, Müzik, Spor & Tematik Yayınlar</p>
          </div>

          <div class="radio-controls-dock">
            <button type="button" id="radioPlayBtn" class="radio-play-btn js-radio-play" title="Oynat / Duraklat">
              <span class="radio-play-icon" id="modernPlayIcon">▶</span>
            </button>
            <div class="radio-volume-group">
              <button type="button" id="radioMuteBtn" class="radio-mute-btn js-radio-mute" title="Sesi Kapat / Aç">🔊</button>
              <input type="range" id="radioVolumeSlider" class="js-radio-vol" min="0" max="1" step="0.05" value="<?= $user_volume ?>" title="Ses Seviyesi">
            </div>
            <button type="button" id="radioFavToggleBtn" class="radio-tool-fav-btn js-radio-fav" title="Favorilere Ekle / Çıkar">☆</button>
          </div>
        </div>

        <!-- 5. WINAMP 2.91 KLASİK GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-winamp">
          <!-- Winamp Pencere Başlığı -->
          <div class="winamp-titlebar">
            <div class="winamp-title-left">
              <span class="winamp-lightning">⚡</span>
              <span class="winamp-title-text">WINAMP • aahaber.com</span>
            </div>
            <div class="winamp-win-controls">
              <button type="button" class="winamp-win-btn win-min" title="Simge Durumuna Küçült">_</button>
              <button type="button" class="winamp-win-btn win-max" title="Ekranı Kapla">□</button>
              <button type="button" class="winamp-win-btn win-close" title="Kapat">✕</button>
            </div>
          </div>

          <!-- Winamp Ana Gövde -->
          <div class="winamp-main-body">
            <!-- Üst LCD Gösterge Paneli -->
            <div class="winamp-display-row">
              <div class="winamp-time-box">
                <span class="winamp-time-status">ON-AIR</span>
                <span class="winamp-time-clock" id="winampTimeClock">03:45</span>
                <span class="winamp-time-kbps">320 KBPS</span>
              </div>

              <div class="winamp-screen-center">
                <div class="winamp-marquee-wrap">
                  <div class="winamp-marquee-inner">
                    <span class="winamp-track-num">1.</span>
                    <span class="winamp-track-name js-station-title">Radyo İstasyonu Seçin</span>
                    <span class="winamp-track-spec">*** LIVE HD STEREO 44.1 kHz ***</span>
                  </div>
                </div>

                <div class="winamp-spectrum-visualizer">
                  <span class="wa-bar wb1"></span><span class="wa-bar wb2"></span><span class="wa-bar wb3"></span><span class="wa-bar wb4"></span>
                  <span class="wa-bar wb5"></span><span class="wa-bar wb6"></span><span class="wa-bar wb7"></span><span class="wa-bar wb8"></span>
                  <span class="wa-bar wb9"></span><span class="wa-bar wb10"></span><span class="wa-bar wb11"></span><span class="wa-bar wb12"></span>
                  <span class="wa-bar wb13"></span><span class="wa-bar wb14"></span><span class="wa-bar wb15"></span><span class="wa-bar wb16"></span>
                  <span class="wa-bar wb17"></span><span class="wa-bar wb18"></span><span class="wa-bar wb19"></span><span class="wa-bar wb20"></span>
                </div>
              </div>

              <div class="winamp-info-badges">
                <div class="wa-badge active">STEREO</div>
                <div class="wa-badge active">44 kHz</div>
                <div class="wa-badge active">DSP</div>
              </div>
            </div>

            <!-- Orta Kontrol ve Kaydırıcılar Sırası -->
            <div class="winamp-sliders-row">
              <!-- Ses Fader -->
              <div class="winamp-fader-block">
                <span class="wa-fader-label">VOLUME</span>
                <input type="range" class="winamp-slider js-radio-vol" id="winampVolumeSlider" min="0" max="1" step="0.05" value="<?= $user_volume ?>">
              </div>

              <!-- Denge (Balance) -->
              <div class="winamp-fader-block">
                <span class="wa-fader-label">BALANCE</span>
                <input type="range" class="winamp-slider" min="-1" max="1" step="0.1" value="0">
              </div>

              <!-- Klasik Mod Tuşları (EQ, PL, Shuffle) -->
              <div class="winamp-pill-toggles">
                <span class="wa-pill-btn active">EQ</span>
                <span class="wa-pill-btn active">PL</span>
                <span class="wa-pill-btn">SHUFFLE</span>
                <span class="wa-pill-btn active">REPEAT</span>
              </div>
            </div>

            <!-- Alt Klasik Transport Butonları -->
            <div class="winamp-transport-bar">
              <div class="winamp-btn-group">
                <button type="button" class="wa-btn wa-prev" onclick="window.navigateRadioStation(-1)" title="Önceki İstasyon">
                  <span>|◀◀</span>
                </button>
                <button type="button" class="wa-btn wa-play js-radio-play" id="winampPlayBtn" title="Oynat / Duraklat">
                  <span id="winampPlayIcon">▶</span>
                </button>
                <button type="button" class="wa-btn wa-pause js-radio-play" title="Duraklat">
                  <span>❚❚</span>
                </button>
                <button type="button" class="wa-btn wa-stop" onclick="window.stopRadioAudio()" title="Durdur">
                  <span>■</span>
                </button>
                <button type="button" class="wa-btn wa-next" onclick="window.navigateRadioStation(1)" title="Sonraki İstasyon">
                  <span>▶▶|</span>
                </button>
                <button type="button" class="wa-btn wa-eject js-radio-fav" id="winampFavBtn" title="Favorilere Ekle">
                  <span>⏏</span>
                </button>
              </div>

              <div class="winamp-extras-bar">
                <button type="button" class="wa-mini-btn js-radio-mute" id="winampMuteBtn" title="Sesi Aç / Kapat">
                  <span class="wa-mute-icon">🔊</span>
                </button>
                <span class="winamp-slogan">"IT REALLY WHIPS THE LLAMA'S ASS!"</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 6. AIMP HI-FI MODERN GÖRÜNÜMÜ -->
        <div class="skin-view skin-view-aimp">
          <div class="aimp-chassis">
            <!-- AIMP Üst Bar -->
            <div class="aimp-top-strip">
              <div class="aimp-brand">
                <span class="aimp-logo-badge">A</span>
                <div class="aimp-brand-text">
                  <span class="aimp-app-name">AIMP AUDIO PLAYER</span>
                  <span class="aimp-app-sub">v5.30 HI-RES DSP CORE</span>
                </div>
              </div>

              <div class="aimp-top-tags">
                <span class="aimp-tag live">● ON-AIR</span>
                <span class="aimp-tag">32-BIT FLOAT</span>
                <span class="aimp-tag js-station-genre" id="aimpGenreTag">Pop / Müzik</span>
              </div>
            </div>

            <!-- AIMP Ana Ekran (Glowing Amber Oscilloscope) -->
            <div class="aimp-screen-glass">
              <div class="aimp-screen-header">
                <div class="aimp-station-line">
                  <h2 class="aimp-title js-station-title" id="aimpStationTitle">Radyo İstasyonu Seçin</h2>
                  <span class="aimp-freq-pill" id="aimpFreqTag">105.8 MHz HD</span>
                </div>
                <div class="aimp-vol-gauge">
                  <span class="aimp-gauge-label">MASTER</span>
                  <span class="aimp-gauge-num" id="aimpVolVal"><?= $user_volume_pct ?>%</span>
                </div>
              </div>

              <!-- AIMP Amber Spektrum Grafiği -->
              <div class="aimp-spectrum-rack">
                <div class="aimp-spec-col sc1"></div><div class="aimp-spec-col sc2"></div><div class="aimp-spec-col sc3"></div><div class="aimp-spec-col sc4"></div>
                <div class="aimp-spec-col sc5"></div><div class="aimp-spec-col sc6"></div><div class="aimp-spec-col sc7"></div><div class="aimp-spec-col sc8"></div>
                <div class="aimp-spec-col sc9"></div><div class="aimp-spec-col sc10"></div><div class="aimp-spec-col sc11"></div><div class="aimp-spec-col sc12"></div>
                <div class="aimp-spec-col sc13"></div><div class="aimp-spec-col sc14"></div><div class="aimp-spec-col sc15"></div><div class="aimp-spec-col sc16"></div>
                <div class="aimp-spec-col sc17"></div><div class="aimp-spec-col sc18"></div><div class="aimp-spec-col sc19"></div><div class="aimp-spec-col sc20"></div>
                <div class="aimp-spec-col sc21"></div><div class="aimp-spec-col sc22"></div><div class="aimp-spec-col sc23"></div><div class="aimp-spec-col sc24"></div>
              </div>
            </div>

            <!-- AIMP Kontrol Dok Alanı -->
            <div class="aimp-dock">
              <div class="aimp-transport-cluster">
                <button type="button" class="aimp-btn aimp-step" onclick="window.navigateRadioStation(-1)" title="Önceki İstasyon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/></svg>
                </button>

                <button type="button" class="aimp-jog-play js-radio-play" id="aimpPlayBtn" title="Oynat / Duraklat">
                  <div class="aimp-jog-ring"></div>
                  <span class="aimp-play-symbol" id="aimpPlayIcon">▶</span>
                </button>

                <button type="button" class="aimp-btn aimp-step" onclick="window.navigateRadioStation(1)" title="Sonraki İstasyon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
                </button>
              </div>

              <!-- AIMP Ses Fader -->
              <div class="aimp-fader-zone">
                <button type="button" class="aimp-mute-btn js-radio-mute" id="aimpMuteBtn" title="Sesi Aç / Kapat">🔊</button>
                <div class="aimp-slider-track">
                  <input type="range" class="aimp-range-slider js-radio-vol" id="aimpVolumeSlider" min="0" max="1" step="0.05" value="<?= $user_volume ?>">
                </div>
              </div>

              <!-- Favori & Ek Özellikler -->
              <div class="aimp-aux-tools">
                <button type="button" class="aimp-fav-btn js-radio-fav" id="aimpFavBtn" title="Favorilere Ekle / Çıkar">☆</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Kısayollar İpucu Kartı -->
      <div class="radio-shortcuts-card">
        <div class="radio-shortcuts-head">
          <span>💡</span>
          <strong>Klavye Kısayolları ile Kolay Dinleme</strong>
        </div>
        <div class="radio-shortcuts-grid">
          <div class="shortcut-item"><kbd>Boşluk</kbd> <span>Oynat / Durdur</span></div>
          <div class="shortcut-item"><kbd>M</kbd> <span>Sesi Kapat / Aç</span></div>
          <div class="shortcut-item"><kbd>↓</kbd> / <kbd>↑</kbd> <span>Sonraki / Önceki İstasyon</span></div>
        </div>
      </div>

      <!-- Radyo Tanıtımı & SEO Bilgi Paneli -->
      <section class="radio-seo-info-card" id="radioSeoInfoCard">
        <div class="radio-seo-header">
          <div class="radio-seo-title-group">
            <h2 id="radioSeoStationTitle"><?= htmlspecialchars($current_station_name) ?> Canlı Dinle</h2>
            <span class="radio-seo-badge" id="radioSeoStationBadge">HD Ses</span>
          </div>
          <span class="radio-seo-live-indicator">
            <span class="radio-pulse-dot active"></span>
            CANLI YAYIN
          </span>
        </div>
        <p class="radio-seo-description" id="radioSeoDescription">
          <?= htmlspecialchars($current_station_name) ?> canlı yayınını yüksek ses kalitesiyle, kesintisiz ve donmadan aahaber.com üzerinden dinleyebilirsiniz. En popüler şarkılar, haberler ve tematik canlı müzik akışı her an yanınızda.
        </p>
        <div class="radio-seo-features">
          <div class="radio-feat-item">
            <span class="radio-feat-icon">🎵</span>
            <div><strong>HD Kalite</strong><span>Kristal netliğinde dijital ses</span></div>
          </div>
          <div class="radio-feat-item">
            <span class="radio-feat-icon">⚡</span>
            <div><strong>Kesintisiz Dinleme</strong><span>Düşük veri tüketimli akış</span></div>
          </div>
          <div class="radio-feat-item">
            <span class="radio-feat-icon">📱</span>
            <div><strong>Arka Planda Çalma</strong><span>Ekran kapalıyken dinleyin</span></div>
          </div>
        </div>
      </section>

    </div>

    <!-- 2. SAĞ KOLON: İstasyonlar & Filtreler Listesi -->
    <aside class="radio-sidebar-col">
      <div class="radio-sidebar-inner">

        <!-- Ülke Seçimi -->
        <div class="radio-country-bar">
          <div class="radio-country-head">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
            <span>Yayın Ülkesi:</span>
            <span id="radioCountryCountTag" class="radio-country-count-tag">262 Radyo</span>
          </div>
          <div class="custom-country-picker" id="radioCountryPicker">
            <button type="button" class="country-picker-btn" id="radioCountryTrigger" aria-haspopup="listbox" aria-expanded="false">
              <img id="radioSelectedFlag" class="country-flag-icon" src="https://flagcdn.com/w40/tr.png" width="20" height="14" alt="TR">
              <span id="radioSelectedName" class="country-selected-label">Türkiye</span>
              <svg class="picker-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="country-dropdown-menu" id="radioCountryDropdown" style="display: none;">
              <div class="country-search-box">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <input type="text" id="radioCountrySearchInput" placeholder="Ülke ara (örn: Almanya, İngiltere)..." autocomplete="off">
              </div>
              <div class="country-options-scroll" id="radioCountryOptionsList"></div>
            </div>
            <select id="radioCountrySelect" style="display: none;">
              <option value="tr" selected>Türkiye</option>
            </select>
          </div>
        </div>

        <!-- Arama & Temizleme Kutusu -->
        <div class="radio-search-wrap">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="radioSearchInput" placeholder="Radyo ara (örn: Power, Kral, TRT, Best)..." autocomplete="off">
          <button type="button" id="radioSearchClear" class="radio-search-clear-btn" style="display: none;">&times;</button>
        </div>

        <!-- Sekmeler: Tümü / Favorilerim -->
        <div class="radio-sidebar-tabs">
          <button type="button" class="radio-tab-btn active" data-tab="all">
            Tüm Radyolar <span id="radioTotalBadge" class="radio-badge">0</span>
          </button>
          <button type="button" class="radio-tab-btn" data-tab="favorites">
            ⭐ Favorilerim <span id="radioFavBadge" class="radio-badge">0</span>
          </button>
        </div>

        <!-- Kategori Filtre Butonları -->
        <div id="radioCategoriesBar" class="radio-categories-scroll"></div>

        <!-- Radyolar Listesi -->
        <div id="radioStationsList" class="radio-stations-list"></div>

        <!-- Boş Sonuç Ekranı -->
        <div id="radioEmptyState" class="radio-empty-state" style="display: none;">
          <span style="font-size: 32px; display: block; margin-bottom: 6px;">📻</span>
          <p>Aradığınız kriterlere uygun radyo bulunamadı.</p>
        </div>

      </div>
    </aside>

  </div>

</div>

<script>
window.__INITIAL_RADIO_STATION__ = <?= json_encode($requested_station ? ($requested_station['slug'] ?? $requested_station['nanoid']) : null, JSON_UNESCAPED_UNICODE) ?>;
window.__INITIAL_RADIO_COUNTRY__ = <?= json_encode($selected_radio_country, JSON_UNESCAPED_UNICODE) ?>;
</script>

<?php
$extra_js = ['hls.min.js', 'radyo.js?v=2.5'];
require_once __DIR__ . '/alt.php';
?>