.hakkimizda {
padding: 80px 0;
background-color: #ffffff;
color: #333;
}.hakkimizda-container {}.hakkimizda-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}/* --- SOL: RESİM KOLAJI --- */
.hakkimizda-images {
display: flex;
flex-direction: column;
gap: 20px;
}.hakkimizda-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
display: block;
}.img-top-wrapper {
width: 100%;
height: 280px;
}.img-bottom-row {
display: flex;
gap: 20px;
height: 250px;
}.experience-card {
width: 40%;
position: relative;
border-radius: 20px;
overflow: hidden;
}.experience-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top, rgba(11, 61, 112, 0.9) 0%, transparent 100%);
z-index: 1;
}.experience-content {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 2;
color: #fff;
}.experience-content h1 {
font-size: 42px;
font-weight: 700;
margin: 0;
line-height: 1;
font-family: var(--font2);
}.experience-content p {
font-size: 14px;
margin: 5px 0 0 0;
font-weight: 500;
}.img-bottom-right {
width: 60%;
}/* --- SAĞ: METİN İÇERİĞİ --- */
.hakkimizda-content {
display: flex;
flex-direction: column;
}.subtitle {
display: flex;
align-items: center;
gap: 8px;
color: var(--renk2);
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 15px;
}.main-title {
color: var(--renk1);
font-size: 36px;
font-weight: 600;
line-height: 1.2;
margin-top: 0;
font-family: var(--font1);
margin-bottom: 20px;
text-transform: uppercase;
}.main-title span {
color: var(--renk2);
}.main-desc {
color: #666;
font-size: 16px;
line-height: 1.4;
font-weight: 500;
margin-top: 0px;
margin-bottom: 30px;
}.main-desc strong {
color: var(--renk2);
}/* Vurgulu Kutu */
.highlight-box {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border: 1px solid #eaeaea;
border-radius: 12px;
margin-bottom: 30px;
background-color: #fbfcff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
font-weight: 600;
}.icon-box {
background-color: var(--renk1);
color: #fff;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
flex-shrink: 0;
}.highlight-text {
font-weight: 700;
color: var(--renk2);
font-size: 16px;
line-height: 1.4;
}/* Checklist */
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
display: flex;
flex-direction: column;
gap: 15px;
}.feature-list li {
display: flex;
align-items: flex-start;
gap: 12px;
color: #555;
font-size: 15px;
font-weight: 500;
}.feature-list svg {
flex-shrink: 0;
margin-top: 2px;
}/* Buton ve İletişim */
.action-area {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}.btn-primary {
background-color: var(--renk1);
color: #fff;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}.btn-primary:hover {
background-color: var(--renk2);
;
transform: translateY(-2px);
}.contact-info {
display: flex;
align-items: start;
gap: 10px;
}.contact-icon {
background-color: var(--renk1);
color: #fff;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}.contact-text {
display: flex;
flex-direction: column;
}.contact-text span {
font-size: 13px;
color: #777;
margin-bottom: 2px;
}.contact-text strong {
color: var(--renk2);
font-size: 18px;
font-weight: 700;
font-family: var(--font1);
}/* Mobil Uyumluluk */
@media (max-width: 991px) {
.hakkimizda-grid {
grid-template-columns: 1fr;
gap: 40px;
}.main-title {
font-size: 30px;
}
}@media (max-width: 576px) {
.img-top-wrapper {
height: 200px;
}.img-bottom-row {
height: 200px;
}.experience-card {
width: 50%;
}.img-bottom-right {
width: 50%;
}.experience-content h3 {
font-size: 32px;
}.action-area {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}.btn-primary {
width: 100%;
justify-content: center;
}
}/**//* Section tamamen full-width yapıldı, sadece sağdan/soldan 30px padding verildi */
.hizmetler {
width: 100%;
padding: 0px 30px 70px;
/* Üst/Alt: 80px, Sağ/Sol: 30px */
box-sizing: border-box;
}/* Container iptal edildi. Grid doğrudan tam genişliğe yayılıyor */
.hizmetler-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
/* Kartlar arası boşluk */
width: 100%;
}/* --- Kartların Tasarımı --- */
.hizmet-card {
position: relative;
display: block;
height: 420px;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}.hizmet-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}.hizmet-card .card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}.hizmet-card:hover .card-bg {
transform: scale(1.08);
}.hizmet-card .card-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background: linear-gradient(to top, rgba(11, 61, 112, 0.95) 0%, rgba(11, 61, 112, 0.4) 50%, transparent 100%);
z-index: 2;
transition: opacity 0.4s ease;
}/* GÜNCELLENDİ: İçeriğe yukarı kayma efekti (transition ve transform) eklendi */
.hizmet-card .card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
z-index: 10;
color: #fff;
box-sizing: border-box;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}/* YENİ: Kart hover olduğunda içeriği 45px yukarı taşıyoruz */
.hizmet-card:hover .card-content {
transform: translateY(-45px);
}.hizmet-card h3 {
font-size: 20px;
font-weight: 600;
margin: 0 0 12px 0;
display: flex;
align-items: center;
font-family: var(--font1);
letter-spacing: 0.5px;
text-transform: uppercase;
}.hizmet-card .hover-arrow {
width: 22px;
height: 22px;
margin-left: 8px;
opacity: 0;
transform: translateX(-10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.hizmet-card:hover .hover-arrow {
opacity: 1;
transform: translateX(0);
}.hizmet-card .card-line {
width: 40px;
height: 3px;
background-color: var(--renk2);
margin-bottom: 15px;
border-radius: 2px;
transition: width 0.4s ease, opacity 0.4s ease;
}.hizmet-card:hover .card-line {
width: 0;
opacity: 0;
}.hizmet-card p {
font-size: 15px;
line-height: 1.4;
margin: 0;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
transition: transform 0.4s ease;
}.hizmet-card:hover p {
color: #fff;
}/* Turuncu Dalga */
.hizmet-card .hover-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 140px;
z-index: 3;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}.hizmet-card .hover-wave svg {
width: 100%;
height: 100%;
display: block;
}.hizmet-card:hover .hover-wave {
transform: translateY(0);
}/* ==========================================================================
YENİ EKLENEN KISIM: WhatsApp Hattı ve Buton Tasarımı
========================================================================== */.whatsapp-Hatti {
position: absolute;
bottom: 25px;
/* Kartın en altından içeride durması için */
left: 30px;
/* card-content padding değeri ile hizalandı */
z-index: 15;
/* Tüm katmanların üzerinde durması için */
opacity: 0;
/* Başlangıçta görünmez */
transform: translateY(40px);
/* Başlangıçta aşağıda konumlanır */
pointer-events: none;
/* Gizliyken tıklanmayı önler */
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}/* Kart hover olduğunda WhatsApp butonunu yukarı süzerek gösteriyoruz */
.hizmet-card:hover .whatsapp-Hatti {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
/* Göründüğünde tıklanabilir hale gelir */
}/* Modern WhatsApp Buton Tasarımı */
.Whatsapp-buton {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #25D366;
color: #fff;
text-decoration: none;
padding: 8px 16px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}.Whatsapp-buton:hover {
background-color: #1ebd54;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
transform: scale(1.03);
/* Butonun kendi üstüne gelindiğinde hafif büyüme efekti */
}.whatsapp-icon {
width: 16px;
height: 16px;
}/* --- RESPONSIVE / MOBİL UYUM --- */
@media (max-width: 1200px) {
.hizmetler-grid {
grid-template-columns: repeat(2, 1fr);
/* Tabletlerde 2'li ızgara */
}
}@media (max-width: 768px) {
.hizmetler {
padding: 60px 15px;
/* Mobilde kenar boşluğunu 15px'e düşürdüm ki ekrana tam sığsın */
}.hizmetler-grid {
gap: 15px;
}
}@media (max-width: 576px) {
.hizmetler-grid {
grid-template-columns: 1fr;
/* Telefonlarda alt alta tek sütun */
}.hizmet-card {
height: 380px;
/* Mobilde boyunu biraz kısalttık */
}
}/**/.neden-biz {
background-color: #f4fbfe;
/* Sayfa arka planı */
padding: 60px 0px;
color: #333;
overflow: hidden;
/* Dışarı taşmaları gizler */
}.neden-biz-container {
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: 0;
}/* ===============================
SOL TARAF: SABİT ALAN
=============================== */
.neden-sol {
width: 45%;
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
z-index: 1;
/* Altta kalması için z-index düşük */
}.neden-sol h2 {
font-size: 42px;
color: #0b3d70;
font-weight: 600;
line-height: 1.2;
font-family: var(--font1);
margin: 0 0 15px 0;
letter-spacing: 1px;
text-transform: uppercase;
}.neden-sol p {
font-size: 15px;
color: #555;
line-height: 1.5;
margin-bottom: 25px;
max-width: 90%;
}.btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
border: 2px solid #0891b2;
color: #0891b2;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
align-self: flex-start;
margin-bottom: 20px;
}.btn-outline:hover {
background-color: #0891b2;
color: #fff;
box-shadow: 0 10px 20px rgba(8, 145, 178, 0.2);
}/* ===============================
SLOGAN ALANI
=============================== */
.pool-slogan {
font-size: 25px;
font-weight: 600;
color: #0891b2;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 30px;
margin-bottom: -15px;
align-self: flex-start;
animation: sloganPulse 2s infinite alternate ease-in-out;
width: 90%;
text-align: center;
justify-content: center;
margin-top: 50px;
font-family: var(--font1);
}@keyframes sloganPulse {
0% {
transform: scale(1);
}100% {
transform: scale(1.04);
}
}/* ===============================
HAVUZ VE BALIK ANİMANYONLARI
=============================== */
.water-wrapper {
width: 210%;
max-width: 920px;
margin-left: -65%;
margin-top: 10px;
position: absolute;
z-index: 1;
pointer-events: none;
bottom: -420px;
z-index: 1;
}.water-wrapper .logo2 {
bottom: 150px;
position: absolute;
left: 50%;
width: auto;
height: 200px;
z-index: 9;
margin-left: 45px;
animation: sloganPulse2 2s infinite alternate ease-in-out;}@keyframes sloganPulse2 {
0% {
transform: scale(1);
}100% {
transform: scale(1.05);
}
}.premium-pool-svg {
width: 150%;
height: auto;
display: block;
}/* Hız Çizgileri Animasyonu */
.speed-line {
stroke-dasharray: 60 120;
animation: waterFlow 1.5s linear infinite;
}.speed-line-fast {
stroke-dasharray: 40 80;
animation: waterFlow 1s linear infinite;
}@keyframes waterFlow {
from {
stroke-dashoffset: -200;
}to {
stroke-dashoffset: 0;
}
}/* Havuz Işık Yansımaları */
.caustic {
animation: causticDance 3s infinite alternate ease-in-out;
}@keyframes causticDance {
0% {
transform: translateX(0);
opacity: 0.15;
}100% {
transform: translateX(-20px);
opacity: 0.3;
}
}/* BALIK ZIPLAMA ANİMASYONLARI (8 Saniyede 4 Atlayış) */
.fish-forward-group {
animation: swimForward 8s linear infinite;
}@keyframes swimForward {
0% {
transform: translateX(-100px);
}100% {
transform: translateX(1100px);
}
}.fish-jump-arc-group {
animation: fishParabolicJump 2s ease-in-out infinite;
}@keyframes fishParabolicJump {
0% {
transform: translateY(40px) rotate(-45deg);
opacity: 0;
}15% {
transform: translateY(20px) rotate(-35deg);
opacity: 1;
}35% {
transform: translateY(-80px) rotate(-15deg);
}50% {
transform: translateY(-110px) rotate(0deg);
}65% {
transform: translateY(-80px) rotate(15deg);
}85% {
transform: translateY(20px) rotate(35deg);
opacity: 1;
}100% {
transform: translateY(40px) rotate(45deg);
opacity: 0;
}
}/* SUYA GİRİŞ VE ÇIKIŞ SPLASH ANİMASYONLARI (8 Saniye Döngülü) */
.timed-splash {
animation: splashBurst 8s infinite ease-out;
opacity: 0;
}.timed-splash-ring {
animation: splashRing 8s infinite ease-out;
opacity: 0;
}@keyframes splashBurst {0%,
100% {
transform: scale(0);
opacity: 0;
}1% {
transform: scale(0.5);
opacity: 1;
}4% {
transform: scale(1.4) translateY(-10px);
opacity: 0.8;
}8% {
transform: scale(1.8) translateY(-15px);
opacity: 0;
}9% {
opacity: 0;
}
}@keyframes splashRing {0%,
100% {
transform: scale(0);
opacity: 0;
}1% {
transform: scale(0.2);
opacity: 1;
}6% {
transform: scale(2.2);
opacity: 0.5;
}12% {
transform: scale(3.5);
opacity: 0;
}13% {
opacity: 0;
}
}/* ===============================
SAĞ TARAF: KARTLAR (ÖNE ÇIKARTILDI)
=============================== */
.neden-sag {
width: 55%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
position: relative;
z-index: 10;
/* HAVUZUN ÜZERİNE ÇIKMASINI SAĞLAR! */
}.neden-kart {
background-color: rgba(255, 255, 255, 0.95);
/* Hafif saydamlık, arkadaki suyu şık gösterir */
backdrop-filter: blur(5px);
/* Cam efekti */
border-radius: 20px;
padding: 30px 25px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.8);
}.neden-kart:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(8, 145, 178, 0.1);
/* Hover olunca hafif havuz mavisi gölge */
}.icon-wrapper {
width: 55px;
height: 55px;
background-color: #f4fbfe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #0891b2;
transition: all 0.3s ease;
}.neden-kart:hover .icon-wrapper {
background-color: #0891b2;
color: #ffffff;
transform: scale(1.1);
}.neden-kart h3 {
font-size: 18px;
color: #0b3d70;
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.3;
font-family: var(--font1);
letter-spacing: 0.8px;
}.neden-kart p {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0;
font-weight: 500;
}/* ===============================
MOBİL UYUM
=============================== */
@media (max-width: 1100px) {
.neden-sag {
grid-template-columns: 1fr;
}
}@media (max-width: 992px) {
.neden-biz-container {
flex-direction: column;
gap: 20px;
}.neden-sol {
width: 100%;
position: static;
text-align: center;
align-items: center;
}.neden-sol p {
max-width: 100%;
}.water-wrapper {
display: none;
width: 100%;
margin-left: 0;
margin-top: 0;
}/* Mobilde overlap iptal, alt alta dizer */
.neden-sag {
width: 100%;
margin-top: -50px;
}/* Mobilde suyu biraz kartların altına sokar */
}@media (max-width: 576px) {
.neden-sol h2 {
font-size: 32px;
}
}/**//* Genel Ayarlar */
.sss-section {
background-color: #f6f8fb;
padding: 70px 0px;
color: #0b1c3a;
}/* Başlık Kısmı */
.sss-header {
text-align: center;
margin-bottom: 50px;
}.sss-header .subtitle {
color: var(--renk1);
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
justify-content: center;
text-transform: uppercase;
}.sss-header h2 {
font-size: 35px;
margin-top: 10px;
color: var(--renk1);
letter-spacing: 0.7px;
font-family: var(--font1);
margin-bottom: 0px;
text-transform: uppercase;
}.sss-header h2 span {
color: var(--renk2);
}/* Konteyner Düzeni */
.sss-container {
margin: 0 auto;
display: flex;
gap: 40px;
align-items: flex-start;
}/* Sol Kısım (Görseller) */
.sss-left {
flex: 1;
display: flex;
gap: 20px;
}.image-col {
flex: 1;
}.contact-image-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}.img-tall {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}.img-short {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}.contact-box {
background-color: var(--renk1);
;
color: white;
padding: 25px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 15px;
}.contact-box .icon {
background: white;
color: var(--renk1);
padding: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}.contact-info p {
margin: 0;
font-size: 14px;
opacity: 0.9;
}.contact-info h3 {
margin: 5px 0 0 0;
font-size: 18px;
font-family: var(--font1);
}.contact-box.contact-box2 {
padding: 13px 20px;
}.contact-box.contact-box2 .contact-info {
flex-direction: column;
gap: 0px;
}/* Sağ Kısım (Akordiyon SSS) */
.sss-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}.accordion-item {
background: white;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
overflow: hidden;
transition: all 0.3s ease;
}.accordion-header {
width: 100%;
text-align: left;
padding: 15px 25px;
font-size: 16px;
font-weight: 800;
color: #0b1c3a;
background: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font2);
transition: all 0.3s ease;
}.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
background-color: var(--renk1);
;
color: white;
}.accordion-content p {
padding: 0 25px 20px 25px;
margin: 0;
line-height: 1.6;
}/* Aktif (Açık) SSS Durumu */
.accordion-item.active {
background-color: var(--renk1);
;
}.accordion-item.active .accordion-header {
color: white;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.sss-container {
flex-direction: column;
}.sss-left {
display: none;
width: 100%;
}.hakkimizda-images{
display: none;
}}@media (max-width: 576px) {
.sss-left {
flex-direction: column;
}
}/* Ortalamak için */
.buton-kapsayici {
width: 100%;
margin-top: 30px;
}/* Zarif Buton Ana Gövde */
.btn-zarif {
display: inline-flex;
align-items: center;
bordeR: solid 1px;
border-color: var(--renk1);
color: var(--renk1);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.5px;
text-decoration: none;
font-family: var(--font1);
padding: 6px 6px 6px 26px;
border-radius: 40px;
transition: all 0.4s ease;
}/* Metin Ayarı */
.btn-zarif span {
margin-right: 16px;
}/* İçi Boş Zarif Çember */
.btn-zarif .btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
/* Daha küçük ve kibar çember */
height: 38px;
border-radius: 50%;
border: 1px solid #d5e5ec;
/* Sadece ince şeffaf bir çizgi */
background-color: #dfe9ed;
/* Başlangıçta içi boş */
transition: all 0.4s ease;
}/* İkon Geçişi */
.btn-zarif .btn-icon svg {
transition: transform 0.4s ease;
}.btn-zarif2 {
padding: 6px;
}.btn-zarif .btn-icon2 {
margin-left: 0px;
margin-right: 10px;
}.btn-zarif .btn-icon2 svg {
width: 15px;
height: 15px;
fill: var(--renk1);
}/* ---------------------------------- */
/* HOVER (Fareyle Üzerine Gelme) EFEKTİ */
/* ---------------------------------- *//* 1. Buton yavaşça laciverte döner */
.btn-zarif:hover {
background-color: var(--renk2);
border-color: var(--renk2);
}/* 2. İçi boş çember, zarifçe beyazla dolar */
.btn-zarif:hover .btn-icon {
background-color: #ffffff;
border-color: #ffffff;
color: var(--renk2);
/* İçindeki ok butona uyum sağlayıp lacivert olur */
}/* 3. Ok kısa ve kibar bir şekilde sağa kayar */
.btn-zarif:hover .btn-icon svg {
transform: translateX(3px);
}/**//* Arka Plan ve Genel Bölüm */
.sayac-bolumu {
position: relative;
/* Havuz görseli üzerine koyu mavi/lacivert tonlarında degrade katman */
background-image: linear-gradient(rgba(0, 40, 75, 0.8), rgba(0, 40, 75, 0.85)),
url('../images/bg.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
padding: 80px 20px;
color: #ffffff;
overflow: hidden;
}.sayac-ic-alan {
margin: 0 auto;
}/* Üst Başlıklar (Örnek Görseldeki Gibi) */
.sayac-ust-grup {
text-align: center;
margin-bottom: 70px;
}.sayac-ust-etiket {
display: inline-block;
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
padding: 6px 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
border-radius: 50px;
margin-bottom: 20px;
text-transform: uppercase;
}.sayac-ana-baslik {
font-size: 35px;
font-weight: 700;
line-height: 1.2;
margin: 0 auto 20px auto;
max-width: 700px;
font-family: var(--font1);
letter-spacing: 0.8px;
text-transform: uppercase;
}/* Örnek görseldeki dikkat çeken turkuaz/cyan vurgu rengi */
.vurgu-renk {
color: #15cedd;
}.sayac-alt-yazi {
font-size: 16px;
color: #d1e2f0;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}/* 4'lü Izgara Yapısı */
.sayac-izgara {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
margin-top: 20px;
}.sayac-kart {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
}/* Dairesel Turkuaz İkonlar */
.sayac-daire-ikon {
width: 80px;
height: 80px;
background-color: #15cedd;
/* Turkuaz Arka Plan */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(21, 206, 221, 0.3);
transition: transform 0.3s ease;
}.sayac-kart:hover .sayac-daire-ikon {
transform: scale(1.08);
}/* Sayaç Sayıları */
.sayac-sayilar {
font-size: 42px;
font-weight: 800;
color: #ffffff;
line-height: 1;
margin-bottom: 12px;
}.sayac-arti {
color: #15cedd;
/* Artı işaretini vurgulamak için turkuaz renk */
margin-left: 2px;
}/* Alt Metinler */
.sayac-etiket {
font-size: 15px;
font-weight: 600;
color: #e2f0fb;
line-height: 1.4;
}/* Tablet ve Telefonlar için Duyarlılık (Responsive) */
@media (max-width: 992px) {
.sayac-izgara {
grid-template-columns: repeat(2, 1fr);
/* Tablette 2x2 */
gap: 40px;
}.sayac-ana-baslik {
font-size: 34px;
}
}@media (max-width: 576px) {
.sayac-izgara {
grid-template-columns: 1fr;
/* Mobilde alt alta tek sütun */
gap: 35px;
}.sayac-bolumu {
display: none;
padding: 70px 15px;
}.sayac-ana-baslik {
font-size: 28px;
}
}/**//* Genel Bölüm Stili */
.calisma-saatleri-modern {
position: relative;
background-color: #F4FBFE;
padding: 60px 0px;
color: #2c3e50;
overflow: hidden;
}.saatler-konteyner-modern {
max-width: 1050px;
margin: 0 auto;
position: relative;
z-index: 2;
}/* Üst Başlık */
.saatler-ust-modern {
text-align: center;
margin-bottom: 60px;
}.saatler-etiket-modern {
display: inline-block;
color: #0088a8;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}.saatler-ana-baslik-modern {
font-size: 34px;
font-weight: 800;
color: #0a2240;
margin: 0 0 15px 0;
}.saatler-alt-yazi-modern {
font-size: 15px;
color: #5c758d;
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}/* Asimetrik Blok Yapısı (Overlap Efekti) */
.saat-blok-modern {
display: flex;
align-items: center;
position: relative;
margin-bottom: 80px;
}.saat-blok-modern.blok-ters-modern {
flex-direction: row-reverse;
}.blok-gorsel-modern {
flex: 1.4;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 35px rgba(10, 34, 64, 0.08);
z-index: 1;
}.blok-gorsel-modern img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}.saat-blok-modern:hover .blok-gorsel-modern img {
transform: scale(1.04);
}.donem-etiketi-modern {
position: absolute;
top: 20px;
left: 20px;
padding: 6px 16px;
font-size: 12px;
font-weight: 700;
border-radius: 6px;
letter-spacing: 1px;
}.yaz-renk-modern {
background-color: #ffeb99;
color: #705400;
}.kis-renk-modern {
background-color: #b3f2ff;
color: #005a73;
}/* Üzerine Binen Beyaz Kart */
.blok-icerik-modern {
flex: 1.1;
background: #ffffff;
border: 1px solid rgba(14, 43, 69, 0.06);
padding: 35px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(10, 34, 64, 0.05);
z-index: 2;
margin-left: -60px;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}.saat-blok-modern.blok-ters-modern .blok-icerik-modern {
margin-left: 0;
margin-right: -60px;
}.saat-blok-modern:hover .blok-icerik-modern {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(10, 34, 64, 0.08);
}.durum-modern {
color: #009cb8;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 10px;
}.blok-icerik-modern h3 {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px 0;
color: #0a2240;
font-family: var(--font1);
text-transform: uppercase;
}.donem-aciklama-modern {
font-size: 14px;
color: #5c758d;
margin: 0 0 20px 0;
line-height: 1.5;
}/* =================================================== */
/* EDİTÖR DOSTU SEÇİCİLER (Yalın ul, li, strong) */
/* =================================================== */.editor-icerik ul {
list-style: none;
/* Listelerdeki varsayılan noktaları kaldırır */
padding: 0;
margin: 0;
}.editor-icerik ul li {
border-bottom: 1px dashed #e4edf3;
padding: 10px 0;
font-size: 14px;
color: #009cb8;
/* Saat sayılarını canlandırmak için turkuaz renk */
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1.6;
}.editor-icerik ul li:last-child {
border-bottom: none;
/* Son sıranın altındaki çizgiyi kaldırır */
padding-bottom: 0;
}/* strong etiketi (Gün Başlığı) */
.editor-icerik ul li strong {
display: block;
/* Gün ismini üst satıra alır */
color: #0a2240;
/* Gün başlığı koyu lacivert */
font-size: 13.5px;
font-weight: 700;
margin-bottom: 3px;
letter-spacing: 0;
border-left: 3px solid #009cb8;
/* Sol tarafta şık dikey çizgi */
padding-left: 8px;
font-weight: 600;
}/* =================================================== *//* Alt İletişim Bandı */
.saatler-iletisim-modern {
text-align: center;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #e2edf5;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}.saatler-iletisim-modern span {
font-size: 14px;
font-weight: 600;
color: #5c758d;
}.tel-buton-modern {
font-size: 15px;
font-weight: 700;
color: #ffffff;
background-color: #009cb8;
padding: 8px 24px;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0, 156, 184, 0.2);
transition: all 0.2s ease;
}.tel-buton-modern:hover {
background-color: #007c94;
transform: translateY(-1px);
}/* --- YÜZEN ZARİF BALONCUKLAR --- */
.baloncuk-alani-modern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}.baloncuk-modern {
position: absolute;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(21, 206, 221, 0.06) 80%);
border: 1px solid rgba(21, 206, 221, 0.15);
border-radius: 50%;
bottom: -60px;
animation: suz-modern 15s infinite linear;
}.bm1 {
width: 14px;
height: 14px;
left: 6%;
animation-duration: 9s;
animation-delay: 1s;
}.bm2 {
width: 22px;
height: 22px;
left: 18%;
animation-duration: 14s;
animation-delay: 3s;
}.bm3 {
width: 12px;
height: 12px;
left: 52%;
animation-duration: 8s;
animation-delay: 0s;
}.bm4 {
width: 26px;
height: 26px;
left: 85%;
animation-duration: 16s;
animation-delay: 2s;
}@keyframes suz-modern {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}15% {
opacity: 0.7;
}85% {
opacity: 0.7;
}100% {
transform: translateY(-120vh) scale(1.1);
opacity: 0;
}
}/* Tablet ve Mobil Uyum */
@media (max-width: 992px) {.saat-blok-modern,
.saat-blok-modern.blok-ters-modern {
flex-direction: column;
align-items: stretch;
margin-bottom: 60px;
}.blok-gorsel-modern {
width: 100%;
max-width: 100%;
}.blok-gorsel-modern img {
height: 240px;
}.blok-icerik-modern,
.saat-blok-modern.blok-ters-modern .blok-icerik-modern {
margin-left: 0;
margin-right: 0;
margin-top: -30px;
box-shadow: 0 10px 30px rgba(10, 34, 64, 0.05);
}.saatler-ana-baslik-modern {
font-size: 28px;
}
}@media (max-width: 576px) {
.blok-icerik-modern {
padding: 25px;
}.saatler-ana-baslik-modern {
font-size: 24px;
}.saatler-iletisim-modern {
flex-direction: column;
gap: 12px;
}
}/**//* --- CSS DEĞİŞKENLERİ VE GENEL AYARLAR --- */
:root {
--primary-color: #0b1a30;
--accent-color: #c5b497;
--text-gray: #6b7280;
--shorts-red: #ff0033;
--font-sans: 'Montserrat', sans-serif;
--font-serif: 'Playfair Display', serif;
}/* --- ÜST BAŞLIK ALANI (HEADER) --- */
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}.header-left .subtitle {
font-size: 14px;
color: var(--text-gray);
text-transform: capitalize;
display: block;
margin-bottom: 5px;
font-weight: 500;
}.header-left .title {
font-size: 36px;
font-weight: 700;
color: var(--primary-color);
line-height: 1.2;
}.header-left .title .serif-text {
font-family: var(--font-serif);
font-style: italic;
color: var(--accent-color);
font-weight: 400;
margin-left: 8px;
}/* Telefon Butonu */
.header-right .phone-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border: 1px solid var(--accent-color);
border-radius: 30px;
color: var(--accent-color);
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
}.header-right .phone-btn:hover {
background-color: var(--accent-color);
color: #fff;
}.phone-icon {
width: 18px;
height: 18px;
}/* --- SWIPER SLIDER ALANI --- */
.musteri_gorusleri_slider {
width: 100%;
padding-bottom: 50px !important;
}/* --- VİDEO KARTI TASARIMI (9:16 Aspect Ratio) --- */
.video-card {
position: relative;
width: 100%;
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
/* Taşmaları gizler */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
cursor: pointer;
background-color: #000;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}.video-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}/* Üst Karartma ve Profil Bilgisi */
.card-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
z-index: 3;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}.card-header .avatar {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}.card-header .avatar-text {
font-size: 9px;
font-weight: bold;
color: #333;
text-transform: lowercase;
}.card-header .user-info h3 {
font-size: 12px;
color: #fff;
font-weight: 600;
}.card-header .user-info p {
font-size: 10px;
color: #e5e7eb;
opacity: 0.9;
}/* Kapak Görseli */
.thumbnail {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
transition: opacity 0.3s ease;
}/* Soru-Cevap Şablon Arka Planı */
.qa-bg {
background: radial-gradient(circle at 50% 130%, #fff4cf 0%, #ffffff 80%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
}.qa-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
z-index: 2;
}.qa-icon {
display: flex;
flex-direction: column;
line-height: 1;
font-weight: 800;
font-size: 20px;
color: var(--primary-color);
opacity: 0.8;
}.qa-icon span:last-child {
margin-left: 10px;
margin-top: -5px;
color: var(--accent-color);
}.qa-content h3 {
font-size: 15px;
font-weight: 700;
color: var(--primary-color);
line-height: 1.4;
}.qa-content p {
font-size: 12px;
color: var(--text-gray);
line-height: 1.4;
}/* Play Butonu */
.play-btn-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
transition: transform 0.2s ease;
pointer-events: none;
}.video-card:hover .play-btn-wrapper {
transform: translate(-50%, -50%) scale(1.1);
}.shorts-play-btn {
width: 50px;
height: 50px;
fill: var(--shorts-red);
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}/* Altyazı */
.video-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 15px;
color: #fff;
font-size: 12px;
text-align: center;
font-weight: 500;
z-index: 3;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}/* --- KANAL ADI VE LOGOYU GİZLEME SİHİRBAZI --- */
/* Iframe boyutunu dikeyde %116 yapıp yukarı kaydırıyoruz. */
/* Böylece üstteki başlık/kanal adı ve alttaki kontrol çubuğu kesilerek tamamen kaybolur. */
.video-card iframe {
position: absolute;
top: -8%;
left: 0;
width: 100%;
height: 116%;
border: none;
z-index: 4;
}.video-card.playing .thumbnail,
.video-card.playing .play-btn-wrapper,
.video-card.playing .card-header,
.video-card.playing .video-caption {
display: none;
}/* Swiper Noktaları */
.swiper-pagination-bullet {
background: #ccc;
opacity: 1;
width: 8px;
height: 8px;
}.swiper-pagination-bullet-active {
background: var(--renk2) !important;
transform: scale(1.2);
}@media (max-width: 768px) {
.header-left .title {
font-size: 28px;
}.section-header {
align-items: flex-start;
flex-direction: column;
}
}.musteri-gorusleri {
padding: 70px 0px;
}.musteri-gorusleri .sss-header {
margin-bottom: 0px;
}/**//* CSS Değişkenleri ve Sıfırlama Kuralları */
.blog-section {
--text-main: #1f2937;
--text-muted: #6b7280;
--bg-card: #ffffff;
--border-color: #e5e7eb;
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
background: #F3FAFD;
padding: 70px 0px;
width: 100%;
}/* Sadece bu bölümün içindeki elemanları sıfırlayan kural */
.blog-section .sss-header {
margin-bottom: 50px;
}/* Üst Başlık Grubu */
.blog-section .section-header {
margin-bottom: 40px;
}.blog-section .section-title {
font-size: 2rem;
color: var(--text-main);
font-weight: 700;
margin-bottom: 12px;
}.blog-section .section-subtitle {
color: var(--text-muted);
font-size: 1rem;
max-width: 600px;
line-height: 1.5;
}/* Grid Düzeni */
.blog-section .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}/* Kart Genel Yapısı */
.blog-section .blog-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}.blog-section .blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}/* Görsel Kapsayıcı ve Hover Katmanı */
.blog-section .card-image-wrapper {
position: relative;
width: 100%;
padding-top: 60%;
/* 5:3 oranında alan ayarlar */
overflow: hidden;
}.blog-section .card-image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}/* Görseli hover durumunda büyütme efekti */
.blog-section .blog-card:hover .card-image-wrapper img {
transform: scale(1.05);
}/* Hover durumunda beliren koyu katman */
.blog-section .card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #004d7a9e;
/* Transparan marka rengi */
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}.blog-section .blog-card:hover .card-overlay {
opacity: 1;
}/* Hover durumunda yukarı doğru kayan buton */
.blog-section .overlay-btn {
background-color: #ffffff;
color: var(--renk1);
padding: 10px 20px;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: var(--shadow-md);
transform: translateY(15px);
transition: transform 0.3s ease, background-color 0.2s ease;
}.blog-section .blog-card:hover .overlay-btn {
transform: translateY(0);
}.blog-section .overlay-btn:hover {
background-color: #f3f4f6;
}/* Kart İçerik Alanı */
.blog-section .card-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}/* Tarih Alanı */
.blog-section .card-date {
font-size: 0.8rem;
font-weight: 600;
color: var(--renk1);
letter-spacing: 0.05em;
margin-bottom: 8px;
}/* Başlık Alanı - CSS ile 1 Satır Sınırlandırma */
.blog-section .card-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 8px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0px;
}/* Açıklama Alanı - CSS ile 3 Satır Sınırlandırma */
.blog-section .card-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
margin-bottom: 20px;
flex-grow: 1;/* Webkit Line Clamp Kuralları */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}/* Kart Alt Alanı / Ok Butonu */
.blog-section .card-footer {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: auto;
}.blog-section .arrow-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f1f5f9;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}.blog-section .arrow-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: var(--renk1);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s ease, stroke 0.3s ease;
}.blog-section .blog-card:hover .arrow-btn {
background-color: var(--renk1);
}.blog-section .blog-card:hover .arrow-btn svg {
stroke: #ffffff;
transform: translateX(2px);
}/**//* Footer Genel Ayarları ve Arka Plan Resim/Renk Katmanı */
.footer {
/* Belirttiğiniz #004D7A rengi ve arkadaki resmin sızma oranı (%94 dolulukta renk katmanı) */
--footer-overlay-color: rgba(0, 77, 122, 0.914);
--footer-text-dark: #ffffff;
/* Koyu zemin üzerinde tam okunurluk için beyaz metin */
--footer-text-light: #cbd5e1;
/* İkincil metinler için açık gri */
--footer-accent: #38bdf8;
/* Dikkat çeken açık mavi vurgu rengi */
--footer-accent-hover: #7dd3fc;
--footer-border-color: rgba(255, 255, 255, 0.15);
/* İnce, şeffaf beyaz çizgiler *//* Arka plan havuz resmi ve renk katmanı birleşimi */
background: linear-gradient(var(--footer-overlay-color), var(--footer-overlay-color)),
url('../images/bg.webp') center/cover no-repeat;
padding: 70px 20px 25px 20px;
color: var(--footer-text-dark);
position: relative;
}.footer-container {margin: 0 auto;
position: relative;
z-index: 1;
}.footer-main {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: stretch;
margin-bottom: 45px;
}.footer-left {
flex: 1 1 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}.footer-right {
flex: 1 1 500px;
min-height: 300px;
}/* Telefon Numarası Alanı */
.footer-phone-wrapper {
display: flex;
align-items: center;
gap: 15px;
}.footer-phone-icon {
background-color: rgba(255, 255, 255, 0.15);
color: var(--footer-accent);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}.footer-phone-icon svg {
width: 21px;
height: 21px;
fill: #fff;
}.footer-phone-number {
font-size: 2.1rem;
font-weight: 800;
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
letter-spacing: 0.5px;
font-family: var(--font1);
}.footer-phone-number:hover {
color: var(--footer-accent);
}.footer-phone-wrapper small {
display: block;
}/* Adres Kartı (Koyu arka plan üzerinde temiz ve okunaklı beyaz kart yapısı) */
.footer-locations {
display: block;
}.footer-location-card {
background: #ffffff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}.footer-location-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}.footer-location-header svg {
width: 22px;
height: 22px;
fill: #004D7A;
}.footer-location-icon {
color: #004D7A;
font-size: 1.2rem;
}.footer-location-title {
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}.footer-location-address {
font-size: 0.95rem;
color: #475569;
margin: 0;
line-height: 1.6;
font-weight: 500;
}/* E-posta ve Sosyal Medya */
.footer-contacts-socials {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
}.footer-email-block {
display: flex;
flex-direction: column;
gap: 4px;
}.footer-email-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--footer-text-light);
font-weight: 600;
}.footer-email-link {
font-size: 1.15rem;
color: #ffffff;
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}.footer-email-link:hover {
color: var(--footer-accent);
}.footer-social-icons {
display: flex;
gap: 5px;
}.footer-social-icons svg {
width: 18px;
height: 18px;
fill: #fff;
}.footer-social-icons a {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.2rem;
text-decoration: none;
transition: transform 0.3s ease, filter 0.3s ease;
}.footer-social-btn:hover {
transform: translateY(-3px);
filter: brightness(0.9);
}.footer-tg {
background-color: #0088cc;
}.footer-wa {
background-color: #25d366;
}.footer-viber {
background-color: #7360f2;
}/* Harita Alanı */
.footer-map-container {
width: 100%;
height: 100%;
min-height: 300px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
border: 1px solid var(--footer-border-color);
}.footer-map-container iframe {
width: 100%;
height: 100%;
}/* Üst Ayırıcı Çizgi */
.footer-divider {
border: 0;
height: 1px;
background-color: var(--footer-border-color);
margin: 30px 0 25px 0;
}/* 1. Alt Satır: Menü Linkleri Alanı */
.footer-bottom-nav {
display: flex;
justify-content: center;
margin-bottom: 25px;
}.footer-bottom-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}.footer-bottom-links a {
font-size: 0.95rem;
color: #ffffff;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}.footer-bottom-link:hover {
color: var(--footer-accent);
}/* 2. En Alt Satır: Telif ve Logo Barı (Ayrı ve Ferah Satır) */
.footer-meta-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
gap: 15px;
}.footer-copyright {
font-size: 0.85rem;
color: var(--footer-text-light);
}/* Haşem Logo Stil Alanı */
.footer-hasem-logo a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none
}.footer-hasem-logo a img {
height: 20px;
}/* --- MOBİL ÖZEL TASARIM (768px ve Altı) --- */
@media (max-width: 768px) {
/* Genel Boşluk Düzenlemesi */
section {
padding: 50px 15px !important;
}/* Hakkımızda Bölümü */
.hakkimizda-grid {
display: flex;
flex-direction: column;
gap: 30px;
}.img-top-wrapper {
height: 180px;
}.img-bottom-row {
height: 180px;
gap: 10px;
}.experience-content h1 {
font-size: 28px;
}.main-title {
font-size: 26px;
text-align: center;
}.subtitle {
justify-content: center;
}.main-desc {
text-align: center;
font-size: 14px;
}.action-area {
justify-content: center;
flex-direction: column;
width: 100%;
}.contact-info {
justify-content: center;
margin-top: 10px;
}/* Hizmetler - Kartlar */
.hizmetler {
padding: 40px 15px;
}.hizmetler-grid {
grid-template-columns: 1fr; /* Tek sütun daha şık durur */
gap: 20px;
}.hizmet-card {
height: 320px;
}.hizmet-card .card-content {
padding: 20px;
}/* Neden Biz? */
.neden-biz-container {
flex-direction: column;
}.neden-sol h2 {
font-size: 28px;
text-align: center;
}.neden-sol p {
text-align: center;
margin-bottom: 20px;
}.btn-outline {
margin: 0 auto 30px auto;
}.neden-sag {
width: 100%;
margin-top: 0;
grid-template-columns: 1fr;
gap: 15px;
}.pool-slogan {
font-size: 20px;
width: 100%;
}/* SSS Bölümü */
.sss-header h2 {
font-size: 24px;
}.sss-container {
gap: 20px;
}.contact-box {
padding: 15px;
}.accordion-header {
font-size: 14px;
padding: 12px 15px;
}/* Sayaç (Counter) Bölümü */
.sayac-ana-baslik {
font-size: 24px;
}.sayac-izgara {
grid-template-columns: 1fr 1fr; /* 2x2 yapısı mobilde daha dengeli */
gap: 20px;
}.sayac-daire-ikon {
width: 60px;
height: 60px;
}.sayac-sayilar {
font-size: 30px;
}/* Çalışma Saatleri (Asimetrik Yapı Düzenleme) */
.saat-blok-modern {
flex-direction: column !important;
margin-bottom: 40px;
}.blok-gorsel-modern {
width: 100%;
height: 200px;
}.blok-gorsel-modern img {
height: 200px;
}.blok-icerik-modern,
.saat-blok-modern.blok-ters-modern .blok-icerik-modern {
margin: -30px 10px 0 10px !important; /* Kartı görselin üzerine bindir */
padding: 20px;
border-radius: 12px;
}.saatler-ana-baslik-modern {
font-size: 22px;
}/* Müşteri Görüşleri (Video Shorts) */
.section-header {
text-align: center;
justify-content: center;
}.header-left .title {
font-size: 24px;
}.header-right {
width: 100%;
display: flex;
justify-content: center;
}/* Blog Bölümü */
.blog-grid {
grid-template-columns: 1fr;
gap: 20px;
}.card-title {
font-size: 1rem;
}/* Footer (Alt Kısım) */
.footer {
padding: 20px 15px 20px 15px;
text-align: center;
}.footer-bottom-nav,
.footer-main {
display: none;
flex-direction: column;
gap: 30px;
}.footer-phone-number {
font-size: 1.6rem;
}.footer-phone-wrapper {
flex-direction: column;
gap: 10px;
}.footer-contacts-socials {
flex-direction: column;
gap: 25px;
}.footer-bottom-links {
gap: 15px;
}.footer-bottom-links a {
font-size: 13px;
}.footer-divider{
display: none;
}.footer-meta-bar {
flex-direction: column;
gap: 15px;
padding: 0;
border: none;
}/* Harita Yüksekliği Mobilde Azalt */
.footer-right {
min-height: 250px;
}
}/* Küçük Telefonlar İçin Ekstra İnce Ayar */
@media (max-width: 480px) {
.sayac-izgara {
grid-template-columns: 1fr; /* Çok küçük ekranlarda tek sütun */
}
.experience-card {
width: 100%;
}
.img-bottom-right {
display: none; /* Alan kazanmak için küçük resimlerden birini gizle */
}
}@media(max-width:1024px){
.video-card{
aspect-ratio: 9 / 7;
}
}