:root {
--gold: #f5cf3c;
--gold-dark: #b89d32;
--dark: #0f141a;
--light: #f8f9fa;
--white: #ffffff;
--primary-orange : #f5cf3c;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Montserrat', sans-serif;
--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}/* --- Mobil Menü Butonu --- */
.mobile-menu-btn {
display: none; /* Masaüstünde gizli */
background: transparent;
border: none;
cursor: pointer;
flex-direction: column;
gap: 6px;
padding: 10px;
margin-left: 15px;
z-index: 1001;
}.mobile-menu-btn span {
display: block;
width: 25px;
height: 2px;
background-color: var(--white);
transition: var(--transition);
}/* --- Sidebar Tasarımı --- */
.mobile-sidebar {
position: fixed;
top: 0;
right: -100%; /* Başlangıçta ekran dışında */
width: 300px;
height: 100vh;
background: var(--dark);
z-index: 2000;
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
display: flex;
flex-direction: column;
padding: 40px;
box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}.mobile-sidebar.active {
right: 0;
}.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(5px);
z-index: 1999;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}.sidebar-overlay.active {
opacity: 1;
visibility: visible;
}.sidebar-top {
display: flex;
justify-content: flex-end;
margin-bottom: 50px;
}.close-menu {
background: none;
border: none;
color: var(--gold);
font-size: 40px;
cursor: pointer;
line-height: 1;
}.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
}.mobile-nav-list li {
margin-bottom: 25px;
opacity: 0;
transform: translateX(20px);
transition: all 0.4s ease;
}.mobile-sidebar.active .mobile-nav-list li {
opacity: 1;
transform: translateX(0);
}/* Linklerin sırayla gelmesi için gecikme */
.mobile-sidebar.active .mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; }
.mobile-sidebar.active .mobile-nav-list li:nth-child(2) { transition-delay: 0.2s; }
.mobile-sidebar.active .mobile-nav-list li:nth-child(3) { transition-delay: 0.3s; }
.mobile-sidebar.active .mobile-nav-list li:nth-child(4) { transition-delay: 0.4s; }
.mobile-sidebar.active .mobile-nav-list li:nth-child(5) { transition-delay: 0.5s; }.mobile-nav-list a {
color: var(--white);
text-decoration: none;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 500;
transition: var(--transition);
}.mobile-nav-list a:hover {
color: var(--gold);
padding-left: 10px;
}.sidebar-footer {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}.sidebar-lang a {
color: #777;
text-decoration: none;
margin-right: 15px;
font-size: 14px;
font-weight: 700;
}.sidebar-lang a.active {
color: var(--gold);
}/* --- Media Query Güncelleme --- */
@media (max-width: 992px) {
.mobile-menu-btn {
display: flex; /* Mobilde görünür yap */
}
.header-right {
display: flex;
align-items: center;
}
}body {
font-family: var(--font-body);
background-color: var(--white);
color: var(--dark);
margin: 0;
overflow-x: hidden;
}/* --- Premium Header --- */
.site-header {
position: absolute;
top: 0; left: 0; width: 100%;
z-index: 1000;
padding: 30px 0;
transition: var(--transition);
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
}.site-header.scrolled {
position: fixed;
background: white;
backdrop-filter: blur(10px);
padding: 15px 0;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}.site-header.scrolled .logo img{
filter: none !important;
}.site-header.scrolled #main-menu a{
color: black;
}.site-header.scrolled .dynamic-lang-list a.diil{
color: white;
}.header-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1500px;
margin: 0 auto;
padding: 0 40px;
}#main-menu {
display: flex;
list-style: none;
gap: 30px;
margin: 0; padding: 0;
}#main-menu a {
color: var(--white);
text-decoration: none;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
transition: var(--transition);
position: relative;
}#main-menu a::after {
content: '';
position: absolute;
bottom: 14px;
right: -1px;
width: 0;
height: 1px;
background: var(--white);
transition: var(--transition);
}.lang-btn {
border: 1px solid rgba(255,255,255,0.3);
color: var(--white);
padding: 8px 16px;
border-radius: 0;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition: var(--transition);
letter-spacing: 1px;
}.lang-btn:hover { border-color: var(--gold); background: var(--gold); color: var(--dark); }/* --- 1. MASAÜSTÜ AÇILIR MENÜ (MEGA MENU) TASARIMI --- */
/* Ürünler linkinin yanına küçük ok işareti */
#main-menu .nav-submenu > a::after {
content: '\25BE';
margin-left: 6px;
font-size: 10px;
transition: var(--transition);
display: inline-block;
}.nav-submenu {
position: relative;
}/* Açılır Kutu (Dropdown) */
.nav-submenu ul {
position: absolute;
top: 100%;
left: -80px; /* Menüyü ortalamak için */
background: var(--dark);
width: 750px; /* 14 ürün olduğu için 2 sütunlu geniş yapı */
display: grid;
grid-template-columns: 1fr 1fr; /* Ürünleri yan yana 2 sütun yap */
padding: 25px;
margin: 0;
list-style: none;
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
border-top: 3px solid var(--gold);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: var(--transition);
z-index: 1000;
}.nav-submenu:hover ul {
opacity: 1;
visibility: visible;
}/* Menü İçindeki Linkler */
.nav-submenu ul li {
margin-bottom: 0 !important;
padding: 0 !important;
opacity: 1 !important; /* Sidebar animasyonundan etkilenmemesi için */
transform: none !important;
}/* --- 2. MOBİL SIDEBAR AKORDEON DÜZENLEMESİ --- */
@media (max-width: 992px) {
/* Masaüstü stilini mobilde sıfırla */
.mobile-nav-list .nav-submenu ul {
position: static;
width: 100%;
display: none; /* Başlangıçta gizli */
grid-template-columns: 1fr;
padding: 10px 0 10px 20px;
background: transparent;
box-shadow: none;
border: none;
opacity: 1;
visibility: visible;
transform: none;
}/* Mobilde açıldığında görünecek sınıf */
.mobile-nav-list .nav-submenu.active-sub ul {
display: block;
}/* Mobilde ürünler yazısının yanına ikon */
.mobile-nav-list .nav-submenu > a {
display: flex;
justify-content: space-between;
align-items: center;
}.mobile-nav-list .nav-submenu > a::after {
content: '+';
font-size: 20px;
color: var(--gold);
}.mobile-nav-list .nav-submenu.active-sub > a::after {
content: '-';
}}/* --- ÜRÜNLER AÇILIR MENÜ TASARIMI (TEK PARÇA) --- *//* 1. Masaüstü Düzeni (993px ve Üstü) */
@media (min-width: 993px) {
.nav-submenu {
position: relative;
}/* Başlığın yanındaki sabit ok */
.nav-submenu > a::after {
content: ' \25BE'; /* Küçük aşağı ok */
margin-left: 5px;
display: inline-block;
vertical-align: middle;
/* Hareket (transform/rotate) eklenmedi */
}/* Açılır Menü Kutusu */
.nav-submenu ul {
position: absolute;
top: 100%;
left: -120px;
width: 870px;
background: var(--dark);
display: grid;
grid-template-columns: 1fr 1fr;
padding: 20px;
margin: 0;
list-style: none;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
border-top: 3px solid var(--gold);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
}/* Hover durumunda menüyü göster */
.nav-submenu:hover ul {
opacity: 1;
visibility: visible;
}/* Menü içindeki her bir ürün linki */
.nav-submenu ul li {
margin: 0 !important;
padding: 0 !important;
transform: none !important;
opacity: 1 !important;
}.nav-submenu ul li a {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 13px !important;
padding: 10px 15px !important;
display: block !important;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: color 0.3s ease;
}/* Hover olunca linklerin rengi */
.nav-submenu ul li a:hover,
.nav-submenu ul li a.active {
color: var(--gold) !important;
background: rgba(255, 255, 255, 0.03);
}
/* Masaüstünde linklerin altındaki default çizgiyi (::after) ürünler içinde iptal et */
.nav-submenu ul li a::after {
display: none !important;
}
}/* 2. Mobil Düzeni (992px ve Altı) */
@media (max-width: 992px) {
/* Masaüstü özelliklerini mobilde sıfırla */
.mobile-nav-list .nav-submenu ul {
display: none; /* JS ile açılacak */
position: static;
width: 100%;
background: transparent;
padding: 10px 0 10px 20px;
border: none;
box-shadow: none;
grid-template-columns: 1fr; /* Mobilde tek sütun */
}/* Mobilde açıldığında (active-sub sınıfı JS ile eklendiğinde) */
.mobile-nav-list .nav-submenu.active-sub ul {
display: block;
}/* Mobilde Ürünler yazısının yanına + işareti */
.mobile-nav-list .nav-submenu > a {
display: flex;
justify-content: space-between;
align-items: center;
}.mobile-nav-list .nav-submenu > a::after {
content: '+';
color: var(--gold);
font-size: 20px;
}.mobile-nav-list .nav-submenu.active-sub > a::after {
content: '-';
}.mobile-nav-list .nav-submenu ul li a {
font-size: 16px !important;
color: #999 !important;
padding: 8px 0 !important;
text-transform: none !important;
}
}/* --- Slider: Textures & Luxury --- */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
}.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.5s ease-in-out;
display: flex;
align-items: end;
}.slide.active { opacity: 1; z-index: 2; }.slide img {
position: absolute;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.8);
transform: scale(1.1);
transition: transform 8s ease-out;
}.slide.active img { transform: scale(1); }.textic {
position: relative;
z-index: 10;
max-width: 900px;
color: var(--white);
padding: 0 60px 80px 60px;
}.textic .text1 {
font-family: var(--font-heading);
font-size: clamp(20px, 8vw, 40px);
font-weight: 700;
line-height: 1;
margin-bottom: 25px;
opacity: 0;
transform: translateY(40px);
transition: 1s 0.5s forwards;
}.textic .text2 {
font-size: 18px;
font-weight: 300;
margin-bottom: 15px;
max-width: 600px;
border-left: 2px solid var(--gold);
padding-left: 25px;
opacity: 0;
transform: translateY(40px);
transition: 1.2s 0.8s forwards;
}.slide.active .text1, .slide.active .text2, .slide.active .btn-gold {
transform: translateY(0);
opacity: 1;
}.btn-gold {
display: inline-flex;
align-items: center;
padding: 18px 45px;
background: var(--gold);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 3px;
transition: var(--transition);
opacity: 0;
}.btn-gold:hover { background: var(--dark); color: var(--white); transform: translateY(-3px); }.slider-btn {
position: absolute;
top: 55%; transform: translateY(-50%);
z-index: 100; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
color: #fff; width: 60px; height: 60px; border-radius: 50%;
cursor: pointer; transition: var(--transition);
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(5px);
}.slider-btn:hover { background: var(--gold); border-color: var(--gold); }
.prev-btn { left: 40px; }
.next-btn { right: 40px; }/* --- Hakkımızda: Editoryal Tasarım --- */
.premium-editorial-about {
padding: 140px 0;
background-color: var(--white);
}.image-composition {
position: relative;
display: flex;
justify-content: center;
}.main-img-wrapper {
position: relative;
z-index: 2;
width: 85%;
}.main-img {
width: 100%;
height: 600px;
object-fit: cover;
box-shadow: 30px 30px 80px rgba(0,0,0,0.1);
}.gold-outline {
position: absolute;
top: 40px; right: 0;
width: 100%; height: 100%;
border: 1px solid var(--gold);
z-index: 1;
transform: translateX(30px);
}.experience-badge {
position: absolute;
bottom: -30px; left: 0;
background: var(--dark);
color: var(--white);
padding: 30px;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
}.experience-badge .number {
font-family: var(--font-heading);
font-size: 50px;
line-height: 1;
color: var(--gold);
font-weight: 700;
}.experience-badge .text {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 10px;
text-align: center;
}.editorial-title {
font-family: var(--font-heading);
font-size: 40px;
color: var(--dark);
line-height: 1.1;
margin-bottom: 35px;
font-weight: 700;
margin-top: 0;
}.subtitle-line {
color: var(--gold);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
font-weight: 700;
display: block;
margin-bottom: 15px;
}.lead-text {
font-size: 20px;
font-style: italic;
color: #555;
margin-bottom: 25px;
font-family: var(--font-heading);
}.full-description {
font-size: 15px;
line-height: 1.8;
color: #777;
column-count: 1;
}.editorial-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 50px;
}.stat-card {
padding: 30px 20px;
background: var(--light);
text-align: center;
transition: var(--transition);
}.stat-card:hover { background: var(--white); box-shadow: 0 15px 40px rgba(0,0,0,0.05); transform: translateY(-5px); }.stat-number {
display: block;
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: var(--gold);
}.stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #999;
}/* --- Mobil --- */
@media (max-width: 992px) {
.header-center { display: none; }
.site-header { padding: 15px 0; }
.editorial-title { font-size: 38px; }
.image-composition { margin-bottom: 70px; display: none; }
.textic { padding: 0 30px; }
}/* --- Koleksiyonlar Bölüm Stili --- */
.textile-collections-section {
padding: 120px 0;
background-color: #f4f4f4; /* Elit Açık Gri Arka Plan */
}.textile-collections-section .section-title{
font-size: 40px;
}/* Başlık Tasarımı */
.section-header {
text-align: center;
margin-bottom: 70px;
}.section-subtitle {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 5px;
color: #f5cf3c; /* Gold */
margin-bottom: 15px;
font-weight: 700;
}.section-title {
font-size: 45px;
color: #0f141a;
font-weight: 700;
margin-bottom: 20px;
margin-top: 0;
}.header-line {
width: 60px;
height: 1px;
background: #0f141a;
margin: 0 auto;
}/* Kart Tasarımı */
.collection-card {
position: relative;
display: block;
height: 520px;
overflow: hidden;
background: #000;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: all 0.5s ease;
}.collection-img-wrapper {
width: 100%;
height: 100%;
transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}.collection-card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9);
}/* Overlay & Yazılar */
.collection-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(15, 20, 26, 0.75) 100%);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 50px;
transition: all 0.5s ease;
}.collection-info {
text-align: center;
color: #fff;
padding: 0 20px;
}.collection-name {
font-size: 25px;
letter-spacing: 1px;
margin-bottom: 15px;
font-weight: 600;
transition: transform 0.5s ease;
}.collection-btn-reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}.btn-text {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
color: #f5cf3c;
border-bottom: 1px solid #f5cf3c;
padding-bottom: 5px;
}/* Hover Efektleri */
.collection-card:hover .collection-img-wrapper {
transform: scale(1.1);
}.collection-card:hover .collection-btn-reveal {
opacity: 1;
transform: translateY(0);
}.collection-card:hover .collection-overlay {
background: linear-gradient(to bottom, transparent 20%, rgba(15, 20, 26, 0.85) 100%);
}/* Tümünü Gör Butonu */
.view-all-container {
text-align: center;
margin-top: 30px;
}.btn-luxury-outline {
display: inline-block;
padding: 18px 50px;
border: 1px solid #0f141a;
color: #0f141a;
text-decoration: none;
font-weight: 700;
font-size: 12px;
letter-spacing: 4px;
transition: all 0.4s ease;
background: transparent;
}.btn-luxury-outline:hover {
background: #0f141a;
color: #fff;
}/* Mobil Uyumluluk */
@media (max-width: 991px) {
.textile-collections-section { padding: 60px 0; }
.section-title { font-size: 30px !important; }
.collection-card { height: 250px; }
}/**//* Header Right Hizalama */
.header-right {
display: flex;
align-items: center;
gap: 15px;
}/* Dinamik Dil Listesi Resetleme */
.dynamic-lang-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 8px; /* Bayraklar arası boşluk */
}/* Her bir dil linkinin tasarımı (Eski lang-btn tasarımı gibi) */
.dynamic-lang-list a.diil {
display: flex;
align-items: center;
gap: 8px;
color: var(--white);
padding: 6px 12px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
width: 60px;
height: 60px;
justify-content: center;
border-radius: 100%;
}.dynamic-lang-list a.diil .icon{
display: none;
}/* Bayrak resmi boyutu */
.dynamic-lang-list .icon img {
width: 18px !important;
height: 18px !important;
border-radius: 50%;
object-fit: cover;
display: block;
}/* Hover durumu */
.dynamic-lang-list a.diil {
border-color: var(--gold);
background: var(--gold);
}/* Hover olunca resmi parlatma veya koruma */
.dynamic-lang-list a.diil:hover img {
filter: brightness(1.1);
}/* --- Mobil Düzenleme --- */
@media (max-width: 992px) {
.site-header.scrolled .mobile-menu-btn span{
background-color: black;
}/* Mobilde metinleri gizleyip sadece bayrakları bırakabiliriz (Yer kazanmak için) */
.dynamic-lang-list a.diil span {
}
.dynamic-lang-list a.diil {
padding: 6px; /* Sadece bayrak varken karemsi dursun */
border-radius: 50%; /* Mobilde yuvarlak bayrak butonları */
}.mobile-menu-btn {
display: flex; /* Hamburger menü butonu */
}
}/* Mobil Sidebar içindeki dil kısmını da düzeltelim (Eğer oraya da eklediysen) */
.sidebar-lang .dynamic-lang-list {
flex-direction: row;
justify-content: center;
margin-top: 20px;
}.surdurebilirlik-section {
position: relative;
width: 100%;
min-height: 85vh; /* Çok uzun olmaması için biraz kıstık */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}/* Video */
.surdurebilirlik-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}/* Maske: Düz renk yerine çok ağır bir gradient. Okunabilirlik %100 */
.surdurebilirlik-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Derin petrol mavisi ve siyah karışımı */
background: linear-gradient(
90deg,
rgba(5, 15, 25, 0.499) 0%,
rgba(5, 15, 25, 0.695) 50%,
rgba(5, 15, 25, 0.825) 100%
);
z-index: 1;
opacity: 80%;
}/* Wrapper */
.surdurebilirlik-wrapper {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center; /* Dikey ortalama */
}/* --- SOL TARAFI (METİN) --- */
.surdurebilirlik-content {
flex: 0 0 40%; /* Genişlik %45 */
padding-right: 4rem;
}.surdurebilirlik-headline {
line-height: 1.2;
color: #ffffff;
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
margin-top: 0;
}.surdurebilirlik-text {
color: #ffffff;
margin-bottom: 2rem;
font-weight: 400;
text-align: justify;
max-width: 320px;
font-size: 14px;
line-height: 1.8;
column-count: 1;
}/* Liste Yapısı */
.surdurebilirlik-list {
list-style: none;
margin-bottom: 3rem;
border-left: 1px solid rgba(255, 255, 255, 0.2);
padding-left: 1.5rem;
}.surdurebilirlik-list li {
margin-bottom: 0.8rem;
color: #fff;
font-weight: 500;
display: flex;
align-items: center;
}.surdurebilirlik-list li::before {
content: "■"; /* Kare madde işareti */
color: #c5a059;
font-size: 0.8rem;
margin-right: 12px;
}/* Buton: Köşeli ve Ciddi */
.surdurebilirlik-cta {
display: inline-block;
padding: 18px 40px;
background-color: transparent;
border: 1px solid #c5a059;
color: #c5a059;
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
}.surdurebilirlik-cta:hover {
background-color: #c5a059;
color: #000;
}/* --- SAĞ TARAF (DİKEY SÜTUNLAR) --- */
.surdurebilirlik-columns {
flex: 0 0 55%;
display: flex;
justify-content: flex-end;
height: 85vh; /* Sütunların yüksekliği */
}/* Sütun Yapısı */
.surdurebilirlik-col {
flex: 1; /* Hepsi eşit genişlikte */
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.15); /* Çerçeve mantığı */
margin-right: -1px; /* Çizgilerin üst üste binmesi için */
position: relative;
transition: all 0.4s ease;
cursor: default;
}/* İlk ve son kenarlıkları düzelt *//* İçerik Hizalama */
.surdurebilirlik-col-inner {
height: 100%;
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: center; /* İçeriği yukarı ve aşağı yay */
position: relative;
}/* Numara */
.surdurebilirlik-number {
font-size: 3rem;
color: rgba(255, 255, 255, 0.1);
font-weight: 700;
position: absolute;
right: 30px;
top: 40px;
transition: color 0.3s;
}.surdurebilirlik-icon {
width: 100%;
height: auto;
}.surdurebilirlik-icon svg {
fill: #fff;
width: 50px;
height: 50px;
}/* Başlık */
.surdurebilirlik-col-title {
font-size: 1.5rem;
margin-top: 40px;
padding-left: 0px;
line-height: 1.2;
color: #ffffff;
font-weight: 700;
margin-bottom: 20px;
}/* Açıklama */
.surdurebilirlik-col-desc {
opacity: 0.7;
transition: opacity 0.3s;
padding: 0px;
color: #ffffff;
margin-bottom: 2rem;
font-weight: 400;
max-width: 320px;
font-size: 14px;
line-height: 1.8;
column-count: 1;
}/* Alt Çizgi Animasyonu */
.surdurebilirlik-line {
width: 0%;
height: 3px;
background-color: #c5a059;
margin-top: 1.5rem;
transition: width 0.4s ease;
}/* --- HOVER EFEKTLERİ --- */
.surdurebilirlik-col:hover {
background: rgba(197, 160, 89, 0.05); /* Çok hafif gold tint */
border-color: #ffffff54;
}.surdurebilirlik-col:hover .surdurebilirlik-line {
width: 100%;
}.surdurebilirlik-col:hover .surdurebilirlik-number {
color: rgba(197, 160, 89, 0.4);
}.surdurebilirlik-col:hover .surdurebilirlik-col-desc {
opacity: 1;
color: #fff;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 1024px) {
.surdurebilirlik-wrapper {
flex-direction: column;
padding: 4rem 2rem;
}.surdurebilirlik-content {
flex: 1;
padding-right: 0;
margin-bottom: rem;
text-align: left;
}.surdurebilirlik-section {
min-height: 55vh;
}.surdurebilirlik-headline {
font-size: 2.5rem;
}.surdurebilirlik-columns {
width: 100%;
height: auto;
flex-direction: column; /* Mobilde alt alta */
display: none;
}.surdurebilirlik-col {
border-right: none;
border-left: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
height: auto;
}.surdurebilirlik-col-inner {
padding: 2rem 0;
flex-direction: row;
align-items: center;
gap: 20px;
}.surdurebilirlik-col-title {
margin: 0;
font-size: 1.2rem;
flex: 1;
}.surdurebilirlik-col-desc {
display: none; /* Mobilde kalabalık yapmaması için açıklamayı gizleyebiliriz */
}.surdurebilirlik-number {
font-size: 2rem;
}.surdurebilirlik-line {
display: none;
}
}
a.WhatsApp1 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px; /* İkon ve yazı arasındaki boşluk */
/* Buton Boyut ve Şekil */
padding: 10px 20px;
min-width: 150px;
height: 50px;
border-radius: 50px; /* Oval görünüm */
/* Konum */
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999;
/* Renkler ve Font */
background: #2eb843; /* Orijinal WhatsApp Yeşili */
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
/* Efektler */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
animation: whatsapp-pulse infinite 2s ease-in-out;
}/* Üzerine gelince büyüme efekti */
a.WhatsApp1:hover {
transform: scale(1.05);
background: #20ba5a;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
color: #fff;
}/* İkon Boyutu */
a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: #fff;
}/* Yayılma (Pulse) Animasyonu */
@keyframes whatsapp-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}/* Mobil cihazlarda biraz daha küçük görünebilir */
@media (max-width: 480px) {
a.WhatsApp1 {
padding: 8px 15px;
min-width: 130px;
font-size: 14px;
bottom: 15px;
left: 15px;
}
}.mobilbuttonlar {
display: none;
}@media (max-width: 1024px) {
a.WhatsApp1 {
bottom: 60px;
}.btn {
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
width: 100%;
}.btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}.mobilbuttonlar {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
display: flex;
}.btn1 {
background: #f5cf3c;
border-color: #f5cf3c;
color: #fff;
}.btn2 {
background: #b59c29;
border-color: #b59c29;
color: #fff;
}.btn3 {
background: #99831d;
border-color: #99831d;
color: #fff;
}
}@media(max-width:1024px){
.slider-container{
height: 60vh;
}.slider-container .slider-btn{
display: none;
}.view-all-container{
margin-top: 20px;
}.premium-editorial-about {
padding: 60px 0;
}.header-container{
padding: 0 20px;
}.logo img{
height: 40px;
}.stat-number{
font-size: 25px;
}.stat-label{
font-size: 9px;
}.stat-card {
padding: 20px 10px;
}
}