/* Fortius Spa - Main Stylesheet */
/* Modern, responsive, WCAG 2.1 AA uyumlu */
/* ============================================
Reset & Base Styles
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-secondary);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-primary);
overflow-x: hidden;
}
/* ============================================
Typography
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 700;
line-height: 1.2;
color: var(--text-color);
margin-bottom: var(--spacing-sm);
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-3xl);
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-base);
}
p {
margin-bottom: var(--spacing-sm);
color: var(--text-color);
}
a {
color: var(--link-color);
text-decoration: none;
transition: color var(--transition-base);
}
a:hover {
color: var(--link-hover);
}
a:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* ============================================
Container & Layout
============================================ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.container-fluid {
width: 100%;
padding: 0 var(--spacing-md);
}
.section {
padding: var(--spacing-2xl) 0;
position: relative;
border-radius: 40px 40px 0 0;
margin-top: -40px;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05),
0 -5px 15px rgba(0, 0, 0, 0.03);
z-index: 0;
}
/* Hero'dan sonraki ilk section için özel stil - kum renginden devam */
.hero + .section {
margin-top: 0;
border-radius: 0;
box-shadow: none;
padding-top: var(--spacing-2xl);
}
.hero + .section::before {
display: none;
}
/* İlk section'ın üst kısmı kum renginde başlamalı */
.hero + .section.section-alt {
background: linear-gradient(180deg,
var(--bg-sand) 0%,
var(--bg-sand) 10%,
var(--bg-secondary) 100%
);
}
.hero + .section.section-sand {
background: var(--bg-sand);
}
.section::before {
content: '';
position: absolute;
top: -40px;
left: 0;
right: 0;
width: 100%;
height: 60px;
/* Beyazdan section rengine geçiş - yumuşak bombeli geçiş */
background: linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%, /* Beyaz - üst */
rgba(255, 255, 255, 0.98) 30%, /* Hafif şeffaf beyaz */
rgba(248, 249, 250, 0.95) 70%, /* Section rengine geçiş */
rgba(248, 249, 250, 1) 100% /* Section rengi - alt */
),
url('data:image/svg+xml,') no-repeat top;
background-size: 100% 100%, 100% 100%;
z-index: 1;
}
.section-alt {
background-color: var(--bg-secondary);
}
.section-sand {
background-color: var(--bg-sand);
}
.section-cream {
background-color: var(--bg-cream);
}
.section-alt::before {
background: linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.98) 30%,
rgba(248, 249, 250, 0.95) 70%,
rgba(248, 249, 250, 1) 100%
),
url('data:image/svg+xml,') no-repeat top;
background-size: 100% 100%, 100% 100%;
}
.section-sand::before {
/* Beyazdan plaj kumu rengine geçiş */
background: linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 20%,
rgba(255, 248, 231, 0.9) 50%,
rgba(245, 230, 211, 0.95) 80%,
rgba(245, 230, 211, 1) 100%
),
url('data:image/svg+xml,') no-repeat top;
background-size: 100% 100%, 100% 100%;
}
.section-cream::before {
/* Beyazdan krem rengine geçiş */
background: linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 20%,
rgba(255, 248, 231, 0.9) 50%,
rgba(255, 248, 231, 0.95) 80%,
rgba(255, 248, 231, 1) 100%
),
url('data:image/svg+xml,') no-repeat top;
background-size: 100% 100%, 100% 100%;
}
/* ============================================
Header & Navigation
============================================ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
/* Okyanus mavisi gradyan - altın logo için (yeşile çalmayan saf mavi) */
background: linear-gradient(135deg,
#0099CC 0%, /* Açık okyanus mavisi */
#0077BE 30%, /* Orta okyanus mavisi */
#004D99 60%, /* Koyu okyanus mavisi */
#003D7A 85%, /* Çok koyu okyanus mavisi */
#002D5C 100% /* En koyu okyanus mavisi */
);
backdrop-filter: blur(10px);
border-bottom: none;
z-index: var(--z-fixed);
transition: all var(--transition-base);
box-shadow: none;
overflow: visible;
padding-bottom: 12px;
/* Alt kısım bombeli - border-radius ile */
border-radius: 0 0 25px 25px;
}
/* Header::after kaldırıldı - bombeli geçiş yok */
.header.scrolled {
box-shadow: none;
background: linear-gradient(135deg,
#0077BE 0%, /* Okyanus mavisi */
#004D99 40%, /* Koyu okyanus mavisi */
#003D7A 80%, /* Çok koyu okyanus mavisi */
#002D5C 100% /* En koyu okyanus mavisi */
);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px var(--spacing-lg);
margin: 0 auto;
max-width: 1200px;
width: 100%;
gap: var(--spacing-md);
position: relative;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
position: relative;
z-index: 10;
}
.logo-image {
width: 140px;
height: auto;
max-height: 60px;
object-fit: contain;
display: block;
transition: transform var(--transition-base);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
position: relative;
z-index: 10;
}
.logo-image:hover {
transform: scale(1.05);
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.nav {
display: flex;
align-items: center;
gap: var(--spacing-md);
position: relative;
z-index: 10;
}
.nav-list {
display: flex;
list-style: none;
gap: var(--spacing-md);
align-items: center;
position: relative;
z-index: 10;
margin: 0;
padding: 0;
}
.nav-link {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
transition: all var(--transition-base);
position: relative;
z-index: 10;
display: block;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--secondary-color);
transition: width var(--transition-base);
}
.nav-link:hover {
color: var(--secondary-color);
background: rgba(255, 255, 255, 0.1);
}
.nav-link:hover::after {
width: 80%;
}
.nav-link.active {
color: var(--secondary-color);
}
.nav-link.active::after {
width: 80%;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
padding: var(--spacing-xs);
transition: color var(--transition-base);
}
.mobile-menu-toggle:hover {
color: var(--secondary-color);
}
/* ============================================
Dropdown Menu
============================================ */
.nav-item-dropdown {
position: relative;
}
.nav-link-dropdown {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-link-dropdown i {
font-size: 0.7rem;
transition: transform var(--transition-base);
}
.nav-item-dropdown:hover .nav-link-dropdown i {
transform: rotate(180deg);
}
/* Desktop Dropdown Menu */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.5rem;
min-width: 250px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-md);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
list-style: none;
padding: 0.5rem 0;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: var(--z-dropdown);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-item-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-link {
display: block;
padding: 0.75rem 1.5rem;
color: var(--text-color);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all var(--transition-base);
text-transform: none;
letter-spacing: 0;
position: relative;
}
.dropdown-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--secondary-color);
transform: scaleY(0);
transition: transform var(--transition-base);
}
.dropdown-link:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--secondary-color);
padding-left: 2rem;
}
.dropdown-link:hover::before {
transform: scaleY(1);
}
/* Mobil menü kapatma butonu - masaüstünde gizli, sadece mobilde görünür */
.mobile-menu-close {
display: none !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
@media (max-width: 767px) {
.mobile-menu-close {
display: flex !important;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
}
/* ============================================
Hero Section
============================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF; /* Beyaz arkaplan */
color: var(--text-color);
text-align: center;
overflow: hidden;
/* Köşeler yok - bombeli geçiş */
border-radius: 0;
margin-bottom: 0;
z-index: 1;
}
/* Hero section alt kısmı bombeli geçiş */
.hero::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 100%;
height: 80px;
/* Bombeli alt geçiş - kum rengine */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 4;
pointer-events: none;
}
/* Hero Image Wrapper - Resim ortada net, kenarlarda bulanık ve kum rengine geçiş */
.hero-image-wrapper {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-sand); /* Kum rengi arkaplan */
}
/* Resim base stilleri */
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
animation: fadeIn 1s ease-out;
}
/* Net resim - ortada belirgin */
.hero-image-sharp {
z-index: 1;
filter: blur(0px);
/* Radyal mask - ortada net, kenarlarda şeffaf */
mask-image: radial-gradient(ellipse 65% 65% at center,
black 0%,
black 50%,
rgba(0, 0, 0, 0.95) 60%,
rgba(0, 0, 0, 0.7) 70%,
rgba(0, 0, 0, 0.3) 80%,
transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 65% 65% at center,
black 0%,
black 50%,
rgba(0, 0, 0, 0.95) 60%,
rgba(0, 0, 0, 0.7) 70%,
rgba(0, 0, 0, 0.3) 80%,
transparent 100%);
}
/* Blur resim - kenarlarda bulanık */
.hero-image-blur {
z-index: 2;
filter: blur(40px);
-webkit-filter: blur(40px);
/* Radyal mask - ortada şeffaf, kenarlarda görünür */
mask-image: radial-gradient(ellipse 70% 70% at center,
transparent 0%,
transparent 50%,
rgba(0, 0, 0, 0.2) 60%,
rgba(0, 0, 0, 0.5) 70%,
rgba(0, 0, 0, 0.8) 80%,
rgba(0, 0, 0, 0.95) 90%,
black 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at center,
transparent 0%,
transparent 50%,
rgba(0, 0, 0, 0.2) 60%,
rgba(0, 0, 0, 0.5) 70%,
rgba(0, 0, 0, 0.8) 80%,
rgba(0, 0, 0, 0.95) 90%,
black 100%);
}
/* Kum rengine geçiş overlay */
.hero-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Kenarlara doğru kum rengine geçiş - radial gradient */
background: radial-gradient(ellipse 80% 80% at center,
transparent 0%,
transparent 50%,
rgba(245, 230, 211, 0.2) 65%,
rgba(245, 230, 211, 0.5) 75%,
rgba(245, 230, 211, 0.8) 85%,
rgba(245, 230, 211, 0.95) 92%,
rgba(245, 230, 211, 1) 100%);
z-index: 3;
pointer-events: none;
}
/* Hero Text Overlay - SPA & Wellness Çeşme - Masaüstü */
.hero-text-overlay {
position: absolute;
bottom: 150px; /* Alt taraftan konumlandırma */
right: 60px; /* Sağa yaslı */
z-index: 5;
text-align: right;
pointer-events: none;
animation: fadeInUp 1.2s ease-out 0.3s both;
display: flex;
flex-direction: column;
align-items: flex-end; /* Sağa yaslı */
}
.hero-subtitle {
font-family: 'Great Vibes', 'Allura', cursive;
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 400;
color: #ffffff;
margin: 0;
line-height: 1.2;
text-transform: none;
white-space: normal;
display: inline-flex;
align-items: baseline;
gap: 0.05em;
transform: rotate(-15deg); /* Yukarı doğru açılı */
transform-origin: right bottom; /* Sağa yaslı için sağ alt köşe */
margin-bottom: 5px;
}
/* Mobilde el yazısı fontu ve açılı görünüm */
@media (max-width: 768px) {
.hero-subtitle {
font-family: 'Dancing Script', cursive;
font-weight: 600;
text-transform: none; /* El yazısı için uppercase kaldırıldı */
transform: rotate(-15deg); /* Yukarı doğru açılı (15 derece) */
transform-origin: left bottom;
}
}
.hero-char {
display: inline-block;
text-shadow:
0 4px 20px rgba(0, 0, 0, 0.5),
0 2px 10px rgba(0, 0, 0, 0.7),
0 1px 3px rgba(0, 0, 0, 0.9);
letter-spacing: 0.1em;
/* Grafik efekti - her harf farklı yükseklikte (dalga şeklinde) */
animation: waveUp 1.2s ease-out calc(0.3s + var(--i) * 0.05s) both;
/* Başlangıç durumu - animasyon başlamadan önce */
opacity: 0;
}
/* Her harfe özel yükseklik değerleri - dalga efekti (yukarı doğru yükselen grafik) */
/* Masaüstünde rotate ile birlikte kullanılacak */
.hero-char:nth-child(1) { transform: translateY(-15px); } /* S */
.hero-char:nth-child(2) { transform: translateY(-8px); } /* P */
.hero-char:nth-child(3) { transform: translateY(-2px); } /* A */
.hero-char:nth-child(4) { transform: translateY(0px); } /* & */
.hero-char:nth-child(5) { transform: translateY(-5px); } /* W */
.hero-char:nth-child(6) { transform: translateY(-12px); } /* e */
.hero-char:nth-child(7) { transform: translateY(-18px); } /* l */
.hero-char:nth-child(8) { transform: translateY(-20px); } /* l */
.hero-char:nth-child(9) { transform: translateY(-18px); } /* n */
.hero-char:nth-child(10) { transform: translateY(-12px); } /* e */
.hero-char:nth-child(11) { transform: translateY(-5px); } /* s */
.hero-char:nth-child(12) { transform: translateY(0px); } /* s */
/* Masaüstünde Çeşme yazısı - Great Vibes font, düz, WELLNESS'ın tam altında, sağa yaslı */
.hero-location-ellipse {
display: inline-block;
transform: rotate(-15deg); /* Wellness yazısıyla aynı açı */
transform-origin: right center; /* Sağa yaslı için sağ orta */
margin-top: 5px;
align-self: flex-end; /* Sağa yaslı */
}
.hero-location-text {
font-family: 'Great Vibes', 'Allura', cursive;
font-size: clamp(2.5rem, 8vw, 5rem); /* Spa & Wellness ile aynı font boyutu */
font-weight: 400;
color: #ffffff;
letter-spacing: 0.15em;
text-transform: none;
display: inline-block;
text-shadow:
0 4px 20px rgba(0, 0, 0, 0.5),
0 2px 10px rgba(0, 0, 0, 0.7),
0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Grafik dalga animasyonu - sadece opacity, transform harflerin kendi stillerinde kalacak */
@keyframes waveUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes waveUpS { 100% { transform: translateY(-15px) scale(1); } }
@keyframes waveUpP { 100% { transform: translateY(-8px) scale(1); } }
@keyframes waveUpA { 100% { transform: translateY(-2px) scale(1); } }
@keyframes waveUpAmp { 100% { transform: translateY(0px) scale(1); } }
@keyframes waveUpW { 100% { transform: translateY(-5px) scale(1); } }
@keyframes waveUpe { 100% { transform: translateY(-12px) scale(1); } }
@keyframes waveUpl1 { 100% { transform: translateY(-18px) scale(1); } }
@keyframes waveUpl2 { 100% { transform: translateY(-20px) scale(1); } }
@keyframes waveUpn { 100% { transform: translateY(-18px) scale(1); } }
@keyframes waveUpe2 { 100% { transform: translateY(-12px) scale(1); } }
@keyframes waveUps1 { 100% { transform: translateY(-5px) scale(1); } }
@keyframes waveUps2 { 100% { transform: translateY(0px) scale(1); } }
/* ============================================
About Section
============================================ */
.about-section {
position: relative;
padding: var(--spacing-3xl) 0 calc(var(--spacing-3xl) + 120px);
background: linear-gradient(180deg,
#F5E6D3 0%, /* Plaj kumu - üst (hero'dan gelen dalga ile birleşiyor) */
#FFF8E7 10%, /* Açık krem */
#FFFFFF 30%, /* Beyaz */
#FFFFFF 100% /* Beyaz - alt */
);
overflow: hidden;
margin-bottom: 0;
}
/* About section üstü - hero'dan gelen dalga ile uyumlu (hero zaten kum rengine geçiyor, about da kum renginden başlıyor) */
.about-section::before {
display: none; /* Hero zaten kum rengine geçiyor, about da kum renginden başlıyor, ekstra dalga gerek yok */
}
/* About section altında dalga geçişi - Features'a (Deniz dalgası gibi) */
.about-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - beyazdan features'ın kum rengine */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.about-section .container {
position: relative;
z-index: 10;
max-width: 900px;
margin: 0 auto;
padding: 0 var(--spacing-lg) 80px;
margin-bottom: 0;
}
.about-title {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--primary-dark);
text-align: center;
margin-bottom: var(--spacing-xl);
letter-spacing: -0.5px;
line-height: 1.2;
position: relative;
padding-bottom: var(--spacing-md);
}
.about-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg,
transparent,
var(--primary-color),
transparent
);
border-radius: 2px;
}
.about-content {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.about-description {
font-family: var(--font-secondary);
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.9;
color: var(--text-color);
text-align: center;
max-width: 100%;
margin: 0 auto;
font-weight: 400;
letter-spacing: 0.3px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.about-description:nth-child(1) {
animation-delay: 0.2s;
}
.about-description:nth-child(2) {
animation-delay: 0.4s;
}
.about-description:nth-child(3) {
animation-delay: 0.6s;
}
/* ============================================
Gallery Section
============================================ */
.gallery-section {
position: relative;
padding-top: calc(var(--spacing-3xl) + 120px);
padding-bottom: calc(var(--spacing-3xl) + 120px);
padding-left: 0;
padding-right: 0;
background: linear-gradient(180deg,
#F5E6D3 0%, /* Plaj kumu - üst (Features'tan gelen kum dalga üzerinde) */
#FFF8E7 15%, /* Açık krem */
#FFF8E7 50%, /* Açık krem */
#FFF8E7 85%, /* Açık krem */
#F5E6D3 100% /* Plaj kumu - alt */
);
overflow: hidden;
margin-bottom: 0;
}
.gallery-section::before {
display: none;
}
/* Gallery section altında dalga geçişi - Why Choose'a */
.gallery-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - kum renginden beyaza */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.gallery-section .container {
position: relative;
z-index: 10;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-lg) 80px;
margin-bottom: 0;
}
.gallery-title {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--primary-dark);
text-align: center;
margin-bottom: var(--spacing-2xl);
letter-spacing: -0.5px;
line-height: 1.2;
position: relative;
padding-bottom: var(--spacing-md);
}
.gallery-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg,
transparent,
var(--primary-color),
transparent
);
border-radius: 2px;
}
/* ============================================
Features Section (Ayrıcalıklarınız)
============================================ */
.features-section {
position: relative;
padding: calc(var(--spacing-3xl) + 120px) 0 calc(var(--spacing-3xl) + 120px);
background: linear-gradient(180deg,
#FFFFFF 0%, /* Beyaz - üst (About'tan gelen beyaz dalga üzerinde) */
#FFF8E7 15%, /* Açık krem */
#FFF8E7 50%, /* Açık krem */
#FFF8E7 85%, /* Açık krem */
#F5E6D3 100% /* Plaj kumu - alt */
);
overflow: hidden;
margin-bottom: 0;
}
.features-section::before {
display: none;
}
.features-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - kum renginden Gallery'ye */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.features-section .container {
position: relative;
z-index: 10;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-lg) 80px;
margin-bottom: 0;
}
.features-title {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--primary-dark);
text-align: center;
margin-bottom: var(--spacing-3xl);
letter-spacing: -0.5px;
line-height: 1.2;
position: relative;
padding-bottom: var(--spacing-md);
}
.features-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg,
transparent,
var(--primary-color),
transparent
);
border-radius: 2px;
}
/* ============================================
Featured Gallery Items
============================================ */
.featured-gallery {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl);
}
.featured-item {
display: flex;
align-items: center;
gap: var(--spacing-2xl);
background: transparent;
border-radius: 24px;
padding: var(--spacing-xl);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible;
}
.featured-item:hover {
transform: translateY(-4px);
}
.featured-item-reverse {
flex-direction: row-reverse;
}
.featured-image-wrapper {
flex: 0 0 50%;
max-width: 50%;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
aspect-ratio: 4 / 3;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Farklı geometrik şekiller */
.featured-item:nth-child(1) .featured-image-wrapper {
border-radius: 40px 10px 40px 10px; /* Asimetrik yuvarlatma */
}
.featured-item:nth-child(2) .featured-image-wrapper {
clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%); /* Paralel kenar */
}
.featured-item:nth-child(3) .featured-image-wrapper {
border-radius: 50% 50% 10px 10px; /* Yarım daire üst */
}
.featured-item:nth-child(4) .featured-image-wrapper {
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); /* Eğik trapez */
}
/* Mobilde tıklanabilir cursor */
@media (max-width: 767px) {
.featured-image-wrapper {
cursor: pointer;
}
}
.featured-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.featured-item:hover .featured-image {
transform: scale(1.05);
}
.featured-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--spacing-md);
}
.featured-title {
font-family: var(--font-primary);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: var(--spacing-md);
letter-spacing: -0.5px;
line-height: 1.3;
}
.featured-description {
font-family: var(--font-secondary);
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.8;
color: var(--text-color);
font-weight: 400;
letter-spacing: 0.2px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
@media (max-width: 767px) {
.gallery-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-xl);
}
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 4 / 3;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--bg-sand);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }
.gallery-item:nth-child(7) { animation-delay: 0.7s; }
.gallery-item:nth-child(8) { animation-delay: 0.8s; }
.gallery-item:nth-child(9) { animation-delay: 0.9s; }
.gallery-item:nth-child(10) { animation-delay: 1s; }
.gallery-item:nth-child(11) { animation-delay: 1.1s; }
.gallery-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.6) 50%,
transparent 100%
);
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
.gallery-caption {
color: white;
font-family: var(--font-secondary);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
display: block;
}
/* ============================================
Lightbox
============================================ */
.lightbox {
display: none !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 10000;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
align-items: center;
justify-content: center;
}
.lightbox.active {
display: flex !important;
}
.lightbox-content {
position: relative;
width: 90%;
max-width: 1200px;
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: lightboxFadeIn 0.3s ease;
}
@keyframes lightboxFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.lightbox-caption {
color: white;
font-family: var(--font-secondary);
font-size: 1.25rem;
font-weight: 500;
text-align: center;
margin-top: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 8px;
letter-spacing: 0.5px;
}
.lightbox-counter {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-secondary);
font-size: 0.9rem;
text-align: center;
margin-top: var(--spacing-xs);
letter-spacing: 0.5px;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
font-size: 28px;
font-weight: 300;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg) scale(1.1);
}
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
font-size: 36px;
font-weight: 300;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
user-select: none;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%) scale(1.1);
}
.lightbox-prev:active,
.lightbox-next:active {
transform: translateY(-50%) scale(0.95);
}
@media (max-width: 767px) {
.lightbox-content {
width: 95%;
height: 95vh;
}
.lightbox-image {
max-height: 80vh;
}
.lightbox-close {
top: 10px;
right: 10px;
width: 44px;
height: 44px;
font-size: 24px;
}
.lightbox-prev,
.lightbox-next {
width: 50px;
height: 50px;
font-size: 28px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
.lightbox-caption {
font-size: 1rem;
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ============================================
Why Choose Us Section
============================================ */
.why-choose-section {
position: relative;
padding-top: calc(var(--spacing-3xl) + 120px);
padding-bottom: calc(var(--spacing-3xl) + 120px);
padding-left: 0;
padding-right: 0;
background: linear-gradient(180deg,
#FFFFFF 0%, /* Beyaz - üst (Gallery'den gelen beyaz dalga üzerinde) */
#FFF8E7 15%, /* Açık krem */
#FFF8E7 50%, /* Açık krem */
#FFF8E7 85%, /* Açık krem */
#F5E6D3 100% /* Plaj kumu - alt */
);
overflow: hidden;
margin-bottom: 0;
}
.why-choose-section::before {
display: none;
}
/* Why Choose section altında dalga geçişi - Footer'a */
.why-choose-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - kum renginden footer'a */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.why-choose-section .container {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg) 80px;
margin-bottom: 0;
}
.why-choose-title {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--primary-dark);
text-align: center;
margin-bottom: var(--spacing-2xl);
letter-spacing: -0.5px;
line-height: 1.2;
position: relative;
padding-bottom: var(--spacing-md);
}
.why-choose-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg,
transparent,
var(--primary-color),
transparent
);
border-radius: 2px;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.why-choose-item {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
padding: var(--spacing-xl);
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.why-choose-item:nth-child(1) { animation-delay: 0.1s; }
.why-choose-item:nth-child(2) { animation-delay: 0.2s; }
.why-choose-item:nth-child(3) { animation-delay: 0.3s; }
.why-choose-item:nth-child(4) { animation-delay: 0.4s; }
.why-choose-item:nth-child(5) { animation-delay: 0.5s; }
.why-choose-item:nth-child(6) { animation-delay: 0.6s; }
.why-choose-item:hover {
transform: translateY(-8px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.why-choose-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 119, 190, 0.85) 0%,
rgba(0, 77, 153, 0.9) 100%
);
z-index: 1;
transition: opacity 0.4s ease;
}
.why-choose-item:hover .why-choose-overlay {
opacity: 0.75;
}
.why-choose-item-title,
.why-choose-description {
position: relative;
z-index: 2;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.why-choose-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 119, 190, 0.5) 0%,
rgba(0, 77, 153, 0.6) 100%
);
z-index: 1;
transition: opacity 0.4s ease;
}
.why-choose-item:hover .why-choose-overlay {
opacity: 0.4;
}
.why-choose-item-title,
.why-choose-description {
position: relative;
z-index: 2;
color: #ffffff;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.why-choose-item-title {
font-family: var(--font-primary);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
letter-spacing: -0.3px;
}
.why-choose-description {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.7;
font-weight: 400;
}
/* ============================================
Buttons
============================================ */
.btn {
display: inline-block;
padding: 0.875rem 2rem;
font-size: var(--font-size-base);
font-weight: 600;
text-align: center;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
font-family: var(--font-secondary);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn-primary {
/* Deniz mavisi gradient - deniz teması */
background: linear-gradient(135deg, #008B8B 0%, #20B2AA 50%, #00CED1 100%);
color: white;
box-shadow: 0 8px 25px rgba(0, 139, 139, 0.35),
0 4px 12px rgba(0, 206, 209, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 50px;
}
.btn-primary:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, #20B2AA 0%, #00CED1 50%, #40E0D0 100%);
box-shadow: 0 12px 35px rgba(0, 139, 139, 0.45),
0 6px 18px rgba(0, 206, 209, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, var(--btn-secondary) 0%, var(--btn-secondary-hover) 100%);
color: var(--text-color);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35),
0 4px 12px rgba(212, 175, 55, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-radius: 50px;
}
.btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.45),
0 6px 18px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-outline {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 50px;
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--primary-color);
border-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3),
0 6px 18px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-lg {
padding: 1.125rem 2.5rem;
font-size: var(--font-size-lg);
}
.btn-sm {
padding: 0.625rem 1.5rem;
font-size: var(--font-size-sm);
}
/* ============================================
Cards
============================================ */
.card {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 25px;
padding: var(--spacing-lg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all var(--transition-base);
height: 100%;
overflow: hidden;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12),
0 8px 20px rgba(0, 0, 0, 0.08),
0 0 0 1px var(--border-accent),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
border-color: var(--border-accent);
}
.card-header {
margin-bottom: var(--spacing-md);
}
.card-title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-xs);
color: var(--text-color);
}
.card-body {
color: var(--text-muted);
}
.card-footer {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-light);
}
/* ============================================
Grid System
============================================ */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--spacing-sm));
}
.col {
flex: 1;
padding: 0 var(--spacing-sm);
}
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
/* ============================================
Forms
============================================ */
.form-group {
margin-bottom: var(--spacing-md);
}
.form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
color: var(--text-color);
}
.form-control {
width: 100%;
padding: 0.875rem 1rem;
font-size: var(--font-size-base);
font-family: var(--font-secondary);
color: var(--text-color);
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 139, 139, 0.15);
}
.form-control::placeholder {
color: var(--text-light);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* ============================================
Footer
============================================ */
.footer {
position: relative;
background: linear-gradient(180deg,
#F5E6D3 0%, /* Plaj kumu - üst */
#E8D5C4 15%, /* Açık kum */
#D4C4B0 30%, /* Orta kum */
#B2EBF2 50%, /* Açık deniz mavisi */
#80DEEA 65%, /* Orta deniz mavisi */
#4DD0E1 80%, /* Koyu deniz mavisi */
#26C6DA 90%, /* Daha koyu mavi */
#00BCD4 100% /* En koyu deniz mavisi - alt */
);
color: var(--text-color);
padding: var(--spacing-2xl) 0 var(--spacing-md);
margin-top: 0;
overflow: hidden;
}
/* Footer üst kısmı - Why Choose'dan gelen dalga ile uyumlu (Why Choose zaten kum rengine geçiyor, Footer da kum renginden başlıyor) */
.footer::before {
display: none; /* Why Choose zaten kum rengine geçiyor, Footer da kum renginden başlıyor, ekstra dalga gerek yok */
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
position: relative;
z-index: 2;
}
.footer-logo {
margin-bottom: var(--spacing-md);
}
.footer-logo-image {
width: 200px;
height: auto;
max-height: 90px;
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}
.footer-section h4 {
color: var(--text-color);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-xl);
font-weight: 600;
}
.footer-link {
color: var(--primary-color);
display: block;
margin-bottom: var(--spacing-xs);
transition: color var(--transition-base);
text-decoration: none;
}
.footer-link:hover {
color: var(--primary-dark);
}
.footer-bottom {
text-align: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(0, 0, 0, 0.1);
color: var(--text-muted);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
}
.social-links {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
align-items: center;
}
.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-md);
color: var(--primary-color);
transition: all var(--transition-base);
text-decoration: none;
font-size: 1.2rem;
}
.social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.social-link i {
display: inline-block;
}
/* ============================================
Utilities
============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* ============================================
Scroll to Top Button
============================================ */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 15px var(--shadow-ocean);
transition: all var(--transition-base);
z-index: var(--z-fixed);
}
.scroll-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px var(--shadow-ocean);
}
.scroll-to-top.visible {
display: flex;
}
/* ============================================
Responsive Design
============================================ */
@media (max-width: 1023px) {
.col-3 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 767px) {
/* Mobilde logo kompakt */
.logo-image {
width: 110px;
max-height: 45px;
}
.logo {
padding: 2px 0;
}
.header {
padding-bottom: 8px;
border-radius: 0 0 20px 20px;
}
.header-container {
padding: 3px var(--spacing-md);
}
/* Mobilde hakkımızda bölümü */
.about-section {
padding: calc(var(--spacing-2xl) - 120px) 0 calc(var(--spacing-2xl) + 60px);
margin-bottom: 0;
overflow: hidden;
}
.about-section .container {
padding: 0 var(--spacing-md);
}
.about-title {
font-size: 2.25rem;
margin-bottom: var(--spacing-lg);
}
.about-content {
gap: var(--spacing-md);
}
.about-description {
font-size: 1rem;
line-height: 1.85;
text-align: justify;
text-justify: inter-word;
}
/* Mobilde Ayrıcalıklarınız bölümü */
.features-section {
padding: calc(var(--spacing-2xl) + 80px - 120px) 0 calc(var(--spacing-2xl) + 80px);
margin-bottom: 0;
overflow: hidden;
}
.features-section::before {
height: 80px;
top: 0;
}
.features-section::after {
height: 80px;
bottom: 0;
}
.features-section .container {
padding: 0 var(--spacing-md);
max-width: 100%;
}
.features-title {
font-size: 2.25rem;
margin-bottom: var(--spacing-xl);
}
/* Mobilde galeri bölümü */
.gallery-section {
padding-top: calc(var(--spacing-2xl) + 80px - 120px);
padding-bottom: calc(var(--spacing-2xl) + 80px);
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
overflow: hidden;
}
.gallery-section::after {
height: 80px;
bottom: 0;
}
.gallery-section .container {
padding: 0 var(--spacing-md);
}
.gallery-title {
font-size: 2.25rem;
margin-bottom: var(--spacing-lg);
}
/* Mobilde Featured Gallery */
.featured-gallery {
gap: var(--spacing-2xl);
}
.featured-item {
flex-direction: column !important;
padding: 0;
gap: var(--spacing-md);
background: transparent;
}
.featured-item-reverse {
flex-direction: column !important;
}
.featured-image-wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100%;
aspect-ratio: 16 / 9;
}
/* Mobilde de geometrik şekiller */
.featured-item:nth-child(1) .featured-image-wrapper {
border-radius: 30px 10px 30px 10px;
clip-path: none;
}
.featured-item:nth-child(2) .featured-image-wrapper {
clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%);
}
.featured-item:nth-child(3) .featured-image-wrapper {
border-radius: 40% 40% 10px 10px;
clip-path: none;
}
.featured-item:nth-child(4) .featured-image-wrapper {
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}
.featured-content {
padding: 0 var(--spacing-md);
text-align: center;
}
.featured-title {
font-size: 1.5rem;
margin-bottom: var(--spacing-sm);
text-align: center;
}
.featured-description {
font-size: 0.95rem;
line-height: 1.7;
text-align: justify;
text-justify: inter-word;
}
.gallery-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-xl) !important;
margin-top: var(--spacing-lg);
}
.gallery-item {
aspect-ratio: 4 / 3 !important;
border-radius: 20px;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
}
/* Mobilde Neden Bizi Tercih Etmelisiniz bölümü */
.why-choose-section {
padding-top: calc(var(--spacing-2xl) + 60px - 120px);
padding-bottom: calc(var(--spacing-2xl) + 60px);
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
overflow: hidden;
}
.why-choose-section .container {
padding: 0 var(--spacing-md);
}
.why-choose-title {
font-size: 2.25rem;
margin-bottom: var(--spacing-lg);
}
.why-choose-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.why-choose-item {
padding: var(--spacing-lg);
min-height: 250px;
}
.why-choose-item-title {
font-size: 1.5rem;
}
.why-choose-description {
font-size: 0.95rem;
line-height: 1.6;
}
/* Mobilde dalga yükseklikleri */
.about-section::after {
height: 80px;
bottom: 0;
}
.gallery-section::after {
height: 80px;
bottom: 0;
}
.why-choose-section::after {
height: 80px;
bottom: 0;
}
/* Mobilde footer */
.footer-logo-image {
width: 160px;
max-height: 70px;
}
.footer-bottom {
flex-direction: column;
gap: var(--spacing-sm);
}
.social-links {
margin-top: var(--spacing-xs);
}
.hero {
/* Köşeler yok - bombeli geçiş */
border-radius: 0;
margin-bottom: 0;
min-height: auto;
}
/* Hero bombeli alt geçiş mobilde */
.hero::after {
height: 60px;
}
.hero-image-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 0;
position: relative;
}
/* Mobilde resim sol taraftan hizalı, tam genişlikte */
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
position: absolute;
top: 0;
left: 0;
display: block;
}
/* Mobilde sol taraftan hizalı, şık görünüm */
.hero-image-sharp {
position: absolute;
mask-image: radial-gradient(ellipse 70% 70% at 30% center,
black 0%,
black 48%,
rgba(0, 0, 0, 0.95) 58%,
rgba(0, 0, 0, 0.75) 68%,
rgba(0, 0, 0, 0.4) 78%,
rgba(0, 0, 0, 0.1) 88%,
transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% center,
black 0%,
black 48%,
rgba(0, 0, 0, 0.95) 58%,
rgba(0, 0, 0, 0.75) 68%,
rgba(0, 0, 0, 0.4) 78%,
rgba(0, 0, 0, 0.1) 88%,
transparent 100%);
}
.hero-image-blur {
position: absolute;
filter: blur(35px);
-webkit-filter: blur(35px);
mask-image: radial-gradient(ellipse 75% 75% at 30% center,
transparent 0%,
transparent 48%,
rgba(0, 0, 0, 0.25) 60%,
rgba(0, 0, 0, 0.55) 70%,
rgba(0, 0, 0, 0.8) 82%,
rgba(0, 0, 0, 0.92) 90%,
black 100%);
-webkit-mask-image: radial-gradient(ellipse 75% 75% at 30% center,
transparent 0%,
transparent 48%,
rgba(0, 0, 0, 0.25) 60%,
rgba(0, 0, 0, 0.55) 70%,
rgba(0, 0, 0, 0.8) 82%,
rgba(0, 0, 0, 0.92) 90%,
black 100%);
}
.hero-image-wrapper::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: radial-gradient(ellipse 80% 80% at 30% center,
transparent 0%,
transparent 48%,
rgba(245, 230, 211, 0.2) 62%,
rgba(245, 230, 211, 0.5) 75%,
rgba(245, 230, 211, 0.8) 86%,
rgba(245, 230, 211, 0.95) 94%,
rgba(245, 230, 211, 1) 100%);
}
/* Hero Text Overlay - Mobil */
.hero-text-overlay {
top: auto;
bottom: 120px; /* WhatsApp butonunun 50px yukarısı (buton ~70px + 50px boşluk) */
left: auto;
right: 20px; /* Sağa yaslı */
transform: none;
width: auto;
max-width: calc(100% - 40px);
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end; /* Sağa yaslı */
}
.hero-subtitle {
font-family: 'Great Vibes', 'Allura', cursive;
font-size: clamp(2.5rem, 12vw, 4.5rem);
font-weight: 400; /* Thin görünüm - Great Vibes çok ince ve zarif */
letter-spacing: 0.15em; /* Hat sanatı için uygun letter-spacing */
white-space: normal;
line-height: 1.1;
display: inline-flex;
flex-wrap: wrap;
gap: 0.05em;
text-transform: none;
transform: rotate(-15deg); /* Yukarı doğru açılı (15 derece) */
transform-origin: right bottom; /* Sağa yaslı için sağ alt köşe */
margin-bottom: 0px; /* Çeşme yazısına daha yakın */
}
/* Çeşme yazısı - Great Vibes font, düz, WELLNESS'ın tam altında, sağa yaslı, efekt yok */
.hero-location-ellipse {
display: inline-block;
transform: rotate(-15deg); /* Wellness yazısıyla aynı açı */
transform-origin: right center; /* Sağa yaslı için sağ orta */
margin-top: 2px; /* Wellness yazısına daha yakın */
margin-left: 0;
position: relative;
/* Wellness kelimesinin sağ tarafına hizalı - "Wellness" = 8 harf */
/* "SPA &" kısmından sonra "Wellness" başlıyor, "Wellness"ın sağ tarafına hizala */
/* "Wellness" genişliği: 8 harf + 7 letter-spacing (0.15em) */
margin-right: 0; /* Sağa yaslı için */
align-self: flex-end; /* Sağa yaslı */
}
.hero-location-text {
font-family: 'Great Vibes', 'Allura', cursive;
font-size: clamp(2.5rem, 12vw, 4.5rem); /* Spa & Wellness ile aynı font boyutu */
font-weight: 400;
color: #ffffff;
letter-spacing: 0.15em;
text-transform: none;
display: inline-block;
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.5),
0 1px 5px rgba(0, 0, 0, 0.7);
}
/* Mobilde grafik efekti - daha küçük yükseklik farkları */
/* Not: rotate transform hero-subtitle'da, harflerin translateY değerleri korunuyor */
.hero-char:nth-child(1) { transform: translateY(-10px); } /* S */
.hero-char:nth-child(2) { transform: translateY(-5px); } /* P */
.hero-char:nth-child(3) { transform: translateY(-1px); } /* A */
.hero-char:nth-child(4) { transform: translateY(0px); } /* & */
.hero-char:nth-child(5) { transform: translateY(-3px); } /* W */
.hero-char:nth-child(6) { transform: translateY(-8px); } /* e */
.hero-char:nth-child(7) { transform: translateY(-12px); } /* l */
.hero-char:nth-child(8) { transform: translateY(-14px); } /* l */
.hero-char:nth-child(9) { transform: translateY(-12px); } /* n */
.hero-char:nth-child(10) { transform: translateY(-8px); } /* e */
.hero-char:nth-child(11) { transform: translateY(-3px); } /* s */
.hero-char:nth-child(12) { transform: translateY(0px); } /* s */
.section {
border-radius: 30px 30px 0 0;
margin-top: -30px;
}
.section::before {
top: -30px;
height: 50px;
}
.nav-list {
position: fixed;
top: 0;
right: 0;
width: 85%;
max-width: 420px;
height: 100vh;
background: linear-gradient(180deg,
#F5E6D3 0%, /* Plaj kumu - üst */
#FFF8E7 8%, /* Açık krem */
#E8D5C4 18%, /* Orta kum */
#D4C4B0 28%, /* Koyu kum */
#B2EBF2 45%, /* Açık deniz mavisi */
#80DEEA 60%, /* Orta deniz mavisi */
#4DD0E1 75%, /* Koyu deniz mavisi */
#26C6DA 88%, /* Daha koyu mavi */
#00BCD4 100% /* En koyu deniz mavisi - alt */
);
flex-direction: column;
padding: 0;
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3), -4px 0 20px rgba(0, 0, 0, 0.2);
border-radius: 0;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: var(--z-modal);
overflow-y: auto;
overflow-x: hidden;
align-items: stretch;
justify-content: flex-start;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-list.active {
transform: translateX(0);
}
/* Mobil menü kapatma butonu - sadece mobilde görünür */
.mobile-menu-close {
display: none;
}
@media (max-width: 767px) {
.mobile-menu-close {
display: flex;
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 50%;
color: var(--text-color);
font-size: 24px;
font-weight: 300;
cursor: pointer;
z-index: 10;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-menu-close:hover {
background: rgba(255, 255, 255, 0.4);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.mobile-menu-close:active {
transform: rotate(90deg) scale(0.95);
}
}
/* Menü linkleri - düzenli, nizami ve hizalı */
.nav-list {
list-style: none;
padding: 80px var(--spacing-lg) var(--spacing-xl);
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
width: 100%;
box-sizing: border-box;
}
.nav-list li {
margin: 0;
padding: 0;
width: 100%;
display: block;
animation: slideInRight 0.4s ease-out backwards;
}
.nav-list li:nth-child(1) { animation-delay: 0.05s; }
.nav-list li:nth-child(2) { animation-delay: 0.1s; }
.nav-list li:nth-child(3) { animation-delay: 0.15s; }
.nav-list li:nth-child(4) { animation-delay: 0.2s; }
.nav-list li:nth-child(5) { animation-delay: 0.25s; }
.nav-list li:nth-child(6) { animation-delay: 0.3s; }
.nav-list .nav-link {
color: var(--text-color);
padding: 1.25rem 1.75rem;
margin: 0;
border-radius: 16px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.35);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
text-align: left;
font-weight: 600;
font-size: 1rem;
line-height: 1.5;
box-sizing: border-box;
min-height: 56px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.nav-list .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.nav-list .nav-link:hover::before {
left: 100%;
}
.nav-list .nav-link:hover {
background: rgba(255, 255, 255, 0.4);
transform: translateX(8px) scale(1.02);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.nav-list .nav-link:active {
background: rgba(255, 255, 255, 0.5);
transform: translateX(4px) scale(0.98);
}
/* Mobil Dropdown Menu */
.nav-item-dropdown {
position: relative;
}
.nav-link-dropdown {
justify-content: space-between;
}
.nav-link-dropdown i {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.nav-item-dropdown.active .nav-link-dropdown i {
transform: rotate(180deg);
}
.dropdown-menu {
position: static;
width: 100%;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: none;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
margin-top: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
}
.nav-item-dropdown.active .dropdown-menu {
max-height: 500px;
opacity: 1;
visibility: visible;
padding: 0.5rem 0;
}
.dropdown-link {
padding: 1rem 1.75rem 1rem 2.5rem;
color: var(--text-color);
font-size: 0.9rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.5px;
border-radius: 0;
background: transparent;
}
.dropdown-link::before {
display: none;
}
.dropdown-link:hover,
.dropdown-link:active {
background: rgba(255, 255, 255, 0.2);
padding-left: 2.5rem;
transform: none;
}
.mobile-menu-toggle {
display: block;
z-index: calc(var(--z-modal) + 1);
position: relative;
}
/* Menü açıkken hamburger butonu tamamen gizle */
body.menu-open .mobile-menu-toggle {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Overlay kaldırıldı - menü açıkken arka plan bulanıklaşmıyor */
.col-6,
.col-4,
.col-3 {
flex: 0 0 100%;
max-width: 100%;
}
.hero-buttons {
flex-direction: column;
}
.btn {
width: 100%;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
}
@media (max-width: 991px) and (min-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
}
@media (max-width: 767px) {
.gallery-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-xl) !important;
}
.gallery-item {
aspect-ratio: 4 / 3 !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 479px) {
.container {
padding: 0 var(--spacing-sm);
}
.section {
padding: var(--spacing-xl) 0;
}
.about-section {
padding: var(--spacing-2xl) 0;
}
.about-title {
font-size: 2rem;
margin-bottom: var(--spacing-lg);
}
.about-description {
font-size: 1rem;
line-height: 1.8;
}
.gallery-title {
font-size: 2rem;
}
}
/* ============================================
Mobile Contact Buttons
============================================ */
.mobile-contact-buttons {
display: none; /* Hidden on desktop */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 0;
background: transparent;
}
.mobile-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
padding: 16px 10px;
text-decoration: none;
font-family: var(--font-secondary);
font-size: 13px;
font-weight: 600;
color: #fff;
border: none;
outline: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
animation: slideUpFadeIn 0.6s ease-out;
}
.mobile-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.mobile-btn:active::before {
width: 300px;
height: 300px;
}
.mobile-btn i {
font-size: 24px;
margin-bottom: 4px;
position: relative;
z-index: 1;
animation: bounceIcon 2s infinite;
}
.mobile-btn span {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
position: relative;
z-index: 1;
text-transform: uppercase;
line-height: 1.2;
margin-top: 2px;
}
.mobile-whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
float: left;
}
.mobile-whatsapp:hover,
.mobile-whatsapp:active {
background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
transform: translateY(-3px);
box-shadow: 0 -6px 25px rgba(37, 211, 102, 0.4);
}
.mobile-phone {
background: linear-gradient(135deg, #0077BE 0%, #004D99 100%);
float: right;
}
.mobile-phone:hover,
.mobile-phone:active {
background: linear-gradient(135deg, #004D99 0%, #003366 100%);
transform: translateY(-3px);
box-shadow: 0 -6px 25px rgba(0, 119, 190, 0.4);
}
/* Animations */
@keyframes slideUpFadeIn {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIcon {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Show only on mobile devices */
@media (max-width: 767px) {
.mobile-contact-buttons {
display: flex;
animation: slideUpFadeIn 0.8s ease-out 0.5s both;
}
/* Add bottom padding to body to prevent content overlap */
body {
padding-bottom: 70px;
}
/* Animate buttons on page load */
.mobile-btn:nth-child(1) {
animation: slideUpFadeIn 0.6s ease-out 0.3s both;
}
.mobile-btn:nth-child(2) {
animation: slideUpFadeIn 0.6s ease-out 0.5s both;
}
}
/* ============================================
Page Hero (For Internal Pages)
============================================ */
/* Hakkımızda sayfası için body background - page-hero ile aynı renk */
body.page-hakkimizda {
background: linear-gradient(135deg, #0077BE 0%, #004D99 100%);
}
/* Galeri sayfası için body background - page-hero ile aynı renk */
body.page-galeri {
background: linear-gradient(135deg, #0077BE 0%, #004D99 100%);
}
/* İletişim sayfası için body background - page-hero ile aynı renk */
body.page-iletisim {
background: linear-gradient(135deg, #0077BE 0%, #004D99 100%);
}
.page-hero {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
overflow: hidden;
margin-top: 90px;
padding-bottom: calc(var(--spacing-3xl) + 140px);
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('/assets/images/gallery/spa.avif') center/cover no-repeat;
opacity: 0.15;
z-index: 0;
}
/* Wave at bottom of page hero */
.page-hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.page-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.9) 0%, rgba(0, 77, 153, 0.9) 100%);
z-index: 1;
}
.page-hero .container {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
}
.page-hero-title {
font-size: var(--font-size-4xl);
font-weight: 900;
margin-bottom: var(--spacing-md);
text-transform: uppercase;
letter-spacing: 2px;
color: #fff !important;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.page-hero-subtitle {
font-size: var(--font-size-lg);
font-weight: 400;
margin-bottom: var(--spacing-lg);
color: #fff !important;
opacity: 0.95;
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
margin-top: var(--spacing-lg);
}
.breadcrumb-link {
color: #fff;
text-decoration: none;
transition: opacity var(--transition-base);
opacity: 0.8;
}
.breadcrumb-link:hover {
opacity: 1;
}
.breadcrumb-separator {
opacity: 0.6;
}
.breadcrumb-current {
opacity: 1;
font-weight: 600;
}
/* ============================================
About Story Section
============================================ */
.about-story-section {
position: relative;
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
background: #fff;
overflow: hidden;
padding-bottom: calc(var(--spacing-3xl) + 120px);
}
/* About Story section altında dalga geçişi - Footer'a (Ana sayfa Why Choose gibi) */
.about-story-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - beyazdan kum rengine */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.about-story-section .container {
position: relative;
z-index: 10;
}
.about-story-content-center {
position: relative;
z-index: 10;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.about-story-text {
margin-top: var(--spacing-xl);
}
.about-text {
font-size: 1.1rem;
line-height: 1.9;
color: var(--text-color);
margin-bottom: var(--spacing-lg);
text-align: justify;
}
.about-text.highlight-text {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.03) 0%, rgba(0, 77, 153, 0.05) 100%);
padding: var(--spacing-lg);
border-radius: 15px;
border-left: 4px solid var(--primary-color);
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.08);
margin-top: var(--spacing-xl);
font-weight: 500;
}
.about-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
}
.about-story-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.about-story-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.about-story-image:hover img {
transform: scale(1.05);
}
.about-story-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
padding: var(--spacing-lg);
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
z-index: 2;
}
.badge-number {
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.badge-text {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
margin-top: 5px;
}
.about-story-content {
padding: var(--spacing-lg);
}
.section-title {
font-size: var(--font-size-3xl);
font-weight: 900;
color: var(--primary-dark);
margin-bottom: var(--spacing-lg);
position: relative;
padding-bottom: var(--spacing-md);
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
border-radius: 2px;
}
.section-title.text-center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
font-size: var(--font-size-lg);
color: var(--text-light);
margin-bottom: var(--spacing-2xl);
max-width: 700px;
}
.section-subtitle.text-center {
margin-left: auto;
margin-right: auto;
}
.about-text {
font-size: var(--font-size-base);
line-height: 1.8;
color: var(--text-light);
margin-bottom: var(--spacing-md);
}
.about-text strong {
color: var(--primary-color);
font-weight: 600;
}
/* ============================================
Mission & Vision Section
============================================ */
.mission-vision-section {
position: relative;
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
overflow: hidden;
}
/* Wave at bottom */
.mission-vision-section::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
.mission-vision-section .container {
position: relative;
z-index: 10;
}
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
}
.mission-vision-card {
background: #fff;
padding: var(--spacing-2xl);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-vision-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.mission-vision-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
}
.mission-vision-icon i {
font-size: 2rem;
color: #fff;
}
.mission-vision-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-color);
margin-bottom: var(--spacing-md);
}
.mission-vision-text {
font-size: var(--font-size-base);
line-height: 1.8;
color: var(--text-light);
}
/* ============================================
Values Section
============================================ */
.values-section {
position: relative;
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
background: #fff;
overflow: hidden;
}
/* Wave at bottom */
.values-section::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
.values-section .container {
position: relative;
z-index: 10;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.value-card {
text-align: center;
padding: var(--spacing-xl);
border-radius: 15px;
background: #fff;
border: 2px solid #f0f0f0;
transition: all 0.3s ease;
}
.value-card:hover {
border-color: var(--primary-color);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.15);
}
.value-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
transition: transform 0.3s ease;
}
.value-card:hover .value-icon {
transform: scale(1.1) rotate(5deg);
}
.value-icon i {
font-size: 1.5rem;
color: #fff;
}
.value-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-color);
margin-bottom: var(--spacing-sm);
}
.value-description {
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--text-light);
}
/* ============================================
Team Section
============================================ */
.team-section {
position: relative;
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
overflow: hidden;
}
/* Wave at bottom */
.team-section::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
.team-section .container {
position: relative;
z-index: 10;
}
.team-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
margin-top: var(--spacing-2xl);
}
.team-feature {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.team-feature:last-child {
margin-bottom: 0;
}
.team-feature-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
}
.team-feature-icon i {
font-size: 1.5rem;
color: #fff;
}
.team-feature-content {
flex: 1;
}
.team-feature-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--text-color);
margin-bottom: var(--spacing-xs);
}
.team-feature-description {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--text-light);
}
.team-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================
Facilities Section
============================================ */
.facilities-section {
position: relative;
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
background: #fff;
overflow: hidden;
}
/* Wave at bottom */
.facilities-section::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
.facilities-section .container {
position: relative;
z-index: 10;
}
.facilities-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-2xl);
margin-top: var(--spacing-2xl);
}
.facility-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.facility-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.facility-image {
width: 100%;
height: 300px;
overflow: hidden;
}
.facility-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.facility-card:hover .facility-image img {
transform: scale(1.1);
}
.facility-content {
padding: var(--spacing-xl);
}
.facility-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-color);
margin-bottom: var(--spacing-sm);
}
.facility-description {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--text-light);
}
/* ============================================
CTA Section
============================================ */
.cta-section {
position: relative;
padding: var(--spacing-4xl) 0 var(--spacing-4xl);
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1) 0%, rgba(0, 77, 153, 0.1) 100%),
url('/assets/images/gallery/spa.avif') center/cover no-repeat;
overflow: hidden;
}
/* Wave at top - coming from white facilities section */
.cta-section::before {
content: '';
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
/* Wave at bottom - going to footer */
.cta-section::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: 100% 100%;
z-index: 1;
}
.cta-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 119, 190, 0.93) 0%,
rgba(0, 77, 153, 0.95) 50%,
rgba(0, 51, 102, 0.93) 100%);
z-index: 1;
}
.cta-section .container {
position: relative;
z-index: 2;
}
.cta-content {
text-align: center;
color: #fff;
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
.cta-title {
font-size: var(--font-size-4xl);
font-weight: 900;
margin-bottom: var(--spacing-md);
color: #fff !important;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
}
.cta-subtitle {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-2xl);
color: #fff !important;
opacity: 0.95;
line-height: 1.8;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cta-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.btn-outline {
background: rgba(255, 255, 255, 0.1);
color: #fff !important;
border: 2px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.btn-outline:hover {
background: #fff;
color: var(--primary-color) !important;
border-color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
/* ============================================
Responsive Styles - About Page
============================================ */
@media (max-width: 991px) {
.page-hero {
min-height: 400px;
margin-top: 100px;
padding-bottom: calc(var(--spacing-2xl) + 100px);
}
.page-hero-title {
font-size: var(--font-size-3xl);
}
.about-story-grid,
.mission-vision-grid,
.team-content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.facilities-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.page-hero {
min-height: 350px;
margin-top: 70px;
padding-bottom: calc(var(--spacing-xl) + 80px);
}
.page-hero::after {
height: 80px;
}
.page-hero-title {
font-size: var(--font-size-2xl);
}
.page-hero-subtitle {
font-size: var(--font-size-base);
}
.about-story-section,
.mission-vision-section,
.values-section,
.team-section,
.facilities-section {
padding-top: var(--spacing-2xl);
padding-bottom: var(--spacing-2xl);
}
.about-story-section {
padding-bottom: calc(var(--spacing-lg) + 50px);
}
.about-story-section::after {
height: 80px;
bottom: 0;
}
.mission-vision-section::after,
.values-section::after,
.team-section::after,
.facilities-section::after,
.cta-section::before,
.cta-section::after {
height: 60px;
}
.about-story-section .container,
.mission-vision-section .container,
.values-section .container,
.team-section .container,
.facilities-section .container {
padding: 0 var(--spacing-md);
}
.cta-section {
padding-top: var(--spacing-2xl);
padding-bottom: var(--spacing-2xl);
}
.about-story-badge {
width: 90px;
height: 90px;
bottom: 20px;
right: 20px;
padding: var(--spacing-md);
}
.badge-number {
font-size: 1.5rem;
}
.badge-text {
font-size: 0.75rem;
}
.values-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.team-feature {
flex-direction: column;
text-align: center;
}
.team-feature-icon {
margin: 0 auto var(--spacing-sm);
}
.cta-title {
font-size: var(--font-size-2xl);
}
.cta-subtitle {
font-size: var(--font-size-base);
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn {
width: 100%;
}
}
/* ============================================
Gallery Page Styles
============================================ */
.gallery-main-section {
position: relative;
padding: var(--spacing-3xl) 0;
background: #ffffff;
overflow: hidden;
padding-bottom: calc(var(--spacing-3xl) + 120px);
}
/* Galeri section altında dalga geçişi - Footer'a (Ana sayfa Why Choose gibi) */
.gallery-main-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
/* Deniz dalgası - beyazdan kum rengine */
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.gallery-main-section .container {
position: relative;
z-index: 10;
}
.gallery-intro {
margin-bottom: var(--spacing-3xl);
}
/* Masonry Gallery Grid */
.gallery-masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-lg);
padding: 0;
}
.gallery-card {
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
background: #fff;
}
.gallery-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 119, 190, 0.2);
}
.gallery-image-wrapper {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 Aspect Ratio */
overflow: hidden;
}
.gallery-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-card:hover .gallery-img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom,
rgba(0, 119, 190, 0.7) 0%,
rgba(0, 77, 153, 0.9) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.gallery-card:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay-content {
text-align: center;
color: #fff;
transform: translateY(20px);
transition: transform 0.4s ease;
padding: var(--spacing-lg);
}
.gallery-card:hover .gallery-overlay-content {
transform: translateY(0);
}
.gallery-overlay-content i {
font-size: 3rem;
margin-bottom: var(--spacing-md);
opacity: 0.9;
}
.gallery-overlay-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-xs);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.gallery-overlay-content p {
font-size: 1rem;
opacity: 0.95;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.gallery-card-title {
padding: var(--spacing-md);
background: #fff;
text-align: center;
font-family: var(--font-primary);
font-size: 1.4rem;
font-weight: 600;
color: var(--text-color);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
transition: color 0.3s ease;
}
.gallery-card:hover .gallery-card-title {
color: var(--primary-color);
}
/* Lightbox */
.gallery-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
align-items: center;
justify-content: center;
}
.gallery-lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
color: #fff;
text-align: center;
margin-top: var(--spacing-lg);
font-size: 1.3rem;
font-weight: 600;
font-family: var(--font-primary);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: fixed;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
z-index: 100000;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.lightbox-close {
top: 30px;
right: 30px;
}
.lightbox-prev {
left: 30px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-prev:hover {
transform: translateY(-50%) scale(1.1);
}
.lightbox-next {
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-next:hover {
transform: translateY(-50%) scale(1.1);
}
/* Responsive Gallery */
@media (max-width: 991px) {
.gallery-masonry {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-md);
}
}
@media (max-width: 767px) {
.gallery-masonry {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.gallery-card-title {
font-size: 1.2rem;
padding: var(--spacing-sm) var(--spacing-md);
}
.gallery-main-section {
padding-bottom: calc(var(--spacing-2xl) + 80px);
}
.gallery-main-section::after {
height: 80px;
bottom: 0;
}
.gallery-image-wrapper {
padding-top: 65%; /* Slightly wider on mobile */
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.lightbox-close {
top: 20px;
right: 20px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
}
/* ============================================
Contact Page Styles
============================================ */
.contact-info-section {
position: relative;
padding: var(--spacing-3xl) 0;
background: #ffffff;
overflow: hidden;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.contact-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: var(--spacing-2xl);
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 119, 190, 0.1);
}
.contact-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 119, 190, 0.15);
border-color: rgba(0, 119, 190, 0.3);
}
.contact-card-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2rem;
box-shadow: 0 10px 25px rgba(0, 119, 190, 0.3);
transition: transform 0.3s ease;
}
.contact-card:hover .contact-card-icon {
transform: scale(1.1) rotate(5deg);
}
.contact-card-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: var(--spacing-md);
}
.contact-card-content {
color: var(--text-color);
line-height: 1.8;
}
.contact-card-content p {
margin-bottom: var(--spacing-xs);
}
.contact-card-content strong {
color: var(--primary-dark);
font-weight: 600;
}
.contact-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.contact-link:hover {
color: var(--primary-dark);
transform: translateX(5px);
}
.contact-note {
font-size: var(--font-size-sm);
color: var(--text-light);
margin-top: var(--spacing-sm);
font-style: italic;
}
/* Map Section */
.contact-map-section {
position: relative;
padding: var(--spacing-3xl) 0;
background: #f8f9fa;
overflow: hidden;
padding-bottom: calc(var(--spacing-3xl) + 120px);
}
.contact-map-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.contact-map-section .container {
position: relative;
z-index: 10;
}
.map-wrapper {
margin-top: var(--spacing-2xl);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}
.map-wrapper iframe {
display: block;
width: 100%;
min-height: 500px;
}
/* Working Hours Section */
.working-hours-section {
position: relative;
padding: var(--spacing-3xl) 0;
background: #ffffff;
overflow: hidden;
padding-bottom: calc(var(--spacing-3xl) + 120px);
}
.working-hours-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: 100% 100%;
z-index: 1;
pointer-events: none;
}
.working-hours-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.working-hours-icon {
width: 100px;
height: 100px;
margin: 0 auto var(--spacing-xl);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 119, 190, 0.3);
}
.hours-grid {
display: grid;
gap: var(--spacing-lg);
margin: var(--spacing-2xl) 0;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
background: linear-gradient(135deg, rgba(0, 119, 190, 0.05) 0%, rgba(0, 77, 153, 0.05) 100%);
border-radius: 15px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
}
.hours-item:hover {
transform: translateX(10px);
box-shadow: 0 5px 20px rgba(0, 119, 190, 0.1);
}
.hours-day {
font-weight: 600;
color: var(--primary-dark);
font-size: var(--font-size-lg);
}
.hours-time {
font-weight: 700;
color: var(--primary-color);
font-size: var(--font-size-xl);
}
.hours-note {
margin-top: var(--spacing-xl);
color: var(--text-light);
font-style: italic;
font-size: var(--font-size-sm);
}
/* Responsive Contact */
@media (max-width: 991px) {
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.map-wrapper iframe {
min-height: 400px;
}
}
@media (max-width: 767px) {
.contact-info-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.contact-card {
padding: var(--spacing-xl);
}
.contact-card-icon {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
.map-wrapper iframe {
min-height: 300px;
}
.contact-map-section {
padding-bottom: calc(var(--spacing-2xl) + 80px);
}
.contact-map-section::after {
height: 80px;
}
.working-hours-section {
padding-bottom: calc(var(--spacing-2xl) + 80px);
}
.working-hours-section::after {
height: 80px;
}
.working-hours-icon {
width: 80px;
height: 80px;
font-size: 2rem;
}
.hours-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-xs);
}
}