:root {
--lacivert: #555553;
--acik-mavi: #f4f7fb;
--gri-metin: #666;
--border-rengi: #e5e7eb;
}.iconbg {
position: absolute;
right: -40px;
width: 500px;
height: 500px;
background: url("../images/icon.webp") center;
background-size: contain;
bottom: -50px;
opacity: 5%;
}.sivri-ayirici-cizgi {
width: 100%; /* Bulunduğu alanın tamamını veya istediğiniz genişliği kaplar */
max-width: 200px; /* Çok uzamasını istemezseniz maksimum bir genişlik verin */
height: 5px; /* Ortadaki maksimum kalınlık (İsteğe göre artırıp azaltın) */
background-color: #f0b104; /* İstediğiniz Kurumsal Sarı */
border-radius: 50%; /* BÜYÜ: Dikdörtgeni ezerek uçlarını sivriltir */
margin: 40px auto; /* Üstten alttan boşluk bırakır ve ortalar */
}/* CSS Kısımı */
.isiltili-ayirici-cizgi {
width: 100%;
max-width: 200px;
height: 4px; /* Daha ince, zarif bir çizgi */
margin: 0px;
/* BÜYÜ: Ortası tam sarı (#f0b104), sağa ve sola gittikçe saydamlaşır */
background: linear-gradient(
90deg,
rgba(240, 177, 4, 0) 0%,
/* Sol uç görünmez */ #f0b104 50%,
/* Orta tam sarı */ rgba(240, 177, 4, 0) 100% /* Sağ uç görünmez */
);
}.kullanim-alanlari-bolumu {
padding-top: 80px;
padding-bottom: 80px;
align-items: flex-start;
overflow: hidden;
position: relative;
}.kullanim-alanlari-bolumu .alanlari-bolumu-ic {
display: flex;
gap: 40px;
align-items: flex-start;
width: calc(100% + 130px);
}.kullanim-alanlari-sol {
flex: 0 0 320px;
padding-right: 20px;
}.kullanim-alanlari-ust-baslik {
font-size: 13px;
color: var(--gri-metin);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}.kullanim-alanlari-ana-baslik {
font-size: 42px;
color: var(--lacivert);
font-weight: 600;
margin: 15px 0;
line-height: 1.2;
}.kullanim-alanlari-ana-baslik span {
color: #f0b104;
}.kullanim-alanlari-cizgi {
width: 40px;
height: 6px;
background-color: var(--lacivert);
margin: 25px 0;
}.kullanim-alanlari-aciklama {
font-size: 16px;
color: #333;
line-height: 1.5;
margin-top: 30px;
margin-bottom: 40px;
}.kullanim-alanlari-oklar {
display: flex;
gap: 15px;
}.kullanim-alanlari-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid #ccc;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--lacivert);
transition: all 0.3s ease;
padding: 0;
}.kullanim-alanlari-btn svg {
width: 20px;
height: 20px;
stroke: currentColor;
}.kullanim-alanlari-btn:hover {
border-color: #f0b104;
background-color: #f0b104;
color: white;
}.kullanim-alanlari-sag {
flex: 1;
min-width: 0;
}.kullanim-alanlari-kart {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}.kullanim-alanlari-kart:hover {
color: #f0b104!important;
}.swiper-slide-active .kullanim-alanlari-img {
height: 300px;
}.kullanim-alanlari-img {
width: 100%;
height: 220px;
object-fit: cover;
transition: height 0.4s ease;
}.kullanim-alanlari-icerik {
padding: 20px 0;
display: flex;
flex-direction: column;
flex-grow: 1;
border-bottom: 1px solid var(--border-rengi);
}.kullanim-alanlari-etiketler {
display: flex;
gap: 10px;
margin-bottom: 20px;
}.ka-etiket {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}.ka-etiket-dolu {
background-color: var(--lacivert);
color: white;
}.ka-etiket-bos {
border: 1px solid var(--lacivert);
color: var(--lacivert);
}.kullanim-alanlari-baslik {
font-size: 20px;
color: #111;
margin: 0 0 15px 0;
line-height: 1.4;
font-weight: 600;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
cursor: pointer;
transition: color 0.3s;
}.kullanim-alanlari-baslik:hover {
color: #f1b40d;
}.kullanim-alanlari-baslik svg {
width: 18px;
height: 18px;
color: var(--gri-metin);
margin-top: 4px;
flex-shrink: 0;
stroke: currentColor;
}.kullanim-alanlari-baslik:hover svg {
color: #f1b40d;
}/* YENİ EKLENEN: Başlangıçta açıklamaları gizler (Animasyona hazırlık) */
.kullanim-alanlari-kisa-ozet {
font-size: 14px;
color: var(--gri-metin);
line-height: 1.5;
max-height: 0;
opacity: 0;
margin: 0;
overflow: hidden;
transition: all 0.4s ease-in-out;
/* Yumuşak geçiş animasyonu */
}/* YENİ EKLENEN: Sadece aktif olan (en soldaki tam görünen) slaytta açıklamayı gösterir */
.swiper-slide-active .kullanim-alanlari-kisa-ozet {
max-height: 100px;
opacity: 1;
margin-bottom: 15px;
}@media (max-width: 992px) {
.kullanim-alanlari-bolumu {
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}.kullanim-alanlari-sol {
flex: none;
width: 100%;
}.kullanim-alanlari-oklar {
display: none;
}
}/* Genişleyen Resim Alanı Tasarımı */
.genisleyen-resim-container {
width: 100%;
height: 110vh; /* Ekranın tamamını kaplasın diye biraz uzun tuttuk */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #fff;
}.genisleyen-resim-cerceve {
width: 70%; /* Başlangıç genişliği (Scroll ile %100 olacak) */
height: 80vh; /* Başlangıç yüksekliği */
position: relative;
overflow: hidden;
border-radius: 30px; /* Kenarlar başta yuvarlak olsun */
transition: border-radius 0.3s ease;
will-change: width, border-radius; /* Performans için */
}.genisleyen-resim-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2); /* Resim başta biraz zoomlu olsun, scroll ile açılır */
transition: transform 0.3s ease;
}
.resim-ustu-yazi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%); /* Başlangıçta biraz aşağıda */
text-align: center;
color: white;
width: 90%;
z-index: 10;
opacity: 0;
text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Yazıyı öne çıkarır */
}.resim-ustu-yazi h2 {
font-size: clamp(30px, 5vw, 60px);
font-weight: 500;
margin-bottom: 20px;
}.resim-ustu-yazi p {
font-size: 18px;
letter-spacing: 2px;
}/* Resmin üzerine karartma (Yazı okunabilsin diye) */
.genisleyen-resim-cerceve::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5555538b; /* Airbus laciverti hafif transparan */
}/**//* Genel Ayarlar */
.home-urunler-section {
padding: 80px 0 0px;
background-color: #fff;
}.home-urunler-container {
margin: 0 auto;
}.home-urunler-ana-baslik {
font-size: 36px;
color: #111;
margin-top: 0px;
margin-bottom: 40px;
font-weight: 700;
}/* Ana Grid Yapısı */
.home-urunler-grid {
display: grid;
grid-template-columns: 2fr 1fr; /* Sol geniş, sağ dar */
gap: 15px;
height: auto; /* Sabit yükseklik, mozaik görünümü için önemli */
}/* Sol Taraf: Yan Yana Düzen */
.home-urunler-sol {
display: grid;
grid-template-columns: 1fr 1fr; /* İçeride iki sütun */
gap: 15px;
}/* Sağ Taraf: Alt Alta Düzen */
.home-urunler-sag {
display: grid;
grid-template-rows: 1fr 1fr; /* İçeride iki satır */
gap: 15px;
}/* Kart Stilleri */
.home-urunler-item {
position: relative;
display: block;
width: 100%;
height: 465px;
overflow: hidden;
border-radius: 0px;
text-decoration: none;
background-color: #eee;
}.home-urunler-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}.home-urunler-sag .home-urunler-item {
height: 225px;
}/* Yazı ve Karartma Katmanı */
.home-urunler-overlay {
position: absolute;
inset: 0; /* Tüm alanı kaplar */
display: flex;
align-items: flex-end; /* Yazıyı aşağı hizalar */
padding: 40px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.2) 50%,
transparent 100%
);
z-index: 2;
}.home-urunler-baslik {
color: #ffffff;
font-size: 22px;
font-weight: 600;
margin: 0;
line-height: 1.2;
transform: translateY(0);
transition: transform 0.4s ease;
padding-bottom: 0px;
}/* Hover (Fare Üzerine Gelince) Efektleri */
.home-urunler-item:hover .home-urunler-img {
transform: scale(1.1); /* Resim hafifçe büyür */
}.home-urunler-item:hover .home-urunler-baslik {
transform: translateY(-10px); /* Yazı hafif yukarı kaysın */
}/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1100px) {
.home-urunler-grid {
height: auto; /* Mobilde sabit yüksekliği kaldırıyoruz */
grid-template-columns: 1fr; /* Her şey tek sütun */
}.home-urunler-sol {
grid-template-columns: 1fr 1fr; /* Tablette yan yana kalabilir */
height: 400px;
}.home-urunler-sag {
grid-template-rows: 1fr 1fr;
}
}@media (max-width: 768px) {
.home-urunler-sol {
grid-template-columns: 1fr; /* Mobilde tamamen alt alta */
height: auto;
}
.home-urunler-item {
height: 300px;
}
.home-urunler-baslik {
font-size: 20px;
}
}/**//* Genel Ayarlar */
.product-features-layout {
margin: 0px auto;
padding: 0 0px 80px;
display: flex;
align-items: flex-start; /* Sabit formun çalışması için gerekli */
gap: 50px; /* Sol ve sağ kolon arası boşluk */
}/* =========================================
SOL TARAF: SABİT BİLGİ/GÖRSEL KARTI
========================================= */
.sticky-sidebar {
width: 32%;
position: sticky; /* Kayan form özelliği */
top: 40px;
}.info-action-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden; /* Resmin köşelerinin karta uyması için */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-top: 5px solid #f0b104; /* Kurumsal SARI çizgi */
transition: transform 0.3s ease;
}.info-action-card:hover {
transform: translateY(-5px); /* Karta hafif havaya kalkma efekti */
}/* Kart Görseli */
.card-image img {
width: 100%;
height: 220px;
object-fit: cover; /* Resmi sündürmeden orantılı keser */
display: block;
}/* Kart Yazı ve Buton Alanı */
.card-content {
padding: 30px 0px;
}.card-title {
color: #2c323d; /* Koyu antrasit */
font-size: 22px;
margin: 0 0 12px 0;
font-weight: 700;
}.card-desc {
color: #6a768c;
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
}/* Kart Butonu */
.action-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: #f0b104; /* SARI RENGİNİZ */
color: #1a1f2b; /* Sarı üzerinde şık duran koyu yazı rengi */
text-decoration: none;
padding: 15px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
transition: all 0.3s;
box-sizing: border-box;
}.action-btn svg {
width: 20px;
height: 20px;
margin-left: 10px;
transition: transform 0.3s ease;
}.action-btn:hover {
background-color: #e0a300; /* Üzerine gelince bir ton koyu sarı */
box-shadow: 0 8px 20px rgba(240, 177, 4, 0.3); /* Sarı parlama gölgesi */
}.action-btn:hover svg {
transform: translateX(5px); /* Buton içindeki ok sağa kaysın */
}/* =========================================
SAĞ TARAF: AVANTAJLAR LİSTESİ
========================================= */
.advantages-main {
width: 100%;
}.section-title {
color: #555;
font-size: 33px;
font-weight: 700;
margin-top: 0;
margin-bottom: 30px;
}.advantages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}.advantages-grid::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 0.5px;
height: 100%;
transform: translateX(-50%);
background: #cccccc3d;
display: none;
}/* Her Bir Madde Kutusu */
.adv-item {
display: flex;
align-items: flex-start;
padding: 25px 20px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
background-color: #ffffff;
border-bottom: 0.5px solid #cccccc3d;
}/* SARI TEMALI HOVER (Üzerine Gelme) EFEKTİ */
.adv-item:hover {
background-color: #fffdf5; /* Çok hafif, uçuk bir sarı/krem arkaplan */
border-color: #fdeabb; /* Çerçeve hafif sarı olur */
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(240, 177, 4, 0.08); /* Sarımsı yumuşak gölge */
cursor: pointer;
}/* İkon Alanı (SVG) */
.adv-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 20px;
color: #f0b104; /* SARI İKONLAR */
transition: transform 0.4s ease;
}.adv-icon svg {
width: 100%;
height: 100%;
}.adv-item:hover .adv-icon {
transform: scale(1.15); /* Hover'da ikon büyür */
}/* İçerik Alanı */
.adv-content {
flex-grow: 1;
}.adv-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}.adv-header h3 {
margin: 0;
color: #2c323d;
font-size: 18px;
font-weight: 600;
transition: color 0.3s;
}/* Sağ Ok (SVG) Ayarları */
.arrow-icon {
width: 16px;
height: 16px;
color: #a0aabf; /* Normalde gri ok */
transition: all 0.3s ease;
}/* Hover durumunda Başlık ve Ok rengi değişimi */
.adv-item:hover .adv-header h3 {
color: #d69d03; /* Başlık belirgin bir sarı/hardal tonu olur */
}
.adv-item:hover .arrow-icon {
color: #f0b104; /* Ok sarı olur */
transform: translateX(6px); /* Ok sağa kayar */
}.adv-content p {
margin: 0;
color: #6a768c;
font-size: 14px;
line-height: 1.6;
}/* =========================================
MOBİL VE TABLET UYUMU (RESPONSIVE)
========================================= */@media (max-width: 992px) {
.product-features-layout {
flex-direction: column;
gap: 40px;
}.sticky-sidebar {
width: 100%;
position: relative; /* Mobilde kart sabit (sticky) kalmaz, normal akar */
top: 0;
}.advantages-main {
width: 100%;
}
}@media (max-width: 768px) {
.advantages-grid {
grid-template-columns: 1fr; /* Mobilde alt alta dizer */
}.section-title {
font-size: 26px;
text-align: center;
}.adv-item {
padding: 20px 10px;
}
}/* Genel Bölüm Ayarları *//* Ana Konteyner - Çok açık yumuşak bir gri zemin */
.split-soft-alani {
display: flex;
background-color: #f8f9fa; /* Göz yormayan ferah zemin */
position: relative;
align-items: flex-start;
}/* SOL KOLON (SABİT) */
.split-sol-sabit {
width: 45%;
height: 100vh;
position: sticky;
top: 0;
overflow: hidden;
}.sabit-icerik {
width: 100%;
height: 100%;
position: relative;
}.sabit-resim {
width: 100%;
height: 100%;
object-fit: cover;
}/* İstediğiniz #555553 rengi ile şık bir degrade karartma */
.sabit-karartma {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(85, 85, 83, 0.95) 0%,
rgba(85, 85, 83, 0.4) 100%
);
}.sabit-metin {
position: absolute;
top: 50%;
left: 12%;
transform: translateY(-50%);
width: 75%;
color: #ffffff;
z-index: 2;
}.ust-etiket {
color: #f0b104; /* İstediğiniz Sarı Renk */
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
margin-bottom: 15px;
display: block;
}.sabit-metin h2 {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}.sabit-metin p {
font-size: 17px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
font-weight: 300;
}/* SAĞ KOLON (KAYAN KARTLAR) */
.split-sag-kayan {
width: 55%;
padding: 100px 6%;
}.sag-kartlar-konteyner {
display: flex;
gap: 15px;
width: 100%;
flex-direction: column;
}/* YENİ: Soft ve Ferah Kart Tasarımı */
.soft-kart {
width: 100%;
display: flex;
align-items: flex-start;
background-color: #ffffff;
padding: 26px 26px;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(85, 85, 83, 0.06);
border: 1px solid rgba(85, 85, 83, 0.05);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
}/* Kartın sol kenarında ince bir vurgu çizgisi */
.soft-kart::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background-color: transparent;
transition: background-color 0.4s ease;
}/* Üzerine Gelince (Hover) Soft Efektler */
.soft-kart:hover {
transform: translateY(-5px) !important; /* Hafif yukarı kalkar */
box-shadow: 0 15px 50px rgba(85, 85, 83, 0.12); /* Gölge belirginleşir */
}.soft-kart:hover::before {
background-color: #f0b104; /* Sarı çizgi belirir */
}/* İkon Alanı */
.soft-ikon {
width: 55px;
height: 55px;
/* Sarının çok saydam hali arka plan olarak kullanıldı */
background-color: rgba(240, 177, 4, 0.1);
color: #f0b104; /* İstediğiniz Sarı Renk */
border-radius: 14px;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
flex-shrink: 0;
margin-right: 25px;
transition: all 0.4s ease;
}.soft-ikon svg {
width: 32px;
height: 32px;
fill: #555553;
}.soft-kart:hover .soft-ikon {
background-color: #f0b104;
color: #ffffff;
transform: scale(1.1);
}.soft-kart:hover .soft-ikon svg {
fill: #ffffff;
}/* Metin Alanı (#555553 kullanımı) */
.soft-metin h3 {
color: #555553; /* İstediğiniz Koyu Füme/Gri Renk */
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
transition: color 0.3s ease;
}.soft-kart:hover .soft-metin h3 {
color: #000000; /* Hoverda metin biraz daha netleşir */
}.soft-metin p {
color: rgba(85, 85, 83, 0.75);
font-size: 14px;
line-height: 1.5;
margin: 0;
font-weight: 500;
}/* MOBİL UYUM */
@media (max-width: 992px) {
.split-soft-alani {
flex-direction: column;
}
.split-sol-sabit {
width: 100%;
height: 50vh;
position: relative;
}
.split-sag-kayan {
width: 100%;
padding: 60px 20px;
}
.soft-kart {
justify-content: center;
align-items: center;
padding: 25px;
}
}.mx-auto {
margin-left: auto;
margin-right: auto;
}/* Genel Ayarlar */
.hizmetler-alani {
background-color: #ffffff;
padding: 80px 0px;
}.hizmetler-konteyner {
margin: 0 auto;
}/* Başlık Alanı Stilleri */
.baslik-kismi {
text-align: center;
margin-bottom: 50px;
}.baslik-kismi h2 {
font-size: 33px;
font-weight: 700;
color: #555553;
margin-top: 0px;
margin-bottom: 10px;
}.baslik-kismi p {
font-size: 16px;
color: #555553;
max-width: 900px;
margin: 0 auto;
line-height: 1.6;
}/* Grid Yapısı (Kartların Yanyana Durması İçin) */
.hizmetler-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Masaüstünde 2 eşit kolon */
gap: 30px; /* Kartlar arası boşluk */
}/* Kart Genel Yapısı */
.hizmet-karti {
position: relative;
height: 450px; /* Kart yüksekliği */
border-radius: 4px; /* Hafif oval köşeler */
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}/* Kart İçindeki Resim */
.hizmet-resmi {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease; /* Hover efekti için */
}/* Hover (Üzerine Gelince) Animasyonu */
.hizmet-karti:hover .hizmet-resmi {
transform: scale(1.05); /* Resim hafifçe büyür */
}.hizmet-karti:hover .hizmet-buton {
background-color: #f0b104; /* Buton rengi hafif koyulaşır */
}/* Resim Üzerindeki Karartma (Yazıların okunması için) */
.hizmet-karartma {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Üst taraf saydam, alt taraf siyah olacak şekilde geçiş */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.85) 100%
);
pointer-events: none;
}/* İçerik (Yazılar ve Buton) */
.hizmet-icerik {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
display: flex;
justify-content: space-between;
align-items: flex-end;
box-sizing: border-box;
}.hizmet-metin {
flex: 1;
padding-right: 20px;
}.hizmet-metin h3 {
color: #ffffff;
font-size: 25px;
font-weight: 600;
margin: 0 0 10px 0;
}/* Görseldeki gibi ince detay çizgisi */
.hizmet-cizgi {
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
margin-bottom: 15px;
}.hizmet-metin p {
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
line-height: 1.6;
margin: 0;
/* Metin çok uzunsa 3 satırda keser (...) koyar */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}/* Yuvarlak Ok Butonu */
.hizmet-buton {
width: 45px;
height: 45px;
background-color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #1a202c;
text-decoration: none;
transition: background-color 0.3s ease;
flex-shrink: 0; /* Butonun ezilmesini engeller */
}/* MOBİL UYUM (Responsive) */
@media (max-width: 768px) {
.hizmetler-grid {
grid-template-columns: 1fr; /* Mobilde tek kolon alt alta */
}.hizmetler-baslik-kismi h2 {
font-size: 26px;
}.hizmet-karti {
height: 350px;
}
}/**//* Ana Konteyner - Tam Genişlik ve Sabit Yükseklik */
.sustainability-accordion {
display: flex;
width: 100%;
height: 550px; /* Panellerin yüksekliği */
background-color: #000;
overflow: hidden;
}/* Her Bir Panel (Akordeon Öğesi) */
.acc-item {
position: relative;
flex: 1; /* BAŞLANGIÇTA HEPSİ EŞİT (1 birim alan kaplar) */
cursor: pointer;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Büyüme animasyonu */
}/* === HTML İÇİNDEN GELEN RESMİ ARKA PLAN GİBİ DAVRANDIRAN KOD === */
.acc-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Resmi sündürmez, orantılı keser */
z-index: 1;
}/* Resimlerin üzerine siyah, geçişli gölge (Yazıların okunması için) */
.acc-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 100%),
linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
z-index: 2; /* Resmin üstünde durmasını sağlar */
transition: background 0.5s ease;
opacity: 30%;
}/* Kapalı Durumdaki Alttaki Başlıklar */
.acc-title {
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
text-align: center;
color: #ffffff;
font-size: 22px;
font-weight: 700;
margin: 0;
white-space: nowrap;
z-index: 3; /* Gölgenin de üstünde durur */
opacity: 1;
transition: opacity 0.3s ease;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}.acc-title small {
font-size: 13px;
font-weight: 400;
margin-bottom: 3px;
}/* Açık Durumdaki Uzun İçerik Kutusu */
.acc-content {
position: absolute;
left: 80px;
top: 50%;
transform: translateY(-50%);
width: 380px;
color: #ffffff;
z-index: 3;/* Başlangıçta Görünmez */
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}.acc-content small {
display: block;
margin-bottom: 5px;
}.acc-content h2 {
font-size: 33px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 15px 0;
}.acc-content p {
font-size: 15px;
line-height: 1.5;
margin: 0 0 30px 0;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}/* Şık Çizgili Buton */
.acc-btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: 1.5px solid #ffffff;
border-radius: 30px;
color: #ffffff;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
}.acc-btn svg {
width: 16px;
height: 16px;
margin-left: 10px;
transition: transform 0.3s;
}.acc-btn:hover {
background-color: #ffffff;
color: #000000;
}.acc-btn:hover svg {
transform: translateX(4px);
}/* =========================================
SİHİRLİ HOVER (ÜZERİNE GELME) İŞLEMLERİ
========================================= *//* 1. Üzerine gelinen paneli 6 kat genişlet */
.acc-item:hover {
flex: 6;
}/* 2. Üzerine gelince alttaki kısa başlığı gizle */
.acc-item:hover .acc-title {
opacity: 0;
}/* 3. Üzerine gelince ortadaki uzun yazıları göster */
.acc-item:hover .acc-content {
opacity: 1;
visibility: visible;
transition-delay: 0.2s; /* Hafif gecikmeli gelsin, daha estetik olur */
}/* =========================================
MOBİL VE TABLET UYUMU
========================================= */
@media (max-width: 992px) {
.sustainability-accordion {
flex-direction: column; /* Yan yana yerine alt alta dizilir */
height: 800px;
}.acc-content {
left: 30px;
width: 80%;
}.acc-content h2 {
font-size: 28px;
}
}/**//* Genel Kapsayıcı */
.news-section-wrapper {
width: 100%;
padding: 80px 0px;
}/* Başlık ve Navigasyon (Oklar) */
.news-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}.custom-swiper-nav {
display: flex;
gap: 15px;
}.nav-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #f0b104;
color: white;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}.nav-btn:hover {
background-color: #555553;
}/* Kart Tasarımı */
.news-card {
position: relative;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 25px;
overflow: hidden;
color: white;
background-position: center;
background-size: cover !important;
}
.card-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.85) 100%
);
opacity: 1;
z-index: 1;
}/* Press Release Etiketi */
.badge {
background-color: white;
color: black;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
width: fit-content;
position: relative;
z-index: 2;
}/* Kart Alt İçerik Alanı */
.card-content {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 2;
padding: 30px 0px 15px;
}.date {
font-size: 14px;
font-weight: 600;
position: relative;
z-index: 2;
}.title {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.4;
position: relative;
z-index: 2;
}/* Read More ve Share Aksiyonları */
.card-actions {
display: flex;
align-items: center;
gap: 15px;
font-size: 14px;
font-weight: 600;
position: relative;
z-index: 2;
}.card-actions a,
.card-actions button {
color: white;
text-decoration: none;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 2;
cursor: pointer;
}.divider {
color: rgba(255, 255, 255, 0.5);
position: relative;
z-index: 2;
}/**//* Renk Değişkenleri (Değiştirmesi kolay olsun diye) */
:root {
--dark-charcoal: #555553;
--golden-yellow: #f0b104;
--light-bg: #f7f7f7; /* Çok hafif, temiz bir kırık beyaz */
--border-color: #e6e6e5;
--text-muted: #7a7a78;
}/* Genel Bölüm Ayarları */
.premium-faq-section {
padding: 80px 20px;
background-color: var(--light-bg);
/* Metinler için Inter fontu */
color: var(--dark-charcoal);
position: relative;
width: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-color: #ebebeb;
}.premium-faq-section::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: url("../images/icon.webp");
background-size: 280px;
opacity: 5%;
}.faq-container {
position: relative;
z-index: 1;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.3fr; /* Zarif bir asimetri */
gap: 70px;
align-items: center;
}/* Sol Taraf: Başlıklar */
.faq-subtitle {
color: var(--golden-yellow);
/* Başlıklar ve vurgular için Montserrat fontu */
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}.faq-title {
font-size: 33px;
font-weight: 700;
color: rgb(85, 85, 83);
color: var(--dark-charcoal);
margin: 0 0 24px 0;
line-height: 1.15;
}.faq-desc {
font-size: 15px;
line-height: 1.4;
color: var(--text-muted);
margin-bottom: 45px;
font-weight: 500;
}/* Aksiyon Butonu (Hardal zemin, Koyu gri yazı - Mükemmel Kontrast) */
.faq-contact-btn {
display: inline-block;
background-color: var(--golden-yellow);
color: var(--dark-charcoal);
padding: 14px 32px;
border-radius: 4px; /* Daha keskin/kurumsal köşeler */
text-decoration: none;
font-weight: 700;
font-size: 15px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
text-shadow: 0px;
box-shadow: 0px;
border: 2px solid var(--golden-yellow);
}.faq-contact-btn:hover {
background-color: #fff;
color: var(--golden-yellow);
}/* Sağ Taraf: Akordeon Tasarımı */
.faq-accordion-side {
display: flex;
flex-direction: column;
gap: 12px;
}.faq-item {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 6px;
border-left: 4px solid var(--border-color); /* Hover efekti için hazırlık */
overflow: hidden;
transition: all 0.3s ease;
}/* Soru (Buton) Alanı */
.faq-question {
width: 100%;
text-align: left;
padding: 22px 24px;
background: none;
border: none;
font-size: 16px;
font-weight: 600;
color: var(--dark-charcoal);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}.faq-question:hover {
color: var(--golden-yellow);
}/* Sağdaki Artı İkonu */
.faq-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--dark-charcoal);
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s ease;
}/* Cevap Alanı - CSS Grid Animasyonu */
.faq-answer-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.faq-answer-inner {
overflow: hidden;
}.faq-answer-inner p {
margin: 0;
padding: 0 24px 24px 24px;
color: var(--text-muted);
line-height: 1.5;
font-size: 15px;
}/* -- ACTIVE (AÇIK) DURUM TASARIMI -- */
.faq-item.active {
border-color: var(--border-color);
border-left: 4px solid var(--golden-yellow); /* Sol tarafa şık altın sarısı çizgi */
box-shadow: 0 10px 30px -10px rgba(85, 85, 83, 0.1); /* Koyu gri tonunda hafif gölge */
}.faq-item.active .faq-question {
color: var(--golden-yellow);
}.faq-item.active .faq-icon {
transform: rotate(45deg);
color: var(--golden-yellow);
}.faq-item.active .faq-answer-wrapper {
grid-template-rows: 1fr;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.faq-container {
grid-template-columns: 1fr;
gap: 50px;
}.faq-title {
font-size: 32px;
}
}/**//* CSS Değişkenleri Footer'ın kendisine tanımlandı, globali etkilemez */
.custom-footer-wrapper {
--cf-bg-dark: #555553; /* Airbus Koyu Lacivert/Siyah Zemin */
--cf-border: #555553; /* Sizin Koyu Antrasit Renginiz (Çizgiler) */
--cf-gold: #f0b104; /* 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;
background-image: url("../images/icon2.webp");
z-index: -1;
}/* 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: #f0b104;
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) */
@media (max-width: 992px) {
.custom-footer-grid {
grid-template-columns: 1fr 1fr;
}.custom-footer-brand-col {
grid-column: span 2;
margin-bottom: 20px;
}
}@media (max-width: 768px) {
.custom-footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}.custom-footer-brand-col {
grid-column: span 1;
}.custom-footer-bottom {
display: flex;
border: none !important;
align-items: flex-start;
padding: 0;
}.custom-footer-legal {w
gap: 15px;
}
}@media(max-width:1024px){
.genisleyen-resim-container{
display: none;
}.news-section-wrapper .custom-swiper-nav{
display: none;
}.custom-footer-grid{
display: none;
}.custom-footer-wrapper{
margin-bottom: 35px;
padding-top: 35px !important;
}}