.header-section {
text-align: center;
max-width: 900px;
margin: 0 auto 50px auto;
}.header-section h2 {
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}.header-section p {
font-size: 14px;
color: #888;
line-height: 1.5;
font-weight: 300;
margin-bottom: 30px;
}.history-link {
text-decoration: none;
color: #888;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: color 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}.history-link:hover {
color: #333;
}.product {
padding: 70px 0px;
}/* 4'lü Grid Sistemi (Scroll Yok) */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 0 auto 0px auto;
}/* Tekil Ürün Kartı */
.product-card {
cursor: pointer;
display: flex;
flex-direction: column;
gap: 15px;
}/* Resim Alanı ve Hover Efekti */
.image-box {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
/* Resim oranını ayarlayabilirsiniz */
background-color: #E6E5E9;
/* İstenen gri zemin */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}/* Varsayılan (Dekupe/Gri Zeminli) Resim */
.default-img {
width: 100%;
height: 100;
object-fit: cover;
transition: transform 0.6s ease;
position: relative;
z-index: 1;
}/* Üzerine Gelince Çıkacak Renkli/Uygulama Resmi */
.hover-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Resmi kutuya tam yayar */
opacity: 0;
z-index: 2;
transition: opacity 0.5s ease, transform 0.6s ease;
transform: scale(1.05);
/* Şık bir yakınlaştırma efekti için */
}/* Üstüne Gelme (Hover) Durumu */
.product-card:hover .hover-img {
opacity: 1;
transform: scale(1);
}/* İsterseniz dekupe resmi hafif aşağı kaydırabilirsiniz */
.product-card:hover .default-img {
transform: scale(0.95);
}/* Ürün Alt Bilgi (İsim ve Ok) */
.product-info {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 5px;
}.product-name {
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}/* Animasyonlu Ok Çizgisi */
.arrow-line {
height: 1px;
background-color: #aaa;
width: 40px;
/* Varsayılan çizgi uzunluğu */
position: relative;
transition: width 0.4s ease, background-color 0.4s ease;
}.arrow-line::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 6px;
height: 6px;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
transform: rotate(45deg);
transition: border-color 0.4s ease;
}.product-card:hover .arrow-line {
width: 70px;
/* Üzerine gelince uzar */
background-color: #333;
}.product-card:hover .arrow-line::after {
border-color: #333;
}/* En Alttaki İlerleme/Çizgi Çubuğu */
.bottom-line-container {
max-width: 1400px;
margin: 0 auto;
height: 2px;
background-color: #e0e0e0;
position: relative;
}.bottom-line-active {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #000;
width: 25%;
/* İlk sekmeyi aktif gibi gösterir */
transition: width 0.4s ease;
}/* Responsive Uyumluluk (Sadece çok küçük ekranlarda alt alta düşer) */
@media (max-width: 900px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}.bottom-line-active {
width: 50%;
}
}@media (max-width: 500px) {
.product-grid {
grid-template-columns: 1fr;
}.bottom-line-active {
width: 100%;
}
}/**/.collection-section {
width: 100%;
}/* Üst Başlık ve Link Alanı */
.collection-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}.header-left {
max-width: 600px;
}.header-left h2 {
font-size: 28px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: #111;
margin-bottom: 15px;
}.header-left p {
font-size: 14px;
color: #888;
line-height: 1.6;
font-weight: 300;
}.header-right a {
text-decoration: none;
color: #888;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: color 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}.header-right a:hover {
color: #111;
}/* SWIPER SLIDER ALANI */
.collection-section .swiper {
width: 100%;
padding-bottom: 40px;
/* Scrollbar'ın resimlerin altında durması için boşluk */
}.collection-section .swiper-slide {
/* Masaüstünde 3 tam resim göstermek için Swiper JS ayarlarını kullanacağız ama temel stil burası */
overflow: hidden;
position: relative;
}.collection-section .swiper-slide img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
/* Fotoğrafların yatay dikdörtgen oranını korur */
object-fit: cover;
transition: transform 0.8s ease;
/* Üzerine gelince yavaşça büyür */
}/* Resimlerin Üzerine Gelme (Hover) Efekti */
.collection-section .swiper-slide:hover img {
transform: scale(1.04);
}/* Zarif Siyah Scrollbar (Kaydırma Çubuğu) Tasarımı */
.collection-section .swiper-scrollbar {
background: #eaeaea !important;
/* Arka plan açık gri çizgi */
height: 2px !important;
/* Çok ince şık yapı */
bottom: 0 !important;
border-radius: 0 !important;
}.collection-section .swiper-scrollbar-drag {
background: #111 !important;
/* Aktif kaydırma alanı siyah */
border-radius: 0 !important;
transition: background 0.3s ease;
}.collection-section .swiper-scrollbar-drag:hover {
background: #444 !important;
/* Scrollbar üzerine gelince hafif açılır */
}.swiper-bg {
margin-top: 70px;
}.swiper-bg .container {
position: relative;
}/***/.why-us-section {
width: 100%;
height: auto;
padding: 70px 0px;
}.why-us-section .container {
display: flex;
align-items: flex-start;
gap: 80px;
}/* SOL TARAF: Sabit (Sticky) Yazı Alanı */
.sticky-text-area {
flex: 0 0 310px;
/* Genişliği sabitliyoruz */
position: -webkit-sticky;
position: sticky;
top: 150px;
/* Sayfanın ne kadar üstünden itibaren sabitleneceği */
}.sticky-text-area h2 {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
}.sticky-text-area p {
font-size: 14px;
color: #888;
line-height: 1.5;
font-weight: 500;
margin-bottom: 30px;
}/* SAĞ TARAF: 4'lü Grid Kart Alanı */
.features-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
/* Dikey boşluk 60px, yatay boşluk 40px */
}/* Tekil Kart Tasarımı */
.feature-card {
display: flex;
flex-direction: column;
group: card;
}.image-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
/* Kare formunda şık resimler */
overflow: hidden;
margin-bottom: 20px;
background-color: #f9f9f9;
}.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
/* Yavaş ve lüks zoom efekti */
}.feature-card:hover .image-wrapper img {
transform: scale(1.05);
}.feature-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.5px;
}.feature-card p {
font-size: 13px;
color: #666;
line-height: 1.5;
font-weight: 300;
margin-bottom: 15px;
}.know-more-link {
font-size: 13px;
font-weight: 500;
color: #111;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.3s ease;
margin-top: auto;
/* Yazı kısaysa linki hep aşağıda tutar */
}.know-more-link span {
margin-left: 8px;
font-size: 14px;
transition: transform 0.3s ease;
}.feature-card:hover .know-more-link {
color: #555;
}.feature-card:hover .know-more-link span {
transform: translateX(4px);
/* Üzerine gelince ok hafif sağa kayar */
}/* Responsive (Mobil ve Tablet Uyumluluğu) */
@media (max-width: 1024px) {
.why-us-section {
gap: 40px;
}.sticky-text-area {
flex: 0 0 220px;
}
}@media (max-width: 850px) {/* Mobilde yan yana yapı bozulur, alt alta geçer, sabitleme kalkar */
.why-us-section {
flex-direction: column;
margin: 60px auto;
}.sticky-text-area {
flex: none;
position: relative;
top: 0;
width: 100%;
margin-bottom: 20px;
}.sticky-text-area h2 {
margin-bottom: 15px;
}.features-grid {
grid-template-columns: 1fr;
gap: 50px;
}.image-wrapper {
aspect-ratio: 4 / 3;
}
}/**//* Test yazısı */
.scroll-indicator {
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
letter-spacing: 2px;
font-weight: 300;
}/* --- PARALLAX VE SLIDER ANA BÖLÜMÜ --- */
.parallax-wrapper {
position: relative;
width: 100%;
padding: 140px 20px;
overflow: hidden;
/* Dışarı taşan kısmı gizler */
display: flex;
align-items: center;
justify-content: center;
}/* Kaydırılacak (Parallax) Arka Plan Konteyneri */
.parallax-bg-container {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 140%;
/* Scroll payı için %140 uzun yapıyoruz */
background-color: #000;
z-index: 0;
will-change: transform;
}/* Otomatik Geçiş Yapan Resimler (Slideshow) */
.bg-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
/* 24 saniyelik sonsuz, pürüzsüz animasyon */
animation: luxuryCrossfade 24s linear infinite;
}/* 4 Farklı Lüks Resim ve Gecikme Ayarları */
.slide-1 {
background-image: url('../images/slider/slider1.webp');
animation-delay: 0s;
}.slide-2 {
background-image: url('../images/slider/slider2.webp');
animation-delay: 6s;
/* 6 saniye sonra başlar */
}.slide-3 {
background-image: url('../images/slider/slider3.webp');
animation-delay: 12s;
/* 12 saniye sonra başlar */
}.slide-4 {
background-image: url('../images/slider/slider4.webp');
animation-delay: 18s;
/* 18 saniye sonra başlar */
}/* Sinematik Geçiş ve Hafif Yakınlaşma (Ken Burns) Efekti */
@keyframes luxuryCrossfade {
0% {
opacity: 0;
transform: scale(1.05);
}10% {
opacity: 1;
}25% {
opacity: 1;
}35% {
opacity: 0;
transform: scale(1);
}100% {
opacity: 0;
transform: scale(1);
}
}/* Siyah Karartma Perdesi (Yazıları patlatmak için) */
.parallax-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.65);
/* %75 Lüks siyah perde */
z-index: 1;
}/* --- İÇERİK (YAZILAR VE İKONLAR) --- */
.content-wrapper {
position: relative;
z-index: 2;
max-width: 1200px;
width: 100%;
text-align: center;
}/* Üst Başlık Grubu ve Scroll Giriş Animasyonu */
.section-heading {
margin-bottom: 70px;
opacity: 0;
transform: translateY(40px);
transition: all 1s ease;
}.section-heading.visible {
opacity: 1;
transform: translateY(0);
}.section-heading h2 {
font-size: 32px;
font-weight: 500;
letter-spacing: 1.5px;
color: #fff;
margin-bottom: 25px;
text-transform: uppercase;
}.section-heading p {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
max-width: 850px;
margin: 0 auto;
color: #e0e0e0;
}/* --- YUVARLAK BEYAZ İKONLAR --- */
.round-icons-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px 70px;
}/* Tekil İkon Kutusu ve Scroll Animasyonu */
.icon-box {
display: flex;
flex-direction: column;
align-items: center;
width: 140px;
cursor: pointer;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}.icon-box.visible {
opacity: 1;
transform: translateY(0);
}/* Bembeyaz Yuvarlak Çerçeve */
.circle-bg {
width: 95px;
height: 95px;
background-color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}/* Altın Rengi İkon */
.circle-bg i {
font-size: 34px;
color: #B89950;
transition: color 0.4s ease, transform 0.4s ease;
}/* Hover (Üzerine Gelme) Efektleri */
.icon-box:hover .circle-bg {
transform: translateY(-10px);
background-color: #B89950;
box-shadow: 0 20px 40px rgba(184, 153, 80, 0.3);
}.icon-box:hover .circle-bg i {
color: #ffffff;
transform: scale(1.1);
}/* İkon Altı İsimleri */
.icon-box span {
font-size: 14px;
font-weight: 500;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
line-height: 1.4;
transition: color 0.3s ease;
}.icon-box:hover span {
color: #B89950;
}/* Responsive Uyumluluk */
@media (max-width: 900px) {
.round-icons-container {
gap: 40px 30px;
}.circle-bg {
width: 80px;
height: 80px;
}.circle-bg i {
font-size: 28px;
}.section-heading h2 {
font-size: 26px;
}
}@media (max-width: 600px) {
.round-icons-container {
gap: 40px 20px;
}.icon-box {
width: 40%;
}
}/* Ana Kapsayıcı Alan */
.talep-formu {
width: 100%;
background-color: #f1f1f1;
color: #000000;
padding: 30px 0px;
}/* İkiye Bölünmüş Tasarım */
.talep-formu .split-layout {
display: flex;
min-height: 80vh;
width: 100%;
background-color: #fff;
}/* --- SOL TARAF (VİDEO ALANI) --- */
.talep-formu .video-column {
flex: 1;
position: relative;
overflow: hidden;
/* Taşmaları ve kırpılan alanı gizler */
background-color: #111;
}.talep-formu .video-crop-wrapper {
position: absolute;
/* İstediğiniz -100px içeri alma / kırpma işlemi */
top: -100px;
bottom: -100px;
left: -100px;
right: -100px;
pointer-events: none;
/* Videoya tıklanmasını ve YouTube'a gitmesini engeller */
}.talep-formu .video-crop-wrapper iframe {
width: 135%;
height: 135%;
object-fit: cover;
border: none;
transform: translate(-120px, -130px);}/* --- SAĞ TARAF (İÇERİK ALANI) --- */
.talep-formu .content-column {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 5%;
}.talep-formu .content-inner {
max-width: 500px;
width: 100%;
}.talep-formu .subtitle {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 20px;
color: #000;
}.talep-formu .main-title {
font-size: 32px;
font-weight: 600;
margin-top: 0;
margin-bottom: 25px;
color: #000;
line-height: 1.1;
text-transform: uppercase;
}.talep-formu .description {
font-size: 15px;
color: #555555;
line-height: 1.5;
margin-bottom: 45px;
font-weight: 500;
}/* --- BUTON TASARIMI --- */
.talep-formu .action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background-color: #f4f4f4;
color: #000;
text-decoration: none;
padding: 16px 40px;
border-radius: 50px;
/* Görseldeki gibi oval */
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}/* Buton Hover (Üzerine Gelince) Animasyonu */
.talep-formu .action-btn:hover {
background-color: #e5e5e5;
}.talep-formu .action-btn svg {
transition: transform 0.3s ease;
}/* Üzerine gelince içindeki ok hafifçe sağa kaysın */
.talep-formu .action-btn:hover svg {
transform: translateX(4px);
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 900px) {
.talep-formu .split-layout {
flex-direction: column;
}.talep-formu .video-column {
min-height: 45vh;
/* Mobilde video alanının yüksekliği */
}.talep-formu .content-column {
padding: 50px 20px;
}.talep-formu .main-title {
font-size: 36px;
}
}/**/.site-footer {
background-color: #ffffff;
color: #333;
padding: 60px 20px 20px 20px;
border-top: 1px solid #f0f0f0;
}.site-footer .footer-container {
max-width: 1200px;
margin: 0 auto;
}/* --- 1. ÜST KATMAN: LOGO VE İLETİŞİM/SOSYAL --- */
.site-footer .footer-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 30px;
}.site-footer .footer-logo {
display: flex;
align-items: end;
}.site-footer .footer-logo img {
height: 65px;
width: auto;
display: block;
}.site-footer .footer-logo span {
letter-spacing: 1px;
display: block;
width: 100%;
text-align: center;
font-size: 12px;
color: #555;
padding-bottom: 25px;
}.site-footer .footer-contact-social {
display: flex;
align-items: center;
gap: 30px;
}.site-footer .contact-info {
display: flex;
gap: 20px;
font-size: 14px;
font-weight: 500;
color: #555;
}.site-footer .contact-info a {
text-decoration: none;
color: inherit;
transition: color 0.3s;
display: flex;
align-items: center;
gap: 8px;
}.site-footer .contact-info a:hover {
color: #d4af37;
}.site-footer .contact-info i {
color: #d4af37;
font-size: 16px;
}.site-footer .social-icons {
display: flex;
gap: 8px;
border-left: 1px solid #eaeaea;
padding-left: 30px;
}.site-footer .social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: #f9f9f9;
color: #333;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s;
}.site-footer .social-icons a svg {
width: 19px;
height: 19px;
fill: #333;
}.site-footer .social-icons a:hover {
background-color: #d4af37;
color: #fff;
transform: translateY(-3px);
}.footer-logo2 img {
height: 20px;
width: auto;
}/* --- 2. ORTA KATMAN: BAŞLIKLAR (MENÜ) --- */
.site-footer .footer-middle {
display: flex;
justify-content: center;
margin-bottom: 35px;
border-top: 1px solid #eaeaea;
padding-top: 35px;
}.site-footer .footer-nav {
display: flex;
gap: 40px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
}.site-footer .footer-nav a {
text-decoration: none;
color: #111;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s;
}.site-footer .footer-nav a:hover {
color: #d4af37;
}/* --- 3. EN ALT KATMAN: COPYRIGHT, ALQOR VE HASEM LOGOLARI --- */
.site-footer .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #eaeaea;
font-size: 13px;
color: #888;
flex-wrap: wrap;
gap: 20px;
}/* Sol Alt Kısım: Copyright ve Alqor Yan Yana */
.site-footer .footer-bottom-left {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}.site-footer .divider {
color: #ccc;
}.site-footer .subsidiary-area {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}.site-footer .alqor-logo {
height: 22px;
opacity: 0.8;
transition: opacity 0.3s;
margin-bottom: -2px;
/* Yazıyla hizalamak için ufak düzeltme */
}.site-footer .alqor-logo:hover {
opacity: 1;
}/* Sağ Alt Kısım: Sadece Hasem Logosu (Ajans İmzası) */
.site-footer .hasem-logo {
height: 18px;
opacity: 0.6;
/* Göz yormaması için biraz daha şeffaf */
transition: opacity 0.3s;
}.site-footer .hasem-logo:hover {
opacity: 1;
}/* --- RESPONSIVE (MOBİL) UYUMLULUK --- */
@media (max-width: 992px) {.site-footer .footer-top {
flex-direction: column;
justify-content: center;
text-align: center;
display: none;
}.site-footer .footer-middle{
display: none;
}
.site-footer .footer-contact-social {
flex-direction: column;
gap: 20px;
}.site-footer .social-icons {
border-left: none;
padding-left: 0;
border-top: 1px solid #eaeaea;
padding-top: 20px;
}.site-footer .footer-bottom {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 15px;
padding-top: 0;
border: none;
margin-bottom: 40px;
}.site-footer .footer-bottom-left {
justify-content: center;
flex-direction: column;
gap: 10px;
}.site-footer .divider {
display: none;
/* Mobilde alt alta düşeceği için çizgiyi gizliyoruz */
}
}@media (max-width: 600px) {
.site-footer .contact-info {
flex-direction: column;
align-items: center;
gap: 15px;
}.site-footer .footer-nav {
flex-direction: column;
gap: 20px;
text-align: center;
}
}/* --- MOBİL İYİLEŞTİRMELER (Genel & Şık) --- */@media (max-width: 768px) {
/* Başlık Alanları */
.header-section {
margin-bottom: 30px;
padding: 0 15px;
}.header-section h2,
.header-left h2,
.main-title {
font-size: 22px !important; /* Daha dengeli başlık boyutu */
letter-spacing: 1px;
}/* Ürün Grid Sistemi - Mobilde 2'li yapı daha butik durur */
.product-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
padding: 0 10px;
}.product-name {
font-size: 11px; /* Küçük ekranlarda metin taşmasını önler */
}.arrow-line {
display: none; /* Mobilde çok fazla yatay çizgi kalabalık yapar */
}/* Koleksiyon (Swiper) */
.collection-header {
flex-direction: column;
align-items: flex-start !important;
gap: 10px;
padding: 0 20px;
}.header-right {
width: 100%;
}/* Neden Biz (Why Us) Bölümü */
.why-us-section {
margin-top: 0;
padding: 40px 20px;
}.features-grid {
grid-template-columns: 1fr !important; /* Tek sütun ama resimler daha küçük */
gap: 30px !important;
}.feature-card h3 {
font-size: 16px;
}/* Parallax & İkonlar */
.parallax-wrapper {
padding: 80px 15px;
}.round-icons-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr); /* Mobilde ikonları 2'li dizmek daha toplu durur */
gap: 30px 10px;
}.icon-box {
width: 100% !important;
}.circle-bg {
width: 70px !important;
height: 70px !important;
}.circle-bg i {
font-size: 24px !important;
}/* Talep Formu (Video Bölümü) */
.talep-formu .video-column {
min-height: 250px; /* Mobilde videoyu çok uzun tutmayalım */
}.talep-formu .video-crop-wrapper {
top: 0; bottom: 0; left: 0; right: 0; /* Mobilde taşmayı sıfırla */
}.talep-formu .video-crop-wrapper iframe {
width: 100%;
height: 100%;
transform: none; /* Mobilde ortalı dursun */
object-fit: cover;
}.talep-formu .content-column {
padding: 40px 20px;
text-align: center;
}.talep-formu .action-btn {
width: 100%; /* Mobilde buton tam genişlik (tıklama kolaylığı) */
padding: 14px 20px;
}/* Footer */
.site-footer {
padding: 40px 15px 20px 15px;
}.footer-logo img {
height: 50px;
}.footer-nav {
gap: 15px !important;
}.footer-nav a {
font-size: 12px;
}.footer-contact-social {
width: 100%;
justify-content: center;
}.social-icons {
justify-content: center;
width: 100%;
}
}/* --- EKSTRA KÜÇÜK EKRANLAR (iPhone SE vs.) --- */
@media (max-width: 400px) {
.product-grid {
grid-template-columns: 1fr !important; /* Çok küçük ekranlarda tekli yapıya dön */
}.round-icons-container {
grid-template-columns: repeat(2, 1fr);
}
}@media(max-width:1024px){
.why-us-section .container{
display: block;
}
}