/* ========================================= */
/* === GENEL / TÜM SAYFALARDA KULLANILAN STİLLER === */
/* ========================================= */
/* Genel Ayarlar ve Fontlar */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
.page-header-renk{
color:gold;
}
:root {
/* Renk Paleti */
--primary-color: #007bff;
--secondary-color: #6c757d;
--dark-color: #343a40;
--light-color: #f8f9fa;
--white-color: #ffffff;
--gray-color: #e9ecef;
/* Misyon/Vizyon Özel Renkleri */
--denge-primary-color: #3f51b5;
--denge-secondary-color: #ff9800;
--denge-text-color: #333;
--denge-heading-font: 'Playfair Display', serif;
--denge-body-font: 'Montserrat', sans-serif;
/* Vizyon Sayfası Özel Renkleri */
--background-color: #f8f9fa;
--card-background: #fff;
--text-color: #343a40;
--light-text-color: #6c757d;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
background-color: #f4f7f6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
section {
padding: 4rem 0;
}
h2 {
text-align: center;
margin-bottom: 3rem;
font-size: 2.5rem;
color: var(--primary-color);
position: relative;
}
h2::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--secondary-color);
margin: 0.75rem auto 0;
border-radius: 2px;
}
/* Sayfa Başlıkları ve Breadcrumb (Tüm sayfalarda kullanılabilir) */
.page-header {
background-color: #f0f4f8;
padding: 40px 0;
text-align: center;
border-bottom: 2px solid #e0e4e8;
margin-top: -1rem;
}
.page-header h1 {
font-size: 2.8rem;
color: #1A237E;
margin-bottom: 10px;
}
.breadcrumb {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
}
.breadcrumb li {
margin: 0 5px;
}
.breadcrumb li a {
text-decoration: none;
color: #6c757d;
transition: color 0.3s ease;
}
.breadcrumb li a:hover {
color: #007bff;
}
.breadcrumb li.active {
font-weight: bold;
color: #343a40;
}
.contact-info a {
color: #BBDEFB;
text-decoration: none;
margin-right: 2rem;
white-space: nowrap;
transition: color 0.3s ease;
}
.contact-info a:last-child {
margin-right: 0;
}
.contact-info a:hover {
color: #fff;
}
.contact-info i, .social-icons i, .slogan i {
margin-right: 0.5rem;
}
.slogan span {
margin-right: 2rem;
white-space: nowrap;
}
.slogan span:last-child {
margin-right: 0;
}
.social-icons a {
color: #BBDEFB;
font-size: 1rem;
margin-left: 1rem;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #fff;
}
/* Mevcut CSS Kodları (değişiklik yapmadan) */
/* ... */
/* --- Mobil Görünüm Düzenlemeleri --- */
/* Bu bölüm, mobil ve tablet ekranlar için bayrakların konumunu sabitler */
@media (max-width: 768px) {
/* Genel menü ve logonun kapsayıcısını Flexbox olarak ayarlar */
.header-main {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Dil seçim div'ini sağa yaslar ve logodan uzaklaştırır */
.lang-selection {
/* Bu kural, bayrakları logonun sağ tarafına iterek sabit bir boşluk bırakır */
margin-left: auto;
/* Bu kural, bayraklar ile logo arasına 20px'lik bir boşluk ekler */
margin-left: 20px;
}
}
/* Mevcut dil seçimi stilleriniz */
.lang-selection {
display: flex;
align-items: center;
gap: 10px;
}
.lang-selection .lang-link:first-child {
border-right: 1px solid #BBDEFB;
padding-right: 10px;
}
.lang-link {
display: block;
}
.lang-link img {
width: 24px;
height: auto;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Ana Menü ve Logo Kapsayıcısı */
.header-main {
display: flex;
justify-content: space-between;
align-items: center; /* Öğeleri dikeyde ortalar */
width: 100%;
/* Flexbox'ın doğru çalışması için bu stil çok önemlidir. */
}
/* Dil Seçenekleri Kapsayıcısı */
.lang-selection {
display: flex;
align-items: center;
gap: 10px;
/* Dikey hizalamada ince ayar yapmak için: */
/* Örneğin, 5px yukarı almak için negatif bir değer kullanabiliriz. */
margin-top: -5px;
}
/* Mobil Görünüm Düzenlemeleri */
@media (max-width: 768px) {
.header-main {
display: flex;
flex-direction: row; /* Mobil görünümde yan yana sıralama */
justify-content: space-between;
align-items: center;
width: 100%;
}
.lang-selection {
/* Bayrakları logodan sağa doğru itmek için */
margin-left: 20px;
/* Bayrakları logoya göre yukarı doğru itmek için */
margin-top: -10px; /* Bu değeri deneyerek ayarlayabilirsin. */
}
}
.lang-link img:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* Ana Menü ve Logo Kapsayıcısı */
.header-main {
display: flex;
justify-content: space-between;
align-items: center; /* Öğeleri dikeyde ortalar */
width: 100%;
/* Flexbox'ın doğru çalışması için bu stil çok önemlidir. */
}
/* Dil Seçenekleri Kapsayıcısı */
.lang-selection {
display: flex;
align-items: center;
gap: 10px;
/* Dikey hizalamada ince ayar yapmak için: */
/* Örneğin, 5px yukarı almak için negatif bir değer kullanabiliriz. */
margin-top: -5px;
}
/* Mobil Görünüm Düzenlemeleri */
@media (max-width: 768px) {
.header-main {
display: flex;
flex-direction: row; /* Mobil görünümde yan yana sıralama */
justify-content: space-between;
align-items: center;
width: 100%;
}
.lang-selection {
/* Bayrakları logodan sağa doğru itmek için */
margin-left: 20px;
/* Bayrakları logoya göre yukarı doğru itmek için */
margin-top: -10px; /* Bu değeri deneyerek ayarlayabilirsin. */
}
}
/* Footer Stilleri */
.main-footer {
background-color: var(--dark-color);
color: var(--light-color);
padding-top: 3rem;
font-size: 0.9rem;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section {
flex: 1;
min-width: 200px;
}
.footer-section h3 {
color: var(--primary-color);
font-size: 1.1rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--secondary-color);
padding-bottom: 0.5rem;
}
.footer-section p {
line-height: 1.8;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.75rem;
}
.footer-section ul a {
color: var(--light-color);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul a:hover {
color: var(--primary-color);
}
.footer-section .social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.footer-section .social-links a {
color: var(--white-color);
font-size: 1.25rem;
transition: color 0.3s ease, transform 0.3s ease;
}
.footer-section .social-links a:hover {
color: var(--primary-color);
transform: translateY(-3px);
}
.footer-section.contact ul li i {
margin-right: 0.5rem;
color: var(--primary-color);
}
.footer-bottom {
background-color: #212529;
padding: 1rem 0;
text-align: center;
border-top: 1px solid #495057;
}
/* ========================================= */
/* === ANA SAYFAYA AİT STİLLER === */
/* ========================================= */
/* Banner Alanı */
/* Section banner resmi */
/* Banner Section Styles */
.banner-section {
padding: 0; /* Sayfanın kenarlarına boşluk bırakmamak için */
margin-bottom: 50px; /* Hizmetler bölümüyle arasına boşluk bırakmak için */
overflow: hidden;
}
.banner-container {
position: relative;
width: 100%;
text-align: center;
}
.responsive-image {
width: 100%;
height: auto; /* Görselin en-boy oranını korur */
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Metnin okunabilirliğini artırır */
width: 80%;
text-align: center;
}
.banner-text h2 {
font-size: 2.5em;
margin-bottom: 10px;
}
.banner-text p {
font-size: 1.2em;
line-height: 1.5;
}
/* Responsive Düzenlemeler */
@media (max-width: 768px) {
.banner-text h2 {
font-size: 1.5em;
}
.banner-text p {
font-size: 0.9em;
}
}
@media (max-width: 480px) {
.banner-text {
width: 90%;
}
.banner-text h2 {
font-size: 1.2em;
}
.banner-text p {
font-size: 0.8em;
}
}
/* Section banner bitiş */
/* Teklif al sayfası başlangıc */
.quote-form-section {
padding: 80px 0;
background-color: #f4f7f9;
}
.form-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #004d80;
margin-bottom: 10px;
}
.form-description {
text-align: center;
font-size: 1.1rem;
color: #666;
margin-bottom: 40px;
}
.quote-form {
max-width: 700px;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}
.form-submit {
text-align: center;
}
.submit-btn {
width: 100%;
padding: 15px;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.submit-btn:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.alert {
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.alert.success {
background-color: #d4edda;
color: #155724;
}
.alert.error {
background-color: #f8d7da;
color: #721c24;
}
@media (max-width: 576px) {
.quote-form {
padding: 25px;
}
}
/* Teklif al sayfası bitiş */
/* Uzman Kadro css Başlangıc */
/* Team Section Styles */
.team-section {
padding: 80px 0;
background-color: #f9f9f9;
text-align: center;
}
.team-title {
font-size: 2.5em;
margin-bottom: 50px;
color: var(--primary-color);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.team-member {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-member:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.member-title {
font-size: 1.4em;
color: var(--primary-color);
margin-bottom: 10px;
}
.member-name {
font-size: 1.1em;
color: #555;
font-weight: 500;
}
/* Responsive Düzenlemeler */
@media (max-width: 768px) {
.team-title {
font-size: 2em;
margin-bottom: 30px;
}
}
/* Uzman Kadro css bitiş */
.banner {
position: relative;
width: 100%;
height: 550px;
min-height: 300px;
background: url('https://via.placeholder.com/1920x700?text=Temiz+Su+Arkaplanı+Modern') no-repeat center center;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 15px;
overflow: hidden;
margin-bottom: 80px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease-out;
}
.banner:hover {
transform: scale(1.01);
}
.banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 30, 60, 0.75);
z-index: 0;
}
.banner-content {
position: relative;
z-index: 1;
padding: 20px 40px;
max-width: 1000px;
margin: 0 auto;
}
.banner-content h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3.8em;
font-weight: 700;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 25px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
color: #ffffff;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
.banner-content p {
font-size: 1.3em;
font-weight: 400;
line-height: 1.6;
text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
max-width: 800px;
margin: 0 auto;
color: #f0f0f0;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}
/* Hizmetler Bölümü */
.service-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.service-cards .card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-cards .card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.service-cards .card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.service-cards .card-content {
padding: 20px;
}
.service-cards .card h3 {
font-size: 1.5rem;
color: #004d80;
margin-bottom: 10px;
}
.service-cards .card p {
font-size: 1rem;
color: #555;
line-height: 1.5;
}
.service-cards .btn-more {
display: inline-block;
margin-top: 15px;
padding: 8px 16px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.service-cards .btn-more:hover {
background-color: #0056b3;
}
@media (max-width: 992px) {
.service-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.service-cards {
grid-template-columns: 1fr;
}
}
/* Neden Biz Bölümü (cards) */
.why-us-section {
background-color: var(--gray-color);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-item {
text-align: center;
background: var(--white-color);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.feature-item:hover {
transform: scale(1.05);
}
.feature-item .icon-placeholder {
background: var(--primary-color);
}
.feature-item h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--dark-color);
}
.feature-item p {
color: #666;
}
/* Anasayfa whatsapp ve teklif al buton css başlangıc */
.cta-buttons-container {
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
gap: 15px; /* Butonlar arasına boşluk bırakır */
z-index: 1000; /* Diğer tüm içeriklerin üzerinde görünmesini sağlar */
}
.cta-btn {
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
}
.cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.cta-btn-primary {
background-color: #007bff; /* Mavi renk */
}
.cta-btn-whatsapp {
background-color: #25D366; /* WhatsApp yeşili */
}
.cta-btn-whatsapp i {
margin-right: 8px;
}
/* Anasayfa whatsapp ve teklif al buton css bitiş */
/* Anasayfa Ekibimiz css başlangıc */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
text-align: center;
}
.team-member {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
padding: 20px;
}
.team-member:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.member-image-container {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 4px solid #007bff; /* Mavi çerçeve */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-member:hover .member-image {
transform: scale(1.1);
}
.member-info {
text-align: center;
}
.member-title {
font-size: 1.1rem;
font-weight: 600;
color: #0056b3;
margin-bottom: 5px;
}
.member-name {
font-size: 1rem;
color: #6c757d;
font-weight: 400;
}
/* Anasayfa Ekibimiz css bitiş */
/* ========================================= */
/* === KURUMSAL SAYFALARINA AİT STİLLER === */
/* ========================================= */
/* Hakkımızda Bölümü */
.about-section p {
text-align: center;
max-width: 800px;
margin: 0 auto;
font-size: 1.15rem;
color: #555;
}
/* Neden Biz Bölümü (list) */
.why-us-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.why-us-list > div {
background: var(--white-color);
border-left: 4px solid var(--primary-color);
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.why-us-list h3 {
color: var(--primary-color);
margin-bottom: 0.5rem;
font-size: 1.25rem;
}
.why-us-list p {
color: #666;
}
/* Hakkımızda Genel CSS */
.about-us-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
/* İçerik Bölümü (Beyaz Kutu) */
.content-section {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 60px;
padding: 70px 50px;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
margin-bottom: 80px;
}
.image-wrapper {
flex: 1;
min-width: 350px;
display: flex;
justify-content: center;
}
.content-image {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.4s ease-out;
}
.content-image:hover {
transform: scale(1.05);
}
.text-wrapper {
flex: 2;
min-width: 350px;
line-height: 1.8;
}
.text-wrapper h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2.8em;
font-weight: 600;
margin-bottom: 25px;
color: #004a75;
border-left: 5px solid #007bb5;
padding-left: 15px;
}
.text-wrapper p {
font-size: 1.1em;
margin-bottom: 25px;
}
/* Hikayemiz Bölümü */
.story-section {
text-align: center;
padding: 80px 20px;
background-color: #e6f2f7;
border-radius: 15px;
margin-bottom: 80px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.story-section h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2.8em;
font-weight: 600;
color: #004a75;
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.story-section h2::after {
content: '';
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #007bb5;
border-radius: 2px;
}
.story-section p {
max-width: 900px;
margin: 0 auto;
font-size: 1.2em;
font-weight: 300;
}
/* Neden Bizi Seçmelisiniz Bölümü */
.why-us-section h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2.8em;
font-weight: 600;
color: #004a75;
margin-bottom: 50px;
position: relative;
display: inline-block;
}
.why-us-section h2::after {
content: '';
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #007bb5;
border-radius: 2px;
}
.reasons-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.reason-item {
background-color: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
flex: 1 1 280px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
text-align: left;
}
.reason-item:hover {
transform: translateY(-15px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
.reason-item h3 {
font-size: 1.6em;
font-weight: 600;
color: #007bb5;
margin-bottom: 15px;
}
.reason-item p {
font-size: 1em;
line-height: 1.7;
color: #666;
}
/* --- MİSYONUMUZ SAYFASI --- */
.mission-page-main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* Başlık Stilleri */
.page-header h1,
.mission-page-main h2,
.mission-page-main h3 {
font-family: 'Montserrat', sans-serif;
color: #1e3a5f;
line-height: 1.2;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
position: relative;
padding-bottom: 0.5rem;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: #007bff;
margin: 0.5rem auto 0;
}
/* Misyon Hero Bölümü */
.mission-hero-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
margin-bottom: 5rem;
}
.mission-hero-content {
flex: 1;
padding: 2rem;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.mission-hero-content h2 {
font-size: 2.8rem;
font-weight: 800;
}
.mission-hero-image {
flex: 1;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.mission-hero-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.mission-hero-image img:hover {
transform: scale(1.05);
}
/* Uzmanlık Alanları Kartları */
.mission-values-section {
padding: 4rem 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.value-card {
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
padding: 2.5rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover {
transform: translateY(-15px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
/* BURADA DEĞİŞİKLİK YAPILDI: Resim boyutu bir kez daha büyütüldü */
.value-card img {
width: 150px; /* Eski değer: 100px idi, şimdi daha büyük */
height: auto;
margin-bottom: 1.5rem;
}
.value-card h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.value-card p {
font-size: 0.95rem;
color: #666;
}
/* Vizyon Bölümü */
.mission-vision-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
padding-top: 5rem;
}
.vision-image {
flex: 1;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.vision-image img {
width: 100%;
height: auto;
display: block;
}
.vision-content {
flex: 1;
}
.vision-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* Mobil Uyumlu Tasarım (Responsive) */
@media (max-width: 992px) {
.mission-hero-section,
.mission-vision-section {
flex-direction: column;
gap: 2rem;
}
.mission-hero-content {
padding: 1.5rem;
}
.mission-vision-section .vision-image {
order: -1;
}
.mission-page-main {
padding: 1rem;
}
}
/* --- VİZYONUMUZ SAYFASI --- */
.vision-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
gap: 3rem;
}
.vision-statement {
text-align: center;
}
.vision-title {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.vision-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background-color: var(--primary-color);
margin: 10px auto 0;
border-radius: 2px;
}
.vision-text {
font-size: 1.15rem;
color: var(--secondary-color);
max-width: 800px;
margin: 0 auto;
}
.vision-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
width: 100%;
}
.gallery-item {
background-color: var(--card-background);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.item-content {
padding: 1.5rem;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.item-title {
font-size: 1.5rem;
color: var(--text-color);
margin-top: 0;
margin-bottom: 0.5rem;
}
.item-description {
font-size: 1rem;
color: var(--light-text-color);
}
/* Zaman Tüneli */
.timeline-container {
padding: 3rem 1rem;
}
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--primary-color);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
.timeline-item::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: var(--accent-color);
border: 4px solid var(--card-background);
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timeline-item:nth-child(even) {
left: 50%;
}
.timeline-item:nth-child(even)::after {
left: -16px;
}
.timeline-content {
padding: 20px 30px;
background: var(--card-background);
position: relative;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-content {
transform: translateY(-5px);
}
/* Vizyonumuz Başlıklar ve Hedefler */
.vision-main-title {
font-size: 2.8rem;
font-weight: 700;
color: #004d40;
text-align: center;
margin-bottom: 20px;
letter-spacing: 1px;
}
.vision-intro-text,
.vision-paragraph,
.vision-closing-text {
font-size: 1.1rem;
text-align: center;
max-width: 800px;
margin: 0 auto 30px auto;
color: #555;
}
.vision-subtitle {
font-size: 2rem;
font-weight: 600;
color: #00796b;
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
}
.vision-goals {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
}
.goal-item {
background-color: #f2f7f7;
border-radius: 10px;
padding: 30px;
text-align: center;
flex-basis: 30%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.goal-item:hover {
transform: translateY(-10px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.goal-title {
font-size: 1.3rem;
font-weight: 600;
color: #004d40;
margin-top: 0;
}
.goal-description {
font-size: 1rem;
color: #666;
}
/* ========================================= */
/* === REFERANSLAR SAYFASINA AİT STİLLER === */
/* ========================================= */
/* ========================================= */
/* === SIFIRDAN YAZILMIŞ MÜKEMMEL REFERANS SAYFASI TASARIMI === */
/* ========================================= */
:root {
--primary-color: #0056b3; /* Koyu Mavi */
--accent-color: #007bff; /* Açık Mavi */
--dark-color: #1a1a1a;
--text-color: #444;
--light-color: #f8f9fa;
--white-color: #fff;
--shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
--shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* --- Genel Sayfa Ayarları --- */
body {
background-color: var(--light-color);
font-family: 'Roboto', sans-serif;
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
color: var(--dark-color);
}
/* Google Fontları için HTML'in bölümüne bunları ekleyin: */
/* */
/* */
/* */
/* --- Page Header ve Breadcrumb --- */
.page-header {
background-color: var(--white-color);
padding: 3rem 0;
margin-bottom: 0;
box-shadow: var(--shadow-light);
text-align: center;
}
.page-header h1 {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.breadcrumb {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
.breadcrumb li a {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb li a:hover {
color: var(--primary-color);
}
.breadcrumb li i {
font-size: 0.8rem;
color: #bbb;
margin: 0 0.75rem;
}
.breadcrumb li.active {
color: var(--primary-color);
font-weight: 500;
}
/* --- Bölüm Boşlukları ve Başlıklar --- */
.referans-hero-section {
padding: 5rem 0;
}
.referans-gallery-section {
padding: 3rem 0;
}
.referans-intro-text h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.referans-intro-text p {
font-size: 1.2rem;
line-height: 1.8;
max-width: 900px;
margin: 0 auto 3rem;
}
/* --- Kategori Butonları --- */
.referans-filter-buttons-group {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.filter-btn {
padding: 1rem 2.5rem;
border-radius: 50px;
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary-color);
color: var(--white-color);
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
/* --- Referans Kartları --- */
.referans-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
}
.referans-card-link {
text-decoration: none;
display: block;
height: 100%;
}
.referans-card {
background-color: var(--white-color);
border-radius: 15px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-light);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.referans-card:hover {
transform: scale(1.03);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Resim ve Bilgi Alanı */
.referans-card-image-wrapper {
position: relative;
width: 100%;
padding-top: 70%;
overflow: hidden;
}
.referans-card-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.referans-card:hover .referans-card-image {
transform: scale(1.05);
}
.referans-card-info {
padding: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: center;
}
.referans-card-info .card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.referans-card-info .card-detail {
font-size: 0.95rem;
color: var(--text-color);
line-height: 1.6;
margin-bottom: 0.25rem;
}
.referans-card-info .card-detail strong {
color: var(--primary-color);
font-weight: 700;
}
/* Detay Butonu */
.card-button-wrapper {
margin-top: 1.5rem;
text-align: center;
}
.card-button {
background-image: linear-gradient(to right, var(--accent-color) 0%, var(--primary-color) 100%);
border: none;
color: var(--white-color);
font-weight: 500;
padding: 15px 30px;
border-radius: 50px;
transition: all 0.4s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: inline-block;
width: 100%;
}
.referans-card:hover .card-button {
background-position: right center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
transform: translateY(-3px);
}
/* ========================================= */
/* --- RESPONSIVE AYARLAR (Tablet ve Mobil) --- */
/* ========================================= */
@media (max-width: 992px) {
.referans-hero-section {
padding: 4rem 0;
}
.referans-intro-text h1 {
font-size: 2.5rem;
}
.referans-intro-text p {
font-size: 1.1rem;
}
.referans-card-grid {
gap: 2rem;
}
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 2rem;
}
.referans-hero-section {
padding: 3rem 0;
}
.referans-gallery-section {
padding: 2rem 0;
}
.referans-intro-text h1 {
font-size: 2rem;
}
.referans-intro-text p {
font-size: 1rem;
}
.referans-card-grid {
grid-template-columns: 1fr;
}
}
.lang-selection {
position: absolute;
top: 25px;
right: 80px;
}
/* Hakkımızda Sayfası İçin Responsive */
.banner {
height: 450px;
margin-bottom: 60px;
}
.banner-content h1 {
font-size: 3em;
letter-spacing: 1.5px;
}
.banner-content p {
font-size: 1.1em;
}
.text-wrapper h2, .story-section h2, .why-us-section h2 {
font-size: 2.5em;
}
/* Misyon Sayfası İçin Responsive */
.denge-mission-section.denge-hero {
flex-direction: row;
}
.denge-mission-section.denge-vision {
flex-direction: row-reverse;
}
/* Vizyon Sayfası İçin Responsive */
.vision-container {
margin: 20px;
padding: 15px;
}
.vision-main-title {
font-size: 2.2rem;
}
.vision-subtitle {
font-size: 1.7rem;
}
.vision-intro-text, .vision-paragraph, .vision-closing-text {
font-size: 1rem;
}
.goal-item {
flex-basis: 45%;
}
/* Zaman Tüneli Responsive */
.timeline::after {
left: 31px;
}
.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-item::after {
left: 15px;
}
.timeline-item:nth-child(even) {
left: 0;
}
.timeline-item:nth-child(even)::after {
left: 15px;
}
}
/* Küçük Mobil Cihazlar (max-width: 768px) */
@media (max-width: 768px) {
h2 {
font-size: 2rem;
}
.container {
padding: 0 1.5rem;
}
.service-cards, .features-grid, .why-us-list {
grid-template-columns: 1fr;
}
/* Footer Responsive */
.footer-content {
flex-direction: column;
text-align: center;
gap: 3rem;
}
.footer-section h3 {
border-bottom: none;
padding-bottom: 0;
}
.footer-section .social-links {
justify-content: center;
}
/* Hakkımızda Sayfası İçin Responsive */
.about-us-container {
padding: 20px;
}
.banner {
height: 350px;
border-radius: 10px;
margin-bottom: 40px;
}
.banner-content {
padding: 15px 25px;
}
.banner-content h1 {
font-size: 2.2em;
letter-spacing: 1px;
margin-bottom: 15px;
}
.banner-content p {
font-size: 0.9em;
line-height: 1.5;
}
.content-section {
flex-direction: column;
padding: 50px 20px;
margin-bottom: 50px;
}
.text-wrapper {
text-align: center;
padding-right: 0;
}
.text-wrapper h2 {
border-left: none;
padding-left: 0;
text-align: center;
font-size: 2em;
}
.reasons-list {
flex-direction: column;
}
.reason-item {
text-align: center;
}
.reason-item h3 {
padding-left: 0;
}
.story-section {
margin-bottom: 50px;
padding: 60px 20px;
}
/* Misyon Sayfası İçin Responsive */
.denge-mission-content {
text-align: center;
}
.denge-mission-content p {
text-align: justify;
}
.denge-mission-section {
padding: 50px 5%;
}
/* Vizyon Sayfası İçin Responsive */
.vision-title {
font-size: 2rem;
}
.vision-text {
font-size: 1rem;
}
.vision-gallery {
grid-template-columns: 1fr;
}
.page-header {
padding: 30px 0;
}
.page-header h1 {
font-size: 2.2rem;
}
}
/* En Küçük Cihazlar (max-width: 480px) */
@media (max-width: 480px) {
h2 {
font-size: 1.75rem;
}
.card, .service-item, .feature-item {
padding: 1.5rem;
}
/* Hakkımızda Sayfası İçin Responsive */
.banner {
height: 280px;
min-height: 200px;
border-radius: 8px;
}
.banner-content h1 {
font-size: 1.8em;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.banner-content p {
font-size: 0.8em;
line-height: 1.4;
}
.text-wrapper h2, .story-section h2, .why-us-section h2 {
font-size: 1.8em;
}
.reason-item {
padding: 30px;
}
.reason-item h3 {
font-size: 1.4em;
}
.story-section p {
font-size: 1em;
}
/* Referans Sayfası İçin Responsive */
.page-header h1 {
font-size: 1.8rem;
}
.breadcrumb {
font-size: 0.9rem;
}
/* Vizyon Sayfası İçin Responsive */
.vision-main-title {
font-size: 1.8rem;
}
.vision-subtitle {
font-size: 1.5rem;
}
.goal-item {
flex-basis: 100%;
}
}
/*proje sayfası */
/* Ana Kapsayıcı ve Bölüm Ayarları */
.proje-page-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.proje-section-container {
margin-bottom: 60px;
}
.proje-section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 40px;
position: relative;
padding-bottom: 10px;
}
.proje-section-title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #3498db;
border-radius: 2px;
}
/* Grid Yapısı (Hem Taahhütler Hem de Ürünler İçin) */
.proje-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
/* Her Bir Grid Öğesi için Temel Stil */
.proje-grid-item {
background-color: #fff;
padding: 30px;
text-align: center;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.proje-grid-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.proje-grid-item i {
font-size: 3rem;
color: #3499db;
margin-bottom: 15px;
}
.proje-grid-item-title {
font-size: 1.5rem;
color: #333;
margin-bottom: 10px;
}
.proje-grid-item-description {
font-size: 1rem;
color: #666;
line-height: 1.6;
}
/* Ürün Kartları için Özel Stil */
.proje-grid-item-product {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.proje-grid-item-product:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.proje-grid-item-product img {
width: 100%;
height: 200px;
object-fit: cover;
}
.proje-grid-item-product .proje-grid-item-title {
margin-top: 20px;
padding: 0 20px;
}
.proje-grid-item-product .proje-grid-item-description {
padding: 0 20px 20px;
}
/* Mobil Uyumlu Tasarım (Responsive) */
@media (max-width: 768px) {
.proje-section-title {
font-size: 2rem;
}
.proje-grid-container {
grid-template-columns: 1fr;
}
}
/* Genel Yapı ve Sıfırlama */
.proje-page-content {
font-family: 'Poppins', sans-serif; /* Daha modern bir font */
width: 100%;
padding: 20px 0;
}
/* Bölüm Başlığı - 'can alıcı' ve profesyonel bir görünüm */
.proje-section-title {
font-size: 3em;
font-weight: 800;
color: #2c3e50;
text-align: center;
margin-bottom: 60px;
letter-spacing: -1px; /* Daha sıkı harf aralığı */
position: relative;
padding-bottom: 10px;
}
.proje-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 6px;
background-color: #007bff; /* Mavi vurgu rengi */
border-radius: 3px;
}
/* Esnek Izgara Yapısı */
.proje-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Esnek ve dinamik grid */
gap: 40px; /* Daha fazla boşluk */
justify-items: center;
align-items: stretch;
}
/* Her Bir Ürün Kartı */
.proje-grid-item-product {
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.proje-grid-item-product:hover {
transform: translateY(-15px); /* Daha belirgin bir yukarı kayma efekti */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/*==================================
GENEL AYARLAR
===================================*/
:root {
--primary-blue: #17a2b8;
--dark-blue: #0e6f85;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--dark-gray: #343a40;
--text-color: #495057;
--shadow-light: rgba(0, 0, 0, 0.05);
--shadow-medium: rgba(0, 0, 0, 0.15);
}
* {
box-sizing: border-box;
}
/*==================================
İSTATİSTİK BÖLÜMÜ
(Masaüstü ve mobil uyumlu hale getirildi)
===================================*/
.stats-section {
background-color: #fff;
padding: 80px 0;
text-align: center;
border-bottom: 1px solid var(--medium-gray);
}
.stats-grid {
display: flex; /* Esnek kutu düzeni */
justify-content: space-around; /* Öğeler arasında eşit boşluk */
flex-wrap: wrap; /* Gerekirse alt satıra geçişi sağlar */
gap: 30px; /* Öğeler arası boşluk */
}
.stat-item {
padding: 20px;
text-align: center;
flex: 1;
min-width: 150px; /* Mobil cihazlarda çok küçülmesini önler */
}
.stat-number {
font-size: 3.5rem;
font-weight: 700;
color: var(--primary-blue);
display: block;
line-height: 1;
}
.stat-text {
font-size: 1.1rem;
color: var(--text-color);
margin-top: 10px;
font-weight: 500;
}
/* Mobil cihazlar için responsive ayar */
@media (max-width: 768px) {
.stats-section {
padding: 50px 0; /* Mobil görünümde daha az boşluk */
}
.stats-grid {
flex-direction: column; /* Mobil cihazlarda sütun düzenine geçer */
gap: 20px;
}
.stat-item {
min-width: 100%; /* Her öğe kendi satırını kaplar */
}
.stat-number {
font-size: 2.5rem; /* Mobil için font boyutunu küçültür */
}
.stat-text {
font-size: 1rem;
}
}
/* Ürün Başlığı */
.proje-grid-item-title {
font-size: 1.6em;
font-weight: 700;
color: #34495e;
margin: 15px 0 10px;
}
/* Açıklama Metni */
.proje-grid-item-description {
font-size: 0.95em;
color: #7f8c8d;
line-height: 1.7;
margin-bottom: 25px;
flex-grow: 1;
}
/* Detay Butonu - Şık ve modern */
.proje-btn-detail {
display: inline-block;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: #007bff; /* Başlangıç rengi */
color: #fff;
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.proje-btn-detail:hover {
background: #0056b3; /* Hover rengi */
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Mobile Cihazlar İçin Ayar */
@media (max-width: 768px) {
.proje-section-title {
font-size: 2.2em;
}
.proje-grid-container {
grid-template-columns: 1fr;
}
}
/*proje son*/
/*proje detay baslangıc */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--dark-color: #343a40;
--light-color: #f8f9fa;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: var(--dark-color);
background-color: var(--light-color);
margin: 0;
padding: 0;
}
.container-detay {
max-width: 1140px;
margin: 0 auto;
padding: 2rem;
}
/* Sayfa Başlığı ve Ekmek Kırıntıları */
.page-header-detay {
background-color: white;
padding: 2rem;
border-bottom: 1px solid #e9ecef;
box-shadow: 0 2px 4px rgba(0,0,0,.05);
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header-detay h1 {
font-size: 2.5rem;
margin: 0;
color: var(--dark-color);
}
.breadcrumb-detay {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.breadcrumb-detay li {
font-size: 0.9rem;
color: var(--secondary-color);
display: flex;
align-items: center;
}
.breadcrumb-detay a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb-detay a:hover {
color: #0056b3;
}
.breadcrumb-detay i {
margin: 0 8px;
color: #ccc;
}
.breadcrumb-detay .active {
font-weight: bold;
color: var(--dark-color);
}
/* Ürün İçerik Alanı */
.product-content {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.product-content h2 {
font-size: 2rem;
color: var(--primary-color);
border-bottom: 2px solid #e9ecef;
padding-bottom: 1rem;
margin-top: 2rem;
}
.product-content p, .product-content div {
font-size: 1rem;
margin-bottom: 1.5rem;
color: #495057;
}
/* Profesyonel Galeri */
.product-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 3rem;
}
.gallery-item {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background-color: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
}
.gallery-item-image {
width: 100%;
height: 250px; /* Sabit yükseklik, daha profesyonel bir görünüm için */
object-fit: cover;
border-bottom: 1px solid #ddd;
}
.gallery-item-caption {
padding: 1rem;
text-align: center;
}
.gallery-item-caption h4 {
font-size: 1.1rem;
color: var(--primary-color);
margin: 0 0 0.5rem;
}
.gallery-item-caption p {
font-size: 0.9rem;
color: #6c757d;
margin: 0;
line-height: 1.4;
}
/* proje detay bitiş */
/*referans detay sayfa başlangıç */
/* ========================================= */
/* === REFERANS DETAY SAYFASI TASARIMI === */
/* ========================================= */
/* Genel Sayfa Boşlukları ve Konteyner */
.referans-detay-section {
padding: 5rem 0;
}
/* Proje İçerik Bölümü */
.project-content {
background-color: #fff;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
.project-main-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #0056b3;
}
.project-description {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
margin-bottom: 2rem;
}
/* Fotoğraf Galerisi */
.project-photos-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 2rem;
}
.photo-item {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.photo-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Proje Bilgi Kartı */
.project-info-card {
background-color: #fff;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: sticky;
top: 20px; /* Kaydırma yaparken yukarıdan boşluk bırakır */
}
.info-card-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.5rem;
border-bottom: 3px solid #0056b3;
padding-bottom: 1rem;
}
.info-list {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.info-list li {
font-size: 1rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
}
.info-list li strong {
color: #0056b3;
}
.info-list li span {
font-weight: 500;
}
/* Geri Dön Butonu */
.btn-back-to-list {
display: block;
width: 100%;
padding: 1rem;
text-align: center;
border-radius: 50px;
background-color: #007bff;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.btn-back-to-list:hover {
background-color: #0056b3;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
/* Mobil için Ayarlar */
@media (max-width: 991px) {
.project-info-card {
position: static;
margin-top: 2rem;
}
}
@media (max-width: 767px) {
.referans-detay-section {
padding: 3rem 0;
}
.project-content, .project-info-card {
padding: 1.5rem;
}
.project-main-title {
font-size: 2rem;
}
.project-description {
font-size: 1rem;
}
}
/* Ana projenin görsel stili */
.main-project-image-wrapper {
margin-bottom: 20px;
}
.main-project-image {
width: 100%;
max-width: 800px; /* İstediğiniz boyutu burada ayarlayabilirsiniz */
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Küçük resimlerin bulunduğu galeri */
.project-thumbnails-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
/* Her bir küçük resim kapsayıcısı */
.gallery-thumbnail {
width: 150px; /* İstediğiniz küçük resim boyutunu burada ayarlayabilirsiniz */
height: 100px;
overflow: hidden;
display: block;
border: 2px solid #ddd;
border-radius: 5px;
transition: transform 0.2s, border-color 0.2s;
}
.gallery-thumbnail:hover {
transform: scale(1.05);
border-color: #007bff; /* Hover efekti için renk */
}
/* Küçük resmin içindeki görselin ayarı */
.gallery-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover; /* Resmi kutuya sığacak şekilde kaplar */
}
/*referans detay sayfa başlanbitiş*/
/*iletişim başlangıç*/
/*==================================
İLETİŞİM SAYFASI - GENEL DÜZEN
===================================*/
/*==================================
İLETİŞİM SAYFASI - GENEL DÜZEN
===================================*/
.iletisim-container {
display: flex;
flex-direction: column;
max-width: 1400px;
margin: 0 auto;
padding: 50px 15px;
gap: 50px;
}
/* Form ve Bilgi Kısımlarını Birleştiren Kapsayıcı */
.form-and-info-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
}
/* İletişim Formu */
.iletisim-form-section {
flex: 1;
padding: 30px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* Form Elemanları */
.form-title {
font-size: 2.5rem;
color: var(--dark-blue);
margin-bottom: 10px;
}
.form-description {
font-size: 1.1rem;
color: var(--text-color);
margin-bottom: 30px;
}
.iletisim-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-size: 1rem;
font-weight: 500;
color: var(--dark-gray);
margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
padding: 12px;
border: 1px solid var(--medium-gray);
border-radius: 8px;
font-size: 1rem;
width: 100%;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.25);
}
.submit-button {
background-color: var(--primary-blue);
color: #fff;
border: none;
padding: 15px 30px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.submit-button:hover {
background-color: var(--dark-blue);
transform: translateY(-2px);
}
.success-message {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
/*==================================
İLETİŞİM BİLGİLERİ BÖLÜMÜ
===================================*/
.iletisim-bilgi-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
padding: 30px;
background-color: #f8f9fa;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.bilgi-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.bilgi-icon {
font-size: 1.5rem;
color: var(--primary-blue);
flex-shrink: 0;
width: 40px;
text-align: center;
}
.bilgi-item h4 {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
color: var(--dark-gray);
}
.bilgi-item p {
margin: 0;
font-size: 1rem;
color: var(--text-color);
}
/*==================================
GOOGLE HARİTALAR BÖLÜMÜ
===================================*/
.iletisim-map-section {
width: 100%;
height: 500px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-top: 30px;
}
.iletisim-map-section iframe {
width: 100%;
height: 100%;
border: 0;
}
/*==================================
SIKÇA SORULAN SORULAR BÖLÜMÜ
===================================*/
.sss-section {
padding: 80px 0;
}
.sss-accordion {
max-width: 800px;
margin: 0 auto;
}
.sss-item {
border-bottom: 1px solid var(--medium-gray);
margin-bottom: 15px;
}
.sss-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.sss-header:hover {
background-color: var(--light-gray);
}
.sss-header h4 {
margin: 0;
font-size: 1.1rem;
color: var(--dark-blue);
font-weight: 600;
}
.sss-icon {
color: var(--text-color);
transition: transform 0.3s;
}
.sss-item.open .sss-icon {
transform: rotate(180deg);
}
.sss-body {
padding: 0 20px 20px;
display: none;
}
/*==================================
RESPONSIVE DÜZENLEMELER
===================================*/
@media (min-width: 769px) {
.form-and-info-wrapper {
flex-direction: row;
gap: 30px;
}
.iletisim-bilgi-section {
height: auto;
}
}
/*iletişim bitiş*/
/*Hizmetlerimizin başlangıc*/
/* ========================================= */
/* === GENEL SAYFA VE BİLEŞEN STİLLERİ === */
/* ========================================= */
.dgn-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* ========================================= */
/* === YENİ ANA BANNER ALANI STİLLERİ === */
/* ========================================= */
.dgn-main-banner {
width: 100%;
height: 736px; /* Masaüstü için sabit yükseklik */
background-size: cover; /* Resmin en-boy oranını koruyarak div'i tam doldurur */
background-position: center center; /* Resmi ortalar */
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
color: #fff;
border-radius: 12px;
overflow: hidden;
}
.dgn-banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah katman */
z-index: 1;
}
.dgn-banner-content {
position: relative;
z-index: 2;
max-width: 90%;
}
.dgn-banner-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.dgn-banner-desc {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 0;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.dgn-fallback-banner {
background-image: url('assets/images/placeholder_banner.jpg');
background-color: #3f51b5;
}
/* ========================================= */
/* === KATEGORİ İÇERİK DÜZENİ STİLLERİ === */
/* ========================================= */
.dgn-general-category-design {
padding: 3rem 0;
}
.dgn-content-with-image {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
margin-bottom: 3rem;
}
.dgn-content-with-image.dgn-reverse-layout {
flex-direction: row-reverse;
}
.dgn-content-with-image .dgn-image-wrapper {
flex: 1 1 45%;
min-width: 300px;
}
.dgn-content-with-image .dgn-text-wrapper {
flex: 1 1 50%;
}
.dgn-content-with-image img {
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* ========================================= */
/* === "NEDEN BİZ?" ALANI STİLLERİ === */
/* ========================================= */
.dgn-why-us {
background-color: #f8f9fa;
padding: 4rem 0;
}
.dgn-why-us-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
text-align: center;
}
.dgn-why-us-item {
background-color: #fff;
padding: 2.5rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgn-why-us-item:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.dgn-why-us-item i {
font-size: 3rem;
color: #007bff;
margin-bottom: 1.5rem;
}
.dgn-why-us-item h3 {
font-size: 1.5rem;
color: #333;
margin-bottom: 0.75rem;
}
.dgn-why-us-item p {
color: #6c757d;
line-height: 1.6;
}
/* ========================================= */
/* === AÇIKLAMA BLOKLARI STİLLERİ === */
/* ========================================= */
.dgn-content-block {
margin-bottom: 3rem;
padding: 2rem;
background-color: #f0f4f8;
border-radius: 8px;
}
.dgn-content-block h2 {
font-size: 2rem;
color: #004d99;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 1.5rem;
}
.dgn-content-block p {
font-size: 1.1rem;
color: #495057;
line-height: 1.8;
}
/* ========================================= */
/* === GÜNCELLENMİŞ GALERİ STİLİ === */
/* ========================================= */
.dgn-image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 3rem;
}
.dgn-gallery-item {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.dgn-gallery-item:hover {
transform: scale(1.03);
}
.dgn-gallery-item img {
width: 100%;
height: auto;
display: block;
}
.dgn-gallery-info {
padding: 1rem;
background-color: #fff;
flex-grow: 1;
}
.dgn-gallery-info h3 {
font-size: 1.25rem;
color: #333;
margin-bottom: 0.5rem;
}
.dgn-gallery-info p {
font-size: 0.95rem;
color: #6c757d;
line-height: 1.5;
}
.dgn-contact-info {
text-align: center;
background-color: #f8f9fa;
padding: 4rem 0;
margin-top: 4rem;
}
.dgn-contact-info h2 {
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
}
.dgn-contact-info p {
font-size: 1.25rem;
color: #555;
line-height: 1.8;
}
/* ========================================= */
/* === RESPONSIVE MEDYA SORGULARI === */
/* ========================================= */
@media (max-width: 1408px) {
.dgn-main-banner {
height: 600px;
}
}
@media (max-width: 992px) {
.dgn-main-banner {
height: 450px;
}
.dgn-banner-title {
font-size: 2.5rem;
}
.dgn-banner-desc {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.dgn-main-banner {
height: 350px;
}
.dgn-banner-title {
font-size: 2rem;
}
.dgn-banner-desc {
font-size: 1rem;
}
.dgn-content-with-image,
.dgn-content-with-image.dgn-reverse-layout {
flex-direction: column;
}
.dgn-content-with-image .dgn-image-wrapper,
.dgn-content-with-image .dgn-text-wrapper {
flex: 1 1 100%;
}
.dgn-references-section h2 {
font-size: 2rem;
}
.dgn-reference-item img {
height: 350px;
}
}
@media (max-width: 480px) {
.dgn-references-section h2 {
font-size: 1.75rem;
}
.dgn-reference-item img {
height: 250px;
}
}
.deneme{
width: 250px important;
height: 250px important;
}
.ref-grid-bolum {
padding: 40px 20px;
background: #f9f9f9;
}
.ref-grid-baslik {
text-align: center;
margin-bottom: 30px;
}
.ref-grid-baslik h2 {
font-size: 2rem;
font-weight: 600;
color: #333;
}
.ref-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.ref-grid-item {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.ref-grid-img img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.ref-grid-content {
padding: 15px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ref-grid-content h3 {
font-size: 1.1rem;
margin: 0 0 8px;
color: #222;
}
.ref-grid-content p {
font-size: 0.95rem;
color: #666;
margin-bottom: 12px;
}
.ref-grid-btn {
display: inline-block;
padding: 8px 14px;
background: #0073e6;
color: #fff;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
transition: background 0.3s ease;
}
.ref-grid-btn:hover {
background: #005bb5;
}
/* --- GENEL KONTEYNER VE BOŞLUKLAR --- */
.dgn-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.dgn-content-block {
padding: 20px 0;
margin-bottom: 30px;
}
.dgn-pas-story {
padding: 60px 0;
}
.dgn-main-banner {
min-height: 400px; /* Banner yüksekliği */
background-size: cover;
background-position: center;
}
/* --- PAS ESTETİK BAŞLIK STİLLERİ --- */
/* Tüm ana başlıklar (PAS Hikayesi ve Giriş Başlığı) */
.dgn-pas-story .dgn-section-title {
text-align: center;
margin-bottom: 40px;
font-size: 2.5em;
font-weight: 700;
color: #007bff; /* Mavi font */
font-family: 'Georgia', serif; /* Estetik font */
}
/* Birinci Açıklama Bloğu Başlığı (Baslik_bir_) */
.dgn-pas-introduction .dgn-section-title.pas-intro-title {
font-size: 2.5em;
margin-bottom: 20px;
}
.dgn-pas-introduction p {
font-size: 1.15em;
line-height: 1.8;
color: #555;
text-align: center;
}
/* İkinci Açıklama Bloğu (Başlık 2 / Açıklama 2) */
.dgn-pas-second-description {
margin-top: 20px;
margin-bottom: 50px;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.dgn-pas-second-description h3 {
font-size: 1.8em;
color: #007bff; /* Mavi font */
font-family: 'Georgia', serif; /* Estetik font */
margin-bottom: 15px;
}
/* PAS Hikaye Adım Başlıkları (Sağlı-Sollu Düzen İçindeki h3'ler) */
.dgn-pas-story .dgn-text-wrapper h3 {
margin-top: 0;
font-size: 1.8em;
color: #007bff; /* Mavi font */
font-family: 'Georgia', serif; /* Estetik font */
}
/* --- PAS HİKAYESİ VE GENEL SAĞLI-SOLLU DÜZEN --- */
.dgn-content-with-image {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.dgn-image-wrapper, .dgn-text-wrapper {
flex: 1 1 45%;
}
.dgn-image-wrapper img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dgn-reverse-layout {
flex-direction: row-reverse;
}
/* --- KAPANIŞ METNİ (Meta Description) STİLİ --- */
.dgn-pas-final-cta {
margin-top: 50px;
padding: 20px 0;
border-top: 2px solid #007bff;
text-align: center;
}
.dgn-pas-final-cta p {
font-style: italic;
color: #666;
font-size: 1.05em;
}
/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
.dgn-content-with-image {
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.dgn-image-wrapper, .dgn-text-wrapper {
flex: 1 1 100%;
}
.dgn-reverse-layout {
flex-direction: column;
}
.dgn-pas-introduction p {
text-align: left;
}
/* Diğer alanlarda başlıklar mobilde küçültülebilir */
.dgn-pas-story .dgn-section-title {
font-size: 2em;
}
}
/* ================================================= */
/* === MOBİL MENÜ YAPISAL GÜNCELLEME (GENİŞLİK/ESTETİK) === */
/* ================================================= */
/* ============================================== */
/* === TEMEL TANIMLAR (Sitenize göre ayarlayın) === */
/* ============================================== */
:root {
/* Renkleri kendi kurumsal renklerinize göre güncelleyin. */
--primary-color: #3949AB; /* Ana Kurumsal Renk */
--footer-bg: #1A237E; /* Koyu Mavi - Derinlik için */
--footer-text: #E3F2FD; /* Açık Yazı Rengi */
--footer-link-hover: #FFFFFF;
--cta-bg: #FFC107; /* Dikkat çekici sarı */
--cta-text: #212121; /* CTA Yazı Rengi */
}
/* ============================================== */
/* === ANA FOOTER TASARIM VE GRID YAPISI === */
/* ============================================== */
.main-footer {
background-color: var(--footer-bg);
color: var(--footer-text);
padding-top: 60px;
font-size: 15px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 30px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Footer Sütun Başlıkları */
.main-footer .footer-heading {
color: var(--footer-link-hover);
font-size: 18px;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
font-weight: 600;
}
/* Başlık Alt Çizgisi Estetiği */
.main-footer .footer-heading::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 50px;
background-color: var(--primary-color);
}
/* --- Linkler ve Listeler (Çakışmayı Önlemek İçin .main-footer ile sınırlandırıldı) --- */
.main-footer .footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.main-footer .footer-col li {
margin-bottom: 10px;
}
.main-footer .footer-col a {
color: var(--footer-text);
text-decoration: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
}
.main-footer .footer-col a:hover {
color: var(--footer-link-hover);
}
.main-footer .link-icon {
font-size: 10px;
margin-right: 10px;
color: var(--primary-color);
}
/* --- 1. Sütun (Marka ve Hakkımızda) --- */
.main-footer .footer-info .company-slogan {
line-height: 1.8;
margin-bottom: 25px;
opacity: 0.85;
}
/* Sosyal Medya İkonları */
.main-footer .social-links a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin-right: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: var(--footer-text);
transition: all 0.3s ease;
}
.main-footer .social-links a:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #FFFFFF;
}
/* --- 4. Sütun (İletişim) --- */
.main-footer .footer-contact .contact-item {
display: flex;
margin-bottom: 20px;
line-height: 1.5;
}
.main-footer .contact-icon {
font-size: 18px;
margin-right: 15px;
color: var(--primary-color);
width: 20px;
text-align: center;
}
.main-footer .contact-item p {
margin: 0;
font-size: 15px;
}
.main-footer .contact-item strong {
display: block;
font-weight: 500;
margin-bottom: 2px;
}
.main-footer .contact-item a {
color: var(--footer-text);
}
.main-footer .contact-item a:hover {
color: var(--footer-link-hover);
}
/* ============================================== */
/* === CTA BANNER (Footer Üstü) TASARIM (.footer-cta-band ile sınırlandırıldı) === */
/* ============================================== */
.footer-cta-band {
background-color: var(--primary-color);
color: #FFFFFF;
padding: 30px 0;
box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
}
.cta-content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.cta-text-group {
flex-grow: 1;
}
.cta-heading {
font-size: 24px;
font-weight: 700;
margin: 0;
}
.cta-subheading {
font-size: 16px;
margin: 0;
opacity: 0.9;
}
.cta-buttons-container {
display: flex;
gap: 15px;
flex-shrink: 0;
}
.footer-cta-band .cta-btn {
padding: 12px 25px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.footer-cta-band .cta-btn-primary {
background-color: var(--cta-bg);
color: var(--cta-text);
border: 2px solid var(--cta-bg);
}
.footer-cta-band .cta-btn-primary:hover {
background-color: #FFD54F;
border-color: #FFD54F;
transform: translateY(-2px);
}
.footer-cta-band .cta-btn-whatsapp {
background-color: transparent;
color: #FFFFFF;
border: 2px solid #FFFFFF;
}
.footer-cta-band .cta-btn-whatsapp:hover {
background-color: #25D366;
border-color: #25D366;
transform: translateY(-2px);
}
/* ============================================== */
/* === FOOTER ALT KISIM (COPYRIGHT) === */
/* ============================================== */
.footer-bottom {
padding: 20px 0;
text-align: center;
font-size: 13px;
opacity: 0.7;
}
.footer-bottom .designer-link {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
.footer-bottom .designer-link:hover {
color: #FFFFFF;
}
/* ============================================== */
/* === RESPONSIVE (MOBİL UYUM) AYARLARI === */
/* ============================================== */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
gap: 40px;
}
.footer-cta-band {
padding: 25px 0;
}
.cta-content-wrapper {
flex-direction: column;
text-align: center;
}
.cta-heading {
font-size: 22px;
margin-bottom: 5px;
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr; /* Mobilde tek sütun */
}
.footer-cta-band {
padding: 20px 0;
}
.cta-buttons-container {
flex-direction: column;
width: 100%;
}
.footer-cta-band .cta-btn {
width: 100%;
justify-content: center;
}
.main-footer .footer-col {
text-align: center;
}
.main-footer .footer-heading::after {
left: 50%;
transform: translateX(-50%);
}
.main-footer .footer-col ul {
text-align: left;
max-width: 250px;
margin: 0 auto;
}
.main-footer .social-links {
display: flex;
justify-content: center;
}
.main-footer .contact-item {
justify-content: center;
}
}
/* ================================================= */
/* === KESİN ÇÖZÜM: MASAÜSTÜ HOVER KAYBOLMA VE HİZALAMA DÜZELTMESİ (993px+) === */
/* ================================================= */
@media (min-width: 993px) {
/* 1. SEVİYE MENÜ (dropdown-menu) KAYBOLMA DÜZELTMESİ */
/* --------------------------------------------------- */
.dropdown-menu {
position: absolute;
/* KRİTİK: Menüyü üst linkin hemen altından başlatarak hover kesintisini engeller. */
top: 100%;
left: 0;
z-index: 100;
/* Geçiş efektlerini ve gizliliği koru (JS/CSS'inizden gelenler) */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
/* Gerekirse, kutuyu belirginleştiren gölgeyi koruyun veya ekleyin: */
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
}
/* 2. SEVİYE ALT MENÜ (sub-dropdown-menu) HİZALAMA DÜZELTMESİ */
/* ---------------------------------------------------------- */
.sub-dropdown-menu {
position: absolute;
left: 100%;
/* Dikey Kayma İnce Ayarı (Tam hiza için kritik) */
top: 0 !important;
margin-top: -12px;
/* Tam hiza için bu değeri (-10px ile -15px arasında) ayarlayabilirsiniz. */
}
/* 3. HOVER ve .OPEN (TIKLAMA) İLE GÖRÜNÜRLÜK (Kapanmasını engeller) */
/* -------------------------------------------------------------- */
/* 1. Seviye: Hover veya Tıklama ile Açılma */
.dropdown-item:hover > .dropdown-menu,
.dropdown-item.open > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 2. Seviye: Hover veya Tıklama ile Açılma */
.sub-dropdown-item:hover > .sub-dropdown-menu,
.sub-dropdown-item.open > .sub-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(0) !important;
}
}
/* ================================================= */
/* === LİNK HOVER YAZI RENGİ (Üzerine Gelindiğinde Beyaz) === */
/* ================================================= */
/* Tüm dropdown menü linklerinin (a) üzerine gelindiğinde */
.dropdown-menu li:hover > a,
.sub-dropdown-menu li:hover > a {
/* İstenen Beyaz Yazı Rengi */
color: #ffffff !important;
/* Arka plan rengine dokunmuyoruz. */
background-color: transparent !important;
}
/* Menü linklerinin normal rengi (hover olmayan durum) */
.dropdown-menu a,
.sub-dropdown-menu a {
/* Varsayılan olarak menü açıldığında linkler siyah veya koyu renk olmalı
ki beyaz arka plan üzerinde okunabilsinler. Eğer menünüzün arka planı
şeffafsa, bu rengi koruyun. */
/* color: #333333; (Normalde siyah, hover'da beyaz olacak) */
}
/* ================================================= */
/* === MASAÜSTÜ HOVER KAYBOLMA VE HİZALAMA DÜZELTMESİ (993px+) === */
/* ================================================= */
@media (min-width: 993px) {
/* 1. SEVİYE MENÜ (dropdown-menu) KAYBOLMA DÜZELTMESİ */
.dropdown-menu {
/* Kaybolmayı önlemek için üst linkin hemen altından başlatır. */
top: 100%;
left: 0;
z-index: 100;
/* Varsayılan şeffaflık/gizlilik ayarları korunur */
}
/* 2. SEVİYE ALT MENÜ (sub-dropdown-menu) HİZALAMA DÜZELTMESİ */
.sub-dropdown-menu {
left: 100%;
top: 0 !important;
margin-top: -12px; /* Dikey Kayma İnce Ayarı */
}
/* HOVER ve .OPEN (TIKLAMA) İLE GÖRÜNÜRLÜK */
.dropdown-item:hover > .dropdown-menu,
.dropdown-item.open > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-dropdown-item:hover > .sub-dropdown-menu,
.sub-dropdown-item.open > .sub-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(0) !important;
}
}
/* ================================================= */
/* === KESİN ÇÖZÜM: TAŞMA (OVERFLOW) ENGELLERİNİ KALDIRMA === */
/* ================================================= */
/* Sadece Masaüstü (769px ve üzeri) ekranlar için geçerlidir. */
@media (min-width: 769px) {
/* 1. Menünün Açıldığı Ana Kapsayıcılar */
/* Menüyü kesebilecek üst elementlerdeki 'overflow: hidden' kuralını iptal ederiz. */
.header,
.container,
.main-nav {
overflow: visible !important;
/* Yüksekliği kısıtlayıcı bir min-height/max-height kuralı varsa sıfırlar */
max-height: none !important;
z-index: 100 !important; /* Menünün her zaman en üstte kalmasını sağlar */
}
/* 2. Ana Dropdown Kapsayıcısı (.dropdown-menu) */
.dropdown-menu {
/* Yükseklik kısıtlamasını sonsuza kadar kaldırır. */
height: auto !important;
max-height: 9999px !important;
/* KRİTİK: İçerik dışarı taşsa bile görünürlüğünü engellemeyen ayar. */
overflow: visible !important;
/* Dikey Sıralama garantisi */
display: block !important;
min-width: 280px !important;
}
/* 3. Tüm Liste Öğelerini (li) ve Alt Menüleri Dikey Akışa Zorla */
.dropdown-menu li,
.sub-dropdown-menu li,
.sub-dropdown-menu {
display: block !important;
width: 100% !important;
float: none !important;
position: relative !important; /* Alt menü pozisyonu için kritik */
/* Alt menü için de yükseklik garantisi */
max-height: 9999px !important;
overflow: visible !important;
}
/* 4. HOVER (Fareyle Üzerine Gelme) Anında Menüyü ZORLA AÇ */
.dropdown-item:hover > .dropdown-menu,
.sub-dropdown-item:hover > .sub-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Alt kırılımlı menü pozisyonunu ayarla */
.sub-dropdown-menu {
position: absolute !important;
top: 0 !important;
left: 100% !important;
}
}
/* --- PROJE SAYFASI STİLLERİ --- */
/* Genel Konteyner ve Düzen */
.proje-interaction-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 50px 0;
min-height: 600px; /* Görsel alan için minimum yükseklik */
position: relative;
}
.proje-list-container {
width: 40%;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Proje Kartları */
.proje-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-left: 5px solid #0056b3; /* Vurgu rengi */
padding: 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.proje-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-left-color: #007bff;
}
.proje-card.active {
background-color: #e6f7ff;
border-left-color: #007bff;
transform: scale(1.02);
}
.card-icon {
font-size: 24px;
margin-right: 15px;
color: #007bff;
}
.card-title {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
/* Fantastik Animasyonlu Daire (Detay Alanı) */
.proje-detail-circle {
position: absolute; /* Mutlak konumlandırma */
right: 5%;
top: 50%;
transform: translate(50%, -50%) scale(0); /* Başlangıçta gizli ve merkezlenmiş */
width: 500px;
height: 500px;
background: radial-gradient(#007bff, #0056b3); /* Mavi gradient arka plan */
border-radius: 50%; /* Daire şekli */
opacity: 0;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Yaylanma efekti */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
}
.proje-detail-circle.active {
transform: translate(0, -50%) scale(1); /* Aktif olunca sağa kay ve büyüt */
opacity: 1;
}
.detail-content-wrapper {
padding: 40px;
max-width: 80%;
}
.detail-title {
font-size: 2rem;
margin-bottom: 20px;
font-weight: 700;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 10px;
}
.detail-text {
font-size: 1rem;
line-height: 1.6;
max-height: 250px;
overflow-y: auto; /* Uzun açıklama için scroll */
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: 1px solid white;
color: white;
font-size: 24px;
cursor: pointer;
border-radius: 50%;
width: 35px;
height: 35px;
line-height: 1;
transition: background-color 0.3s;
}
.close-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Responsive ayar */
@media (max-width: 992px) {
.proje-interaction-wrapper {
flex-direction: column;
align-items: center;
}
.proje-list-container {
width: 100%;
margin-bottom: 40px;
}
.proje-detail-circle {
position: relative;
transform: translate(0, 0) scale(0);
width: 90%;
height: auto;
border-radius: 12px;
min-height: 300px;
}
.proje-detail-circle.active {
transform: scale(1);
}
}
/* Proje Kartı hiyerarşi ikonu */
.hierarchy-icon {
margin-left: auto;
font-size: 1.5rem;
font-weight: 700;
color: #4CAF50; /* Yeşil renkle vurgu */
}
/* Detay Dairesi içindeki Alt Kategori Listesi */
#mainDescription {
margin-bottom: 15px;
font-size: 0.95rem;
}
.sub-category-list {
list-style-type: none;
padding: 0;
margin-top: 15px;
text-align: left; /* Listeyi sola yaslayalım */
font-size: 1rem;
max-height: 150px;
overflow-y: auto;
border-top: 1px solid rgba(255, 255, 255, 0.4);
padding-top: 10px;
}
.sub-category-list li {
background-color: rgba(0, 0, 0, 0.1);
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 4px;
}
/* --- PROJE SAYFASI STİLLERİ (Accordion ve Mobil Uyum) --- */
.proje-accordion-container {
width: 100%;
max-width: 900px; /* Ortalamak için sınır */
margin: 0 auto 50px auto;
}
.proje-item {
margin-bottom: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.proje-header {
display: flex;
align-items: center;
padding: 15px 20px;
background-color: #ffffff;
cursor: pointer;
transition: background-color 0.3s ease;
border-left: 5px solid transparent;
}
.proje-header:hover {
background-color: #f7f7f7;
}
.proje-header.active {
background-color: #eaf6ff;
border-left-color: #007bff; /* Aktif vurgu rengi */
}
.header-icon {
font-size: 20px;
margin-right: 15px;
color: #007bff;
}
.header-title {
margin: 0;
font-size: 1.15rem;
font-weight: 600;
flex-grow: 1; /* Başlık alanını genişlet */
}
.toggle-icon {
font-size: 1rem;
color: #6c757d;
transition: transform 0.3s ease;
}
.proje-header.active .toggle-icon {
transform: rotate(180deg);
}
/* Accordion İçeriği */
.proje-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out;
background-color: #fcfcfc;
}
.proje-body.open {
/* JS tarafından dinamik olarak ayarlanacak */
padding: 20px;
border-top: 1px solid #e0e0e0;
}
.main-description {
line-height: 1.6;
margin-bottom: 20px;
font-size: 0.95rem;
}
/* Alt Kategoriler Listesi */
.sub-list-container h4 {
font-size: 1.1rem;
font-weight: 600;
color: #343a40;
border-bottom: 2px solid #007bff;
display: inline-block;
padding-bottom: 5px;
margin-bottom: 10px;
}
.sub-category-list {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-wrap: wrap; /* Mobil uyum için sarma */
gap: 10px;
}
.sub-category-list li {
background-color: #e9ecef;
padding: 7px 15px;
border-radius: 50px; /* Hap görünümü */
font-size: 0.9rem;
font-weight: 500;
color: #495057;
transition: background-color 0.3s;
}
.sub-category-list li:hover {
background-color: #ced4da;
}
/* --- Mobil Uyum (768px altı) --- */
@media (max-width: 768px) {
.header-title {
font-size: 1.05rem;
}
.proje-header {
padding: 12px 15px;
}
.proje-body.open {
padding: 15px;
}
.sub-category-list {
flex-direction: column; /* Mobil cihazda alt alta listeleme */
gap: 5px;
}
.sub-category-list li {
width: 100%;
text-align: left;
border-radius: 8px;
}
}
/* --- 1. GENEL SAYFA BAŞLIĞI (Page Header) --- */
.page-header-section {
padding: 80px 0 30px;
background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
overflow: hidden;
}
.page-header-section h1 {
font-size: 3rem;
font-weight: 800;
color: #004d40;
margin-bottom: 10px;
}
.page-header-section p {
font-size: 1.1rem;
color: #333;
}
/* Page Header Animasyonları */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in {
opacity: 0;
animation: fadeIn 1s ease-out 0.2s forwards;
}
.animate-slide-up {
opacity: 0;
transform: translateY(20px);
animation: slideUp 1s ease-out 0.5s forwards;
}
/* --- 2. PARALLAX BANNER (Afet) --- */
.banner-section {
overflow: hidden;
position: relative;
height: 300px; /* Banner yüksekliği */
margin-bottom: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 0 0 15px 15px;
}
.banner-container {
height: 100%;
width: 100%;
}
.parallax-img {
width: 100%;
height: 150%;
object-fit: cover;
position: absolute;
top: -25%;
left: 0;
will-change: transform;
transition: transform 0.1s linear; /* JS tarafından güncellenecek */
}
/* --- 3. AKORDİYON KARTLARI VE GÖRSEL ANİMASYONLARI --- */
/* Kart Giriş Animasyonu */
@keyframes fadeInSlideUp {
from { opacity: 0; transform: translateY(40px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.proje-item {
animation: fadeInSlideUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
opacity: 0;
margin-bottom: 25px;
}
.proje-header {
display: flex;
align-items: center;
padding: 15px 20px;
cursor: pointer;
background-color: #f9f9f9;
border: 1px solid #eee;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 8px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
/* Hover Animasyonu (3D Kaldırma) */
.proje-header:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 123, 255, 0.3);
background-color: #f0f8ff;
}
/* Aktif Kart Stili */
.proje-header.active {
background: #007bff;
color: white;
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
transform: translateY(0);
}
.proje-header.active .toggle-icon {
transform: rotate(180deg);
}
.proje-header.active .header-icon,
.proje-header.active .header-title {
color: white; /* Aktifken başlık ve ikon beyaz */
}
/* Kategori Resmi Stili */
.header-image-wrapper {
width: 60px;
height: 60px;
min-width: 60px;
border-radius: 8px;
overflow: hidden;
margin-right: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.proje-header:hover .header-image-wrapper {
transform: scale(1.05) rotate(-1deg);
}
.category-icon-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
/* Başlık İçeriği Düzeni */
.header-content {
flex-grow: 1;
display: flex;
align-items: center;
}
.header-icon {
font-size: 1.5rem;
margin-right: 10px;
transition: color 0.3s ease;
color: #007bff; /* İkon rengi */
}
/* Akordiyon İçeriği (proje-body) */
.proje-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.5s ease-in;
background-color: #ffffff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
opacity: 0;
}
.proje-body.open {
opacity: 1;
padding: 20px; /* JS tarafından dinamik olarak ayarlanacak */
border-top: 1px solid #e0e0e0;
}
/* Alt Hizmetler Grid Yapısı */
.sub-list-container {
padding-top: 15px;
margin-top: 15px;
border-top: 1px dashed #e0e0e0;
}
.sub-category-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
padding-left: 0;
margin-bottom: 0;
}
.sub-category-list li {
background-color: #f7f9fc;
padding: 12px 15px;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
border-left: 3px solid #007bff;
list-style: none;
}
/* Mobil Uyum İyileştirmeleri */
@media (max-width: 768px) {
.page-header-section h1 { font-size: 2.2rem; }
.page-header-section p { font-size: 1rem; }
.banner-section { height: 200px; }
.proje-header {
padding: 10px 15px;
}
.header-image-wrapper {
width: 50px;
height: 50px;
min-width: 50px;
}
.sub-category-list {
grid-template-columns: 1fr; /* Mobil cihazda alt alta */
}
}
/* --- YENİ PAGE HEADER CSS'İ --- */
.page-header {
background-color: #f8f9fa; /* Hafif arka plan */
padding: 40px 0;
border-bottom: 1px solid #e9ecef;
}
.page-header h1 {
font-size: 2.2rem;
font-weight: 700;
color: #343a40;
margin-bottom: 10px;
}
/* Breadcrumb Stilleri */
.breadcrumb {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
font-size: 0.9rem;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
color: #6c757d;
}
.breadcrumb a {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb a:hover {
color: #0056b3;
}
.breadcrumb i {
margin: 0 8px;
font-size: 0.8em;
color: #adb5bd;
}
.breadcrumb .active {
color: #343a40;
font-weight: 500;
}
/* --- FANTASTİK ÜRÜNLER BÖLÜMÜ CSS --- */
.urunler-fantastik-section {
padding: 60px 0;
background-color: #ffffff; /* Beyaz arka plan veya sitenizin ana rengi */
}
.urun-grid {
display: grid;
/* 3 veya 4 sütunlu esnek ızgara */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
padding: 0 20px;
}
/* 3D Flip Card Yapısı */
.urun-flip-container {
perspective: 1500px; /* 3D derinlik hissi için daha yüksek değer */
height: 400px; /* Kart Yüksekliği */
cursor: pointer;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Daha belirgin gölge */
transition: box-shadow 0.3s ease-in-out;
}
.urun-flip-container:hover {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.flipper {
position: relative;
width: 100%;
height: 100%;
/* Fantastik Animasyon: Hızı yavaşlatıp yumuşak bir eğri kullanma */
transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-style: preserve-3d;
}
/* Kartın Ön ve Arka Yüzlerinin Temel Stili */
.on-yuz, .arka-yuz {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 12px;
overflow: hidden;
}
/* --- Ön Yüz Stili (Resim ve Başlık) --- */
.on-yuz {
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: #333;
}
.on-yuz::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Görselin üstüne koyu bir gradyan: Başlığın okunurluğunu artırır */
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 12px;
transition: background 0.5s;
}
.urun-flip-container:hover .on-yuz::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.baslik-kapsayici {
position: relative;
z-index: 2;
padding: 20px;
}
.urun-ad {
margin: 0 0 10px 0;
font-size: 1.8rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.detay-buton {
display: inline-block;
background-color: #007bff; /* Mavi Buton */
color: white;
padding: 8px 15px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 0.5px;
transition: background-color 0.3s;
}
.detay-buton:hover {
background-color: #0056b3;
}
/* --- Arka Yüz Stili (Açıklama Alanı) --- */
.arka-yuz {
background-color: #f7f7f7;
color: #333;
transform: rotateY(180deg); /* Başlangıçta dönük */
padding: 20px;
text-align: left;
display: flex;
flex-direction: column;
}
.arka-yuz h4 {
color: #007bff;
font-size: 1.5rem;
margin-top: 0;
}
.detay-icerik {
flex-grow: 1; /* İçeriğin esnemesini sağlar */
overflow-y: auto; /* İçerik taşarsa scrollbar çıkar */
line-height: 1.6;
margin-bottom: 15px;
}
/* Tablo İçerikleri İçin Stil İyileştirmesi (Kullanıcının belirttiği tablo yapısı için) */
.detay-icerik table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.detay-icerik th, .detay-icerik td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
font-size: 0.9em;
}
.geri-buton {
background-color: #6c757d;
color: white;
border: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
width: 100%;
}
.geri-buton:hover {
background-color: #5a6268;
}
/* --- TIKLANDIĞINDA 3D DÖNÜŞ ANİMASYONU --- */
.urun-flip-container.flipped .flipper {
transform: rotateY(180deg);
}
/* --- Denge Arıtma Danışmanlık Süreci CSS --- */
.denge-danismanlik-sureci {
padding: 80px 0;
background-color: #e6f3ff; /* Arka plan: Açık mavi tonu */
overflow: hidden;
}
.animasyonlu-baslik {
font-size: 2.5rem;
font-weight: 800;
color: #004d40; /* Kurumsal Renk */
margin-bottom: 50px;
/* İsteğe bağlı: Başlık için de bir animasyon eklenebilir (fade in) */
}
/* Adımların Yatay Akış Konteyneri */
.surec-adimlari {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px; /* Kenarlardan boşluk */
position: relative;
}
/* --- Süreç Kartı Temel Stili --- */
.surec-kart {
flex: 1 1 30%; /* Kartların eşit yayılmasını sağlar */
background: #ffffff;
border-radius: 15px;
padding: 30px;
text-align: center;
position: relative;
z-index: 2;
/* Fantastik Animasyon Başlangıç Değeri */
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-bottom: 4px solid #007bff; /* Mavi alt çizgi */
}
/* Kartın Üzerine Gelme (Hover) Animasyonu */
.surec-kart:hover {
transform: translateY(-15px) scale(1.03); /* Kartı yukarı kaldır ve hafifçe büyüt */
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
border-bottom-color: #ffc107; /* Alt çizgiyi sarı ile vurgula */
}
/* Adım Numarası */
.adim-numarasi {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: #007bff;
color: white;
font-size: 1.2rem;
font-weight: bold;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
}
/* İkon Stilleri */
.adim-ikon-wrapper {
margin: 20px 0;
}
.adim-ikon {
font-size: 3rem;
color: #007bff;
transition: transform 0.5s ease;
}
/* Hover: İkonu hafifçe sallama */
.surec-kart:hover .adim-ikon {
transform: rotate(5deg) scale(1.1);
}
.adim-baslik {
font-size: 1.25rem;
font-weight: 700;
color: #212529;
}
.adim-aciklama {
color: #6c757d;
font-size: 0.95rem;
}
/* --- Bağlantı Çizgisi --- */
.baglanti-cizgisi {
flex: 0 0 5%; /* Kartlar arasında sabit boşluk */
height: 2px;
background-color: #007bff;
position: relative;
z-index: 1;
margin: 0 20px;
/* Animasyonlu Ok */
color: #007bff;
font-size: 1.2rem;
text-align: center;
}
.baglanti-cizgisi i {
position: absolute;
right: -10px;
top: -10px;
background: #e6f3ff;
padding: 0 5px;
}
/* CTA Butonu */
.danismanlik-cta {
background-color: #ffc107;
border-color: #ffc107;
color: #343a40;
font-weight: bold;
transition: all 0.3s;
}
.danismanlik-cta:hover {
background-color: #e0a800;
border-color: #e0a800;
color: white;
transform: translateY(-3px);
}
/* Mobil Uyum (4 adımın alt alta gelmesi) */
@media (max-width: 992px) {
.surec-adimlari {
flex-direction: column;
padding: 0;
}
.surec-kart {
width: 100%;
margin-bottom: 40px;
}
.baglanti-cizgisi {
transform: rotate(90deg);
width: 50px;
margin: 20px 0;
right: auto;
}
}
/* --- ESTETİK CTA BUTONU CSS --- */
.danismanlik-cta {
/* Genel Görünüm */
position: relative; /* Shine efektini konumlandırmak için */
display: inline-block;
padding: 15px 35px;
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: uppercase;
/* Kurumsal Renkler ve Yuvarlaklık */
background-color: #4CAF50; /* Yeşil (Doğa/Temizlik/Güven) */
border: 2px solid #388e3c;
color: white;
border-radius: 8px;
overflow: hidden; /* Shine efektinin buton içinde kalması için */
z-index: 10;
/* Yumuşak Animasyon Geçişleri */
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}
/* Hover (Üzerine Gelme) Efekti: Hafif 3D Kaldırma */
.danismanlik-cta:hover {
background-color: #388e3c;
border-color: #2e6d32;
transform: translateY(-5px); /* Hafif yukarı kaldırma */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Derin gölge */
}
/* --- KRİTİK: SHINE (PARLAKLIK) ANİMASYONU --- */
/* Butonun Parlaklık Efektini Taşıyacak Sözde Element */
.danismanlik-cta::after {
content: '';
position: absolute;
top: 0;
left: -200%; /* Başlangıçta butonun solunda */
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2); /* Yarı şeffaf beyaz parlaklık */
transform: skewX(-30deg); /* Eğik parlaklık */
transition: left 0.5s ease-in-out;
z-index: -1;
}
/* Hover: Parlaklık efektini sağa kaydır (Butonun parlaması) */
.danismanlik-cta:hover::after {
left: 200%;
}
/* Hizmetler Sayfası İçin Eklenen Özel CSS Kodları Bitişi */
/*Hizmetlerimizin bitiş*/
/* Ansayfa referanslar*/
/* --- REFERANSLAR (BAŞARI HİKAYELERİ) BÖLÜMÜ CSS --- */
.references-section {
padding: 60px 0;
background-color: #f7f9fb; /* Çok açık gri, temiz bir arka plan */
}
.references-title {
font-size: 2.5rem;
font-weight: 800;
color: #004d40; /* Kurumsal Başlık Rengi */
}
/* Kartların Grid Yapısı */
.references-grid {
display: grid;
/* 3 veya 4 sütunlu modern ızgara */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
/* --- ESTETİK REFERANS KARTI --- */
.reference-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 20px 25px;
border-radius: 10px;
position: relative;
overflow: hidden;
/* Animasyon Başlangıcı */
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Hafif gölge */
border-left: 5px solid #007bff; /* Mavi Vurgu Çizgisi */
}
/* Hover Animasyonu: Kaldırma ve Parlaklık */
.reference-item.aesthetic-card-lift:hover {
transform: translateY(-8px) scale(1.02); /* Kartı yukarı kaldır */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Derin gölge */
border-left-color: #4CAF50; /* Hover'da rengi değiştir */
}
/* İçerik Alanı */
.reference-content {
flex-grow: 1;
text-align: left;
}
.reference-title {
font-size: 1.25rem;
font-weight: 700;
color: #343a40;
margin-bottom: 5px;
}
.reference-detail {
font-size: 0.95rem;
color: #6c757d;
margin: 0;
}
.reference-icon {
margin-right: 8px;
color: #ffc107; /* Sarı/Turuncu renk ile dikkat çekme */
}
/* Başarı İkonu (Sağ Köşede) */
.reference-check-icon {
margin-left: 20px;
font-size: 2rem;
line-height: 1;
}
.success-icon {
color: #4CAF50; /* Başarı Yeşil rengi */
transition: transform 0.4s ease;
}
/* Hover: İkonu hafifçe döndürme */
.reference-item.aesthetic-card-lift:hover .success-icon {
transform: rotate(15deg) scale(1.1);
}
/* --- TÜM REFERANSLAR BUTONU (AESTHETIC CTA) --- */
.references-section .text-center {
/* mt-5 (margin-top: 3rem) sınıfının üzerine ek bir boşluk veriyoruz. */
padding-top: 20px;
}
/* --- TÜM REFERANSLAR BUTONU (AESTHETIC CTA) --- */
.btn-more.aesthetic-cta {
display: inline-block;
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
color: white;
background-color: #007bff;
border: 2px solid #007bff;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
/* ÖNEMLİ: Butonun üstündeki boşluğu doğrudan ayarlarız */
margin-top: 35px; /* Varsayılan 'mt-5' boşluğunu geçecek daha büyük bir boşluk */
margin-bottom: 20px; /* Alttan da biraz boşluk verelim */
}
.btn-more.aesthetic-cta:hover {
background-color: white;
color: #007bff;
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0, 123, 255, 0.3);
}
/* Ansayfa referanslar bitiş*/
/* Ansayfa banner */
/* --- GENEL TIPOGRAFI VE RENK PALETİ (PROFESYONEL AYAR) --- */
/* Bu kodları tüm sitenizde tutarlılık için kullanmanız önerilir. */
:root {
/* Kurumsal Renkler: Su ve Çevre Odaklı */
--denge-color-primary: #007bff; /* Ana Mavi */
--denge-color-secondary: #004d40; /* Koyu Yeşil/Turkuaz */
--denge-color-accent: #ffc107; /* Vurgu Sarı */
--denge-color-text-dark: #343a40;
}
/* --- DENGE ARITMA HERO SECTION CSS --- */
.denge-hero-section {
position: relative;
width: 100%;
height: 95vh; /* Tam ekran hissi */
min-height: 650px;
overflow: hidden;
z-index: 5;
}
/* 1. GÖRSEL VE HAREKET (Ken Burns Efekti) */
.denge-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.denge-background-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.45); /* Metin okunurluğu için koyuluğu artır */
/* KRİTİK: Ken Burns Animasyonu */
transform: scale(1.1);
animation: dengeKenBurns 18s infinite alternate ease-in-out;
}
@keyframes dengeKenBurns {
from {
transform: scale(1.1) translateX(0);
}
to {
transform: scale(1.05) translateX(15px);
}
}
/* 2. METİN İÇERİĞİ KONUMLANDIRMA */
.denge-content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center; /* Yatayda Ortala */
align-items: center; /* Dikeyde Ortala */
z-index: 2;
padding: 0 20px;
}
/* Animasyonlu Metin Kutusu (Şık ve Merkezde) */
.denge-text-box {
max-width: 850px;
text-align: center;
padding: 50px 60px; /* Daha fazla iç boşluk */
background: rgba(0, 0, 0, 0.88); /* Çok koyu, net kutu */
color: white;
border-radius: 12px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6); /* Çok güçlü gölge */
border: 3px solid var(--denge-color-accent); /* Sarı Vurgu Çerçeve */
opacity: 0;
}
/* Giriş Animasyonu */
@keyframes dengeSlideIn {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.denge-text-box.denge-animate-in {
animation: dengeSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
opacity: 0;
}
.denge-heading {
font-size: 3.8rem;
font-weight: 900;
color: white;
text-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
margin-bottom: 25px;
line-height: 1.1;
text-transform: uppercase;
}
.denge-paragraph {
font-size: 1.3rem;
color: #e9ecef;
font-weight: 400;
margin-bottom: 40px;
}
/* CTA Butonu (Şık ve Vurgulu) */
.denge-cta-btn {
display: inline-block;
background-color: var(--denge-color-accent);
border: 2px solid var(--denge-color-accent);
color: var(--denge-color-text-dark);
font-weight: 700;
padding: 18px 50px;
font-size: 1.1rem;
border-radius: 50px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s ease;
}
.denge-cta-btn:hover {
background-color: #e0a800;
color: white;
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 193, 7, 0.5); /* Sarı Işıltı */
}
/* --- RESPONSIVE AYARLAR (TÜM CİHAZLAR İÇİN) --- */
@media (max-width: 1200px) {
.denge-heading { font-size: 3.2rem; }
}
@media (max-width: 992px) {
.denge-hero-section { height: 70vh; min-height: 500px; }
.denge-heading { font-size: 2.2rem; }
.denge-paragraph { font-size: 1.1rem; }
.denge-text-box {
padding: 30px;
max-width: 90%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}
}
@media (max-width: 576px) {
.denge-hero-section { height: 60vh; min-height: 450px; }
.denge-heading { font-size: 1.6rem; margin-bottom: 15px; }
.denge-paragraph { font-size: 1rem; margin-bottom: 20px; }
.denge-cta-btn { padding: 10px 25px; font-size: 1rem; }
}
/* --- NİHAİ MİNİMAL BANNER CSS (Her Cihazda Sol Alt) --- */
/* Genel Konumlandırma Stilleri (Sola ve Alta Yaslama) */
.denge-content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start; /* **Yatayda Sola Yasla** */
align-items: flex-end; /* Dikeyde Alta Yasla */
z-index: 2;
padding: 0 20px 40px 20px;
}
/* KRİTİK: Animasyonlu Metin Kutusu (Masaüstü/Tablet için) */
.denge-text-box {
max-width: 400px; /* **Kutu Maksimum Genişliği (400px)** */
text-align: left;
padding: 20px;
background: rgba(0, 0, 0, 0.95);
color: white;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
border: 1px solid var(--denge-color-accent);
opacity: 0;
margin-left: 50px; /* Soldan büyük boşluk */
}
/* KRİTİK: Başlık ve Paragraf Boyutları (Ultra Minimal) */
.denge-heading {
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 8px;
}
.denge-paragraph {
font-size: 0.85rem;
margin-bottom: 15px;
}
.denge-cta-btn {
padding: 8px 25px;
font-size: 0.85rem;
}
/* --- RESPONSIVE AYARLAR (MOBİL İÇİN KÜÇÜK VE SOL ALTTA TUTMA) --- */
/* Tablet ve Dikey Görünüm (992px altı) */
@media (max-width: 992px) {
.denge-hero-section { height: 60vh; min-height: 400px; }
/* Konumlandırma: Sola ve Alta Yaslı kalır */
.denge-content-wrapper {
justify-content: flex-start; /* **SOLA YASLI KALIYOR** */
align-items: flex-end;
padding: 0 15px 25px 15px;
}
.denge-text-box {
max-width: 70%; /* **Ekranın daha küçük bir yüzdesini kapla** */
padding: 15px;
margin-left: 15px; /* Soldan küçük boşluk bırak */
text-align: left; /* Metin sola yaslı kalır */
border: 1px solid var(--denge-color-accent);
}
.denge-heading { font-size: 1.4rem; margin-bottom: 5px; }
.denge-paragraph { font-size: 0.75rem; margin-bottom: 10px; }
.denge-cta-btn { font-size: 0.8rem; padding: 7px 20px; }
}
/* Telefon Görünümü (576px altı) */
@media (max-width: 576px) {
.denge-hero-section { min-height: 250px; height: 40vh; }
.denge-content-wrapper {
padding: 0 10px 15px 10px; /* Köşelerden minimal boşluk */
}
.denge-text-box {
max-width: 80%; /* Çok küçük ekranda %80'e çıkarak okunurluğu sağlar */
padding: 10px;
margin-left: 10px;
}
.denge-heading { font-size: 1.1rem; }
.denge-paragraph { display: none; } /* En küçük ekranda paragrafı gizle, sadece başlık ve buton kalsın. */
.denge-cta-btn { font-size: 0.75rem; padding: 5px 15px; }
}
/* Ansayfa banner bitiş */
/* --- HAKKIMIZDA SAYFASI CSS --- */
/* Genel Sayfa Kapsayıcı */
.denge-about-page-container {
padding: 0;
}
/* --- 1. GİRİŞ BANNERI VE BAŞLIK --- */
.denge-about-banner-section {
background-color: var(--denge-color-secondary, #004d40);
color: white;
padding: 80px 0; /* Büyük iç boşluk */
text-align: center;
}
.denge-banner-heading {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 15px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
}
.denge-lead-text {
font-size: 1.15rem;
max-width: 800px;
margin: 0 auto;
color: #cfd8dc;
}
/* --- 2. İÇERİK BÖLÜMÜ (Görsel ve Metin Yan Yana) --- */
.denge-content-section {
display: flex;
align-items: center;
padding: 80px 0;
gap: 50px; /* Bölümler arası boşluk */
}
.denge-image-wrapper, .denge-text-wrapper {
flex: 1;
min-width: 0;
}
.denge-content-image {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-deep, 0 20px 50px rgba(0, 0, 0, 0.2));
transition: transform 0.5s ease;
}
.denge-content-image:hover {
transform: scale(1.02); /* Hafif zoom efekti */
}
.denge-section-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 25px;
color: var(--denge-color-secondary, #004d40);
}
.denge-main-text p {
font-size: 1rem;
margin-bottom: 15px;
color: var(--color-text-dark, #343a40);
}
/* --- 3. HİKAYE VE VİZYON BÖLÜMÜ (Vurgulu) --- */
.denge-story-section {
background-color: var(--color-background, #f7f9fb);
padding: 70px 0;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.denge-story-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--denge-color-primary, #007bff); /* Ana Renkle Vurgulama */
margin-bottom: 20px;
}
.denge-story-text {
font-style: italic;
font-size: 1.1rem;
max-width: 900px;
margin: 0 auto;
color: var(--color-text-dark, #343a40);
line-height: 1.8;
}
/* --- 4. NEDEN BİZ BÖLÜMÜ (4'lü Kart Grid) --- */
.denge-why-us-section {
padding: 80px 0;
}
.denge-reasons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.denge-reason-item {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-bottom: 4px solid transparent;
}
.denge-reason-item.denge-card-hover:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lift, 0 10px 30px rgba(0, 0, 0, 0.1));
border-bottom-color: var(--denge-color-primary, #007bff); /* Mavi Vurgu */
}
.denge-reason-icon {
font-size: 2.5rem;
color: var(--denge-color-accent, #ffc107);
margin-bottom: 15px;
display: block;
}
.denge-reason-heading {
font-size: 1.3rem;
font-weight: 700;
color: var(--denge-color-secondary, #004d40);
margin-bottom: 10px;
}
/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 992px) {
/* İki sütunlu yapıyı tek sütuna çevirme */
.denge-content-section {
flex-direction: column;
padding: 50px 0;
}
.denge-text-wrapper {
order: 1; /* Metni mobil cihazda görselin üzerine taşı */
padding: 0 15px;
}
.denge-image-wrapper {
order: 2; /* Görseli alta al */
padding: 0 15px;
}
.denge-banner-heading {
font-size: 2.2rem;
}
.denge-section-title {
font-size: 1.8rem;
}
}
@media (max-width: 576px) {
.denge-about-banner-section {
padding: 40px 0;
}
.denge-banner-heading {
font-size: 1.8rem;
}
.denge-story-section {
padding: 50px 0;
}
.denge-reasons-grid {
grid-template-columns: 1fr; /* Tek sütunlu mobil grid */
}
/* En küçük ekranda başlık ve breadcrumb'ı gizle */
.denge-page-header {
display: none;
}
}
/* --- EKİP BÖLÜMÜ CSS --- */
.denge-team-section {
padding: 80px 0;
background-color: #ffffff; /* Beyaz Arka Plan */
}
.denge-team-title {
font-size: 2.8rem;
font-weight: 900;
margin-bottom: 50px;
color: var(--denge-color-primary, #007bff);
text-align: center;
font-family: var(--font-heading, 'Montserrat', sans-serif);
}
/* Kartların Kapsayıcı Grid Yapısı */
.denge-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
justify-content: center;
}
/* Ekip Üyesi Kartı */
.denge-team-member {
text-align: center;
background-color: #f8f9fa;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
/* Hover Efekti (Kartın yükselmesi ve görselin büyümesi) */
.denge-team-member.denge-member-card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* Görsel Alanı */
.denge-member-image-container {
position: relative;
width: 100%;
padding-top: 100%; /* Dikeyde kare (1:1 en boy oranı) */
overflow: hidden;
}
.denge-member-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%); /* Görsele sofistike bir hava katmak için */
transition: all 0.5s ease;
}
/* Hover'da görselin renklenmesi ve hafif büyümesi */
.denge-team-member:hover .denge-member-image {
filter: grayscale(0%);
transform: scale(1.05);
}
/* Ekip Üyesi Bilgileri */
.denge-member-info {
padding: 20px 15px;
background-color: white;
}
.denge-member-name {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
color: var(--denge-color-secondary, #004d40);
}
.denge-member-title {
font-size: 1rem;
color: var(--color-text-light, #6c757d);
margin-top: 5px;
}
/* Sosyal Medya İkonları (Görselin Üzerinde Belirir) */
.denge-member-social {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 123, 255, 0.7); /* Mavi overlay */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.denge-team-member:hover .denge-member-social {
opacity: 1;
}
.denge-social-icon {
color: white;
font-size: 1.8rem;
margin: 0 10px;
transition: transform 0.3s ease;
}
.denge-social-icon:hover {
transform: scale(1.2);
color: var(--denge-color-accent, #ffc107);
}
/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 768px) {
.denge-team-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.denge-team-title {
font-size: 2.2rem;
}
}
@media (max-width: 576px) {
.denge-team-grid {
grid-template-columns: 1fr; /* Mobilde tek kart */
max-width: 350px;
margin: 0 auto;
}
}
/* --- YALNIZCA MİSYON SAYFASI CSS --- */
/* Misyon Sayfası Ana Kapsayıcı */
.denge-mission-only-main {
padding-bottom: 80px;
}
/* --- 1. MİSYON HERO BÖLÜMÜ --- */
.denge-mission-hero-section {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 60px;
padding: 80px 0;
}
/* KRİTİK GÜNCELLEME: GÖRSEL DAHA BÜYÜK OLACAK */
.denge-mission-hero-content {
flex: 1; /* Metin 1 birim yer kaplar */
min-width: 0;
}
.denge-mission-hero-image-wrapper {
flex: 1.25; /* **Görsel 1.25 birim yer kaplar** (Metinden daha büyük) */
position: relative;
padding: 20px;
background-color: var(--denge-color-secondary, #004d40);
border-radius: 12px;
box-shadow: var(--shadow-deep, 0 20px 50px rgba(0, 0, 0, 0.25));
min-width: 0;
}
.denge-mission-hero-image {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
mix-blend-mode: luminosity;
}
.denge-mission-heading {
font-size: 3rem;
font-weight: 900;
color: var(--denge-color-primary, #007bff);
margin-bottom: 30px;
line-height: 1.1;
text-transform: uppercase;
}
.denge-mission-text.denge-text-large p {
font-size: 1.2rem;
color: var(--color-text-dark, #343a40);
line-height: 1.8;
margin-bottom: 20px;
}
/* --- 2. UZMANLIK ALANLARI / DEĞERLER --- */
.denge-mission-values-section {
background-color: var(--color-background, #f7f9fb);
padding: 70px 0;
}
.denge-values-title {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 40px;
color: var(--denge-color-secondary, #004d40);
}
.denge-values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.denge-value-card {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-bottom: 5px solid var(--denge-color-primary, #007bff);
}
.denge-value-card.denge-card-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
/* KRİTİK GÜNCELLEME: İKON BOYUTLARI BÜYÜYOR */
.denge-value-icon-wrapper {
width: 100px; /* **80px'den 100px'e yükseltildi** */
height: 100px; /* **80px'den 100px'e yükseltildi** */
margin: 0 auto 25px; /* Boşluk da artırıldı */
background-color: #e0f7fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.denge-value-icon {
width: 65px; /* **50px'den 65px'e yükseltildi** */
height: 65px;
object-fit: contain;
}
.denge-value-heading {
font-size: 1.4rem;
font-weight: 700;
color: var(--denge-color-secondary, #004d40);
margin-bottom: 10px;
}
/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 992px) {
/* İki sütunu alt alta getir */
.denge-mission-hero-section {
flex-direction: column;
gap: 40px;
padding: 50px 15px;
}
/* Metni görselin üstüne al */
.denge-mission-hero-content {
order: 1;
flex: 1; /* Mobil görünümde flex oranları eşitlenir */
}
.denge-mission-hero-image-wrapper {
order: 2;
flex: 1; /* Mobil görünümde flex oranları eşitlenir */
}
.denge-mission-heading {
font-size: 2.2rem;
}
.denge-mission-text.denge-text-large p {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.denge-mission-only-main {
padding-bottom: 50px;
}
.denge-mission-hero-section {
padding: 40px 15px;
}
.denge-mission-heading {
font-size: 1.8rem;
}
.denge-values-grid {
grid-template-columns: 1fr;
}
.denge-value-card {
padding: 25px;
}
}
/* ======================================================= */
/* 1. GENEL AYARLAR VE HELPER CLASS'LAR */
/* ======================================================= */
/* Sitenin ana renk paletini buraya yerleştirin. */
:root {
--primary-color: #4CAF50; /* Ana Yeşil/Vurgu Rengi */
--secondary-color: #1e3a5f; /* Koyu Mavi/Arka Plan Rengi */
--text-dark: #333;
--text-light: #f4f4f4;
}
/* Koyu Zemin ve Gradient */
.bg-dark-gradient {
/* Zarif koyu renk geçişi (Örneğin, lacivertten siyaha) */
background: linear-gradient(135deg, var(--secondary-color) 0%, #0f1c30 100%);
color: var(--text-light);
padding-top: 6rem;
padding-bottom: 6rem;
}
/* Hafif Gri Zemin */
.referans-gallery-section {
background-color: #f8f8f8;
padding-top: 5rem;
padding-bottom: 5rem;
}
/* ======================================================= */
/* 2. FİLTRELEME VE BAŞLIK BÖLÜMÜ (HERO) */
/* ======================================================= */
.filter-controls {
margin-top: 2rem;
}
/* Filtre Butonları (Modern Outline Stili) */
.btn-primary-outline {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
margin: 5px; /* Flexbox'ta boşluk bırakır */
}
.btn-primary-outline:hover,
.btn-primary-outline.active {
background-color: var(--primary-color);
color: #fff;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); /* Hafif gölge */
}
/* ======================================================= */
/* 3. FANTASTİK KART IZGARASI (GRID LAYOUT) */
/* ======================================================= */
.fantastic-grid {
display: grid;
/* Masaüstü: 3 sütun */
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
/* Tablet Uyumu */
@media (max-width: 1024px) {
.fantastic-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Mobil Uyumu */
@media (max-width: 768px) {
.fantastic-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
/* ======================================================= */
/* 4. REFERANS KARTLARI VE HOVER EFEKTLERİ */
/* ======================================================= */
.fantastic-card {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12); /* Hafif belirgin gölge */
background-color: #fff;
cursor: pointer;
/* 3D efekti için hafif transform */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Kartın üzerine gelindiğinde hafif yukarı kalkma efekti */
.fantastic-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.card-link-wrapper {
display: block;
text-decoration: none;
color: inherit;
height: 100%; /* İçeriği tamamen kaplar */
}
/* Resim Konteyneri (En-Boy Oranı Sağlamak İçin) */
.card-image-container {
position: relative;
width: 100%;
/* Sabit en-boy oranı (Örn: 3:2 oranı) */
padding-top: 66.66%;
}
.card-image-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Yumuşak büyüme animasyonu */
}
/* Kartın Üzerine Gelindiğinde Resim Efekti (Büyütme) */
.fantastic-card:hover .card-image-main {
transform: scale(1.15);
}
/* Overlay (Üzerine Gelen Bilgi Kaplaması) */
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75); /* Daha belirgin koyu kaplama */
opacity: 0; /* Başlangıçta görünmez */
transition: opacity 0.4s ease;
display: flex;
align-items: flex-end; /* İçeriği alta hizala */
padding: 25px;
z-index: 10; /* Resmin üzerinde kalmasını sağlar */
}
/* Kartın Üzerine Gelindiğinde Kaplamayı Göster */
.fantastic-card:hover .card-overlay {
opacity: 1;
}
/* Kaplama İçeriği Animasyonu */
.overlay-content {
color: #fff;
/* Başlangıçta hafifçe gizle */
transform: translateY(20px);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 100%;
}
.fantastic-card:hover .overlay-content {
/* Yukarı kaydırarak göster */
transform: translateY(0);
}
/* Detaylar ve Başlık Stilleri */
.category-tag {
display: inline-block;
background-color: var(--primary-color);
color: #fff;
padding: 4px 12px;
border-radius: 3px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
.overlay-title {
font-size: 1.6rem;
margin-top: 0;
margin-bottom: 15px;
font-weight: 700;
line-height: 1.2;
}
.view-project-btn {
display: inline-block;
border: 2px solid #fff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 0.9rem;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
text-transform: uppercase;
}
.view-project-btn:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
@media (max-width: 768px) {
/* Alt Bar Sabitleyici */
.mobile-action-bar-2026 {
position: fixed;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
width: 92%;
z-index: 9999;
pointer-events: none; /* Arka plana tıklamayı engellemez */
}
.cta-buttons-container.modern-glow {
pointer-events: auto; /* Butonlara tıklanabilir */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
padding: 10px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 15px 35px rgba(0, 45, 114, 0.2);
}
.cta-btn {
position: relative;
overflow: hidden;
text-decoration: none;
height: 50px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cta-btn:active {
transform: scale(0.95); /* Dokunma hissi (Haptic feel) */
}
.btn-content {
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
color: #fff;
}
/* Teklif Al - Derin Mavi & Parlama */
.cta-btn-primary {
background: linear-gradient(135deg, #002d72 0%, #0056b3 100%);
box-shadow: 0 4px 15px rgba(0, 45, 114, 0.3);
}
/* Sürekli Akan Parlama Efekti (Shimmer) */
.shimmer {
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 3s infinite;
}
/* WhatsApp - Canlı Yeşil & Zıplama */
.cta-btn-whatsapp {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.whatsapp-bounce {
animation: iconBounce 2s infinite;
}
/* Animasyon Tanımları */
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes iconBounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-5px); }
60% { transform: translateY(-3px); }
}
}
@media (max-width: 768px) {
/* Ana taşıyıcıyı ekranın yatayda tam ortasına çiviler */
.mobile-action-bar-2026 {
position: fixed !important;
bottom: 20px !important; /* Alt boşluk */
left: 50% !important;
transform: translateX(-50%) !important; /* Tam matematiksel orta nokta */
width: 90% !important; /* Ekranın %90'ını kaplar, yanlardan eşit boşluk bırakır */
max-width: 400px !important; /* Çok geniş tabletlerde devleşmesini engeller */
z-index: 99999 !important;
display: flex !important;
justify-content: center !important;
}
/* Butonların içindeki her şeyi tam merkeze toplar */
.cta-buttons-container.modern-glow {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* İki eşit parçaya böler */
gap: 10px !important;
width: 100% !important;
padding: 10px !important;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(15px) !important;
border-radius: 20px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
align-items: center !important;
}
/* Buton içindeki metin ve ikonları dikey ve yatayda ortalar */
.cta-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important; /* Metni butonun tam ortasına yazar */
height: 50px !important;
text-align: center !important;
border-radius: 15px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.btn-content {
display: flex !important;
align-items: center !important;
justify-content: center !important; /* İkon ve yazıyı merkezde birleştirir */
gap: 8px !important;
}
}
@media (max-width: 768px) {
/* Ana Taşıyıcı: Hafif sağa konumlandırma */
.mobile-action-bar-2026 {
position: fixed !important;
bottom: 25px !important; /* Alt çentikten güvenli mesafe */
left: 58% !important; /* %50 tam ortadır, %58 hafif sağa yaslar */
transform: translateX(-50%) !important;
width: 82% !important; /* Görseldeki gibi kompakt görünmesi için */
max-width: 360px !important;
z-index: 10000 !important;
display: flex !important;
}
/* Buton Grubu: Cam Efekti ve Şık Kenarlar */
.cta-buttons-container.modern-glow {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
width: 100% !important;
padding: 8px !important;
background: rgba(255, 255, 255, 0.75) !important; /* Yarı şeffaf */
backdrop-filter: blur(15px) saturate(160%) !important;
-webkit-backdrop-filter: blur(15px) saturate(160%) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}
/* Butonların Ortak Stili */
.cta-btn {
height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
border-radius: 15px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #fff !important;
position: relative !important;
overflow: hidden !important;
}
/* Görseldeki Renk Tonları */
.cta-btn-primary {
background: linear-gradient(135deg, #002d72 0%, #0056b3 100%) !important;
}
.cta-btn-whatsapp {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
}
/* Mikro Animasyon: Parlama */
.shimmer {
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
}
/* --- GENEL SIFIRLAMA VE SABİTLEME --- */
.action-bar-2026 {
position: fixed;
z-index: 999999;
display: block;
}
.action-container {
display: flex;
gap: 10px;
}
.action-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
color: #fff !important;
font-weight: 700;
border-radius: 12px;
transition: all 0.3s ease;
}
/* Renk Paleti */
.btn-blue { background: #007bff; }
.btn-green { background: #25d366; }
.btn-red { background: #e74c3c; }
/* --- CANLI YANIP SÖNME (PULSE) EFEKTİ --- */
.pulse-ring, .pulse-ring-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: inherit;
z-index: -1;
}
.pulse-ring { animation: wave-pulse 2s infinite ease-out; }
.pulse-ring-2 { animation: wave-pulse 2s infinite ease-out 0.7s; }
@keyframes wave-pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.3, 1.5); opacity: 0; }
}
/* --- MOBİL GÖRÜNÜM (Alt Sabit Bar) --- */
@media (max-width: 991px) {
.action-bar-2026 {
bottom: 0;
left: 0;
width: 100%;
background: #fff;
padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
}
.action-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Yan yana 3 buton */
}
.action-btn {
flex-direction: column;
font-size: 10px;
padding: 8px 2px;
}
.action-btn i { font-size: 18px; margin-bottom: 3px; }
}
/* --- MASAÜSTÜ GÖRÜNÜM (Sağ Alt Köşe) --- */
@media (min-width: 992px) {
.action-bar-2026 {
bottom: 30px;
right: 30px;
}
.action-container {
flex-direction: column; /* Üst üste */
align-items: flex-end;
}
.action-btn {
width: 180px; /* Genişlik */
padding: 12px 20px;
font-size: 14px;
flex-direction: row; /* İkon ve yazı yan yana */
gap: 12px;
margin-bottom: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.action-btn:hover {
transform: scale(1.05) translateX(-5px);
filter: brightness(1.1);
}
}
/* referanslar yenı css kodları /*
/* 2026 ULTRA MODERN CORE */
.denge-ref-wrapper {
background: #0f172a; /* Gece Mavisi Zemin */
padding: 20px 0 100px;
font-family: 'Inter', sans-serif;
position: relative;
overflow: hidden;
}
/* Arka Plan Hareketli Işıklar */
.denge-ref-wrapper::before {
content: ''; position: absolute; top: -10%; left: -10%; width: 50%; height: 50%;
background: radial-gradient(circle, rgba(0, 114, 255, 0.12), transparent 70%);
filter: blur(100px); z-index: 0; pointer-events: none;
}
/* MOBİL UYUMLU BUTON FİLTRE (TAM GÖRÜNÜM) */
.filter-container-2026 {
display: flex;
flex-wrap: wrap; /* Mobilde butonların alt alta geçmesini sağlar */
justify-content: center;
gap: 10px;
padding: 20px 15px 40px;
z-index: 2;
position: relative;
}
.modern-pill {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
padding: 10px 22px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
backdrop-filter: blur(15px);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modern-pill.active {
background: linear-gradient(135deg, #0072ff, #00c6ff);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 25px rgba(0, 114, 255, 0.4);
transform: scale(1.05);
}
/* GLASS CARD GRID */
.ref-grid-2026 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 25px;
padding: 0 15px;
position: relative;
z-index: 1;
}
.glass-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
overflow: hidden;
transition: all 0.5s ease;
text-decoration: none !important;
}
.glass-card:hover {
transform: translateY(-12px);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 198, 255, 0.3);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.card-media-box {
position: relative;
height: 280px;
overflow: hidden;
}
.card-media-box img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.8s ease;
}
.glass-card:hover img { transform: scale(1.1); }
/* PLACEHOLDER (GÖRSEL YOKSA) */
.water-placeholder {
width: 100%; height: 100%; background: #1e293b;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.water-placeholder i { font-size: 45px; color: #00c6ff; margin-bottom: 10px; opacity: 0.8; }
.water-placeholder span { font-size: 10px; color: #64748b; letter-spacing: 2px; }
/* KART İÇERİĞİ */
.card-body-2026 { padding: 25px; }
.cat-tag { color: #00c6ff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; display: block; }
.card-body-2026 h3 { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 20px; line-height: 1.4; }
.btn-detail {
display: inline-flex; align-items: center; gap: 8px;
color: #fff; font-size: 12px; font-weight: 700;
padding: 8px 16px; background: rgba(255,255,255,0.05); border-radius: 10px; transition: 0.3s;
}
.glass-card:hover .btn-detail { background: #0072ff; }
/* --- MOBİL ÖZEL AYARLAR --- */
@media (max-width: 768px) {
.denge-ref-wrapper { padding-top: 10px; }
.ref-grid-2026 { grid-template-columns: 1fr; } /* Kartları tek sütuna düşür */
.filter-container-2026 {
gap: 8px; /* Buton aralarını daralt */
padding-bottom: 30px;
}
.modern-pill {
padding: 8px 16px; /* Butonları biraz küçült ki daha çok sığsın */
font-size: 12px;
flex-grow: 1; /* Mobilde butonlar alanı doldursun */
text-align: center;
}
.card-media-box { height: 220px; }
.denge-ref-wrapper h2 { font-size: 28px; }
}
/*referanslar css son /*
/*referanslar detay css başlangıc /*
/* 2026 MODERN DETAY CORE */
.detay-2026-wrapper {
background: #0f172a; /* Gece Mavisi Zemin */
padding: 60px 0 100px;
color: #fff;
}
/* BENTO GRID SİSTEMİ */
.bento-grid-detay {
display: grid;
grid-template-columns: 1.8fr 1.2fr;
gap: 30px;
align-items: start;
}
/* SOL TARAF: GÖRSELLER VE GALERİ */
.bento-visual-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 32px;
padding: 20px;
backdrop-filter: blur(10px);
}
.main-img-2026 {
width: 100%;
border-radius: 24px;
height: 450px;
object-fit: cover;
transition: 0.5s ease;
}
.gallery-grid-2026 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
margin-top: 20px;
}
.gallery-grid-2026 img {
width: 100%;
height: 90px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.3s;
}
.gallery-grid-2026 img:hover {
transform: scale(1.05);
border-color: #00c6ff;
}
/* SAĞ TARAF: BİLGİ KARTI */
.bento-info-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 198, 255, 0.2);
border-radius: 32px;
padding: 40px;
backdrop-filter: blur(20px);
position: sticky;
top: 20px;
}
.info-title-2026 {
font-size: 28px;
font-weight: 800;
margin-bottom: 25px;
color: #fff;
line-height: 1.3;
}
.spec-list {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.spec-list li {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 14px;
}
.spec-list li strong { color: #94a3b8; font-weight: 500; }
.spec-list li span { color: #00c6ff; font-weight: 700; text-align: right; }
/* AÇIKLAMA ALANI */
.desc-box-2026 {
margin-top: 30px;
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.desc-box-2026 h4 { color: #fff; font-size: 18px; margin-bottom: 15px; }
.desc-box-2026 p { color: #cbd5e1; line-height: 1.8; font-size: 15px; }
.btn-back-modern {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #0072ff;
color: #fff !important;
text-decoration: none !important;
padding: 15px;
border-radius: 16px;
font-weight: 700;
transition: 0.3s;
margin-top: 20px;
}
.btn-back-modern:hover { background: #00c6ff; box-shadow: 0 10px 20px rgba(0, 114, 255, 0.3); }
/* MOBİL AYAR */
@media (max-width: 992px) {
.bento-grid-detay { grid-template-columns: 1fr; }
.main-img-2026 { height: 300px; }
.bento-info-box { position: relative; top: 0; padding: 25px; }
}
/*referanslar detay css son /*
/*iletisim yenı baslngıc */
:root {
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.1);
--accent-blue: #0072ff;
--accent-cyan: #00c6ff;
}
/* ANA SARMALAYICI */
.iletisim-2026-wrapper {
background: #0f172a; /* Derin Gece Mavisi */
color: #fff;
padding: 60px 0;
font-family: 'Inter', sans-serif;
position: relative;
overflow: hidden;
}
/* ARKA PLAN PARILTISI */
.iletisim-2026-wrapper::after {
content: ''; position: absolute; bottom: -10%; right: -5%; width: 400px; height: 400px;
background: radial-gradient(circle, rgba(0, 198, 255, 0.1), transparent 70%);
filter: blur(80px); pointer-events: none;
}
/* BENTO GRID DÜZENİ */
.bento-contact-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 30px;
}
/* FORM ALANI (SOL) */
.bento-form-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 32px;
padding: 50px;
backdrop-filter: blur(20px);
}
.form-header h2 { font-size: 38px; font-weight: 800; margin-bottom: 15px; background: linear-gradient(to right, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.form-header p { color: #94a3b8; font-size: 16px; margin-bottom: 40px; }
/* MODERN INPUTS */
.modern-input-group { margin-bottom: 25px; position: relative; }
.modern-input-group label { display: block; font-size: 13px; font-weight: 600; color: #00c6ff; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.modern-input-group input, .modern-input-group textarea {
width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
border-radius: 16px; padding: 15px 20px; color: #fff; transition: 0.3s;
}
.modern-input-group input:focus, .modern-input-group textarea:focus {
outline: none; border-color: var(--accent-cyan); background: rgba(255,255,255,0.08); box-shadow: 0 0 15px rgba(0, 198, 255, 0.2);
}
.btn-send-2026 {
width: 100%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
color: #fff; border: none; padding: 18px; border-radius: 18px; font-weight: 700;
font-size: 16px; cursor: pointer; transition: 0.4s; margin-top: 10px;
}
.btn-send-2026:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 114, 255, 0.4); }
/* BİLGİ KARTLARI (SAĞ) */
.bento-info-stack { display: flex; flex-direction: column; gap: 20px; }
.info-mini-card {
background: var(--glass-bg); border: 1px solid var(--glass-border);
padding: 30px; border-radius: 24px; display: flex; align-items: center; gap: 20px;
transition: 0.3s;
}
.info-mini-card:hover { background: rgba(255,255,255,0.06); border-color: var(--accent-cyan); }
.info-icon { width: 50px; height: 50px; background: rgba(0, 114, 255, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-cyan); font-size: 20px; }
.info-content h4 { font-size: 14px; color: #64748b; text-transform: uppercase; margin-bottom: 5px; font-weight: 700; }
.info-content p { font-size: 16px; color: #fff; margin: 0; font-weight: 500; }
/* SSS ACCORDION */
.sss-2026-container { margin-top: 80px; }
.sss-item-2026 { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; margin-bottom: 15px; overflow: hidden; }
.sss-btn { width: 100%; padding: 25px; background: none; border: none; color: #fff; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; }
.sss-content { max-height: 0; overflow: hidden; transition: 0.3s ease-out; background: rgba(255,255,255,0.02); }
.sss-content p { padding: 0 25px 25px; color: #94a3b8; line-height: 1.6; }
/* MAP */
.map-full-2026 { width: 100%; height: 450px; border-radius: 40px; overflow: hidden; margin-top: 80px; border: 1px solid var(--glass-border); }
.map-full-2026 iframe { width: 100%; height: 100%; filter: invert(90%) hue-rotate(180deg) opacity(0.8); }
/* MOBİL AYARLAR */
@media (max-width: 992px) {
.bento-contact-grid { grid-template-columns: 1fr; }
.bento-form-card { padding: 30px; }
.form-header h2 { font-size: 28px; }
.iletisim-2026-wrapper { padding: 40px 15px; }
}
/*iletisin css son */
/*projeler css yenı baslngıc */
/* TASARIM YAPISI (Dokunulmadı) */
.proje-2026-wrapper { background: #0f172a; padding: 60px 0; color: #fff; font-family: 'Inter', sans-serif; }
.bento-accordion { display: flex; flex-direction: column; gap: 20px; }
.proje-card-bento { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; overflow: hidden; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.proje-card-bento:hover { border-color: #00c6ff; background: rgba(255, 255, 255, 0.04); }
.proje-trigger { padding: 25px 30px; display: flex; align-items: center; gap: 20px; cursor: pointer; user-select: none; }
.icon-box-bento { width: 60px; height: 60px; background: rgba(0, 198, 255, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(0, 198, 255, 0.2); }
.icon-box-bento img { width: 70%; height: 70%; object-fit: contain; }
.trigger-text h3 { font-size: 20px; font-weight: 700; margin: 0; color: #fff; }
/* OK İŞARETİ STİLİ */
.chevron-icon { margin-left: auto; transition: 0.4s; color: #00c6ff; font-size: 18px; }
.proje-panel { max-height: 0; overflow: hidden; transition: 0.4s ease-out; background: rgba(0, 0, 0, 0.2); }
.panel-inner { padding: 30px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sub-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 25px; }
.sub-item-bento { background: rgba(255, 255, 255, 0.03); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; color: #94a3b8; display: flex; align-items: center; gap: 10px; }
.sub-item-bento::before { content: '→'; color: #00c6ff; font-weight: bold; }
/* ÜRÜN GRID YAPISI (Dokunulmadı) */
.urun-grid-2026 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin-top: 50px; }
.flip-card-2026 { height: 400px; perspective: 1000px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.flip-card-2026.active .flip-card-inner { transform: rotateY(180deg); }
.front-2026, .back-2026 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.front-2026 { background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.front-overlay { background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent); width: 100%; padding: 40px 20px; }
.back-2026 { background: #1e293b; color: #fff; transform: rotateY(180deg); padding: 30px; display: flex; flex-direction: column; text-align: left; }
.back-2026 h4 { color: #00c6ff; margin-bottom: 20px; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.scroll-desc { flex-grow: 1; overflow-y: auto; padding-right: 10px; font-size: 14px; line-height: 1.6; color: #cbd5e1; }
.scroll-desc::-webkit-scrollbar { width: 4px; }
.scroll-desc::-webkit-scrollbar-thumb { background: #00c6ff; border-radius: 10px; }
@media (max-width: 768px) { .proje-trigger { padding: 15px; } .icon-box-bento { width: 50px; height: 50px; } .trigger-text h3 { font-size: 16px; } }
/*projeler css yenı son */
/*pageheader h1 başlık başlangıç */
.categories-font {
font-family: 'Playfair Display', 'Georgia', 'Inter', serif !important;
font-weight: 700 !important;
font-size: 1.6rem !important;
letter-spacing: 0.5px !important;
line-height: 1.4 !important;
color: #0a2b3e !important;
margin-bottom: 12px !important;
position: relative !important;
display: inline-block !important;
font-style: italic !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
/* Masaüstü (1200px üstü) */
@media (min-width: 1200px) {
.categories-font {
font-size: 2.2rem !important;
letter-spacing: 0.8px !important;
font-weight: 700 !important;
}
}
/* Tablet (769px - 1199px) */
@media (max-width: 1199px) and (min-width: 769px) {
.categories-font {
font-size: 1.9rem !important;
letter-spacing: 0.6px !important;
}
}
/* Mobil (768px altı) */
@media (max-width: 768px) {
.categories-font {
font-size: 1.5rem !important;
letter-spacing: 0.3px !important;
display: block !important;
text-align: center !important;
font-style: italic !important;
}
}
/* Küçük mobil (576px altı) */
@media (max-width: 576px) {
.categories-font {
font-size: 1.3rem !important;
letter-spacing: 0.2px !important;
}
}
/* Çok küçük mobil (400px altı) */
@media (max-width: 400px) {
.categories-font {
font-size: 1.1rem !important;
letter-spacing: 0.1px !important;
}
}
/* ============================================ */
/* ✨ ŞIK ALT ÇİZGİ - İNCE VE ZARİF */
/* ============================================ */
.categories-font::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 55px;
height: 2px;
background: linear-gradient(90deg, #00b4d8, #0077b6, #00b4d8);
background-size: 200% 100%;
border-radius: 2px;
animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Mobilde alt çizgi ortada */
@media (max-width: 768px) {
.categories-font::after {
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 2px;
margin-bottom:5px !important;
}
}
/* ============================================ */
/* ✨ ALTERNATİF - GRADIENT RENK (DAHA ŞIK) */
/* ============================================ */
/*
.categories-font {
font-family: 'Playfair Display', 'Georgia', serif !important;
font-weight: 700 !important;
font-size: 1.8rem !important;
letter-spacing: 0.5px !important;
background: linear-gradient(135deg, #0a2b3e 0%, #00b4d8 50%, #0077b6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
display: inline-block !important;
font-style: italic !important;
text-shadow: none !important;
}
*/
/* ============================================ */
/* ✨ ALTERNATİF 2 - İNCE VE ZARİF */
/* ============================================ */
/*
.categories-font {
font-family: 'Cormorant Garamond', 'Georgia', serif !important;
font-weight: 500 !important;
font-size: 1.8rem !important;
letter-spacing: 1px !important;
color: #0a2b3e !important;
font-style: italic !important;
text-transform: uppercase !important;
}
@media (min-width: 1200px) {
.categories-font {
font-size: 2.4rem !important;
letter-spacing: 1.5px !important;
}
}
*/
/* ============================================ */
/* 📱 PAGE HEADER - MOBİL GÖRÜNÜM */
/* ============================================ */
.page-header {
background-color: #f8f9fa !important;
padding: 30px 0 !important;
border-bottom: 1px solid #e9ecef !important;
text-align: center !important;
}
.page-header h1 {
font-size: 2.2rem !important;
font-weight: 700 !important;
color: #343a40 !important;
margin-bottom: 10px !important;
}
/* Breadcrumb */
.breadcrumb {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.9rem !important;
flex-wrap: wrap !important;
}
.breadcrumb li {
display: inline-flex !important;
align-items: center !important;
color: #6c757d !important;
}
.breadcrumb a {
color: #007bff !important;
text-decoration: none !important;
}
.breadcrumb a:hover {
color: #0056b3 !important;
}
.breadcrumb i {
margin: 0 8px !important;
font-size: 0.8em !important;
color: #adb5bd !important;
}
.breadcrumb .active {
color: #343a40 !important;
font-weight: 500 !important;
}
/* ============================================ */
/* 📱 MOBİL (768px altı) - PAGE HEADER DÜZENLE */
/* ============================================ */
@media (max-width: 768px) {
.page-header {
padding: 20px 15px !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.page-header h1 {
font-size: 1.6rem !important;
text-align: center !important;
width: 100% !important;
display: block !important;
margin-bottom: 8px !important;
}
.breadcrumb {
justify-content: center !important;
font-size: 12px !important;
flex-wrap: wrap !important;
gap: 4px 6px !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.breadcrumb li {
font-size: 15px !important;
display: inline-flex !important;
}
.breadcrumb li a {
font-size: 15px !important;
display: inline !important;
}
.breadcrumb .active {
font-size: 15px !important;
}
.breadcrumb i {
font-size: 10px !important;
margin: 0 5px !important;
}
}
/* ============================================ */
/* 📱 KÜÇÜK MOBİL (576px altı) */
/* ============================================ */
@media (max-width: 576px) {
.page-header {
padding: 15px 12px !important;
}
.page-header h1 {
font-size: 1.4rem !important;
}
.breadcrumb {
font-size: 15px !important;
gap: 3px 5px !important;
}
.breadcrumb li,
.breadcrumb li a,
.breadcrumb .active {
font-size: 15px !important;
}
.breadcrumb i {
font-size: 9px !important;
margin: 0 4px !important;
}
}
/* ============================================ */
/* 📱 ÇOK KÜÇÜK MOBİL (400px altı) */
/* ============================================ */
@media (max-width: 400px) {
.page-header {
padding: 12px 10px !important;
}
.page-header h1 {
font-size: 1.2rem !important;
}
.breadcrumb {
font-size: 15px !important;
gap: 2px 4px !important;
}
.breadcrumb li,
.breadcrumb li a,
.breadcrumb .active {
font-size: 15px !important;
}
}
/* ============================================ */
/* 📱 H1 ETİKETİ - MASAÜSTÜ FONT DAHA KÜÇÜK */
/* ============================================ */
/* Varsayılan (Masaüstü) */
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.8rem !important; /* 2rem -> 1.8rem */
font-weight: 700 !important;
color: #0a2b3e !important;
margin-bottom: 10px !important;
}
/* Masaüstü (1200px üstü) */
@media (min-width: 1200px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 2rem !important; /* 2.2rem -> 2rem */
letter-spacing: 0.5px !important;
}
}
/* Masaüstü (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.7rem !important; /* 1.9rem -> 1.7rem */
}
}
/* Tablet (769px - 991px) */
@media (min-width: 769px) and (max-width: 991px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.6rem !important; /* 1.8rem -> 1.6rem */
}
}
/* ============================================ */
/* 📱 MOBİL (768px altı) - AYNI KALSIN */
/* ============================================ */
@media (max-width: 768px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.5rem !important;
text-align: center !important;
display: block !important;
}
}
@media (max-width: 576px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.3rem !important;
}
}
@media (max-width: 400px) {
.page-header h1,
h1.categories-font,
.categories-font {
font-size: 1.2rem !important;
}
}
/*pageheader h1 css son */