<?php
/**
 * trafik.php - aahaber.com Canlı Trafik Durumu
 */

$page_title = "Canlı Trafik Durumu — aahaber.com Yoğunluk Haritası ve Kameralar";
$page_desc = "İstanbul, Ankara, İzmir ve 81 ilin canlı trafik yoğunluk haritası, köprü geçiş süreleri ve anlık yol durumu.";
$page_active = "trafik";
$search_placeholder = "İl veya ilçe ara (örn: Kadıköy, Çankaya, Karşıyaka)...";

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

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

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

    <div class="traffic-banner-notice">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
      <span>Canlı veri kaynağı: Yandex Trafik. Yol yoğunluğu, köprü geçişleri ve kaza bilgileri anlık yansıtılır.</span>
    </div>
  </div>

  <!-- 2 Kolonlu Canlı Trafik Uygulama Düzeni -->
  <div class="kanews-traffic-layout">

    <!-- 1. SOL / ORTA KOLON: Yandex Trafik Haritası -->
    <div class="kanews-traffic-mapcol">
      <div id="aahaber_yandexTraffic" class="kanews-traffic-map"></div>
    </div>

    <!-- 2. SAĞ KOLON: Kontrol & İlçeler Yan Paneli -->
    <aside class="kanews-traffic-sidebar" aria-label="Trafik Durumu Menüsü">
      <div class="kanews-traffic-sidebar__inner">

        <!-- Üst Başlık & Aksiyonlar -->
        <header class="kanews-traffic-sidebar__top">
          <div class="kanews-traffic-sidebar__brand-actions">
            <div class="kanews-traffic-sidebar__brand">
              <span class="kanews-traffic-sidebar__app-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22">
                  <rect x="7" y="2" width="10" height="20" rx="5" ry="5"></rect>
                  <circle cx="12" cy="6" r="1.5" fill="currentColor"></circle>
                  <circle cx="12" cy="12" r="1.5" fill="currentColor"></circle>
                  <circle cx="12" cy="18" r="1.5" fill="currentColor"></circle>
                </svg>
              </span>
              <div class="kanews-traffic-sidebar__brand-text">
                <span class="kanews-traffic-sidebar__eyebrow">CANLI TRAFİK</span>
                <h1 class="kanews-traffic-sidebar__title" id="trafficPageCityTitle">İstanbul Trafik Durumu</h1>
              </div>
            </div>

            <!-- Tam Ekran Butonu -->
            <button 
              type="button" 
              class="kanews-traffic-fullscreen-toggle" 
              id="trafficFullscreenToggleBtn"
              title="Tam Ekran Yap"
              aria-label="Tam Ekran"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="15 3 21 3 21 9"></polyline>
                <polyline points="9 21 3 21 3 15"></polyline>
                <line x1="21" y1="3" x2="14" y2="10"></line>
                <line x1="3" y1="21" x2="10" y2="14"></line>
              </svg>
            </button>
          </div>

          <!-- Anlık Yoğunluk Rozeti -->
          <div id="trafficDensityBadge" class="traffic-density-pill" style="display: none;"></div>

          <!-- Şehir Seçici Alanı -->
          <div class="kanews-traffic-sidebar__field">
            <label class="kanews-traffic-sidebar__field-label">Şehir</label>
            <div class="kanews-traffic-sidebar__city">
              <button type="button" class="kanews-traffic-sidebar__picker" id="btnCityPickerTrigger">
                <span class="kanews-traffic-sidebar__picker-value" id="selectedCityName">İstanbul</span>
                <svg class="kanews-traffic-sidebar__picker-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </button>

              <!-- 81 İl Açılır Menüsü -->
              <div id="cityPickerDropdown" class="kanews-traffic-sidebar__cities">
                <div class="city-search-box-wrap">
                  <input 
                    type="text" 
                    id="cityPickerSearchInput" 
                    placeholder="İl ara (örn: Ankara, İzmir)..." 
                    autocomplete="off"
                  >
                </div>
                <div id="cityPickerDropdownList" class="city-picker-scroll-list"></div>
              </div>
            </div>
          </div>

          <!-- Konumumu Kullan Butonu -->
          <div class="kanews-traffic-sidebar__field" style="margin-top: 10px;">
            <button type="button" class="kanews-traffic-geo-btn" id="btnUseGeoLocation">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                <path d="M12 2a8 8 0 0 0-8 8c0 5.25 8 12 8 12s8-6.75 8-12a8 8 0 0 0-8-8z"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span>Konumumu Kullan</span>
            </button>

            <div class="kanews-traffic-location">
              <span class="kanews-traffic-location__label">Konum:</span>
              <span class="kanews-traffic-location__value" id="currentLocationValue">Otomatik / Seçili İl</span>
            </div>

            <div id="geoStatusMessage" class="kanews-traffic-geo-status" hidden></div>
          </div>
        </header>

        <!-- İlçeler Listesi -->
        <div class="kanews-traffic-sidebar__sheet">
          <div class="kanews-traffic-districts__head">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="2" y1="12" x2="22" y2="12"></line>
              <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"></path>
            </svg>
            <span>İlçeler</span>
          </div>

          <nav class="kanews-traffic-districts__list" id="trafficDistrictsList" aria-label="İlçeler Listesi"></nav>
        </div>

      </div>
    </aside>

  </div>

</div>

<?php
$extra_js = [
  'https://api-maps.yandex.ru/2.1/?lang=tr_TR',
  'trafik.js?v=2.1'
];
require_once __DIR__ . '/alt.php';
?>
