(DHA) – Petrol fiyatları, Petrol İhraç Eden Ülkeler Ördgütü’nün (OPEC) üretim kısıtlamasına gitmesi ve Venezuela’nın petrol ihracatına yönelik ABD yaptırımları etkisi ile 62 doların üzerinde tutundu. Gelişmelerin etkisiyle Türkiye'nin de akaryakıt fiyatlarını belirmede ölçüt olarak kullandığı Brent ham petrolü, yüzde 0.08 düşüşle 62.7 dolardan, ABD hafif petrolü de yüzde 0.24 düşüşle 55.13 dolardan işlem görüyor. Altın fiyatları, ABD ve Çin arsındaki ticaret gerginliği sebebiyle riskten kaçınma eğiliminin azalmasıyla geriledi. Küresel emtia piyasalarında; - gümüş, yüzde 0.63 düşüşle 15.825 dolardan, - altın, yüzde 0.37 düşüşle 1,317.2 dolardan, - bakır, yüzde 0.49 düşüşle 2.7595 dolardan, - platin, yüzde 0.37 düşüşle 823.6 dolardan ve - paladyum da yüzde 0.17 artışla 1,315.8 dolardan işlem görüyor. İç piyasada ise, gram altın fiyatı 220 liraya, çeyrek altın 362 liraya, Cumhuriyet altını da 1,489 liraya döndü. Araç Fiyat Değişimleri Analizi body { font-family: 'Inter', sans-serif; background-color: #1a1a2e; /* Koyu mor-mavi arka plan */ display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; margin: 0; padding: 40px 20px; box-sizing: border-box; color: #e0e0e0; /* Açık gri metin rengi */ } .container { background-color: #1f203a; /* Konteyner arka planı */ border-radius: 25px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Derin gölge */ padding: 50px; width: 100%; max-width: 1200px; /* Geniş konteyner */ text-align: center; border: 1px solid rgba(255, 255, 255, 0.05); /* Hafif beyaz kenarlık */ } h1 { font-family: 'Orbitron', sans-serif; /* Fütüristik font */ font-weight: 700; font-size: 3.5rem; margin-bottom: 50px; text-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.3); /* Neon mavi gölge */ background: linear-gradient(90deg, #00ffff, #8a2be2); /* Başlık gradienti */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .filter-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 40px; } .filter-button { background-color: #3a3b5e; /* Koyu düğme arka planı */ color: #e0e0e0; /* Açık metin */ padding: 12px 25px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .filter-button:hover { background-color: #4a4b6e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .filter-button.active { background: linear-gradient(90deg, #00ff99, #00bfff); /* Aktif düğme gradienti */ color: #1a1a2e; /* Koyu metin */ border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); } .chart-wrapper { background-color: #2a2b4a; /* Grafik alanı arka planı */ border-radius: 20px; padding: 35px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.08); position: relative; height: 600px; /* Grafiğin yüksekliği */ width: 100%; overflow-x: auto; /* Yatay kaydırma */ } canvas { width: 100% !important; height: 100% !important; } @media (max-width: 768px) { body { padding: 20px 10px; } .container { padding: 25px; } h1 { font-size: 2.5rem; } .filter-buttons { flex-direction: column; gap: 10px; } .chart-wrapper { height: 400px; padding: 20px; } } Araç Fiyat Değişimleri Tümü Elektrikli Hibrit Benzinli Dizel // Araç verileri (Manuel olarak ayrıştırılmış ve düzeltilmiştir) const carsData = [ { id: 1, brandModel: "Togg T10X V1 Standart (RWD)", fuelType: "Elektrikli", oldOtv: 10, newOtv: 25, oldPrice: 1505000, newPrice: 1636363, priceChange: 13.6 }, { id: 2, brandModel: "Tesla Model Y Standart Range (RWD)", fuelType: "Elektrikli", oldOtv: 10, newOtv: 25, oldPrice: 1866203, newPrice: 2120684, priceChange: 13.6 }, { id: 3, brandModel: "Mini Cooper Countryman (EV)", fuelType: "Elektrikli", oldOtv: 40, newOtv: 55, oldPrice: 2944900, newPrice: 3260422, priceChange: 10.7 }, { id: 4, brandModel: "Citroën e-C3 83 kW Plus", fuelType: "Elektrikli", oldOtv: 10, newOtv: 25, oldPrice: 1149900, newPrice: 1306704, priceChange: 13.6 }, { id: 5, brandModel: "BYD Atto 3 (Standard Range)", fuelType: "Elektrikli", oldOtv: 10, newOtv: 25, oldPrice: 1710000, newPrice: 1943181, priceChange: 13.6 }, { id: 6, brandModel: "Opel Grandland Elektrik (73 kWh)", fuelType: "Elektrikli", oldOtv: 40, newOtv: 25, oldPrice: 2570000, newPrice: 2294641, priceChange: -10.7 }, { id: 7, brandModel: "Hyundai Ioniq 6 Advance", fuelType: "Elektrikli", oldOtv: 10, newOtv: 25, oldPrice: 1878500, newPrice: 2134660, priceChange: 13.6 }, { id: 8, brandModel: "Toyota Corolla 1.8 Hybrid Vision", fuelType: "Hibrit", oldOtv: 80, newOtv: 70, oldPrice: 2230000, newPrice: 2105000, priceChange: -5.6 }, { id: 9, brandModel: "Toyota C-HR 1.8 Hybrid Advance", fuelType: "Hibrit", oldOtv: 80, newOtv: 75, oldPrice: 2115000, newPrice: 2036000, priceChange: -3.7 }, { id: 10, brandModel: "Renault Duster 1.6 E-Tech Hybrid", fuelType: "Hibrit", oldOtv: 80, newOtv: 70, oldPrice: 2095000, newPrice: 1980000, priceChange: -5.5 }, { id: 11, brandModel: "Honda Civic e:HEV 2.0 Elegance", fuelType: "Hibrit", oldOtv: 130, newOtv: 150, oldPrice: 1400000, newPrice: 1520000, priceChange: 8.6 }, { id: 12, brandModel: "Fiat Egea 1.4 Fire Easy", fuelType: "Benzinli", oldOtv: 80, newOtv: 70, oldPrice: 1104900, newPrice: 1043515, priceChange: -5.6 }, { id: 13, brandModel: "Opel Corsa 1.2 100 HP Edition (M)", fuelType: "Benzinli", oldOtv: 80, newOtv: 70, oldPrice: 1312000, newPrice: 1239110, priceChange: -5.6 }, { id: 14, brandModel: "Renault Clio 1.0 TCe X-Tronic 90 HP", fuelType: "Benzinli", oldOtv: 80, newOtv: 75, oldPrice: 1497000, newPrice: 1455415, priceChange: -2.8 }, { id: 15, brandModel: "Kia Picanto 1.0 63 PS Manuel", fuelType: "Benzinli", oldOtv: 80, newOtv: 70, oldPrice: 1210000, newPrice: 1142142, priceChange: -5.6 }, { id: 16, brandModel: "Hyundai i20 1.2 MPI Jump", fuelType: "Benzinli", oldOtv: 80, newOtv: 70, oldPrice: 1234000, newPrice: 1165443, priceChange: -5.6 }, { id: 17, brandModel: "Volkswagen Polo 1.0 80 PS Manuel", fuelType: "Benzinli", oldOtv: 80, newOtv: 75, oldPrice: 1708000, newPrice: 1660554, priceChange: -2.8 }, { id: 18, brandModel: "Hyundai i10 1.2 MPI 79 HP", fuelType: "Benzinli", oldOtv: 80, newOtv: 70, oldPrice: 1129000, newPrice: 1066276, priceChange: -5.6 }, { id: 19, brandModel: "Ford Puma 1.0 EcoBoost 125 HP", fuelType: "Benzinli", oldOtv: 80, newOtv: 75, oldPrice: 1559800, newPrice: 1516471, priceChange: -2.8 }, { id: 20, brandModel: "Fiat Egea 1.6 Multijet Lounge 130 HP", fuelType: "Dizel", oldOtv: 80, newOtv: 70, oldPrice: 1609900, newPrice: 1523000, priceChange: -5.4 }, { id: 21, brandModel: "Ford Ranger (Base model, 2.0L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 2820200, newPrice: 4067594, priceChange: 44.2 }, { id: 22, brandModel: "Ford Ranger (Full model, 2.0L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 3954100, newPrice: 5703027, priceChange: 44.2 }, { id: 23, brandModel: "VW Amarok (Base model, 2.0L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 2902000, newPrice: 4185576, priceChange: 44.2 }, { id: 24, brandModel: "VW Amarok (Full model, 3.0L V6)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 3312000, newPrice: 4776923, priceChange: 44.2 }, { id: 25, brandModel: "Toyota Hilux (Base model, 2.4L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 2069000, newPrice: 2984133, priceChange: 44.2 }, { id: 26, brandModel: "Toyota Hilux (Full model, 2.8L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 2970000, newPrice: 4283652, priceChange: 44.2 }, { id: 27, brandModel: "SsangYong Musso Grand (Base, 2.2L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 1735000, newPrice: 2502403, priceChange: 44.2 }, { id: 28, brandModel: "SsangYong Musso Grand (Full, 2.2L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 1799412, newPrice: 2595305, priceChange: 44.2 }, { id: 29, brandModel: "Otokar Tundra (Base model, 2.8L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 1065224, newPrice: 2385900, priceChange: 123.9 }, { id: 30, brandModel: "Otokar Tundra (Full model, 2.8L)", fuelType: "Dizel", oldOtv: 4, newOtv: 50, oldPrice: 1956240, newPrice: 2821500, priceChange: 44.2 } ]; // Yakıt tiplerine göre renk paleti const fuelTypeColors = { "Elektrikli": { positive: '#00ff99', negative: '#00bfff' }, // Neon Yeşil / Mavi "Hibrit": { positive: '#a855f7', negative: '#ff66b2' }, // Mor / Pembe "Benzinli": { positive: '#fbbf24', negative: '#ff8c00' }, // Sarı / Turuncu "Dizel": { positive: '#0ea5e9', negative: '#4dd0e1' } // Mavi / Açık Mavi }; let priceChangeChart; // Grafik nesnesi // Grafiği güncelleme fonksiyonu function updateChart(filterFuelType = 'Tümü') { const filteredCars = filterFuelType === 'Tümü' ? carsData : carsData.filter(car => car.fuelType === filterFuelType); // Fiyat değişimine göre sırala (en yüksek değişimden en düşüğe) filteredCars.sort((a, b) => b.priceChange - a.priceChange); const labels = filteredCars.map(car => car.brandModel); const data = filteredCars.map(car => car.priceChange); const backgroundColors = filteredCars.map(car => { const colors = fuelTypeColors[car.fuelType]; return car.priceChange >= 0 ? colors.positive : colors.negative; }); const borderColors = filteredCars.map(car => { const colors = fuelTypeColors[car.fuelType]; return car.priceChange >= 0 ? colors.positive : colors.negative; }); if (priceChangeChart) { priceChangeChart.destroy(); // Mevcut grafiği yok et } const ctx = document.getElementById('priceChangeChart').getContext('2d'); priceChangeChart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Fiyat Değişimi (%)', data: data, backgroundColor: backgroundColors, borderColor: borderColors, borderWidth: 2, borderRadius: 8, // Yuvarlak köşeler hoverBackgroundColor: function(context) { const color = context.dataset.backgroundColor[context.dataIndex]; // Hover'da rengi biraz daha parlak yap return Chart.helpers.color(color).lighten(0.1).rgbString(); }, hoverBorderColor: function(context) { const color = context.dataset.borderColor[context.dataIndex]; return Chart.helpers.color(color).lighten(0.1).rgbString(); } }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', // Yatay çubuk grafik plugins: { title: { display: false }, legend: { display: false }, tooltip: { backgroundColor: 'rgba(30, 30, 50, 0.95)', titleFont: { size: 16, family: 'Orbitron', weight: 'bold' }, bodyFont: { size: 14, family: 'Inter' }, padding: 15, cornerRadius: 12, displayColors: true, borderColor: 'rgba(255, 255, 255, 0.2)', borderWidth: 1, callbacks: { label: function(context) { const car = filteredCars[context.dataIndex]; let label = `${car.brandModel}: ${car.priceChange.toFixed(1)}%`; label += `\nYakıt Tipi: ${car.fuelType}`; label += `\nEski ÖTV: %${car.oldOtv}`; label += `\nYeni ÖTV: %${car.newOtv}`; label += `\nEski Fiyat: ${car.oldPrice.toLocaleString('tr-TR')} TL`; label += `\nYeni Fiyat: ${car.newPrice.toLocaleString('tr-TR')} TL`; return label.split('\n'); // Çok satırlı tooltip için }, title: function(context) { return ''; // Başlık yok } } } }, scales: { x: { grid: { color: 'rgba(255, 255, 255, 0.1)', /* Açık ızgara çizgileri */ drawBorder: false }, ticks: { color: '#a0a0a0', font: { family: 'Inter', size: 12, weight: '600' }, callback: function(value) { return value + '%'; } }, title: { display: true, text: 'Fiyat Değişimi Yüzdesi (%)', color: '#e0e0e0', font: { family: 'Orbitron', size: 16, weight: 'bold' } } }, y: { grid: { display: false, drawBorder: false }, ticks: { color: '#a0a0a0', font: { family: 'Inter', size: 12, weight: '600' } }, title: { display: true, text: 'Araç Modeli', color: '#e0e0e0', font: { family: 'Orbitron', size: 16, weight: 'bold' } } } }, animation: { duration: 1500, easing: 'easeOutExpo' } } }); } // Filtre düğmelerine olay dinleyicileri ekle document.querySelectorAll('.filter-button').forEach(button => { button.addEventListener('click', () => { // Aktif sınıfını kaldır document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active')); // Tıklanan düğmeye aktif sınıfını ekle button.classList.add('active'); // Grafiği filtreye göre güncelle updateChart(button.dataset.filter); }); }); // Sayfa yüklendiğinde ilk grafiği oluştur window.addEventListener('load', () => { updateChart('Tümü'); });