<!DOCTYPE html>
<html lang="tr">
<head>
	<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>RizeHaritası | Rize Dijital Haritası</title>
<meta name="description" content="Rize'nin ilçelerini, köylerini, mahallelerini ve keşif noktalarını haritada keşfedin.">
<meta name="theme-color" content="#087f5b">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="css/index.css?v=30">

<style>
/* INDEX DARALTILMIŞ GENİŞLİK */
.headerInner,
.pageLayout,
footer {
  width: min(1400px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.pageLayout {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .headerInner,
  .pageLayout,
  footer {
    width: calc(100% - 24px);
  }
}
</style>
  <link rel="alternate" type="application/rss+xml" title="RizeHaritası RSS Feed" href="feed.xml">
</head>
<body>
<amp-auto-ads type="adsense"
    data-ad-client="ca-pub-9584870341911558">
</amp-auto-ads>
<header class="siteHeader">
  <div class="headerInner">
    <a href="index.html" class="siteLogo">RizeHaritası</a>
    <nav class="topMenu" aria-label="Ana Menü">
      <a href="index.html" class="topMenuBtn active">🏠 <span>Ana Sayfa</span></a>
      <a href="#map-section" class="topMenuBtn">🗺️ <span>Harita</span></a>
      <a href="/rize/rizeyi-kesfet.html" class="topMenuBtn">🧭 <span>Rize'yi Keşfet</span></a>
      <a href="ilceler.html" class="topMenuBtn">📍 <span>İlçeler</span></a>
      <a href="kameralar.html" class="topMenuBtn">📹 <span>Canlı Kameralar</span></a>
      <a href="hatiralar.html" class="topMenuBtn">❤️ <span>Rize Hatıraları</span></a>
      <a href="contact.html" class="topMenuBtn">✉️ <span>İletişim</span></a>
    </nav>
  </div>
</header>

<main class="pageLayout">

<aside class="discoverSideMenu">

<div class="discoverSideList">

<a href="index.html" class="discoverSideBtn">
    <span>🌐</span>
    <strong>Ana Sayfa</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=oteller" class="discoverSideBtn">
    <span>🏨</span>
    <strong>Oteller</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=yaylalar" class="discoverSideBtn">
    <span>🏔️</span>
    <strong>Yaylalar</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=kafeler" class="discoverSideBtn">
    <span>☕</span>
    <strong>Kafeler</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=restoranlar" class="discoverSideBtn">
    <span>🍽️</span>
    <strong>Restoranlar</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=gezilecek-yerler" class="discoverSideBtn">
    <span>📍</span>
    <strong>Gezilecek Yerler</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=fabrikalar" class="discoverSideBtn">
    <span>🏭</span>
    <strong>Fabrikalar</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=mahalleler" class="discoverSideBtn">
    <span>🏘️</span>
    <strong>Mahalleler</strong>
    <b>›</b>
</a>

<a href="ilceler/merkez.html?category=koyler" class="discoverSideBtn">
    <span>🏡</span>
    <strong>Köyler</strong>
    <b>›</b>
</a>

<a href="rizenin-degerleri.html" class="discoverSideBtn">
    <span>🌿</span>
    <strong>Rize'nin Değerleri</strong>
    <b>›</b>
</a>
<a href="ilceler/merkez.html?category=resmi-kurumlar" class="discoverSideBtn">
    <span>🏛️</span>
    <strong>Resmî Kurumlar</strong>
    <b>›</b>
</a>

</div>

</aside>

  <section class="pageContent">
    <section id="map-section" class="contentCard">
      <div class="cardHeader">
        <div>
          <h2>🗺️ Rize Haritası</h2>
          <p>Harita üzerindeki ilçe, köy ve mahalle noktalarına tıklayarak detayları görüntüleyin.</p>
        </div>
      </div>
      <div id="mapFilters"></div>
      <div id="map"></div>
    </section>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9584870341911558"
     crossorigin="anonymous"></script>
<!-- yatay -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9584870341911558"
     data-ad-slot="4282205910"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    <section class="rotaSection contentCard">
      <div class="cardHeader">
        <div>
          <h2>🧭 Rota Oluştur</h2>
          <p>Başlangıç ve varış noktalarını girin, Google Maps ile yol tarifi alın.</p>
        </div>
      </div>
      <div class="rotaForm">
        <div class="rotaInput"><label>📍 Başlangıç Noktası</label><input id="rotaBaslangic" type="text" placeholder="Örn: Rize Merkez"></div>
        <div class="rotaInput"><label>🏁 Varış Noktası</label><input id="rotaVaris" type="text" placeholder="Örn: Ayder Yaylası"></div>
        <button type="button" class="primaryBtn" onclick="rotaOlustur()">🧭 Rota Oluştur</button>
      </div>
    </section>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9584870341911558"
     crossorigin="anonymous"></script>
    <section class="weatherCard contentCard">
      <div class="cardHeader">
        <div><h2>🌤️ Rize Hava Durumu</h2><p>İlçelere göre hava durumu görünümü.</p></div>
      </div>
      <div id="weatherDistricts" class="weather-tabs"></div>
      <div id="weatherForecast" class="weather-grid"><div class="emptyState">Hava durumu yükleniyor...</div></div>
    </section>

    <section class="statsGrid">
      <div class="statCard"><span>🏘️</span><strong id="statDistrictCount">12</strong><small>İlçe</small></div>
      <div class="statCard"><span>🌿</span><strong id="statVillageCount">300+</strong><small>Köy</small></div>
      <div class="statCard"><span>🏔️</span><strong id="statPlateauCount">100+</strong><small>Yayla</small></div>
      <div class="statCard"><span>📍</span><strong id="statDiscoveryCount">500+</strong><small>Keşif Noktası</small></div>
    </section>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9584870341911558"
     crossorigin="anonymous"></script>
<!-- 72890 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9584870341911558"
     data-ad-slot="9676239063"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9584870341911558"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-9584870341911558"
     data-ad-slot="9759612506"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
async function rastgeleHatiraGoster(){
  const btn = document.getElementById('rastgeleBtn');
  const box = document.getElementById('rastgeleSonuc');
  btn.textContent = '⏳ Yükleniyor...';
  btn.disabled = true;
  try{
    const r = await fetch('/data/rastgele-hatira.php?v='+Date.now());
    const m = await r.json();
    if(!m || m.error) throw new Error(m.error || 'Hatıra yok');
    
    document.getElementById('rTitle').textContent = m.title || 'Rize Hatırası';
    document.getElementById('rText').textContent = m.text || '';
    document.getElementById('rMeta').textContent = `✍️ ${m.author || 'Anonim'} • 📍 ${m.district || m.location || ''} • ${m.year || ''}`;
    
    const img = document.getElementById('rImg');
    if(m.image){
      img.src = '/' + m.image.replace(/^\/+/,'');
      img.style.display = 'block';
      img.onerror = () => img.style.display='none';
    } else {
      img.style.display='none';
    }
    
    box.style.display = 'block';
    box.scrollIntoView({behavior:'smooth', block:'center'});
  }catch(e){
    alert('Hatıra yüklenemedi: '+e.message);
  }finally{
    btn.textContent = '🎲 Başka Bir Hatıra Göster';
    btn.disabled = false;
  }
}
document.addEventListener('DOMContentLoaded', ()=>{
  document.getElementById('rastgeleBtn')?.addEventListener('click', rastgeleHatiraGoster);
});
</script>	  
    <section class="sponsorGrid">
      <a class="sponsorCard" href="https://www.google.com/maps/place/Hazine+Kuyumculuk/@41.1799675,40.8885323,17z" target="_blank" rel="noopener"><img src="images/sponsors/hazinekuyumculuk.png" alt="Hazine Kuyumculuk"></a>
      <a class="sponsorCard" href="https://ivolttech.com" target="_blank" rel="noopener"><img src="images/sponsors/reklam2.png" alt="iVoltTech"></a>
      <a class="sponsorCard" href="https://ivolttech.com" target="_blank" rel="noopener"><img src="images/sponsors/reklam3.png" alt="iVoltTech"></a>
      <a class="sponsorCard" href="https://ivolttech.com" target="_blank" rel="noopener"><img src="images/sponsors/reklam4.png" alt="iVoltTech"></a>
    </section>
  </section>
</main>
<footer>
  <div class="footerGrid">
    <div><h3>RizeHaritası</h3><p>Rize'nin dijital keşif rehberi.</p><a href="contact.html" class="footerBtn">✉ E-Posta Gönder</a></div>
    <div><h4>Menü</h4><a href="index.html">Ana Sayfa</a><a href="ilceler.html">📍 İlçeleri Keşfet</a><a href="eczaneler.html">💊 Eczaneler</a><a href="contact.html">İletişim</a></div>
    <div><h4>Keşfet</h4><a href="koyler.html">🏡 Köyler</a><a href="mahalleler.html">🏘️ Mahalleler</a><a href="gezilecek-yerler.html">📍 Gezilecek Yerler</a><a href="oteller.html">🏨 Oteller</a></div>
    <div><h4>İletişim</h4><a href="contact.html" class="footerBtn">Mesaj Gönder →</a></div>
  </div>
  <div class="copyright">© 2026 RizeHaritası | Tüm Hakları Saklıdır.</div>
</footer>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js" defer></script>
<script src="js/map.js?v=30" defer></script>
<script src="js/index.js?v=30" defer></script>
<script src="js/weather.js?v=1" defer></script>
</body>
</html>