html {
    scroll-padding-top: 80px; /* Navbar'ınızın yüksekliği kadar bir değer */
}

 /* === NAVBAR === */

 /* Navbar'ın genel yapısı */
 .main-navbar {
     transition: all 0.3s ease-in-out;
 }

 /* Büyük ekranlarda minimum yükseklik */
 @media (min-width: 992px) {
     .main-navbar {
         min-height: 80px;
     }
 }

 /* Sayfa aşağı kaydırıldığında uygulanacak stil */
 .main-navbar.scrolled {
     background-color: rgba(255, 255, 255, 0.9) !important;
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 /* --- Navbar Linkleri --- */

 /* Tüm linkler için temel stil */
 .main-navbar .navbar-nav .nav-link {
     text-transform: uppercase;
     font-weight: 600;
     padding: 8px 0;
     /* Alt ve üst padding'i 8px, sağ-sol'u 0 yapıyoruz */
     margin: 0 15px;
     /* Sağ ve sol boşluğu margin ile veriyoruz */
     color: #212529;
     /* Varsayılan metin rengi (koyu) */
     border-bottom: 3px solid transparent;
     /* Altta görünmez bir çizgi alanı bırakır (zıplamayı önler) */
     transition: all 0.3s ease;
 }

 /* Bir linkin üzerine fare ile gelindiğinde (HOVER) */
 .main-navbar .navbar-nav .nav-link:hover {
     color: #2C3E50;
     /* Tema rengimizle aynı olsun */
     border-bottom-color: rgba(44, 62, 80, 0.3);
     /* %30 opaklıkta tema rengi çizgi */
 }

 /* Aktif olan linkin stili */
 .main-navbar .navbar-nav .nav-link.active {
     color: #2C3E50;
     /* Tema rengi */
     border-bottom-color: #2C3E50;
     /* Tam opaklıkta tema rengi çizgi */
 }

 #hero {
     height: 95vh;
     /* Ekranı kaplamasını sağlar */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: white;
 }

 .hero-content-box {
     background-color: rgba(255, 255, 255, 0.5);
     /* %60 Siyah transparan arka plan */
     padding: 5%;
     margin-left: 10%;
     transform: skew(-20deg);
     /* Paralelkenar efekti için kutuyu eğiyoruz */
     /* border: 2px solid rgba(255, 255, 255, 0.5); */
     width: 40%;
     /* Genişliği %40 yap */
     height: 100%;
     /* Yüksekliği %100 yap (ana bölümü kapla) */

     /* İçindeki içeriği ortalamak için flexbox özellikleri */
     display: flex;
     flex-direction: column;
     /* İçerikleri alt alta sırala */
     align-items: center;
     justify-content: center;
 }

 .hero-content-inner {
     transform: skew(20deg);
     /* Eğilen kutunun içindeki içeriği tersine eğerek düzeltiyoruz */
 }

 .hero-logo {
     max-height: 80px;
     /* Logo boyutunu ayarlar */
 }

 @media (max-width: 768px) {
     .hero-content-box {
         width: 85%;
         padding: 30px;
         transform: skew(0deg);
         border: none;
     }

     .hero-content-inner {
         transform: skew(0deg);
         /* İçeriğin eğriliğini de kaldır */
     }

     .hero-logo {
         max-height: 60px;
         /* Logo boyutunu küçült */
     }

     #hero h1 {
         font-size: 2.5rem;
         /* Başlık boyutunu küçült */
     }

     #hero p.lead {
         font-size: 1.1rem;
         /* Alt metin boyutunu küçült */
     }
 }

 #services {
     border-top: 1px solid #e9ecef;
 }

 /* Ana Kart Yapısı */
 .service-card {
     display: flex;
     /* Bu, içindeki icon ve body div'lerini yan yana getirir */
     align-items: stretch;
     /* İki bölümün de yüksekliğinin aynı olmasını sağlar */
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     overflow: hidden;
     /* Kenar yuvarlaklığını korumak için */
 }

 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 /* İkon Bölümü (Sol Taraf) */
 .service-card-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     /* Daralmamasını sağlar */
     background-color: #2c3e50;
     /* Koyu Mavi-Gri bir renk */
     color: #fff;
     padding: 20px;
     min-width: 90px;
     /* Sabit genişlik */
 }

 .service-card-icon i {
     font-size: 2.5rem;
     /* İkon boyutu */
 }

 /* Metin Bölümü (Sağ Taraf) */
 .service-card-body {
     padding: 20px;
     text-align: left;
     /* Metinleri sola hizala */
 }

 .service-card-body h4 {
     margin-bottom: 0.5rem;
     font-weight: 600;
 }

 .contact-section {
     background-color: #f8f9fa;
     /* Açık gri bir arka plan */
 }

 .contact-info .info-box {
     display: flex;
     align-items: flex-start;
     margin-bottom: 30px;
 }

 .contact-info .info-box i {
     font-size: 24px;
     color: #0d6efd;
     background: #e7f1ff;
     padding: 10px;
     border-radius: 50%;
     margin-right: 15px;
 }

 .contact-info .info-box h3 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .contact-info .info-box p {
     margin-bottom: 0;
     color: #6c757d;
 }

 .map-section iframe {
     width: 100%;
     height: 350px;
     border: 0;
 }

 .contact-info-bar {
     background-color: #f8f9fa;
     /* Açık gri arka plan */
     padding: 40px 0;
     border-top: 1px solid #dee2e6;
 }

 .info-block {
     text-align: center;
     padding: 20px;
 }

 .info-block .info-icon {
     margin: 0 auto 15px auto;
     width: 60px;
     height: 60px;
     background: #2C3E50;
     /* Ana renk */
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
 }

 .info-block h3 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .info-block p {
     color: #6c757d;
     margin-bottom: 0;
 }

 /* Sütunlar arasına dikey ayraç eklemek için (isteğe bağlı) */
 .info-block:not(:last-child) {
     border-right: 1px solid #dee2e6;
 }

 /* Mobil cihazlarda dikey ayracı kaldırıp altına çizgi ekle */
 @media (max-width: 767px) {
     .info-block:not(:last-child) {
         border-right: none;
         border-bottom: 1px solid #dee2e6;
         margin-bottom: 20px;
         padding-bottom: 20px;
     }
 }

 .map-section iframe {
     width: 100%;
     height: 350px;
     border: 0;
 }

 /* Form stillerini de isterseniz buraya ekleyebilirsiniz */
 /* Örneğin: form inputlarının kenarlıklarını kaldırmak */
 .contact-section form .form-control {
     border: none;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
 }

 .contact-section form .form-control:focus {
     box-shadow: none;
     border-bottom-color: #0d6efd;
 }

 /* --- Kayan Yazı (Marquee) Animasyonu --- */

 /* 1. Animasyonun kendisi (değişiklik yok) */
 @keyframes marquee-animation {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* 2. Dış sarmalayıcı (penceremiz) */
 .marquee-section {
     width: 100%;
     overflow: hidden;
     /* Dışarı taşan içeriği gizle (en önemli kural) */
     background-color: #2c3e50;
     color: #fff;
     padding: 15px 0;
     border-top: 1px solid #dee2e6;
     border-bottom: 1px solid #dee2e6;
 }

 /* 3. İçerik (hareket eden kısım) */
 .marquee-content {
     display: flex;
     align-items: center;
     /* Dikey hizalama */
     white-space: nowrap;
     /* Yazıların alt satıra inmesini engelle */

     /* DİKKAT: Animasyonu doğrudan bu iç elemente uyguluyoruz */
     animation: marquee-animation linear infinite;
     animation-play-state: running;
     /* Animasyonun çalıştığından emin ol */
 }

 /* 4. Panelden gelen hız sınıflarını ANIMASYONUN UYGULANDIĞI YERE ATIYORUZ */
 .speed-normal .marquee-content {
     animation-duration: 40s;
 }

 .speed-fast .marquee-content {
     animation-duration: 20s;
 }

 .speed-slow .marquee-content {
     animation-duration: 80s;
 }

 /* 5. Yazı stilleri (değişiklik yok) */
 .marquee-content span {
     padding: 0 40px;
     text-transform: uppercase;
 }

 .modal-backdrop {
     background-color: rgba(0, 0, 0, 0.7);
 }

 /* Modal içeriğine koyu tema */
 #portfolioDetailModal .modal-content {
     background-color: #212529;
     /* Bootstrap'in koyu rengi */
     color: #fff;
     border: none;
 }

 #portfolioDetailModal .modal-header {
     border-bottom: 1px solid #495057;
     /* Koyu tema için uygun ayraç rengi */
 }

 /* Modal'daki başlığın rengi */
 #portfolioDetailModal .modal-title {
     color: #fff;
 }

 /* Modal kapatma butonu (X) */
 #portfolioDetailModal .btn-close {
     filter: invert(1) grayscale(100) brightness(200%);
 }

 /* Carousel kontrol oklarının arka planını kaldıralım */
 #portfolioDetailModal .carousel-control-prev,
 #portfolioDetailModal .carousel-control-next {
     background: none;
 }

 /* BUTON STİLLERİ                      */
 /* ============================================= */

 /* Primary Buton Rengini Yeniden Tanımlama */
 .btn-primary {
     --bs-btn-color: #fff;
     --bs-btn-bg: #2C3E50;
     --bs-btn-border-color: #2C3E50;
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: #21313f;
     /* Ana renkten %15 daha koyu */
     --bs-btn-hover-border-color: #1c2a35;
     /* Ana renkten %20 daha koyu */
     --bs-btn-focus-shadow-rgb: 44, 62, 80;
     /* #2C3E50 renginin RGB karşılığı */
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: #1c2a35;
     --bs-btn-active-border-color: #17232c;
 }

 /* Disabled (devre dışı) butonun opaklığını biraz artıralım ki okunabilsin */
 .btn-primary:disabled,
 .btn-primary.disabled {
     --bs-btn-disabled-bg: #2C3E50;
     --bs-btn-disabled-border-color: #2C3E50;
     opacity: 0.75;
 }

 .btn-outline-primary {
     --bs-btn-color: #2C3E50;
     /* Yazı Rengi */
     --bs-btn-border-color: #2C3E50;
     /* Kenarlık Rengi */

     --bs-btn-hover-color: #fff;
     /* Üzerine Gelince Yazı Rengi */
     --bs-btn-hover-bg: #2C3E50;
     /* Üzerine Gelince Arka Plan Rengi */
     --bs-btn-hover-border-color: #2C3E50;
     /* Üzerine Gelince Kenarlık Rengi */

     --bs-btn-active-color: #fff;
     /* Tıklanınca Yazı Rengi */
     --bs-btn-active-bg: #2C3E50;
     /* Tıklanınca Arka Plan Rengi */
     --bs-btn-active-border-color: #2C3E50;
     /* Tıklanınca Kenarlık Rengi */

     --bs-btn-focus-shadow-rgb: 44, 62, 80;
     /* Odaklanma Parlaması Rengi */
 }

 /* ============================================= */
 /* PARALLAX AYIRICI BÖLÜMÜ                     */
 /* ============================================= */
 .parallax-divider {
     position: relative;
     padding: 100px 0;
     max-height: 200px;

     /* Parallax Efektinin Kalbi */
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;

     /* İçerik merkezleme */
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Resim üzerine hafif bir karartma efekti ekleyerek yazıların okunurluğunu artırır */
 .parallax-divider::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(44, 62, 80, 0.6);
     /* Temanızdaki koyu renkten %60 transparan bir katman */
     z-index: 1;
 }

 /* İçeriğin karartma efektinin üzerinde kalmasını sağlar */
 .parallax-divider .container {
     position: relative;
     z-index: 2;
 }

 /* Mobil Cihazlar İçin Düzeltme */
 @media (max-width: 768px) {
     .parallax-divider {
         background-attachment: scroll;
         /* Efekti kapat, normal kaydırma yap */
     }
 }

 /* Sayfalama konteyneri için genel ayarlar */
 #pagination-links .pagination {
     --bs-pagination-color: #6c757d;
     /* Varsayılan link metin rengi */
     --bs-pagination-hover-color: #0056b3;
     /* Üzerine gelindiğinde link metin rengi */
     --bs-pagination-focus-color: #0056b3;
     /* Focus link metin rengi */
     --bs-pagination-active-color: #fff;
     /* Aktif sayfa metin rengi */
     --bs-pagination-active-bg: #007bff;
     /* Aktif sayfa arka plan rengi */
     --bs-pagination-active-border-color: #007bff;
     /* Aktif sayfa kenarlık rengi */
     --bs-pagination-disabled-color: #6c757d;
     /* Pasif link metin rengi */
     --bs-pagination-disabled-bg: #e9ecef;
     /* Pasif link arka plan rengi */
     --bs-pagination-disabled-border-color: #dee2e6;
     /* Pasif link kenarlık rengi */
 }

 /* Aktif sayfa butonu (temadaki mavi tonu) */
 #pagination-links .pagination .page-item.active .page-link {
     background-color: #2c3e50;
     /* Bootstrap varsayılan mavi tonu, logonuzdaki maviye yakın */
     border-color: #2c3e50;
     color: #fff;
     /* Yazı rengi beyaz */
 }

 /* Sayfa butonlarının üzerine gelindiğinde */
 #pagination-links .pagination .page-item .page-link:hover {
     background-color: #e9ecef;
     /* Hafif gri arka plan */
     border-color: #dee2e6;
     color: #0056b3;
     /* Üzerine gelindiğinde koyu mavi yazı */
 }

 /* Sayfa butonlarının varsayılan hali (arka plan beyaz) */
 #pagination-links .pagination .page-item .page-link {
     color: #495057;
     /* Koyu gri metin rengi (Logodaki griye yakın) */
     border: 1px solid #dee2e6;
     margin: 0 2px;
     /* Butonlar arasında hafif boşluk */
     border-radius: .25rem;
     /* Hafif yuvarlak köşeler */
 }

 /* Pasif (disabled) Previous/Next butonları */
 #pagination-links .pagination .page-item.disabled .page-link {
     color: #6c757d;
     /* Koyu gri ve daha soluk */
     background-color: #f8f9fa;
     /* Çok açık gri */
     border-color: #dee2e6;
     cursor: not-allowed;
 }

 /* << Previous ve Next >> butonları için özel stil */
 #pagination-links .pagination .page-item:first-child .page-link,
 #pagination-links .pagination .page-item:last-child .page-link {
     border-radius: .25rem;
     /* Köşeleri yuvarlak tut */
 }

 /* Gösterilen sonuç metni için stil (opsiyonel) */
 #pagination-links .pagination-info {
     font-size: 0.9em;
     color: #6c757d;
     text-align: center;
     /* Ortalamak isteyebilirsiniz */
     margin-top: 10px;
 }

 /* --- YENİ PORTFOLYO KARTI STİLLERİ --- */

 /* Kartın ana sarmalayıcısı */
 .portfolio-card {
     position: relative;
     /* İçindeki overlay'i konumlandırmak için gerekli */
     overflow: hidden;
     /* Dışarı taşan her şeyi (zoom efekti gibi) gizle */
     cursor: pointer;
     /* Üzerine gelince tıklanabilir olduğunu belirt */

     /* İsteğiniz üzerine yuvarlak köşeleri (radius) kaldırıyoruz */
     border-radius: 0;

     /* Bootstrap'in varsayılan card border'ını kaldırabiliriz */
     border: none;

     /* Kartlara gölge ekleyerek derinlik hissi verelim */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.3s ease-in-out;
 }

 .portfolio-card:hover {
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 /* Kartın içindeki görsel */
 .portfolio-card-img {
     display: block;
     /* Alt boşluğu kaldırmak için */
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Masonry ile uyumlu, farklı boyutları kırparak sığdırır */
     transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     /* Yumuşak bir zoom efekti için */
 }

 /* Fare üzerine geldiğinde görsele hafif zoom yap */
 .portfolio-card:hover .portfolio-card-img {
     transform: scale(1.08);
 }

 /* Görselin üzerine gelen yarı saydam katman */
 .portfolio-card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     /* Siyah ve yarı saydam bir arka plan */
     background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);

     color: #fff;
     /* Metin rengi beyaz */

     /* Metinleri dikeyde sona (alta) yaslamak için flexbox kullanalım */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     /* İçeriği en alta gönderir */
     align-items: flex-start;
     /* İçeriği sola yaslar */

     padding: 1.5rem;
     /* İç boşluklar */

     /* Başlangıçta bu katmanı gizleyelim */
     opacity: 0;

     /* Yumuşak bir geçiş efekti */
     transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* Fare üzerine geldiğinde overlay'i görünür yap */
 .portfolio-card:hover .portfolio-card-overlay {
     opacity: 1;
 }

 /* Overlay içindeki başlık ve metin stilleri */
 .portfolio-card-overlay .card-title {
     font-weight: bold;
     margin-bottom: 0.25rem;
 }

 .portfolio-card-overlay .card-text {
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.8) !important;
     /* text-muted'ı ezmek için */
 }

 /* === Eylem Butonları (WhatsApp, Yukarı Çık) === */

.action-btn {
    position: fixed;
    z-index: 1030; /* Navbar gibi diğer elemanların üzerinde kalması için */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    opacity: 0; /* Başlangıçta görünmez olsun */
    visibility: hidden; /* Başlangıçta gizli olsun */
    transform: scale(0.8);
}

/* Butonların görünür hali */
.action-btn.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.action-btn:hover {
    transform: scale(1.1);
    color: white;
}

/* WhatsApp Butonu (sol alt) */
#whatsappBtn {
    right: 20px; /* YENİ: 'left' yerine 'right' kullandık */
    bottom: 80px; /* YENİ: 'Yukarı Çık' butonunun üstünde durması için boşluk verdik */
    background-color: #25D366; /* WhatsApp yeşili */
    /* WhatsApp butonu her zaman görünsün */
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

#whatsappBtn:hover {
    background-color: #1DAA50;
}

/* Yukarı Çık Butonu (sağ alt) */
#scrollToTopBtn {
    right: 20px;
    bottom: 20px;
    background-color: #2C3E50; /* Ana tema rengimiz */
}

#scrollToTopBtn:hover {
    background-color: #21313f;
}