Ham HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karışım ve Seyreltme Oranı Hesaplama - Ücretsiz Araç</title>
<meta name="description" content="Konsantre:su oranını ve toplam hacim, konsantre veya su miktarından birini girin; karışımınızdaki tüm miktarları anında hesaplayın. %100 tarayıcıda çalışır.">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Karışım ve Seyreltme Oranı Hesaplama - Ücretsiz Araç">
<meta property="og:description" content="Konsantre:su oranını girin, toplam hacim, konsantre veya su miktarından birini doldurun; tüm miktarları anında hesaplayın. %100 tarayıcıda çalışır.">
<meta name="theme-color" content="#6366f1">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Karışım ve Seyreltme Oranı Hesaplama Aracı",
"description": "Konsantre:su oranı ile toplam hacim, konsantre miktarı veya su miktarından birini kullanarak bir karışımın tüm bileşen miktarlarını hesaplayan ücretsiz online araç.",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Any",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "TRY" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Seyreltme oranı nedir ve nasıl hesaplanır?",
"acceptedAnswer": { "@type": "Answer", "text": "Seyreltme oranı, bir konsantre maddenin su veya başka bir çözücüyle hangi oranda karıştırılacağını gösterir (örneğin 1:10). Toplam karışım, konsantre parça ile çözücü parçanın toplamına bölünerek her bir bileşenin miktarı bulunur." }
},
{
"@type": "Question",
"name": "1:10 oranı ne anlama gelir?",
"acceptedAnswer": { "@type": "Answer", "text": "1:10 oranı, 1 birim konsantreye karşılık 10 birim su veya çözücü eklenmesi gerektiği anlamına gelir. Toplamda 11 eşit parçadan oluşan bir karışım elde edilir; bu parçalardan 1'i konsantre, 10'u ise çözücüdür." }
},
{
"@type": "Question",
"name": "Toplam hacim yerine sadece elimdeki konsantre miktarını bilsem yine hesaplayabilir miyim?",
"acceptedAnswer": { "@type": "Answer", "text": "Evet. Oranı girdikten sonra Toplam Hacim, Konsantre Miktarı veya Su/Çözücü Miktarı alanlarından yalnızca birini doldurmanız yeterlidir; araç oran bilgisini kullanarak diğer iki değeri otomatik olarak hesaplar." }
},
{
"@type": "Question",
"name": "Bu araç hangi alanlarda kullanılabilir?",
"acceptedAnswer": { "@type": "Answer", "text": "Temizlik malzemesi seyreltme, bahçe gübresi veya ilaçlama karışımı hazırlama, iki zamanlı motor için yakıt-yağ karışımı, boya inceltme ve mutfakta şurup veya içecek karışımları gibi pek çok alanda kullanılabilir." }
}
]
}
</script>
<style>
:root {
--bg:#f5f6fb; --surface:#fff; --surface-2:#f0f2f9; --border:#e3e6f0;
--text:#1d2033; --muted:#6b7089; --primary:#6366f1; --primary-600:#4f46e5;
--primary-soft:#eef0ff; --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
--radius:16px; --shadow:0 10px 30px -12px rgba(30,35,90,.18);
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height:1.55; }
.container { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
header.hero { text-align:center; padding: 28px 0 8px; }
header.hero h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 8px; }
header.hero p { color: var(--muted); margin:0; font-size: 1rem; }
.trust-badge { display:inline-flex; align-items:center; gap:6px; background: var(--primary-soft); color: var(--primary-600); font-size: .8rem; font-weight:600; padding:6px 14px; border-radius:999px; margin-top:12px; }
.ad-slot { min-height: 0; }
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 20px 0; }
.field { margin-bottom: 16px; }
.field label { display:block; font-size: .88rem; font-weight:600; margin-bottom:6px; color: var(--text); }
.field .hint { font-size:.78rem; color: var(--muted); margin-top:4px; }
.section-title { font-size: .78rem; font-weight:700; text-transform: uppercase; letter-spacing:.04em; color: var(--primary-600); margin: 4px 0 12px; }
.divider { border:none; border-top: 1px dashed var(--border); margin: 20px 0; }
input[type="text"] { width:100%; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; font-size: 1rem; color: var(--text); outline:none; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.ratio-row { display:flex; align-items:center; gap: 10px; }
.ratio-row input { text-align:center; }
.ratio-colon { font-size: 1.3rem; font-weight:700; color: var(--muted); }
.btn { width:100%; padding: 14px 20px; border:none; border-radius: 12px; background: var(--primary); color:#fff; font-size: 1rem; font-weight:700; cursor:pointer; transition: background .15s, transform .05s; margin-top: 6px; }
.btn:hover { background: var(--primary-600); }
.btn:active { transform: scale(.99); }
.warning { display:none; background: #fff4e5; border: 1px solid var(--warning); color:#8a5a00; padding: 12px 14px; border-radius: 12px; font-size:.88rem; margin-top: 14px; }
.warning.show { display:block; }
.result { display:none; margin-top: 20px; border-top: 1px dashed var(--border); padding-top: 18px; }
.result.show { display:block; }
.result-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.result-item { background: var(--surface-2); border-radius: 12px; padding: 14px; text-align:center; }
.result-item .label { font-size:.78rem; color: var(--muted); margin-bottom:6px; }
.result-item .value { font-size: 1.15rem; font-weight:700; color: var(--text); }
.result-item.highlight .value { color: var(--primary-600); }
section.seo h2 { font-size: 1.25rem; margin: 28px 0 10px; }
section.seo p { color: var(--text); font-size: .96rem; }
details { background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
summary { cursor:pointer; font-weight:600; font-size:.95rem; }
details p { margin: 10px 0 0; color: var(--muted); font-size:.9rem; }
@media (max-width:480px) { .card { padding:18px; } }
</style>
</head>
<body>
<div class="container">
<header class="hero">
<h1>Karışım ve Seyreltme Oranı Hesaplama Aracı</h1>
<p>Konsantre:su oranınızı girin; toplam hacmi, konsantre veya su miktarını bilin, geri kalanını anında hesaplayın.</p>
<span class="trust-badge">🔒 %100 Tarayıcıda — Veriniz Hiçbir Yere Gönderilmez</span>
</header>
<!-- [reklam:arac-header] -->
<div class="ad-slot"></div>
<main class="card">
<div class="section-title">1. Seyreltme Oranı (Konsantre : Su)</div>
<div class="ratio-row">
<input type="text" inputmode="decimal" id="ratioA" placeholder="1">
<span class="ratio-colon">:</span>
<input type="text" inputmode="decimal" id="ratioB" placeholder="10">
</div>
<div class="hint" style="margin-bottom:16px;">Örn: 1:10 → 1 birim konsantreye 10 birim su.</div>
<hr class="divider">
<div class="section-title">2. Bilinen Değer (Sadece Birini Girin)</div>
<div class="field">
<label for="totalAmount">Toplam Karışım Hacmi</label>
<input type="text" inputmode="decimal" id="totalAmount" placeholder="Örn: 1000">
</div>
<div class="grid">
<div class="field">
<label for="concAmount">Konsantre Miktarı</label>
<input type="text" inputmode="decimal" id="concAmount" placeholder="Örn: 100">
</div>
<div class="field">
<label for="waterAmount">Su / Çözücü Miktarı</label>
<input type="text" inputmode="decimal" id="waterAmount" placeholder="Örn: 900">
</div>
</div>
<div class="field">
<label for="unit">Birim <span style="font-weight:400; color:var(--muted);">(İsteğe Bağlı)</span></label>
<input type="text" id="unit" placeholder="Örn: ml, litre, gram">
</div>
<button class="btn" onclick="hesaplaKarisim()">Hesapla</button>
<div class="warning" id="warningBox"></div>
<div class="result" id="resultBox">
<div class="result-grid">
<div class="result-item highlight">
<div class="label">Konsantre Miktarı</div>
<div class="value" id="resConc">-</div>
</div>
<div class="result-item">
<div class="label">Su / Çözücü Miktarı</div>
<div class="value" id="resWater">-</div>
</div>
<div class="result-item">
<div class="label">Toplam Hacim</div>
<div class="value" id="resTotal">-</div>
</div>
</div>
</div>
</main>
<!-- [reklam:arac-alt] -->
<div class="ad-slot"></div>
<section class="seo">
<h2>Karışım ve Seyreltme Oranı Nedir?</h2>
<p>Karışım ve seyreltme oranı, bir konsantre maddenin su veya başka bir çözücüyle hangi oranda birleştirileceğini gösteren, temizlik ürünlerinden tarım ilaçlarına, yakıt-yağ karışımlarından boya inceltmeye kadar pek çok alanda karşımıza çıkan pratik bir hesaplamadır. Oran genellikle "1:10" gibi iki sayı ile ifade edilir ve bu, 1 birim konsantreye karşılık 10 birim su eklenmesi gerektiği anlamına gelir. Yanlış seyreltme oranı, temizlik ürünlerinde etkisizliğe, tarım ilaçlarında bitkilere zarar vermeye veya motor karışımlarında ciddi arızalara yol açabileceğinden, doğru oranı bilmek ve doğru miktarları hesaplamak önemlidir.</p>
<h2>Nasıl Kullanılır?</h2>
<p>Öncelikle ürün etiketinde veya tarifte belirtilen konsantre:su oranını "Seyreltme Oranı" alanlarına girin (örneğin 1:10 için 1 ve 10). Ardından elinizde bulunan veya hazırlamak istediğiniz "Toplam Karışım Hacmi", "Konsantre Miktarı" ya da "Su / Çözücü Miktarı" alanlarından sadece birini doldurun — hangisini bildiğiniz önemli değildir. "Hesapla" butonuna bastığınızda araç, girdiğiniz orana göre diğer tüm miktarları otomatik olarak hesaplayıp size üç değeri birden gösterir. İsterseniz sonuçların hangi birimde (ml, litre, gram vb.) olduğunu belirtmek için "Birim" alanını da doldurabilirsiniz. Tüm hesaplama tarayıcınızda yapılır, hiçbir veri kaydedilmez veya gönderilmez.</p>
<h2>Sıkça Sorulan Sorular</h2>
<details>
<summary>Seyreltme oranı nedir ve nasıl hesaplanır?</summary>
<p>Seyreltme oranı, bir konsantre maddenin su veya başka bir çözücüyle hangi oranda karıştırılacağını gösterir (örneğin 1:10). Toplam karışım, konsantre parça ile çözücü parçanın toplamına bölünerek her bir bileşenin miktarı bulunur.</p>
</details>
<details>
<summary>1:10 oranı ne anlama gelir?</summary>
<p>1:10 oranı, 1 birim konsantreye karşılık 10 birim su veya çözücü eklenmesi gerektiği anlamına gelir. Toplamda 11 eşit parçadan oluşan bir karışım elde edilir; bu parçalardan 1'i konsantre, 10'u ise çözücüdür.</p>
</details>
<details>
<summary>Toplam hacim yerine sadece elimdeki konsantre miktarını bilsem yine hesaplayabilir miyim?</summary>
<p>Evet. Oranı girdikten sonra Toplam Hacim, Konsantre Miktarı veya Su/Çözücü Miktarı alanlarından yalnızca birini doldurmanız yeterlidir; araç oran bilgisini kullanarak diğer iki değeri otomatik olarak hesaplar.</p>
</details>
<details>
<summary>Bu araç hangi alanlarda kullanılabilir?</summary>
<p>Temizlik malzemesi seyreltme, bahçe gübresi veya ilaçlama karışımı hazırlama, iki zamanlı motor için yakıt-yağ karışımı, boya inceltme ve mutfakta şurup veya içecek karışımları gibi pek çok alanda kullanılabilir.</p>
</details>
</section>
</div>
<script>
function showWarning(msg) {
var box = document.getElementById("warningBox");
box.textContent = msg;
box.classList.add("show");
document.getElementById("resultBox").classList.remove("show");
}
function clearWarning() {
var box = document.getElementById("warningBox");
box.textContent = "";
box.classList.remove("show");
}
function roundNice(value) {
var rounded = Math.round(value * 100) / 100;
if (Number.isInteger(rounded)) return rounded.toString();
return rounded.toFixed(2);
}
function hesaplaKarisim() {
clearWarning();
var ratioA = parseFloat(document.getElementById("ratioA").value.replace(",", "."));
var ratioB = parseFloat(document.getElementById("ratioB").value.replace(",", "."));
if (isNaN(ratioA) || ratioA <= 0 || isNaN(ratioB) || ratioB <= 0) {
showWarning("Lütfen geçerli bir seyreltme oranı girin (her iki kısım da 0'dan büyük olmalı).");
return;
}
var totalRaw = document.getElementById("totalAmount").value.trim();
var concRaw = document.getElementById("concAmount").value.trim();
var waterRaw = document.getElementById("waterAmount").value.trim();
var filledCount = (totalRaw !== "" ? 1 : 0) + (concRaw !== "" ? 1 : 0) + (waterRaw !== "" ? 1 : 0);
if (filledCount === 0) {
showWarning("Lütfen Toplam Hacim, Konsantre Miktarı veya Su/Çözücü Miktarı alanlarından birine değer girin.");
return;
}
if (filledCount > 1) {
showWarning("Lütfen Toplam Hacim, Konsantre Miktarı veya Su/Çözücü Miktarı alanlarından sadece birini doldurun.");
return;
}
var unit = document.getElementById("unit").value.trim();
var suffix = unit ? (" " + unit) : "";
var concentrate, water, total;
if (totalRaw !== "") {
total = parseFloat(totalRaw.replace(",", "."));
if (isNaN(total) || total <= 0) {
showWarning("Lütfen geçerli bir toplam hacim girin (0'dan büyük olmalı).");
return;
}
concentrate = total * (ratioA / (ratioA + ratioB));
water = total - concentrate;
} else if (concRaw !== "") {
concentrate = parseFloat(concRaw.replace(",", "."));
if (isNaN(concentrate) || concentrate <= 0) {
showWarning("Lütfen geçerli bir konsantre miktarı girin (0'dan büyük olmalı).");
return;
}
water = concentrate * (ratioB / ratioA);
total = concentrate + water;
} else {
water = parseFloat(waterRaw.replace(",", "."));
if (isNaN(water) || water <= 0) {
showWarning("Lütfen geçerli bir su/çözücü miktarı girin (0'dan büyük olmalı).");
return;
}
concentrate = water * (ratioA / ratioB);
total = concentrate + water;
}
document.getElementById("resConc").textContent = roundNice(concentrate) + suffix;
document.getElementById("resWater").textContent = roundNice(water) + suffix;
document.getElementById("resTotal").textContent = roundNice(total) + suffix;
document.getElementById("resultBox").classList.add("show");
}
</script>
</body>
</html>