Component cookbook

<Button variant="brand" size="lg">Satıcıları gör</Button>

<Button disabled>
  <Loader2 className="size-4 animate-spin" /> Yükleniyor…
</Button>

<Button variant="ghost" className="text-err-ink hover:bg-err-soft">
  <Trash2 className="size-4" /> Kalıcı sil
</Button>

<Badge tone="ok">{offerCount} satıcı</Badge>

<Dialog>
  <DialogTrigger asChild><Button variant="outline">Kaldır</Button></DialogTrigger>
  <DialogContent>
    <DialogTitle>Emin misiniz?</DialogTitle>
    <DialogDescription>Bu işlem geri alınamaz.</DialogDescription>
  </DialogContent>
</Dialog>

<label className="block">
  <span className="block text-xs text-ink-3">IBAN</span>
  <Input className="border-err/40" value={iban} onChange={…} />
  <p className="mt-1 text-xs text-err-ink">Geçersiz IBAN.</p>
</label>

<div className="rounded-lg border border-dashed border-line bg-surface p-12 text-center">
  <Heart className="mx-auto mb-3 size-8 text-ink-3" />
  <p className="font-semibold">Listende ürün yok</p>
</div>

<div className="ps-4 pe-2 ms-auto"> {/* logical, RTL-safe */}
  {/* … */}
</div>