<section class="module-page customers-page">
  <div class="module-head">
    <div>
      <h2 class="module-title">Müşteri Bul</h2>
      <p class="module-sub">İsim, telefon veya TC ile müşteri ara.</p>
    </div>
  </div>

  <div class="cust-search-wrap">
    <input
      type="text"
      id="cust-search"
      class="cust-search"
      placeholder="Ad soyad, telefon veya TC..."
      autocomplete="off"
    >
  </div>

  <div id="cust-list" class="cust-list">
    <div class="cust-empty">Aramaya başla...</div>
  </div>
</section>

<!-- DRAWER -->
<div class="cust-backdrop" id="cust-backdrop"></div>

<aside class="cust-drawer" id="cust-drawer">
  <div class="cust-drawer-head">
    <div class="cust-drawer-avatar" id="cust-avatar"></div>
    <div class="cust-drawer-info">
      <div class="cust-drawer-name" id="cust-drawer-name">—</div>
      <div class="cust-drawer-meta" id="cust-drawer-meta">—</div>
    </div>
    <button type="button" class="cust-drawer-close" id="cust-drawer-close">✕</button>
  </div>

  <div class="cust-ozet-row" id="cust-ozet-row">
    <div class="cust-ozet-item">
      <div class="cust-ozet-label">Toplam Satış</div>
      <div class="cust-ozet-val" id="cust-ozet-satis">—</div>
    </div>
    <div class="cust-ozet-item">
      <div class="cust-ozet-label">Ödenen</div>
      <div class="cust-ozet-val cust-val-green" id="cust-ozet-pesinat">—</div>
    </div>
    <div class="cust-ozet-item">
      <div class="cust-ozet-label">Kalan Borç</div>
      <div class="cust-ozet-val cust-val-red" id="cust-ozet-kalan">—</div>
    </div>
  </div>

  <div class="cust-satis-list" id="cust-satis-list">
    <div class="cust-loading">Yükleniyor...</div>
  </div>
</aside>
