/* Genel Konteyner */
.slider-container {
position: relative;
width: 100%;
height: 70vh;
background-color: #1a1a1a;
overflow: hidden;
margin-top: 80px;
}/* Slayt Yapısı */
.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition:
opacity 0.8s ease-in-out,
visibility 0.8s;
display: flex;
align-items: center;
}/* Slayt Aktif Olduğunda */
.slider-container .slide.active {
opacity: 1;
visibility: visible;
}/* Arka Plan Resmi */
.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}/* YENİ: Resim ve Yazı Arasındaki Kurumsal Karartma (Overlay) */
.slider-container .slide::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Soldan sağa doğru açılan kurumsal lacivert/siyah geçiş */
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.85) 0%,
rgba(15, 23, 42, 0.4) 50%,
rgba(15, 23, 42, 0.1) 100%
);
z-index: 2;
}/* Metin Alanı Konteyneri */
.slider-container .slide .textic {
max-width: 500px;
position: relative;
z-index: 3; /* Karartmanın üzerinde durması için */
color: #ffffff;
padding: 0 0%; /* Ekranın kenarına yapışmasını engeller */
}/* Başlık (Text 1) */
.slider-container .slide .textic .text1 {
display: block;
font-size: 36px; /* Biraz daha büyük ve dikkat çekici */
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
font-family: var(--font1);
transform: translateY(30px);
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; /* Gecikmeli yumuşak geliş */
}/* Açıklama Metni (Text 2) */
.slider-container .slide .textic .text2 {
display: block;
font-size: 17px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 50px;
color: rgba(255, 255, 255, 0.85); /* Tam beyaz değil, göz yormaz */
transform: translateY(30px);
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; /* Başlıktan sonra gelir */
}/* Slayt aktif olduğunda yazıları yukarı kaydırıp görünür yap */
.slider-container .slide.active .textic .text1,
.slider-container .slide.active .textic .text2 {
transform: translateY(0);
opacity: 1;
}/* Yönlendirme Butonları (Daha Soft ve Modern) */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px); /* Cam efekti - blur */
-webkit-backdrop-filter: blur(8px);
color: #fff;
fill: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%; /* Tam yuvarlak - kurumsal ve soft */
z-index: 10;
transition: all 0.4s ease;
height: 50px;
width: 50px;
}.slider-container .slider-btn:hover {
background-color: #ffffff;
color: #0f172a; /* Üzerine gelince buton beyaz, ikon/yazı koyu lacivert olur */
fill: #0f172a;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}.slider-container .prev-btn {
left: 1%;
}.slider-container .next-btn {
right: 1%;
}/* Buton Grubu Konteyneri ve Animasyon Başlangıç Durumu */
.slider-container .slide .textic .btn-group {
display: flex;
gap: 15px; /* Butonlar arası boşluk */
margin-top: 30px; /* Yazı ile buton arası boşluk *//* Animasyon Hazırlığı: Aşağıda ve görünmez bekle */
transform: translateY(30px);
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s; /* Text1(0.3s) ve Text2(0.5s)'den sonra gelir (0.7s) */
}/* Slayt aktif olduğunda butonları yukarı kaydırıp görünür yap */
.slider-container .slide.active .textic .btn-group {
transform: translateY(0);
opacity: 1;
}/* Genel Buton Stilleri */
.slider-container .slide .textic .btn {
display: inline-block;
padding: 12px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 5px; /* Görseldeki gibi hafif yuvarlak köşeler */
text-decoration: none;
text-align: center;
transition: all 0.3s ease; /* Hover için yumuşak geçiş */
cursor: pointer;
}/* Sol Buton: Dolgulu (Primary) */
.slider-container .slide .textic .btn-primary {
background-color: #eab308; /* Görseldeki açık mavi/cyan tonu */
color: #041222; /* İçindeki yazı kurumsal koyu renk */
border: 2px solid #eab308;
}/* Sol Buton Hover (Üzerine gelince) */
.slider-container .slide .textic .btn-primary:hover {
background-color: #cb9905; /* Rengi hafif açılır */
border-color: #cb9905;
transform: translateY(-3px); /* Hafif havaya kalkar */
}/* Sağ Buton: Dış Çizgili (Outline) */
.slider-container .slide .textic .btn-outline {
background-color: transparent;
color: #ffffff; /* Beyaz yazı */
border: 2px solid #eab308; /* Mavi çerçeve */
}/* Sağ Buton Hover (Üzerine gelince) */
.slider-container .slide .textic .btn-outline:hover {
background-color: #eab308; /* İçi mavi dolar */
color: #041222; /* Yazı koyulaşır */
transform: translateY(-3px); /* Hafif havaya kalkar */
box-shadow: 0 6px 15px rgba(0, 180, 235, 0.3); /* Mavi soft gölge parlaması */
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.slider-container .slide .textic .btn-group {
flex-direction: column; /* Mobilde butonlar alt alta gelsin */
gap: 12px;
}
.slider-container .slide .textic .btn {
width: 100%; /* Mobilde tam ekran genişliği */
}
}/* Mobil Uyumluluk (Responsive dokunuşlar) */
@media (max-width: 768px) {
.slider-container {
height: 60vh;
}
.slider-container .slide .textic {
padding: 0 12%;
}
.slider-container .slide .textic .text1 {
font-size: 28px;
}
.slider-container .slide .textic .text2 {
font-size: 15px;
}
.slider-container .slider-btn {
height: 40px;
width: 40px;
font-size: 16px;
}
}