/* Genel Sayfa Yapısı */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Çok açık gri arka plan */
    color: #2c3e50;
    overflow-x: hidden;
}

/* Sağ Üstteki Admin Butonu */
.admin-btn {
    position: fixed; /* Sayfa kaydırılsa bile orada sabit kalır */
    top: 25px;
    right: 30px;
    z-index: 1000; /* Her şeyin üstünde durmasını sağlar */
    font-size: 1.5rem; /* İkon boyutu */
    color: #95a5a6; /* Gri tonu (göze batmasın diye) */
    transition: all 0.3s ease;
}

    .admin-btn:hover {
        color: #2c3e50; /* Üzerine gelince koyulaşsın */
        transform: scale(1.1); /* Hafif büyüsün */
    }

/* Profil Resmi (Index sayfasında kullanacağız) */
.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Yetenek Barları */
.progress {
    height: 25px;
    background-color: #e9ecef;
    border-radius: 15px; /* Daha yuvarlak hatlar */
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

.progress-bar {
    line-height: 25px;
    font-weight: 600;
    border-radius: 15px;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-card:hover {
        transform: translateY(-10px); /* Kartı yukarı kaldırır */
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; /* Gölgeyi büyütür */
    }

/* Dark Mode Özelleştirmeleri */
[data-bs-theme="dark"] body {
    background-color: #212529 !important; /* Koyu arka plan */
    color: #ecf0f1;
}

[data-bs-theme="dark"] .card {
    background-color: #2c3e50; /* Kartlar biraz daha açık gri olsun */
    color: white;
}

[data-bs-theme="dark"] .text-dark {
    color: #ecf0f1 !important; /* Siyah yazıları beyaza çevir */
}

[data-bs-theme="dark"] .text-muted {
    color: #bdc3c7 !important; /* Soluk yazıları açık gri yap */
}

[data-bs-theme="dark"] .bg-light {
    background-color: #34495e !important; /* Rozetlerin arka planını koyulaştır */
    color: white !important;
    border-color: #4a6278 !important;
}

/* Admin butonu dark modda görünsün diye rengini açıyoruz */
[data-bs-theme="dark"] .admin-btn {
    color: #ecf0f1;
}
/* Dark Mode'da GitHub Butonu Düzeltmesi */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #fff !important; /* Yazı ve İkon Rengi: Beyaz */
    border-color: #fff !important; /* Çerçeve Rengi: Beyaz */
}

    [data-bs-theme="dark"] .btn-outline-dark:hover {
        background-color: #fff !important; /* Üzerine gelince arka plan: Beyaz */
        color: #000 !important; /* Üzerine gelince yazı: Siyah */
    }


/* Swiper Düzenlemeleri */
/* Tüm slaytların boyunu eşitle */
.swiper-slide {
    height: auto;
    display: flex;
    align-self: stretch;
}
    /* Kartın slaytın tamamını kaplamasını sağla */
    .swiper-slide .card {
        width: 100%;
    }
/* Okların konumunu ayarla */
.swiper-button-next, .swiper-button-prev {
    font-weight: 900;
    background-color: rgba(255,255,255,0.8); /* Okların arkasına hafif beyazlık */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Mobilde okları gizlemiştik, sadece masaüstünde dışarı taşıralım */
@media (min-width: 768px) {
    .swiper-button-prev {
        left: -10px;
    }

    .swiper-button-next {
        right: -10px;
    }
}

/* Dark Modda okların arka planını düzelt */
[data-bs-theme="dark"] .swiper-button-next,
[data-bs-theme="dark"] .swiper-button-prev {
    background-color: rgba(44, 62, 80, 0.8);
    color: #fff !important;
}
/* Dark modda pagination noktaları */
[data-bs-theme="dark"] .swiper-pagination-bullet {
    background: #fff;
}

/* --- RESİM BÜYÜTME (LIGHTBOX) EFEKTİ --- */

/* Profil resminin üzerine gelince tıklanabilir olduğunu göster */
.profile-img {
    cursor: zoom-in; /* Büyüteç ikonu çıkar */
    transition: 0.3s;
}

    .profile-img:hover {
        opacity: 0.8; /* Hafif saydamlaşır */
    }

/* Modal (Arka plandaki siyah perde) */
.modal-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed; /* Sayfadan bağımsız sabit durur */
    z-index: 9999; /* En üstte durması için */
    padding-top: 100px; /* Üstten biraz boşluk */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Resim çok büyükse kaydırma çubuğu çıksın */
    background-color: rgba(0,0,0,0.9); /* %90 Siyah Arka Plan */
}

/* Büyüyen Resim */
.modal-content-img {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px; /* En fazla bu kadar büyüsün */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    animation-name: zoom; /* Açılış animasyonu */
    animation-duration: 0.6s;
}

/* Çarpı (Kapatma) Butonu */
.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

    .close-modal:hover,
    .close-modal:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/* Açılış Animasyonu (Zoom efekti) */
@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* Mobilde resim %100 genişlikte olsun */
@media only screen and (max-width: 700px) {
    .modal-content-img {
        width: 100%;
    }
}