/* Genel Alan Ayarları */
.services-section {
background-color: #f3f4f6; /* Görseldeki gibi açık gri arkaplan */
padding: 60px 20px;
}/* Swiper Kart İçin Gölgelerin kesilmemesi için padding */
.servicesSwiper {
padding-bottom: 50px !important;
padding-top: 20px !important;
}/* Kart Tasarımı */
.service-card {
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 480px; /* Kartların eşit boyda olması için */
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}.services-section .service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}.services-section .card-image img {
width: 100%;
height: 200px;
object-fit: cover;
}.services-section .card-content {
padding: 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}.services-section .card-content h3 {
color: var(--primary-orange); /* Görseldeki lacivert/mavi tonu */
font-size: 20px;
font-weight: 700;
margin-top: 0;
margin-bottom: 12px;
}.services-section .card-content p {
color: #6b7280;
font-size: 15px;
line-height: 1.5;
margin-bottom: 20px;display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}/* Ücretsiz Keşif Butonu (Birinci Görseldeki Outline Stil) */
.services-section .btn-wrapper {
margin-top: auto;
}.services-section .btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
color: var(--primary-orange);
border: 2px solid var(--primary-orange);
padding: 12px 24px;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
width: max-content;
}/* Hover (Üzerine Gelince) Animasyonu */
.services-section .btn-outline:hover {
background-color: var(--primary-orange);
color: #ffffff;
box-shadow: 0 5px 15px rgba(17, 85, 130, 0.3);
}.services-section .btn-outline:hover svg {
transform: translateX(4px); /* Ok işareti sağa kayar */
}.services-section .btn-outline svg {
width: 12px;
transition: transform 0.3s ease;
}/* Pagination (Noktalar) Rengi */
.swiper-pagination-bullet-active {
background-color: var(--primary-orange) !important;
}/**/.company-profile-section {
padding: 50px 20px 80px;
background-color: #f3f4f6; /* Arka plan hafif gri, öne çıkması için */
display: flex;
justify-content: center;
}.cp-container {
max-width: 1200px;
width: 100%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
padding: 60px;
border: 1px solid #eaeaea;
}/* Başlık */
.cp-header {
text-align: center;
margin-bottom: 60px;
}.cp-header .cp-header-title {
font-size: 2.5rem;
color: var(--primary-orange);
font-weight: 700;
margin-top: 15px;
margin-bottom: 15px;
}.cp-header .cp-header-text {
font-size: 1.1rem;
color: #666;
margin: 0 auto;
}/* İçerik Düzeni */
.cp-content {
display: flex;
align-items: center;
gap: 60px;
}/* Sol Görsel Alanı */
.cp-image-side {
flex: 1;
position: relative;
border-radius: 30px;
padding: 10px;
background: #000;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}.cp-image-side img {
width: 100%;
height: auto;
border-radius: 20px;
display: block;
opacity: 0.9;
}/* Dekoratif Çizgi (Görselin ortasındaki detay) */
.cp-decorative-line {
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 80%;
background-color: #e0e7ff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}.cp-decorative-line .dot,
.cp-decorative-line .dot-bottom {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 2px solid #818cf8;
border-radius: 50%;
margin-left: -4px;
}/* Sağ Metin ve Liste Alanı */
.cp-text-side {
flex: 1;
}.cp-features-list {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}.cp-features-list li {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}.cp-features-list .icon-box {
flex-shrink: 0;
width: 26px;
height: 26px;
margin-right: 15px;
margin-top: 3px;
}.cp-features-list p {
font-size: 1.05rem;
color: #222;
line-height: 1.6;
margin: 0;
}.cp-features-list p strong {
color: #111;
font-weight: 600;
}/* Buton Tasarımı */
.cp-btn {
display: inline-block;
background-color: #a3d80f; /* Görseldeki yeşil/sarı tonu */
color: #111;
font-weight: 700;
text-decoration: none;
padding: 15px 35px;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(163, 216, 15, 0.4);
}.cp-btn:hover {
background-color: #8fbf0c;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(163, 216, 15, 0.5);
}/* ========================================= */
/* SCROLL ANİMASYONLARI (BAŞLANGIÇ GİZLİ) */
/* ========================================= */
.hidden-element {
opacity: 0;
visibility: hidden;
}/* Yukarı Kayarak Gelme */
.fade-up {
transform: translateY(40px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
/* Sağdan Kayarak Gelme (Görsel İçin) */
.slide-right {
transform: translateX(-50px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
/* Soldan Kayarak Gelme (Yazılar İçin) */
.slide-left {
transform: translateX(50px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}/* Aktif class'ı eklendiğinde görünür olurlar */
.is-visible {
opacity: 1;
visibility: visible;
transform: translate(0) !important;
}/* Maddelerin tek tek gelmesi (Stagger efekti) */
.cp-text-side.is-visible .stagger-item {
animation: fadeUpStagger 0.5s forwards ease-out;
opacity: 0;
transform: translateY(20px);
}.cp-text-side.is-visible .stagger-item:nth-child(1) {
animation-delay: 0.2s;
}
.cp-text-side.is-visible .stagger-item:nth-child(2) {
animation-delay: 0.4s;
}
.cp-text-side.is-visible .stagger-item:nth-child(3) {
animation-delay: 0.6s;
}
.cp-text-side.is-visible .stagger-item:nth-child(4) {
animation-delay: 0.8s;
}
.cp-text-side.is-visible .stagger-item:nth-child(5) {
animation-delay: 1s;
}@keyframes fadeUpStagger {
to {
opacity: 1;
transform: translateY(0);
}
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.cp-content {
flex-direction: column;
}
.cp-decorative-line {
display: none;
}
.cp-container {
padding: 40px 20px;
}
.cp-header h2 {
font-size: 2rem;
}
}/**//* --- SADECE BLOG ALANI İÇİN ÖZEL CSS (KARIŞMAZ) --- */.ozel-blog-alani {
padding: 70px 20px;
background-color: #f3f4f6;
}.blog-container {
max-width: 1200px;
margin: 0 auto;
}.blog-baslik {
text-align: center;
font-size: 35px;
font-weight: 700;
color: var(--primary-orange);
margin-top: 0px;
margin-bottom: 50px;
}/* İşte İstediğiniz .blog-liste Sınıfı */
.blog-liste {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(220px, 1fr)
); /* Yan yana 3'lü yapı, mobilde alt alta */
gap: 30px; /* Kartlar arası boşluk */
align-items: stretch; /* Kartların boylarının eşit olmasını sağlar */
}/* Kartın Kendisi */
.blog-liste-karti {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}.blog-liste-karti:hover {
transform: translateY(-5px); /* Üzerine gelince zarifçe yukarı kalkar */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}.karti-gorseli {
width: 100%;
height: 180px;
background-color: #1b365d;
border-bottom: 1px solid #f3f4f6; /* Görsel altına ince ayrım çizgisi */
}.karti-gorseli img {
width: 100%;
height: 100%;
object-fit: cover;
}.karti-icerigi {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1; /* İçerik alanını esnetir */
}.karti-baslik {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 15px 0;
color: var(--primary-orange);
}.karti-tarih {
display: flex;
align-items: center;
color: #9ca3af;
font-size: 0.9rem;
margin-bottom: 20px;
}.karti-tarih svg {
width: 16px;
height: 16px;
margin-right: 8px;
stroke: #9ca3af;
}.karti-ozet {
color: rgb(107, 114, 128);
font-size: 15px;
line-height: 1.5;
margin-top: 0px;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}/* Linkin Dağılmasını Engelleyen Sihirli Kısım */
.karti-link {
margin-top: auto; /* Yazı kısa da olsa, uzun da olsa linki en alta sabitler */
color: var(--primary-orange);
text-decoration: none;
font-weight: 400;
font-size: 0.95rem;
transition: color 0.2s;
display: inline-block;
}.karti-link:hover {
color: #000;
text-decoration: underline;
}/* Alt Buton */
.blog-buton-alani {
text-align: center;
margin-top: 60px;
}/* Telefonlar için responsive (uyumlu) ayar */
@media (max-width: 768px) {
.blog-baslik {
font-size: 2rem;
}
.ozel-blog-alani {
padding: 50px 15px;
}
}/**//* Font ayarı (Projenizin fontuna göre değişebilir) */
.projeler-home {
padding: 60px 20px 0px;
background-color: #ffffff;
overflow: hidden;
}
.projeler-home .projelerSwiper {
width: calc(100% + 140px);
}.projeler-container {
margin: 0 auto;
position: relative;
}.projeler-title {
font-size: 30px;
font-weight: 700;
color: var(--primary-orange);
margin-bottom: 30px;
}/* Swiper Slaytları */
.projelerSwiper {
padding-bottom: 20px;
}.proje-card .swiper-slide {
height: auto; /* Kartların eşit boyda olması için flex yapısıyla birlikte çalışır */
}/* Kart Tasarımı */
.proje-card {
background-color: #f7f7f7;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}.proje-card .card-img-wrapper {
position: relative;
width: 100%;
height: 220px;
}.proje-card .card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}.proje-card .card-badge {
position: absolute;
top: 16px;
left: 16px;
background-color: rgba(255, 255, 255, 0.9);
color: var(--primary-orange);
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}.proje-card .card-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1; /* İçeriğin kartı doldurmasını sağlar */
}.proje-card .card-content h3 {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: var(--primary-orange);
margin-top: 0;
margin-bottom: 12px;
}.proje-card .card-content p {
font-size: 15px;
color: #444;
line-height: 1.4;
margin-bottom: 24px;
flex-grow: 1; /* Read story butonunu her zaman en alta iter */
}.proje-card .read-story {
display: inline-flex;
align-items: center;
gap: 8px;
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 15px;
}.proje-card .read-story:hover {
text-decoration: underline;
}/* Alt Kontrol Çubuğu (Link ve Oklar) */
.projeler-bottom-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
padding-top: 10px;
}.all-stories-link {
color: #111;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid #111;
padding-bottom: 2px;
}.all-stories-link:hover {
color: #555;
border-bottom-color: #555;
}.projeler-navigation {
display: flex;
gap: 12px;
margin-left: auto;
}.projeler-prev,
.projeler-next {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background-color: #f5f5f5;
color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}.projeler-prev:hover,
.projeler-next:hover {
background-color: #e0e0e0;
}/* Swiper tıklandığında pasif olan buton rengi */
.swiper-button-disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: transparent !important;
}/**//* 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: 45px;
font-weight: 700;
margin-bottom: 20px;
}.resim-ustu-yazi .textss {
font-size: 18px;
margin-top: 0px;
margin-bottom: 40px;
}
.resim-ustu-yazi .btn-dolgu {
color: #fff;
border-color: #fff;
}
.resim-ustu-yazi .btn-dolgu:hover {
border-color: #fff;
}/* 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 */
}/**//* Ana Kapsayıcı ve Tipografi */
.yeni-hizmetler-section {
margin: 0 auto;
padding: 60px 20px;
color: #1a1a1a;
}.yeni-hizmetler-header {
text-align: center;
margin-bottom: 50px;
}.yeni-hizmetler-header h2 {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 10px;
}.yeni-hizmetler-header p {
font-size: 1.1rem;
color: #666;
}/* Grid Yapısı (Sol Görsel, Sağ Liste) */
.yeni-hizmetler-container {
display: flex;
gap: 60px;
align-items: center;
}/* --- SOL TARAF: GÖRSEL --- */
.yeni-hizmetler-display {
flex: 1;
max-width: 55%;
}.yeni-hizmetler-img-wrapper {
position: relative;
width: 100%;
padding-top: 65%; /* Görsel oranı */
border-radius: 4px;
overflow: hidden;
background-color: #ddd; /* Yüklenirken gri arkaplan */
}#yeni-hizmetler-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease-in-out;
}.yeni-hizmetler-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0) 100%
);
padding: 40px 30px 20px 30px;
color: #fff;
transition:
opacity 0.4s ease-in-out,
transform 0.4s ease;
}.yeni-hizmetler-overlay h3 {
margin: 0 0 5px 0;
font-size: 1.5rem;
font-weight: 600;
}.yeni-hizmetler-overlay p {
margin: 0;
font-size: 1rem;
color: #e0e0e0;
line-height: 1.4;
}/* --- SAĞ TARAF: İKONLU LİSTE --- */
.yeni-hizmetler-list {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 Kolon */
row-gap: 20px; /* 4 Satır arası boşluk */
column-gap: 20px;
}.yeni-hizmetler-item {
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
padding: 10px;
transition: all 0.3s ease;
border-radius: 8px;
border: solid 1px #f0f0f0;
color: var(--primary-orange);
}.yeni-hizmetler-item:hover,
.yeni-hizmetler-item.active {
color: #fff;
background-color: var(--primary-orange);
}.yeni-hizmetler-item:hover svg,
.yeni-hizmetler-item.active svg {
stroke: #fff;
}.yeni-hizmetler-icon {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #333;
transition: color 0.3s ease;
}.yeni-hizmetler-icon svg {
width: 100%;
height: 100%;
}.yeni-hizmetler-text {
font-size: 1.1rem;
font-weight: 600;
position: relative;
}/* ============================================================
MOBİL UYUMLULUK (RESPONSIVE) AYARLARI
============================================================ */@media (max-width: 1024px) {
/* Projeler bölümündeki taşma efektini tabletlerde sıfırlayalım */
.projeler-home .projelerSwiper {
width: 100%;
}
}@media (max-width: 992px) {
/* Yeni Hizmetler (İkonlu Alan) */
.yeni-hizmetler-container {
flex-direction: column;
gap: 30px;
}
.yeni-hizmetler-display {
max-width: 100%;
order: 1; /* Görsel üstte */
}
.yeni-hizmetler-list {
width: 100%;
order: 2; /* İkonlar altta */
}/* Şirket Profili (Zaten bir kısmı vardı, pekiştirelim) */
.cp-container {
padding: 30px 20px;
}
.cp-header .cp-header-title {
font-size: 2rem;
}
}@media (max-width: 768px) {
/* Genel Seksiyon Boşlukları */
section {
padding: 40px 15px !important;
}/* Başlık Fontları */
.cp-header-title, .blog-baslik, .projeler-title, .resim-ustu-yazi h2 {
font-size: 24px !important;
margin-bottom: 20px !important;
}/* Slider (Eğer yüksekliği çok fazlaysa) */
.slider-container {
height: 500px;
}
.textic .text1 { font-size: 1.5rem; }
.textic .text2 { font-size: 1rem; }/* Yeni Hizmetler Listesi - Mobilde Tek Sütun */
.yeni-hizmetler-list {
grid-template-columns: 1fr;
gap: 10px;
}
.yeni-hizmetler-img-wrapper {
padding-top: 56.25%; /* 16:9 Oranı */
}/* Genişleyen Resim (GSAP Alanı) */
.genisleyen-resim-container {
height: 80vh; /* Mobilde çok uzun durmasın */
}
.genisleyen-resim-cerceve {
width: 95%; /* Mobilde daha geniş başlasın */
height: 70vh;
}
.resim-ustu-yazi {
width: 90%;
}
.resim-ustu-yazi .textss {
font-size: 14px;
margin-bottom: 20px;
}
.resim-ustu-yazi .btn-dolgu {
font-size: 12px;
padding: 10px 15px;
}/* Hizmet Kartları (Swiper) */
.service-card {
height: auto; /* Mobilde içerik kadar uzasın */
}
.services-section .card-content {
padding: 15px;
}/* Projeler Navigasyon (Oklar) */
.projeler-navigation {
display: none; /* Mobilde kaydırmak yeterli, okları gizleyebiliriz */
}
.projeler-title {
text-align: center;
width: 100%;
}/* Blog Kartları */
.blog-liste {
grid-template-columns: 1fr; /* Mobilde tek tek */
}
}@media (max-width: 480px) {
/* Çok küçük ekranlar için ekstra dokunuşlar */
.btn-group {
flex-direction: column;
width: 100%;
}
.btn-group a {
width: 100%;
text-align: center;
}
.cp-header .cp-header-text {
font-size: 14px;
}
.yeni-hizmetler-text {
font-size: 0.95rem;
}
}@media(max-width:1024px){
.genisleyen-resim-container{
display: none;
}
.cp-header {
margin-bottom: 30px;
}
}