/* Ana Konteyner */:root {
--primary: #225c2b; /* Orman Yeşili - Enerji ve Doğa */
--accent: #81b23f; /* Pelet Kahverengi - Hammadde */
--grey-light: #f4f4f4; /* Açık Gri - Arka Plan/Yazı */
--dark-glass: rgba(20, 25, 20, 0.85); /* Çok Koyu Yeşil-Gri Cam */
}.home-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: #1a1a1a; /* Koyu Gri/Siyah Arka Plan */
}/* Slide Genel Yapısı */
.home-slider .slide-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
}.home-slider .slide-item.active {
opacity: 1;
visibility: visible;
z-index: 2;
}/* Arka Plan Görseli */
.home-slider .slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform: scale(1.1);
transition: transform 6s ease-out;
}.home-slider .slide-item.active .slide-bg {
transform: scale(1);
}/* Cam Panel */
.home-slider .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 55%;
height: 100%;
background: var(--dark-glass);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
z-index: 5;
display: flex;
align-items: center;
padding-left: 6%;
border-right: 2px solid rgba(255, 255, 255, 0.05); /* Çok hafif beyaz çizgi */
transform: translateX(-100%);
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}.home-slider .slide-item.active .glass-overlay {
transform: translateX(0);
}/* Yazı İçerikleri */
.home-slider .content {
color: #ffffff; /* Saf Beyaz */
max-width: 550px;
opacity: 0;
transform: translateX(-30px);
transition: all 0.6s ease-out 0.5s;
margin-top: 76px;
}.home-slider .slide-item.active .content {
opacity: 1;
transform: translateX(0);
}.home-slider .content small {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 3px;
color: #70942d; /* Parlak Yeşil Accent */
margin-bottom: 20px;
font-weight: 700;
display: block;
}.home-slider .content .text1 {
font-size: 3.0rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
color: #ffffff;
}.home-slider .content p {
font-size: 16px;
color: #d1d1d1; /* Açık Gri Yazı */
line-height: 1.4;
margin-bottom: 40px;
max-width: 400px;
border-left: 3px solid var(--accent); /* Pelet Kahvesi Kenarlık */
padding-left: 20px;
font-weight: 500;
}.home-slider .cta-btn {
display: inline-block;
padding: 15px 40px;
background: var(--primary); /* Yeşil Buton */
color: white;
text-decoration: none;
font-weight: 400;
text-transform: uppercase;
transition: 0.4s;
font-size: 0.8rem;
letter-spacing: 3px;
}.home-slider .cta-btn:hover {
background: var(--accent); /* Hoverda Pelet Kahvesi */
color: #fff;
transform: translateY(-5px);
}/* Makine Görseli */
.home-slider .machine-visual {
position: absolute;
left: 30%;
top: 60%;
transform: translateY(-40%) scale(0.8);
z-index: 10;
width: 40%;
filter: drop-shadow(0 40px 100px rgba(0, 0, 0, 0.7)); /* Koyu Gölge */
opacity: 0;
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
pointer-events: none;
}.home-slider .machine-visual img{
height: 480px !important;
object-fit: contain;
}.home-slider .slide-item.active .machine-visual {
opacity: 1;
transform: translateY(-50%) scale(1);
}/* Yüzen Animasyon */
.home-slider .slide-item.active .machine-visual img {
animation: floating 6s ease-in-out infinite;
width: 100%;
height: auto;
display: block;
}@keyframes floating {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}/* Navigasyon Dotları - Likit Halka Tasarımı */
.home-slider .slider-dots {
position: absolute;
bottom: 50px;
right: 60px;
z-index: 20;
display: flex;
flex-direction: column; /* Dikey dizilim, daha farklı ve modern bir hava katar */
gap: 20px;
padding: 20px 10px;
}.home-slider .dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.707); /* Soft Gri-Beyaz */
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.4s ease;
border: 1px solid #fff;
}/* Hover Etkisi */
.home-slider .dot:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.2);
}/* Aktif Dot - Enerji Halkası */
.home-slider .dot.active {
background: var(--primary); /* Yeşil Enerji */
transform: scale(1.1);
border-color: var(--primary);
}/* Aktif Dotun Etrafındaki Dönen Soft Halka */
.home-slider .dot.active::before {
content: "";
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 2px solid var(--accent); /* Pelet Kahvesi Halka */
border-radius: 50%;
border-top-color: transparent; /* Halkayı kesikli yaparak dönme efekti verir */
animation: rotate-ring 3s linear infinite;
}/* Aktif Dotun Arkasındaki Soft Parlama */
.home-slider .dot.active::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: var(--primary);
border-radius: 50%;
filter: blur(12px);
opacity: 0.4;
z-index: -1;
animation: soft-pulse 2s ease-in-out infinite;
}/* Animasyonlar */
@keyframes rotate-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}@keyframes soft-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.4);
opacity: 0.1;
}
}/* Mobil için Yatay Dizilime Dönüş */
@media (max-width: 1100px) {
.home-slider .slider-dots {
flex-direction: row;
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
display: none;
}
}/* Mobil Ayarlar */
@media (max-width: 1100px) {
.home-slider .glass-overlay {
width: 100%;
clip-path: none;
background: rgb(20 25 20 / 62%);
padding: 40px;
text-align: center;
justify-content: center;
}.home-slider .content p {
border-left: none;
padding-left: 0;
margin: 0 auto 30px;
color: #ccc;
}
}@media(max-width:1024px){
.home-slider {
height: 90vh;
margin-top: 90px;
}.home-slider .machine-visual{
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0 20px;}.home-slider .machine-visual img {
width: 100%;
height: 300px !important;
object-fit: contain;
padding-bottom: 30px;
}.home-slider .content{
margin-top: 275px;
}.home-slider .content .text1 {
font-size: 30px;
}
}