/* Özel Renkler ve Tipografi */
.text-navy {
color: #0b1c3c; /* Görseldeki koyu lacivert başlık rengi */
}.main-heading {
font-weight: 800;
letter-spacing: -1px; /* Başlıkları daha modern gösterir */
line-height: 1.2;
}/* Sol Sütun Ayarları */
.intro-text {
font-size: 0.95rem;
color: #475569;
line-height: 1.7;
}.btn-link-custom {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: #0b1c3c;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}.btn-link-custom:hover {
color: #2563eb;
gap: 12px; /* Hover durumunda ok işareti sağa kayar */
}.main-image-wrapper img {
border-radius: 16px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
object-fit: cover;
width: 100%;
height: auto;
}/* Sağ Sütun - Hizmet Kartları */
.service-card {
transition: all 0.3s ease;
border-radius: 16px;
padding: 15px;
border: 1px solid transparent;
background-color: transparent;
}/* Kartların üzerine gelince oluşacak şık efekt */
.service-card:hover {
background-color: #ffffff;
border-color: #e2e8f0;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
transform: translateY(-3px);
}.service-img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}.service-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 4px;
}.service-desc {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 0;
line-height: 1.5;
}.service-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition: all 0.3s ease;
}.service-card:hover .service-arrow {
background-color: #e0f2fe;
color: #0284c7;
}/**//* --- GENEL KAPSAYICI (.hakkimizda2) --- */
.hakkimizda2 {
background-color: #ffffff;
padding: 80px 20px;
color: #0f172a;
box-sizing: border-box;
}.hakkimizda2-icon{
color: #b442ea;
}.hakkimizda2 * {
box-sizing: border-box;
}.hakkimizda2-container {
margin: 0 auto;
}/* --- BAŞLIK ALANI --- */
.hakkimizda2-header {
text-align: center;
margin-bottom: 50px;
}.hakkimizda2-header h2 {
font-size: 2.8rem;
color: #0f172a;
/* Koyu lacivert/siyah ton */
line-height: 1.3;
margin: 0;
font-weight: 600;
}/* --- ÖZELLİKLER GRID ALANI --- */
.hakkimizda2-features-bg {
margin-bottom: 80px;
}.hakkimizda2-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 60px;
row-gap: 50px;
margin-bottom: 50px;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}.hakkimizda2-feature-item {
display: flex;
align-items: flex-start;
gap: 25px;
}/* İkon kapsayıcısı ve SVG ayarları */
.hakkimizda2-icon {
flex-shrink: 0;
width: 55px;
height: 55px;
display: flex;
justify-content: center;
align-items: start;
font-size: 45px;
}.hakkimizda2-icon svg {
width: 100%;
height: 100%;
stroke: #7dbdb3;
/* Görseldeki mint yeşili tonu */
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}.hakkimizda2-text h3 {
font-size: 1.35rem;
color: #0f172a;
margin: 0 0 10px 0;
font-weight: 600;
}.hakkimizda2-text p {
font-size: 16px;
color: #64748b;
line-height: 1.5;
margin: 0;
}/* --- FOTOĞRAF GALERİSİ GRID ALANI --- */
.hakkimizda2-gallery {
display: grid;
/* Sol %25, Orta %50, Sağ %25 görünümü için 1fr 2fr 1fr kullanıyoruz */
grid-template-columns: 1fr 2.2fr 1fr;
gap: 20px;
height: 400px;
}.hakkimizda2-gallery-item {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 8px;
/* Çok hafif modern köşe yumuşatması */
}.hakkimizda2-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.5s ease;
}/* Fotoğraflara hover olunca hafif yaklaşma efekti (Opsiyonel premium dokunuş) */
.hakkimizda2-gallery-item:hover img {
transform: scale(1.05);
}/* --- MOBİL UYUMLULUK (Responsive) --- */
@media (max-width: 992px) {
.hakkimizda2-features-bg{
margin-bottom: 0;
}
.hakkimizda2{
padding: 80px 20px 10px 20px;
}
.hakkimizda2-features {
grid-template-columns: 1fr;
gap: 40px;
}.hakkimizda2-gallery {
display: none;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 300px);
height: auto;
}.hakkimizda2-header h2 {
font-size: 2.2rem;
}
}@media (max-width: 768px) {
.hakkimizda2-header h2 {
font-size: 1.8rem;
}.hakkimizda2-feature-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}.hakkimizda2-gallery {
grid-template-rows: repeat(3, 250px);
}
}/**//* Ana Grid Sistemi - Görseldeki 4'lü yapı */
.hizmetler {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
width: 100%;
margin: 0 auto;
padding: 0px 20px;
background-color: #f8f9fa;
}/* Tüm Kutular İçin Ortak Sınıf */
.hizmet-kutu {
width: 100%;
display: flex;
flex-direction: column;
}/* Fotoğraf Alanları */
.foto-kutu {
height: 100%;
min-height: 600px;
position: relative;
overflow: hidden;
}.foto-kutu img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}/* İçerik (Beyaz) Alanlar */
.icerik-kutu {
background-color: #ffffff;
justify-content: center;
}/* -- Sağ Üst: İmplant Alanı -- */
.implant-kutu {
position: relative;
align-items: center;
text-align: center;
padding: 40px;
}.sertifika-rozet {
position: absolute;
top: 30px;
right: 30px;
width: 130px;
height: 130px;
animation: donme 20s linear infinite; /* Yazının yavaşça dönme efekti (İsteğe bağlı) */
}@keyframes donme {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}.implant-gorsel {
width: 280px;
object-fit: contain;
margin-top: 40px;
margin-bottom: 30px;
}.implant-baslik {
color: #121a2f;
font-size: 35px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.5px;
margin-bottom: 15px;
display: block;
}.implant-yazi {
color: #64748b;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
max-width: 80%;
margin-bottom: 25px;
}/* -- Sol Alt: Kanal Tedavisi Yazı Alanı -- */
.text-kutu {
align-items: flex-start;
padding: 60px 80px; /* Kenarlardan bol boşluk */
}.text-kutu h2 {
color: #121a2f;
font-size: 35px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.5px;
margin-bottom: 15px;
display: block;
}.text-kutu .aciklama {
color: #64748b;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
max-width: 80%;
margin-bottom: 25px;
}/* Responsive / Mobil Uyumluluk */
@media screen and (max-width: 1024px) {
.text-kutu {
padding: 40px;
}
.text-kutu h2 {
font-size: 40px;
}
.implant-yazi {
font-size: 18px;
}
}@media screen and (max-width: 768px) {
.hizmetler {
grid-template-columns: 1fr; /* Mobilde alt alta sıralanır */
}.foto-kutu {
min-height: 400px;
}.sertifika-rozet {
width: 100px;
height: 100px;
}.text-kutu {
padding: 30px;
}.text-kutu h2 {
font-size: 32px;
}/* Mobilde okuma kolaylığı için sıralama ayarı (Görsel > Yazı > Görsel > Yazı) */
.implant-kutu {
order: 2;
padding: 40px 20px;
}
.foto-kutu:nth-child(1) {
order: 1;
display: none;
}
.text-kutu {
order: 4;
}
.foto-kutu:nth-child(4) {
order: 3;
}
}/**//* Temel Sıfırlamalar */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}/* Ana Bölüm Ayarları */
.tedavi-videolari {
background-color: #f7f8fa; /* Zarif bir diş kliniği beyaz/gri tonu */
padding: 80px 20px;
width: 100%;
}.container {
max-width: 1400px;
margin: 0 auto;
}/* Başlık ve Açıklama Alanı */
.baslik-alani {
text-align: center;
margin-bottom: 60px;
}.baslik-alani h2 {
color: #121a2f; /* Koyu lacivert şık başlık rengi */
font-size: 34px;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: -0.5px;
}.baslik-alani p {
color: #5f6368;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}/* Video Grid Yapısı */
.video-grid {
width: 100%;
height: auto;
}/* Kart Ayarları */
.video-kart {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}/* Kapak Fotoğrafı Kapsayıcısı */
.video-kapak {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* YouTube 16:9 yatay video formatı */
border-radius: 8px;
overflow: hidden;
display: block;
margin-bottom: 20px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Kliniğe uygun hafif şık gölge */
}.video-kapak img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}.video-kapak:hover img {
transform: scale(1.05); /* Üzerine gelince yavaşça büyüme efekti */
}/* Play İkonu Ayarları (Konsepte uygun Mint Yeşili veya Kırmızı yapılabilir. Burada şık bir kırmızı kullandım) */
.play-buton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(220, 38, 38, 0.9);
width: 55px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}.video-kapak:hover .play-buton {
background-color: rgb(220, 38, 38);
transform: translate(-50%, -50%) scale(1.1); /* İkon da biraz büyür */
}.play-buton svg {
width: 24px;
height: 24px;
}/* Kart Altındaki Başlık Yazıları */
.video-kart h3 {
color: #1a1a1a;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
padding: 0 10px;
}/* Mobil ve Tablet Uyumluluğu */
@media screen and (max-width: 1024px) {
.video-grid {
grid-template-columns: repeat(2, 1fr); /* Tablette 2'li sıra */
}
}@media screen and (max-width: 600px) {
.video-grid {
grid-template-columns: 1fr; /* Telefonda tek sütun */
}.baslik-alani h2 {
font-size: 26px;
}.baslik-alani p {
font-size: 14px;
padding: 0 15px;
}
}/**/
/* Temel Sıfırlamalar */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}/* Footer Ana Kapsayıcı */
.footer1 {
background: radial-gradient(circle at 50% 0%, #411958 0%, #280f37 100%);
color: #ffffff;
padding-top: 80px;
width: 100%;
}.footer-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
/* 4 Sütunlu Grid Yapısı */
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr 1.4fr;
gap: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 60px;
}.footer-col {
display: flex;
flex-direction: column;
}/* 1. Bölüm: Logo */
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}.footer-logo img {
width: auto;
height: 60px;
}.logo-text {
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
}
.brand-desc {
color: #be73ea;
font-size: 15px;
line-height: 1.6;
max-width: 280px;
}/* Ortak Başlık (Menü, İletişim, Galeri İçin) */
.contact-label {
color: #be73ea;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.mb-15 {
margin-bottom: 20px;
display: block;
}
.mb-10 {
margin-bottom: 10px;
display: block;
}
.mb-20 {
margin-bottom: 25px;
display: block;
}/* 2. Bölüm: Menü */
.footer-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-menu li a {
color: #ffffff;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.footer-menu li a span {
color: #ac81d0;
font-size: 18px;
font-weight: bold;
transition: transform 0.3s ease;
}
.footer-menu li a:hover {
color: #ac81d0;
}
.footer-menu li a:hover span {
transform: translateX(5px);
}/* 3. Bölüm: Zarif İletişim & Sosyal Medya */
.contact-links {
display: flex;
flex-direction: column;
gap: 8px;
}/* Tüm iletişim bilgileri aynı kibar boyutta ayarlandı */
.elegant-value {
color: #e2e8f0;
font-size: 15px; /* Adres ve telefon aynı kibar boyutta */
line-height: 1.6;
text-decoration: none;
transition: color 0.3s;
}a.elegant-value:hover {
color: #ac81d0;
}.social-icons {
display: flex;
gap: 12px;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icons a svg {
width: 16px;
height: 16px;
fill: #fff;
}
.social-icons a:hover {
background-color: #ac81d0;
color: #0c1427;
transform: translateY(-3px);
}/* 4. Bölüm: Klinik Galerisi (Fancybox Grid) */
.footer-gallery {
display: grid;
grid-template-columns: repeat(
3,
1fr
); /* Yan yana 3 fotoğraf (Toplam 6 fotoğraf için 2 satır) */
gap: 12px; /* Fotoğraflar arası boşluk */
}.gallery-item {
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
position: relative;
cursor: pointer;
}/* Fotoğrafın üstüne gelince beyaz bir katman ve büyüme efekti */
.gallery-item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(158, 230, 211, 0.2); /* Nane yeşili hafif parlama */
opacity: 0;
transition: opacity 0.3s ease;
}.gallery-item:hover::after {
opacity: 1;
}.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}.gallery-item:hover img {
transform: scale(1.15); /* Resmi hafifçe büyütür */
}/* En Alt Telif Hakkı */
.footer-bottom {
text-align: left;
padding: 25px 40px;
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 12px;
}
.footer-bottom p {
color: #be73ea;
font-size: 14px;
}
.footer-bottom .highlight {
color: #ac81d0;
}.footer-bottom .hasem-logo img {
height: 17px;
}/* Responsive (Mobil ve Tablet Uyumluluğu) */
@media screen and (max-width: 1024px) {
.footer-container {
grid-template-columns: 1fr 1fr; /* Tablette 2 Sütun */
gap: 50px;
}
}@media screen and (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr; /* Mobilde Tek Sütun */
gap: 40px;
padding: 0 20px;
padding-bottom: 40px;
}.footer-gallery {
grid-template-columns: repeat(
4,
1fr
); /* Mobilde resimler küçülmesin diye yan yana 4'lü yap */
}.footer-bottom {
text-align: center;
padding: 20px;
}
}/* --- HAKKIMIZDA MOBİL (768px altı) --- */
@media screen and (max-width: 767px) {
/* Sadece ilk 3 öğeyi göster */
.hakkimizda2-features .hakkimizda2-feature-item {
display: none !important;
}
.hakkimizda2-features .hakkimizda2-feature-item:nth-child(1),
.hakkimizda2-features .hakkimizda2-feature-item:nth-child(2),
.hakkimizda2-features .hakkimizda2-feature-item:nth-child(3) {
display: flex !important;
}
.hakkimizda2-features {
grid-template-columns: 1fr !important; /* Tek sütun */
gap: 30px !important;
}
}