/* ==================================================
MÜKEMMEL ŞIKLIKTA SLIDER TASARIMI
================================================== *//* Ana Kapsayıcı */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #0d0d0d;
}.slider-container * {
box-sizing: border-box;
}/* Slayt Genel Yapısı */
.slider-container .slider-wrapper {
position: relative;
width: 100%;
height: 100%;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
opacity: 0;
visibility: hidden;
z-index: 1;
transition: opacity 0.8s ease, visibility 0.8s ease;
}.slider-container .slide.active {
opacity: 1;
visibility: visible;
z-index: 5;
}/* Sol Panel (Siyah Şık Alan) */
.slider-container .slide-left-panel {
width: 35%;
height: 100%;
background-color: #0d0d0d; /* Derin Siyah */
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 6%;
padding-right: 4%;
z-index: 10;
}/* 995633 Rengi ile Perde (Reveal) Animasyonu */
.slider-container .slide-left-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #995633;
z-index: 20;
transform: scaleY(1);
transform-origin: top;
transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
}.slider-container .slide.active .slide-left-panel::after {
transform: scaleY(0);
transform-origin: bottom;
transition-delay: 0.2s;
}/* Blueprint Efekti (995633 Tonunda Zarif Çizgiler) */
.slider-container .blueprint-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient(rgba(153, 86, 51, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(153, 86, 51, 0.15) 1px, transparent 1px);
background-size: 40px 40px;
}/* Sağ Panel (Görsel Bölümü) */
.slider-container .slide-right-panel {
width: 65%;
height: 100%;
position: relative;
overflow: hidden;
}/* Arka Plan Görseli Zoom Animasyonu */
.slider-container .slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform: scale(1.15);
transition: transform 7s cubic-bezier(0.25, 1, 0.5, 1);
}.slider-container .slide.active .slide-bg {
transform: scale(1);
}/* Siyahlık ile Fotoğrafı Kaynaştıran Geçiş Perdesi */
.slider-container .slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #0d0d0d 0%, rgba(13, 13, 13, 0.4) 30%, transparent 100%);
z-index: 2;
}/* İçerik Düzeni ve Sıra Sıra Gelen Animasyonlar */
.slider-container .slide-content {
position: relative;
z-index: 25; /* Perdenin üstünde kalmalı */
}.slider-container .slide-text-wrapper {
position: relative;
margin-top: 0;
}/* Su Damgası Numaratör */
.slider-container .slide-counter {
font-size: 130px;
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1px rgba(153, 86, 51, 0.2);
position: absolute;
top: -85px;
left: -20px;
line-height: 1;
pointer-events: none;
z-index: -1;
opacity: 0;
transform: translateY(-20px);
transition: all 0.8s ease;
}/* Başlık */
.slider-container .title {
font-size: 42px;
line-height: 1.15;
color: #ffffff;
font-weight: 700;
margin-bottom: 25px;
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
font-family: var(--font2);
}/* Açıklama */
.slider-container .description2 {
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
font-size: 16px;
font-weight: 400;
margin-bottom: 40px;
max-width: 95%;
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}/* Buton Konteyner */
.slider-container .about-one__button {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}/* SIRA SIRA GELME EFEKTLERİ (Gecikmeli) */
.slider-container .slide.active .slide-counter {
opacity: 1; transform: translateY(0); transition-delay: 0.6s;
}
.slider-container .slide.active .title {
opacity: 1; transform: translateY(0); transition-delay: 0.8s;
}
.slider-container .slide.active .description2 {
opacity: 1; transform: translateY(0); transition-delay: 1.0s;
}
.slider-container .slide.active .about-one__button {
opacity: 1; transform: translateY(0); transition-delay: 1.2s;
}/* Premium Buton Tasarımı */
.slider-container .get-in-touch-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: transparent;
border: 1px solid #995633;
color: #995633;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 32px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}.slider-container .get-in-touch-btn::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0%; height: 100%;
background-color: #995633;
transition: width 0.4s ease;
z-index: -1;
}.slider-container .get-in-touch-btn:hover {
color: #ffffff;
border-color: #995633;
}.slider-container .get-in-touch-btn:hover::before {
width: 100%;
}.slider-container .btn-arrow {
width: 16px;
height: 16px;
fill: none;
transition: transform 0.3s ease;
}.slider-container .get-in-touch-btn:hover .btn-arrow {
transform: translateX(4px);
}/* Ortak Alandaki Kutu (7/24 Call Us) - Görselin üzerine taşan premium kutu */
.slider-container .slide-call-box {
position: absolute;
bottom: -60px;
right: 0px; /* Siyah panelden görselin üstüne taşar */
background-color: #995633; /* İstenen Renk */
padding: 30px 30px;
z-index: 30;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
font-family: var(--font2);
}.slider-container .slide.active .slide-call-box {
opacity: 1;
transform: translateY(-50%) translateX(0);
transition-delay: 1.4s; /* En son bu kutu gelir */
}.slider-container .call-tag {
color: rgba(255, 255, 255, 0.8);
font-size: 11px;
font-weight:500;
letter-spacing: 2px;
text-transform: uppercase;
}.slider-container .call-number {
color: #ffffff;
font-size: 22px;
font-weight:700;
text-decoration: none;
transition: color 0.3s ease;
}/* ==================================================
KONTROLLER (SOL ALTTA BİRLEŞTİRİLDİ)
================================================== */
.slider-container .slider-controls {
position: absolute;
bottom: 50px;
left: 6%; /* Sol panelin başlama hizasıyla aynı */
display: flex;
gap: 10px;
z-index: 50;
}.slider-container .prev-btn,
.slider-container .next-btn {
width: 48px;
height: 48px;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
padding: 0;
}.slider-container .prev-btn:hover,
.slider-container .next-btn:hover {
background-color: #995633;
border-color: #995633;
}.slider-container .nav-arrow-icon {
width: 20px;
height: 20px;
}/* Slider Noktaları (Dots) - Okların hemen yanına taşındı */
.slider-container .slider-dots {
position: absolute;
bottom: 64px; /* Oklarla ortalanması için ayarlandı */
left: calc(6% + 120px); /* Okların genişliğinden sonra gelir */
display: flex !important; /* HTML'deki d-none sınıfını ezmek için */
gap: 12px;
z-index: 50;
align-items: center;
}.slider-container .slider-dots .dot {
width: 30px;
height: 2px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}.slider-container .slider-dots .dot.active {
width: 50px;
background-color: #995633;
}/* ==================================================
MOBİL VE TABLET UYUMU (RESPONSIVE)
================================================== */
@media (max-width: 1199px) {
.slider-container .slide-left-panel {
width: 45%;
}
.slider-container .slide-right-panel {
width: 55%;
}
.slider-container .slide-call-box {
right: -80px;
}
.slider-container .title {
font-size: 42px;
}
}@media (max-width: 991px) {
.slider-container .slide {
flex-direction: column;
}
.slider-container .slide-left-panel {
width: 100%;
height: 55%;
padding: 40px 6%;
}
.slider-container .slide-right-panel {
width: 100%;
height: 45%;
}
.slider-container .slide-call-box {
top: auto;
bottom: -25px; /* Fotoğrafın altına sarkma */
right: 6%;
transform: translateY(0) translateX(0);
}
.slider-container .slide.active .slide-call-box {
transform: translateY(0) translateX(0);
}
.slider-container .slider-controls {
bottom: auto;
top: 30px;
right: 6%;
left: auto;
}
.slider-container .slider-dots {
bottom: 30px;
left: 6%;
}
}@media (max-width: 575px) {
.slider-container .title {
font-size: 32px;
margin-bottom: 15px;
}
.slider-container .slide-counter {
font-size: 90px;
top: -60px;
}
.slider-container .description2 {
font-size: 14px;
margin-bottom: 25px;
}
.slider-container .slide-call-box {
padding: 20px 25px;
right: 0;
bottom: 0;
width: 100%;
}
.slider-container .call-number {
font-size: 20px;
}
.slider-container .slider-controls {
top: auto;
bottom: 120px;
left: 6%;
right: auto;
}
.slider-container .slider-dots {
display: none !important; /* Mobilde yer darlığından noktalar gizlendi */
}
.slider-container .slide-left-panel {
height: 60%;
}
.slider-container .slide-right-panel {
height: 40%;
}
}