:root {
–primary: #0070D1;
–cta: #F59E0B;
–cta-hover: #D97706;
–text-main: #1F2937;
–text-sub: #6B7280;
–white: #FFFFFF;
–bg-gray: #F9FAFB;
–border: #E5E7EB;
}
/* ANA KAPSAYICI */
.hero-center-wrapper {
font-family: ‘Inter’, sans-serif;
background-color: var(–bg-gray);
width: 100%;
min-height: 500px; /* Rahat bir yükseklik */
display: flex;
flex-direction: column;
align-items: center; /* Yatay ortalama */
justify-content: center; /* Dikey ortalama */
padding: 40px 20px;
text-align: center; /* Metinleri ortala */
}
.hero-content-center {
max-width: 800px; /* İçeriğin çok yayılmasını engelle */
width: 100%;
}
/* Başlıklar */
h1 {
font-size: 3rem;
font-weight: 800;
color: var(–text-main);
margin-bottom: 15px;
line-height: 1.2;
}
h1 span { color: var(–primary); }
.subtitle {
font-size: 1.1rem;
color: var(–text-sub);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* MERKEZİ ARAMA ÇUBUĞU */
.center-search-bar {
background: var(–white);
padding: 10px;
border-radius: 60px; /* Hap Şekli */
box-shadow: 0 15px 35px rgba(0,0,0,0.08);
border: 1px solid var(–border);
display: flex;
align-items: center;
width: 100%;
max-width: 750px; /* Çubuğun maksimum genişliği */
margin: 0 auto; /* Ortala */
transition: transform 0.3s, box-shadow 0.3s;
}
.center-search-bar:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
/* Input Alanları */
.c-input-group {
flex: 1;
padding: 10px 25px;
text-align: left;
}
.c-input-group label {
display: block;
font-size: 0.75rem;
font-weight: 800;
color: var(–text-main);
letter-spacing: 0.5px;
margin-bottom: 4px;
text-transform: uppercase;
}
.c-select-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.c-select-wrapper i { color: var(–primary); font-size: 1.1rem; }
select {
width: 100%;
border: none;
background: transparent;
font-size: 1rem;
font-weight: 500;
color: var(–text-sub);
outline: none;
cursor: pointer;
}
/* Ayırıcı Çizgi */
.c-divider {
width: 1px;
height: 45px;
background-color: var(–border);
}
/* Buton */
.c-search-btn {
background-color: var(–cta);
color: var(–white);
border: none;
height: 60px; /* Biraz daha büyük buton */
padding: 0 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
margin-left: 10px;
white-space: nowrap;
}
.c-search-btn:hover {
background-color: var(–cta-hover);
transform: scale(1.05);
}
/* Güven İkonları */
.center-trust {
margin-top: 40px;
display: flex;
gap: 30px;
justify-content: center;
font-weight: 600;
color: var(–text-sub);
}
.center-trust i { color: #10B981; margin-right: 8px; }
/* MOBİL */
@media (max-width: 768px) {
.center-search-bar { flex-direction: column; border-radius: 24px; padding: 20px; gap: 15px; }
.c-divider { display: none; }
.c-input-group { width: 100%; border-bottom: 1px solid var(–border); padding: 15px 5px; }
.c-input-group:last-of-type { border-bottom: none; }
.c-search-btn { width: 100%; border-radius: 12px; margin: 0; }
h1 { font-size: 2.2rem; }
}
const cData = {
istanbul: [“Kadıköy”, “Beşiktaş”, “Şişli”, “Üsküdar”],
ankara: [“Çankaya”, “Keçiören”, “Yenimahalle”],
izmir: [“Konak”, “Karşıyaka”, “Bornova”]
};
const cCitySelect = document.getElementById(“c-city”);
const cDistrictSelect = document.getElementById(“c-district”);
function loadCenterDistricts() {
const selectedCity = cCitySelect.value;
cDistrictSelect.innerHTML = ‘‘;
if (selectedCity && cData[selectedCity]) {
cData[selectedCity].forEach(district => {
const option = document.createElement(“option”);
option.value = district.toLowerCase();
option.textContent = district;
cDistrictSelect.appendChild(option);
});
cDistrictSelect.disabled = false;
} else {
cDistrictSelect.disabled = true;
}
}
function centerSearch() {
if (cCitySelect.value && cDistrictSelect.value) {
alert(“Aranıyor…”);
} else {
alert(“Lütfen bir konum seçin.”);
}
}
Eğlenceyi Evinize Getirin.
Türkiye’nin en güvenilir konsol kiralama platformu. Bölgeni seç, hijyenik ve oyun yüklü cihaz kapına gelsin.
%100 Güvenli
Hızlı Teslimat