.home-hakkimizda3 {
padding: 80px 0;
background-color: #f9f9f9;
font-family: sans-serif; /* Sitenizin fontunu buraya yazın */
}.home-hakkimizda3 .yazi_alan{
width: 100%;
height: auto;
padding: 0px 75px 0px 75px;
}.h3-flex-container {
display: flex;
gap: 40px;
max-width: 1320px;
margin: 0 auto;
}/* Sol Sütun (Küçük Resim ve Üst Başlık) */
.h3-left {
flex: 0 0 22%;
}.h3-left .demo-label {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
}.h3-left img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}/* Orta Sütun (Metin İçerikleri) */
.h3-middle {
flex: 1;
padding: 0 20px;
}.h3-middle h1 {
font-size: 35px;
font-weight: 600;
line-height: 45px;
margin-bottom: 30px;
color: #1a1a1a;
margin-top: 0;
text-transform: capitalize;
}.h3-middle .intro-text {
font-size: 16px;
color: #888;
line-height: 1.6;
margin-bottom: 50px;
max-width: 500px;
}/* Özellik Maddeleri */
.h3-feature {
display: flex;
align-items: flex-start;
margin-bottom: 35px;
}.h3-icon {
width: 48px;
height: 48px;
background-color: #2c2e33;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
margin-right: 20px;
}.h3-f-content h3 {
font-size: 19px;
font-weight: 700;
margin: 0 0 8px 0;
}.h3-f-content p {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0;
}/* Sağ Sütun (Büyük Resim) */
.h3-right {
flex: 0 0 35%;
}.h3-right img {
width: 100%;
height: 600px; /* Görseldeki gibi uzun durması için */
object-fit: cover;
display: block;
}/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */@media (max-width: 1200px) {
.h3-middle h1 {
font-size: 30px;
line-height: 30px;
}
}@media (max-width: 991px) {
.h3-flex-container {
flex-direction: column; /* Sütunları alt alta diz */
gap: 30px;
}
.h3-left, .h3-middle, .h3-right {
flex: 1 1 100%;
width: 100%;
}
.h3-right img {
height: 400px; /* Mobilde çok uzun olmasın */
}
.h3-middle {
order: 2; /* Metin mobilde resmin altına gelsin isterseniz */
padding: 0;
}
.h3-left { order: 1; }
.h3-right { order: 3; }
}/**//* ÜRÜNLER ALANI */
.products-section {
position: relative;
padding: 80px 0;
background: linear-gradient(to bottom, #000 480px, #fff 480px);
overflow: hidden;
}
.custom-container { max-width: 1440px; margin: 0 auto; padding: 0 20px; overflow: hidden;}
.products-header {
display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; color: #fff;
}
.header-text h2 { font-size: 36px; font-weight: 700; margin-bottom: 10px; }
.header-text p { font-size: 15px; color: #aaa; max-width: 550px; line-height: 1.6; }.view-all-btn {
position: relative;
color: #ffffff;
height: 70px;
line-height: 70px;
display: inline-flex;
padding: 0 31px;
position: relative;
font-size: 20px;
font-weight: 600;
border-radius: 5px;
transition: opacity 0.65s, transform 0.60s;
overflow: hidden;
align-items: center;
bordeR: solid 2px #fff;
z-index: 9;
}.view-all-btn:before,
.view-all-btn:after {
position: absolute;
top: 50%;
content: '';
width: 20px;
height: 20px;
background: #000000;
}.view-all-btn i {
font-size: 17px;
position: relative;
color: #fff;
z-index: 1;
}.view-all-btn p {
color: #fff;
font-weight: 600;
z-index: 2;
position: relative;
display: flex;
font-size: 15px;
display: flex;
align-items: center;
margin-bottom: 0px !important;
padding-bottom: 0px;
}.view-all-btn:before,
.view-all-btn:after {
position: absolute;
top: 50%;
content: '';
width: 20px;
height: 20px;
background: #be212b;
opacity: 0;
transition: opacity 0.65s, transform 0.60s;
}.view-all-btn:before {
left: -20px;
-webkit-transform: translate(-50%, -50%);
transition: opacity 0.65s, transform 0.60s;
transform: translate(-50%, -50%);
}.view-all-btn:after {
background: #be212b;
right: -20px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
transition: opacity 0.65s, transform 0.60s;
}.view-all-btn:hover:before {
left: 0px;
width: 50%;
height: 100%;
transform: translate(0%, 0%);
top: 0px;
opacity: 1;
transition: opacity 0.65s, transform 0.60s;
}.view-all-btn:hover:after {
right: 0px;
width: 50%;
height: 100%;
transform: translate(0%, 0%);
top: 0px;
opacity: 1;
transition: opacity 0.65s, transform 0.60s;
}.slider-wrapper { position: relative; width: 100%; }.slider-track {
display: flex;
gap: 20px;
will-change: transform;
}/* Her kart 4'lü düzen için ekranın %25'inden gap payı düşülerek hesaplanır */
.product-card {
flex: 0 0 calc(25% - 15px);
position: relative;
height: 520px;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #fff;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 30px;
background-color: #222;
}
.card-bg {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-size: cover; background-position: center; z-index: 1;
}
.product-card::after {
content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%;
background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, transparent 100%);
z-index: 2;
}
.card-content { position: relative; z-index: 3; }
.card-content h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.card-content p { font-size: 14px; color: #ccc; margin-bottom: 25px; line-height: 1.5; }
.detail-btn {
display: inline-flex; align-items: center; gap: 10px;
border: 1px solid rgba(255,255,255,0.4); padding: 10px 22px; font-size: 13px; color: #fff; transition: 0.3s;
}
.product-card:hover .detail-btn { background: #fff; color: #000; }@media (max-width: 1200px) {
.product-card { flex: 0 0 calc(50% - 10px); } /* Tablette 2'li */
}
@media (max-width: 768px) {
.products-section { background: #000; }
.product-card { flex: 0 0 100%; height: 450px; } /* Mobilde tekli */
.products-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}@media(max-width:1024px){
.h3-right,
.h3-left{
display: none;
}.home-hakkimizda3 {
padding: 60px 20px;
}.home-hakkimizda3 .yazi_alan{
padding: 0;
}.header-text h2{
margin-top: 0;
}.products-section {
padding: 60px 0;
}
}.sertifikalar-wrapper2-gorseller {
display: grid;
}.sertifikalar-wrapper2 {
width: 100%;
overflow: hidden;
padding: 0px 0 0px;
background: #fff;
position: relative;
border-top: solid 1px transparent;
border-color: #c9ba9b32;
}.slider-track2 {
display: flex;
gap: 40px; /* Sertifikalar arası boşluk */
width: max-content;
animation: scroll 30s linear infinite; /* 30 saniyede bir tur */
}.sertifika-slide2 {
width: 120px;
height: 115px;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}.sertifika-slide2 img {
max-width: 110%;
max-height: 110%;
}.sertifika-slide2:hover {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.1);
}/* Otomatik akış animasyonu */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
} /* %50'ye kadar gidip başa dönüyor */
}/* Mobil için */
@media (max-width: 768px) {
.sertifika-slide2 {
width: 140px;
}
.slider-track2 {
gap: 20px;
animation-duration: 20s;
} /* Mobilde biraz daha hızlı */
}/* Üzerine gelince akışı durdur */
.sertifikalar-wrapper2:hover .slider-track2 {
animation-play-state: paused;
}/**/.HomeBlog {
padding: 70px 0px;
position: relative;
background: #F5F6F6;
}.HomeBlog .swiper-oklar {
position: relative;
display: flex;
justify-content: end;
}.HomeBlog .swiper-oklar .swiper-button-next,
.HomeBlog .swiper-oklar .swiper-button-prev {
position: relative;
top: 0px;
left: 0px;
right: 0px;
margin-top: 0px;
background: transparent;
font-size: 26px;
color: #170566;
}.HomeBlog .swiper-oklar .swiper-button-prev {
margin-right: 40px;
}.HomeBlog .swiper-oklar .swiper-button-next:after,
.HomeBlog .swiper-oklar .swiper-button-prev:after {
display: none;
}.HomeBlog .swiper-oklar .swiper-button-next:hover,
.HomeBlog .swiper-oklar .swiper-button-prev:hover {
color: #00923F;
}.HomeBlog .blog-liste {
width: 100%;
height: auto;
}.HomeBlog .blog-liste .blog-liste-resim {
width: 100%;
height: 180px;
overflow: hidden;
}.HomeBlog .blog-liste .blog-liste-resim img {
width: 100%;
height: 100%;
object-fit: cover !important;
}.HomeBlog .blog-liste .tarih {
width: 100%;
font-size: 12px;
margin-bottom: 15px;
}.HomeBlog .blog-liste h3 {
width: 100%;
font-weight: 500;
font-size: 18px;
line-height: 24px;
display: block;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-align: justify;
}.HomeBlog .blog-liste p {
width: 100%;
font-size: 14px;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
display: -webkit-box;
text-align: justify;
}/* Swiper sınıflarını simüle eden temel CSS */
.gallery-thumbs-blog {
overflow: hidden;
position: relative;
width: 100%;
}.swiper-wrapper {
display: flex;
transition: transform 0.5s ease-out;
width: 100%;
cursor: grab;
user-select: none;
}.swiper-wrapper:active {
cursor: grabbing;
}.swiper-slide {
flex-shrink: 0;
width: 100%; /* JS ile dinamik hesaplanacak */
box-sizing: border-box;
}/* Okları görünür kılmak için (zaten mevcut olabilir) */
.swiper-oklar {
display: flex;
gap: 10px;
}
.swiper-button-prev, .swiper-button-next {
cursor: pointer;
}/* --- HOME BLOG YENİ TASARIM --- */
.HomeBlog {
padding: 100px 0;
background-color: #fcfcfc; /* Hafif kırık beyaz */
overflow: hidden;
}.HomeBlog .container {
max-width: 1400px;
}/* Üst Başlık ve Oklar */
.HomeBlog .site-baslik1 small {
display: block;
color: #be212b; /* Tema rengi */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
font-size: 13px;
}.HomeBlog .site-baslik1 h3 {
font-size: 32px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
}/* Swiper Okları Tasarımı */
.HomeBlog .swiper-oklar {
display: flex;
justify-content: flex-end;
gap: 15px;
}.HomeBlog .swiper-button-prev,
.HomeBlog .swiper-button-next {
width: 50px;
height: 50px;
background: #fff;
border: 1px solid #eee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}.HomeBlog .swiper-button-prev:hover,
.HomeBlog .swiper-button-next:hover {
background: #be212b;
border-color: #be212b;
}.HomeBlog .swiper-button-prev:hover i,
.HomeBlog .swiper-button-next:hover i {
color: #fff;
}.HomeBlog .swiper-button-prev i,
.HomeBlog .swiper-button-next i {
font-size: 20px;
color: #1a1a1a;
}/* Blog Kart Tasarımı */
.HomeBlog .blog-liste {
display: block;
background: #fff;
border-radius: 15px;
overflow: hidden;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
border: 1px solid #f0f0f0;
box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}/* Resim Alanı */
.HomeBlog .blog-liste-resim {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}.HomeBlog .blog-liste-resim img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}/* İçerik Alanı */
.HomeBlog .blog-content {
padding: 25px;
}.HomeBlog .blog-liste .tarih {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #be212b;
background: rgba(190, 33, 43, 0.05);
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 15px;
}.HomeBlog .blog-liste h3 {
font-size: 19px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 52px; /* Başlık hizası için sabit yükseklik */
transition: color 0.3s;
}.HomeBlog .blog-liste:hover h3 {
color: #be212b;
}.HomeBlog .blog-liste p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 67px; /* Açıklama hizası için sabit yükseklik */
}/* Mobil Düzenlemeler */
@media (max-width: 991px) {
.HomeBlog { padding: 60px 0; }
.HomeBlog .swiper-oklar { display: none; } /* Mobilde kaydırma elle yapılır */
.HomeBlog .site-baslik1 { text-align: center !important; margin-bottom: 30px; }
.HomeBlog .blog-liste-resim { height: 200px; }
}