Altın Oran (Golden Ratio) Hesaplama
Ham HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Altın Oran (Golden Ratio) Hesaplama - Ücretsiz Araç</title>
<meta name="description" content="Kısa veya uzun kenar değerini girin; 1.618 altın oranına göre diğer kenarı anında hesaplayın. Tasarım, sanat ve mimaride kullanılır. %100 tarayıcıda çalışır.">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Altın Oran (Golden Ratio) Hesaplama - Ücretsiz Araç">
<meta property="og:description" content="Kısa veya uzun kenar değerini girin; 1.618 altın oranına göre diğer kenarı anında hesaplayın. %100 tarayıcıda çalışır, veri gönderilmez.">
<meta name="theme-color" content="#6366f1">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Altın Oran (Golden Ratio) Hesaplama Aracı",
"description": "Kısa kenar veya uzun kenar değerlerinden birini kullanarak 1.618 altın oranına göre diğer kenarı 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": "Altın oran (Golden Ratio) nedir?",
"acceptedAnswer": { "@type": "Answer", "text": "Altın oran, yaklaşık 1.618 değerine eşit, matematikte phi (φ) ile gösterilen özel bir sayıdır. İki boyut arasındaki oran bu değere eşit olduğunda, görsel olarak dengeli ve estetik açıdan hoş kabul edilen bir ilişki ortaya çıkar." }
},
{
"@type": "Question",
"name": "Altın oran formülü nedir, nasıl hesaplanır?",
"acceptedAnswer": { "@type": "Answer", "text": "Altın oran, bir doğru parçasının (a+b)/a = a/b eşitliğini sağlayacak şekilde iki parçaya bölünmesiyle elde edilir ve bu eşitliği sağlayan oran yaklaşık 1.6180339887'dir. Pratikte kısa kenarı 1.618 ile çarparak uzun kenarı, uzun kenarı 1.618'e bölerek kısa kenarı bulabilirsiniz." }
},
{
"@type": "Question",
"name": "Altın oran hangi alanlarda kullanılır?",
"acceptedAnswer": { "@type": "Answer", "text": "Altın oran; grafik tasarım, logo tasarımı, mimari, fotoğrafçılık kompozisyonu, web ve arayüz tasarımı gibi pek çok alanda görsel dengeyi ve estetik orantıyı sağlamak amacıyla kullanılır. Birçok ünlü sanat eseri ve yapı da bu orana yakın boyutlarda tasarlanmıştır." }
},
{
"@type": "Question",
"name": "Altın oran ile Fibonacci dizisi arasındaki ilişki nedir?",
"acceptedAnswer": { "@type": "Answer", "text": "Fibonacci dizisindeki (1, 1, 2, 3, 5, 8, 13, 21...) ardışık iki sayının birbirine oranı, dizi ilerledikçe altın orana (1.618) giderek yaklaşır. Bu nedenle Fibonacci dizisi ve altın oran doğada ve tasarımda sıkça birlikte anılır." }
}
]
}
</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; }
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; }
.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>Altın Oran (Golden Ratio) Hesaplama Aracı</h1>
<p>Kısa veya uzun kenar değerinizi girin; 1.618 altın oranına göre diğer kenarı anında bulun.</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="grid">
<div class="field">
<label for="shortSide">Kısa Kenar</label>
<input type="text" inputmode="decimal" id="shortSide" placeholder="Örn: 10">
</div>
<div class="field">
<label for="longSide">Uzun Kenar</label>
<input type="text" inputmode="decimal" id="longSide" placeholder="Örn: 16.18">
</div>
</div>
<div class="hint" style="margin-bottom:14px;">Sadece bir kenarı doldurun, diğeri altın orana göre otomatik hesaplanır.</div>
<button class="btn" onclick="hesaplaAltinOran()">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" id="resLabel">Hesaplanan Kenar</div>
<div class="value" id="resValue">-</div>
</div>
<div class="result-item">
<div class="label">Kullanılan Oran (φ)</div>
<div class="value">1.6180</div>
</div>
</div>
</div>
</main>
<!-- [reklam:arac-alt] -->
<div class="ad-slot"></div>
<section class="seo">
<h2>Altın Oran (Golden Ratio) Nedir?</h2>
<p>Altın oran, matematikte phi (φ) sembolüyle gösterilen ve yaklaşık 1.6180339887 değerine eşit olan özel bir sayıdır. Bir doğru parçası, büyük parçanın küçük parçaya oranı, tüm parçanın büyük parçaya oranına eşit olacak şekilde ikiye bölündüğünde ortaya çıkar. Bu oran binlerce yıldır sanat, mimari ve tasarımda görsel denge ve estetik orantı yaratmak için kullanılır; Parthenon'dan Rönesans dönemi tablolarına, modern logo tasarımlarından web arayüzlerine kadar pek çok eserde altın orana yakın boyutlar tercih edilmiştir.</p>
<h2>Nasıl Kullanılır?</h2>
<p>Aracı kullanmak çok basittir: elinizde bilinen bir kenar değeri varsa, bu değeri "Kısa Kenar" veya "Uzun Kenar" alanlarından ilgili olanına girin ve diğer alanı boş bırakın. "Hesapla" butonuna bastığınızda araç, girdiğiniz değeri 1.618 altın oranıyla çarpıp veya bölerek eksik kenarı otomatik olarak hesaplar. Örneğin kısa kenara 10 girerseniz, uzun kenarın yaklaşık 16.18 olması gerektiğini görürsünüz. Bu araç; tasarım kompozisyonları, çerçeve ve kart boyutları veya fotoğraf kırpma oranları belirlerken pratik bir referans sağlar. 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>Altın oran (Golden Ratio) nedir?</summary>
<p>Altın oran, yaklaşık 1.618 değerine eşit, matematikte phi (φ) ile gösterilen özel bir sayıdır. İki boyut arasındaki oran bu değere eşit olduğunda, görsel olarak dengeli ve estetik açıdan hoş kabul edilen bir ilişki ortaya çıkar.</p>
</details>
<details>
<summary>Altın oran formülü nedir, nasıl hesaplanır?</summary>
<p>Altın oran, bir doğru parçasının (a+b)/a = a/b eşitliğini sağlayacak şekilde iki parçaya bölünmesiyle elde edilir ve bu eşitliği sağlayan oran yaklaşık 1.6180339887'dir. Pratikte kısa kenarı 1.618 ile çarparak uzun kenarı, uzun kenarı 1.618'e bölerek kısa kenarı bulabilirsiniz.</p>
</details>
<details>
<summary>Altın oran hangi alanlarda kullanılır?</summary>
<p>Altın oran; grafik tasarım, logo tasarımı, mimari, fotoğrafçılık kompozisyonu, web ve arayüz tasarımı gibi pek çok alanda görsel dengeyi ve estetik orantıyı sağlamak amacıyla kullanılır. Birçok ünlü sanat eseri ve yapı da bu orana yakın boyutlarda tasarlanmıştır.</p>
</details>
<details>
<summary>Altın oran ile Fibonacci dizisi arasındaki ilişki nedir?</summary>
<p>Fibonacci dizisindeki (1, 1, 2, 3, 5, 8, 13, 21...) ardışık iki sayının birbirine oranı, dizi ilerledikçe altın orana (1.618) giderek yaklaşır. Bu nedenle Fibonacci dizisi ve altın oran doğada ve tasarımda sıkça birlikte anılır.</p>
</details>
</section>
</div>
<script>
var PHI = 1.6180339887;
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 * 10000) / 10000;
return rounded.toString();
}
function hesaplaAltinOran() {
clearWarning();
var shortRaw = document.getElementById("shortSide").value.trim();
var longRaw = document.getElementById("longSide").value.trim();
var hasShort = shortRaw !== "";
var hasLong = longRaw !== "";
if (hasShort && hasLong) {
showWarning("Lütfen Kısa Kenar veya Uzun Kenar alanlarından sadece birini doldurun, ikisini birden değil.");
return;
}
if (!hasShort && !hasLong) {
showWarning("Lütfen Kısa Kenar veya Uzun Kenar alanlarından birine bir değer girin.");
return;
}
var resLabel = document.getElementById("resLabel");
var resValue = document.getElementById("resValue");
if (hasShort) {
var shortVal = parseFloat(shortRaw.replace(",", "."));
if (isNaN(shortVal) || shortVal <= 0) {
showWarning("Lütfen geçerli bir kısa kenar değeri girin (0'dan büyük olmalı).");
return;
}
var longResult = shortVal * PHI;
resLabel.textContent = "Hesaplanan Uzun Kenar";
resValue.textContent = roundNice(longResult);
} else {
var longVal = parseFloat(longRaw.replace(",", "."));
if (isNaN(longVal) || longVal <= 0) {
showWarning("Lütfen geçerli bir uzun kenar değeri girin (0'dan büyük olmalı).");
return;
}
var shortResult = longVal / PHI;
resLabel.textContent = "Hesaplanan Kısa Kenar";
resValue.textContent = roundNice(shortResult);
}
document.getElementById("resultBox").classList.add("show");
}
</script>
</body>
</html>
Kategori
Görsel ve Medya Araçları
MMUTLU.CMS
Kurumsal web siteleri için içerik yönetim sistemi.
© 2026 Mutlu DoğruBu site MUTLU.CMS ile yayınlanmaktadır.