/* Genel Kapsayıcı ve Zemin Rengi */
.hakkimizda-alani {
padding: 80px 0; /* Tasarımın nefes alması için geniş boşluklar */
color: #1f2d4f;
background: #fff;
}.hakkimizda-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 5%;
display: grid;
grid-template-columns: 4fr 7fr; /* Sol görsel daha dar, sağ içerik daha geniş */
gap: 80px; /* İki kolon arası geniş boşluk */
align-items: start;
}/* Sol Taraf: Büyük Görsel */
.hakkimizda-sol img {
width: 100%;
height: 411px;
object-fit: cover;
display: block;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Çok hafif, zarif bir derinlik */
transition: transform 0.5s ease;
}.hakkimizda-sol img:hover {
transform: scale(1.02); /* Üzerine gelince çok hafif büyüme detayı */
}/* Sağ Taraf: İçerik Yerleşimi */
.hakkimizda-sag {
display: flex;
flex-direction: column;
}/* Başlık */
.hakkimizda-baslik {
font-size: 38px;
font-weight: 700; /* Şık durması için çok kalın olmayan bir font-weight */
line-height: 1.2;
margin-top: 0;
margin-bottom: 43px;
font-family: var(--font2);
}.hakkimizda-baslik b {
color: #c6ba9e;
}/* Yan Yana İki Paragraf */
.hakkimizda-metinler {
display: grid;
grid-template-columns: 1fr 1fr; /* Metinleri iki eşit parçaya böler */
gap: 40px;
margin-bottom: 50px; /* Alt görsellerle aradaki büyük boşluk */
}.hakkimizda-metinler p {
font-size: 16px;
font-weight: 300;
line-height: 1.4;
margin: 0;
}/* Alt İki Kare Görsel */
.hakkimizda-alt-gorseller {
display: grid;
}.hakkimizda-alt-gorseller img {
width: 100%;
aspect-ratio: 4 / 3; /* Tam kare olmalarını sağlar */
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}.hakkimizda-alt-gorseller img:hover {
transform: scale(1.03);
}/* ===== MOBİL VE TABLET UYARLAMASI ===== */
@media (max-width: 1024px) {
.hakkimizda-container {
grid-template-columns: 1fr; /* Tablettte alt alta geçsin */
gap: 20px;
}.hakkimizda-sol img {
height: 331px;
aspect-ratio: 16 / 9; /* Dikey görseli yataya çevir, çok yer kaplamasın */
}
}@media (max-width: 768px) {
.hakkimizda-alani {
padding: 35px 0 10px;
}.hakkimizda-baslik {
font-size: 2rem;
margin-bottom: 30px;
}.hakkimizda-metinler,
.hakkimizda-alt-gorseller {
grid-template-columns: 1fr; /* Mobilde metinler ve alt görseller tek kolon olur */
gap: 20px;
}.hakkimizda-metinler {
margin-bottom: 40px;
}
}
.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;
filter: grayscale(100%);
opacity: 0.6;
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;
}/**//* Genel Ayarlar */
.urunler-alani {
padding: 80px 0;
}.gorsel-kapsayici {
overflow: hidden; /* Hover yakınlaşma efekti taşmasın diye */
width: 100%;
position: relative;
}.gorsel-kapsayici img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* Çok yumuşak premium animasyon */
}/* Tüm Görsellere Hover Efekti */
.urun-kutu:hover .gorsel-kapsayici img,
.urunler-banner:hover .gorsel-kapsayici img,
.urun-kutu-buyuk:hover .gorsel-kapsayici img {
transform: scale(1.04); /* Üzerine gelince zarifçe yaklaşır */
}/* --- 1. ÜST 4'LÜ IZGARA --- */
.urunler-4lu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px; /* İnce boşluklar dergi hissi verir */
margin-bottom: 80px;
}a.urun-kutu {
color: #1f2d4d;
text-decoration: none;
}a.urun-kutu:hover {
text-decoration: underline;
}
.urun-kutu .gorsel-kapsayici {
aspect-ratio: 3 / 4; /* Dikdörtgen portre formatı */
margin-bottom: 15px;
}.urun-kutu .gorsel-kapsayici img {
width: 100%;
height: 100%;
}.urun-baslik {
text-align: center;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}/* --- 2. ORTA METİN ALANI --- */
.urunler-ayrac-metni {
max-width: 730px;
margin: 0 auto 80px auto;
text-align: center;
}.ayrac-ikon {
margin-bottom: 0px;
}.ayrac-ikon img {
width: auto;
height: 50px;
}.urunler-ayrac-metni p {
font-family: var(--font2);
font-size: 1.3rem;
line-height: 1.6;
font-style: italic; /* Markalardaki gibi italik tasarım */
}/* Slider düzeni */
.urunler_slider {
width: 100%;
padding-bottom: 50px;
cursor: grab;
}
.urunler_slider:active {
cursor: grabbing;
}/* Noktaların özelleştirilmesi */
.slider-noktalari {
display: flex;
justify-content: center;
margin-top: 20px;
}
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
background: #ece5d9 !important;
opacity: 1 !important;
transition: 0.3s;
}
.swiper-pagination-bullet-active {
background: #1b2d4f !important;
width: 25px;
border-radius: 6px;
}/* --- 3. BÜYÜK YATAY BANNER --- */
.urunler-banner {
position: relative;
width: 100%;
margin-bottom: 8px;
cursor: pointer;
display: block;
}.urunler-banner .gorsel-kapsayici {
height: 70vh; /* Ekranın %70'ini kaplar */
}.urunler-banner .gorsel-kapsayici::after {
/* Alttaki yazının okunması için alta hafif karartma */
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}.banner-icerik {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
text-align: center;
color: #fff;
z-index: 2;
width: 100%;
max-width: 300px;
}.banner-alt-baslik {
font-size: 0.8rem;
letter-spacing: 2px;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}.banner-ana-baslik {
font-family: var(--font2);
font-size: 3rem;
font-weight: 400;
margin: 0 0 20px 0;
}.banner-link {
color: #fff;
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
transition: opacity 0.3s;
}.banner-link:hover {
opacity: 0.7; /* Üzerine gelince link hafif solar */
}/* --- 4. ALT 2'Lİ BÜYÜK IZGARA --- */
.urunler-2li-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}.urun-kutu-buyuk {
position: relative;
cursor: pointer;
}.urun-kutu-buyuk .gorsel-kapsayici {
aspect-ratio: 4 / 4;
}.urun-kutu-buyuk .gorsel-kapsayici::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}.kutu-ici-baslik {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 0.8rem;
letter-spacing: 1px;
text-transform: uppercase;
z-index: 2;
}/* ===== MOBİL VE TABLET UYARLAMASI ===== */
@media (max-width: 1024px) {
.urunler-4lu-grid {
grid-template-columns: repeat(2, 1fr); /* Tablette 4'lü yapı 2x2 olur */
}
.urunler-banner .gorsel-kapsayici {
height: 50vh;
}
}@media (max-width: 768px) {
.urunler-alani {
padding: 40px 5% 60px 5%;
}
.urunler-ayrac-metni p {
font-size: 1.1rem;
margin: 0;
padding: 40px 20px;
}
.banner-ana-baslik {
font-size: 2rem;
}
.urunler-2li-grid {
grid-template-columns: 1fr; /* Mobilde alt alta geçer */
}
}.global-section {
padding: 50px 0 80px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}/* Başlık ve Slogan Alanı */
.global-header {
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 10;
}.global-header-ic {
margin: 0px auto;
}.subtitle {
display: block;
font-size: 0.75rem;
letter-spacing: 4px;
text-transform: uppercase;
color: #b5986d; /* Zarif bronz/altın rengi */
margin-bottom: 10px;
font-weight: 500;
}.main-title {
font-size: 38px;
font-weight: 700;
color: #1f2d4f;
line-height: 1.1;
margin-bottom: 30px;
font-family: var(--font2);
display: block;
}.main-title b {
color: #b5986d;
}.description {
font-size: 15px;
color: #1f2d4f;
line-height: 1.5;
font-weight: 400;
}
/**//* =========================================
HARİTA VE SVG ANİMASYON ALANI
========================================= */
.map-container {
position: relative;
width: 100%;
width: 1090px;
background-image: url(../images/world.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: -150px;
}/* Haritayı biraz daha silik ve premium yapmak için filtre */
.map-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fefbf8de;
pointer-events: none;
display: none;
}.map-svg {
width: 85%;
height: auto;
display: block;
position: relative;
z-index: 2;
left: 140px;
top: -35px;
}/* --- Çizgi (Rota) Animasyonları --- */
.route-line {
fill: none;
stroke: #b5986d; /* Altın rengi kargo/gönderim çizgileri */
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 6 8; /* Kesik kesik modern çizgi */
animation: dashAnimasyon 30s linear infinite; /* Çizgilerin hareket etmesi */
opacity: 0.6;
}@keyframes dashAnimasyon {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}/* --- Noktalar (Pinler) ve Nabız Efekti --- */
.pin-group {
cursor: pointer;
}.pin-core {
fill: #1a1a1a;
transition: all 0.3s ease;
}.pin-core.turkey {
fill: #b5986d; /* Türkiye merkez olduğu için altın rengi */
}.pin-pulse {
fill: none;
stroke: #b5986d;
stroke-width: 1;
transform-origin: center;
animation: pulseAnimasyon 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}@keyframes pulseAnimasyon {
0% {
r: 3px;
stroke-opacity: 1;
stroke-width: 2px;
}
100% {
r: 25px;
stroke-opacity: 0;
stroke-width: 0px;
}
}/* --- Hover (Üzerine Gelince Çıkan) Etiketler --- */
.pin-label {
font-size: 12px;
font-weight: 500;
fill: #1a1a1a;
opacity: 0;
transition:
opacity 0.3s ease,
transform 0.3s ease;
transform: translateY(10px);
letter-spacing: 1px;
}.pin-group:hover .pin-label {
opacity: 1;
transform: translateY(0);
}.pin-group:hover .pin-core {
fill: #b5986d;
r: 6px; /* Üzerine gelince nokta hafif büyür */
}/* =========================================
MOBİL UYARLAMA
========================================= */
@media (max-width: 768px) {
.global-section {
padding: 60px 5%;
}
.main-title {
font-size: 2.2rem;
}
.route-line {
stroke-width: 1;
}
.pin-label {
font-size: 16px;
} /* Mobilde yazılar biraz daha okunaklı olsun */
}/**/.shoppable-section {
padding: 0px 0px;
display: flex;
justify-content: center;
}.shoppable-container {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 5%; /* Sol resim ile sağ metin arası ferah boşluk */
}/* =========================================
SOL TARAF: DEVASA LIFESTYLE GÖRSELİ
========================================= */
.shoppable-left {
position: relative;
width: 75%; /* Resim alanını %75'e çıkardık (Çok daha büyük) */
overflow: hidden;
}.shoppable-main-image {
width: 100%;
height: 90vh; /* Neredeyse tam ekran yüksekliği */
object-fit: cover;
display: block;
}/* --- Pin (Nokta) Ayarları --- */
.pin {
position: absolute;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}.pin-dot {
width: 8px; /* Daha minik, zarif noktalar */
height: 8px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
position: relative;
z-index: 2;
}.pin::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
animation: pinPulse 2.5s infinite ease-in-out;
z-index: 1;
}@keyframes pinPulse {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}.pin:hover .pin-dot,
.pin.active .pin-dot {
background-color: #c9ba9b; /* Aktif olunca siyah */
transform: scale(1.5);
}
.pin:hover::before,
.pin.active::before {
background-color: #c9ba9b75;
}/* =========================================
SAĞ TARAF: ULTRA-MİNİMALİST ALAN
========================================= */
.shoppable-right {
width: 25%; /* Sağ taraf küçültüldü, minimalize edildi */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* Metinler sola dayalı (daha modern) */
padding-right: 3%;
}.shoppable-right .main-title {
text-align: center;
font-size: 30px;
margin-top: 0px;
}/* Kutu, gölge veya sınır YOK. Direkt arkaplan üzerinde. */
.minimal-content {
width: 100%;
opacity: 1;
transition:
opacity 0.5s ease,
transform 0.5s ease;
text-align: center;
}.minimal-content.fade-out {
opacity: 0;
transform: translateY(15px); /* Geçişte hafif aşağı kayma */
}/* Minik, zarif ürün görseli (Thumbnail) */
.minimal-image-wrapper {
width: 100%; /* Çok küçük, zarif bir boyut */
aspect-ratio: 4 / 3;
overflow: hidden;
margin-bottom: 40px;
}.minimal-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s ease;
}.minimal-content:hover .minimal-image-wrapper img {
transform: scale(1.05);
}/* --- Tipografi --- */
.minimal-title {
font-size: 19px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.2;
margin-top: 0px;
margin-bottom: 12px;
}.minimal-price {
font-size: 14px;
font-weight: 300;
color: #555;
margin-bottom: 40px; /* Açıklama olmadığı için boşluk fazla */
}/* Sadece Altı Çizili Zarif Buton */
.minimal-btn {
display: inline-block;
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #c9ba9b;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #c9ba9b;
transition: all 0.3s ease;
}.minimal-btn:hover {
color: #b5986d;
border-bottom-color: #b5986d;
}/* =========================================
MOBİL UYARLAMA
========================================= */
@media (max-width: 992px) {
.shoppable-container {
flex-direction: column;
gap: 30px;
}
.shoppable-left {
width: 100%;
}
.shoppable-main-image {
height: 60vh;
}
.shoppable-right {
width: 100%;
align-items: center; /* Mobilde ortalanmış görünüm */
text-align: center;
padding: 0 5%;
}
.minimal-title {
font-size: 1.5rem;
}
.minimal-image-wrapper {
margin: 0 auto 30px auto; /* Mobilde görseli ortala */
}
}/**/.values-section {
background-color: #f4f0e8;
color: var(--renk1);
/* Lüks fildişi/kırık beyaz arka plan */
padding: 60px 0;
text-align: center;
}/* Üst Ana Başlık */
.values-main-title {
font-size: 40px;
font-weight: 600;
margin-top: 0px;
margin-bottom: 30px;
font-family: var(--font2);
}/* 4'lü Izgara Yapısı */
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Yan yana 4 eşit kolon */
gap: 50px 30px;
max-width: 1400px;
margin: 0 auto;
}/* Her Bir Özellik Kutusu */
.value-item {
display: flex;
flex-direction: column;
align-items: center;
}/* İkon Alanı */
.value-icon {
width: 42px;
height: 42px;
margin-bottom: 25px;
fill: none;
stroke: #1e293b;
/* Hafif laciverte çalan çok şık koyu gri */
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.4s ease;
}.value-icon svg {
width: 100%;
height: 100%;
stroke: #1e293b;
}.value-item:hover .value-icon {
transform: translateY(-5px);
/* Üzerine gelince ikon zarifçe yukarı kalkar */
stroke: #b5986d;
/* Altın/bronz detay rengine döner */
}/* Alt Başlıklar */
.value-title {
font-size: 17px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 15px;
}/* Açıklama Metinleri */
.value-desc {
font-size: 15px;
font-weight: 300;
line-height: 1.4;
max-width: 280px;
/* Metnin çok uzayıp çirkin durmasını engeller */
}/* =========================================
MOBİL UYARLAMA
========================================= */
/* Tablet (iPad vb.) için yan yana 2'li görünüm */
@media (max-width: 992px) {
.values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
}.values-main-title {
font-size: 2.8rem;
margin-bottom: 60px;
}
}/* Telefonlar için alt alta 1'li görünüm */
@media (max-width: 576px) {
.values-grid {
grid-template-columns: 1fr;
gap: 50px;
}.values-section {
padding: 70px 5%;
}.values-main-title {
font-size: 2.2rem;
margin-bottom: 50px;
}
}/**//* --- ANA KUMAŞ / KAPSAYICI --- */
.eco-textile-layout {
max-width: 1200px;
margin: 80px auto;
padding: 0 20px;
display: flex;
gap: 50px;
align-items: stretch;
}/* --- SOL BÖLÜM: MANİFESTO --- */
.manifesto-column {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 20px;
}.eco-subtitle {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #c9ba9b;
margin-bottom: 15px;
font-weight: 500;
}.woven-title {
font-size: 38px;
color: #1f2d4f;
font-weight: 700;
line-height: 1.2;
margin-top: 15px;
margin-bottom: 25px;
font-family: var(--font2);
}.woven-title span {
font-weight: 500;
display: block;
}.manifesto-text {
font-size: 17px;
color: #1f2d4f;
font-weight: 300;
margin-bottom: 40px;
max-width: 90%;
}/* Aksiyon Alanı */
.action-loom {
display: flex;
align-items: center;
gap: 20px;
}.btn-eco-report {
display: inline-block;
padding: 12px 25px;
border: 1px solid #1f2d4f;
border-radius: 30px;
color: #1f2d4f;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
}.btn-eco-report:hover {
background-color: #c9ba9b;
border-color: #c9ba9b;
color: #fff;
}/* --- SAĞ BÖLÜM: GÖRSEL DOKUMA ALANI --- */
.visual-loom-column {
flex: 1.2;
position: relative;
min-height: 550px;
border-radius: 10px;
overflow: hidden;
}/* Katmanlar (Eski Slide) */
.loom-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
z-index: 1;
background-size: cover;
background-position: center;
}.loom-layer.active-layer {
opacity: 1;
z-index: 2;
}/* Kumaş Karartması (Eski Overlay) */
.fabric-tint {
position: absolute;
top: 0;
left: 0;
opacity: 70%;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.3) 100%
);
}/* Katman İçeriği */
.layer-content {
position: relative;
z-index: 3;
color: #fff;
padding: 50px 40px;
height: 100%;
display: flex;
flex-direction: column;
}.layer-heading {
font-size: 2rem;
font-weight: 700;
margin-top: 10px;
margin-bottom: 10px;
}.layer-desc {
font-size: 0.95rem;
font-weight: 300;
max-width: 80%;
margin-bottom: 40px;
opacity: 0.9;
}/* Veri İplikleri (Eski Stats) */
.metric-threads {
margin-top: auto;
margin-bottom: 80px;
border-left: 2px solid rgba(255, 255, 255, 0.7);
padding-left: 20px;
display: none;
gap: 50px;
}.thread-item {
margin-bottom: ypx;
}.thread-item:last-child {
margin-bottom: 0;
}.thread-context {
font-size: 0.8rem;
text-transform: lowercase;
opacity: 0.8;
margin-bottom: -5px;
}.thread-value {
font-size: 3.5rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 5px;
}.thread-detail {
font-size: 0.85rem;
opacity: 0.8;
font-weight: 300;
}/* Kontrol Mekanizması */
.loom-controls {
position: absolute;
bottom: 30px;
left: 40px;
right: 40px;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
}.loom-arrow {
background: transparent;
border: 1px solid #fff;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
margin-left: auto;
margin-right: 15px;
}.loom-arrow:hover {
background: #fff;
color: #333;
}.stitch-indicators {
display: flex;
gap: 8px;
align-items: center;
}/* İlmek / Dikiş Noktaları */
.stitch-point {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}.stitch-point.active-stitch {
background: #fff;
transform: scale(1.2);
}.controls-group {
display: flex;
align-items: center;
gap: 15px;
}/* Mobil Cihazlar İçin Terzi İşlemi */
@media (max-width: 992px) {
.eco-textile-layout {
flex-direction: column;
margin: 40px auto;
}.manifesto-column {
padding-right: 0;
margin-bottom: 30px;
}.woven-title {
font-size: 2.5rem;
}.visual-loom-column {
min-height: 500px;
}.thread-value {
font-size: 2.5rem;
}
}/**/.surecimiz-wrapper {
margin: 0px auto 0px;
}/* --- BAŞLIK ALANI --- */
.surecimiz-header {
text-align: center;
margin-bottom: 50px;
}.surecimiz-title {
margin-top: 0px;
font-size: 38px;
color: #1f2d4f;
font-weight: 700;
font-family: var(--font2);
}/* --- 5'Lİ IZGARA SİSTEMİ --- */
.surecimiz-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}/* --- SÜREÇ ADIMI KARTI --- */
.surecimiz-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
position: relative;
}/* Görsel Alanı ve Numaralandırma Kapsayıcısı */
.surecimiz-image-box {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
margin-bottom: 20px;
background-color: #e9e9e9;
border-radius: 4px;
}.surecimiz-image-box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: #1f2d4f;
opacity: 0%;
z-index: 1;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}.surecimiz-step:hover .surecimiz-image-box::before {
opacity: 50%;
}/* --- SAĞ ÜSTTEKİ YUVARLAK NUMARA (30x30px) --- */
.surecimiz-number {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background-color: #c9ba9b;
color: #ffffff;
border-radius: 50%;
/* Tam yuvarlak */
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
z-index: 5;
border: 1px solid rgba(255, 255, 255, 0.2);
}.surecimiz-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}/* Resmin üzerine gelince zarif yakınlaşma efekti */
.surecimiz-step:hover .surecimiz-img {
transform: scale(1.06);
}/* --- METİN ALANLARI --- */
.surecimiz-step-title {
font-size: 19px;
color: #1f2d4f;
font-weight: 700;
margin-top: 0px;
margin-bottom: 12px;
}.surecimiz-step-desc {
font-size: 15px;
color: #1f2d4f;
font-weight: 300;
line-height: 1.4;
margin-bottom: 15px;
min-height: 65px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}/* --- GİZLİ VE EFEKTLİ BUTON --- */
.surecimiz-btn {
display: inline-block;
padding: 10px 30px;
border: 1px solid #fff;
border-radius: 40px;
color: #fff;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
background-color: transparent;
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
left: 17px;
position: absolute;
bottom: 50px;
z-index: 2;
}/* KARTIN ÜZERİNE GELİNDİĞİNDE BUTONUN BELİRMESİ (HOVER EFEKTİ) */
.surecimiz-step:hover .surecimiz-btn {
opacity: 1;
bottom: 90px;
}/* Butonun kendi üzerine gelince içinin dolması */
.surecimiz-btn:hover {
background-color: #c9ba9b;
color: #ffffff;
border-color: #c9ba9b;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 1200px) {
.surecimiz-grid {
grid-template-columns: repeat(3, 1fr);
row-gap: 50px;
}
}@media (max-width: 992px) {
.surecimiz-grid {
grid-template-columns: repeat(2, 1fr);
}/* DOKUNMATİK EKRANLAR İÇİN BUTONU SÜREKLİ AÇIK TUT */
.surecimiz-btn {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}@media (max-width: 576px) {
.surecimiz-wrapper {
padding: 0 20px;
}.surecimiz-grid {
grid-template-columns: 1fr;
}.surecimiz-step-desc {
min-height: auto;
}
}/**/.sertifikalar-wrapper {
width: 100%;
overflow: hidden;
padding: 30px 0;
background: #fff;
position: relative;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
border-color: #c9ba9b32;
}.sertifikalar-wrapper .container {
overflow: hidden;
}.slider-track {
display: flex;
gap: 40px; /* Sertifikalar arası boşluk */
width: max-content;
animation: scroll 30s linear infinite; /* 30 saniyede bir tur */
}.sertifika-slide {
width: 150px;
height: 150px;
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}.sertifika-slide img {
max-width: 100%;
max-height: 100%;
}.sertifika-slide: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-slide {
width: 140px;
}
.slider-track {
gap: 20px;
animation-duration: 20s;
} /* Mobilde biraz daha hızlı */
}/* Üzerine gelince akışı durdur */
.sertifikalar-wrapper:hover .slider-track {
animation-play-state: paused;
}/**/.footer {
background-color: #ece5d9;
padding: 60px 0% 0px;
color: #1f2d4d;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
}/* Üst Bölüm */
.footer-top {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #c6ba9e;
padding-bottom: 40px;
margin-bottom: 40px;
}.footer-cta h2 {
font-size: 29px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: 700;
}.footer-cta p {
margin-top: 10px;
margin-bottom: 0px;
}/* Orta Bölüm */
.footer-middle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.footer-col h4 {
margin-top: 0px;
margin-bottom: 20px;
font-size: 1rem;
}
.footer-col a {
display: block;
margin-bottom: 12px;
text-decoration: none;
color: #1f2d4d;
font-size: 0.9rem;
}
.footer-col a:hover {
color: #1f2d4d;
}/* Bülten */
.newsletter-form {
display: flex;
border: 1px solid #1f2d4d;
width: 300px;
padding: 5px;
margin-bottom: 15px;
}
.newsletter-form input {
border: none;
background: transparent;
padding: 10px;
width: 100%;
outline: none;
}
.newsletter-form button {
background: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
}
.disclaimer {
font-size: 0.75rem;
color: #778;
width: 300px;
}
.footer-newsletter {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.footer-newsletter h4 {
margin-top: 0px;
}.footer_logg2 {
height: 90px;
width: auto;
margin-left: auto;
}/* Alt */
.footer-bottom {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #778;
border-top: 1px solid #c6ba9e35;
align-items: center;
}.bottom-links a {
color: #778;
text-decoration: none;
margin-right: 20px;
}.footer-logo {
display: block;
}.footer-logo img {
height: 15px;
width: auto;
}.social-icons {
display: flex;
align-items: center;
gap: 15px;
}.social-icons a svg {
width: 17px;
height: 17px;
}/* Mobil */
@media (max-width: 992px) {
.footer-middle {
display: none;
grid-template-columns: 1fr;
}
.footer {
padding: 10px 0% 10px 0px;
}
.footer-links {
grid-template-columns: repeat(2, 1fr);
}
}/**/.neden-tsa {
width: 100%;
padding: 80px 0px;
}.neden-tsa-wrapper {
padding: 0 0px;
display: flex;
align-items: flex-start;
gap: 80px;
position: relative;
}/* SOL: SABİT KALACAK ALAN (RESİM) */
.tsa-visual-sticky {
flex: 0 0 50%;
position: sticky;
top: 150px;
height: 550px;
border-radius: 12px;
overflow: hidden;
background: #eee;
}
.tsa-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
opacity: 0;
transition: opacity 0.8s ease;
}
.tsa-img.active {
opacity: 1;
}/* SAĞ: KAYAN YAZILAR */
.tsa-content-box {
flex: 1;
padding-top: 50px;
}.tsa-section {
position: relative;
padding: 70px 0px;
border-bottom: 1px solid #eee5d8;
}.tsa-title {
font-size: 23px;
margin-top: 0px;
margin-bottom: 25px;
font-weight: 700;
display: flex;
align-items: center;
gap: 20px;
}.tsa-title .icon {
width: 35px;
height: 35px;
}.tsa-title .icon svg {
width: 100%;
height: 100%;
}.tsa-section .icon-bg {
width: 200px;
height: 200px;
position: absolute;
right: 0px;
top: 50px;
transform: rotate(0deg);
opacity: 30%;
}.tsa-section .icon-bg svg {
width: 100%;
height: 100%;
stroke: #eee5d8;
}.tsa-desc {
font-size: 15px;
opacity: 70%;
line-height: 1.5;
position: relative;
z-index: 9;
}.mx-auto {
margin-left: auto;
margin-right: auto;
}/* DİKEY NOKTALAR */.tsa-dots {
position: fixed; /* Sabit kalması için */
right: 40px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 20px;
z-index: 100;
transition: opacity 0.5s ease; /* Kaybolma efekti için */
}/* Noktaların gizlenme sınıfı */
.tsa-dots.hidden {
opacity: 0;
pointer-events: none;
}.tsa-dot {
width: 12px;
height: 12px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}
.tsa-dot.active {
background: #c6ba9e;
transform: scale(1.3);
}@media (max-width:1200px) {.eco-textile-layout {
padding: 0px;
}
.neden-tsa-wrapper {
flex-direction: column;
gap: 30px;
}
.tsa-visual-sticky {
position: relative;
top: 0;
width: 100%;
height: 300px;
}
.tsa-dots {
display: none;
}.footer_logg2 {
display: none;
}.neden-tsa {
padding: 40px 0px;
}.tsa-section {
padding: 20px 0px;
}.global-header {
margin-bottom: 20px !important;
}.surecimiz-image-box {
height: 230px;
}.surecimiz-btn {
left: 90px;
}.urun-kutu .gorsel-kapsayici {
aspect-ratio: 3 / 3;
margin-bottom: 15px;
}.values-section {
padding: 30px 0%;
}.value-icon {
margin-bottom: 15px;
}.value-title {
margin-top: 0px;
margin-bottom: 0;
}.values-main-title {
font-size: 2.2rem;
margin-bottom: 30px;
}.values-grid {
grid-template-columns: 1fr;
gap: 10px;
}.layer-content {
padding: 20px 30px;
}.thread-value {
font-size: 32px;
}
.thread-detail {
font-size: 12px;
opacity: 0.8;
font-weight: 300;
}
}
@media (max-width: 1200px) {
.global-section {
display: none;
}
}