@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap");.slider-container {
position: relative;
width: 100%;
height: 100vh;
background-color: #333;
overflow: hidden;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: center;
justify-content: center; /* Slayt içeriğini yatayda ortalar */
}/* Görselin üzerine metnin daha iyi okunması için hafif karartma (overlay) */
.slider-container .slide::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(
0,
0,
0,
0.2
); /* Siyahlık oranını artırıp azaltabilirsiniz */
z-index: 2;
}.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}.slider-container .slide.active {
opacity: 1;
z-index: 5;
}/* Container ayarları */
.slider-container .container {
position: relative;
z-index: 10; /* Overlay ve resmin üstünde kalması için */
width: 100%;
display: flex;
justify-content: center;
}.slider-container .slide .textic {
max-width: 900px;
text-align: center; /* Metinleri kendi içinde ortalar */
color: #fff;
text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); /* Resim üzerinde okunabilirliği artırır */
}/* --- EFEKT BAŞLANGICI (İlk başta gizli ve aşağıda) --- */
.slider-container .slide .textic .text1,
.slider-container .slide .textic .text2,
.slider-container .slide .textic .btn {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}/* Slayt aktif olduğunda efektler tetiklenir */
.slider-container .slide.active .textic .text1 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s; /* Başlık gecikmesi */
}.slider-container .slide.active .textic .text2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.6s; /* Alt başlık gecikmesi */
}.slider-container .slide.active .textic .btn {
opacity: 1;
transform: translateY(0);
transition-delay: 0.9s; /* Buton gecikmesi */
}
/* --- EFEKT BİTİŞİ --- *//* Tipografi (Görseldeki gibi şık bir görünüm için) */
.slider-container .slide .textic .text1 {
display: block;
font-style: italic; /* Görseldeki gibi eğik yazı */
font-size: 85px;
font-weight: 500;
line-height: 1.1;
margin-bottom: 15px;
}.slider-container .slide .textic .text2 {
display: block;
font-size: 32px;
font-weight: 400;
margin-bottom: 30px;
}/* Butonun ortalanması ve stili (Eğer buton varsa) */
.slider-container .slide .textic .btn {
display: inline-block;
padding: 12px 30px;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
transition:
0.3s background,
0.3s color;
}.slider-container .slide .textic .btn:hover {
background-color: #fff;
color: #000;
}/* Ok Butonları */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.4);
fill: #fff;
border: none;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%; /* Okları yuvarlak yapar, daha şık durur */
z-index: 20;
transition: background-color 0.3s ease;
height: 50px;
width: 50px;
}.slider-container .slider-btn svg {
width: 24px;
height: 24px;
}.slider-container .slider-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}.slider-container .prev-btn {
left: 30px;
}.slider-container .next-btn {
right: 30px;
}/* Mobil Uyumluluk (Telefonlarda yazılar taşmasın diye) */
@media (max-width: 768px) {
.slider-container .slide .textic .text1 {
font-size: 45px;
}
.slider-container .slide .textic .text2 {
font-size: 20px;
}
.slider-container .slider-btn {
height: 40px;
width: 40px;
}
.slider-container .prev-btn {
left: 10px;
}
.slider-container .next-btn {
right: 10px;
}
}/* Mobil ve Tablet Uyumluluğu (Geliştirilmiş) */
@media (max-width: 992px) {
.slider-container .slide .textic .text1 {
font-size: 60px; /* Tablet için biraz küçültme */
}
}@media (max-width: 768px) {
/* Genel Konteyner Ayarı */
.slider-container {
height: 50vh; /* Mobil tarayıcı barlarını dikkate alan yeni birim */
}/* Yazı Alanı Genişliği ve Boşluğu */
.slider-container .slide .textic {
width: 90%;
padding: 0 20px;
}/* Ana Başlık (Şık ve dengeli) */
.slider-container .slide .textic .text1 {
font-size: 42px; /* Çok büyük olup ekranı boğmaması için */
line-height: 1.2;
margin-bottom: 10px;
letter-spacing: -1px; /* Daha modern bir görünüm */
}/* Alt Başlık */
.slider-container .slide .textic .text2 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 25px;
font-weight: 300;
opacity: 0.9; /* Hafif transparanlık daha lüks durur */
}/* Buton (Mobilde daha kolay tıklanabilir) */
.slider-container .slide .textic .btn {
padding: 10px 25px;
font-size: 14px;
letter-spacing: 1px;
border-width: 1.5px; /* Çizgiyi biraz kalınlaştırarak belirginleştiriyoruz */
}/* Ok Butonları (Mobilde parmak ucuyla daha rahat kullanım) */
.slider-container .slider-btn {
height: 44px;
width: 44px;
background-color: rgba(255, 255, 255, 0.1); /* Koyu yerine hafif transparan beyaz */
backdrop-filter: blur(5px); /* Modern cam efekti */
border: 1px solid rgba(255, 255, 255, 0.2);
}.slider-container .prev-btn {
left: 15px;
}.slider-container .next-btn {
right: 15px;
}/* Alt kısımdaki karartmayı mobilde bir tık artırabiliriz (Okunabilirlik için) */
.slider-container .slide::after {
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.5) 100%
);
}
}/* Çok küçük telefonlar için ekstra ayar (iPhone SE vs.) */
@media (max-width: 400px) {
.slider-container .slide .textic .text1 {
font-size: 34px;
}
.slider-container .slide .textic .text2 {
font-size: 16px;
}
.slider-container .slider-btn {
display: none; /* Çok küçük ekranlarda okları gizleyip swipe (kaydırma) önerilebilir */
}
}