/* Custom CSS for Mehmet Kutbay's Portfolio */

/* Renk Paleti Tanımları */
:root {
    --primary-blue: #0056b3; /* Üniversite mavisini temsil eden ana renk */
    --secondary-blue: #004085; /* Daha koyu mavi, vurgu için */
    --light-gray: #f8f9fa; /* Açık gri arkaplan */
    --dark-text: #333; /* Genel metin rengi */
    --light-text: #6c757d; /* Açık metin rengi */
    --navbar-height: 70px; /* Navigasyon çubuğu yüksekliği - SADECE JAVASCRIPT REFERANSI İÇİN KALIYOR */
}

/* Genel Ayarlar */
html {
    scroll-padding-top: var(--navbar-height); /* Navigasyon barı kadar boşluk bırak */
}

body {
    font-family: 'Open Sans', sans-serif; /* Paragraflar için daha okunaklı font */
    line-height: 1.7;
    color: var(--dark-text);
    background-color: #fff;
    scroll-behavior: smooth; /* Sayfa içi geçişlerde yumuşak kaydırma */
    padding-top: var(--navbar-height); /* Navigasyon çubuğu sabit olduğu için içerik onun altından başlasın */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Başlıklar için daha dikkat çekici font */
    color: var(--secondary-blue);
    font-weight: 700;
}

/* Navigasyon Çubuğu Özelleştirmeleri */
.navbar {
    background-color: var(--primary-blue) !important; /* Ana mavi rengi */
    font-weight: 600;
    min-height: var(--navbar-height); /* Navigasyon çubuğu minimum yüksekliği */
}
.navbar-brand {
    font-size: 1.5rem;
}
.nav-link {
    color: rgba(255, 255, 255, 0.95) !important; /* Daha belirgin beyaz */
    transition: color 0.3s ease, background-color 0.3s ease; /* Hover efekti için */
    padding: 0.5rem 1rem !important; /* Tıklama alanı için padding */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
}
.nav-link:hover {
    color: white !important;
    background-color: var(--secondary-blue); /* Hover'da hafif koyu arka plan */
}
.navbar-nav .nav-item {
    margin-left: 10px; /* Menü öğeleri arası boşluk */
}


/* Hero Section (Giriş Bölümü) Özelleştirmeleri */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('university-bg.jpg') no-repeat center center/cover;
    min-height: 60vh; /* Daha önceki isteğe göre küçültülmüş yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    padding-top: var(--navbar-height); /* Navigasyon çubuğu yüksekliği kadar boşluk */
    padding-bottom: 4rem; /* Alt boşluğu da ayarlayabilirsiniz */
    background-size: cover;
    background-position: center;
}

#hero h1 {
    color: white; /* Başlık rengi */
    font-size: 3.5rem;
}

#hero .lead, #hero .fs-4 {
    color: rgba(255, 255, 255, 0.9);
}

/* Bölüm Başlıkları ve Arkaplanlar */
.section-title {
    color: var(--secondary-blue);
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block; /* Çizgi için */
    text-align: center; /* Başlığı ortala */
    width: 100%; /* İçindeki metnin ortalanması için genişlik */
}

.section-title::after {
    content: '';
    display: block;
    width: 60px; /* Alt çizgi */
    height: 4px;
    background-color: var(--primary-blue);
    margin: 10px auto 0; /* Çizgiyi ortala */
    border-radius: 2px;
}

.bg-light-gray {
    background-color: var(--light-gray);
    padding-top: 3rem !important; /* py-3 karşılığı */
    padding-bottom: 3rem !important; /* py-3 karşılığı */
}

/* Ders Kartları */
#dersler .card {
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Çok hafif bir kenarlık */
    overflow: hidden; /* Kart içine taşan görseli kes */
}

/* Ders kartlarına fare geldiğinde el imleci göster ve alt çizgiyi kaldır */
.ders-card {
    cursor: pointer;
    text-decoration: none !important; /* Alt çizgiyi kaldır */
    color: inherit; /* Metin rengini üst elementten miras al (link rengi olmasın) */
}

.ders-card:hover { /* Hover efekti card üzerinde kalacak */
    transform: translateY(-8px); /* Hafif yukarı kalkma efekti */
    box-shadow: 0 10px 25px rgba(0,0,0,.15); /* Daha belirgin gölge */
}

/* Yeni eklendi: Ders görselleri için stil */
.ders-gorsel {
    width: 100%; /* Kart genişliğinin tamamını kapla */
    height: 180px; /* Sabit yükseklik veriyoruz */
    object-fit: cover; /* Resmi orantılı bir şekilde kırparak (boyutuna sığdırarak) doldur */
    border-top-left-radius: 10px; /* Kartın yuvarlak köşelerine uyum sağla */
    border-top-right-radius: 10px;
}

#dersler .card-title {
    color: var(--primary-blue) !important;
    font-weight: 600;
}

#dersler .card-text {
    color: var(--light-text) !important;
    font-size: 0.95rem;
}

/* İletişim Bölümü */
#iletisim a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

#iletisim a:hover {
    color: var(--secondary-blue);
    text-decoration: underline;
}

.btn-outline-primary {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn-outline-primary:hover {
    background-color: var(--primary-blue);
    color: white;
}

.btn-outline-secondary {
    color: var(--light-text);
    border-color: var(--light-text);
}
.btn-outline-secondary:hover {
    background-color: var(--light-text);
    color: white;
}

/* Footer */
footer {
    background-color: var(--secondary-blue); /* Koyu mavi footer */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

/* Responsive Düzenlemeler */
@media (max-width: 991.98px) { /* Tablet ve altı */
    .navbar-collapse {
        background-color: var(--primary-blue); /* Mobil menü açıldığında arka plan rengi */
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-nav .nav-item {
        margin-left: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08); /* Menü öğeleri arasına çizgi */
    }
    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    .nav-link {
        padding-left: 1.5rem !important;
    }

    /* Mobil için gri arka planlı bölümlerin yüksekliğini daha da azaltabiliriz */
    .bg-light-gray {
        padding-top: 2rem !important; /* Telefonlarda biraz daha az boşluk */
        padding-bottom: 2rem !important;
    }
}

@media (max-width: 767.98px) { /* Telefon ve altı */
    #hero h1 {
        font-size: 2.8rem;
    }
    .section-title {
        font-size: 2rem;
    }
    /* Ders görselleri mobil için farklı boyut */
    .ders-gorsel {
        height: 150px; /* Daha küçük ekranlarda daha az yer kaplasın */
    }
}

@media (max-width: 575.98px) { /* Küçük telefonlar */
    #hero h1 {
        font-size: 2.2rem;
    }
    #hero .lead {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .btn-lg {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}