/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap');
/* NO FONT CONTROLS - LET BROWSER HANDLE */
/* ===== CSS VARIABLES ===== */
:root {
/* Colors */
--primary-color: #D4AF37;
--primary-hover: #c99640;
--primary-dark: #B8860B;
--secondary-color: #2c3e50;
--accent-color: #e74c3c;
--text-primary: #2c3e50;
--text-secondary: #7f8c8d;
--text-light: #ffffff;
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-dark: #2c3e50;
--border-color: #e9ecef;
--shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
--shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.2);
/* Typography */
--font-primary: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
--font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-elegant: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
--font-luxury: 'Crimson Text', 'Georgia', serif;
--font-classic: 'Libre Baskerville', 'Times New Roman', serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
--spacing-xxl: 6rem;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.5s ease;
/* Breakpoints */
--mobile-max: 767px;
--tablet-max: 1023px;
--desktop-min: 1024px;
}
/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Prevent initial layout shifts and animations for specific elements */
.product-card:not(.page-loaded),
.hero-content:not(.page-loaded) {
transform: translateZ(0) !important;
animation: none !important;
transition: transform 0s !important;
}
/* Hardware acceleration for frequently animated elements */
.page-loaded .hero-content,
.page-loaded .product-card,
.page-loaded .nav-dot,
.page-loaded .modal,
.page-loaded .cta-btn {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* Optimize images */
img {
image-rendering: auto;
max-width: 100%;
height: auto;
}
/* Smooth scrolling optimization */
html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* GPU acceleration for transforms */
.premium-card,
.featured-image,
.craft-gallery,
.category-title,
.brand-highlight {
transform: translate3d(0, 0, 0);
will-change: transform, opacity;
color: var(--primary-color);
font-weight: 600;
text-shadow: 0 1px 2px rgba(218, 165, 32, 0.3);
}
.fistiklava-highlight {
background: linear-gradient(135deg, #DAA520 0%, #FF8C00 50%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
text-shadow: 0 2px 4px rgba(218, 165, 32, 0.4);
}
/* ===== RESET & BASE STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
scroll-behavior: smooth !important;
}
/* ===== PREMIUM IMAGE QUALITY OPTIMIZATION ===== */
img {
/* Kalite artırma */
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: optimizeQuality;
/* Smooth rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Loading optimization */
loading: lazy;
/* Prevent dragging */
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
/* Retina display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: optimizeQuality;
filter: contrast(1.02) saturate(1.05);
}
}
html {
font-size: 16px;
margin: 0;
padding: 0;
scroll-behavior: smooth;
overflow-x: hidden;
overflow-y: scroll;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
min-height: 100vh;
scroll-padding-top: 120px;
margin-bottom: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-primary);
font-weight: 400;
font-display: swap;
background:
/* Premium marble texture */
url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
/* Luxury fabric weave */
url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23daa520' fill-opacity='0.06'%3E%3Cpath d='M0 0h60v60H0V0zm60 60h60v60H60V60z'/%3E%3Cpath d='M60 0h60v60H60V0zM0 60h60v60H0V60z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
/* Golden dust particles */
radial-gradient(circle at 15% 25%, rgba(255, 215, 0, 0.12) 0%, transparent 20%),
radial-gradient(circle at 85% 15%, rgba(255, 193, 7, 0.1) 0%, transparent 25%),
radial-gradient(circle at 45% 75%, rgba(218, 165, 32, 0.08) 0%, transparent 30%),
radial-gradient(circle at 75% 85%, rgba(255, 140, 0, 0.06) 0%, transparent 20%),
/* Deep chocolate undertones */
radial-gradient(circle at 25% 50%, rgba(139, 69, 19, 0.4) 0%, transparent 50%),
radial-gradient(circle at 75% 25%, rgba(160, 82, 45, 0.35) 0%, transparent 45%),
radial-gradient(circle at 50% 10%, rgba(101, 67, 33, 0.3) 0%, transparent 40%),
radial-gradient(circle at 10% 80%, rgba(93, 64, 55, 0.25) 0%, transparent 35%),
/* Rich bakery gradient base */
linear-gradient(135deg,
#d2b48c 0%,
#daa520 15%,
#cd853f 25%,
#b8860b 35%,
#a0522d 45%,
#8b4513 55%,
#654321 65%,
#5d4037 75%,
#4a2c2a 85%,
#3e2723 100%
),
/* Footer background as fallback */
linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
background-attachment: fixed;
background-size: 200px 200px, 120px 120px, 250px 250px, 300px 300px, 180px 180px, 220px 220px, 350px 350px, 400px 400px, 280px 280px, 320px 320px, cover;
margin: 0;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
/* TEK SAYFA SCROLL SISTEMI - Sadece HTML scrollbar */
html::-webkit-scrollbar {
width: 6px;
}
html::-webkit-scrollbar-track {
background: rgba(0,0,0,0.1);
}
html::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #DAA520, #FF8C00);
border-radius: 3px;
}
html::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, #B8860B, #FF7F00);
}
body::-webkit-scrollbar {
display: none;
}
/* SCROLL TAMAMEN KALDIRILDI */
/* İÇERİK BOŞLUKLARI RESTORE */
.hero-title {
margin-bottom: 20px;
}
.hero-subtitle {
margin-bottom: 25px;
}
.hero-stats {
margin-bottom: 25px;
gap: 20px;
}
.stat-item {
margin: 0 8px;
}
.hero-action {
margin-bottom: 15px;
}
/* Font Display Optimization */
@font-face {
font-family: 'Playfair Display';
font-display: swap;
}
@font-face {
font-family: 'Inter';
font-display: swap;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 600;
line-height: 1.2;
margin-bottom: var(--spacing-sm);
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--spacing-sm);
line-height: 1.7;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
overflow: visible;
}
/* TEK SAYFA - TÜM SECTİONLAR ARKA ARKAYA */
section {
padding: var(--spacing-xxl) 0;
width: 100%;
display: block;
position: relative;
min-height: auto;
}
/* Hero section tam ekran - background image ile */
.hero {
height: 100vh;
min-height: 100vh;
position: relative;
width: 100vw;
left: 0;
right: 0;
margin-left: calc(-50vw + 50%);
z-index: 1;
/* Background kaldırıldı - slideshow sistemi kullanılacak */
background: transparent;
}
/* Hero::after kaldırıldı - slideshow sistemi kullanılacak */
/* Hero slider kaldırıldı - artık background image kullanılıyor */
/* Diğer section'lar opak background ile */
section:not(.hero) {
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.1);
position: relative;
z-index: 10;
}
/* İlk section'ın üst margin'ı - hero'nun altından başlasın */
section:not(.hero):first-of-type {
margin-top: 0;
}
.section-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.products .section-header {
padding: 0 20px;
}
.section-title {
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-sm);
position: relative;
display: inline-block;
font-weight: 800;
font-size: 3.2rem;
text-align: center;
line-height: 1.2;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #DAA520, #B8860B, #8B4513);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.3);
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #666;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.5;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.section-subtitle {
color: #6B6B6B;
font-size: 1.1rem;
font-family: 'Playfair Display', 'Georgia', serif;
font-style: italic;
font-weight: 300;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
letter-spacing: 0.4px;
text-shadow: 0 1px 2px rgba(107, 107, 107, 0.1);
}
/* Enhanced Locations Subtitle */
.locations .section-subtitle {
color: #A8A29E;
font-size: 1.05rem;
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-style: italic;
font-weight: 300;
margin-top: 18px;
background: linear-gradient(135deg,
#D6D3D1 0%,
#A8A29E 30%,
#78716C 70%,
#57534E 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 3px rgba(168, 162, 158, 0.1);
letter-spacing: 0.5px;
line-height: 1.7;
animation: gentleBreath 8s ease-in-out infinite;
}
@keyframes gentleBreath {
0%, 100% {
background: linear-gradient(135deg,
#A8A29E 0%,
#78716C 50%,
#57534E 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0.85;
transform: translateY(0px) scale(1);
text-shadow: 0 1px 2px rgba(168, 162, 158, 0.06);
}
25% {
background: linear-gradient(135deg,
#B8B5B2 0%,
#8B8680 50%,
#68645F 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0.9;
transform: translateY(-0.2px) scale(1.002);
text-shadow: 0 1px 3px rgba(168, 162, 158, 0.08);
}
50% {
background: linear-gradient(135deg,
#C8C5C2 0%,
#9C9891 50%,
#78746F 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0.95;
transform: translateY(-0.3px) scale(1.003);
text-shadow: 0 1px 3px rgba(168, 162, 158, 0.1);
}
75% {
background: linear-gradient(135deg,
#B8B5B2 0%,
#8B8680 50%,
#68645F 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0.9;
transform: translateY(-0.2px) scale(1.002);
text-shadow: 0 1px 3px rgba(168, 162, 158, 0.08);
}
}
/* ===== BRANCH MODAL STYLES ===== */
.branch-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
will-change: opacity, backdrop-filter;
transform: translateZ(0);
backface-visibility: hidden;
}
.branch-modal.show {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.branch-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.branch-modal-content {
position: relative;
background: linear-gradient(145deg,
#FFFFFF 0%,
#FFF8F0 30%,
#F8F6F0 70%,
#F5F3ED 100%);
border-radius: 28px;
max-width: 1100px;
width: 95%;
height: 98vh;
max-height: 98vh;
overflow-y: auto;
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.25),
0 20px 50px rgba(0, 0, 0, 0.15),
0 10px 25px rgba(139, 69, 19, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(218, 165, 32, 0.1);
transform: scale(0.85) translateY(60px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
}
.branch-modal.show .branch-modal-content {
transform: scale(1) translateY(0);
}
.branch-modal-close {
position: absolute;
top: 15px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(139, 69, 19, 0.1);
font-size: 1.4rem;
color: #8B4513;
cursor: pointer;
z-index: 10001;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(139, 69, 19, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.branch-modal-close:hover {
background: rgba(139, 69, 19, 0.1);
border-color: rgba(139, 69, 19, 0.2);
transform: scale(1.05) rotate(90deg);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.15),
0 3px 10px rgba(139, 69, 19, 0.1);
}
.branch-modal-header {
padding: 25px 35px 20px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 248, 240, 0.8) 100%);
border-bottom: 1px solid rgba(218, 165, 32, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
flex-shrink: 0;
}
.branch-modal-header h2 {
color: #8B4513;
margin: 0;
font-size: 2.2rem;
font-family: 'Playfair Display', serif;
font-weight: 600;
letter-spacing: -0.5px;
text-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.branch-status-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.3px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: none;
position: relative;
overflow: hidden;
margin-right: 60px;
}
.branch-status-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
transition: left 0.6s ease;
}
.branch-status-badge:hover::before {
left: 100%;
}
.branch-status-badge.open {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.12) 0%,
rgba(22, 163, 74, 0.08) 100%);
color: #15803D;
border: 1.5px solid rgba(34, 197, 94, 0.3);
text-shadow: none;
box-shadow:
0 4px 12px rgba(34, 197, 94, 0.1),
0 2px 6px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.branch-status-badge.open:hover {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.18) 0%,
rgba(22, 163, 74, 0.12) 100%);
border-color: rgba(34, 197, 94, 0.4);
transform: translateY(-1px) scale(1.02);
box-shadow:
0 6px 16px rgba(34, 197, 94, 0.15),
0 3px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.branch-status-badge.closed {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.15) 0%,
rgba(220, 38, 38, 0.1) 100%);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.3);
text-shadow: none;
}
.branch-modal-body {
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Branch Gallery */
.branch-gallery {
position: relative;
height: 1100px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.branch-gallery-container {
position: relative;
width: 100%;
height: 100%;
}
.branch-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease;
transform: translateZ(0);
z-index: 1;
will-change: opacity;
backface-visibility: hidden;
}
.branch-slide.active {
opacity: 1;
transform: translateZ(0);
z-index: 10;
}
.branch-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
transform: translateZ(0);
will-change: transform, opacity;
backface-visibility: hidden;
image-rendering: optimizeSpeed;
}
/* Gallery Dots */
.branch-gallery-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 15;
}
.branch-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(218, 165, 32, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.branch-dot.active {
background: #DAA520;
border-color: #B8860B;
transform: scale(1.2);
}
.branch-dot:hover {
background: rgba(218, 165, 32, 0.8);
border-color: #B8860B;
transform: scale(1.1);
}
.slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 20px;
font-size: 1rem;
font-weight: 500;
}
.branch-gallery-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
pointer-events: none;
z-index: 20; /* Navigation en üstte */
}
.branch-gallery-nav > * {
pointer-events: auto;
}
.branch-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
border: 2px solid rgba(218, 165, 32, 0.2);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #8B4513;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.branch-nav-btn.prev {
left: 15px;
}
.branch-nav-btn.next {
right: 15px;
}
.branch-nav-btn:hover {
background: linear-gradient(135deg, rgba(218, 165, 32, 0.9) 0%, rgba(139, 69, 19, 0.8) 100%);
color: white;
border-color: rgba(218, 165, 32, 0.5);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(218, 165, 32, 0.4);
}
.gallery-nav-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
border: 2px solid rgba(218, 165, 32, 0.3);
color: #8B4513;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.4rem;
font-weight: bold;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
opacity: 0.9;
}
.gallery-nav-btn:hover {
opacity: 1;
background: linear-gradient(135deg, #DAA520 0%, #B8860B 100%);
color: white;
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(218, 165, 32, 0.4);
border-color: rgba(218, 165, 32, 0.6);
}
.gallery-dots-container {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: auto;
display: flex;
justify-content: center;
}
.gallery-navigation {
display: none !important;
}
.gallery-nav-btn {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.gallery-nav-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
color: rgba(255, 255, 255, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gallery-nav-btn i {
color: inherit;
font-size: 12px;
transition: color 0.3s ease;
}
.gallery-nav-btn:hover i {
color: white;
}
.gallery-dots {
display: none;
}
.gallery-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.2s ease;
}
.gallery-dots .dot.active {
background: #D4AF37;
transform: scale(1.3);
box-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
}
.gallery-dots .dot:hover {
background: rgba(255, 255, 255, 0.7);
transform: scale(1.1);
}
.gallery-dot {
width: 50px;
height: 35px;
border-radius: 6px;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
position: relative;
overflow: hidden;
border: 2px solid transparent;
background-size: cover;
background-position: center;
opacity: 0.5;
transform: scale(0.8) translateZ(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
will-change: transform, opacity;
backface-visibility: hidden;
}
.gallery-dot::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%,
rgba(255, 255, 255, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-dot::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.3) 100%);
border-radius: 8px;
opacity: 0;
transition: all 0.4s ease;
z-index: -1;
}
.gallery-dot:hover {
opacity: 0.8;
transform: scale(0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.gallery-dot:hover::before {
opacity: 1;
}
.gallery-dot:hover::after {
opacity: 0.6;
transform: scale(1.05);
}
.gallery-dot.active {
opacity: 1;
transform: scale(1);
border-color: rgba(255, 255, 255, 0.6);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.3),
0 6px 20px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 255, 255, 0.1);
animation: activeGlow 2s ease-in-out infinite;
}
.gallery-dot.active::before {
opacity: 0.8;
}
.gallery-dot.active::after {
opacity: 1;
transform: scale(1.1);
animation: activeHalo 3s ease-in-out infinite;
}
/* Navigation okları geliştirilmiş */
.gallery-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
font-size: 16px;
font-weight: 500;
z-index: 15;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
opacity: 0.7;
}
.gallery-nav-btn:hover {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 1);
transform: translateY(-50%) scale(1.15);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
opacity: 1;
}
.gallery-nav-btn.prev {
left: 15px;
}
.gallery-nav-btn.next {
right: 15px;
}
@keyframes containerFloat {
0%, 100% {
transform: translateY(0px) translateZ(0);
}
50% {
transform: translateY(-2px) translateZ(0);
}
}
@keyframes activeGlow {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.3),
0 6px 20px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 255, 255, 0.1);
}
50% {
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.5),
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 25px rgba(255, 255, 255, 0.2);
}
}
@keyframes activeHalo {
0%, 100% {
opacity: 1;
transform: scale(1.1);
}
50% {
opacity: 0.7;
transform: scale(1.2);
}
}
/* Eski sistemleri gizle */
.gallery-counter,
.gallery-total,
.gallery-progress,
.progress-ring,
.progress-ring-bg,
.progress-ring-fill,
.ring-content,
.ring-counter,
.ring-total,
.gallery-counter-simple,
.story-bar,
.story-bar-fill {
display: none;
}
/* Branch Info */
.branch-info-detailed {
display: flex;
gap: 40px;
flex-shrink: 0;
padding: 40px 45px;
background: linear-gradient(145deg,
#FFFFFF 0%,
#FFF8F0 30%,
#F8F6F0 70%,
#F5F3ED 100%);
min-height: 220px;
border-top: 1px solid rgba(218, 165, 32, 0.15);
position: relative;
}
.branch-info-detailed::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(218, 165, 32, 0.3) 20%,
rgba(218, 165, 32, 0.6) 50%,
rgba(218, 165, 32, 0.3) 80%,
transparent 100%);
}
.branch-contact-info,
.branch-services {
flex: 1;
}
.branch-contact-info h3,
.branch-services h3 {
color: #8B4513;
margin-bottom: 24px;
font-size: 1.4rem;
font-family: var(--font-primary);
font-weight: 700;
letter-spacing: 0.3px;
position: relative;
padding-bottom: 8px;
}
.branch-contact-info h3::after,
.branch-services h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #DAA520 0%, #B8860B 100%);
border-radius: 1px;
}
/* ===== PAGE BOTTOM FIX ===== */
* {
box-sizing: border-box;
}
html, body {
margin: 0 !important;
padding: 0 !important;
}
/* ===== FOOTER SECTION ===== */
.footer {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 60px 0 0;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
/* Yeni İletişim Tasarımı */
.contact-section-new h4 {
color: #FFD700;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
position: relative;
}
.contact-section-new h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 2px;
background: #FFD700;
}
.contact-blocks {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-block {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: rgba(52, 73, 94, 0.8);
border-radius: 8px;
border: 1px solid #FFD700;
transition: all 0.3s ease;
}
.contact-block:hover {
background: rgba(52, 73, 94, 0.9);
transform: translateY(-2px);
}
.contact-icon {
width: 40px;
height: 40px;
background: #FFD700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-icon i {
color: #2c3e50;
font-size: 16px;
}
.contact-text {
display: flex;
flex-direction: column;
gap: 5px;
color: white;
}
.contact-text span {
font-size: 14px;
line-height: 1.4;
}
.branch-location {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.branch-location:last-child {
margin-bottom: 0;
}
.branch-name {
font-weight: bold;
color: white;
font-size: 14px;
}
.branch-address {
color: #bdc3c7;
font-size: 13px;
}
.branch-location.coming-soon {
background: rgba(39, 174, 96, 0.2);
border: 1px solid #27ae60;
border-radius: 6px;
padding: 8px 12px;
margin-top: 5px;
}
.branch-location.coming-soon .branch-name {
color: white;
}
.branch-status {
color: #27ae60;
font-size: 13px;
font-weight: 500;
}
/* Responsive İletişim Tasarımı */
@media (max-width: 768px) {
.contact-section-new h4 {
font-size: 1.1rem;
margin-bottom: 15px;
}
.contact-blocks {
gap: 12px;
}
.contact-block {
padding: 12px;
gap: 12px;
}
.contact-icon {
width: 35px;
height: 35px;
}
.contact-icon i {
font-size: 14px;
}
.contact-text span {
font-size: 13px;
}
.branch-name {
font-size: 13px;
}
.branch-address {
font-size: 12px;
}
.branch-status {
font-size: 12px;
}
}
@media (max-width: 480px) {
.contact-section-new h4 {
font-size: 1rem;
margin-bottom: 12px;
}
.contact-blocks {
gap: 10px;
}
.contact-block {
padding: 10px;
gap: 10px;
}
.contact-icon {
width: 30px;
height: 30px;
}
.contact-icon i {
font-size: 12px;
}
.contact-text span {
font-size: 12px;
}
.branch-location {
margin-bottom: 6px;
}
.branch-location.coming-soon {
padding: 6px 10px;
}
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(184, 134, 11, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
position: relative;
z-index: 2;
align-items: start;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #d4af37, #b8860b);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.brand-info h3 {
font-size: 1.8rem;
font-weight: 700;
color: #d4af37;
margin: 0;
}
.brand-info span {
color: #bdc3c7;
font-size: 0.9rem;
font-weight: 500;
}
.footer-description {
color: #bdc3c7;
line-height: 1.6;
margin: 0;
}
.social-links {
display: flex;
gap: 15px;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #bdc3c7;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-link:hover {
background: linear-gradient(135deg, #d4af37, #b8860b);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
.footer-section h4 {
color: #d4af37;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #d4af37, #b8860b);
border-radius: 2px;
box-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #bdc3c7;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.95rem;
display: block;
padding: 8px 0;
border-radius: 4px;
position: relative;
}
.footer-links a:hover {
color: #d4af37;
padding-left: 8px;
background: rgba(212, 175, 55, 0.1);
}
.contact-items {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: #bdc3c7;
font-size: 0.95rem;
}
.contact-item i {
color: #d4af37;
width: 16px;
text-align: center;
margin-top: 2px;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-number {
color: #d4af37;
font-size: 0.9rem;
font-weight: 500;
}
.address-details {
display: flex;
flex-direction: column;
gap: 12px;
}
.address-location {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid #d4af37;
transition: all 0.3s ease;
}
.address-location:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(2px);
}
.location-name {
font-weight: 600;
color: #d4af37;
font-size: 0.9rem;
}
.location-address {
color: #bdc3c7;
font-size: 0.85rem;
line-height: 1.3;
}
.coming-soon {
border-left-color: #27ae60;
background: linear-gradient(135deg, rgba(39, 174, 96, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
}
.coming-soon .location-name {
color: #27ae60;
font-weight: 700;
}
.location-status {
color: #27ae60;
font-size: 0.8rem;
font-weight: 600;
background: linear-gradient(135deg, #27ae60, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.location-status::before {
content: '';
}
.hours-info {
display: flex;
flex-direction: column;
gap: 15px;
}
.hours-main {
display: flex;
flex-direction: column;
gap: 8px;
}
.days {
color: #bdc3c7;
font-size: 0.95rem;
}
.time {
color: #d4af37;
font-weight: 600;
font-size: 1.1rem;
}
.hours-note {
display: flex;
align-items: center;
gap: 8px;
color: #bdc3c7;
font-size: 0.9rem;
}
.hours-note i {
color: #d4af37;
}
.footer-bottom {
padding: 30px 0 0 0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
margin-bottom: 0;
}
.copyright {
color: #bdc3c7;
margin: 0;
font-size: 0.9rem;
}
.footer-badges {
display: flex;
gap: 15px;
}
.badge {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(184, 134, 11, 0.15));
border: 1px solid rgba(212, 175, 55, 0.4);
color: #d4af37;
padding: 10px 18px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
/* Responsive Footer */
@media (max-width: 768px) {
.footer {
padding: 40px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-logo {
justify-content: center;
}
.social-links {
justify-content: center;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
.footer-badges {
flex-wrap: wrap;
justify-content: center;
}
}
/* ===== CONTACT SECTION - MODERN TASARIM ===== */
.contact-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(250, 250, 250, 0.9) 100%
);
position: relative;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.contact-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-title {
font-size: 2.8rem;
font-weight: 800;
color: #2D1B0E;
margin-bottom: 15px;
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.contact-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
border-radius: 2px;
}
.contact-subtitle {
font-size: 1.1rem;
color: #666;
font-weight: 500;
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
/* Premium Contact Layout */
.premium-contact-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
/* Contact Main Section */
.contact-main-section {
background: white;
border-radius: 20px;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(218, 165, 32, 0.1);
overflow: hidden;
}
.contact-info-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(250, 250, 250, 0.9) 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.info-header {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
padding: 25px 30px;
display: flex;
align-items: center;
gap: 15px;
color: white;
}
.info-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.info-icon i {
font-size: 1.3rem;
color: white;
}
.info-header h3 {
font-size: 1.6rem;
font-weight: 700;
margin: 0;
color: white;
}
.contact-details {
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(250, 250, 250, 0.6) 100%
);
border-radius: 15px;
border: 1px solid rgba(218, 165, 32, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.contact-item:hover::before {
transform: scaleX(1);
}
.contact-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(218, 165, 32, 0.15);
border-color: rgba(218, 165, 32, 0.2);
}
.item-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-item:hover .item-icon {
transform: scale(1.05);
}
.item-icon i {
font-size: 1.4rem;
color: white;
}
.item-content {
flex: 1;
}
.item-content h4 {
font-size: 1.2rem;
font-weight: 600;
color: #2D1B0E;
margin-bottom: 5px;
}
.item-content p {
font-size: 1rem;
color: #666;
margin-bottom: 12px;
font-weight: 500;
}
.contact-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.1) 0%,
rgba(184, 134, 11, 0.05) 100%
);
border: 1px solid rgba(218, 165, 32, 0.2);
border-radius: 8px;
color: #DAA520;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.contact-btn:hover {
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.15) 0%,
rgba(184, 134, 11, 0.1) 100%
);
border-color: rgba(218, 165, 32, 0.3);
color: #B8860B;
transform: translateY(-1px);
}
.contact-btn i {
font-size: 0.8rem;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(218, 165, 32, 0.1);
}
.header-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.header-icon i {
color: white;
font-size: 1.2rem;
}
.section-header h3 {
font-size: 1.6rem;
font-weight: 700;
color: #2D1B0E;
margin: 0;
}
.contact-methods-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.contact-method-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(250, 250, 250, 0.9) 100%
);
border-radius: 12px;
padding: 18px;
border: 1px solid rgba(218, 165, 32, 0.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-method-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.contact-method-card:hover::before {
transform: scaleX(1);
}
.contact-method-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.15);
border-color: rgba(218, 165, 32, 0.3);
}
.method-icon {
width: 38px;
height: 38px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
transition: all 0.3s ease;
}
.contact-method-card:hover .method-icon {
transform: scale(1.05);
}
.method-icon i {
font-size: 1.1rem;
color: white;
}
.method-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: #2D1B0E;
margin-bottom: 5px;
}
.method-content p {
font-size: 0.95rem;
color: #666;
margin-bottom: 12px;
font-weight: 500;
}
.method-action {
display: inline-flex;
align-items: center;
color: #DAA520;
text-decoration: none;
font-weight: 500;
font-size: 0.85rem;
transition: all 0.3s ease;
padding: 5px 10px;
border-radius: 6px;
background: rgba(218, 165, 32, 0.08);
border: 1px solid rgba(218, 165, 32, 0.15);
}
.method-action:hover {
color: #B8860B;
background: rgba(218, 165, 32, 0.15);
border-color: rgba(218, 165, 32, 0.3);
transform: translateY(-1px);
}
.method-action i {
margin-right: 6px;
font-size: 0.8rem;
}
/* Premium Method Colors - Unified Design */
.method-icon.whatsapp,
.method-icon.email,
.method-icon.instagram {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
}
.method-action.whatsapp,
.method-action.email,
.method-action.instagram {
color: #DAA520;
background: rgba(218, 165, 32, 0.1);
border-color: rgba(218, 165, 32, 0.2);
}
.method-action.whatsapp:hover,
.method-action.email:hover,
.method-action.instagram:hover {
color: #B8860B;
background: rgba(218, 165, 32, 0.15);
border-color: rgba(218, 165, 32, 0.3);
}
/* Contact Side Section */
.contact-side-section {
display: flex;
flex-direction: column;
gap: 25px;
}
.info-card {
background: white;
border-radius: 20px;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(218, 165, 32, 0.1);
overflow: hidden;
}
.card-header {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
padding: 20px 25px;
display: flex;
align-items: center;
gap: 12px;
color: white;
}
.header-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.header-icon i {
font-size: 1.2rem;
color: white;
}
.card-header h3 {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
color: white;
}
.card-content {
padding: 25px;
}
.hours-display {
text-align: center;
margin-bottom: 20px;
}
.hours-main {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
}
.days {
font-size: 1.1rem;
font-weight: 600;
color: #2D1B0E;
margin-bottom: 5px;
}
.time {
font-size: 1.3rem;
font-weight: 700;
color: #DAA520;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.status-indicator {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg,
#4CAF50 0%,
#45a049 100%
);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.status-dot {
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
margin-right: 8px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.hours-note {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.08) 0%,
rgba(184, 134, 11, 0.04) 100%
);
padding: 15px;
border-radius: 12px;
border: 1px solid rgba(218, 165, 32, 0.15);
}
.hours-note i {
color: #DAA520;
margin-right: 10px;
font-size: 1rem;
}
.hours-note span {
color: #666;
font-size: 0.9rem;
font-weight: 500;
}
.quick-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(218, 165, 32, 0.3);
background: linear-gradient(135deg,
#B8860B 0%,
#DAA520 100%
);
}
.action-btn.whatsapp {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
}
.action-btn.whatsapp:hover {
background: linear-gradient(135deg,
#B8860B 0%,
#DAA520 100%
);
}
.action-btn i {
font-size: 1rem;
}
.hours-card, .quick-actions-card {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(218, 165, 32, 0.1);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(218, 165, 32, 0.1);
}
.card-header .header-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.card-header .header-icon i {
color: white;
font-size: 1rem;
}
.card-header h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2D1B0E;
margin: 0;
}
.hours-content {
text-align: center;
}
.hours-info {
margin-bottom: 20px;
}
.hours-main {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
}
.days {
font-size: 1rem;
font-weight: 600;
color: #2D1B0E;
margin-bottom: 5px;
}
.time {
font-size: 1.2rem;
font-weight: 700;
color: #DAA520;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.status-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg,
#4CAF50 0%,
#45a049 100%
);
color: white;
padding: 6px 12px;
border-radius: 15px;
font-weight: 600;
font-size: 0.85rem;
}
.status-dot {
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
margin-right: 6px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.hours-note {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.08) 0%,
rgba(184, 134, 11, 0.04) 100%
);
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(218, 165, 32, 0.15);
}
.hours-note i {
color: #DAA520;
margin-right: 8px;
font-size: 0.9rem;
}
.hours-note span {
color: #666;
font-size: 0.85rem;
font-weight: 500;
}
.quick-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.quick-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
font-size: 0.85rem;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.quick-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(218, 165, 32, 0.25);
background: linear-gradient(135deg,
#B8860B 0%,
#DAA520 100%
);
}
.quick-btn.whatsapp {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
}
.quick-btn.whatsapp:hover {
background: linear-gradient(135deg,
#B8860B 0%,
#DAA520 100%
);
}
.quick-btn i {
margin-right: 8px;
font-size: 1rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.premium-contact-layout {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 60px 0;
}
.contact-title {
font-size: 2.2rem;
}
.contact-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 2.5rem;
}
.section-subtitle {
font-size: 1rem;
margin-bottom: 25px;
}
.contact-details {
padding: 20px;
gap: 15px;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 20px;
}
.item-icon {
width: 45px;
height: 45px;
}
.item-icon i {
font-size: 1.2rem;
}
.card-content {
padding: 20px;
}
.info-header {
padding: 20px 25px;
}
.card-header {
padding: 15px 20px;
}
}
/* Premium Contact Card */
.premium-contact-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(30px);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 32px;
padding: 40px;
position: relative;
overflow: hidden;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
}
.premium-contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #d4af37, #b8860b, #d4af37);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.premium-contact-card:hover {
transform: translateY(-10px);
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.header-icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, #d4af37, #b8860b);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.header-icon i {
font-size: 1.5rem;
color: white;
}
.header-content h3 {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 8px;
}
.header-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 20px;
}
.method-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.1);
border-radius: 20px;
padding: 25px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.method-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
transition: left 0.5s ease;
}
.method-card:hover::before {
left: 100%;
}
.method-card:hover {
transform: translateX(10px);
border-color: rgba(212, 175, 55, 0.3);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}
.method-card.phone .method-icon {
background: linear-gradient(135deg, #d4af37, #b8860b);
}
.method-card.whatsapp .method-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.method-card.email .method-icon {
background: linear-gradient(135deg, #ea4335, #d33b2c);
}
.method-card.instagram .method-icon {
background: linear-gradient(135deg, #e4405f, #c13584);
}
.method-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.method-icon i {
font-size: 1.2rem;
color: white;
}
.method-content h4 {
font-size: 1.2rem;
font-weight: 600;
color: white;
margin-bottom: 5px;
}
.method-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 15px;
}
.method-link {
display: flex;
align-items: center;
justify-content: space-between;
color: #d4af37;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
padding: 10px 0;
}
.method-link:hover {
color: #b8860b;
transform: translateX(5px);
}
.method-link i {
transition: transform 0.3s ease;
}
.method-link:hover i {
transform: translateX(5px);
}
/* Premium Info Cards */
.premium-info-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(30px);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 32px;
padding: 30px;
position: relative;
overflow: hidden;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
margin-bottom: 30px;
}
.premium-info-card:hover {
transform: translateY(-5px);
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.premium-info-card:hover .card-glow {
opacity: 1;
}
.status-badge {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.status-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: pulse 2s infinite;
}
.hours-display {
display: flex;
flex-direction: column;
gap: 20px;
}
.hours-main {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
border: 1px solid rgba(212, 175, 55, 0.1);
}
.days {
font-weight: 600;
color: white;
font-size: 1rem;
}
.time {
font-weight: 700;
color: #d4af37;
font-size: 1.2rem;
}
.hours-note {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: rgba(212, 175, 55, 0.1);
border-radius: 12px;
border: 1px solid rgba(212, 175, 55, 0.2);
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
}
.hours-note i {
color: #d4af37;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 15px;
}
.action-btn {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.1);
border-radius: 16px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.action-btn:hover::before {
left: 100%;
}
.action-btn:hover {
transform: translateX(10px);
border-color: rgba(212, 175, 55, 0.3);
background: rgba(255, 255, 255, 0.05);
}
.action-btn.primary {
border-color: rgba(212, 175, 55, 0.2);
}
.action-btn.secondary {
border-color: rgba(37, 211, 102, 0.2);
}
.btn-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.action-btn.primary .btn-icon {
background: linear-gradient(135deg, #d4af37, #b8860b);
}
.action-btn.secondary .btn-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.btn-icon i {
font-size: 1.2rem;
color: white;
}
.btn-content {
flex: 1;
}
.btn-title {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: white;
margin-bottom: 4px;
}
.btn-subtitle {
display: block;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.btn-arrow {
color: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.action-btn:hover .btn-arrow {
color: #d4af37;
transform: translateX(5px);
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-main {
grid-template-columns: 1fr;
gap: 40px;
padding: 60px 0;
}
.title-main {
font-size: 2.5rem;
}
.title-accent {
font-size: 1rem;
}
.premium-contact-card,
.premium-info-card {
padding: 25px;
}
.card-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.method-card:hover {
transform: translateY(-5px);
}
.action-btn:hover {
transform: translateY(-5px);
}
}
.contact-info-card {
background: white;
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
border: 1px solid rgba(212, 175, 55, 0.2);
width: 100%;
position: relative;
overflow: hidden;
}
.contact-info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #d4af37, #b8860b);
}
.info-header {
margin-bottom: 30px;
text-align: center;
}
.info-header h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.info-header p {
color: var(--text-secondary);
font-size: 1rem;
}
.info-items {
display: flex;
flex-direction: column;
gap: 20px;
}
.info-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 16px;
border: 1px solid rgba(212, 175, 55, 0.1);
transition: all 0.3s ease;
}
.info-item:hover {
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.3);
}
.info-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #d4af37, #b8860b);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.info-icon i {
font-size: 1.2rem;
color: white;
}
.info-content {
flex: 1;
}
.info-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.info-content p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 8px;
}
.info-link {
color: #d4af37;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.info-link:hover {
color: #b8860b;
text-decoration: underline;
}
/* Sağ Taraf - Çalışma Saatleri ve Hızlı Erişim */
.contact-side-section {
display: flex;
flex-direction: column;
gap: 30px;
}
.working-hours-card,
.quick-actions-card {
background: white;
border-radius: 24px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
border: 1px solid rgba(212, 175, 55, 0.2);
position: relative;
overflow: hidden;
}
.working-hours-card::before,
.quick-actions-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #d4af37, #b8860b);
}
.hours-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.hours-header h3 {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
.status-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hours-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 12px;
border: 1px solid rgba(212, 175, 55, 0.1);
}
.day {
font-weight: 600;
color: var(--text-primary);
}
.time {
font-weight: 700;
color: #d4af37;
font-size: 1.1rem;
}
.hours-note {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(184, 134, 11, 0.1) 100%);
border-radius: 12px;
border: 1px solid rgba(212, 175, 55, 0.2);
font-size: 0.9rem;
color: var(--text-secondary);
}
.hours-note i {
color: #d4af37;
}
.quick-actions-card h3 {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 25px;
text-align: center;
}
.quick-buttons {
display: flex;
flex-direction: column;
gap: 15px;
}
.quick-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
border-radius: 16px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quick-btn.primary {
background: linear-gradient(135deg, #d4af37, #b8860b);
color: white;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
.quick-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
color: white;
}
.quick-btn.secondary {
background: linear-gradient(135deg, #25d366, #128c7e);
color: white;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.quick-btn.secondary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
color: white;
}
.quick-btn i {
font-size: 1.2rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-main {
grid-template-columns: 1fr;
gap: 40px;
padding: 60px 0;
}
.contact-title {
font-size: 2.2rem;
}
.contact-subtitle {
font-size: 1rem;
}
.contact-info-card,
.working-hours-card,
.quick-actions-card {
padding: 25px;
}
.info-item {
flex-direction: column;
text-align: center;
gap: 15px;
}
.hours-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
}
.contact-card {
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(212, 175, 55, 0.2);
backdrop-filter: blur(10px);
}
.contact-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2);
border-color: rgba(212, 175, 55, 0.4);
}
.contact-icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #d4af37, #b8860b);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
border: 2px solid rgba(212, 175, 55, 0.2);
}
.contact-icon i {
font-size: 1.5rem;
color: white;
}
.contact-icon.whatsapp {
background: linear-gradient(135deg, #d4af37, #b8860b);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-icon.email {
background: linear-gradient(135deg, #d4af37, #b8860b);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-icon.instagram {
background: linear-gradient(135deg, #d4af37, #b8860b);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
}
.contact-content p {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.9rem;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #d4af37, #b8860b);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.contact-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
color: white;
background: linear-gradient(135deg, #b8860b, #d4af37);
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(218, 165, 32, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(184, 134, 11, 0.03) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(218, 165, 32, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.contact-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.contact-wrapper {
position: relative;
z-index: 1;
}
/* Contact Info Cards */
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.contact-card {
background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
padding: 50px 35px;
border-radius: 24px;
text-align: center;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.06),
0 8px 16px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
border: 1px solid rgba(218, 165, 32, 0.08);
backdrop-filter: blur(10px);
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #DAA520, #B8860B, #DAA520);
background-size: 200% 100%;
animation: shimmer-border 4s ease-in-out infinite;
}
@keyframes shimmer-border {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
.contact-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.03), transparent);
transition: left 0.8s ease;
}
.contact-card:hover::after {
left: 100%;
}
.contact-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.12),
0 12px 24px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(218, 165, 32, 0.15);
}
.contact-card-icon {
width: 90px;
height: 90px;
margin: 0 auto 30px;
background: linear-gradient(135deg, #DAA520 0%, #B8860B 50%, #DAA520 100%);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: white;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
box-shadow:
0 10px 20px rgba(218, 165, 32, 0.2),
0 4px 8px rgba(218, 165, 32, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-card-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
border-radius: 24px;
opacity: 0;
transition: opacity 0.4s ease;
}
.contact-card:hover .contact-card-icon::before {
opacity: 1;
}
.contact-card:hover .contact-card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 15px 30px rgba(218, 165, 32, 0.3),
0 6px 12px rgba(218, 165, 32, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.contact-card-icon.whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 50%, #25D366 100%);
box-shadow:
0 10px 20px rgba(37, 211, 102, 0.2),
0 4px 8px rgba(37, 211, 102, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-card:hover .contact-card-icon.whatsapp {
box-shadow:
0 15px 30px rgba(37, 211, 102, 0.3),
0 6px 12px rgba(37, 211, 102, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.contact-card-icon.instagram {
background: linear-gradient(135deg, #E4405F 0%, #833AB4 50%, #F77737 100%);
box-shadow:
0 10px 20px rgba(228, 64, 95, 0.2),
0 4px 8px rgba(228, 64, 95, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-card:hover .contact-card-icon.instagram {
box-shadow:
0 15px 30px rgba(228, 64, 95, 0.3),
0 6px 12px rgba(228, 64, 95, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.contact-card-icon.email {
background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #4285F4 100%);
box-shadow:
0 10px 20px rgba(66, 133, 244, 0.2),
0 4px 8px rgba(66, 133, 244, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-card:hover .contact-card-icon.email {
box-shadow:
0 15px 30px rgba(66, 133, 244, 0.3),
0 6px 12px rgba(66, 133, 244, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.contact-card-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
font-family: var(--font-primary);
letter-spacing: -0.5px;
}
.contact-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-links a {
color: #555;
text-decoration: none;
font-size: 1.05rem;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 12px 20px;
border-radius: 12px;
background: linear-gradient(145deg, rgba(218, 165, 32, 0.04), rgba(218, 165, 32, 0.08));
border: 1px solid rgba(218, 165, 32, 0.1);
position: relative;
overflow: hidden;
font-family: var(--font-secondary);
}
.contact-links a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.1), transparent);
transition: left 0.6s ease;
}
.contact-links a:hover::before {
left: 100%;
}
.contact-links a:hover {
color: #DAA520;
background: linear-gradient(145deg, rgba(218, 165, 32, 0.08), rgba(218, 165, 32, 0.12));
border-color: rgba(218, 165, 32, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(218, 165, 32, 0.15);
}
/* Responsive Design */
@media (max-width: 1024px) {
.contact-info-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 80px 0;
}
.contact-info-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.contact-card {
padding: 40px 25px;
border-radius: 20px;
}
.contact-card-icon {
width: 75px;
height: 75px;
font-size: 2rem;
border-radius: 20px;
margin-bottom: 25px;
}
.contact-card-content h3 {
font-size: 1.3rem;
margin-bottom: 15px;
}
.contact-links a {
font-size: 1rem;
padding: 10px 16px;
}
}
@media (max-width: 480px) {
.contact-card {
padding: 35px 20px;
}
.contact-card-icon {
width: 65px;
height: 65px;
font-size: 1.8rem;
border-radius: 16px;
}
.contact-card-content h3 {
font-size: 1.2rem;
}
}
.services-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.service-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
color: #555;
font-size: 0.9rem;
font-weight: 500;
font-family: var(--font-secondary);
border-bottom: 1px solid rgba(218, 165, 32, 0.06);
transition: all var(--transition-fast);
}
.service-item:hover {
color: #333;
border-color: rgba(218, 165, 32, 0.12);
}
.service-item i {
color: #DAA520;
width: 14px;
font-size: 0.85rem;
background: rgba(218, 165, 32, 0.08);
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
transition: all var(--transition-fast);
}
.service-item:hover i {
background: rgba(218, 165, 32, 0.12);
color: #B8860B;
}
.branch-directions {
text-align: center;
padding: 30px 40px;
flex-shrink: 0;
border-top: 1px solid rgba(218, 165, 32, 0.15);
background: linear-gradient(145deg,
#FFFFFF 0%,
#FFF8F0 50%,
#F8F6F0 100%);
position: relative;
}
.branch-directions::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(218, 165, 32, 0.4) 50%,
transparent 100%);
}
.directions-btn {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 50%,
#8B6914 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 14px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-medium);
letter-spacing: 0.5px;
font-family: var(--font-secondary);
position: relative;
overflow: hidden;
}
.directions-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
transition: left 0.6s ease;
}
.directions-btn:hover::before {
left: 100%;
}
.directions-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 12px 30px rgba(218, 165, 32, 0.35),
0 6px 15px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Elegant Info Button - Matches Page Design */
.elegant-info-btn {
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.1) 0%,
rgba(184, 134, 11, 0.15) 100%);
border: 1px solid rgba(218, 165, 32, 0.3);
color: #B8860B;
padding: 8px 16px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
font-family: inherit;
text-decoration: none;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.1);
}
.elegant-info-btn:hover {
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.2) 0%,
rgba(184, 134, 11, 0.25) 100%);
border-color: rgba(218, 165, 32, 0.5);
color: #DAA520;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(218, 165, 32, 0.2);
}
.elegant-info-btn:active {
transform: translateY(-1px);
transition: all 0.1s ease;
}
.elegant-info-btn i {
font-size: 0.9rem;
transition: all 0.3s ease;
}
.elegant-info-btn:hover i {
transform: scale(1.1);
color: #FFD700;
}
.elegant-info-btn span {
font-weight: 500;
transition: all 0.3s ease;
}
.elegant-info-btn:focus {
outline: none;
box-shadow:
0 6px 16px rgba(218, 165, 32, 0.2),
0 0 0 2px rgba(218, 165, 32, 0.4);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.elegant-info-btn {
padding: 6px 12px;
font-size: 0.8rem;
gap: 5px;
}
.elegant-info-btn i {
font-size: 0.85rem;
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.branch-modal-content {
width: 95%;
height: 90vh;
max-height: 90vh;
}
.branch-modal-header {
padding: 20px 20px 15px;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.branch-status-badge {
margin-right: 0;
align-self: flex-start;
}
.branch-modal-header h2 {
font-size: 1.8rem;
}
.branch-modal-body {
padding: 0;
}
.branch-gallery {
height: 250px;
}
.branch-info-detailed {
flex-direction: column;
gap: 20px;
padding: 25px 20px;
}
.branch-directions {
padding: 15px 20px;
}
.gallery-nav-btn {
width: 44px;
height: 44px;
font-size: 1.3rem;
}
.gallery-dots-container {
bottom: 20px;
}
.gallery-dots {
padding: 8px 14px;
gap: 5px;
border-radius: 20px;
}
.gallery-dot {
width: 20px;
height: 3px;
}
.directions-btn {
padding: 14px 28px;
font-size: 1rem;
}
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 1rem 2rem;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-secondary);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: var(--transition-medium);
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg,
#E67E22 0%,
#F39C12 50%,
#D4851A 100%);
color: #ffffff;
font-weight: 600;
box-shadow:
0 6px 24px rgba(212, 133, 26, 0.2),
0 3px 12px rgba(230, 126, 34, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: none;
font-size: 1rem;
padding: 14px 28px;
border-radius: 25px;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.btn-primary:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 32px rgba(212, 133, 26, 0.25),
0 4px 16px rgba(230, 126, 34, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.15);
color: #2c3e50;
border: 2px solid rgba(212, 133, 26, 0.3);
backdrop-filter: blur(15px);
font-weight: 500;
font-size: 1rem;
padding: 14px 28px;
border-radius: 25px;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
}
.btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.25);
color: #2c3e50;
border-color: rgba(212, 133, 26, 0.5);
transform: translateY(-2px) scale(1.02);
box-shadow:
0 6px 24px rgba(212, 133, 26, 0.15),
0 3px 12px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover::before {
opacity: 1;
}
/* ===== NAVIGATION ===== */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg,
rgba(212, 133, 26, 0.08) 0%,
rgba(255, 252, 245, 0.75) 20%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 252, 245, 0.75) 80%,
rgba(231, 76, 60, 0.06) 100%);
backdrop-filter: blur(40px) saturate(150%);
border-bottom: 1px solid rgba(212, 133, 26, 0.12);
z-index: 1000;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow:
0 4px 32px rgba(212, 133, 26, 0.08),
0 2px 16px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.navbar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(212, 133, 26, 0.03) 0%,
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 252, 245, 0.15) 50%,
rgba(255, 255, 255, 0.1) 75%,
rgba(231, 76, 60, 0.02) 100%);
z-index: -1;
animation: navbarShimmer 8s ease-in-out infinite;
}
@keyframes navbarShimmer {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.navbar.scrolled {
background: linear-gradient(135deg,
rgba(212, 133, 26, 0.12) 0%,
rgba(255, 252, 245, 0.85) 15%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 252, 245, 0.85) 85%,
rgba(231, 76, 60, 0.08) 100%);
box-shadow:
0 8px 40px rgba(212, 133, 26, 0.12),
0 4px 20px rgba(0, 0, 0, 0.06),
inset 0 2px 0 rgba(255, 255, 255, 0.95);
border-bottom-color: rgba(212, 133, 26, 0.25);
backdrop-filter: blur(50px) saturate(180%);
}
.navbar.scrolled::before {
background: linear-gradient(90deg,
rgba(212, 133, 26, 0.05) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 252, 245, 0.25) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(231, 76, 60, 0.04) 100%);
animation-duration: 12s;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
/* ===== PREMIUM MASTERPIECE LOGO ===== */
.nav-logo {
display: flex;
align-items: center;
gap: var(--spacing-md);
position: relative;
padding: 12px 8px;
cursor: pointer;
}
/* Logo Ana Çerçeve */
.logo-masterpiece {
position: relative;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* Elmas Çerçeve */
.diamond-frame {
position: relative;
width: 50px;
height: 50px;
background: linear-gradient(45deg,
#FFD700 0%,
#FFA500 25%,
#FF8C00 50%,
#DAA520 75%,
#B8860B 100%);
border-radius: 50% 10% 50% 10%;
transform: rotate(45deg);
box-shadow:
0 0 20px rgba(255, 215, 0, 0.6),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.2);
animation: diamondPulse 4s ease-in-out infinite;
}
/* İç Süsleme */
.inner-ornament {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 40px;
height: 40px;
}
/* Merkez Mücevher */
.center-jewel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
#FFFFFF 0%,
#FFD700 30%,
#FF8C00 60%,
#8B4513 100%);
box-shadow:
0 0 10px rgba(255, 215, 0, 0.8),
inset 0 1px 2px rgba(255, 255, 255, 0.6);
animation: jewelRotate 8s linear infinite;
}
/* Mücevher Yüzleri */
.jewel-facet {
position: absolute;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
border-radius: 50%;
}
.jewel-1 {
top: 2px;
left: 2px;
width: 8px;
height: 8px;
animation: facetShimmer 2s ease-in-out infinite;
}
.jewel-2 {
top: 2px;
right: 2px;
width: 6px;
height: 6px;
animation: facetShimmer 2s ease-in-out infinite 0.5s;
}
.jewel-3 {
bottom: 2px;
left: 2px;
width: 6px;
height: 6px;
animation: facetShimmer 2s ease-in-out infinite 1s;
}
.jewel-4 {
bottom: 2px;
right: 2px;
width: 8px;
height: 8px;
animation: facetShimmer 2s ease-in-out infinite 1.5s;
}
/* Merkez Çekirdek */
.center-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle,
#8B4513 0%,
#D2691E 50%,
#FFD700 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.mystical-f {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 900;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
animation: mysticalGlow 3s ease-in-out infinite;
}
/* Süsleme Noktaları */
.ornament-dots {
position: absolute;
width: 100%;
height: 100%;
}
.dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: radial-gradient(circle, #FFD700, #FF8C00);
box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
animation: dotPulse 3s ease-in-out infinite;
}
.dot-1 {
top: 0;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.dot-2 {
right: 0;
top: 50%;
transform: translateY(-50%);
animation-delay: 0.75s;
}
.dot-3 {
bottom: 0;
left: 50%;
transform: translateX(-50%);
animation-delay: 1.5s;
}
.dot-4 {
left: 0;
top: 50%;
transform: translateY(-50%);
animation-delay: 2.25s;
}
/* Çerçeve Işıltısı */
.frame-glow {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50% 15% 50% 15%;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 215, 0, 0.3) 25%,
transparent 50%,
rgba(255, 140, 0, 0.3) 75%,
transparent 100%);
animation: frameRotate 6s linear infinite;
opacity: 0;
}
/* Tipografi */
.brand-typography {
display: flex;
flex-direction: column;
gap: 2px;
}
.brand-main {
display: flex;
align-items: baseline;
font-family: var(--font-elegant);
font-size: 1.9rem;
font-weight: 600;
line-height: 1;
}
.letter-f {
background: linear-gradient(135deg,
#8B4513 0%,
#D2691E 25%,
#DAA520 50%,
#B8860B 75%,
#8B4513 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.2rem;
font-weight: 800;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
animation: letterFloat 4s ease-in-out infinite;
}
.rest-text {
color: #8B4513;
font-weight: 600;
letter-spacing: -0.3px;
margin-left: -2px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.brand-subtitle {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-start;
}
.subtitle-ornament {
color: #DAA520;
font-size: 0.6rem;
animation: ornamentTwinkle 3s ease-in-out infinite;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
font-weight: normal;
}
.subtitle-text {
font-family: var(--font-luxury);
font-size: 0.65rem;
font-weight: 500;
color: #8B4513;
text-transform: uppercase;
letter-spacing: 1.5px;
font-style: italic;
opacity: 0.95;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
/* Hover Efektleri */
.nav-logo:hover .diamond-frame {
animation-duration: 2s;
box-shadow:
0 0 30px rgba(255, 215, 0, 0.9),
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.nav-logo:hover .frame-glow {
opacity: 1;
animation-duration: 3s;
}
.nav-logo:hover .mystical-f {
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.nav-logo:hover .letter-f {
animation-duration: 2s;
transform: scale(1.1);
}
/* Animasyonlar */
@keyframes diamondPulse {
0%, 100% {
transform: rotate(45deg) scale(1);
box-shadow:
0 0 20px rgba(255, 215, 0, 0.6),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
50% {
transform: rotate(45deg) scale(1.05);
box-shadow:
0 0 25px rgba(255, 215, 0, 0.8),
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
}
@keyframes jewelRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes facetShimmer {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.2);
}
}
@keyframes mysticalGlow {
0%, 100% {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
color: #FFFFFF;
}
50% {
text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
color: #FFD700;
}
}
@keyframes dotPulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.5);
box-shadow: 0 0 10px rgba(255, 215, 0, 1);
}
}
@keyframes frameRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes letterFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
@keyframes ornamentTwinkle {
0%, 100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
/* ===== ELEGANT MINIMAL MENU ===== */
.nav-menu {
display: flex;
align-items: center;
position: relative;
gap: 6px;
background: linear-gradient(135deg,
rgba(212, 133, 26, 0.08) 0%,
rgba(255, 252, 245, 0.85) 15%,
rgba(255, 255, 255, 0.95) 40%,
rgba(255, 252, 245, 0.9) 60%,
rgba(231, 76, 60, 0.06) 85%,
rgba(44, 62, 80, 0.08) 100%);
backdrop-filter: blur(25px) saturate(130%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 25px;
padding: 5px 18px;
box-shadow:
0 6px 30px rgba(212, 133, 26, 0.1),
0 3px 12px rgba(231, 76, 60, 0.04),
0 1px 4px rgba(44, 62, 80, 0.06),
inset 0 2px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(212, 133, 26, 0.08);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-45deg,
rgba(212, 133, 26, 0.06) 0%,
rgba(255, 252, 245, 0.12) 20%,
rgba(255, 255, 255, 0.15) 40%,
rgba(231, 76, 60, 0.08) 60%,
rgba(44, 62, 80, 0.1) 80%,
rgba(212, 133, 26, 0.06) 100%);
border-radius: 25px;
opacity: 0;
transition: all 0.5s ease;
z-index: -1;
animation: heroMenuFlow 12s ease-in-out infinite;
}
@keyframes heroMenuFlow {
0%, 100% {
opacity: 0;
transform: scale(1) rotate(0deg);
}
25% {
opacity: 0.4;
transform: scale(1.01) rotate(0.5deg);
}
50% {
opacity: 0.7;
transform: scale(1.02) rotate(0deg);
}
75% {
opacity: 0.4;
transform: scale(1.01) rotate(-0.5deg);
}
}
.nav-menu:hover {
background: linear-gradient(135deg,
rgba(212, 133, 26, 0.12) 0%,
rgba(255, 252, 245, 0.95) 15%,
rgba(255, 255, 255, 0.98) 35%,
rgba(255, 252, 245, 0.96) 55%,
rgba(231, 76, 60, 0.1) 75%,
rgba(44, 62, 80, 0.12) 100%);
box-shadow:
0 8px 40px rgba(212, 133, 26, 0.15),
0 4px 16px rgba(231, 76, 60, 0.08),
0 2px 6px rgba(44, 62, 80, 0.1),
inset 0 3px 0 rgba(255, 255, 255, 0.8),
inset 0 -2px 0 rgba(212, 133, 26, 0.12);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px) scale(1.01);
}
.nav-menu:hover::before {
opacity: 1;
}
.nav-link {
font-family: var(--font-secondary);
font-weight: 500;
font-size: 0.88rem;
color: rgba(44, 62, 80, 0.9);
text-decoration: none;
padding: 8px 12px;
border-radius: 18px;
position: relative;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
white-space: nowrap;
letter-spacing: 0.03em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(5px);
}
.nav-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(212, 133, 26, 0.12) 0%,
rgba(255, 252, 245, 0.2) 20%,
rgba(255, 140, 0, 0.15) 40%,
rgba(231, 76, 60, 0.1) 60%,
rgba(44, 62, 80, 0.12) 80%,
rgba(212, 133, 26, 0.12) 100%);
border-radius: 18px;
opacity: 0;
transform: scale(0.9) rotate(-1deg);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2.5px;
background: linear-gradient(90deg,
rgba(212, 133, 26, 0.8) 0%,
rgba(255, 140, 0, 1) 20%,
rgba(231, 76, 60, 0.9) 50%,
rgba(255, 140, 0, 1) 80%,
rgba(44, 62, 80, 0.7) 100%);
border-radius: 3px;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 0 12px rgba(212, 133, 26, 0.4);
}
.nav-link:hover {
color: var(--primary-hover);
transform: translateY(-2px) scale(1.05) rotate(0.5deg);
font-weight: 600;
text-shadow: 0 3px 6px rgba(201, 150, 64, 0.35);
}
/* Active Page Indicator */
.nav-link.active {
color: var(--primary-color);
font-weight: 600;
position: relative;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--primary-color) 20%,
var(--primary-hover) 50%,
var(--primary-color) 80%,
transparent 100%);
border-radius: 2px;
box-shadow:
0 3px 12px rgba(212, 175, 55, 0.3),
0 1px 4px rgba(212, 175, 55, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
animation: activeGlow 2s ease-in-out infinite alternate;
}
@keyframes activeGlow {
0% {
box-shadow:
0 3px 12px rgba(212, 175, 55, 0.3),
0 1px 4px rgba(212, 175, 55, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
100% {
box-shadow:
0 4px 16px rgba(212, 175, 55, 0.4),
0 2px 6px rgba(212, 175, 55, 0.3),
inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
}
.nav-link:hover::before {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.nav-link:hover::after {
width: 28px;
box-shadow:
0 0 16px rgba(212, 133, 26, 0.6),
0 0 8px rgba(231, 76, 60, 0.4),
0 0 4px rgba(44, 62, 80, 0.3);
}
/* Active state styles removed - only hover effects remain */
/* Remove old indicator */
.menu-indicator {
display: none;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.nav-toggle .bar {
width: 25px;
height: 3px;
background: var(--text-primary);
transition: var(--transition-fast);
border-radius: 2px;
}
/* ===== HERO SECTION ===== */
.hero {
position: relative;
overflow: hidden;
background: transparent;
}
/* Hero Slider */
.hero-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.slider-container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
/* Slider için tek resim elementi - CSS artık JavaScript'te inline */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.05);
z-index: 1;
}
.slide.active {
opacity: 1;
transform: scale(1);
z-index: 2;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide.active img {
transform: scale(1);
}
/* Smooth fade transition */
.slide.fade-out {
opacity: 0;
transform: scale(1.05);
}
.slide.fade-in {
opacity: 1;
transform: scale(1);
}
/* Slide transition */
.slide.slide-out-left {
transform: translateX(-100%);
}
.slide.slide-out-right {
transform: translateX(100%);
}
.slide.slide-in-left {
transform: translateX(0);
}
.slide.slide-in-right {
transform: translateX(0);
}
/* Zoom transition */
.slide.zoom-out {
transform: scale(0.8);
opacity: 0;
}
.slide.zoom-in {
transform: scale(1);
opacity: 1;
}
/* Touch/Swipe optimizations */
.slider-container {
touch-action: pan-y pinch-zoom;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.slider-container:active {
cursor: grabbing;
}
.slider-container img {
pointer-events: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
/* Swipe indicator */
.slider-container::after {
content: '👆 Kaydırarak gezin';
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
z-index: 4;
opacity: 0;
animation: swipeHint 3s ease-in-out;
pointer-events: none;
}
@keyframes swipeHint {
0%, 100% { opacity: 0; }
10%, 90% { opacity: 1; }
}
/* Fallback removed */
/* Slider Navigation */
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 30px;
z-index: 3;
}
.slider-nav button {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.slider-nav button:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
/* Slider Dots */
.slider-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
flex-wrap: wrap;
justify-content: center;
max-width: 280px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active,
.dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}
/* Device-specific slider optimizations */
/* Mobile Devices (up to 767px) */
@media (max-width: 767px) {
.slide {
transition: all 0.6s ease-out;
}
.slide img {
transition: transform 0.6s ease-out;
}
/* Product slides için mobile optimizasyonları */
.product-slide {
transition: all 0.6s ease-out;
}
/* Mobile'da swipe hint'i gizle */
.slider-container::after {
display: none;
}
.slider-dots {
bottom: 15px;
gap: 4px;
max-width: 200px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.dot {
width: 6px;
height: 6px;
}
.slider-nav {
padding: 0 15px;
}
.slider-nav button {
width: 35px;
height: 35px;
font-size: 14px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
}
.slider-nav button:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}
}
/* Tablet Devices (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.slide {
transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide img {
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Product slides için tablet optimizasyonları */
.product-slide {
transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slider-dots {
bottom: 25px;
gap: 6px;
max-width: 260px;
padding: 6px 16px;
background: rgba(0, 0, 0, 0.15);
border-radius: 20px;
backdrop-filter: blur(12px);
}
.dot {
width: 8px;
height: 8px;
}
.slider-nav button {
width: 45px;
height: 45px;
font-size: 16px;
}
}
/* Desktop Devices (1024px and up) */
@media (min-width: 1024px) {
.slide {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide img {
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Product slides için desktop optimizasyonları */
.product-slide {
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-dots {
padding: 4px 20px;
background: rgba(0, 0, 0, 0.1);
border-radius: 25px;
backdrop-filter: blur(20px);
}
.dot {
width: 10px;
height: 10px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dot:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.3);
}
.slider-nav button {
width: 50px;
height: 50px;
font-size: 18px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slider-nav button:hover {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: scale(1.15);
}
}
.hero-content {
position: absolute;
top: 50%;
left: 60px;
transform: translateY(-50%);
max-width: 580px;
padding: 0;
background: transparent;
backdrop-filter: none;
border-radius: 0;
border: none;
box-shadow: none;
z-index: 10;
color: #ffffff;
overflow: visible;
}
.hero-content::before {
display: none;
}
/* Modern Hero Content Card */
.hero-content > * {
position: relative;
z-index: 2;
}
.hero-content::after {
content: '';
position: absolute;
top: 40px;
left: -20px;
right: -20px;
bottom: 20px;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.25) 0%,
rgba(44, 62, 80, 0.35) 50%,
rgba(0, 0, 0, 0.3) 100%);
backdrop-filter: blur(8px) saturate(120%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 1;
transition: all 0.3s ease;
}
.hero-content:hover::after {
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(44, 62, 80, 0.45) 50%,
rgba(0, 0, 0, 0.4) 100%);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.2),
0 6px 24px rgba(0, 0, 0, 0.15);
}
/* Content Wrapper */
.hero-content-wrapper {
padding: 15px 25px 10px;
position: relative;
z-index: 2;
}
/* Hero Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #2c3e50;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); }
to { box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5); }
}
/* Hero Title */
.hero-title {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 8px;
line-height: 1.1;
font-family: var(--font-primary);
color: #ffffff;
letter-spacing: -0.03em;
position: relative;
}
.title-line-main {
display: block;
color: #ffffff;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.title-line-accent {
display: block;
background: linear-gradient(135deg, #E67E22, #F39C12, #D4851A);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 2px 4px rgba(212, 133, 26, 0.2);
}
.title-decoration {
width: 60px;
height: 4px;
background: linear-gradient(90deg, #E67E22, #F39C12);
border-radius: 2px;
margin: 12px 0 0 0;
animation: expand 1s ease-out 0.5s both;
}
@keyframes expand {
from { width: 0; }
to { width: 60px; }
}
/* Hero Subtitle */
.hero-subtitle {
font-size: 1rem;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.highlight-text {
color: #FFD700;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Hero Stats - DÜZGÜN TASARIM */
.hero-stats-new {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding: 16px 20px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 100%
);
backdrop-filter: blur(15px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.stat-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 16px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.15) 100%
);
border: 1px solid rgba(255, 215, 0, 0.4);
border-radius: 12px;
min-height: 70px;
flex: 1;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.stat-badge:hover {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.2) 0%,
rgba(255, 215, 0, 0.1) 100%
);
border-color: rgba(255, 215, 0, 0.6);
transform: translateY(-2px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.stat-num {
font-size: 1.2rem;
font-weight: 800;
color: #FFD700;
line-height: 1;
margin-bottom: 4px;
font-family: 'Inter', sans-serif;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #FFD700, #FFA500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-text {
font-size: 0.6rem;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
font-family: 'Inter', sans-serif;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-align: center;
}
/* ESKİ STAT-ITEM KODLARI KALDIRILDI */
/* ESKİ STAT KODLARI KALDIRILDI */
/* Hero Slideshow Background */
.hero-slideshow-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
background: transparent;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
z-index: 2;
}
.hero-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 2;
transition: opacity 1.2s ease-in-out;
}
.hero-slide.active::after {
opacity: 0.8;
}
/* Hero Slide Animasyonları - JavaScript Crossfade */
/* Product Modal Slideshow */
.product-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 15px;
}
.product-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1);
z-index: 1;
display: block;
}
.product-slide.active {
opacity: 1;
transform: scale(1);
z-index: 2;
}
/* Product slide geçiş animasyonları */
.product-slide.fade-out {
opacity: 0;
transform: scale(1.05);
}
.product-slide.fade-in {
opacity: 1;
transform: scale(1);
}
.product-slide.slide-out-left {
transform: translateX(-100%);
}
.product-slide.slide-out-right {
transform: translateX(100%);
}
.product-slide.slide-in-left {
transform: translateX(0);
}
.product-slide.slide-in-right {
transform: translateX(0);
}
.product-slide.zoom-out {
transform: scale(0.8);
opacity: 0;
}
.product-slide.zoom-in {
transform: scale(1);
opacity: 1;
}
.slideshow-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
pointer-events: none;
}
.slide-nav-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: all;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.slide-nav-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
}
.slide-nav-btn i {
color: #333;
font-size: 14px;
}
.slide-indicators {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
gap: 8px;
margin: 0;
z-index: 10;
}
.slide-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.slide-indicator.active {
background: #FFD700;
transform: scale(1.2);
}
/* Hero Action - Kompakt */
.hero-action {
text-align: center;
margin-bottom: 5px;
}
.hero-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #E67E22, #F39C12);
color: #ffffff;
text-decoration: none;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
}
.hero-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(201, 150, 64, 0.4);
background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
}
.hero-cta-btn i {
font-size: 0.8rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-2px);
}
60% {
transform: translateY(-1px);
}
}
/* Mobile Responsive (Phones) */
@media (max-width: 768px) {
.hero {
height: 100vh;
min-height: 100vh;
}
.vision-quote {
padding: 20px 25px;
margin: 15px;
max-width: 90%;
}
.hero-content {
position: static;
transform: none;
max-width: none;
margin: 15px;
padding: 25px 20px;
margin-top: 25px;
left: auto;
}
.hero-badge {
font-size: 0.8rem;
padding: 6px 12px;
margin-bottom: 16px;
}
.hero-title {
font-size: 2.4rem;
margin-bottom: 16px;
}
.title-line-main, .title-line-accent {
font-size: 2.4rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 20px;
}
.hero-stats-new {
flex-direction: column;
gap: 12px;
padding: 12px 16px;
margin-bottom: 20px;
}
.stat-divider {
width: 60px;
height: 2px;
background: linear-gradient(to right, transparent, rgba(255, 215, 0, 0.6), transparent);
}
.stat-num {
font-size: 1rem;
}
.stat-text {
font-size: 0.5rem;
}
.hero-buttons {
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.btn-hero {
width: 100%;
justify-content: center;
padding: 14px 24px;
}
.hero-scroll-indicator {
font-size: 0.8rem;
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.hero-content {
left: 40px;
max-width: 520px;
padding: 45px 40px;
}
.hero-title {
font-size: 2.8rem;
}
.hero-stats {
gap: 12px;
padding: 12px;
}
.stat-num {
font-size: 1.1rem;
}
.btn-hero {
padding: 14px 28px;
font-size: 0.95rem;
}
}
/* Desktop Large */
@media (min-width: 1400px) {
.hero-content {
left: 80px;
max-width: 620px;
padding: 60px 50px;
}
.hero-title {
font-size: 3.6rem;
}
.hero-subtitle {
font-size: 1.3rem;
}
.stat-num {
font-size: 1.3rem;
}
.btn-hero {
padding: 18px 36px;
font-size: 1.1rem;
}
}
.hero-scroll {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: var(--text-light);
}
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.9rem;
opacity: 0.8;
animation: bounce 2s infinite;
}
.scroll-indicator i {
font-size: 1.2rem;
}
/* ===== PRODUCTS SECTION ===== */
.products {
padding: 120px 0;
position: relative;
background:
linear-gradient(45deg,
rgba(245, 235, 200, 0.06) 0%,
rgba(107, 142, 35, 0.03) 20%,
rgba(255, 248, 220, 0.08) 40%,
rgba(154, 205, 50, 0.02) 60%,
rgba(250, 240, 210, 0.07) 80%,
rgba(255, 248, 220, 0.05) 100%
);
backdrop-filter: blur(0.5px);
overflow: hidden;
}
.products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat;
background-size: 60px 60px, 40px 40px, 20px 20px, 15px 15px;
background-position: 0 0, 20px 20px, 10px 10px, 5px 5px;
animation: authenticCardPattern 45s linear infinite;
pointer-events: none;
z-index: 1;
}
.products .container {
position: relative;
z-index: 2;
}
/* Products Section Subtitle - Özel Tasarım */
.products .section-subtitle {
color: #666666;
font-size: 1.15rem;
font-family: 'Playfair Display', 'Georgia', serif;
font-style: italic;
font-weight: 300;
letter-spacing: 0.5px;
margin-bottom: 70px;
text-shadow: 0 1px 2px rgba(102, 102, 102, 0.08);
}
.products {
background:
/* Premium marble texture */
url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
/* Luxury fabric weave */
url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23daa520' fill-opacity='0.04'%3E%3Cpath d='M0 0h60v60H0V0zm60 60h60v60H60V60z'/%3E%3Cpath d='M60 0h60v60H60V0zM0 60h60v60H0V60z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
/* Golden dust particles */
radial-gradient(circle at 15% 25%, rgba(255, 215, 0, 0.08) 0%, transparent 20%),
radial-gradient(circle at 85% 15%, rgba(255, 193, 7, 0.06) 0%, transparent 25%),
radial-gradient(circle at 45% 75%, rgba(218, 165, 32, 0.05) 0%, transparent 30%),
radial-gradient(circle at 75% 85%, rgba(255, 140, 0, 0.04) 0%, transparent 20%),
/* Elegant gradient base */
linear-gradient(135deg,
#fdfcf8 0%,
#faf8f3 20%,
#f8f6f0 40%,
#f5f3ed 60%,
#f2f0ea 80%,
#efede7 100%
);
background-attachment: fixed;
background-size: 200px 200px, 120px 120px, 250px 250px, 300px 300px, 180px 180px, 220px 220px, cover;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
.product-card {
background:
linear-gradient(145deg, #ffffff 0%, #fefefe 100%),
radial-gradient(circle at top right, rgba(212, 175, 55, 0.03) 0%, transparent 60%),
radial-gradient(circle at bottom left, rgba(255, 215, 0, 0.02) 0%, transparent 60%);
border-radius: 32px;
overflow: hidden;
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.02),
0 16px 40px rgba(212, 175, 55, 0.04),
0 8px 20px rgba(0, 0, 0, 0.02),
0 4px 10px rgba(212, 175, 55, 0.03),
inset 0 2px 0 rgba(255, 255, 255, 0.9),
inset 0 0 20px rgba(255, 255, 255, 0.1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 2px solid rgba(212, 175, 55, 0.06);
backdrop-filter: blur(40px);
position: relative;
transform-style: preserve-3d;
}
.product-card:hover {
transform: translateY(-24px) rotateX(8deg) rotateY(-2deg) scale(1.05);
box-shadow:
0 60px 120px rgba(0, 0, 0, 0.08),
0 30px 60px rgba(212, 175, 55, 0.12),
0 15px 30px rgba(0, 0, 0, 0.06),
0 8px 16px rgba(212, 175, 55, 0.08),
inset 0 4px 0 rgba(255, 255, 255, 1),
inset 0 0 40px rgba(255, 255, 255, 0.2),
0 0 0 4px rgba(212, 175, 55, 0.1);
border-color: rgba(212, 175, 55, 0.2);
}
.product-card::before {
content: '';
position: absolute;
inset: -2px;
background: conic-gradient(from 0deg at 50% 50%,
#D4AF37 0deg,
#FFD700 60deg,
#FFA500 120deg,
#DAA520 180deg,
#B8860B 240deg,
#D4AF37 300deg,
#D4AF37 360deg);
border-radius: 34px;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
animation: rotate 20s linear infinite;
}
.product-card:hover::before {
opacity: 0.3;
animation-duration: 12s;
}
.product-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
border-radius: 32px;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.product-image {
position: relative;
height: 320px;
overflow: hidden;
border-radius: 28px 28px 0 0;
z-index: 2;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.product-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
transparent 30%,
transparent 70%,
rgba(255, 215, 0, 0.08) 100%);
z-index: 2;
opacity: 0;
transition: opacity 0.6s ease;
}
.product-card:hover .product-image::before {
opacity: 1;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
filter: brightness(1.05) saturate(1.1) contrast(1.03);
}
.product-card:hover .product-image img {
transform: scale(1.03);
filter: brightness(1.05) saturate(1.1);
}
/* Product Header */
.product-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-xs);
}
.product-header h3 {
margin: 0;
flex: 1;
}
.product-info {
padding: 32px 28px 28px;
position: relative;
z-index: 2;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 253, 250, 0.95) 100%),
radial-gradient(circle at center bottom, rgba(212, 175, 55, 0.02) 0%, transparent 70%);
border-radius: 0 0 28px 28px;
backdrop-filter: blur(20px);
}
.product-info::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 175, 55, 0.3) 20%,
rgba(255, 215, 0, 0.5) 50%,
rgba(212, 175, 55, 0.3) 80%,
transparent 100%);
border-radius: 2px;
opacity: 0;
transition: all 0.6s ease;
}
.product-card:hover .product-info::before {
opacity: 1;
width: 80px;
}
.product-info h3 {
color: var(--text-primary);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.3;
font-family: var(--font-primary);
}
.product-info p {
color: #555555;
margin-bottom: 18px;
line-height: 1.6;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.2px;
}
.product-price {
color: var(--primary-color);
font-weight: 700;
font-size: 1.2rem;
}
/* Product Eye Icon - Yeni Konum */
.product-eye-icon {
width: 48px;
height: 48px;
background:
linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #FFA500 100%),
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.25),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -2px 4px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(255, 255, 255, 0.1);
flex-shrink: 0;
margin-left: 12px;
position: relative;
overflow: hidden;
}
.product-eye-icon::before {
content: '';
position: absolute;
inset: -2px;
background: conic-gradient(from 0deg,
#D4AF37, #FFD700, #FFA500, #DAA520, #B8860B, #D4AF37);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: rotate 8s linear infinite;
}
.product-eye-icon:hover::before {
opacity: 0.8;
animation-duration: 3s;
}
.product-eye-icon:hover {
transform: scale(1.25) rotate(15deg) translateZ(10px);
box-shadow:
0 15px 40px rgba(212, 175, 55, 0.4),
0 8px 20px rgba(0, 0, 0, 0.12),
inset 0 3px 6px rgba(255, 255, 255, 0.5),
inset 0 -3px 6px rgba(0, 0, 0, 0.15),
0 0 0 4px rgba(255, 255, 255, 0.2);
}
.product-eye-icon i {
font-size: 1.2rem;
color: white;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}
.product-eye-icon:hover i {
transform: scale(1.4) rotate(-15deg) translateZ(5px);
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
/* Product Action kaldırıldı - sadece göz ikonu kullanılıyor */
/* En Yakın Şube butonu kaldırıldı - daha şık görünüm için */
/* Detayları Gör butonu kaldırıldı - sadece göz ikonu kullanılıyor */
/* ===== ABOUT SECTION ===== */
.about {
padding: 120px 0;
background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(218, 165, 32, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(184, 134, 11, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-text {
position: relative;
z-index: 2;
}
.about-subtitle-special {
font-size: 1.1rem;
color: #666;
margin-bottom: 30px;
font-weight: 300;
letter-spacing: 0.5px;
}
.about-story {
margin-bottom: 40px;
}
.about-description {
font-size: 1rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 25px;
}
.about-mission {
font-size: 1rem;
line-height: 1.8;
color: var(--text-primary);
margin-bottom: 30px;
padding: 20px;
background: rgba(218, 165, 32, 0.05);
border-left: 4px solid var(--primary-color);
border-radius: 0 10px 10px 0;
}
.about-features {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.about-features .feature {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.7);
border-radius: 15px;
transition: all 0.3s ease;
}
.about-features .feature:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateX(10px);
}
.about-features .feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.about-features .feature-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 5px;
}
.about-features .feature-content p {
font-size: 0.9rem;
color: var(--text-secondary);
margin: 0;
}
.about-vision {
margin-top: 30px;
position: relative;
}
.vision-quote {
position: absolute;
right: 50px;
top: 0;
padding: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
border: 1px solid rgba(218, 165, 32, 0.2);
text-align: center;
max-width: 500px;
z-index: 10;
}
.vision-quote .quote-icon {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 20px;
display: block;
}
.vision-quote .motto-text {
font-size: 1.2rem;
font-style: italic;
color: var(--text-primary);
line-height: 1.6;
margin: 0;
font-weight: 300;
}
.about-image {
position: relative;
z-index: 2;
}
/* About Section Responsive */
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
}
.about-features .feature {
justify-content: center;
}
}
@media (max-width: 768px) {
.about {
padding: 80px 0;
}
.about-content {
gap: 40px;
}
.about-features .feature {
flex-direction: column;
text-align: center;
gap: 10px;
}
.vision-quote {
padding: 20px;
max-width: 400px;
right: 20px;
}
.vision-quote .motto-text {
font-size: 1.1rem;
}
}
/* ===== PREMIUM MENU SECTION ===== */
.premium-menu {
padding: 150px 0;
position: relative;
background:
/* Luxury marble texture */
url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='marble'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23marble)' opacity='0.03'/%3E%3C/svg%3E"),
/* Premium fabric pattern */
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23daa520' fill-opacity='0.02'%3E%3Cpath d='M0 0h50v50H0V0zm50 50h50v50H50V50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
/* Golden particles */
radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.08) 0%, transparent 25%),
radial-gradient(circle at 80% 20%, rgba(218, 165, 32, 0.06) 0%, transparent 30%),
radial-gradient(circle at 40% 80%, rgba(255, 193, 7, 0.05) 0%, transparent 35%),
radial-gradient(circle at 70% 70%, rgba(184, 134, 11, 0.04) 0%, transparent 25%),
/* Premium gradient */
linear-gradient(135deg,
#fdfcfa 0%,
#faf8f4 20%,
#f8f6f1 40%,
#f5f3ee 60%,
#f2f0eb 80%,
#efede8 100%
);
background-attachment: fixed;
background-size: 300px 300px, 100px 100px, 400px 400px, 350px 350px, 300px 300px, 280px 280px, cover;
overflow: hidden;
}
/* Ürünler bölümündeki şeffaf motif desenini menü bölümüne de uygula */
.premium-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat;
background-size: 60px 60px, 40px 40px, 20px 20px, 15px 15px;
background-position: 0 0, 20px 20px, 10px 10px, 5px 5px;
animation: authenticCardPattern 45s linear infinite;
pointer-events: none;
z-index: 1;
}
/* Menü içeriğini motif katmanının üstünde tut */
.premium-menu .container {
position: relative;
z-index: 2;
}
.menu-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
linear-gradient(45deg, rgba(212, 175, 55, 0.03) 0%, transparent 50%, rgba(255, 215, 0, 0.02) 100%);
pointer-events: none;
}
/* Modern Header */
.modern-menu-header {
text-align: center;
margin-bottom: 80px;
position: relative;
}
.modern-menu-title {
font-family: var(--font-primary);
font-size: 3.2rem;
font-weight: 300;
background: linear-gradient(
135deg,
#8B4513 0%,
#DAA520 25%,
#FFD700 50%,
#DAA520 75%,
#B8860B 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 30px;
letter-spacing: 3px;
text-transform: uppercase;
}
.modern-divider {
width: 80px;
height: 1px;
background: var(--primary-color);
margin: 0 auto 30px;
position: relative;
}
.modern-divider::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: var(--primary-color);
border-radius: 50%;
}
.modern-menu-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 400;
letter-spacing: 1px;
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
/* Modern Categories */
.modern-categories {
margin-bottom: 60px;
position: relative;
}
.category-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 50px;
padding: 8px;
backdrop-filter: blur(20px);
border: 1px solid rgba(212, 175, 55, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
max-width: 800px;
margin: 0 auto;
}
.modern-tab {
padding: 15px 25px;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 40px;
position: relative;
white-space: nowrap;
}
.modern-tab:hover {
color: var(--text-primary);
background: rgba(212, 175, 55, 0.05);
}
.modern-tab.active {
color: white;
background: linear-gradient(135deg,
var(--primary-color) 0%,
#B8860B 100%);
box-shadow:
0 4px 15px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tab-indicator {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--primary-color);
border-radius: 1px;
transition: all 0.3s ease;
}
/* Premium Menu Grid */
.premium-menu-grid {
max-width: 1200px;
margin: 0 auto;
}
/* Menu Category Sections */
.menu-category-section {
margin-bottom: 60px;
opacity: 1;
transform: translateY(0);
transition: all 0.4s ease;
}
.menu-category-section[data-category]:not([data-category="all"]) {
display: none;
}
.menu-category-section.active {
display: block;
}
.modern-category-header {
text-align: center;
margin-bottom: 50px;
position: relative;
}
.modern-category-header h3 {
font-size: 1.8rem;
font-weight: 400;
background: linear-gradient(
135deg,
#8B4513 0%,
#DAA520 25%,
#FFD700 50%,
#DAA520 75%,
#B8860B 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-primary);
margin: 0 0 20px 0;
letter-spacing: 2px;
text-transform: uppercase;
}
.modern-category-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--primary-color);
}
/* Menu Items Grid */
.menu-items-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.premium-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 25px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(253, 252, 248, 0.9) 100%);
border-radius: 15px;
border: 1px solid rgba(212, 175, 55, 0.15);
backdrop-filter: blur(15px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.04),
0 3px 10px rgba(212, 175, 55, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.premium-menu-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 215, 0, 0.08),
transparent);
transition: left 0.5s ease;
}
.premium-menu-item:hover::before {
left: 100%;
}
.premium-menu-item:hover {
transform: translateY(-3px);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.06),
0 6px 20px rgba(212, 175, 55, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(212, 175, 55, 0.25);
}
.premium-menu-item .menu-item-info {
flex: 1;
position: relative;
z-index: 2;
}
.premium-menu-item .menu-item-info h4 {
color: var(--text-primary);
font-size: 1.1rem;
font-weight: 600;
margin: 0;
font-family: var(--font-primary);
line-height: 1.4;
}
.premium-menu-item .menu-item-price {
color: var(--primary-color);
font-size: 1.3rem;
font-weight: 700;
font-family: var(--font-primary);
margin-left: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
/* Mobile Responsive for Menu Items */
@media (max-width: 768px) {
.menu-items-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.premium-menu-item {
padding: 15px 20px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.premium-menu-item .menu-item-info h4 {
font-size: 1rem;
}
.premium-menu-item .menu-item-price {
font-size: 1.2rem;
margin-left: 0;
align-self: flex-end;
}
.category-header h3 {
font-size: 1.6rem;
flex-direction: column;
gap: 10px;
}
.category-header i {
font-size: 1.5rem;
}
}
/* Menu Placeholder */
.menu-placeholder {
text-align: center;
padding: 80px 40px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(253, 252, 248, 0.7) 100%);
border-radius: 30px;
border: 2px dashed rgba(212, 175, 55, 0.3);
backdrop-filter: blur(15px);
}
.placeholder-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(218, 165, 32, 0.05) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
border: 2px solid rgba(212, 175, 55, 0.2);
}
.placeholder-icon i {
font-size: 3rem;
color: var(--primary-color);
}
.menu-placeholder h3 {
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 15px;
font-family: var(--font-primary);
}
.menu-placeholder p {
font-size: 1.1rem;
color: var(--text-secondary);
font-style: italic;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.premium-menu {
padding: 80px 0;
}
.modern-menu-title {
font-size: 2.2rem;
letter-spacing: 2px;
}
.modern-menu-subtitle {
font-size: 1rem;
letter-spacing: 0.5px;
}
.category-tabs {
flex-direction: column;
gap: 5px;
padding: 10px;
border-radius: 20px;
max-width: 300px;
}
.modern-tab {
padding: 12px 20px;
font-size: 0.9rem;
border-radius: 15px;
}
.tab-indicator {
display: none;
}
.modern-category-header h3 {
font-size: 1.4rem;
letter-spacing: 1px;
}
}
/* Scroll Navigation */
.scroll-navigation {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.scroll-btn {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.75);
border: 2px solid var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(15px);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(212, 175, 55, 0.15);
opacity: 0.8;
}
.scroll-btn:hover {
background: linear-gradient(135deg,
var(--primary-color) 0%,
var(--primary-hover) 100%);
color: white;
transform: scale(1.15) translateX(-2px);
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.35),
0 4px 12px rgba(0, 0, 0, 0.12),
inset 0 2px 4px rgba(255, 255, 255, 0.2);
opacity: 1;
border-color: var(--primary-hover);
}
.scroll-btn i {
font-size: 1.2rem;
color: var(--primary-color);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.scroll-btn:hover i {
color: white;
transform: scale(1.1);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.scroll-navigation {
right: 15px;
}
.scroll-btn {
width: 40px;
height: 40px;
}
.scroll-btn i {
font-size: 1rem;
}
.product-eye-icon {
width: 36px;
height: 36px;
margin-left: 8px;
}
.product-eye-icon i {
font-size: 0.95rem;
}
/* Mobil Tipografi Ayarları */
.products .section-subtitle {
font-size: 1rem;
letter-spacing: 0.3px;
margin-bottom: 50px;
}
.product-info h3 {
font-size: 1.2rem;
letter-spacing: 0.2px;
}
.product-info p {
font-size: 0.85rem;
letter-spacing: 0.1px;
}
/* Product action ve details btn kaldırıldı */
}
/* ===== PRODUCTS SECTION TYPOGRAPHY ===== */
.products .section-title {
font-weight: 800;
position: relative;
}
.products .section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
#cfa24b 20%,
#DAA520 50%,
#cfa24b 80%,
transparent 100%);
border-radius: 2px;
box-shadow:
0 2px 8px rgba(207, 162, 75, 0.3),
0 1px 3px rgba(0, 0, 0, 0.1);
}
.products .section-subtitle {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
font-size: 1.3rem;
color: rgba(44, 62, 80, 0.8);
letter-spacing: 0.5px;
line-height: 1.5;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.products {
padding: 80px 0;
}
.products .section-title::after {
width: 80px;
height: 3px;
bottom: -8px;
}
.products .section-subtitle {
font-size: 1.1rem;
margin-top: 16px;
}
}
/* ===== PRODUCT MODAL STYLES ===== */
#productModal, .product-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}
#productModal.show, .product-modal.show {
opacity: 1 !important;
visibility: visible !important;
background: rgba(0, 0, 0, 0.8) !important;
backdrop-filter: blur(10px) !important;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
}
#modalContent, .modal-content {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 25px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(212, 175, 55, 0.2);
transform-origin: center center;
transition: transform 0.4s ease, opacity 0.4s ease;
}
#productModal.show #modalContent, .product-modal.show .modal-content {
transform: scale(1) translateY(0) !important;
opacity: 1 !important;
}
/* Modal çıkış animasyonu - CSS transition ile otomatik */
/* Modal hover efektleri */
#modalContent:hover {
transform: scale(1.02) translateY(-8px);
box-shadow: 0 35px 100px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
#productModal.show #modalContent:hover {
transform: scale(1.02) translateY(-8px);
}
/* Modal close button animasyonu */
.modal-close {
position: absolute;
top: 25px;
right: 25px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid rgba(212, 175, 55, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 100;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-close i {
font-size: 20px;
color: #666;
font-weight: 600;
transition: all 0.3s ease;
}
.modal-close:hover {
transform: scale(1.15) rotate(90deg);
background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
border-color: #d4af37;
box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);
}
.modal-close:hover i {
color: #ffffff;
transform: scale(1.1);
}
.modal-header {
text-align: center;
padding: 40px 40px 20px;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.product-category {
margin-bottom: 15px;
}
.product-category span {
background: linear-gradient(135deg, var(--primary-color), #B8860B);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.modal-header h2 {
color: var(--text-primary);
font-size: 2.2rem;
margin: 15px 0;
font-weight: 700;
}
.product-info-note span {
color: var(--text-secondary);
font-style: italic;
font-size: 1rem;
}
.modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 20px 40px 30px;
}
.modal-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
height: 300px;
padding: 0 !important;
margin: 0 !important;
}
.modal-image img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform 0.3s ease;
}
.modal-image:hover img {
transform: scale(1.05);
}
.modal-details {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: flex-start;
}
.product-story {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0.02));
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(212, 175, 55, 0.1);
}
.product-story h3,
.product-features h3 {
color: var(--primary-color);
font-size: 1.3rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.product-story p {
color: var(--text-secondary);
line-height: 1.7;
font-size: 0.95rem;
text-align: justify;
margin: 0;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.feature {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.03));
border-radius: 12px;
border: 1px solid rgba(212, 175, 55, 0.15);
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.feature:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
border-color: rgba(212, 175, 55, 0.3);
}
.feature i {
color: var(--primary-color);
font-size: 1.2rem;
width: 22px;
text-align: center;
flex-shrink: 0;
}
.feature-content {
flex: 1;
}
.feature-title {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
margin-bottom: 2px;
}
.feature-desc {
color: var(--text-secondary);
font-size: 0.8rem;
line-height: 1.3;
}
.modal-footer {
padding: 20px 40px 40px;
display: flex;
justify-content: center;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.modal-btn {
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.modal-btn.primary {
background: linear-gradient(135deg, var(--primary-color), #B8860B);
color: white;
}
.modal-btn.primary:hover {
background: linear-gradient(135deg, #FFD700, var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
.modal-btn.secondary {
background: transparent;
color: var(--primary-color);
border-color: var(--primary-color);
}
.modal-btn.secondary:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.modal-content {
margin: 10px;
max-height: 95vh;
border-radius: 20px;
}
.modal-header {
padding: 30px 20px 15px;
}
.modal-header h2 {
font-size: 1.8rem;
}
.modal-body {
grid-template-columns: 1fr;
gap: 20px;
padding: 15px 20px 20px;
}
.modal-image img {
height: 220px;
}
.product-story {
padding: 15px;
}
.product-story h3,
.product-features h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.product-story p {
font-size: 0.9rem;
line-height: 1.6;
}
.features-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.feature {
padding: 10px 12px;
gap: 10px;
}
.feature i {
font-size: 1.1rem;
width: 20px;
}
.feature-title {
font-size: 0.85rem;
}
.feature-desc {
font-size: 0.75rem;
}
.modal-footer {
padding: 15px 20px 30px;
}
.modal-btn {
justify-content: center;
padding: 12px 25px;
}
}
.product-info {
padding: 20px 24px 24px 24px;
background: #FFFFFF;
position: relative;
min-height: 140px;
}
.product-info h3 {
font-family: 'Playfair Display', serif;
color: #2C1810;
margin-bottom: 8px;
font-size: 1.5rem;
font-weight: 800;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
letter-spacing: 0.3px;
}
.product-info p {
color: #8B6F47;
margin-bottom: 18px;
font-size: 0.95rem;
line-height: 1.5;
font-weight: 400;
opacity: 0.9;
}
/* Aksiyon butonu */
.product-btn {
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-btn.primary {
background: linear-gradient(135deg, #D4AF37, #B8860B);
color: white;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.product-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
.product-btn.secondary {
background: rgba(212, 175, 55, 0.1);
color: #4E342E;
border: 1px solid rgba(212, 175, 55, 0.3);
}
.product-btn.secondary:hover {
background: rgba(212, 175, 55, 0.2);
border-color: rgba(212, 175, 55, 0.5);
}
/* ===== ABOUT SECTION ===== */
.about {
position: relative;
background:
linear-gradient(45deg,
rgba(245, 235, 200, 0.06) 0%,
rgba(107, 142, 35, 0.03) 20%,
rgba(255, 248, 220, 0.08) 40%,
rgba(154, 205, 50, 0.02) 60%,
rgba(250, 240, 210, 0.07) 80%,
rgba(255, 248, 220, 0.05) 100%
);
backdrop-filter: blur(0.5px);
overflow: hidden;
border-top: 3px solid rgba(154, 205, 50, 0.15);
border-bottom: 2px solid rgba(107, 142, 35, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 4px 15px rgba(154, 205, 50, 0.08);
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat;
background-size: 60px 60px, 40px 40px, 20px 20px, 15px 15px;
background-position: 0 0, 20px 20px, 10px 10px, 5px 5px;
animation: authenticCardPattern 45s linear infinite;
pointer-events: none;
z-index: 1;
}
.about .container {
position: relative;
z-index: 2;
}
/* About Section Typography Enhancements */
.about-subtitle-special {
font-style: italic !important;
color: #D4AF37 !important;
font-weight: 500 !important;
text-shadow: 0 1px 3px rgba(212, 175, 55, 0.3) !important;
letter-spacing: 0.5px !important;
background: linear-gradient(135deg, #D4AF37 0%, #F4E976 50%, #C9A558 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: shimmerText 3s ease-in-out infinite alternate;
}
@keyframes shimmerText {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* Brand Motto Enhancement */
.brand-motto .motto-text {
font-family: 'Dancing Script', 'Caveat', cursive !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
color: #2C1810 !important;
line-height: 1.6 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
transform: rotate(-0.8deg);
letter-spacing: 0.3px;
margin: 0;
position: relative;
}
.brand-motto .motto-text::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #D4AF37, transparent);
border-radius: 1px;
}
.brand-motto {
background: linear-gradient(135deg,
rgba(255, 248, 220, 0.8) 0%,
rgba(255, 235, 190, 0.9) 50%,
rgba(255, 248, 220, 0.8) 100%
) !important;
border: 2px solid rgba(212, 175, 55, 0.3) !important;
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
transform: translateY(-5px);
}
.about-content {
display: grid;
grid-template-columns: 60% 40%;
gap: var(--spacing-xxl);
align-items: center;
}
.about-text .section-header {
text-align: center;
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Premium About Title Styling */
.about-text .section-title {
font-size: 2.8rem;
font-family: 'Playfair Display', 'Georgia', serif;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 15px;
}
.about-text .section-title::after {
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg,
#D4AF37 0%,
#FFD700 50%,
#DAA520 100%);
height: 3px;
width: 80px;
}
/* Premium About Subtitle */
.about-text .section-subtitle {
font-size: 1.25rem;
font-family: 'Playfair Display', 'Georgia', serif;
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg,
#D4AF37 0%,
#B8860B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1.4;
letter-spacing: 0.3px;
margin-bottom: 0;
}
/* Premium About Story Styling */
.about-story {
margin-bottom: var(--spacing-xl);
}
.about-description.premium {
font-size: 1.15rem;
color: #5D4037;
margin-bottom: var(--spacing-md);
line-height: 1.8;
font-family: 'Georgia', serif;
font-weight: 400;
letter-spacing: 0.3px;
text-align: center;
}
/* Vurgulu kapanış cümlesi */
.about-description.premium strong,
.about-description.premium b {
color: #4E342E;
font-weight: 600;
font-family: 'Playfair Display', 'Georgia', serif;
}
.about-mission {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.08) 0%,
rgba(255, 215, 0, 0.06) 100%);
padding: 20px 25px;
border-radius: 12px;
border-left: 4px solid #D4AF37;
margin-bottom: var(--spacing-lg);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1);
text-align: center;
}
.about-mission strong {
color: #4E342E;
font-size: 1.1rem;
font-family: 'Georgia', serif;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.2px;
}
/* Premium Features Grid */
.about-features.premium {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: var(--spacing-xl);
}
.feature.premium-card {
display: flex;
align-items: center;
gap: 20px;
padding: 25px 30px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 248, 240, 0.92) 50%,
rgba(255, 252, 245, 0.95) 100%);
border-radius: 18px;
border: 2px solid rgba(212, 175, 55, 0.35);
box-shadow:
0 12px 30px rgba(212, 175, 55, 0.18),
0 6px 18px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature.premium-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
#D4AF37 0%,
#FFD700 50%,
#DAA520 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature.premium-card:hover {
transform: translateY(-3px);
box-shadow:
0 15px 40px rgba(212, 175, 55, 0.15),
0 8px 20px rgba(0, 0, 0, 0.08);
border-color: rgba(212, 175, 55, 0.4);
}
.feature.premium-card:hover::before {
opacity: 1;
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg,
#D4AF37 0%,
#FFD700 50%,
#DAA520 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 6px 15px rgba(212, 175, 55, 0.25),
inset 0 1px 3px rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.feature-icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.3) 0%,
rgba(255, 215, 0, 0.2) 100%);
border-radius: 14px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.feature-icon i {
color: #ffffff;
font-size: 1.3rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.feature.premium-card:hover .feature-icon {
transform: scale(1.08) rotate(3deg);
box-shadow:
0 10px 25px rgba(212, 175, 55, 0.4),
inset 0 2px 5px rgba(255, 255, 255, 0.3),
0 0 20px rgba(255, 215, 0, 0.2);
}
.feature.premium-card:hover .feature-icon::before {
opacity: 1;
}
.feature.premium-card:hover .feature-icon i {
transform: scale(1.1);
}
.feature-content h4 {
color: #4E342E;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
font-family: 'Georgia', serif;
letter-spacing: 0.2px;
}
.feature-content p {
color: #6B4226;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Georgia', serif;
opacity: 0.9;
}
/* Premium Vision Quote - Centered in Story */
.about-vision-center {
margin: var(--spacing-xl) 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Legacy about-vision (if exists) */
.about-vision {
margin-top: var(--spacing-xl);
display: flex;
justify-content: center;
align-items: center;
}
.vision-quote {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.08) 0%,
rgba(255, 248, 240, 0.9) 50%,
rgba(255, 215, 0, 0.06) 100%);
padding: 30px 35px;
border-radius: 18px;
max-width: 500px;
width: 100%;
text-align: center;
border: 2px solid rgba(212, 175, 55, 0.2);
position: relative;
margin: 20px 0 0 0;
box-shadow:
0 12px 35px rgba(212, 175, 55, 0.12),
inset 0 1px 4px rgba(255, 255, 255, 0.6),
0 4px 15px rgba(0, 0, 0, 0.05);
text-align: center;
transition: all 0.3s ease;
}
.vision-quote:hover {
transform: translateY(-2px);
box-shadow:
0 15px 45px rgba(212, 175, 55, 0.18),
inset 0 1px 4px rgba(255, 255, 255, 0.7),
0 6px 20px rgba(0, 0, 0, 0.08);
border-color: rgba(212, 175, 55, 0.3);
}
.quote-icon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #D4AF37, #FFD700, #DAA520);
color: #ffffff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow:
0 6px 18px rgba(212, 175, 55, 0.4),
inset 0 1px 3px rgba(255, 255, 255, 0.3);
border: 2px solid #ffffff;
}
.vision-quote p {
color: #4E342E;
font-size: 1.2rem;
font-style: italic;
line-height: 1.7;
margin: 0;
padding-top: 5px;
font-family: 'Playfair Display', 'Georgia', serif;
font-weight: 500;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
/* Premium About Image */
.about-image.premium {
position: relative;
border-radius: 25px;
overflow: hidden;
box-shadow:
0 25px 70px rgba(212, 175, 55, 0.18),
0 10px 35px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid rgba(212, 175, 55, 0.25);
background: linear-gradient(135deg,
rgba(255, 248, 240, 0.1) 0%,
rgba(212, 175, 55, 0.05) 100%);
padding-bottom: 0;
margin-bottom: 0;
}
.about-image.premium::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg,
#D4AF37,
#FFD700,
#DAA520,
#B8860B);
border-radius: 28px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.about-image.premium:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 35px 90px rgba(212, 175, 55, 0.25),
0 15px 50px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(212, 175, 55, 0.5);
}
.about-image.premium:hover::before {
opacity: 0.3;
}
.about-image.premium img {
transition: all 0.5s ease;
filter:
brightness(1.02)
saturate(1.1)
contrast(1.05);
}
/* Premium Craft Gallery */
.simple-gallery {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 25px;
margin-bottom: 0;
padding-bottom: 0;
transform: translate3d(0, 0, 0);
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}
/* About Navigation Buttons - Tek Buton */
.about-nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
cursor: pointer;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.about-nav-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
color: rgba(255, 255, 255, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Device-specific about navigation optimizations - Tek Buton */
@media (max-width: 767px) {
.about-nav-btn {
width: 32px;
height: 32px;
font-size: 12px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
}
.about-nav-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.03);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.about-nav-btn {
width: 34px;
height: 34px;
font-size: 13px;
}
}
/* Hakkımızda Gallery Images - Daha Yumuşak Geçişler */
.simple-gallery .gallery-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transform: scale(1.02);
will-change: opacity, transform;
backface-visibility: hidden;
z-index: 1;
transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.simple-gallery .gallery-image:first-child {
display: block;
opacity: 1;
transform: scale(1);
z-index: 2;
}
/* Device-specific about gallery optimizations */
@media (max-width: 767px) {
.simple-gallery .gallery-image {
transition: all 1.0s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.01);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.simple-gallery .gallery-image {
transition: all 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
@media (min-width: 1024px) {
.simple-gallery .gallery-image {
transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
/* Device-specific gallery navigation optimizations - Tek Buton */
@media (max-width: 767px) {
.gallery-navigation {
right: 15px;
opacity: 0.7;
}
.gallery-nav-btn {
width: 32px;
height: 32px;
font-size: 11px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.gallery-nav-btn:hover {
transform: scale(1.03);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.gallery-navigation {
right: 18px;
}
.gallery-nav-btn {
width: 34px;
height: 34px;
font-size: 13px;
}
}
/* Gallery basit animasyon sistemi */
.simple-gallery .gallery-image {
transition: all 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.about-image.premium:hover .gallery-image {
transform: scale(1.02);
filter:
brightness(1.05)
saturate(1.08)
contrast(1.06);
transition: all 0.3s ease;
}
/* Gallery container hover efekti */
.simple-gallery:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.branch-bg-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.02) 50%,
rgba(0, 0, 0, 0.15) 100%
);
z-index: 3;
}
/* Slide Labels */
.slide-label {
position: absolute;
bottom: 60px;
left: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 15px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.3);
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
}
.craft-slide.active .slide-label {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.slide-label i {
color: #D4AF37;
font-size: 0.9rem;
}
.slide-label span {
color: #4E342E;
font-weight: 600;
font-size: 0.75rem;
font-family: 'Georgia', serif;
letter-spacing: 0.2px;
}
/* Craft Navigation - Minimal Progress Bar */
.craft-navigation {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
border-radius: 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.nav-dot::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #DAA520, #B8860B);
border-radius: 50%;
opacity: 0;
transform: scale(0.5);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-dot:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
.nav-dot:hover::before {
opacity: 0.3;
transform: scale(1);
}
.nav-dot.active {
background: #DAA520;
box-shadow: 0 0 15px rgba(218, 165, 32, 0.5);
transform: scale(1.3);
}
.nav-dot.active::before {
opacity: 1;
transform: scale(1);
}
.craft-navigation:hover {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
}
.image-overlay.premium {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(212, 175, 55, 0.15) 50%,
rgba(0, 0, 0, 0.3) 100%
);
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
opacity: 0;
transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.about-image.premium:hover .image-overlay.premium {
opacity: 1;
}
/* Premium Craft Details */
.craft-details {
text-align: center;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.about-image.premium:hover .craft-details {
transform: translateY(0);
}
.craft-badge.main {
background: rgba(255, 255, 255, 0.95);
padding: 15px 25px;
border-radius: 30px;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.2),
0 4px 15px rgba(212, 175, 55, 0.3);
backdrop-filter: blur(15px);
margin-bottom: 20px;
border: 2px solid rgba(212, 175, 55, 0.3);
}
.craft-badge.main i {
color: #D4AF37;
font-size: 1.4rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.craft-badge.main span {
color: #4E342E;
font-weight: 700;
font-size: 1rem;
font-family: 'Playfair Display', 'Georgia', serif;
letter-spacing: 0.3px;
}
/* Craft Steps */
.craft-steps {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.step-item {
background: rgba(255, 255, 255, 0.9);
padding: 10px 15px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 8px;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 3px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
transform: scale(0.9);
opacity: 0;
}
.about-image.premium:hover .step-item {
transform: scale(1);
opacity: 1;
}
.about-image.premium:hover .step-item:nth-child(1) {
transition-delay: 0.1s;
}
.about-image.premium:hover .step-item:nth-child(2) {
transition-delay: 0.2s;
}
.about-image.premium:hover .step-item:nth-child(3) {
transition-delay: 0.3s;
}
.step-item:hover {
background: rgba(255, 255, 255, 1);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.2),
inset 0 1px 4px rgba(255, 255, 255, 0.7);
border-color: rgba(212, 175, 55, 0.4);
transform: scale(1.05) translateY(-2px);
}
.step-item i {
color: #D4AF37;
font-size: 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.step-item span {
color: #4E342E;
font-weight: 600;
font-size: 0.8rem;
font-family: 'Georgia', serif;
letter-spacing: 0.2px;
white-space: nowrap;
}
.feature i {
color: var(--primary-color);
font-size: 1.5rem;
margin-top: 5px;
}
.feature h4 {
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
font-size: 1.1rem;
}
.feature p {
color: var(--text-secondary);
margin-bottom: 0;
font-size: 0.95rem;
}
.about-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 8px 30px rgba(139, 69, 19, 0.15);
transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid rgba(139, 69, 19, 0.1);
}
.about-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(1) saturate(1.1);
}
.about-image:hover {
transform: translateY(-8px);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.15),
0 12px 40px rgba(139, 69, 19, 0.2);
}
.about-image:hover img {
transform: scale(1.05);
filter: brightness(1.1) saturate(1.2);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-medium);
}
.about-image:hover .image-overlay {
opacity: 1;
}
.play-button {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-medium);
}
.play-button:hover {
transform: scale(1.1);
}
.play-button i {
color: var(--primary-color);
font-size: 2rem;
margin-left: 5px;
}
/* ===== MODERN LOCATIONS SECTION ===== */
.locations {
position: relative;
background: linear-gradient(135deg,
rgba(250, 240, 230, 0.95) 0%,
rgba(255, 255, 255, 0.98) 50%,
rgba(250, 240, 230, 0.95) 100%
);
padding: 80px 0;
overflow: hidden;
}
.locations::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(184, 134, 11, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.locations .container {
position: relative;
z-index: 10;
}
/* Premium Branches Container */
.premium-branches-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Premium Branch Card */
.premium-branch-card {
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(250, 250, 250, 0.95) 100%
);
border-radius: 20px;
padding: 20px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.08),
0 6px 20px rgba(218, 165, 32, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(218, 165, 32, 0.2);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
/* Card Glow Effect */
.card-glow {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.1) 0%,
rgba(184, 134, 11, 0.08) 50%,
rgba(218, 165, 32, 0.1) 100%
);
border-radius: 21px;
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
/* Card glow removed for cleaner design */
.premium-branch-card:hover {
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.05);
}
/* Premium Status Badge */
.branch-status-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 25px;
width: fit-content;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.branch-status-badge.open {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.2) 0%,
rgba(22, 163, 74, 0.15) 100%
);
color: #15803D;
border: 2px solid rgba(34, 197, 94, 0.4);
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
}
.branch-status-badge.coming-soon {
background: linear-gradient(135deg,
rgba(255, 193, 7, 0.2) 0%,
rgba(255, 152, 0, 0.15) 100%
);
color: #F57C00;
border: 2px solid rgba(255, 193, 7, 0.4);
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}
.status-pulse {
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.2);
}
}
/* Premium Branch Header */
.branch-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.branch-icon-container {
position: relative;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.15) 0%,
rgba(184, 134, 11, 0.2) 100%
);
border-radius: 18px;
border: 2px solid rgba(218, 165, 32, 0.3);
transition: all 0.4s ease;
}
.branch-icon-container i {
position: relative;
color: #DAA520;
font-size: 1.4rem;
z-index: 2;
transition: all 0.4s ease;
}
/* Icon hover effects removed for cleaner design */
.branch-title h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2D1B0E;
margin: 0 0 3px 0;
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
/* Title hover effects removed for cleaner design */
.branch-subtitle {
font-size: 0.9rem;
color: #666;
font-weight: 500;
margin: 0;
font-style: italic;
}
/* Premium Coming Soon Banner */
.coming-soon-banner {
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg,
rgba(255, 193, 7, 0.15) 0%,
rgba(255, 152, 0, 0.1) 100%
);
border: 2px solid rgba(255, 193, 7, 0.3);
border-radius: 20px;
padding: 15px 20px;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.banner-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #FFC107, #FF8F00);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
animation: bannerPulse 2s infinite;
}
.banner-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.banner-title {
font-weight: 700;
font-size: 1rem;
color: #F57C00;
}
.banner-subtitle {
font-weight: 500;
font-size: 0.85rem;
color: #FF8F00;
}
@keyframes bannerPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Premium Branch Content */
.branch-content {
display: flex;
flex-direction: column;
gap: 25px;
}
.info-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(250, 250, 250, 0.6) 100%
);
border-radius: 12px;
border: 1px solid rgba(218, 165, 32, 0.1);
transition: all 0.3s ease;
}
.info-item:hover {
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.03) 0%,
rgba(184, 134, 11, 0.02) 100%
);
border-color: rgba(218, 165, 32, 0.15);
transform: translateY(-1px);
}
.info-icon {
width: 28px;
height: 28px;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.1) 0%,
rgba(184, 134, 11, 0.15) 100%
);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #DAA520;
font-size: 0.9rem;
flex-shrink: 0;
border: 1px solid rgba(218, 165, 32, 0.2);
}
.info-text {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
}
.info-label {
font-size: 0.8rem;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-size: 0.95rem;
color: #333;
line-height: 1.4;
text-decoration: none;
transition: color 0.3s ease;
}
.info-value:hover {
color: #DAA520;
}
/* Premium Branch Actions */
.branch-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.premium-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
min-width: 110px;
justify-content: center;
}
.premium-btn.primary {
background: linear-gradient(135deg,
#DAA520 0%,
#B8860B 100%
);
color: white;
box-shadow: 0 6px 20px rgba(218, 165, 32, 0.3);
border: 2px solid transparent;
}
.premium-btn.primary:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.premium-btn.secondary {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(250, 250, 250, 0.9) 100%
);
color: #DAA520;
border: 2px solid rgba(218, 165, 32, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.premium-btn.secondary:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.premium-btn:active .btn-ripple {
width: 300px;
height: 300px;
}
/* Premium Services Section */
.premium-services-section {
margin-top: 40px;
text-align: center;
}
.services-header {
margin-bottom: 25px;
}
.services-header h3 {
font-size: 1.6rem;
font-weight: 700;
color: #2D1B0E;
margin-bottom: 8px;
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.services-header p {
font-size: 0.9rem;
color: #666;
font-style: italic;
}
.premium-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
max-width: 800px;
margin: 0 auto;
}
.service-card {
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(250, 250, 250, 0.8) 100%
);
border-radius: 15px;
padding: 15px;
border: 1px solid rgba(218, 165, 32, 0.15);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.05) 0%,
transparent 50%,
rgba(184, 134, 11, 0.05) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border-color: rgba(218, 165, 32, 0.3);
}
.service-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.15) 0%,
rgba(184, 134, 11, 0.2) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #DAA520;
font-size: 1.1rem;
margin: 0 auto 10px;
border: 2px solid rgba(218, 165, 32, 0.2);
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1);
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.25) 0%,
rgba(184, 134, 11, 0.3) 100%
);
border-color: rgba(218, 165, 32, 0.4);
}
.service-content h4 {
font-size: 1rem;
font-weight: 600;
color: #2D1B0E;
margin-bottom: 6px;
}
.service-content p {
font-size: 0.8rem;
color: #666;
line-height: 1.4;
margin: 0;
}
/* Premium Responsive Design */
@media (max-width: 1024px) {
.premium-branches-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.premium-branches-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.premium-branch-card {
padding: 18px;
}
.branch-title h3 {
font-size: 1.3rem;
}
.branch-actions {
flex-direction: column;
}
.premium-btn {
justify-content: center;
min-width: auto;
}
.premium-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.service-card {
padding: 12px;
}
}
@media (max-width: 480px) {
.locations {
padding: 60px 0;
}
.premium-branch-card {
padding: 20px;
}
.branch-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.branch-icon-container {
width: 50px;
height: 50px;
}
.branch-icon-container i {
font-size: 1.5rem;
}
.branch-title h3 {
font-size: 1.4rem;
}
.premium-services-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.services-header h3 {
font-size: 1.4rem;
}
}
/* Bağlıca Arka Plan Slideshow */
/* Bölüm ayırıcı çizgiler - DARALTILMIŞ */
.section-divider {
width: 40%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #d4af37 20%, #d4af37 80%, transparent 100%);
position: absolute;
z-index: 3;
box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.top-divider {
top: 0;
left: 0;
}
.bottom-divider {
bottom: 0;
left: 0;
}
/* Şubeler Arka Plan Slideshow */
.locations {
position: relative;
overflow: hidden;
}
.locations-background-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.15;
transition: opacity 0.8s ease-in-out;
}
.locations-background-slideshow .background-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.5s ease-in-out;
filter: blur(1px);
}
.locations-background-slideshow .background-slide.active {
opacity: 1;
}
.locations .container {
position: relative;
z-index: 2;
}
/* Şubeler bölümü yazı okunabilirliği */
.locations .section-header {
position: relative;
padding: 20px;
margin-bottom: 40px;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(250, 240, 230, 0.85) 50%,
rgba(255, 255, 255, 0.9) 100%
);
border-radius: 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(212, 175, 55, 0.15);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.locations .section-title {
background: linear-gradient(135deg,
#8B4513 0%,
#DAA520 50%,
#B8860B 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-sm);
position: relative;
display: inline-block;
font-weight: 800;
font-size: 3.2rem;
text-align: center;
line-height: 1.2;
}
.locations .section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #DAA520, #B8860B, #8B4513);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.3);
}
.locations .section-subtitle {
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.15),
0 1px 1px rgba(255, 255, 255, 0.8);
color: #B8860B;
font-weight: 500;
line-height: 1.6;
font-size: 1rem;
margin-top: 15px;
}
.locations::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat;
background-size: 60px 60px, 40px 40px, 20px 20px, 15px 15px;
background-position: 0 0, 20px 20px, 10px 10px, 5px 5px;
animation: authenticCardPattern 50s linear infinite;
pointer-events: none;
z-index: 1;
}
.locations .container {
position: relative;
z-index: 10;
}
.locations-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
width: 100%;
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
}
/* Responsive düzenlemeler */
@media (max-width: 1200px) {
.locations-grid {
gap: 20px;
}
.locations-grid .location-card {
padding: 35px;
min-width: 280px;
}
.locations-grid .location-info h3 {
font-size: 1.9rem;
}
.locations-grid .location-detail span {
font-size: 1.1rem;
}
.locations-grid .location-detail i {
font-size: 1.4rem;
width: 26px;
}
}
@media (max-width: 900px) {
.locations-grid {
flex-direction: column;
align-items: stretch;
gap: 25px;
}
.locations-grid .location-card {
flex: none;
width: 100%;
max-width: none;
min-width: auto;
padding: 30px;
}
.locations-grid .location-info h3 {
font-size: 1.8rem;
}
.locations-grid .location-detail span {
font-size: 1.05rem;
}
.locations-grid .location-detail i {
font-size: 1.3rem;
width: 24px;
}
.locations-grid .location-action {
margin-top: 20px;
gap: 12px;
}
.locations-grid .branch-detail-btn,
.locations-grid .location-link {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* ===== GENEL HİZMETLER NOTU ===== */
.general-services-note {
display: flex;
justify-content: center;
margin: 10px 0 5px 0;
padding: 0 20px;
}
.services-frame {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(250, 240, 230, 0.7) 100%);
border: 1px solid rgba(218, 165, 32, 0.15);
border-radius: 12px;
padding: 10px 20px;
box-shadow:
0 4px 12px rgba(139, 69, 19, 0.08),
0 1px 3px rgba(218, 165, 32, 0.1);
position: relative;
max-width: 650px;
width: 100%;
backdrop-filter: blur(10px);
}
.services-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
text-align: center;
line-height: 1.4;
}
.service-item {
font-size: 0.9rem;
font-weight: 500;
font-family: 'Cormorant Garamond', 'Georgia', serif;
color: #8B4513;
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 6px;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.service-item:hover {
color: #DAA520;
background: rgba(218, 165, 32, 0.08);
transform: translateY(-1px);
text-shadow: 0 2px 4px rgba(218, 165, 32, 0.2);
}
.service-divider {
color: #DAA520;
font-size: 0.8rem;
font-weight: 400;
margin: 0 6px;
opacity: 0.6;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.services-frame {
padding: 12px 18px;
margin: 0 15px;
border-radius: 10px;
}
.services-content {
gap: 8px;
}
.service-item {
font-size: 0.85rem;
padding: 3px 6px;
}
.service-divider {
margin: 0 4px;
font-size: 0.7rem;
}
}
/* Ana şube kartları - locations bölümü için */
.locations-grid .location-card {
background: transparent !important;
backdrop-filter: none !important;
padding: 40px;
border-radius: 24px;
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.1),
0 5px 18px rgba(139, 69, 19, 0.12);
transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 2px solid rgba(139, 69, 19, 0.2);
position: relative;
text-align: center;
flex: 1;
min-width: 300px;
max-width: none;
display: flex;
flex-direction: column;
}
/* Status Badge - Sol üst köşe */
.locations-grid .location-card .status-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
z-index: 10;
backdrop-filter: blur(8px);
border: 1px solid;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
/* Canlı nokta */
.status-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
animation: pulse 2s infinite;
flex-shrink: 0;
}
/* Açık durum - Yeşil */
.locations-grid .location-card .status-badge.open {
background: rgba(34, 197, 94, 0.12);
color: #15803D;
border-color: rgba(34, 197, 94, 0.3);
box-shadow:
0 4px 12px rgba(34, 197, 94, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.locations-grid .location-card .status-badge.open::before {
background: #22c55e;
box-shadow:
0 0 4px rgba(34, 197, 94, 0.6),
0 0 8px rgba(34, 197, 94, 0.3);
}
.locations-grid .location-card .status-badge.open:hover {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.4);
transform: scale(1.05);
}
/* Kapalı durum - Kırmızı */
.locations-grid .location-card .status-badge.closed {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
border-color: rgba(239, 68, 68, 0.3);
box-shadow:
0 4px 12px rgba(239, 68, 68, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Yakında Açılıyor durumu - Turuncu */
.locations-grid .location-card .status-badge.coming-soon {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(249, 115, 22, 0.15));
color: #ea580c;
border-color: rgba(251, 146, 60, 0.4);
box-shadow:
0 4px 12px rgba(251, 146, 60, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: coming-soon-pulse 2s infinite;
}
.locations-grid .location-card .status-badge.coming-soon::before {
background: linear-gradient(45deg, #f97316, #fb923c);
box-shadow:
0 0 6px rgba(251, 146, 60, 0.6),
0 0 12px rgba(251, 146, 60, 0.3);
animation: coming-soon-glow 2s infinite;
}
/* Elegant Coming Soon */
.elegant-coming-soon {
margin-top: 20px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(184, 134, 11, 0.08));
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 16px;
backdrop-filter: blur(15px);
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
position: relative;
overflow: hidden;
}
.elegant-coming-soon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: elegant-shine 3s infinite;
}
.elegant-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}
.elegant-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #d4af37, #b8860b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
animation: elegant-float 2s ease-in-out infinite;
}
.elegant-icon i {
font-size: 1rem;
color: white;
animation: elegant-spin 3s linear infinite;
}
.elegant-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.elegant-main {
font-size: 0.95rem;
font-weight: 600;
color: #b8860b;
letter-spacing: 0.3px;
}
.elegant-sub {
font-size: 0.8rem;
color: #8b7355;
font-weight: 400;
opacity: 0.9;
}
@keyframes coming-soon-pulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 4px 12px rgba(251, 146, 60, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.02);
box-shadow:
0 6px 16px rgba(251, 146, 60, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
@keyframes coming-soon-glow {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
@keyframes coming-soon-shimmer {
0% {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(249, 115, 22, 0.1));
}
50% {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(249, 115, 22, 0.15));
}
100% {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(249, 115, 22, 0.1));
}
}
@keyframes coming-soon-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes elegant-shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes elegant-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
@keyframes elegant-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.locations-grid .location-card .status-badge.closed::before {
background: #ef4444;
box-shadow:
0 0 4px rgba(239, 68, 68, 0.6),
0 0 8px rgba(239, 68, 68, 0.3);
animation: pulse-slow 3s infinite;
}
.locations-grid .location-card .status-badge.closed:hover {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.4);
transform: scale(1.05);
}
/* Pulse animasyonları */
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
@keyframes pulse-slow {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.05);
}
}
.location-card {
cursor: pointer;
position: relative;
overflow: hidden;
}
.location-card .status-badge,
.location-card .location-header,
.location-card .location-info,
.location-card .location-action {
position: relative;
z-index: 50;
}
.location-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.03) 0%,
rgba(139, 69, 19, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.location-card:hover {
transform: translateY(-8px) scale(1.015);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.15),
0 8px 25px rgba(139, 69, 19, 0.1),
0 0 0 1px rgba(218, 165, 32, 0.1);
border-color: rgba(139, 69, 19, 0.15);
}
.location-card:hover::before {
opacity: 1;
}
.location-card:active {
transform: translateY(-6px) scale(1.01);
transition: all 0.1s ease;
}
.location-info h3 {
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.5px;
}
.location-detail {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
}
.location-detail i {
color: #C9A558;
width: 28px;
text-align: center;
flex-shrink: 0;
margin-top: 4px;
font-size: 1.5rem;
}
.location-detail span {
color: var(--text-primary);
font-size: 1.15rem;
line-height: 1.6;
flex: 1;
font-weight: 500;
}
.location-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--primary-color);
font-weight: 600;
margin-top: var(--spacing-sm);
transition: var(--transition-fast);
}
.location-link:hover {
color: var(--primary-dark);
transform: translateX(5px);
}
/* Location action buttons */
.location-action {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 25px;
align-items: center;
}
.branch-detail-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #DAA520, #B8860B);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
}
.branch-detail-btn:hover {
background: linear-gradient(135deg, #B8860B, #DAA520);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(218, 165, 32, 0.4);
}
.location-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(218, 165, 32, 0.1);
color: #DAA520;
border: 2px solid rgba(218, 165, 32, 0.3);
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
}
.location-link:hover {
background: rgba(218, 165, 32, 0.2);
border-color: rgba(218, 165, 32, 0.5);
transform: translateY(-2px);
}
/* ===== FAQ SECTION ===== */
.faq {
padding: 100px 0;
background: linear-gradient(135deg,
#f8f9fa 0%,
#ffffff 25%,
#f5f5f5 50%,
#ffffff 75%,
#f8f9fa 100%
);
position: relative;
}
.faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
url('data:image/svg+xml,') repeat,
radial-gradient(circle at 20% 30%, rgba(218, 165, 32, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(184, 134, 11, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-item {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 249, 250, 0.9) 100%
);
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(218, 165, 32, 0.1);
overflow: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.faq-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
border-color: rgba(218, 165, 32, 0.2);
}
.faq-item.active {
border-color: #DAA520;
box-shadow: 0 15px 40px rgba(218, 165, 32, 0.15);
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background: transparent;
transition: all 0.3s ease;
}
.faq-question:hover {
background: linear-gradient(135deg,
rgba(218, 165, 32, 0.05) 0%,
rgba(218, 165, 32, 0.02) 100%
);
}
.faq-question h3 {
font-size: 1.3rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
padding-right: 20px;
font-family: var(--font-primary);
line-height: 1.4;
}
.faq-question i {
font-size: 1.2rem;
color: #DAA520;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
color: #B8860B;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(248, 249, 250, 0.6) 100%
);
}
.faq-item.active .faq-answer {
padding: 0 30px 25px 30px;
border-top: 1px solid rgba(218, 165, 32, 0.1);
}
.faq-answer p {
font-size: 1.1rem;
line-height: 1.7;
color: #555;
margin: 15px 0 0 0;
font-weight: 400;
}
/* FAQ Decorative Elements */
.faq-question::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, #DAA520, #B8860B);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.faq-item.active .faq-question::before {
opacity: 1;
}
/* Responsive FAQ */
@media (max-width: 768px) {
.faq {
padding: 60px 0;
}
.faq-container {
padding: 0 15px;
}
.faq-question {
padding: 20px 20px;
}
.faq-question h3 {
font-size: 1.1rem;
padding-right: 15px;
}
.faq-question i {
font-size: 1rem;
}
.faq-item.active .faq-answer {
padding: 0 20px 20px 20px;
}
.faq-answer p {
font-size: 1rem;
line-height: 1.6;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.faq-container {
padding: 0 30px;
}
}
/* FAQ Animation Enhancement */
.faq-item {
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* FAQ Icons for Different Questions */
.faq-question h3::before {
content: '❓';
margin-right: 10px;
font-size: 1rem;
opacity: 0.7;
}
.faq-item:nth-child(1) .faq-question h3::before { content: '🚚'; }
.faq-item:nth-child(2) .faq-question h3::before { content: '📅'; }
.faq-item:nth-child(3) .faq-question h3::before { content: '⏰'; }
.faq-item:nth-child(4) .faq-question h3::before { content: '🌿'; }
.faq-item:nth-child(5) .faq-question h3::before { content: '🕐'; }
.faq-item:nth-child(6) .faq-question h3::before { content: '🏢'; }
.faq-item:nth-child(7) .faq-question h3::before { content: '☕'; }
/* ===== ENHANCED CONTACT FEATURES ===== */
/* Background Animation */
.contact-background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
.floating-shape {
position: absolute;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), rgba(184, 134, 11, 0.05));
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}
.floating-shape.shape-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.floating-shape.shape-2 {
width: 120px;
height: 120px;
top: 20%;
right: 15%;
animation-delay: -5s;
}
.floating-shape.shape-3 {
width: 60px;
height: 60px;
bottom: 30%;
left: 20%;
animation-delay: -10s;
}
.floating-shape.shape-4 {
width: 100px;
height: 100px;
bottom: 15%;
right: 10%;
animation-delay: -15s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
25% {
transform: translateY(-20px) rotate(90deg);
opacity: 0.5;
}
50% {
transform: translateY(-40px) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translateY(-20px) rotate(270deg);
opacity: 0.5;
}
}
/* Section Badge */
.section-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #DAA520, #B8860B);
color: white;
padding: 12px 24px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
animation: pulse-badge 3s ease-in-out infinite;
}
.section-badge i {
font-size: 1rem;
}
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Contact Stats */
.contact-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(218, 165, 32, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-color: rgba(218, 165, 32, 0.2);
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #DAA520;
margin-bottom: 10px;
font-family: var(--font-primary);
}
.stat-label {
font-size: 1rem;
color: #6c757d;
font-weight: 500;
}
/* Enhanced Contact Cards */
.contact-description {
color: #6c757d;
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.5;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
margin-bottom: 15px;
}
.contact-link.primary {
background: linear-gradient(135deg, #DAA520, #B8860B);
color: white;
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
}
.contact-link.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(218, 165, 32, 0.4);
}
.contact-link.whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
color: white;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}
.contact-link.whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
}
.contact-link.instagram {
background: linear-gradient(135deg, #E4405F, #833AB4);
color: white;
box-shadow: 0 8px 20px rgba(228, 64, 95, 0.3);
}
.contact-link.instagram:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(228, 64, 95, 0.4);
}
.contact-link.email {
background: linear-gradient(135deg, #4285F4, #34A853);
color: white;
box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
}
.contact-link.email:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(66, 133, 244, 0.4);
}
.contact-availability {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.9rem;
color: #6c757d;
margin-top: 15px;
}
.contact-availability.online {
color: #28a745;
}
.contact-availability.online i {
color: #28a745;
animation: pulse-online 2s ease-in-out infinite;
}
@keyframes pulse-online {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.social-stats {
margin-top: 15px;
}
.social-stats .stat {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.9rem;
color: #6c757d;
}
/* Location Section */
.contact-location {
margin-top: 60px;
padding: 50px;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(218, 165, 32, 0.1);
}
.location-header {
text-align: center;
margin-bottom: 40px;
}
.location-header h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
font-family: var(--font-primary);
}
.location-header h3 i {
color: #DAA520;
font-size: 1.8rem;
}
.location-header p {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
}
.location-cards {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
/* Contact section location cards */
.location-cards .location-card {
display: flex;
align-items: flex-start;
gap: 25px;
padding: 30px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(218, 165, 32, 0.08);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Contact section location cards hover */
.location-cards .location-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-color: rgba(218, 165, 32, 0.15);
}
.location-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #DAA520, #B8860B);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
}
.location-info h4 {
font-size: 1.4rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
font-family: var(--font-primary);
}
.location-address {
display: flex;
align-items: flex-start;
gap: 10px;
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.location-address i {
color: #DAA520;
margin-top: 3px;
flex-shrink: 0;
}
.location-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.location-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.location-btn:not(.secondary) {
background: linear-gradient(135deg, #DAA520, #B8860B);
color: white;
box-shadow: 0 6px 15px rgba(218, 165, 32, 0.3);
}
.location-btn:not(.secondary):hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.4);
}
.location-btn.secondary {
background: #f8f9fa;
color: #6c757d;
border: 2px solid #e9ecef;
}
.location-btn.secondary:hover {
background: #e9ecef;
border-color: #DAA520;
color: #DAA520;
}
/* Quick Contact Actions */
.quick-contact-actions {
margin-top: 60px;
padding: 50px;
background: linear-gradient(135deg, #2c3e50, #34495e);
border-radius: 24px;
color: white;
position: relative;
overflow: hidden;
}
.quick-contact-actions::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(184, 134, 11, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.quick-action-header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.quick-action-header h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 15px;
font-family: var(--font-primary);
}
.quick-action-header p {
color: #bdc3c7;
font-size: 1.1rem;
line-height: 1.6;
}
.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
position: relative;
z-index: 1;
}
.quick-action-btn {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
text-decoration: none;
color: white;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
}
.quick-action-btn:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(218, 165, 32, 0.3);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.quick-action-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #DAA520, #B8860B);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
}
.quick-action-content h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 5px;
font-family: var(--font-primary);
}
.quick-action-content p {
color: #bdc3c7;
font-size: 0.9rem;
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.contact-info-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.location-card {
flex-direction: column;
text-align: center;
}
.location-actions {
justify-content: center;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 80px 0;
}
.contact-stats {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 40px;
}
.contact-info-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.contact-location,
.quick-contact-actions {
padding: 30px;
margin-top: 40px;
}
.quick-actions-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.quick-action-btn {
padding: 20px;
}
.location-header h3 {
font-size: 1.6rem;
}
.quick-action-header h3 {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.section-badge {
padding: 10px 20px;
font-size: 0.85rem;
}
.stat-number {
font-size: 2rem;
}
.contact-card {
padding: 40px 25px;
}
.contact-card-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.location-actions {
flex-direction: column;
}
.location-btn {
justify-content: center;
}
}
/* ===== MODERN FOOTER ===== */
.modern-footer {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
color: #ecf0f1;
position: relative;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(184, 134, 11, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.footer-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: #f8f9fa;
transform: translateY(-1px);
}
.footer-wave svg {
width: 100%;
height: 100%;
display: block;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 50px;
padding: 80px 0 50px;
position: relative;
z-index: 1;
}
/* Brand Section */
.footer-brand {
max-width: 350px;
}
.brand-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.logo-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #DAA520, #B8860B);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
box-shadow: 0 8px 20px rgba(218, 165, 32, 0.3);
position: relative;
overflow: hidden;
}
.logo-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);
border-radius: 16px;
}
.brand-text h3 {
font-size: 1.8rem;
font-weight: 700;
color: #DAA520;
margin: 0 0 5px 0;
font-family: var(--font-primary);
}
.brand-text span {
font-size: 0.9rem;
color: #bdc3c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.brand-description {
color: #bdc3c7;
line-height: 1.7;
margin-bottom: 30px;
font-size: 1rem;
}
.social-media {
display: flex;
gap: 15px;
}
.social-link {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: currentColor;
opacity: 0.1;
border-radius: 12px;
transition: opacity 0.3s ease;
}
.social-link:hover::before {
opacity: 0.2;
}
.social-link.facebook {
color: #3b5998;
border: 2px solid rgba(59, 89, 152, 0.3);
}
.social-link.instagram {
color: #e4405f;
border: 2px solid rgba(228, 64, 95, 0.3);
}
.social-link.whatsapp {
color: #25d366;
border: 2px solid rgba(37, 211, 102, 0.3);
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Footer Columns */
.footer-column h4 {
font-size: 1.3rem;
font-weight: 700;
color: #DAA520;
margin-bottom: 25px;
font-family: var(--font-primary);
position: relative;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #DAA520, #B8860B);
border-radius: 2px;
}
.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu li {
margin-bottom: 12px;
}
.footer-menu a {
color: #bdc3c7;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
}
.footer-menu a::before {
content: '▶';
font-size: 0.7rem;
color: #DAA520;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.footer-menu a:hover::before {
opacity: 1;
transform: translateX(0);
}
.footer-menu a:hover {
color: #DAA520;
transform: translateX(10px);
}
/* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.contact-item i {
width: 40px;
height: 40px;
background: rgba(218, 165, 32, 0.1);
border: 2px solid rgba(218, 165, 32, 0.3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #DAA520;
font-size: 1rem;
flex-shrink: 0;
margin-top: 2px;
}
.contact-details span {
display: block;
font-size: 0.85rem;
color: #95a5a6;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.contact-details a,
.contact-details p {
color: #bdc3c7;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
margin: 0;
line-height: 1.5;
transition: color 0.3s ease;
}
.contact-details a:hover {
color: #DAA520;
}
/* Working Hours */
.working-hours {
display: flex;
flex-direction: column;
gap: 15px;
}
.hours-item {
display: flex;
flex-direction: column;
gap: 5px;
padding: 15px;
background: rgba(218, 165, 32, 0.05);
border-radius: 12px;
border: 1px solid rgba(218, 165, 32, 0.1);
}
.hours-item .day {
font-size: 0.9rem;
color: #95a5a6;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hours-item .time {
font-size: 1.1rem;
font-weight: 600;
color: #DAA520;
}
.hours-special {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: rgba(218, 165, 32, 0.08);
border-radius: 10px;
border: 1px solid rgba(218, 165, 32, 0.2);
}
.hours-special i {
color: #DAA520;
font-size: 1rem;
}
.hours-special span {
font-size: 0.9rem;
color: #bdc3c7;
font-weight: 500;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(218, 165, 32, 0.2);
padding: 30px 0;
position: relative;
z-index: 1;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.copyright {
color: #95a5a6;
font-size: 0.95rem;
margin: 0;
}
.copyright strong {
color: #DAA520;
}
.footer-badges {
display: flex;
gap: 15px;
}
.badge {
padding: 8px 16px;
background: rgba(218, 165, 32, 0.1);
border: 1px solid rgba(218, 165, 32, 0.3);
border-radius: 20px;
font-size: 0.85rem;
color: #DAA520;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-brand {
grid-column: 1 / -1;
max-width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
padding: 60px 0 40px;
}
.footer-brand {
text-align: left;
margin-bottom: 0;
}
.brand-logo {
justify-content: flex-start;
}
.social-media {
justify-content: flex-start;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-badges {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer-main {
padding: 50px 0 30px;
}
.logo-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.brand-text h3 {
font-size: 1.5rem;
}
.footer-badges {
flex-direction: column;
align-items: center;
}
}
/* ===== GALLERY SECTION STYLES ===== */
.gallery {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.gallery .section-header {
text-align: center;
margin-bottom: 50px;
}
.gallery .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
}
.gallery .section-subtitle {
font-size: 1.1rem;
color: #6c757d;
max-width: 600px;
margin: 0 auto;
}
.gallery-filter {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
border: 2px solid #d4af37;
background: transparent;
color: #d4af37;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease-out;
font-size: 0.9rem;
white-space: nowrap;
}
.filter-btn:hover {
background: rgba(212, 175, 55, 0.1);
transform: translateY(-1px);
}
.filter-btn.active {
background: #d4af37;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.gallery-masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 40px;
}
.gallery-item {
break-inside: avoid;
margin-bottom: 16px;
}
.gallery-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease-out;
position: relative;
}
.gallery-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.gallery-image {
position: relative;
overflow: hidden;
aspect-ratio: 1;
}
.gallery-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-out, opacity 0.3s ease;
}
/* Lazy Loading Styles - Only for lazy images */
.lazy-image {
opacity: 0;
transition: opacity 0.3s ease;
}
.lazy-image.loaded {
opacity: 1;
}
.lazy-image.loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Ensure first two images are always visible */
.gallery-item:first-child img,
.gallery-item:nth-child(2) img {
opacity: 1 !important;
}
.gallery-card:hover .gallery-image img {
transform: scale(1.05);
transition: transform 0.2s ease-out;
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(207, 162, 75, 0.12) 100%);
color: #2c3e50;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transform: scale(1);
transition: all 0.2s ease-out;
}
.gallery-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease-out;
}
.gallery-card:hover .gallery-overlay {
opacity: 1;
transform: scale(1.02);
}
.gallery-overlay h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 8px;
color: #2c3e50;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}
.gallery-overlay p {
font-size: 0.95rem;
font-weight: 500;
color: #34495e;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
/* Gallery Responsive Design */
@media (max-width: 768px) {
.gallery-masonry {
grid-template-columns: 1fr;
gap: 12px;
}
.gallery {
padding: 60px 0;
}
.gallery .section-title {
font-size: 2rem;
}
.filter-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.gallery-masonry {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== GALLERY LIGHTBOX STYLES ===== */
.gallery-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-modal.show {
display: flex;
opacity: 1;
}
.gallery-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.gallery-modal-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
margin: auto;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.gallery-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.gallery-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.gallery-modal-image {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
min-height: 400px;
}
.gallery-modal-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.gallery-modal-info {
padding: 20px;
background: white;
border-top: 1px solid #e9ecef;
text-align: center;
}
.gallery-modal-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 8px;
}
.gallery-modal-info p {
font-size: 1rem;
color: #6c757d;
margin: 0;
}
.gallery-modal-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
pointer-events: none;
}
.gallery-nav-btn {
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
font-size: 1.2rem;
}
.gallery-nav-btn:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.gallery-nav-btn.prev {
left: 20px;
}
.gallery-nav-btn.next {
right: 20px;
}
/* Lightbox Responsive */
@media (max-width: 768px) {
.gallery-modal-content {
max-width: 95vw;
max-height: 95vh;
margin: 10px;
}
.gallery-modal-image {
min-height: 300px;
}
.gallery-modal-info {
padding: 15px;
}
.gallery-modal-info h3 {
font-size: 1.3rem;
}
.gallery-nav-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
}