<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gelişmiş Ödeme Formu</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h2 class="text-2xl font-bold mb-4">Ödeme Bilgileri</h2>
<div class="mb-4">
<label class="block text-gray-700">Tutar Gir</label>
<input type="text" placeholder="₺10.000,00" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<h3 class="font-semibold mb-2">Bankalar</h3>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Ziraat Bankası
</label>
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Ziraat Katılım Bankası
</label>
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Garanti BBVA
</label>
</div>
</div>
<div class="mb-4">
<h3 class="font-semibold mb-2">Taksit Seçenekleri</h3>
<div class="space-y-2">
<label class="flex items-center justify-between">
<span>Tek Çekim</span>
<span>₺10.000,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>2 Taksit</span>
<span>₺10.450,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>3 Taksit</span>
<span>₺10.640,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>4 Taksit</span>
<span>₺10.950,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
</div>
</div>
</div>
<div>
<h2 class="text-2xl font-bold mb-4">Kart Bilgileri</h2>
<div class="mb-4">
<label class="block text-gray-700">Kart Sahibi</label>
<input type="text" placeholder="Ahmet Tekin" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">Kart Numarası</label>
<input type="text" placeholder="1234 5678 9012 3456" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Son Kullanma Tarihi</label>
<input type="text" placeholder="MM/YY" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">Güvenlik No</label>
<input type="text" placeholder="123" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Kart Tipi</label>
<select class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Visa</option>
<option>MasterCard</option>
<option>Troy</option>
</select>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">Ödeme Yap</button>
</div>
</div>
</body>
</html>
teşekkür ederim ama firma birebir aynısı olmak zorunda şeklinde dediği için bu şekilde olmak zorunda :/