.stats-section {
background-color: #f7f7f7;
padding: 100px 0;
overflow: hidden;
color: #1a1a1a;
}.stats-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: flex-start;
padding: 0 5%;
position: relative;
}.stats-left {
width: 45%;
padding-right: 5%;
z-index: 2;
padding-top: 2rem;
}.overline {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #a98747;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}.overline::after {
content: "";
display: block;
width: 30px;
height: 2px;
background-color: #a98747;
margin-top: 10px;
}.stats-left h2 {
font-size: 3rem;
font-weight: 600;
line-height: 1.1;
margin-top: 0rem;
margin-bottom: 2rem;
letter-spacing: -1px;
color: #a98747;
}.stats-left p {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: #555;
margin-bottom: 0rem;
}.stats-grid {
background: #ffffff;
display: grid;
grid-template-columns: 1fr 1fr;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
width: 130%;
margin-top: 30px;
}.stat-item {
padding: 2rem 2.5rem;
position: relative;
}.stat-item:nth-child(1),
.stat-item:nth-child(2) {
border-bottom: 1px solid #eee;
}.stat-item:nth-child(1),
.stat-item:nth-child(3) {
border-right: 1px solid #eee;
}.stat-number {
font-size: 3rem;
font-weight: 700;
color: #004811;
margin-bottom: 0.5rem;
line-height: 1;
letter-spacing: -1px;
}.stat-number span {
font-size: 2.5rem;
}.stat-text {
font-size: 15px;
color: #555;
line-height: 1.5;
font-weight: 400;
}.stats-right {
width: 55%;
position: relative;
height: 700px;
}.stats-right img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center left;
}.stats-image22 {
position: absolute;
right: 76px;
top: 50%;
height: 140px !important;
width: auto !important;
margin-top: -100px;
}@media (max-width: 1024px) {
.stats-container {
flex-direction: column;
}.stats-left {
width: 100%;
padding-right: 0;
}.stats-grid {
width: 100%;
margin-top: 2rem;
}.stats-right {
width: 100%;
height: 500px;
margin-top: -50px;
z-index: 1;
}.stats-left h2 {
font-size: 2.2rem;
}
}@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
}.stat-item:nth-child(1),
.stat-item:nth-child(3) {
border-right: none;
}.stat-item:nth-child(1),
.stat-item:nth-child(2),
.stat-item:nth-child(3) {
border-bottom: 1px solid #eee;
}.stats-right {
margin-top: 0;
height: 350px;
}
}/**/.sp-section {
display: flex;
min-height: 90vh;
width: 100%;
background-color: #ffffff;
color: #1a1a1a;
}/* Sol Taraf: Tam Boy Resim */
.sp-left {
flex: 1;background-size: cover;
background-position: center;
background-repeat: no-repeat;
}/* Sağ Taraf: İçerik ve Slider */
.sp-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5rem 2rem;
overflow: hidden;
}/* Başlık Alanı */
.sp-header {
width: 100%;
max-width: 500px;
margin-bottom: 20px;
text-align: left;
}.sp-header h2 {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: -0.5px;
margin-top: 0px;
color: #a98747;
}.sp-header p {
color: #555;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}/* --- SWIPER SLIDER --- */
.swiper.sp-swiper {
width: 100%;
padding: 10px 0;
}.sp-swiper .swiper-slide {
width: 260px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0.15;
transform: scale(0.85);
transition:
opacity 0.5s ease,
transform 0.5s ease;
cursor: pointer;
}/* Ortadaki (Aktif) Slayt */
.sp-swiper .swiper-slide-active {
opacity: 1;
transform: scale(1);
}/* Ürün Görseli */
.sp-image-box {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}.sp-image-box img {
max-width: 110%;
max-height: 110%;
object-fit: contain;
mix-blend-mode: multiply;
}/* Ürün Metinleri */
.sp-title {
font-size: 20px;
font-weight: 600;
color: #004811;
margin-bottom: 0.3rem;
}.sp-desc {
font-size: 0.85rem;
color: #888;
max-width: 220px;
line-height: 1.4;
}/* --- Alt Alan: İlerleme Çubuğu, Oklar ve Buton --- */
.sp-bottom-area {
width: 100%;
max-width: 500px;
margin-top: 10px;
text-align: left;
}/* İlerleme Çubuğu ve Okları Kapsayan Konteyner */
.sp-progress-container {
display: flex;
align-items: center;
gap: 15px;
/* Rakam, çizgi ve oklar arası boşluk */
margin-bottom: 2rem;
}.sp-fraction {
font-size: 0.85rem;
font-weight: 600;
color: #1a1a1a;
min-width: 30px;
}.sp-progress-bg {
flex-grow: 1;
height: 2px;
background-color: #e0e0e0;
position: relative;
}.sp-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #004812;
width: 0%;
transition: width 0.3s ease;
}/* YENİ EKLENEN ZARİF OKLAR (İlerleme çubuğunun sağında) */
.sp-arrows {
display: flex;
gap: 8px;
margin-left: 5px;
}.sp-btn-prev,
.sp-btn-next {
width: 34px;
height: 34px;
border: 1px solid #004812;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: transparent;
transition: all 0.3s ease;
}.sp-btn-prev svg,
.sp-btn-next svg {
width: 16px;
height: 16px;
stroke: #004812;
transition: stroke 0.3s ease;
}/* Hover (Üstüne gelince) */
.sp-btn-prev:hover,
.sp-btn-next:hover {
background-color: #004812;
}.sp-btn-prev:hover svg,
.sp-btn-next:hover svg {
stroke: #ffffff;
}/* Disabled (Gidilecek yer bitince) */
.sp-btn-prev.swiper-button-disabled,
.sp-btn-next.swiper-button-disabled {
opacity: 0.2;
cursor: default;
border-color: #999;
}.sp-btn-prev.swiper-button-disabled:hover {
background-color: transparent;
}.sp-btn-prev.swiper-button-disabled:hover svg {
stroke: #004812;
}.sp-btn-next.swiper-button-disabled:hover {
background-color: transparent;
}.sp-btn-next.swiper-button-disabled:hover svg {
stroke: #004812;
}/* Alt Buton */
.sp-btn {
display: block;
width: 100%;
padding: 1.2rem;
border: 1px solid #004812;
background-color: transparent;
color: #004812;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 1px;
transition: all 0.3s ease;
}.sp-btn:hover {
background-color: #004812;
color: #ffffff;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.sp-section {
flex-direction: column;
}.sp-left {
min-height: 50vh;
width: 100%;
display: none;
}.sp-right {
padding: 4rem 2rem;
}
}/**//* Ana Seksiyon - Temiz Beyaz */
.offset-flow-section {
padding: 80px 0px;
background-color: #f7f7f7; /* BEYAZ TEMA */
overflow: hidden;
}.offset-flow-container {
max-width: 1200px;
margin: 0 auto;
}/* Başlık */
.offset-flow-header {
text-align: center;
margin-bottom: 50px;
}.offset-flow-header h2 {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: -0.5px;
margin-top: 0px;
color: #a98747;
}.offset-flow-header p {
font-size: 15px;
color: #666666;
max-width: 600px;
margin: 0 auto;
font-weight: 400;
}/* Timeline Kapsayıcı */
.offset-flow-timeline {
position: relative;
padding-top: 40px;
}/* Arkadaki Sönük Çizgi */
.offset-flow-line-track {
position: absolute;
top: 93px;
left: 10%;
right: 10%;
height: 3px;
background-color: #f0f0f0; /* Açık gri ray */
z-index: 1;
border-radius: 5px;
}/* Akan Gold/Yeşil Çizgi (Animasyonlu) */
.offset-flow-line-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
/* YEŞİL'DEN GOLD'A AKAN GRADYAN */
background: linear-gradient(to right, #004811, #a98747);
width: 0%; /* JS ile artacak */
border-radius: 5px;
box-shadow: 0 0 10px rgba(169, 135, 71, 0.4);
transition: width 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}/* Adımlar Grid Yapısı */
.offset-flow-steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
}/* Tekil Adım */
.offset-flow-step {
flex: 1;
text-align: center;
padding: 0 15px;
position: relative;
list-style: none;
}.offset-flow-step li {
list-style: none;
}/* İkon Kutusu - Başlangıç (Pasif Hali) */
.offset-flow-icon-box {
width: 70px;
height: 70px;
margin: 0 auto 30px auto;
background-color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #a98747; /* Başlangıçta Gold ikon */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);transform: scale(0);
opacity: 0;
}.offset-flow-icon-box svg {
width: 30px;
height: 30px;
}/* İçerik (Yazılar) */
.offset-flow-content {
transform: translateY(30px);
opacity: 0;
transition: all 0.6s ease;
}.offset-flow-num {
display: block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: #a98747; /* Gold Numara */
margin-bottom: 10px;
font-weight: 700;
}.offset-flow-content h3 {
font-size: 20px;
color: #004811; /* Yeşil Başlık */
margin-bottom: 12px;
font-weight: 700;
}.offset-flow-content p {
font-size: 14px;
color: #555555;
line-height: 1.5;
}/* ------------------------------------- */
/* JS TETİKLENDİĞİNDE ÇALIŞACAK CLASSLAR */
/* ------------------------------------- *//* Çizgi Akışı */
.offset-flow-timeline.is-active .offset-flow-line-fill {
width: 100%;
}/* İkonların Patlayarak Gelmesi (Lüks Efekt) */
.offset-flow-timeline.is-active .offset-flow-step .offset-flow-icon-box {
transform: scale(1);
opacity: 1;
background-color: #004811; /* İkon içi Koyu Yeşil olur */
border-color: #a98747; /* Çerçeve Gold olur */
color: #ffffff; /* İkon beyaz olur */
box-shadow:
0 8px 25px rgba(0, 72, 17, 0.2),
0 0 0 6px rgba(169, 135, 71, 0.15); /* Çift katman premium gölge */
}/* Yazıların Yukarı Kayarak Gelmesi */
.offset-flow-timeline.is-active .offset-flow-step .offset-flow-content {
transform: translateY(0);
opacity: 1;
}/* SIRA SIRA GELME GECİKMELERİ */
.offset-flow-timeline.is-active .step-1 .offset-flow-icon-box {
transition-delay: 0.2s;
}
.offset-flow-timeline.is-active .step-1 .offset-flow-content {
transition-delay: 0.4s;
}.offset-flow-timeline.is-active .step-2 .offset-flow-icon-box {
transition-delay: 0.8s;
}
.offset-flow-timeline.is-active .step-2 .offset-flow-content {
transition-delay: 1s;
}.offset-flow-timeline.is-active .step-3 .offset-flow-icon-box {
transition-delay: 1.4s;
}
.offset-flow-timeline.is-active .step-3 .offset-flow-content {
transition-delay: 1.6s;
}.offset-flow-timeline.is-active .step-4 .offset-flow-icon-box {
transition-delay: 2s;
}
.offset-flow-timeline.is-active .step-4 .offset-flow-content {
transition-delay: 2.2s;
}/* İkona Hover (Üzerine Gelince) Animasyonu */
.offset-flow-step:hover .offset-flow-icon-box {
transform: scale(1.15) !important;
background-color: #a98747; /* Hover'da Gold'a döner */
border-color: #004811; /* Çerçeve Yeşile döner */
box-shadow: 0 10px 30px rgba(169, 135, 71, 0.4);
}/* MOBİL UYUM (Responsive) */
@media (max-width: 768px) {
.offset-flow-steps {
flex-direction: column;
gap: 50px;
}.offset-flow-line-track {
top: 0;
bottom: 0;
left: 45px;
width: 3px;
height: auto;
}.offset-flow-line-fill {
width: 100%;
height: 0%;
/* Mobilde dikey aktığı için gradyan yönünü aşağı olarak değiştiriyoruz */
background: linear-gradient(to bottom, #004811, #a98747);
transition: height 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}.offset-flow-timeline.is-active .offset-flow-line-fill {
width: 100%;
height: 100%;
}.offset-flow-step {
display: flex;
align-items: flex-start;
text-align: left;
padding: 0;
}.offset-flow-icon-box {
margin: 0 25px 0 10px;
min-width: 70px;
z-index: 3;
position: relative;
}.offset-flow-content {
padding-top: 5px;
}
}/**//* --- ANA KONTEYNER --- */
.benefits-container {
margin: 0 auto;
padding: 80px 0px;
max-width: 1100px;
position: relative;
}/* Ana Başlık */
.main-title {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: -0.5px;
margin-top: 0px;
color: #a98747;
margin-bottom: 80px;
text-align: center;
}/* --- IZGARA (GRID) YAPISI --- */
/* Masaüstünde 2 sütunlu kusursuz yapı */
.benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 80px;
/* Sütunlar arası geniş boşluk */
row-gap: 0px;
/* Satırlar arası geniş boşluk */
position: relative;
}.benefits-grid::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: #dedede;
height: 100%;
top: 0px;
}/* --- TEKİL HİZMET KUTUSU --- */li.benefit-item:nth-child(1) a,
li.benefit-item:nth-child(2) a {
border-top: 0px;
}li.benefit-item a {
list-style: none;
display: flex;
align-items: flex-start;
/* İkon ve metni üstten hizala */
gap: 20px;
text-decoration: none;
/* İkon ve metin arası boşluk */
border-top: 1px solid #dedede;
padding-top: 40px;
padding-bottom: 40px;
text-decoration: none;
}
li.benefit-item {
list-style: none;
}
/* İkon Alanı */
.benefit-icon {
flex-shrink: 0;
/* İkonun ezilmesini engeller */
width: 48px;
height: 48px;
color: var(--brand-orange);
/* İkon rengi */
}/* SVG İkon Ayarları (İnce hatlı, modern) */
.benefit-icon svg {
width: 100%;
height: 100%;
stroke-width: 1.2;
stroke: #004911;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}/* Metin Alanı */
.benefit-content {
flex: 1;
}.benefit-content h3 {
font-size: 20px;
font-weight: 700;
color: #004911;
margin-bottom: 12px;
margin-top: 8px;
/* İkon ile başlığı görsel olarak aynı hizaya getirmek için */
}.benefit-content p {
font-size: 15px;
color: #555;
line-height: 1.4;
font-weight: 500;
}/* --- MOBİL UYUM (RESPONSIVE) --- */
@media (max-width: 850px) {
.benefits-grid {
grid-template-columns: 1fr;
/* Tablet ve mobilde tek sütun alt alta */
gap: 50px;
}
}@media (max-width: 500px) {
.main-title {
font-size: 26px;
margin-bottom: 50px;
}.benefit-item {
/* İSTENEN ÖZELLİK: Mobilde ikon yazının tam üstünde ortalı dursun */
flex-direction: column;
align-items: flex-start;
gap: 15px;
}.benefit-content h3 {
margin-top: 0;
}
}/**/
.surdurebilirlik {
position: relative;
margin: 0px auto;
width: 100%;
height: auto;
overflow: hidden;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-color: #a9874756;
}.surdurebilirlik .container {
position: relative;
width: 100%;
min-height: 600px; /* Sabit bir yükseklik verdik */
border-radius: 12px;
display: flex;
}.surdurebilirlik-content {
width: 100%;
height: auto;
position: relative;
}/* 1. KATMAN: Arka Plan Resmi */
.surdurebilirlik .bg-image {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 245px);
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity 0.6s ease-in-out;
}/* 2. KATMAN: Soldan sağa beyaz transparan geçiş (Gradient Overlay) */
.surdurebilirlik .gradient-mask {
position: absolute;
top: 0;
left: -30px;
width: 97%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 1) 0%,
rgb(255 255 255 / 99%) 35%,
rgba(255, 255, 255, 0) 75%
);
z-index: 2;
}/* 3. KATMAN: İçerik Alanı */
.surdurebilirlik .content-layer {
position: relative;
z-index: 3;
display: flex;
width: 100%;
height: 100%;
}/* Sadece Sol Tarafı Kaplayan Metin Alanı */
.surdurebilirlik .left-panel {
width: 47%;
padding: 80px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}/* Küçük Üst Başlık */
.surdurebilirlik .top-label {
display: flex;
align-items: center;
font-size: 0.85rem;
letter-spacing: 1px;
color: #a98747;
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 600;
}.surdurebilirlik .surdurebilirlik.top-label::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: #a98747; /* Kırmızı Kutu */
margin-right: 15px;
}/* Dinamik Menü Listesi */
.surdurebilirlik .tab-list {
list-style: none;
border-left: 3px solid rgba(0, 0, 0, 0.1); /* Hafif Gri Çizgi */
padding-left: 25px;
margin-bottom: 30px;
position: relative;
}.surdurebilirlik .tab-item {
font-size: 36px;
font-weight: 300;
color: #0048119e;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
line-height: 1.2;
letter-spacing: -0.5px;
}.surdurebilirlik .tab-item:last-child {
margin-bottom: 0;
}/* Aktif Menü Öğesi */
.surdurebilirlik .tab-item.active {
color: #004811; /* Koyu Lacivert */
font-weight: 700;
}.surdurebilirlik .tab-item.active::before {
content: "";
position: absolute;
left: -28px;
top: 0;
height: 100%;
width: 3px;
background-color: #a98747; /* Aktif Kırmızı Çizgi */
}/* Açıklama Metni */
.surdurebilirlik .description-box {
min-height: 130px;
}.surdurebilirlik .description {
font-size: 15px;
color: #444;
line-height: 1.5;
margin-bottom: 50px;
transition: opacity 0.4s ease;
max-width: 90%;
font-weight: 500;
}/* Aksiyon Butonu / Linki */
.surdurebilirlik .cta-link {
text-decoration: none;
color: #111;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
transition: color 0.3s;
}.surdurebilirlik .cta-link:hover {
color: #a98747;
}.surdurebilirlik .cta-link span {
margin-left: 8px;
font-size: 1.2rem;
transition: transform 0.3s;
}.surdurebilirlik .cta-link:hover span {
transform: translateX(5px); /* Üzerine gelince ok işareti sağa kaysın */
}/* JS ile eklenecek Fade Animasyonu */
.surdurebilirlik .fade-out {
opacity: 0 !important;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.surdurebilirlik .gradient-mask {
/* Mobilde yazılar ezilmesin diye yukarıdan aşağıya beyaz geçiş */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 50%,
rgba(255, 255, 255, 0.2) 100%
);
left: 0;
width: 100%;
}
.surdurebilirlik .left-panel {
width: 100%;
padding: 50px 30px;
justify-content: flex-start;
}
.surdurebilirlik .tab-item {
font-size: 2.2rem;
}
.surdurebilirlik .container {
min-height: 700px;
}
}/**//* Ana Kapsayıcı (İstediğin Class) */
.kalite-politikamiz {
margin: 50px auto;
padding: 40px 20px;
background-color: #ffffff;
text-align: center;
}.kalite-politikamiz-baslik {
font-size: 32px;
color: #a98747;
margin-bottom: 10px;
font-weight: 700;
}.kalite-politikamiz-altbaslik {
font-size: 16px;
color: #7f8c8d;
margin-bottom: 40px;
}/* Logoların Yan Yana Dizilmesi (Flexbox) */
.sertifika-grid {
display: flex;
flex-wrap: wrap; /* Ekrana sığmazsa alt satıra geçer */
justify-content: center; /* Ortala */
align-items: flex-start;
gap: 30px; /* Logolar arası boşluk */
}/* Tekil Sertifika Kutusu */
.sertifika-item {
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
}/* Resim Ayarları ve Hover Efekti */
.sertifika-item img {
height: 150px;
width: 150px;
object-fit: contain;
filter: grayscale(100%) opacity(0.7); /* Başlangıçta gri ve soluk */
transition: all 0.4s ease;
margin-bottom: 15px;
}/* Mouse üzerine gelince */
.sertifika-item:hover {
transform: translateY(-5px); /* Hafif yukarı kalkar */
}.sertifika-item:hover img {
filter: grayscale(0%) opacity(1); /* Orijinal renge döner */
transform: scale(1.1); /* Hafif büyür */
}/* Metin Ayarları */
.sertifika-isim {
font-size: 14px;
font-weight: bold;
color: #34495e;
margin: 0 0 5px 0;
}.sertifika-aciklama {
font-size: 12px;
color: #95a5a6;
margin: 0;
line-height: 1.4;
}/* Responsive - Mobil Uyumluluk */
@media (max-width: 768px) {
.sertifika-grid {
gap: 20px;
}
.sertifika-item {
width: 120px;
}
}/**//**//* CSS Değişkenleri Footer'ın kendisine tanımlandı, globali etkilemez */
.custom-footer-wrapper {
--cf-bg-dark: #054610; /* Airbus Koyu Lacivert/Siyah Zemin */
--cf-border: #054610; /* Sizin Koyu Antrasit Renginiz (Çizgiler) */
--cf-gold: #a98747; /* Sizin Altın Sarısı Renginiz (Vurgular) */
--cf-text-main: #ffffff; /* Beyaz Yazı */
--cf-text-muted: #fff; /* Gri Yazı */
position: relative;
background-color: var(--cf-bg-dark);
color: var(--cf-text-main);
padding: 70px 20px 30px 20px;
overflow: hidden;
/* Sizin sarı renginizle çok hafif, zarif radial bir ışık hüzmesi */
background-image: radial-gradient(
circle at 15% 50%,
rgba(240, 177, 4, 0.03) 0%,
transparent 50%
);
}.custom-footer-container {
max-width: 1250px;
margin: 0 auto;
position: relative;
z-index: 2;
}.custom-footer-container::after {
content: "";
position: absolute;
right: -100px;
bottom: -100px;
width: 600px;
height: 600px;
opacity: 10%;
background-size: contain;
display: none;
}/* Grid (Sütunlar) */
.custom-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
}.custom-footer-col {
display: flex;
flex-direction: column;
}.custom-footer-col .cizgi {
width: 50px;
height: 3px;
background: #a98747;
display: block;
margin-bottom: 35px;
}/* Marka ve Slogan */
.custom-footer-logo {
font-size: 28px;
font-weight: 800;
margin: 0 0 25px 0;
letter-spacing: 1px;
color: var(--cf-text-main);
}.custom-footer-logo img {
width: auto;
height: 45px;
}.custom-footer-stay-touch {
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
color: var(--cf-text-main);
}/* Sosyal Medya İkonları */
.custom-footer-social-links {
display: flex;
gap: 12px;
margin-bottom: 30px;
}.custom-footer-social-links a {
display: flex;
justify-content: center;
align-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
fill: var(--cf-text-main);
text-decoration: none;
transition: all 0.3s ease;
}.custom-footer-social-links a svg {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.custom-footer-social-links a:hover {
border-color: var(--cf-gold);
fill: var(--cf-gold);
background-color: rgba(240, 177, 4, 0.05);
}.custom-footer-social-links a:hover svg {
transform: scale(1.1);
}/* İletişim Butonu */
.custom-footer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--cf-text-main);
color: var(--cf-bg-dark);
font-weight: 700;
font-size: 14px;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
width: fit-content;
transition: all 0.3s ease;
}.custom-footer-btn:hover {
background-color: var(--cf-gold);
color: #000;
}/* Sütun Başlıkları */
.custom-footer-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 20px 0;
color: var(--cf-text-main);
}/* Menü Linkleri */
.custom-footer-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}.custom-footer-list a {
color: var(--cf-text-muted);
text-decoration: none;
font-size: 14px;
display: inline-flex;
align-items: center;
transition: color 0.3s ease;
}/* Dışa Açılan Link Ok İkonu */
.custom-footer-ext-icon {
width: 14px;
height: 14px;
margin-left: 6px;
opacity: 0.7;
transition: opacity 0.3s ease;
}.custom-footer-list a:hover {
color: var(--cf-gold);
}.custom-footer-list a:hover .custom-footer-ext-icon {
opacity: 1;
}/* En Alt Bölüm (Yasal ve Çizgi) */
.custom-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid #ffffff26;
flex-wrap: wrap;
gap: 20px;
}.custom-footer-legal {
display: flex;
flex-wrap: wrap;
gap: 24px;
}.custom-footer-legal img {
width: auto;
height: 18px;
}.custom-footer-legal a {
color: var(--cf-text-muted);
text-decoration: none;
font-size: 13px;
transition: color 0.3s ease;
}.custom-footer-legal a:hover {
color: var(--cf-gold);
}.custom-footer-copyright {
color: var(--cf-text-muted);
font-size: 13px;
}/* Responsive (Mobil / Tablet) *//* ==========================================================================
RESPONSIVE (MOBİL VE TABLET UYUMU) - MANTIKLI VE TEMİZ YAPI
========================================================================== *//* --- 1. ADIM: BÜYÜK TABLETLER VE KÜÇÜK EKRANLI LAPTOPLAR (max-width: 1024px) --- */
@media (max-width: 1024px) {
/* İstatistik Alanı */
.stats-container {
flex-direction: column;
}
.stats-left {
width: 100%;
padding-right: 0;
padding-top: 0;
}
.stats-left h2 {
font-size: 2.5rem;
}
.stats-grid {
width: 100%; /* %130 olan taşmayı önledik */
margin-top: 2rem;
}
.stats-right {
width: 100%;
height: 400px;
margin-top: 30px;
}
.stats-image22 {
display: none; /* Mobilde karmaşa yaratmaması için dekoratif görsel gizlendi */
}/* Slider Alanı */
.sp-section {
flex-direction: column;
}
.sp-left {
min-height: 40vh;
width: 100%;
}
.sp-right {
padding: 3rem 2rem;
height: auto;
min-height: 50vh;
}/* Sürdürülebilirlik */
.surdurebilirlik .bg-image {
width: 100%; /* calc(100% + 245px) değerinin mobilde yatay scroll yapmasını engelledik */
}
}/* --- 2. ADIM: TABLETLER VE YATAY MOBİL (max-width: 992px) --- */
@media (max-width: 992px) {
/* Sürdürülebilirlik */
.surdurebilirlik .gradient-mask {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 55%,
rgba(255, 255, 255, 0.2) 100%
);
}
.surdurebilirlik .left-panel {
width: 100%;
padding: 50px 30px;
justify-content: flex-start;
}
.surdurebilirlik .container {
min-height: auto;
}/* Hizmetler / Avantajlar Grid */
.benefits-grid {
grid-template-columns: 1fr; /* 2 sütundan tek sütuna düştük */
row-gap: 0;
padding: 0 20px;
}
.benefits-grid::before {
display: none; /* Ortadaki dikey çizgiyi mobilde kaldırdık */
}
li.benefit-item a {
border-top: 1px solid #dedede !important; /* Alt alta geldikleri için hepsine üst çizgi verdik */
padding: 30px 0;
}
li.benefit-item:first-child a {
border-top: none !important; /* Sadece en baştakinin üst çizgisini sildik */
}/* Footer */
.custom-footer-grid {
grid-template-columns: repeat(
2,
1fr
); /* Footer'ı 4 sütundan 2 sütuna düşürdük */
gap: 40px;
}
}/* --- 3. ADIM: DİKEY MOBİL TELEFONLAR (max-width: 768px) --- */
@media (max-width: 768px) {
/* Genel Başlıklar */
.main-title,
.offset-flow-header h2,
.sp-header h2,
.kalite-politikamiz-baslik {
font-size: 1.8rem;
margin-bottom: 30px;
}/* İstatistik Alanı */
.stats-section {
padding: 50px 0;
}
.stats-left h2 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr; /* Mobilde istatistikler alt alta */
}
.stat-item {
padding: 1.5rem;
text-align: center;
}
.stat-item:nth-child(1),
.stat-item:nth-child(2),
.stat-item:nth-child(3) {
border-right: none;
border-bottom: 1px solid #eee;
}
.stat-item:last-child {
border-bottom: none;
}
.stats-right {
height: 250px;
}/* Offset Flow (Timeline) Akış Alanı */
.offset-flow-section {
padding: 50px 0;
}
.offset-flow-steps {
flex-direction: column;
gap: 40px;
padding-left: 20px;
padding-right: 20px;
}
.offset-flow-line-track {
top: 0;
bottom: 0;
left: 45px;
width: 3px;
height: 100%;
}
.offset-flow-line-fill {
width: 100%;
height: 0%;
background: linear-gradient(to bottom, #004811, #a98747);
transition: height 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.offset-flow-timeline.is-active .offset-flow-line-fill {
height: 100%;
width: 100%;
}
.offset-flow-step {
display: flex;
align-items: flex-start;
text-align: left;
padding: 0;
}
.offset-flow-icon-box {
margin: 0 20px 0 0; /* İkon ve metin arası boşluk */
min-width: 60px;
height: 60px;
z-index: 3;
position: relative;
}
.offset-flow-content {
padding-top: 0;
}
.offset-flow-content h3 {
font-size: 18px;
}/* Kalite ve Sertifikalar */
.kalite-politikamiz {
padding: 30px 15px;
}
.sertifika-grid {
gap: 15px;
padding: 0;
}
.sertifika-item {
width: 45%; /* Mobilde logolar 2'li yan yana dursun */
}
.sertifika-item img {
height: 100px;
width: 100px;
}/* Footer */
.custom-footer-grid {
grid-template-columns: 1fr; /* Footer mobilde tamamen tek sütun */
gap: 30px;
display: none;
}
.custom-footer-col .cizgi {
margin-bottom: 15px;
}
.custom-footer-wrapper {
padding: 0px 15px 30px 15px;
margin-bottom: 40px;
}
.custom-footer-container::after {
display: none; /* Mobilde arka plan dekoru karmaşasını engeller */
}
.custom-footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.custom-footer-legal {
justify-content: center;
}
}/* --- 4. ADIM: DAR MOBİL TELEFONLAR (max-width: 500px) --- */
@media (max-width: 500px) {
/* Hizmetler Grid (İkon üstte, yazı altta olacak şekilde) */
li.benefit-item a {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.benefit-content h3 {
margin-top: 0;
}/* Sürdürülebilirlik */
.surdurebilirlik .left-panel {
padding: 60px 15px;
}
.surdurebilirlik .tab-item {
font-size: 1.8rem;
}
.surdurebilirlik .description {
font-size: 14px;
max-width: 100%;
}/* Slider / İlerleme Çubuğu Bölümü */
.sp-progress-container {
flex-wrap: wrap; /* Oklar dar ekranda taşmasın diye alta atabilir */
}.benefits-container{
padding: 80px 0px 20px 0px;
}.offset-flow-header p{
padding: 0 30px;
}.sp-image-box{
width: 100%;
}
}