html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

body {
    /* Arka plan görseli */
    background-image: url('/images/background-1.png'); /* Görselinizin yolu */
    /* Görselin tüm alanı kaplamasını sağlar ve oranını korur */
    background-size: cover;
    /* Görselin tekrar etmesini engeller */
    background-repeat: no-repeat;
    /* Görselin ekranla birlikte kaymamasını sağlar (sabit kalır) */
    background-attachment: fixed;
    /* Görseli sayfanın ortasına hizalar */
    background-position: center center;
    /* Görselin üzerine renkli bir katman (overlay) ekler.
       Bu, yazıların okunabilirliğini artırır ve görselin tonunu belirler.
       Renkler ve opaklık değerleri görselinize ve istediğiniz atmosfere göre ayarlanabilir.
       Örnek: rgba(lacivert tonu), rgba(mor tonu) */
    background-color: #1a0033; /* Görsel yüklenene kadar veya yedek olarak koyu bir renk */
    /* Linear gradient ile görselin üzerine koyu bir mor-lacivert geçiş ekler.
       İlk renk (rgba(100, 0, 100, 0.7)) morumsu, ikinci renk (rgba(0, 0, 80, 0.9)) lacivertimsi.
       Opaklık değerlerini (0.7 ve 0.9) istediğiniz koyuluk seviyesine göre ayarlayabilirsiniz.
       Bu gradient, görselin üzerine bir katman olarak gelir ve renk tonunu belirler. */
    background: linear-gradient(to bottom, rgba(90, 100, 20, 0.3), rgba(0, 0, 80, 0.2)), url('/images/background.png') no-repeat center center fixed;
    /* background-size'ı en sona yazmak önemlidir çünkü shorthand 'background' özelliği diğerlerini ezebilir. */
    background-size: cover;
    /* Yazı rengi */
    color: white;
    /* Sayfanın minimum yüksekliği, görselin tamamının görünmesini sağlar */
    min-height: 100vh;
    /* Opsiyonel: Yazı tipi ve temel margin/padding ayarları */
    font-family: 'Montserrat', sans-serif; /* veya tercih ettiğiniz başka bir font */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Yatay kaydırmayı engeller */
}

.navbar {
    /* Arka plan görselinizle uyumlu, yarı şeffaf koyu bir ton */
    background-color: rgba(0, 0, 30, 0.2) !important;
     /* RGB: 0,0,30 (çok koyu lacivert), Opaklık: 0.5 (yarı şeffaf) */

    box-shadow: none; /* Mevcut gölge ayarını koruyun */
    /* Eğer dışarıdan gelen bir stil kuralını geçersiz kılmak için hala !important'a ihtiyacınız varsa: */
    /* background-color: rgba(0, 0, 30, 0.5) !important; */
}
    /* Navbar linkleri beyaz olsun */
    .navbar .nav-link,
    .navbar .navbar-brand {
        color: white !important;
    }
        .navbar .nav-link:hover {
            color: #ccc !important;
        }

/* Custom styles for the navbar toggler icon */
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Makes the hamburger lines white (rgba(255, 255, 255, 1)) */
}

.custom-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* Adds a light border to the button */
    background-color: rgba(0, 0, 0, 0.2); /* Slightly dark background for contrast */
}

    .custom-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Optional: Adjust focus ring color */
    }

/* If you want to change the text color for the nav links to dark if the background is transparent */
.navbar-nav .nav-link {
    color: #343a40; /* Dark text for links on a light/transparent background */
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: #007bff; /* Primary blue on hover/focus */
    }

/* Ensure the brand logo text (if any) is visible */
.navbar-brand {
    color: #343a40; /* Dark color for brand text if it's not just an image */
}

/* Styling for the new Project Overview Card */
.project-overview-card {
    border: none;
    overflow: hidden;
}

    .project-overview-card .project-overview-img {
        height: 400px; /* Adjust height as needed */
        object-fit: cover;
        width: 100%;
    }

    .project-overview-card .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Vertically centers content if there's extra space */
        padding: 1.5rem; /* Add some padding */
    }

    .project-overview-card .list-group-item {
        border: none; /* Remove borders for a cleaner look */
        padding-left: 0; /* Remove default padding */
    }


/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .project-overview-card .project-overview-img {
        height: 200px; /* Shorter image on mobile */
        border-radius: 0.375rem 0.375rem 0 0 !important; /* Top corners rounded on mobile */
    }

    .project-overview-card .row.g-0 {
        flex-direction: column; /* Stacks image and info vertically on mobile */
    }

    .project-overview-card .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}


/* Carousel Thumbnails Styling */
.carousel-indicators-thumbnails {
    list-style: none; /* Varsayılan liste stilini kaldır */
    margin: 0;
    padding: 0;
    display: flex; /* Yan yana dizilmelerini sağlar */
    flex-wrap: wrap; /* Çok fazla thumbnail varsa alt satıra geçmesini sağlar */
    gap: 10px; /* Thumbnail'ler arasında boşluk */
    justify-content: center; /* Ortaya hizala */
}

    .carousel-indicators-thumbnails .thumbnail-btn {
        flex: 0 0 auto; /* Esnekliği kapat, otomatik boyutlandır */
        width: 90px; /* Thumbnail genişliği */
        height: 60px; /* Thumbnail yüksekliği */
        border: 2px solid transparent; /* Varsayılan border */
        border-radius: 5px; /* Hafif yuvarlak köşeler */
        overflow: hidden; /* Taşmayı engelle */
        cursor: pointer;
        padding: 0; /* Bootstrap'in varsayılan button padding'ini kaldır */
        background-color: transparent; /* Arka planı şeffaf yap */
        transition: all 0.3s ease; /* Geçiş efekti */
    }

        .carousel-indicators-thumbnails .thumbnail-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Görselin alanı doldurmasını ve oranını korumasını sağlar */
            opacity: 0.7; /* Pasif thumbnail'lerin biraz daha soluk görünmesi */
            transition: opacity 0.3s ease;
        }

        .carousel-indicators-thumbnails .thumbnail-btn.active {
            border-color: #007bff; /* Aktif thumbnail'in border rengi (Bootstrap primary rengi) */
            transform: scale(1.05); /* Aktif olanı biraz büyüt */
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Hafif gölge */
        }

            .carousel-indicators-thumbnails .thumbnail-btn.active img {
                opacity: 1; /* Aktif thumbnail'in tam opaklıkta olması */
            }

        .carousel-indicators-thumbnails .thumbnail-btn:hover {
            border-color: #0056b3; /* Hover border rengi */
            transform: scale(1.02); /* Hover'da hafif büyüt */
        }


/* Gallery Grid Thumbnails */
.gallery-grid .gallery-thumbnail {
    height: 180px; /* Fixed height for grid thumbnails */
    object-fit: cover; /* Maintain aspect ratio and cover area */
    width: 100%; /* Ensure they fill their column */
    cursor: pointer;
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

    .gallery-grid .gallery-thumbnail:hover {
        transform: scale(1.03); /* Slightly enlarge on hover */
    }

/* Modal styling for background and close button */
#imageModal .modal-content {
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background for modal */
}

#imageModal .modal-header .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%); /* Make close button white */
}

#modalImage {
    max-height: 85vh; /* Max height for modal image to fit screen */
    width: auto; /* Allow width to adjust based on height */
    margin: auto; /* Center the image */
}