/* Ana Kapsayıcı ve Arka Plan */
.uretim {
position: relative;
width: 100%;
overflow: hidden;
/* İstediğiniz Arka Plan Resmi */
background-image: url("https://res.cloudinary.com/makerinc/c_fill,g_auto,f_auto,q_auto:best,fl_preserve_transparency,dpr_1,w_1944,h_1297/maker-live/uploads/781187df1699f43aae85dd30264d4d28/9e17934e13b51cb2f646e91b4284f0ef/SP24_OrganicCrinkledPercale_DuvetCover_Undyed_C_1764.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 60px 0px;
color: #333;
}/* Yazıların okunmasını sağlayan zarif şeffaf filtre */
.uretim::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(251, 250, 248, 0.85);
/* %85 opaklıkta krem/beyaz filtre */
z-index: 0;
opacity: 50%;
}/* İçeriklerin filtrenin üstünde kalması için */
.uretim > div,
.uretim > section {
position: relative;
z-index: 1;
}/* Başlık Alanı */
.header-title {
text-align: center;
padding: 0px 50px 0px;
margin: 0;
}.header-title h2 {
font-size: 35px;
color: #000000;
font-weight: 700;
margin: 0;
font-family: var(--font3);
}.header-title h2 span {
color: #c4ae8d;
/* Kumaş tonlarına uygun Altın/Kum rengi vurgu */
}.header-title p {
font-size: 16px;
color: #000000;
font-weight: 500;
line-height: 1.5;
}/* Slider Kapsayıcı Alan */
.uretim .timeline-section {
padding: 20px 20px 0px;
width: 100%;
display: flex;
justify-content: center;
}.uretim .slider-wrapper {
position: relative;
max-width: 1300px;
width: 100%;
padding: 0 80px;
}.uretim .swiper {
width: 100%;
padding-top: 10px;
padding-bottom: 0px;
}.uretim .progress-bar-animated {
position: absolute;
top: 164px;
left: 0;
height: 2px;
background-color: #c4ae8d;
/* Vurgu rengi */
width: 0%;
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}/* Tekil Adım Kutusu */
.uretim .step-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.6s ease,
transform 0.6s ease;
height: auto;
}/* Animasyon tetiklendiğinde */
.uretim .slider-wrapper.animate-start .step-item {
opacity: 1;
transform: translateY(0);
}/* İkon Alanı */
.uretim .step-visual {
margin-bottom: 25px;
background-color: #ffffff;
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
border: 1px solid #e8e3dc;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
position: relative;
z-index: 4;
}.uretim .step-item:hover .step-visual {
transform: translateY(-5px);
border-color: #c4ae8d;
box-shadow: 0 15px 30px rgba(196, 174, 141, 0.2);
}.uretim .step-visual i {
font-size: 50px;
color: #1a2b3c;
}/* Ortadaki Nokta */
.uretim .step-point {
width: 18px;
height: 18px;
background-color: #fcfbf9;
border: 3px solid #c4ae8d;
border-radius: 50%;
margin-bottom: 25px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
transition: background-color 0.3s;
}.uretim .step-item:hover .step-point {
background-color: #c4ae8d;
}/* Açıklama Yazıları */
.uretim .step-info {
padding: 0 15px;
z-index: 4;
}.uretim .step-info h3 {
font-size: 17px;
color: #0f0f0f;
margin: 0 0 12px 0;
font-weight: 700;
text-transform: uppercase;
}.uretim .step-info p {
font-size: 14px;
color: #555;
line-height: 1.4;
font-weight: 400;
margin: 0;
}/* Sağ ve Sol Yön Okları */
.uretim .custom-swiper-button-prev,
.uretim .custom-swiper-button-next {
position: absolute;
top: 100px;
width: 50px;
height: 50px;
background-color: #ffffff;
border: 1px solid #e8e3dc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
color: #1a2b3c;
}.uretim .custom-swiper-button-prev:hover,
.uretim .custom-swiper-button-next:hover {
background-color: #c4ae8d;
color: #ffffff;
border-color: #c4ae8d;
}.uretim .custom-swiper-button-prev {
left: 0;
}.uretim .custom-swiper-button-next {
right: 0;
}.uretim .custom-swiper-button-prev i,
.uretim .custom-swiper-button-next i {
font-size: 24px;
}/* Tıklanamaz durumdaki ok (En baş veya en son) */
.uretim .swiper-button-disabled {
opacity: 0.4;
cursor: not-allowed;
}.uretim .swiper-button-disabled:hover {
background-color: #ffffff;
color: #1a2b3c;
border-color: #e8e3dc;
}/* Mobilde okları biraz daha kenarlara al */
@media (max-width: 768px) {
.uretim .slider-wrapper {
padding: 0 50px;
}.uretim .custom-swiper-button-prev {
left: -5px;
}.uretim .custom-swiper-button-next {
right: -5px;
}
}.main-container {
max-width: 1600px;
margin: 0 auto;
padding: 20px 5%;
position: relative;
/* Kenar boşlukları */
}/* --- ORTAK RESİM HOVER EFEKTİ (Zarif Yakınlaşma) --- */
.image-wrapper {
position: relative;
overflow: hidden;
background-color: #f0f0f0;
}.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: block;
}.image-wrapper:hover img {
transform: scale(1.05);
/* Yumuşak ve yavaş yakınlaşma */
}/* Sabit karartma overlay'i (yazıların okunması için) */
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0) 50%
);
pointer-events: none;
z-index: 1;
}/* Altı Çizgili Premium Link Butonları */
.premium-link {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
transition: opacity 0.3s ease;
z-index: 2;
position: relative;
}.premium-link:hover {
opacity: 0.7;
}/* ----------------------------------------- */
/* 1. BÖLÜM: EN ÜST BÜYÜK GÖRSEL (HERO) */
/* ----------------------------------------- */
.hero-section {
width: 100%;
height: 65vh;
/* Ekran yüksekliğinin %65'i */
min-height: 400px;
margin-bottom: 20px;
}.hero-content {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
z-index: 2;
color: #fff;
}.hero-content h1 {
font-size: 42px;
font-weight: 400;
margin: 0 0 15px 0;
letter-spacing: 1px;
}/* ----------------------------------------- */
/* 2. BÖLÜM: İKİLİ SABİT RESİMLER (TWIN BANNERS) */
/* ----------------------------------------- */
.twin-banners {
display: grid;
grid-template-columns: 1fr 1fr;
/* İki eşit sütun */
gap: 20px;
/* Aralarındaki boşluk */
margin-top: 20px;
margin-bottom: 20px;
}.banner-item {
height: 500px;
position: relative;
}.banner-item h2 {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
font-size: 24px;
font-weight: 700;
z-index: 2;
}/* İkili resimlerde yazılar sağ altta duruyor */
.banner-item .premium-link {
position: absolute;
bottom: 30px;
right: 30px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}/* ----------------------------------------- */
/* 3. BÖLÜM: KATEGORİ SWIPER (ALT BÖLÜM) */
/* ----------------------------------------- */
.bottom-swiper-area {
background-color: #f7f6f4;
/* Görseldeki hafif bej/gri arka plan */
padding: 60px 5%;
margin-top: 0px;
}.section-header {
margin-bottom: 40px;
max-width: 900px;
}.section-title {
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 15px;
}.section-desc {
font-size: 14px;
line-height: 1.6;
color: #555;
margin-bottom: 20px;
}.section-header .premium-link {
color: #000;
border-color: #000;
}/* Swiper Kartları */
.bottom-swiper-area .swiper {
width: 100%;
padding-bottom: 0px;
}.category-card {
height: 400px;
}/* Kart üstü başlıklar (Playfair tırnaklı font) */
.category-card h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 22px;
font-weight: 500;
text-align: center;
margin: 0;
z-index: 2;
width: 100%;
text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
max-width: 80%;
}/* Kartlara özel tam karartma (yazı okunsun diye) */
.category-card .overlay {
background: rgb(0 0 0 / 27%);
transition: background 0.5s ease;
}.category-card:hover .overlay {
background: rgba(0, 0, 0, 0.35);
/* Hoverda kararır */
}.category-card .category-link {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
opacity: 0;
transition: all 0.3s ease;
}.category-card:hover .category-link {
bottom: 30px;
opacity: 1;
}/* Swiper Özel Ok Tasarımları */
.swiper-button-next,
.swiper-button-prev {
color: #333 !important;
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 50%;
transition: all 0.3s ease;
}.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 14px !important;
font-weight: bold;
}.bottom-swiper-area .swiper-button-next {
right: -50px;
}.bottom-swiper-area .swiper-button-prev {
left: -50px;
}/* --- RESPONSIVE (MOBİL UYUM) --- */
@media (max-width: 992px) {
.twin-banners {
grid-template-columns: 1fr;
/* Mobilde alt alta geçer */
}.hero-content h1 {
font-size: 32px;
}.hero-section {
height: 50vh;
}
}@media (max-width: 576px) {
.hero-content h1 {
font-size: 24px;
}.banner-item,
.category-card {
height: 400px;
}
}.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}/**//* --- ANA KAPSAYICI --- */
.online-alisveris {
display: flex;
width: 100%;
min-height: 80vh;
background-color: #f6f5f2;
margin: 20px 0px;
}/* --- SOL TARAF: VİDEO ALANI --- */
.online-alisveris .video-container {
flex: 1;
/* %50 Genişlik */
position: relative;
overflow: hidden;
background-color: #111;
}/* YouTube iframe'in tam kaplaması için "object-fit: cover" benzeri CSS Hilesi */
.online-alisveris .video-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 155vw;
height: 155vw;
transform: translate(-50%, -50%);
pointer-events: none;
/* Kullanıcı tıklayıp videoyu durduramaz */
}.online-alisveris .video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}/* Videonun üzerine hafif siyah bir katman (metin vb eklenecekse diye, şu an şeffaf ama koyulaştırılabilir) */
.online-alisveris .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: 2;
}/* --- SAĞ TARAF: İÇERİK ALANI --- */
.online-alisveris .content-container {
flex: 1;
/* %50 Genişlik */
display: flex;
align-items: center;
justify-content: center;
padding: 5%;
}.online-alisveris .text-content {
max-width: 500px;
/* Yazının çok uzamasını engeller */
}.online-alisveris h2 {
font-size: 32px;
font-weight: 700;
color: #222;
margin-bottom: 25px;
font-family: var(--font3);
}.online-alisveris p {
font-size: 14px;
line-height: 1.5;
color: #555;
margin-bottom: 40px;
font-weight: 400;
max-width: 86%;
text-align: justify;
}/* Görseldeki Özel Kenarlıklı Buton */
.online-alisveris .shop-btn {
display: inline-block;
padding: 16px 45px;
border: 1px solid #222;
/* İnce siyah kenarlık */
border-radius: 50px;
/* Tam yuvarlak köşeler (Pill shape) */
text-decoration: none;
color: #222;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
background-color: transparent;
transition: all 0.4s ease;
}.online-alisveris .shop-btn:hover {
background-color: #222;
color: #fff;
}/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */
@media (max-width: 992px) {
.online-alisveris {
flex-direction: column;
/* Mobilde alt alta geçer */
}.online-alisveris .video-container {
min-height: 50vh;
/* Mobilde video yüksekliği */
width: 100%;
}.online-alisveris .content-container {
padding: 60px 5%;
}.online-alisveris h2 {
font-size: 26px;
}
}/**//* --- ANA KAPSAYICI --- */
.surdurebilirlik-bg {
background-color: #f6f6f4;
}.surdurebilirlik {
position: relative;
width: 100%;
/* Arka plan resmi (Şehir ve Doğa temalı) */
background-image: url("https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=1920&auto=format&fit=crop");
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
padding-top: 60px;
padding-bottom: 120px;
z-index: 1;
border-bottom-left-radius: 50% 150px;
border-bottom-right-radius: 50% 150px;
overflow: hidden;
}/* Üstten aşağı inen beyaz renk geçişi (Gradient) */
.surdurebilirlik::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 15%,
rgba(255, 255, 255, 0.6) 40%,
rgba(255, 255, 255, 0.1) 100%
);
z-index: -1;
}/* --- İÇERİK KAPSAYICI --- */
.surdurebilirlik .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
text-align: center;
}/* --- BAŞLIK VE AÇIKLAMA --- */
.surdurebilirlik h2 {
color: #333333; /* Yeni Koyu Renk */
font-size: 35px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 20px;
font-family: var(--font3);
}.surdurebilirlik > .container > p {
color: #555555;
font-size: 14px;
font-weight: 400;
max-width: 800px;
margin: 0 auto 50px auto;
line-height: 1.5;
}/* --- KARTLAR (GRID YAPI) --- */
.surdurebilirlik .cards-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}.surdurebilirlik .s-card {
border-radius: 0px;
padding: 40px 30px;
text-align: left;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}.surdurebilirlik .s-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}.surdurebilirlik .s-card .icon-box {
width: 45px;
height: 45px;
margin-bottom: 20px;
}.surdurebilirlik .s-card h3 {
font-size: 22px;
font-weight: 600;
margin: 0 0 15px 0;
}.surdurebilirlik .s-card p {
font-size: 14px;
line-height: 1.5;
margin: 0;
opacity: 0.9;
}/* KOYU KARTLAR (Sol ve Sağ) - #333333 */
.surdurebilirlik .s-card.dark {
background-color: #333333; /* Yeni Koyu Arka Plan */
color: #ffffff;
}
.surdurebilirlik .s-card.dark svg {
fill: none;
stroke: #c4ae8d; /* İkonlar Yeni Premium Bej Rengi */
}/* AÇIK KART (Orta) - Beyaz */
.surdurebilirlik .s-card.light {
background-color: #ffffff;
color: #333333; /* Yazılar Koyu */
}
.surdurebilirlik .s-card.light svg {
fill: none;
stroke: #c4ae8d; /* İkonlar Yeni Premium Bej Rengi */
}/* --- BUTON - #C4AE8D --- */
.surdurebilirlik .btn-custom {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #c4ae8d; /* Yeni Buton Rengi */
color: #ffffff;
text-decoration: none;
padding: 16px 35px;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
box-shadow: 0 8px 20px rgba(196, 174, 141, 0.4); /* Buton gölgesi de renge uyarlandı */
transition: all 0.4s ease;
}/* Buton Hover Efekti (Üzerine gelince #333333 olur, şık bir detay) */
.surdurebilirlik .btn-custom:hover {
background-color: #333333;
color: #c4ae8d; /* Yazı ve ikon bej olur */
box-shadow: 0 12px 25px rgba(51, 51, 51, 0.4);
transform: translateY(-2px);
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.surdurebilirlik .cards-wrapper {
grid-template-columns: 1fr;
gap: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.surdurebilirlik {
border-bottom-left-radius: 50% 50px;
border-bottom-right-radius: 50% 50px;
}
}/* Neden Biz Alanı Genel Tasarım */
.neden-biz-alani {
background-color: #f6f6f4; /* Görseldeki açık krem/gri arka plan */
width: 100%;
padding: 60px 0px; /* Üstten alttan boşluk */
}.neden-biz-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 20px;
}.neden-biz-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 200px; /* Metinlerin düzgün durması için genişlik */
}.icon-kutu {
width: 64px;
height: 64px;
background-color: #ffffff;
border-radius: 50%; /* Tam yuvarlak yapar */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px; /* İkon ile metin arası boşluk */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Hafif, zarif bir gölge */
}.icon-kutu i {
font-size: 28px; /* İkonun büyüklüğünü buradan ayarlayabilirsiniz */
color: #333333; /* İkonun rengi */
}.ozellik-metin {
color: #4a4a4a;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}/* Yuvarlaklar arasına giren yatay ince çizgi */
.ayirici-cizgi {
width: 120px;
height: 1px;
background-color: #e2e2e2;
margin-top: 32px; /* Çizgiyi ikonların tam ortasına hizalar (64px yarısı) */
}/* MOBİL UYUM (Telefonlarda yan yana yerine alt alta dizilir) */
@media (max-width: 768px) {
.neden-biz-container {
flex-direction: column;
align-items: center;
gap: 40px;
}.neden-biz-item {
width: 100%;
}/* Telefondaki görünümde aradaki çizgileri gizleriz, daha temiz durur */
.ayirici-cizgi {
display: none;
}
}.instagram {
padding: 60px 0px;
}.neden-biz2 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/* Görseldeki açık gri/beyaz arka plan */
padding: 35px 0px;
}/* Her Bir Özellik Kutusu */
.neden-biz2-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 25px;
border-right: 1px solid #d1d5db;
/* Aradaki dikey çizgiler */
}/* Son öğenin sağındaki çizgiyi kaldır */
.neden-biz2-item:last-child {
border-right: none;
}/* İkon Ayarları */
.neden-biz2-item i {
font-size: 38px;
color: #0f172a;
/* Lacivert/Koyu renk ikon */
}/* Metin Ayarları */
.neden-biz2-text {
display: flex;
flex-direction: column;
font-size: 13px;
color: #0f172a;
/* Lacivert/Koyu renk yazı */
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
}/* --- Mobil Uyumluluk (Responsive) --- */
@media (max-width: 1200px) {
.neden-biz2-item {
padding: 15px;
}
}@media (max-width: 992px) {
.neden-biz2 {
row-gap: 20px;
}.neden-biz2-item {
border-right: none;
/* Mobilde çizgileri kaldır */
width: 30%;
/* Yan yana 3'lü dizilim */
justify-content: center;
}
}@media (max-width: 768px) {
.neden-biz2-item {
width: 45%;
/* Yan yana 2'li dizilim */
justify-content: flex-start;
padding-left: 10%;
}
}@media (max-width: 480px) {
.neden-biz2-item {
width: 43%;
justify-content: start;
padding-left: 0;
/* Alt alta tekli dizilim */
padding-left: 0;
}
}/**//* Footer Genel Ayarları */
.footer1 {
background-color: #f6f6f4; /* Görseldeki açık gri tonu */
padding: 60px 0px 0px;
color: #000;
}.footer-container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
}/* Sütun Ayarları */
.footer-col {
flex: 1;
min-width: 200px;
}/* Ürünler sütunu iki sütunluk yer kaplasın ki liste rahat sığsın */
.products-col {
flex: 2;
}.footer-col h4 {
font-size: 16px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 25px;
color: #000;
}.footer-col ul {
list-style: none;
padding: 0;
margin-left: 0px;
}/* Ürünleri yarı yarıya 2 sütun yapan sihirli kod */
.two-columns {
column-count: 2;
column-gap: 40px;
}.footer-col ul li {
margin-bottom: 7px;
break-inside: avoid-column; /* Maddelerin bölünmesini engeller */
}.footer-col ul li a {
text-decoration: none;
color: #1a1a1a;
font-size: 14px;
transition: color 0.3s ease;
opacity: 70%;
}.footer-col ul li a:hover {
color: #777;
opacity: 100%;
}/* Sosyal Medya İkonları */
.social-icons {
display: flex;
gap: 25px;
margin-bottom: 30px;
}.social-icons a {
color: #000;
font-size: 20px;
transition:
transform 0.3s ease,
color 0.3s ease;
}.social-icons a svg {
width: 20px;
height: 20px;
}.social-icons a:hover {
transform: scale(1.1);
color: #555;
}/* İletişim Butonları (Görseldeki gibi şeffaf içi boş butonlar) */
.contact-buttons {
display: flex;
flex-direction: column;
gap: 15px;
}.contact-buttons a{
display: block;
width: 100%;
}.btn-outline {
display: inline-block;
padding: 12px 20px;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #000;
border-radius: 50px;
font-size: 14px;
background-color: transparent;
transition:
background-color 0.3s ease,
color 0.3s ease;
}.btn-outline:hover {
background-color: #000;
color: #fff;
}.working-hours {
margin-top: 20px;
font-size: 13px;
color: #444;
}/* Mobil Cihazlar İçin Duyarlılık (Responsive) */
@media (max-width: 900px) {
.footer-container {
flex-direction: column;
}
.two-columns {
column-count: 1; /* Mobilde ürünleri tek sıraya düşürür */
}
.products-col {
flex: 1;
}
}/* Alt Bilgi (Copyright ve İmza) Alanı */
.footer-firma {
width: 100%;
background-color: #e9eaeb; /* Üstteki footer'dan bir tık daha koyu bir gri tonu */
border-top: 1px solid #dcdcdc; /* İnce bir ayırıcı çizgi */
}.footer-firma .container {
display: flex;
justify-content: space-between; /* Öğeleri sağa ve sola yaslar */
align-items: center; /* Dikeyde ortalar */
padding-top: 20px; /* Üstteki footer ile sağ/sol boşluklarını eşitler */
padding-bottom: 20px; /* Üstteki footer ile sağ/sol boşluklarını eşitler */
}/* Telif Hakkı Yazısı */
.footer-text {
font-size: 13px;
color: #555;
letter-spacing: 0.5px;
}/* Logonun kapsayıcısı ve margin-left auto ayarı */
.footer-logo.ml-auto {
margin-left: auto;
display: flex;
align-items: center;
}/* Firma Logosu */
.footer-logo img {
height: 20px; /* Logonun yüksekliği (kendi logonuzun boyutuna göre değiştirebilirsiniz) */
width: auto;
opacity: 0.7; /* Logoyu biraz soluk yapar, modern görünür */
transition:
opacity 0.3s ease,
transform 0.3s ease;
}/* Logoya fare ile üzerine gelindiğinde olacaklar */
.footer-logo:hover img {
opacity: 1; /* Tam renkli olur */
transform: scale(1.05); /* Çok hafif büyür */
}/* Mobil Uyum (Responsive) - Telefon ekranlarında alt alta gelsin */
@media (max-width: 768px) {
.footer-firma .container {
flex-direction: column;
justify-content: center;
gap: 15px; /* Yazı ve logo arasına boşluk */
padding: 20px;
text-align: center;
}.footer-logo.ml-auto {
margin-left: 0; /* Mobilde ortalamak için auto margin'i sıfırlıyoruz */
justify-content: center;
}
}/* Genel Konteyner ve Tipografi */
.neden-biz3-container {
background-color: #f6f5f2;
/* Arka plan hafif kırık beyaz */
padding: 60px 0px;
margin: 0 auto;
color: #0f172a;
}/* Üst Başlık Alanı */
.neden-biz3-header {
text-align: center;
margin-bottom: 40px;
}.neden-biz3-header h2 {
font-size: 35px;
font-weight: 700;
color: #111827;
margin-top: 0px;
margin-bottom: 10px;
}.neden-biz3-header p {
font-size: 16px;
color: #4b5563;
font-weight: 400;
}/* Grid Sistemi (3 Sütunlu Yapı) */
.neden-biz3-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}/* Her Bir Kart Yapısı */
.neden-biz3-card {
display: flex;
background-color: #fff;
/* Kartların sol tarafı için açık gri */
border-radius: 0px;
overflow: hidden;
height: 100%;
}/* Kart İçerik (Sol) Tarafı */
.neden-biz3-content {
flex: 1;
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}/* Başlık ve Numara Satırı */
.neden-biz3-title-wrap {
height: 38px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}/* Yuvarlak Numara */
.neden-biz3-number {
width: 32px;
height: 32px;
background-color: #0f172a;
/* Koyu Lacivert */
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}.neden-biz3-title-wrap h3 {
font-size: 15px;
font-weight: 800;
margin: 0;
line-height: 1.2;
color: #0f172a;
}/* Büyük İkon */
.neden-biz3-icon {
font-size: 42px;
color: #1e293b;
margin-bottom: 20px;
}/* Açıklama Metni */
.neden-biz3-desc {
min-height: 117px;
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0;
font-weight: 500;
}/* Kart Resim (Sağ) Tarafı */
.neden-biz3-image {
flex: 0 0 42%;
/* Resim genişliği */
position: relative;
}.neden-biz3-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}/* --- Mobil Uyumluluk (Responsive) --- *//* Tabletler için 2 Sütun */
@media (max-width: 1100px) {
.neden-biz3-grid {
grid-template-columns: repeat(2, 1fr);
}
}/* Telefonlar için Tek Sütun ve Kart İçi Düzenleme */
@media (max-width: 768px) {
.neden-biz3-grid {
grid-template-columns: 1fr;
}.neden-biz3-header h2 {
font-size: 22px;
}.neden-biz3-header p {
font-size: 15px;
}.neden-biz3-card {
flex-direction: column;
/* Mobilde resim alta geçer */
}.neden-biz3-image {
height: 200px;
/* Mobilde resim yüksekliği */
}
}