<dialog class="modal">
  <div class="modal-box">
    <div class="modal-header">
      <h2>Title</h2>
      <button class="modal-close" aria-label="Kapat">✕</button>
    </div>
    <div class="modal-body">
      <p>Modal content goes here.</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost">Cancel</button>
      <button class="btn btn-primary">Onayla</button>
    </div>
  </div>
</dialog>

<style>
dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.modal-box { background: var(--surface); border-radius: 1rem; padding: 1.5rem; min-width: 420px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
</style>