.smart-calc-wrapper, .smart-calc-wrapper * { box-sizing: border-box; }
.smart-calc-wrapper { font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 850px; margin: 20px auto; color: #333; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; width: 95%; }
.smart-calc-header { background: #ffffff; padding: 30px 20px; text-align: center; border-bottom: 2px solid #f8f9fa; }
.smart-calc-body { padding: 25px; }
.calc-box { background: #fcfcfc; padding: 20px; border-radius: 15px; border: 1px solid #eee; }
/* Grid yapısı: Malzeme - Birim - Miktar */
.calc-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.input-field { display: flex; flex-direction: column; gap: 8px; }
.input-field label { font-size: 0.75rem; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.input-field select, .input-field input { padding: 12px; border: 2px solid #eee; border-radius: 10px; font-size: 1rem; outline: none; transition: 0.3s; background: #fff; width: 100%; }
.input-field input:focus { border-color: #2c3e50; background: #fff; }
.input-field input::placeholder { color: #aaa; font-style: italic; font-size: 0.9rem; }
.result-display { background: #2c3e50; color: #fff; padding: 25px 15px; border-radius: 15px; text-align: center; margin-top: 15px; }
.res-label { font-size: 0.9rem; opacity: 0.7; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.res-card { background: rgba(255,255,255,0.05); padding: 15px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.res-card .val { display: block; font-size: 1.8rem; font-weight: bold; color: #2ecc71; line-height: 1.2; }
.res-card .unit { display: block; font-size: 0.8rem; opacity: 0.8; margin-top: 5px; font-weight: bold; }
.smart-seo { margin-top: 40px; border-top: 1px solid #eee; padding-top: 25px; }
.smart-seo h3 { color: #2c3e50; font-size: 1.2rem; margin-bottom: 15px; }
.smart-seo p { color: #555; line-height: 1.6; margin-bottom: 15px; font-size: 0.95rem; }
.quick-ref { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ref-tag { background: #f0f2f5; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; color: #444; border: 1px solid #e1e4e8; font-weight: 500; }
.single-cta { display: block; text-align: center; background: #2c3e50; color: #fff !important; text-decoration: none !important; padding: 18px; border-radius: 12px; font-weight: bold; font-size: 1.1rem; margin-top: 25px; transition: 0.3s; border: none; width: 100%; cursor: pointer; }
@media (max-width: 650px) {
.smart-calc-header { padding: 25px 15px; }
.smart-calc-body { padding: 15px; }
.calc-row { grid-template-columns: 1fr; gap: 10px; }
.res-grid { grid-template-columns: 1fr; }
.res-card .val { font-size: 1.6rem; }
}
Profesyonel Mutfak Dönüştürücü
Malzemelerinizi saniyeler içinde ev ölçülerine çevirin.
Malzeme
Su / Süt / Yoğurt
Un
Toz Şeker
Sıvı Yağ
Tereyağı
Pudra Şekeri
İrmik / Bulgur
Birim Seçin
Gram (gr)
Mililitre (ml)
Su Bardağı
Yemek Kaşığı
Miktar
Sonuçlar:
0
SU BARDAĞI
0
YEMEK KAŞIĞI
Mutfakta Ölçü Rehberi
1 su bardağı un kaç gram? gibi soruların cevabı malzemeye göre değişir. Un hafiftir (125gr), şeker ise yoğundur (200gr). Dönüştürücümüz bu yoğunluk farklarını otomatik hesaplar.
1 Su Bardağı Un: 125 gr
1 Su Bardağı Şeker: 200 gr
1 Yemek Kaşığı Tereyağı: 16 gr
1 Su Bardağı Süt: 200 ml
Hassas Çelik Mutfak Gereçlerini Keşfedin
const data = {
water: { cup: 200, tbsp: 15 },
flour: { cup: 125, tbsp: 10 },
sugar: { cup: 200, tbsp: 15 },
oil: { cup: 190, tbsp: 14 },
butter: { cup: 220, tbsp: 16 },
pudra: { cup: 120, tbsp: 9 },
irmik: { cup: 170, tbsp: 12 }
};
// Birim değişince miktar kutusundaki placeholder'ı değiştirir
function updatePlaceholder() {
const unit = document.getElementById('fromUnit').value;
const input = document.getElementById('inputVal');
const placeholders = {
'gr': 'Kaç gram?',
'ml': 'Kaç ml?',
'cup': 'Kaç bardak?',
'tbsp': 'Kaç kaşık?'
};
input.placeholder = placeholders[unit] || "Miktar girin";
}
function doConvert() {
const food = document.getElementById('foodType').value;
const val = parseFloat(document.getElementById('inputVal').value) || 0;
const unit = document.getElementById('fromUnit').value;
const foodName = document.getElementById('foodType').options[document.getElementById('foodType').selectedIndex].text;
let grams = 0;
// Gram Normalizasyonu
if (unit === 'gr') grams = val;
else if (unit === 'ml') grams = (val / 200) * data[food].cup;
else if (unit === 'cup') grams = val * data[food].cup;
else if (unit === 'tbsp') grams = val * data[food].tbsp;
const resLabel = document.getElementById('resLabel');
const v1 = document.getElementById('resVal1');
const u1 = document.getElementById('resUnit1');
const v2 = document.getElementById('resVal2');
const u2 = document.getElementById('resUnit2');
const unitText = document.getElementById('fromUnit').options[document.getElementById('fromUnit').selectedIndex].text;
resLabel.innerText = val > 0 ? `${val} ${unitText} ${foodName} Karşılığı:` : "Lütfen bir miktar girin:";
if (unit === 'gr' || unit === 'ml') {
v1.innerText = (grams / data[food].cup).toFixed(1);
u1.innerText = "SU BARDAĞI";
v2.innerText = (grams / data[food].tbsp).toFixed(1);
u2.innerText = "YEMEK KAŞIĞI";
} else {
v1.innerText = Math.round(grams);
u1.innerText = "GRAM (GR)";
v2.innerText = Math.round((grams / data[food].cup) * 200);
u2.innerText = "MİLİLİTRE (ML)";
}
}
// Sayfa açıldığında placeholder'ı ve ilk değerleri ayarla
window.onload = () => {
updatePlaceholder();
doConvert();
};