<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kamulaştırma Değeri Hesaplama Robotu - 2025</title>
<style>
:root {
--brand: #0d3b66;
--brand-600: #0b3256;
--accent: #d4af37;
--bg: #f6f7f9;
--card: #ffffff;
--text: #1b1f24;
--muted: #6b7280;
--ring: #e5e7eb;
--radius: 14px;
--shadow: 0 10px 30px rgba(2, 6, 23, .08);
}
.minar-kam-wrap * {
box-sizing: border-box;
}
.minar-kam-wrap {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color: var(--text);
}
.minar-kam-wrap .card {
background: var(--card);
border: 1px solid var(--ring);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
}
.minar-kam-wrap .grid {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.minar-kam-wrap .grid {
grid-template-columns: 1.15fr .85fr;
}
}
.minar-kam-wrap label {
font-weight: 600;
}
.minar-kam-wrap input[type="number"],
.minar-kam-wrap select {
width: 100%;
padding: 12px;
border: 1px solid var(--ring);
border-radius: 12px;
background: #fff;
font-size: 1rem;
outline: none;
}
.minar-kam-wrap input[type="number"]:focus,
.minar-kam-wrap select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(13, 59, 102, .08);
}
.minar-kam-wrap .chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.minar-kam-wrap .chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--ring);
border-radius: 999px;
background: #fff;
}
.minar-kam-wrap .btn {
border: none;
border-radius: 12px;
padding: 12px 16px;
font-weight: 700;
cursor: pointer;
}
.minar-kam-wrap .btn-primary {
background: var(--brand);
color: #fff;
}
.minar-kam-wrap .btn-primary:hover {
background: var(--brand-600);
}
.minar-kam-wrap .btn-ghost {
background: #fff;
border: 1px solid var(--ring);
}
.minar-kam-wrap .figure {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
border: 1px dashed var(--accent);
border-radius: 16px;
padding: 16px;
}
.minar-kam-wrap .figure b {
font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
}
.minar-kam-wrap .k-breakdown {
display: grid;
gap: 6px;
font-size: .95rem;
}
.minar-kam-wrap .row {
display: flex;
justify-content: space-between;
}
.minar-kam-wrap .muted {
color: var(--muted);
}
.minar-kam-wrap .hr {
height: 1px;
background: linear-gradient(90deg, transparent, var(--ring), transparent);
}
</style>
</head>
<body>
<div class="minar-kam-wrap">
<div class="grid">
<section class="card">
<h2 style="margin-top:0">Kamulaştırma Bedeli Hesaplama</h2>
<form id="minarKamForm" class="grid" style="grid-template-columns:1fr 1fr; gap:14px" novalidate>
<div>
<label for="mk_cins">Taşınmaz Cinsi</label>
<select id="mk_cins" required>
<option value="arsa">Arsa</option>
<option value="tarla">Tarla</option>
</select>
</div>
<div>
<label for="mk_imar">İmar Durumu</label>
<select id="mk_imar" required>
<option value="imarlı">İmarlı</option>
<option value="imarsız">İmarsız</option>
</select>
</div>
<div>
<label for="mk_m2">Yüzölçümü (m²)</label>
<input id="mk_m2" type="number" inputmode="decimal" step="0.01" min="0" placeholder="örn. 1.250" required>
</div>
<div>
<label for="mk_birim">Birim Değer (TL/m²)</label>
<input id="mk_birim" type="number" inputmode="decimal" step="0.01" min="0" placeholder="örn. 5.000" required>
</div>
<div style="grid-column:1/-1">
<label>Değeri Etkileyen Kriterler (opsiyonel)</label>
<div class="chips">
<label class="chip"><input type="checkbox" id="mk_yol"> Merkez yola sınır</label>
<label class="chip"><input type="checkbox" id="mk_turistik"> Turistik bölgeye yakın</label>
<label class="chip"><input type="checkbox" id="mk_imarYakin"> İmar alanına yakın</label>
<label class="chip"><input type="checkbox" id="mk_ekim"> Ekim alanına uygun</label>
<label class="chip"><input type="checkbox" id="mk_sit"> Sit alanına yakın (olumsuz)</label>
</div>
</div>
<div style="grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap">
<button class="btn btn-primary" type="submit">Hesapla</button>
<button class="btn btn-ghost" type="button" id="mk_quick">Hızlı Örnek</button>
<button class="btn btn-ghost" type="button" id="mk_reset">Sıfırla</button>
</div>
</form>
</section>
<section class="card" aria-live="polite" aria-atomic="true">
<h2 style="margin-top:0">Sonuç</h2>
<div class="figure">
<span class="muted">Tahmini Kamulaştırma Bedeli</span>
<b id="mk_sonuc"></b>
</div>
<div class="k-breakdown" id="mk_breakdown" style="display:none">
<div class="row"><span>Temel Bedel</span><strong id="mk_btemel"></strong></div>
<div class="row"><span>İmar Faktörü</span><strong id="mk_bimar"></strong></div>
<div class="row"><span>Kriter Etkisi</span><strong id="mk_bkriter"></strong></div>
<div class="hr"></div>
<div class="row"><span>Nihai</span><strong id="mk_bnihai"></strong></div>
<div class="muted">Not: Ön hesaplama; nihai bedel bilirkişi raporuna tabidir.</div>
</div>
</section>
</div>
</div>
<script>
(function () {
const fmt = new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY', maximumFractionDigits: 2 });
const $ = (s) => document.querySelector(s);
const el = {
form: $('#minarKamForm'),
cins: $('#mk_cins'),
imar: $('#mk_imar'),
m2: $('#mk_m2'),
birim: $('#mk_birim'),
yol: $('#mk_yol'),
turistik: $('#mk_turistik'),
imarYakin: $('#mk_imarYakin'),
ekim: $('#mk_ekim'),
sit: $('#mk_sit'),
sonuc: $('#mk_sonuc'),
bTemel: $('#mk_btemel'),
bImar: $('#mk_bimar'),
bKriter: $('#mk_bkriter'),
bNihai: $('#mk_bnihai'),
breakdown: $('#mk_breakdown'),
quick: $('#mk_quick'),
reset: $('#mk_reset')
};
function parseVal(i) { const v = parseFloat(String(i.value).replace(',', '.')); return Number.isFinite(v) ? v : 0; }
function clamp(n, min, max) { return Math.min(Math.max(n, min), max); }
function kriter() {
let k = 0;
if (el.yol.checked) k += 0.10;
if (el.turistik.checked) k += 0.15;
if (el.imarYakin.checked) k += 0.20;
if (el.ekim.checked) k += 0.05;
if (el.sit.checked) k -= 0.10;
return clamp(k, -0.30, 0.60);
}
function hesapla() {
const m2 = parseVal(el.m2), birim = parseVal(el.birim);
if (m2 <= 0 || birim <= 0) { el.sonuc.textContent = ''; el.breakdown.style.display = 'none'; return; }
const temel = m2 * birim;
const imarF = (el.imar.value === 'imarsız') ? 0.50 : 1.00;
const cinsF = (el.cins.value === 'tarla') ? 0.75 : 1.00;
const k = kriter();
const ara = temel * imarF * cinsF;
const nihai = ara * (1 + k);
el.sonuc.textContent = fmt.format(nihai);
el.bTemel.textContent = fmt.format(temel);
el.bImar.textContent = `${imarF.toFixed(2)}${cinsF !== 1 ? ' × ' + cinsF.toFixed(2) : ''}`;
el.bKriter.textContent = (k >= 0 ? '+' : '') + (k * 100).toFixed(0) + '%';
el.bNihai.textContent = fmt.format(nihai);
el.breakdown.style.display = 'grid';
}
el.form.addEventListener('submit', e => { e.preventDefault(); hesapla(); });
el.form.addEventListener('input', hesapla);
el.quick.addEventListener('click', () => {
el.cins.value = 'arsa'; el.imar.value = 'imarlı'; el.m2.value = '1250'; el.birim.value = '5000';
el.yol.checked = true; el.turistik.checked = false; el.imarYakin.checked = true; el.ekim.checked = false; el.sit.checked = false;
hesapla();
});
el.reset.addEventListener('click', () => { el.form.reset(); el.sonuc.textContent = ''; el.breakdown.style.display = 'none'; el.m2.focus(); });
// İlk yüklemede boş göster
hesapla();
})();
</script>
</body>
</html>