/* --- HAKKIMIZDA BÖLÜMÜ ANA STİLLERİ --- */
.hakkimizda {
display: flex;
align-items: center;
}.hakkimizda .container {
display: flex;
align-items: center;
gap: 5%; /* Kolonlar arası boşluk */
max-width: 1200px;
margin: 100px auto 0px; /* Sayfada ortalamak ve boşluk bırakmak için */
}/* --- Sol Kolon: İçerik Stilleri --- */
.hakkimizda__icerik-kolonu {
flex: 1; /* Esnek genişlik */
min-width: 0; /* Flexbox'ta taşmayı engeller */
}.hakkimizda__ikon-wrapper {
background-color: #f6efe8; /* İkonun arkasındaki daire rengi */
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
}.hakkimizda__ikon {
width: 45px;
height: auto;
}.hakkimizda__baslik {
font-size: 44px;
font-weight: 700;
color: #4a4a4a; /* Koyu kahverengi/gri tonu */
line-height: 1.2;
margin: 0 0 20px 0;
}.hakkimizda__divider {
width: 80px;
height: 3px;
background-color: #4a4a4a;
margin-bottom: 30px;
border: none;
}.hakkimizda__metin {
margin-bottom: 50px;
}.hakkimizda__metin p {
font-size: 16px;
line-height: 1.7;
color: #666;
margin: 0 0 1.2em 0;
}.hakkimizda__metin strong {
font-weight: 700;
color: #4a4a4a; /* Kalın metinleri daha belirgin yapar */
}/* --- Sağ Kolon: Görsel Stilleri --- */
.hakkimizda__gorsel-kolonu {
flex: 1;
min-width: 0;
}.hakkimizda__gorseller {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütunlu grid */
gap: 15px; /* Görseller arası boşluk */
}.hakkimizda__gorsel-item {
width: 100%;
height: 400px; /* Görsel yüksekliği, isteğe göre ayarlanabilir */
object-fit: cover; /* Görselin kutuya sığarken bozulmasını engeller */
display: block;
border-radius: 5px; /* Hafif yuvarlak köşeler */
}.hakkimizda__gorsel-kolonu {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}.hakkimizda__gorseller {
position: relative;
width: 100%;
max-width: 500px; /* Alanın genişliği */
height: 550px; /* Alanın toplam yüksekliği (resimler kaydığı için biraz fazla verdik) */
}.hakkimizda__gorsel-item {
position: absolute;
width: 50%; /* Resimlerin genişliği (alanın %70'ini kaplar) */
height: 350px; /* Resimlerin yüksekliği */
object-fit: cover;
border-radius: 12px;
border: 6px solid #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.5s ease-in-out;
}
/* 1. Resim - En Arkada ve En Üstte */
.hakkimizda__gorsel-item:nth-child(1) {
top: 0;
left: 0;
z-index: 1;
}/* 2. Resim - Ortada */.hakkimizda__gorsel-item:nth-child(2) { /* Yukarıdan mesafe */left: 25%; /* Soldan mesafe */z-index: 2;bottom: 0px;}/* 3. Resim - En Önde ve En Altta */
.hakkimizda__gorsel-item:nth-child(3) {top: 30px; /* Yukarıdan mesafe */left: 60%; /* Soldan mesafe */z-index: 3;}/* Hover Efekti: Üzerine gelinen resim öne çıksın */.hakkimizda__gorsel-item:hover {
z-index: 10;
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
border-color: #f1f1f1; /* Hafif renk değişimi */
}/* Mobil Uyumluluk */@media (max-width: 768px) {
.hakkimizda__gorseller {
height: 450px;
}.hakkimizda__gorsel-item {
width: 80%;
height: 250px;
}
}/* --- MOBİL UYUMLULUK (RESPONSIVE) AYARLARI --- *//* Tablet ve daha küçük ekranlar için */
@media (max-width: 992px) {
.hakkimizda__baslik {
font-size: 36px;
}
.hakkimizda__gorsel-item {
height: 200px;
}
}/* Mobil cihazlar için */
@media (max-width: 768px) {
.hakkimizda {
flex-direction: column; /* Kolonları alt alta getir */
text-align: center; /* İçeriği ortala */
margin: 40px auto;
}.hakkimizda__ikon-wrapper {
margin-left: auto;
margin-right: auto;
}.hakkimizda__divider {
margin-left: auto;
margin-right: auto;
}.hakkimizda__gorsel-kolonu {
width: 100%;
margin-top: 40px; /* Metin ve görseller arasına boşluk koy */
}.hakkimizda__baslik {
font-size: 32px;
}
}/**//* --- ORTAK ALAN --- */
.collection-section {
max-width: 1400px;
margin: 100px auto;
padding: 0 0px;
/* Oklar için kenardan biraz boşluk bıraktım */
position: relative;
}.collection-section .swiper-wrapper {
padding: 15px;
}.section-title-genel {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}.section-title {
font-size: 1.7rem;
margin-bottom: 30px;
color: #2c211b;
position: relative;
padding-left: 20px;
margin-bottom: 0px;
}.section-title strong {
color: #e30613;
font-weight: 700;
}.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 80%;
background-color: #e30613;
}/* --- KART TASARIMI --- */
.collection-card {
display: block;
position: relative;
width: 100%;
height: 420px;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}.collection-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* %50 Siyahlık */
opacity: 0; /* Başlangıçta gizli */
z-index: 3; /* Resmin üstünde, yazının altında */
transition: opacity 0.4s ease;
pointer-events: none; /* Tıklamayı engellemesin */
}.collection-card:hover::before {
opacity: 1;
}/* --- KART HOVER VE BUTON EFEKTİ --- *//* 1. Siyahlık Katmanı (Overlay) */
.collection-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* %50 Siyahlık */
opacity: 0; /* Başlangıçta gizli */
z-index: 3; /* Resmin üstünde, yazının altında */
transition: opacity 0.4s ease;
pointer-events: none; /* Tıklamayı engellemesin */
}/* Hover olunca siyahlık görünür olsun */
.collection-card:hover::before {
opacity: 1;
}/* 2. "Ürünü İncele" Butonu */
.view-btn {
width: 156px;
position: absolute;
bottom: -50px; /* Kartın altında gizli başlar */
left: 50%;
transform: translateX(-50%); /* Ortalar */
background-color: #fff; /* Beyaz buton */
color: #000; /* Siyah yazı */
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
padding: 12px 30px;
border-radius: 30px; /* Oval kenarlar */
z-index: 4; /* En üstte görünsün */
opacity: 0;/* Animasyon Ayarları */
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /* Çok şık kayma efekti */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}/* Hover olunca buton yukarı kaysın */
.collection-card:hover .view-btn {
bottom: 40px; /* Aşağıdan 40px yukarı çıkar */
opacity: 1;
}/* Butona gelince buton rengi değişsin (Opsiyonel) */
.view-btn:hover {
background-color: #e30613; /* Altın sarısı */
color: #fff;
}/* 3. Kategori İsmi Ayarı */
/* Siyahlık geldiğinde yazının soluklaşmaması için z-index'i yüksek tutuyoruz */
.cat-name {
z-index: 4;
}.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
margin-top: -25px;
}.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}/* Yazı Alanı */
.cat-name {
position: absolute;
bottom: 25px;
width: 100%;
display: flex;
justify-content: center;
left: 0px;
color: #1a1a1a;
font-size: 20px;
font-weight: 700;
z-index: 2;
transition: transform 0.3s ease;
}/* Hover Efektleri */
.collection-card:hover .image-wrapper img {
transform: scale(1.08);
}.collection-card:hover .cat-name {
transform: translateY(-8px);
}/* --- ÖZEL NAVİGASYON OKLARI --- */
.swiper-button-next.custom-next,
.swiper-button-prev.custom-prev {
color: #2c211b;
/* Koyu kahve ok rengi */
background: #fff;
/* Beyaz arka plan */
width: 50px;
height: 50px;
border-radius: 50%;
/* Tam yuvarlak */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
/* Hafif gölge */
transition: all 0.3s ease;
opacity: 0.9;
}/* Okların İçeriğini Temizle (Swiper'ın varsayılan oklarını kaldırıyoruz) */
.swiper-button-next:after,
.swiper-button-prev:after {
content: "" !important;
display: none;
}/* FontAwesome İkonlarını Ortalama */
.custom-next i,
.custom-prev i {
font-size: 18px;
line-height: 50px;
/* Dikey ortalama */
}/* Hover Durumu */
.swiper-button-next.custom-next:hover,
.swiper-button-prev.custom-prev:hover {
background: #2c211b;
/* Arka plan koyu olsun */
color: #fff;
/* Ok beyaz olsun */
transform: scale(1.1);
/* Biraz büyüsün */
}/* Konumlandırma Ayarı (Slider'ın biraz dışına taşsın) */
.swiper-button-prev.custom-prev {
left: 0px;
}.swiper-button-next.custom-next {
right: 0px;
}.mb-0 {
margin-bottom: 0px;
}
.pb-0 {
padding-bottom: 0px;
}/* --- PARALLAX BANNER --- */
.parallax-banner {
width: 100%;
height: 450px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 80px 0;
}.banner-overlay {
background: rgba(0, 0, 0, 0.35);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}.banner-content {
text-align: center;
color: #fff;
padding: 20px;
}.banner-content strong {
font-size: 3rem;
margin-bottom: 12px;
display: block;
}.banner-content {
font-size: 1.2rem;
margin-bottom: 30px;
letter-spacing: 0.5px;
display: block;
}/* --- MOBİL UYUM --- */
@media (max-width: 768px) {
.collection-section {
padding: 0 15px;
}/* Mobilde okları gizle, kullanıcı parmakla kaydırsın */
.swiper-button-next.custom-next,
.swiper-button-prev.custom-prev {
display: none;
}.parallax-banner {
background-attachment: scroll;
height: auto;
}.banner-content h3 {
font-size: 2rem;
}
}/**//* --- NEDEN BİZ BÖLÜMÜ --- */
.neden-biz-section {
padding: 0px 0px 100px;
background-color: #fff;
overflow: hidden; /* Taşmaları engelle */
}.neden-biz-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center; /* Dikey ortalama */
justify-content: space-between;
gap: 60px;
}/* --- SOL TARAFA RESİM --- */
.neden-biz-image-box {
flex: 1; /* Yarım alan kapla */
position: relative;
display: flex;
justify-content: center;
}.neden-biz-img {
width: 100%;
max-width: 500px;
height: auto;
object-fit: contain;
animation: floatNut 6s ease-in-out infinite; /* Hafif süzülme animasyonu */
}@keyframes floatNut {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}/* --- SAĞ TARAF İÇERİK --- */
.neden-biz-content {
flex: 1; /* Diğer yarım alan */
padding-right: 20px;
}/* Başlık */
.neden-biz-title {
font-size: 1.8rem;
color: #2c211b; /* Koyu kahve */
margin-bottom: 10px;
line-height: 1.2;
}.neden-biz-subtitle {
font-size: 1.1rem;
color: #777;
margin-bottom: 40px;
}/* --- MADDELER (Feature Items) --- */
a.neden-biz-item {
display: flex;
align-items: flex-start; /* Üstten hizala */
margin-bottom: 30px;
text-decoration: none;
}.neden-biz-item:last-child {
margin-bottom: 0px;
}/* İkon Kutusu */
.neden-biz-icon {
flex-shrink: 0; /* İkonun küçülmesini engelle */
width: 50px;
height: 50px;
margin-right: 20px;
color: #e30b18; /* Kiremit/Kırmızı ton (Referanstaki renk) */
display: flex;
align-items: center;
justify-content: center;
}.neden-biz-icon svg {
width: 40px;
height: 40px;
stroke-width: 1.5; /* İkon çizgisi inceliği */
fill: #e30b18;
}/* Metin Kutusu */
.neden-biz-text h3 {
font-size: 1.25rem;
font-weight: 600;
color: #e30b18; /* Başlık da ikon renginde */
margin-bottom: 8px;
}.neden-biz-text p {
font-size: 15px;
line-height: 1.4;
font-weight: 400;
color: #555; /* Okunaklı gri */
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.neden-biz-container {
flex-direction: column; /* Mobilde alt alta olsun */
text-align: left;
}.neden-biz-image-box {
margin-bottom: 40px;
}.neden-biz-img {
max-width: 80%; /* Resim mobilde çok büyük olmasın */
}.neden-biz-title {
font-size: 2rem;
}
}/**//* --- ANA KAPSAYICI (Split Screen) --- */
.split-cta-section {
display: flex;
width: 100%;
min-height: 600px; /* Bölümün yüksekliği */
background-color: #222; /* Yüklenene kadar koyu renk */
}/* --- SOL TARAFTAKİ RESİM ALANI --- */
.cta-image-side {
flex: 1; /* %50 Genişlik */
position: relative;
overflow: hidden;
}.cta-image-side img {
width: 100%;
height: 100%;
object-fit: cover; /* Resmi alana yay */
transition: transform 0.6s ease;
}/* Resme gelince hafif büyüme efekti (Opsiyonel) */
.cta-image-side:hover img {
transform: scale(1.05);
}/* --- SAĞ TARAFTAKİ İÇERİK ALANI --- */
.cta-content-side {
flex: 1; /* %50 Genişlik */
background-color: #262626; /* Görseldeki koyu antrasit tonu */
color: #fff;
display: flex;
flex-direction: column;
justify-content: center; /* Dikey ortala */
align-items: center; /* Yatay ortala */
padding: 60px;
text-align: center;
}.cta-content-wrapper {
max-width: 550px; /* Metinler çok yayılmasın */
}/* Başlık */.cta-title {
font-size: 28px;
font-weight: 400;
margin-bottom: 25px;
letter-spacing: 0.5px;
color: #fff;
}/* Açıklama Metni */
.cta-description {
font-size: 16px;
line-height: 1.6;
color: #dcdcdc; /* Tam beyaz değil, göz yormayan gri-beyaz */
margin-bottom: 40px;
font-weight: 500;
}/* --- BUTON GRUBU --- */
.cta-buttons {
display: flex;
gap: 20px; /* Butonlar arası boşluk */
justify-content: center;
}/* Ortak Buton Ayarları */
.btn-primary,
.btn-outline {
text-decoration: none;
padding: 15px 35px;
font-size: 0.95rem;
border-radius: 5px; /* Görseldeki gibi hafif köşeli */
transition: all 0.3s ease;
font-weight: 500;
letter-spacing: 0.5px;
white-space: nowrap; /* Mobilde metin kaymasın */
}/* 1. Buton: Dolu Beyaz (Talep Formu) */
.btn-primary {
background-color: #fff;
color: #262626;
border: 2px solid #fff;
}.btn-primary:hover {
background-color: #dcdcdc; /* Hoverda hafif gri */
border-color: #dcdcdc;
transform: translateY(-2px);
}/* 2. Buton: Sadece Çerçeve (Bize Ulaşın) */
.btn-outline {
background-color: transparent;
color: #fff;
border: 1px solid #fff; /* İnce beyaz çizgi */
}.btn-outline:hover {
background-color: #fff;
color: #262626;
transform: translateY(-2px);
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.split-cta-section {
flex-direction: column; /* Alt alta diz */
}.cta-image-side {
height: 300px; /* Mobilde resim yüksekliği */
}.cta-content-side {
padding: 40px 20px;
}.cta-title {
font-size: 2rem;
}.cta-buttons {
flex-direction: column; /* Butonları alt alta al */
width: 100%;
}.btn-primary,
.btn-outline {
width: 100%; /* Tam genişlik */
text-align: center;
}
}/**/.footer-merkezi {
background-color: #f1f1f1; /* Neredeyse Siyah */
color: #1c1c1c;
padding: 50px 20px 20px;
text-align: center;
}.footer-content {
max-width: 800px;
margin: 0 auto 30px;
}.footer-logo {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}.footer-logo img {
height: 50px;
width: auto;
}.footer-nav {
display: flex;
justify-content: center;
margin-bottom: 30px;
}.footer-nav li {
list-style: none;
}.footer-nav a {
color: #262626;
text-decoration: none;
margin: 0 15px;
font-size: 16px;
transition: color 0.3s ease;
font-weight: 500;
}.footer-nav a:hover {
color: #e30613; /* Kırmızı */
}.footer-social {
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
}.footer-social li {
list-style: none;
}.footer-social a {
color: #ffffff;
font-size: 20px;
text-decoration: none;
margin: 0 15px;
transition:
color 0.3s ease,
transform 0.3s ease;
display: inline-block;
}.footer-social a svg {
width: 20px;
height: 20px;
}.footer-social a:hover {
color: #e30613;
transform: scale(1.2);
}.footer-logo2 {
height: 15px;
display: block;
}.footer-logo2 img {
height: 100%;
}.footer-contact {
color: #e30613;
font-size: 20px;
font-weight: 700;
align-items: center;
display: flex;
justify-content: center;
gap: 15px;
}.footer-contact strong {
color: #a0a0a0;
font-size: 16px;
font-weight: 500;
}.footer-copyright {
border-top: 1px solid #dcdcdc;
padding-top: 20px;
font-size: 14px;
}.footer-copyright a {
color: #a0a0a0;
text-decoration: none;
}.footer-copyright p {
display: flex;
align-items: center;
gap: 25px;
justify-content: center;
}.footer-copyright a:hover {
text-decoration: underline;
color: #e30613;
}@media(max-width:1024px){
.parallax-banner{
margin: 0;
}.collection-card {
height: 300px;
}.collection-section {
max-width: 1400px;
margin: 70px auto;
}
.footer-merkezi{
margin-bottom: 65px;
}.split-cta-section{
display: none;
}.banner-content {
padding: 70px 20px;
}.hakkimizda__gorsel-kolonu{
display: none;
}.neden-biz-section{
display: none;
}.section-title{
margin-bottom: 20px;
}.section-title-genel {
display: block;
}.footer-nav{
display: none;
}
.banner-content strong {
font-size: 30px;
}
}/* --- MOBİL İYİLEŞTİRMELERİ --- */
@media (max-width: 768px) {
/* Hakkımızda mobilde çok üstte kalmasın */
.hakkimizda .container {
margin: 40px auto 0px;
padding: 0 20px;
display: block;
}
.hakkimizda__baslik {
font-size: 28px !important;
}.hakkimizda__gorsel-item {
height: 150px; /* Mobilde görselleri biraz küçültelim */
}/* Footer Copyright kısmının mobilde taşmasını engelle */
.footer-copyright p {
flex-direction: column; /* Yan yana değil alt alta */
gap: 10px;
text-align: center;
}/* Neden biz ikonlarını mobilde ortalayalım veya daha düzgün dizelim */
.neden-biz-item {
flex-direction: row; /* İkon ve metin yan yana kalsın ama boşluğu azalt */
gap: 15px;
}
.neden-biz-icon {
width: 40px;
height: 40px;
}
.neden-biz-icon svg {
width: 30px;
height: 30px;
}/* Banner yazı boyutunu küçült */
.banner-content div.d-block {
font-size: 24px !important;
}
}/* JS İLE EKLENECEK ANİMASYONUN CSS TEMELİ */
.js-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}.js-reveal.active {
opacity: 1;
transform: translateY(0);
}