<section class="module-page rapor-ozet-page">

  <div class="module-head">
    <div>
      <h2 class="module-title">Özet Rapor</h2>
      <p class="module-sub">Bu ay ve son 7 günün görünümü</p>
    </div>
    <div id="ro-guncelleme" class="ro-guncelleme-badge">Yükleniyor…</div>
  </div>

  <!-- ÖZET KARTLAR -->
  <div class="ro-kartlar">

    <div class="ro-kart ro-kart--blue">
      <div class="ro-kart-ust">
        <svg class="ro-kart-ico" viewBox="0 0 32 32" fill="white">
          <path d="M4 8h24v16H4z" opacity=".25"/>
          <path d="M28 6H4a2 2 0 00-2 2v16a2 2 0 002 2h24a2 2 0 002-2V8a2 2 0 00-2-2zm0 18H4V8h24v16z"/>
          <path d="M8 14h16v2H8zm0 4h10v2H8z"/>
        </svg>
        <span class="ro-kart-etiket">Bu Ay Ciro</span>
      </div>
      <div class="ro-kart-val" id="ro-ciro">₺—</div>
      <div class="ro-kart-alt" id="ro-satis-adet">— satış</div>
    </div>

    <div class="ro-kart ro-kart--green">
      <div class="ro-kart-ust">
        <svg class="ro-kart-ico" viewBox="0 0 32 32" fill="white">
          <path d="M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm5 13h-4v4h-2v-4H11v-2h4v-4h2v4h4v2z"/>
        </svg>
        <span class="ro-kart-etiket">Bu Ay Tahsilat</span>
      </div>
      <div class="ro-kart-val" id="ro-tahsilat">₺—</div>
      <div class="ro-kart-alt" id="ro-tahsilat-oran">—</div>
    </div>

    <div class="ro-kart ro-kart--coral">
      <div class="ro-kart-ust">
        <svg class="ro-kart-ico" viewBox="0 0 32 32" fill="white">
          <path d="M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm2.6-7.8l-.9.9c-.7.7-1.2 1.3-1.2 2.9h-2v-.5c0-1.2.5-2.3 1.2-3l1.2-1.2c.4-.3.6-.8.6-1.3 0-1.1-.9-2-2-2s-2 .9-2 2H12c0-2.2 1.8-4 4-4s4 1.8 4 4c0 .9-.4 1.7-.9 2.2z"/>
        </svg>
        <span class="ro-kart-etiket">Bekleyen Alacak</span>
      </div>
      <div class="ro-kart-val" id="ro-alacak">₺—</div>
      <div class="ro-kart-alt">Tüm zamanlar</div>
    </div>

    <div class="ro-kart ro-kart--amber">
      <div class="ro-kart-ust">
        <svg class="ro-kart-ico" viewBox="0 0 32 32" fill="white">
          <path d="M20 2H12L2 12v8l10 10h8l10-10v-8L20 2zm-4 22a2 2 0 110-4 2 2 0 010 4zm1-8h-2V8h2v8z" opacity=".3"/>
          <path d="M14 20h4v4h-4zm0-14h4v12h-4z"/>
        </svg>
        <span class="ro-kart-etiket">En Çok Satan</span>
      </div>
      <div class="ro-kart-val ro-kart-val--sm" id="ro-en-cok">—</div>
      <div class="ro-kart-alt" id="ro-en-cok-adet">— adet</div>
    </div>

  </div>

  <!-- GRAFIK BAŞLIĞI -->
  <div class="ro-grafik-baslik">
    <span>Son 7 Günlük Ciro & Tahsilat</span>
    <div class="ro-legend">
      <span class="ro-legend-dot ro-legend-dot--ciro"></span><span>Ciro</span>
      <span class="ro-legend-dot ro-legend-dot--tahsilat"></span><span>Tahsilat</span>
    </div>
  </div>

  <!-- ÇUBUK GRAFİK -->
  <div class="ro-grafik-wrap">
    <canvas id="ro-grafik" class="ro-grafik"></canvas>
    <div id="ro-grafik-loading" class="ro-grafik-overlay">Yükleniyor…</div>
  </div>

</section>
