<section class="module-page ayarlar-page">
  <div class="module-head">
    <div>
      <h2 class="module-title">Ayarlar</h2>
      <p class="module-sub">Sistem tercihlerinizi buradan yönetebilirsiniz.</p>
    </div>
  </div>

  <div class="ayarlar-grid">

    <!-- DÜKKAN ADI -->
    <div class="ayar-kart">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <path d="M2 4h12M4 4V2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5V4M2 4l1 9.5h10L14 4"/>
          <path d="M6 8h4"/>
        </svg>
        Dükkan Adı
      </div>
      <div class="ayar-kart-icerik">
        <div class="ayar-form-row">
          <input type="text" id="ay-dukkan-adi" class="ayar-input" placeholder="Dükkan adı" autocomplete="off">
          <button type="button" class="ayar-btn" id="ay-dukkan-kaydet">Kaydet</button>
        </div>
      </div>
    </div>

    <!-- ŞİFRE DEĞİŞTİR -->
    <div class="ayar-kart">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <rect x="3" y="7" width="10" height="8" rx="1.5"/>
          <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>
        </svg>
        Şifre Değiştir
      </div>
      <div class="ayar-kart-icerik">
        <div class="ayar-form-col">
          <input type="password" id="ay-mevcut-parola" class="ayar-input" placeholder="Mevcut şifre" autocomplete="current-password">
          <input type="password" id="ay-yeni-parola" class="ayar-input" placeholder="Yeni şifre (min. 4 karakter)" autocomplete="new-password">
          <input type="password" id="ay-yeni-parola2" class="ayar-input" placeholder="Yeni şifre tekrar" autocomplete="new-password">
          <button type="button" class="ayar-btn" id="ay-parola-kaydet">Şifreyi Güncelle</button>
        </div>
      </div>
    </div>

    <!-- TEMA -->
    <div class="ayar-kart">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <circle cx="8" cy="8" r="3.5"/>
          <path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M3.05 12.95l1.06-1.06M11.89 4.11l1.06-1.06"/>
        </svg>
        Tema
      </div>
      <div class="ayar-kart-icerik">
        <div class="tema-secenekler">
          <button type="button" class="tema-btn" id="tema-light" data-tema="light">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="22" height="22">
              <circle cx="12" cy="12" r="5"/>
              <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
            </svg>
            Açık
          </button>
          <button type="button" class="tema-btn" id="tema-dark" data-tema="dark">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="22" height="22">
              <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
            </svg>
            Koyu
          </button>
          <button type="button" class="tema-btn" id="tema-sistem" data-tema="sistem">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="22" height="22">
              <rect x="2" y="3" width="20" height="14" rx="2"/>
              <path d="M8 21h8M12 17v4"/>
            </svg>
            Sistem
          </button>
        </div>
      </div>
    </div>

    <!-- OTOMATİK KİLİT -->
    <div class="ayar-kart">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <circle cx="8" cy="8" r="6.5"/>
          <path d="M8 4.5V8l2.5 1.5"/>
        </svg>
        Otomatik Kilitleme
      </div>
      <div class="ayar-kart-icerik">
        <p class="ayar-aciklama">Belirtilen süre boyunca işlem yapılmazsa ekran otomatik kilitlenir.</p>
        <div class="ayar-form-row">
          <select id="ay-kilit-sure" class="ayar-select">
            <option value="0">Kapalı</option>
            <option value="5">5 dakika</option>
            <option value="15">15 dakika</option>
            <option value="30">30 dakika</option>
            <option value="60">1 saat</option>
          </select>
          <button type="button" class="ayar-btn" id="ay-kilit-kaydet">Kaydet</button>
        </div>
      </div>
    </div>

    <!-- YEDEK HATIRLATICI -->
    <div class="ayar-kart">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <path d="M13.5 8A5.5 5.5 0 1 1 8 2.5"/>
          <path d="M11 1v4h4"/>
          <path d="M11 1l2.5 2.5"/>
        </svg>
        Yedek Hatırlatıcı
      </div>
      <div class="ayar-kart-icerik">
        <p class="ayar-aciklama">Seçilen sürede yedek alınmamışsa size hatırlatılır.</p>
        <div class="ayar-form-row">
          <select id="ay-yedek-gun" class="ayar-select">
            <option value="0">Kapalı</option>
            <option value="3">3 günde bir</option>
            <option value="7">7 günde bir</option>
            <option value="14">14 günde bir</option>
            <option value="30">30 günde bir</option>
          </select>
          <button type="button" class="ayar-btn" id="ay-yedek-hatirlat-kaydet">Kaydet</button>
        </div>
      </div>
    </div>

    <!-- YEDEK AL -->
    <div class="ayar-kart ayar-kart--genis">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <path d="M8 1v9M5 7l3 3 3-3"/>
          <path d="M2 11v2.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V11"/>
        </svg>
        Yedek Al
      </div>
      <div class="ayar-kart-icerik">
        <p class="ayar-aciklama" id="ay-son-yedek-text">Son yedek: —</p>
        <div class="ayar-yedek-butonlar">
          <button type="button" class="ayar-btn ayar-btn--yedek" id="ay-yedek-zip">
            <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" width="12" height="12">
              <path d="M8 1v9M5 7l3 3 3-3"/>
              <path d="M2 11v2.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V11"/>
            </svg>
            .zip İndir
          </button>
        </div>
      </div>
    </div>

    <!-- YEDEK YÜKLE -->
    <div class="ayar-kart ayar-kart--genis">
      <div class="ayar-kart-baslik">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="16" height="16">
          <path d="M8 15V6M5 9l3-3 3 3"/>
          <path d="M2 11v2.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V11"/>
        </svg>
        Yedek Yükle
      </div>
      <div class="ayar-kart-icerik">
        <p class="ayar-aciklama ayar-aciklama--uyari">⚠️ Yükleme mevcut tüm verilerin üzerine yazar. Önce yedek almanız önerilir.</p>
        <div class="ayar-yukle-wrap">
          <label class="ayar-dosya-label" id="ay-yukle-label">
            <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
              <path d="M2 2h5l3 3v5H2z"/>
              <path d="M7 2v3h3"/>
            </svg>
            <span id="ay-yukle-dosya-adi">Dosya seç (.zip)</span>
            <input type="file" id="ay-yukle-input" accept=".zip" style="display:none;">
          </label>
          <button type="button" class="ayar-btn ayar-btn--tehlike" id="ay-yukle-btn" disabled>Yükle ve Geri Yükle</button>
        </div>
      </div>
    </div>

  </div>
</section>
