/* === Genel ve Değişken Tanımlamaları === */
:root {
    --primary-color: #2c3e50; /* Koyu Mavi/Antrasit */
    --secondary-color: #3498db; /* Açık Mavi */
    --accent-color: #1abc9c; /* Turkuaz Yeşili */
    --text-color: #34495e;
    --light-gray: #f4f6f9;
    --white-color: #ffffff;
    --container-width: 1140px;
    --border-radius: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-color);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* === Navigasyon Menüsü === */
.navbar {
    background: var(--white-color);
    padding: 1.2rem 0;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links a {
    color: var(--primary-color);
    text-decoration: none;
    margin-left: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent-color);
}

.nav-button {
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: #16a085;
}

/* === Ana Karşılama (Hero) Alanı === */
.hero {
    background-color: var(--light-gray);
    padding: 6rem 0;
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.hero .btn {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.btn-primary:hover {
    background-color: #16a085;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    margin-left: 1rem;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* === Öne Çıkan Projeler Galerisi (YENİ BÖLÜM) === */
.project-gallery {
    padding: 4rem 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card-content {
    padding: 1.5rem;
}

.project-card-content h3 {
    margin-bottom: 0.5rem;
}

.project-card-content p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.project-card-content a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}

/* === Nasıl Çalışır Bölümü === */
.how-it-works {
    background-color: var(--light-gray);
    padding: 4rem 0;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.step .icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.step h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* === Footer === */
.footer {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 2rem 0;
    text-align: center;
}
/* === Form Sayfası Stilleri === */
.form-wrapper {
    background-color: var(--light-gray);
    padding: 4rem 0;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white-color);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: #777;
}

.form-message {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    text-align: center;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
/* === ESTETİK MODAL PENCERE STİLLERİ (GÜNCELLENDİ) === */
/* --- Modal Genel Stilleri --- */
.modal-overlay {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Arka planı karart */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 90%;
    max-width: 600px; /* Modal genişliği */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    border: none;
    background: none;
    cursor: pointer;
}

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

.modal-content .section-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
}

/* --- Form Mesaj Stilleri --- */
.form-message {
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    text-align: center;
    display: none; /* Başlangıçta gizli */
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* İki Sütunlu Yapı */
.modal-split {
    display: flex;
    max-width: 800px;
}

.modal-left {
    width: 40%;
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.modal-left h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.modal-right {
    width: 60%;
    padding: 3rem;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s ease;
}
.modal-close:hover {
    color: var(--primary-color);
}

/* İkonlu Form Alanları */
.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: color 0.3s ease;
}

.input-group input {
    padding-left: 45px !important; /* İkon için yer aç */
}

.input-group input:focus + i {
    color: var(--accent-color);
}

.modal-content a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

/* Mobil Cihazlar için Ayar */
@media (max-width: 768px) {
    .modal-left {
        display: none; /* Mobilde görseli gizle */
    }
    .modal-right {
        width: 100%;
    }
}
/* === MODAL FORM ELEMANLARINI İYİLEŞTİRME === */

/* Form Alanlarını (Input) Büyütelim */
.modal-content .input-group input {
    /* Dikey dolguyu artırarak yüksekliği artırıyoruz */
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Font boyutunu bir tık büyütüyoruz */
    font-size: 1.1rem;
}

/* Butonları Büyütelim ve Geliştirelim */
.modal-content .btn-primary {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600; /* Yazıyı daha belirgin yapalım */
    letter-spacing: 0.5px; /* Harfler arasına çok hafif boşluk */
    text-transform: uppercase; /* Buton metnini büyük harf yapalım */
    transition: all 0.3s ease; /* Hover efekti için geçiş ekleyelim */
}

/* Butonun üzerine gelince hafif bir büyüme efekti */
.modal-content .btn-primary:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.4);
}

/* Başlık ve Gruplar Arası Boşluk Ayarı (Opsiyonel ama önerilir) */
.modal-right .section-title {
    font-size: 2.2rem; /* Başlığı biraz daha vurgulayalım */
}
.modal-right .form-group {
    margin-bottom: 1.7rem; /* Form grupları arasını biraz daha açalım */
}
/* === PROJELERİ İNCELE SAYFASI STİLLERİ === */

/* Sayfa Başlığı Alanı */
.page-header {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 3rem 0;
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Proje Kartı İçin Ek Stiller */
.project-card-image {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.7);
}

.project-category {
    display: inline-block;
    background-color: var(--light-gray);
    color: var(--text-color);
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* Aktif Proje Bulunamadığında Gösterilecek Alan */
.no-projects-found {
    text-align: center;
    padding: 5rem 0;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
}

.no-projects-found h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.submission-grid.compact-grid {
    /* Minimum genişliği 280px'e çıkararak kartları büyütüyoruz */
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); 

    /* Kartlar büyüdüğü için aralarındaki boşluğu da biraz artıralım */
    gap: 1.5rem; 
}

/* Mobil Cihazlar için Ayar */
@media (max-width: 992px) {
    .project-detail-grid {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }
    .details-card {
        margin-top: 3rem;
        position: static; /* Sabit kalmayı iptal et */
    }
}
/* === SUNUM GALERİSİ STİLLERİ === */

.submission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.submission-card {
    background: var(--white-color);
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

.submission-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.submission-image-link {
    display: block;
    border-bottom: 1px solid #e0e0e0;
}

.submission-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    display: block;
}

.submission-info {
    padding: 1rem;
}

.submission-info p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.btn-winner {
    width: 100%;
    background-color: #f1c40f; /* Altın Sarısı */
    color: var(--primary-color);
    border: none;
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-winner:hover {
    background-color: #f39c12;
}

.btn-winner i {
    margin-right: 0.5rem;
}
/* === Çıkış Yap Butonu Stili === */
.nav-button-logout {
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    margin-left: 1rem;
    transition: all 0.3s ease;
}

.nav-button-logout:hover {
    background-color: var(--light-gray);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.nav-button-logout i {
    margin-left: 0.4rem;
}
/* === PROJE DETAY SAYFASI GELİŞTİRMELERİ === */

/* İstatistik Paneli */
.project-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item i {
    font-size: 2rem;
    color: var(--accent-color);
    width: 50px;
    text-align: center;
}

.stat-item div {
    display: flex;
    flex-direction: column;
}

.stat-item span {
    font-size: 0.9rem;
    color: #777;
}

.stat-item strong {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Müşteri Bilgi Kartı (Yan Panelde) */
.client-info-card {
    background-color: var(--white-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: 2rem;
}

.client-info-card h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #777;
    margin-bottom: 1rem;
}

.client-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.client-details i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.client-details span {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Mobil Cihazlar için İstatistik Paneli Ayarı */
@media (max-width: 768px) {
    .project-stats-bar {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
        gap: 2rem;
    }
}
/* === PROJE GİZLİLİK VE SAYFALAMA STİLLERİ === */

/* Proje Oluşturma Sayfası - Radyo Butonları */
.radio-group label {
    display: block;
    background-color: var(--light-gray);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.radio-group label:hover {
    border-color: #ccc;
}
.radio-group input[type="radio"]:checked + small {
    display: block; /* Sadece seçili olanın açıklamasını göster */
}
.radio-group label small {
    display: none; /* Varsayılan olarak açıklamaları gizle */
    margin-top: 0.5rem;
    color: #555;
    font-weight: normal;
}

/* Kilitli Proje Mesajı */
.submission-placeholder.locked {
    background-color: #f8f9fa;
    color: #777;
}
.submission-placeholder.locked i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Sayfalama (Pagination) Linkleri */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.pagination a {
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
    border-radius: var(--border-radius);
}
.pagination a.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
}
/* === KULLANICI PANELİ (DASHBOARD) STİLLERİ === */
.dashboard-container {
    background-color: var(--light-gray);
    min-height: calc(100vh - 80px); /* Footer'ı aşağıda tutmak için */
    padding: 3rem 0;
}

.dashboard-welcome {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

/* İstatistik Kartları */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--white-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 5px solid var(--accent-color);
}

.stat-card h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #777;
}

.stat-card .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin: 0.5rem 0;
}

.stat-card .stat-link {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 600;
}

/* Proje Listesi Bölümleri */
.dashboard-section {
    background: var(--white-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dashboard-section h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.table-responsive {
    overflow-x: auto;
}

.project-table {
    width: 100%;
    border-collapse: collapse;
}

.project-table th, .project-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--light-gray);
}

.project-table th {
    font-weight: 600;
}

.project-table td .btn-view {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Durum Etiketleri için Ek Stiller */
.status-badge.status-kazanan-secildi {
    background-color: #f1c40f;
    color: var(--primary-color);
}
.status-badge.status-tamamlandi {
    background-color: #95a5a6;
}
/* === DASHBOARD YENİ PROJE KARTLARI STİLLERİ === */
.dashboard-project-list .d-project-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}
.dashboard-project-list .d-project-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.d-project-card.completed {
    opacity: 0.8;
}

.d-card-main {
    flex-grow: 1;
}

.d-card-title {
    margin: 0 0 0.5rem 0;
}
.d-card-title a {
    font-size: 1.4rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.d-card-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.d-card-stats, .d-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: #333;
}
.d-card-stats {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.d-card-stats i, .d-card-meta i {
    margin-right: 0.5rem;
    color: #888;
}

.d-card-stats strong {
    font-weight: 600;
}

.d-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}
.d-card-actions .btn-view {
    white-space: nowrap; /* Buton metninin kırılmasını engelle */
}

/* Mobil için kart yapısını düzenle */
@media (max-width: 768px) {
    .dashboard-project-list .d-project-card {
        flex-direction: column;
    }
    .d-card-stats, .d-card-meta {
        gap: 1rem;
    }
}
/* === YENİ NESİL PROJE LİSTELEME STİLLERİ === */

/* Filtreleme Barı */
.filter-bar {
    background-color: var(--white-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}
.filter-bar .form-group {
    margin-bottom: 0;
    flex-grow: 1;
}
.filter-bar .form-group label {
    font-size: 0.9rem;
}
.filter-bar .btn {
    padding: 0.8rem 1.5rem;
    align-self: flex-end;
}

/* Dinamik Etiketler */
.rpc-tags {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 0.5rem;
}
.tag {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    font-weight: 600;
    color: white;
}
.tag.urgent {
    background-color: #e74c3c; /* Kırmızı */
}
.tag.high-prize {
    background-color: #f1c40f; /* Sarı */
}
/* === EXTRA EXTREM ANA SAYFA STİLLERİ === */

/* Yeni Hero Alanı */
.hero-xtreme {
    padding: 6rem 0;
    background: linear-gradient(45deg, var(--primary-color), #34495e);
    color: white;
    text-align: center;
}
.hero-xtreme h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hero-xtreme p {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}
.hero-search-bar {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: var(--border-radius);
    padding: 0.5rem;
    display: flex;
}
.hero-search-bar input {
    border: none;
    outline: none;
    width: 100%;
    padding: 0 1rem;
    font-size: 1.1rem;
}
.hero-search-bar .btn {
    padding: 0.8rem 2rem;
}

/* Canlı İstatistikler */
.live-stats {
    background: var(--light-gray);
}
.live-stats .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: 2rem 0;
}
.live-stat-item i {
    font-size: 2rem;
    color: var(--accent-color);
}
.live-stat-item .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.live-stat-item .stat-label {
    color: #777;
}

/* Genel Bölüm Başlık Stili */
.section-heading {
    text-align: center;
    margin-bottom: 3rem;
}
.section-heading h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.section-heading p {
    font-size: 1.1rem;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
}

/* Kategori Tarayıcısı */
.category-browser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}
.category-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    text-align: center;
    padding: 2rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}
.category-card i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.category-card h4 {
    font-size: 1.1rem;
}

/* Vitrin: En İyi Tasarımcılar */
.designers-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.designer-card {
    text-align: center;
}
.designer-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}
.designer-card h4 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}
.designer-card span {
    color: #777;
}

/* Müşteri Yorumları */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    border-top: 4px solid var(--accent-color);
}
.testimonial-card blockquote {
    font-style: italic;
    margin-bottom: 1rem;
    border: none;
    padding: 0;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* Son Eylem Çağrısı (CTA) */
.final-cta {
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 4rem 1rem;
    border-radius: var(--border-radius);
}
.final-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.final-cta .btn-group {
    margin-top: 2rem;
}
.final-cta .btn {
    margin: 0 0.5rem;
}
/* === ANA SAYFA FİNAL CTA BUTON GÜNCELLEMESİ === */

/* 1. Butonların yerleşimini esnek hale getirelim */
.final-cta .btn-group {
    display: flex; /* Butonları esnek bir kutuya alıyoruz */
    justify-content: center; /* Yatayda ortalıyoruz */
    flex-wrap: wrap; /* Sığmadıklarında alt satıra geçmelerini sağlıyoruz */
    gap: 1rem; /* Aralarına boşluk ekliyoruz */
}

/* Eski margin'i sıfırlıyoruz, artık 'gap' kullanacağız */
.final-cta .btn {
    margin: 0;
}

/* 2. Butonları büyütmek için .btn-lg sınıfını tanımlayalım */
.btn-lg {
    padding: 1rem 3rem; /* Butonun iç boşluğunu artırarak büyütüyoruz */
    font-size: 1.2rem;  /* Yazı boyutunu büyütüyoruz */
    font-weight: 700;   /* Yazıyı kalınlaştırıyoruz */
    text-transform: uppercase; /* Metni büyük harfe çeviriyoruz */
    letter-spacing: 1px;     /* Harf aralarını hafifçe açıyoruz */
}
/* === İKİNCİL BUTON STİLİ (.btn-secondary) === */

.btn-secondary {
    background-color: transparent; /* Arka planı şeffaf yap */
    color: var(--white-color);    /* Yazı rengini beyaz yap (koyu arka planlar için) */
    border: 2px solid var(--white-color); /* Dışına beyaz bir çerçeve ekle */
    transition: all 0.3s ease;
}

/* Üzerine gelince (hover) efekti */
.btn-secondary:hover {
    background-color: var(--white-color); /* Arka planı beyaza çevir */
    color: var(--primary-color);    /* Yazı rengini ana renge çevir */
}
/* === PROJE DETAY - YARIŞMA ÖZETİ KARTI === */
.project-summary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 2rem;
}
.project-summary-card h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 0 0 1rem 0;
}
.project-summary-card .summary-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    background: var(--light-gray);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}
.project-summary-card .summary-content {
    font-size: 1.1rem;
    line-height: 1.8;
}
.project-summary-card .summary-attachment {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}
.summary-attachment .btn-secondary {
    color: var(--primary-color); /* Farklı arka planda daha iyi görünmesi için */
    border-color: #ccc;
}
.summary-attachment .btn-secondary:hover {
    border-color: var(--primary-color);
}
/* === PROJE DETAY V2 STİLLERİ === */
.submission-grid.compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
/* === PROJE DETAY v2.1 - YENİ SUNUM KARTI STİLLERİ === */

.submission-card-v2 {
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}
.submission-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Resmin çerçevesi (sadece resim burada) */
.submission-image-link {
    display: block;
    background-color: #f5f5f5;
    aspect-ratio: 1 / 1; /* Çerçeveyi kare yapar, 4/3 de kullanabilirsin */
}
.submission-card-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Resmin altındaki yeni bilgi çubuğu */
.submission-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-top: 1px solid #f0f0f0;
}

/* Bilgi çubuğunun içindeki numara etiketi */
.submission-entry-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Bilgi çubuğunun içindeki yıldızlar */
.rating-stars {
    display: flex;
}
.rating-stars i {
    font-size: 1.2rem;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.rating-stars i:hover {
    transform: scale(1.2);
}
.rating-stars i.fas {
    color: #f1c40f; /* Dolu yıldız rengi */
}

/* Kartın en altındaki footer bölümü */
.submission-card-footer {
    padding: 0.6rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    background-color: var(--light-gray);
    color: #555;
}
.card-actions .report-btn {
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
}
.card-actions .report-btn:hover {
    color: #e74c3c; /* Kırmızı */
}
/* === ANA SAYFA BUTON VE NAVBAR GÜNCELLEMESİ === */

/* Hero Alanı Buton Grubu */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Navbar'daki İkincil Buton (Giriş Yap) */
.nav-button-secondary {
    background: transparent;
    border: 1px solid #13074b;
    color: var(--primary-color);
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    margin-left: 1rem;
    transition: all 0.3s ease;
}
.nav-button-secondary:hover {
    background-color: var(--light-gray);
    border-color: var(--accent-color);
}
/* === PROJE DETAY v3 "EXTREM" STİLLERİ === */
.project-header-card{background:#fff;border:1px solid #e0e0e0;
    border-radius:var(--border-radius);margin-bottom:1.5rem}.header-main{padding:2rem}.header-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid #f0f0f0}.header-details>div{padding:1rem;text-align:center}.header-details>div span{font-size:.9rem;color:#777;display:block}.header-details>div strong{font-size:1.1rem}.project-status-panel{display:flex;justify-content:space-between;align-items:center;background:var(--light-gray);padding:1rem;border-radius:var(--border-radius);margin-bottom:2rem}#countdown-timer strong{font-size:1.5rem;color:var(--primary-color);margin:0 .2rem}.status-message{font-weight:600;font-size:1.1rem}.status-message.evaluation{color:#e67e22}.status-message.completed{color:#27ae60}.social-share span{margin-right:.5rem}.social-share a{color:#777;font-size:1.2rem;margin:0 .3rem}.tab-container{margin-top:2rem}.tab-buttons{border-bottom:2px solid #e0e0e0;margin-bottom:2rem}.tab-btn{background:0 0;border:none;padding:1rem 1.5rem;font-size:1.1rem;cursor:pointer;font-weight:600;color:#777;position:relative;bottom:-2px}.tab-btn.active{color:var(--accent-color);border-bottom:2px solid var(--accent-color)}.tab-content{display:none}.tab-content.active{display:block}.comment-form-container{margin-bottom:2rem}.comment-form-container textarea{width:100%;padding:1rem;border:1px solid #ccc;border-radius:var(--border-radius);min-height:80px;margin-bottom:1rem}.comment-form-container button{float:right}.comment-list{clear:both}.comment-item{border:1px solid #e0e0e0;background:#fff;padding:1.5rem;border-radius:var(--border-radius);margin-bottom:1rem}.comment-author{font-weight:700;margin-bottom:.5rem}.comment-date{font-size:.8rem;color:#999;margin-top:1rem;text-align:right}
/* === PROJE DETAY - YENİ SUNUM GÖNDER BUTONU === */

/* Status panelini ikiye ayırıyoruz */
.project-status-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-submit-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    padding: 1.2rem 2.5rem;       /* Daha büyük ve geniş */
    font-size: 1.1rem;
    font-weight: 800;             /* Daha kalın yazı */
    text-transform: uppercase;
    letter-spacing: 1.5px;        /* Harfler arası boşluk */
    
    color: #ffffff;
    background: var(--accent-color); 
    background-image: linear-gradient(135deg, var(--accent-color) 0%, #16a085 100%); /* Şık bir gradyan */
    
    border: none;
    border-radius: 50px;          /* Tam yuvarlak modern köşeler */
    
    /* Dikkat çekici, renkli ve yumuşak gölge */
    box-shadow: 0 10px 25px rgba(26, 188, 156, 0.4); 
    
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Üzerine Gelince (Hover) Efekti */
.btn-submit-now:hover {
    transform: translateY(-5px) scale(1.02); /* Yukarı kalkıp hafif büyüsün */
    box-shadow: 0 15px 35px rgba(26, 188, 156, 0.6); /* Gölgeyi güçlendir */
}

/* Tıklama (Active) Efekti */
.btn-submit-now:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 5px 15px rgba(26, 188, 156, 0.4);
}

/* İsteğe Bağlı: Buton üzerinde hafif bir parlama animasyonu */
.btn-submit-now::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}
.btn-submit-now:hover::after {
    left: 100%; /* Mouse ile üzerine gelince ışık soldan sağa geçsin */

}

.btn-submit-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 188, 156, 0.4);
}
/* === DÜZENLİ SUNUM GALERİSİ (ÇERÇEVE) STİLİ === */

.submission-image-link {
    display: block;
    overflow: hidden; /* Resmin çerçeveden taşmasını engeller */
    background-color: #f0f0f0; /* Resim yüklenirken boş görünmemesi için bir arka plan */

    /* Bu, modern ve sihirli kuraldır: Çerçevenin en/boy oranını sabitler */
    aspect-ratio: 4 / 3;
}

.submission-card-v2 .submission-image-link {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
/* === YORUM İÇİ SUNUM ETİKETİ VE LIGHTBOX STİLLERİ === */

/* #1 gibi etiketlerin stili */
.submission-tag {
    background-color: var(--light-gray);
    color: var(--accent-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
.submission-tag:hover {
    background-color: #d4f2ec;
    border-bottom-color: var(--accent-color);
}

/* Resmin açılacağı tam ekran pencere (Lightbox) */
#submission-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    cursor: pointer;
    animation: fadeIn 0.3s ease;
}

#submission-lightbox .lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
}

#submission-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* === SUNUM NUMARASI ETİKETİ STİLİ === */

.submission-entry-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; /* Resmin ve diğer elementlerin üzerinde olmasını sağlar */

    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}
/* === BİLDİRİM VE GELİŞMİŞ ŞİKAYET FORMU STİLLERİ === */
.report-reasons label { margin-bottom: 0.5rem; }
.report-reasons small { font-weight: normal; color: #555; }

.notification-list{max-width:800px;margin:0 auto}.notification-item{display:flex;background:#fff;border:1px solid #e0e0e0;padding:1.5rem;border-radius:var(--border-radius);margin-bottom:1rem;text-decoration:none;color:inherit;transition:all .3s ease}.notification-item:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.08)}.notification-item.unread{border-left:4px solid var(--accent-color)}.notification-icon{font-size:1.5rem;color:var(--accent-color);margin-right:1.5rem;padding-top:.2rem}.notification-content p{margin:0 0 .5rem 0;line-height:1.5}.notification-date{font-size:.8rem;color:#999}.no-notifications{text-align:center;padding:4rem;color:#999}.no-notifications i{font-size:4rem;margin-bottom:1.5rem}
/* === BİLDİRİM ZİLİ STİLLERİ === */

.notification-bell {
    position: relative;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-left: 1.5rem;
    display: inline-block;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #e74c3c; /* Kırmızı */
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
/* === ADMİN PANELİ LİNKİ STİLİ === */

.nav-button-admin {
    background-color: var(--danger-color); /* Admin rengi kırmızı olsun */
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    margin-left: 1rem;
    transition: all 0.3s ease;
}

.nav-button-admin:hover {
    background-color: #c0392b; /* Kırmızının koyu tonu */
    transform: scale(1.05);
}
.message-box{padding:2rem;border-radius:var(--border-radius);text-align:center;max-width:600px;margin:2rem auto}.message-box.success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.message-box.error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.message-box.info{background-color:#cce5ff;border:1px solid #b8daff;color:#004085}
/* === MODAL İÇERİK TAŞMASI DÜZELTMESİ === */

.modal-content {
    /* Maksimum yüksekliği, ekran yüksekliğinin %90'ı olarak ayarla */
    max-height: 90vh; 

    /* İçerik bu yüksekliği aşarsa, dikey bir kaydırma çubuğu göster */
    overflow-y: auto; 
}
.form-options { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; }
.form-options a { color: var(--text-color); text-decoration: none; }
.form-options a:hover { color: var(--accent-color); }

/* === NAVBAR VE PROFİL MENÜSÜ NİHAİ STİLLERİ === */

/* --- Navbar Yapı Düzeltmesi --- */
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-main-links {
    display: flex;
    gap: 1.5rem;
}

.nav-user-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* --- Yeni Profil Menüsü Stilleri --- */
.profile-dropdown {
    position: relative;
}

.profile-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
}

.profile-btn img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    object-fit: cover;
    transition: border-color 0.3s ease;
}

.profile-btn:hover img {
    border-color: var(--accent-color);
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    background-color: #fff;
    min-width: 260px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    z-index: 1001;
    border: 1px solid #eee;
    overflow: hidden;
    animation: dropdown-fade 0.2s ease;
}

.dropdown-content.show {
    display: block;
}

@keyframes dropdown-fade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.2;
}

.dropdown-header strong {
    font-size: 1.1rem;
}

.dropdown-header span {
    font-size: 0.9rem;
    color: #777;
    display: block;
}

.dropdown-header-small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 0.8rem 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
}

.dropdown-content a:hover {
    background-color: var(--light-gray);
}

.dropdown-content a i {
    width: 20px;
    text-align: center;
    color: #999;
}

.dropdown-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 0.5rem 0;
}

.notification-item-small.unread {
    font-weight: 700;
}

.view-all {
    font-size: 0.9rem !important;
    color: var(--accent-color) !important;
    font-weight: 700 !important;
    justify-content: center;
}

.admin-link,
.logout-link {
    border-top: 1px solid #f0f0f0;
}

.admin-link i {
    color: #3498db !important;
}

.logout-link i {
    color: #e74c3c !important;
}
/* === YENİ VE MODERN NAVİGASYON LİNK STİLLERİ === */

.nav-main-links a {
    position: relative; /* Animasyonlu çizgi için gerekli */
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* Linkin altındaki çizgiyi oluşturuyoruz (başlangıçta görünmez) */
.nav-main-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);

    /* Animasyon için başlangıç durumu (genişliği 0) */
    transform: scaleX(0);
    transform-origin: center; /* Ortadan dışa doğru büyümesini sağlar */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Fare üzerine geldiğinde çizgiyi görünür yap */
.nav-main-links a:hover::after {
    transform: scaleX(1);
}

/* Fare üzerine geldiğinde metin rengini değiştir */
.nav-main-links a:hover {
    color: var(--primary-color); /* Rengi sabit tutabilir veya değiştirebiliriz */
}

/* AKTİF SAYFA LİNKİ: Çizgiyi her zaman görünür yap */
.nav-main-links a.active::after {
    transform: scaleX(1);
}
/* AKTİF SAYFA LİNKİ: Metni daha belirgin yap */
.nav-main-links a.active {
    font-weight: 700;
    color: var(--primary-color);
}
/* === EXTREM PROFİL SAYFASI STİLLERİ === */
.profile-hero{position:relative;background-size:cover;background-position:center;padding:4rem 2rem;border-radius:var(--border-radius);margin-bottom:1.5rem;color:#fff}.profile-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);border-radius:var(--border-radius)}.profile-header-content{position:relative;z-index:2;display:flex;align-items:center;gap:2rem}.profile-avatar-large img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 5px 20px rgba(0,0,0,.3)}.profile-info-main h1{margin:0;font-size:3rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}.profile-title{font-size:1.2rem;opacity:.9;margin:.5rem 0}.profile-socials a{color:#fff;font-size:1.5rem;margin-right:1rem;opacity:.8;transition:all .3s ease}.profile-socials a:hover{opacity:1;transform:scale(1.1)}.profile-actions{margin-left:auto}.profile-secondary-bar{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;background:#fff;padding:1.5rem;border-radius:var(--border-radius)}.profile-skills h3{margin:0 0 1rem 0;font-size:1.2rem}.skills-list{display:flex;flex-wrap:wrap;gap:.5rem}.skill-tag{background:var(--light-gray);padding:.3rem .8rem;border-radius:15px;font-size:.9rem;font-weight:500}@media (max-width:992px){.profile-header-content{flex-direction:column;text-align:center}.profile-actions{margin-left:0;margin-top:1rem}.profile-secondary-bar{grid-template-columns:1fr}}
/* === PROFİL DÜZENLEME SAYFASI STİLLERİ === */
.edit-profile-grid{display:grid;grid-template-columns:200px 1fr;gap:2rem}.edit-profile-nav a{display:block;padding:1rem;background:#fff;border:1px solid #e0e0e0;text-decoration:none;color:var(--text-color);font-weight:600;margin-bottom:.5rem;border-radius:var(--border-radius)}.edit-profile-nav a.active,.edit-profile-nav a:hover{background-color:var(--light-gray);color:var(--primary-color);border-left:4px solid var(--accent-color)}.profile-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:1rem 0;border:2px solid #ddd}
.submission-card-v2.winner-highlight {
    border: 2px solid gold;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    position: relative;
    z-index: 2;
}

.winner-label {
    background-color: gold;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 0.95rem;
}
.submission-card-v2.is-winner {
    border: 2px solid #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
    position: relative;
}

.submission-card-v2.is-winner::after {
    content: '\f091'; /* Font Awesome Trophy Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: white;
    background-color: #ffc107;
    padding: 8px;
    border-radius: 50%;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* =================================== */
/* === MODAL VE FORM STİLLERİ === */
/* =================================== */

/* --- Modal Genel --- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay.active { 
    display: flex; 
    opacity: 1;
}
.modal-content {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    position: relative;
    width: 90%;
    max-width: 500px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
    transform: scale(1);
}
.modal-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 28px;
    border: none; background: none; cursor: pointer;
    color: #888;
}
.modal-close:hover { color: #000; }

/* --- Dosya Yükleyici (Drop Zone) --- */
#drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}
#drop-zone.dragover {
    border-color: #007bff;
    background-color: #f0f8ff;
}
#drop-zone-text i { font-size: 40px; color: #888; margin-bottom: 10px; }
#file-preview img { 
    max-width: 100%; 
    max-height: 150px; 
    margin-top: 15px; 
    border-radius: 5px; 
    object-fit: contain;
}
#upload-progress-container { 
    width: 100%; 
    background-color: #e9ecef; 
    border-radius: 5px; 
    margin-top: 10px;
    overflow: hidden;
}
#upload-progress-bar { 
    width: 0%; 
    height: 10px; 
    background-color: #28a745; 
    border-radius: 5px; 
    transition: width 0.4s ease;
}
#submit-helper-text { 
    display: block; 
    text-align: center; 
    margin-top: 5px; 
    font-size: 0.9em; 
    color: #6c757d; 
}

/* Profil Menüsü için */
.profile-dropdown-content {
    display: none;
}
.profile-dropdown-content.show {
    display: block;
}
/* === KAZANAN SUNUM KARTI - MODERN VURGULAMA STİLİ === */
.submission-card-v2.is-winner {
    /* Kartı diğerlerinden ayırmak için hafifçe büyütelim ve öne çıkaralım */
    transform: scale(1.03);
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
    border: 2px solid #FFC107; /* Altın rengi çerçeve */
    position: relative;
    z-index: 10;
    overflow: hidden; /* Kurdelenin taşan kısımlarını gizlemek için */
}

/* "KAZANAN" Kurdelesi */
.submission-card-v2.is-winner::before {
    content: 'KAZANAN';
    position: absolute;
    top: 25px; /* Kurdelenin dikey konumu */
    right: -35px; /* Kurdelenin yatay konumu */
    transform: rotate(45deg); /* Kurdeleyi 45 derece döndür */
    background: linear-gradient(45deg, #FFC107, #FFD700);
    color: #4f2c0c; /* Koyu kahverengi tonu */
    padding: 8px 40px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 11;
    letter-spacing: 1px;
}

/* Hafif bir parlama ve dikkat çekme animasyonu */
@keyframes winner-glow {
    0% { box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3); }
    50% { box-shadow: 0 10px 45px rgba(255, 193, 7, 0.6); }
    100% { box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3); }
}

.submission-card-v2.is-winner {
    animation: winner-glow 3s infinite ease-in-out;
}
/* === MODERN YARIŞMA ÖZETİ STİLLERİ === */

#tab-summary {
    background-color: var(--light-gray);
    padding: 2rem;
    border-radius: var(--border-radius);
    margin: -2rem; /* Üstteki tab-content boşluğunu sıfırlar */
}

.summary-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Sol taraf daha geniş */
    gap: 2rem;
}

.summary-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    margin-bottom: 2rem;
}

.summary-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light-gray);
}

.summary-card h3 i {
    margin-right: 0.8rem;
    color: var(--accent-color);
}

.summary-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

.summary-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-meta-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-meta-list li:last-child {
    margin-bottom: 0;
}

.summary-meta-list i {
    font-size: 1.5rem;
    color: #999;
    width: 30px;
    text-align: center;
}

.summary-meta-list span {
    display: block;
    font-size: 0.9rem;
    color: #777;
}

.summary-meta-list strong {
    font-size: 1.1rem;
    font-weight: 600;
}

.attachment-card {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2); /* Hafif mavi-yeşil gradient */
    border-color: #4dd0e1;
    text-align: center;
}

.attachment-card p {
    margin-bottom: 1.5rem;
}

/* Mobil Cihazlar için Düzenleme */
@media (max-width: 992px) {
    .summary-grid {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }
    #tab-summary {
        padding: 1.5rem;
        margin: -1.5rem;
    }
}
/* === YENİ PROJE OLUŞTURMA FORMU STİLLERİ === */
.form-header {
    text-align: center;
    margin-bottom: 3rem;
}
.form-header p {
    font-size: 1.1rem;
    color: #555;
}

.form-step {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}

.form-step > .form-group > label,
.form-step > label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: block;
}

.brief-helper {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
}

.brief-helper .form-group {
    margin-bottom: 2rem;
}

.brief-helper .form-group:last-child {
    margin-bottom: 0;
}

.brief-helper .form-group label {
    font-weight: 500;
    color: #333;
    font-size: 1rem;
}

.category-description-box {
    background-color: #e7f3fe;
    border-left: 4px solid #3498db;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    color: #2c3e50;
}

.form-submit-group {
    text-align: center;
    margin-top: 2rem;
}
/* ====================================================== */
/* === ANA SAYFA ULTRA GÜNCELLEME STİLLERİ (v2.0) === */
/* ====================================================== */

/* 1. YENİ HERO ALANI STİLLERİ */
.hero-reloaded {
    position: relative;
    color: white;
    text-align: center;
    padding: 8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1522124448539-0b0c15984649?q=80&w=1934') no-repeat center center/cover;
    z-index: 1;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.8); /* --primary-color'un yarı saydam hali */
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-reloaded h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 0 3px 10px rgba(0,0,0,0.5);
    margin-bottom: 1rem;
}
.hero-reloaded p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    opacity: 0.9;
}
.hero-search-form {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    max-width: 600px;
    margin: 0 auto;
}
.hero-search-form form {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}
.hero-search-form i {
    color: #999;
    padding: 0 1rem;
    font-size: 1.1rem;
}
.hero-search-form input {
    border: none;
    outline: none;
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
}
.hero-search-form .btn {
    border-radius: 0 4px 4px 0;
    padding: 1rem 1.5rem;
}

/* 10. İSTATİSTİKSEL BAŞARI PANELİ */
.stats-counter-section {
    background-color: var(--light-gray);
    padding: 3rem 0;
    border-bottom: 1px solid #e0e0e0;
}
.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}
.stat-item i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.stat-item .stat-value, .stat-item .stat-value-prize {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}
.stat-item .stat-label {
    font-size: 1rem;
    color: #777;
}

/* 2. "NASIL ÇALIŞIR?" ZAMAN TÜNELİ */
.how-it-works-timeline {
    padding: 5rem 0;
    background: #fff;
}
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}
.timeline::after { /* Dikey çizgi */
    content: '';
    position: absolute;
    width: 4px;
    background-color: #e0e0e0;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}
.timeline-item {
    padding: 1rem 40px;
    position: relative;
    width: 50%;
}
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 80px;
    text-align: right;
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 80px;
    text-align: left;
}
.timeline-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border: 5px solid #fff;
    box-shadow: 0 0 0 4px var(--accent-color);
}
.timeline-item:nth-child(odd) .timeline-icon {
    right: 25px;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: 25px;
}
.timeline-content h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* 3. ÖNE ÇIKAN YARIŞMALAR */
.featured-projects-section {
    background: var(--light-gray);
    padding: 5rem 0;
}
.project-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 21%;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.project-carousel::-webkit-scrollbar { display: none; }
.project-card-mini {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.project-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.project-card-mini .card-image {
    height: 150px;
    background-size: cover;
    background-position: center;
}
.project-card-mini .card-content {
    padding: 1rem;
}
.project-card-mini .card-category {
    font-size: 0.8rem;
    font-weight: 600;
    color: #777;
    margin-bottom: 0.5rem;
    display: block;
}
.project-card-mini h4 {
    color: var(--primary-color);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}
.project-card-mini .card-prize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
    font-weight: 700;
}

/* 4. ŞAMPİYONLAR LİGİ */
.hall-of-fame-section {
    padding: 5rem 0;
    background: #fff;
}
.hall-of-fame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.winner-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: block;
    aspect-ratio: 4 / 3;
}
.winner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.winner-card:hover img {
    transform: scale(1.1);
}
.winner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    color: white;
}
.winner-overlay h4 {
    margin: 0 0 0.25rem 0;
}
.winner-overlay span {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 5. POPÜLER KATEGORİLER & 7. VİDEO */
.split-section {
    background: var(--light-gray);
    padding: 5rem 0;
}
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.split-left h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}
.popular-categories-list a {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    background: #fff;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}
.popular-categories-list a:hover {
    transform: translateX(10px);
    border-left-color: var(--accent-color);
}
.popular-categories-list .cat-name {
    font-weight: 600;
}
.popular-categories-list .cat-count {
    color: #777;
}
.video-promo-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    color: white;
    padding: 3rem;
    background: url('https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1770') no-repeat center center/cover;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.video-promo-card::before {
    content:'';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(44, 62, 80, 0.8), rgba(26, 188, 156, 0.7));
}
.video-promo-card .play-button, .video-promo-card h3, .video-promo-card p {
    position: relative;
    z-index: 2;
}
.video-promo-card .play-button {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}
.video-promo-card .play-button:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}
.video-promo-card h3 {
    margin-bottom: 1rem;
}

/* 6. TASARIMCI RADARI */
.designer-spotlight-section {
    padding: 5rem 0;
    background: #fff;
}
.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.designer-card {
    text-align: center;
    background: var(--light-gray);
    padding: 2rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}
.designer-card:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: translateY(-10px);
}
.designer-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.designer-card h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}
.designer-card span {
    color: #777;
    font-size: 0.9rem;
}
.designer-stats {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    color: var(--accent-color);
    font-weight: 600;
}

/* 8. NEDEN BİZ? & 9. CANLI AKIŞ */
.final-features-section {
    background: var(--light-gray);
    padding: 5rem 0;
}
.final-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}
.why-us-panel h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}
.feature-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.feature-item i {
    font-size: 2rem;
    color: var(--accent-color);
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-item h4 {
    margin-bottom: 0.25rem;
}
.live-feed-panel {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 2rem;
}
.live-feed-panel h3 {
    margin: 0 0 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
}
#live-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 250px;
    overflow-y: hidden;
    position: relative;
}
#live-feed-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
#live-feed-list li.visible {
    opacity: 1;
    transform: translateY(0);
}
#live-feed-list i {
    margin-right: 0.5rem;
    color: #999;
}
#live-feed-list strong {
    font-weight: 600;
}

/* RESPONSIVE DÜZENLEMELER */
@media (max-width: 992px) {
    .timeline::after { left: 30px; }
    .timeline-item { width: 100%; padding-left: 80px; padding-right: 25px; text-align: left !important; }
    .timeline-item:nth-child(odd) { left: 0; }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-icon { left: 0 !important; }

    .split-grid, .final-grid { grid-template-columns: 1fr; }
    .project-carousel { grid-auto-columns: 45%; }
}
@media (max-width: 768px) {
    .hero-reloaded h1 { font-size: 2.5rem; }
    .stats-counter-grid { grid-template-columns: 1fr; }
    .project-carousel { grid-auto-columns: 80%; }
}
/* ========================================================== */
/* === MODERN MESAJLAŞMA SİSTEMİ (WHATSAPP TARZI)         === */
/* ========================================================== */

/* Ana Kapsayıcı: Sayfaya taşmayacak şekilde sabitliyoruz */
.messaging-container {
    display: grid;
    grid-template-columns: 320px 1fr; /* Sol 320px, Sağ Kalan */
    height: 75vh; /* Ekran yüksekliğinin %75'i (Bunu isterseniz 85vh yapabilirsiniz) */
    min-height: 500px; /* Çok küçülmesin */
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    overflow: hidden; /* Taşan kısımları gizle */
    border: 1px solid #e0e0e0;
    margin-top: 2rem;
}

/* --- SOL PANEL: KONUŞMA LİSTESİ --- */
.conversation-list {
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 100%; /* Yüksekliği doldur */
    overflow: hidden;
}

.conversation-header {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    flex-shrink: 0; /* Daralmasın */
}

.conversation-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Konuşma Listesinin Kaydırılabilir Alanı */
.convo-scroll {
    flex: 1; /* Kalan alanı kapla */
    overflow-y: auto; /* Sadece burası kaydırılsın */
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    transition: background 0.2s;
}

.conversation-item:hover {
    background: var(--light-gray);
}

.conversation-item.active {
    background: #e7f3fe;
    border-right: 3px solid var(--accent-color);
}

.conversation-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.convo-info {
    flex-grow: 1;
    overflow: hidden;
}

.convo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.convo-header small {
    font-size: 0.8rem;
    color: #999;
}

.convo-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.convo-info p.fw-bold {
    font-weight: 700;
    color: var(--text-color);
}

.unread-badge {
    background-color: var(--accent-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- SAĞ PANEL: MESAJLAŞMA ALANI --- */
.message-view {
    display: flex;
    flex-direction: column; /* Elemanları alt alta diz */
    height: 100%; /* Ana kapsayıcının yüksekliğini al */
    background-color: #fff;
    overflow: hidden; /* Taşmayı engelle */
}

/* 1. Mesajlaşma Başlığı (Sabit) */
.message-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    flex-shrink: 0; /* Asla küçülmesin */
    z-index: 10;
}

.header-user {
    display: flex;
    align-items: center;
}
.message-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.view-profile-btn {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 600;
    border: 1px solid var(--accent-color);
    padding: 5px 10px;
    border-radius: 20px;
    transition: 0.3s;
}
.view-profile-btn:hover {
    background-color: var(--accent-color);
    color: #fff;
}

/* 2. Mesaj Listesi (Kaydırılabilir Orta Alan) */
.message-list {
    flex: 1; /* Mevcut boşluğun tamamını kapla */
    padding: 1.5rem;
    overflow-y: auto; /* İçerik taşarsa kaydır */
    background-color: #e5ddd5; /* WhatsApp tarzı hafif bej/gri arka plan */
    background-image: url('https://www.transparenttextures.com/patterns/subtle-white-feathers.png'); /* İsteğe bağlı desen */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Mesaj Balonları */
.message-bubble {
    margin-bottom: 0.5rem;
    max-width: 70%;
    position: relative;
    padding: 8px 12px;
    border-radius: 7.5px;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.message-bubble p {
    margin: 0;
    padding: 0;
}

.message-bubble .message-time {
    font-size: 0.7rem;
    color: rgba(0,0,0,0.45);
    float: right;
    margin-left: 10px;
    margin-top: 5px;
}

/* Gelen Mesaj (Sol) */
.message-bubble.received {
    align-self: flex-start;
    background: #fff;
    border-top-left-radius: 0;
}

/* Giden Mesaj (Sağ) */
.message-bubble.sent {
    align-self: flex-end;
    background: #dcf8c6; /* WhatsApp Yeşili */
    border-top-right-radius: 0;
    text-align: left; /* Metin yine soldan başlasın */
}

/* 3. Cevap Yazma Alanı (Sabit Alt Kısım) */
.message-reply-form {
    border-top: 1px solid #e0e0e0;
    padding: 1rem;
    background-color: #f0f0f0;
    flex-shrink: 0; /* Asla küçülmesin */
}

.message-reply-form form {
    display: flex;
    gap: 10px;
    align-items: flex-end; /* TextArea büyürse buton altta kalsın */
}

.message-reply-form textarea {
    flex-grow: 1;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 12px 15px;
    resize: none;
    height: 50px; /* Başlangıç yüksekliği */
    max-height: 100px;
    font-family: inherit;
    outline: none;
    background: #fff;
}

.message-reply-form textarea:focus {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-reply-form .btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.message-reply-form .btn:hover {
    transform: scale(1.05);
    background-color: var(--accent-hover);
}

/* Boş Durum Ekranı */
.no-conversation-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #aaa;
    background-color: #f8f9fa;
    border-left: 1px solid #e0e0e0;
}
.no-conversation-selected i {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    color: #ddd;
}
.no-conversation-selected h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
}
.no-conversation-selected p {
    max-width: 300px;
    font-size: 0.95rem;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .messaging-container {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        height: 85vh;
    }

    /* Mobilde liste ve detay arasında geçiş mantığı gerekebilir */
    /* Şimdilik basitçe listeyi gizleyip detayı gösteriyoruz (JS ile yönetilmeli normalde) */
    /* Bu CSS örneğinde yan yana sığmayacağı için alt alta koyuyoruz */

    .conversation-list {
        height: 30%; /* Mobilde üstte küçük liste */
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .message-view {
        height: 70%;
    }
}
/* === PROFİL MENÜSÜ İÇİ MESAJ SAYACI STİLİ === */
.dropdown-content a {
    position: relative; /* Sayacı konumlandırmak için gereklidir. */
}

.notification-badge-menu {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--secondary-color); /* Bildirim zilinden farklı olarak mavi renk */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.2;
}
/* === MİNİMALİST DEĞERLENDİRME FORMU STİLLERİ === */
.review-form-container {
    background: #f9f9f9; /* Sade, açık gri bir arka plan */
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
}
.review-form-container h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}
.review-form-container p {
    margin-bottom: 1.5rem;
    color: #555;
}
.review-form-container.success {
    background: #f0f8ff; /* Açık mavi tonu */
    border-color: var(--accent-color);
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50;
}
.review-form-container.success i {
    margin-right: 0.5rem;
    color: var(--accent-color);
}

/* Yıldızlı Puanlama Sistemi (Daha Zarif Hali) */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.star-rating input {
  display: none;
}
.star-rating label {
  position: relative;
  padding: 5px; /* Yıldızlar arası boşluğu azalttık */
  color: #ddd;
  cursor: pointer;
  font-size: 2rem; /* Yıldızları biraz küçülttük */
  transition: color 0.2s ease, transform 0.2s ease;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #ffc107;
  transform: scale(1.1); /* Hover efektini belirginleştirdik */
}
/* === PROFİL SAYFASI - DEĞERLENDİRME STİLLERİ === */

/* Dinamik Yıldız Puanı Gösterimi */
.profile-rating-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(0,0,0,0.4);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    width: fit-content;
}
.profile-rating-summary strong {
    font-size: 1.2rem;
    color: #FFC107;
}
.profile-rating-summary span {
    font-size: 0.9rem;
    opacity: 0.9;
    color: #fff;
}

.stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: 1.5rem;
  font-family: Times; /* Yıldız karakterinin düzgün görünmesi için */
  line-height: 1;
}
.stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, #FFC107 var(--percent), #d3d3d3 var(--percent));

  -webkit-text-fill-color: transparent;
}

/* Değerlendirme Listesi */
#tab-reviews {
    max-width: 800px;
    margin: 0 auto;
}
.review-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--accent-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.review-item .review-rating .stars {
    font-size: 1.2rem;
}
.review-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #333;
    margin: 1rem 0;
    padding: 0;
    border: none;
}
.review-meta {
    font-size: 0.9rem;
    color: #777;
    margin-top: 1rem;
    text-align: right;
}
.review-meta a {
    color: var(--accent-color);
    font-weight: 600;
}
/* === KULLANICININ KENDİ SUNUMLARI SEKME İÇERİĞİ === */
#tab-my-submissions h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 0;
}

.my-submission-card {
    position: relative; /* Silme butonu için konumlandırma referansı */
}

.my-submission-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 0.5rem;
}

.btn-my-sub-delete {
    background-color: rgba(231, 76, 60, 0.9); /* Yarı saydam kırmızı */
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0; /* Başlangıçta tamamen gizli */
    transform: translateY(10px); /* Aşağıda başlasın */
}

.my-submission-card:hover .btn-my-sub-delete {
    opacity: 1; /* Fare üzerine gelince görünsün */
    transform: translateY(0); /* Yukarı doğru kaysın */
}

.btn-my-sub-delete:hover {
    background-color: #c0392b; /* Kırmızının koyu tonu */
    transform: scale(1.05); /* Hafifçe büyüsün */
}
/* ========================================================== */
/* === PROJELER SAYFASI - ULTRA EXTREM TASARIM v5 === */
/* ========================================================== */
/* --- ULTRA EXTREM: Haftanın Projesi Kartı Stilleri --- */
.featured-project-section {
    margin-bottom: 3rem;
}
.featured-project-card {
    background: linear-gradient(135deg, #6d20c2, var(--accent-color)); /* Canlı mor/lila gradyan */
    color: white;
    border-radius: var(--border-radius);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(131, 56, 236, 0.3);
}
.featured-project-card::before { /* Animasyonlu parlama efekti */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    transform: rotate(0deg);
    animation: rotateGlow 15s linear infinite;
}
@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.featured-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--cta-color);
    color: var(--primary-text);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
}
.featured-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.featured-info h2 {
    font-size: 2.2rem;
    margin: 0 0 0.5rem 0;
}
.featured-info h2 a {
    color: white;
    text-decoration: none;
}
.featured-info p {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 70%;
    margin-bottom: 1.5rem;
}
.featured-owner { display: flex; align-items: center; gap: 0.75rem; }
.featured-owner img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; }
.featured-stats {
    display: flex;
    gap: 2rem;
    text-align: center;
}
.featured-stats .stat-item span { display: block; font-size: 1rem; opacity: 0.8; }
.featured-stats .stat-item strong { font-size: 2.5rem; font-weight: 700; }
.featured-stats .stat-item.prize strong { color: var(--cta-color); }

@media (max-width: 768px) {
    .featured-body {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .featured-stats {
        margin-top: 2rem;
    }
    .featured-info p {
        max-width: 100%;
    }
}
/* --- Sayfa Genel Yapısı ve Arka Planı --- */
.page-background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    z-index: -1;
}
.filter-bar {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    margin-bottom: 3rem;
}
.project-list-container-v4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

/* --- Aktif Proje Kartı (Glassmorphism) --- */
.project-card-v4-active {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--primary-text);
    background: rgba(255, 255, 255, 0.5); /* Camsı etki için yarı saydam arka plan */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(131, 56, 236, 0.1);
    transition: all 0.3s ease;
}
.project-card-v4-active:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px 0 rgba(131, 56, 236, 0.2);
}
.active-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.3); }
.owner-info { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.9rem; }
.owner-info img { width: 32px; height: 32px; border-radius: 50%; }
.countdown { font-size: 0.8rem; font-weight: 700; }
.countdown.urgent { color: #e74c3c; }
.active-body { padding: 1.5rem; flex-grow: 1; }
.category-tag { background: rgba(131, 56, 236, 0.1); color: var(--accent-color); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; }
.active-body h3 { font-size: 1.5rem; margin: 1rem 0 0 0; }
.active-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255,255,255,0.3); }
.prize-info { font-size: 1.4rem; font-weight: 700; color: var(--accent-color); display: flex; align-items: center; gap: 0.5rem; }
.stats-info { display: flex; gap: 1rem; color: var(--secondary-text); }

/* --- Tamamlanmış Proje Kartı (Kazanan Vitrini) --- */
.project-card-v4-completed {
    display: flex;
    position: relative;
    aspect-ratio: 16 / 9; /* Kartı en-boy oranına zorla */
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.project-card-v4-completed:hover {
    transform: scale(1.03);
}
.completed-overlay {
    position: absolute;
    inset: 0; /* top, bottom, left, right: 0 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.completed-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0,0,0,0.5);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}
.completed-content h3 {
    font-size: 1.4rem;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 5px black;
}
.winner-info {
    font-size: 0.9rem;
    opacity: 0.9;
}
/* ========================================================== */
/* === PROFİL SAYFASI - ULTRA EXTREM "YAŞAYAN PORTFOLYO" v5 === */
/* ========================================================== */

.profile-v5-container {
    max-width: 1400px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: flex-start;
}
.profile-v5-sidebar {
    position: sticky; /* Sabit Sütun */
    top: 100px; /* Navbar yüksekliğine göre ayarlayın */
}
.sidebar-content {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
}
.profile-v5-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--background-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-top: -95px; /* Sayfanın yukarısına taşır */
    margin-bottom: 1rem;
}
.profile-v5-container h1 { font-size: 2rem; margin-bottom: 0.25rem; }
.profile-v5-title { color: var(--secondary-text); margin-bottom: 1.5rem; }
.profile-v5-actions { margin-bottom: 2rem; }
.profile-v5-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; text-align: center; padding: 1.5rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; }
.profile-v5-stats .stat-item strong { font-size: 1.5rem; display: block; }
.profile-v5-stats .stat-item span { font-size: 0.8rem; color: var(--secondary-text); }
.profile-v5-skills h3 { font-size: 1.2rem; text-align: center; margin-bottom: 1rem; }

.profile-v5-main h2 { font-size: 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; }
.profile-v5-main h2 i { color: var(--accent-color); margin-right: 0.75rem; }
.signature-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.signature-item { display: block; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.signature-item:hover { transform: scale(1.03); }
.signature-item img { width: 100%; height: 100%; object-fit: cover; }

.timeline-v5-item { display: flex; gap: 1.5rem; position: relative; padding-left: 45px; margin-bottom: 2rem; }
.timeline-v5-icon { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
.timeline-v5-icon.project_win { background: #ffbe0b; } /* Sarı */
.timeline-v5-icon.five_star { background: #27ae60; } /* Yeşil */
.timeline-v5-content strong { display: block; font-size: 1.1rem; }
.timeline-v5-content p { margin: 0.25rem 0; color: var(--secondary-text); }
.timeline-v5-content small { font-size: 0.8rem; color: #aaa; }

.portfolio-grid-v5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.portfolio-item-v5 { display: block; border-radius: var(--border-radius); overflow: hidden; opacity: 0.8; transition: all 0.3s ease; }
.portfolio-item-v5:hover { opacity: 1; transform: scale(1.05); }
.portfolio-item-v5 img { width: 100%; height: 100%; object-fit: cover; }
/* ========================================================== */
/* === YENİ PROFİL SAYFASI (v5) İÇİN EK STİLLER === */
/* ========================================================== */

/* Kenar çubuğundaki (sidebar) 'Hakkında' özeti için stil */
.profile-v5-bio {
    text-align: left;
    margin-bottom: 1.5rem;
    border-top: 1px solid #e0e0e0; /* var(--border-color) */
    padding-top: 1.5rem;
}
.profile-v5-bio h3 {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 1rem;
}
.profile-v5-bio p {
    font-size: 0.9rem;
    color: #555; /* var(--secondary-text) */
    line-height: 1.6;
    word-break: break-word; /* Uzun 'hakkında' metinlerinin taşımasını engeller */
}

/* Kenar çubuğundaki sosyal medya ikonları için stil */
.profile-socials {
    border-top: 1px solid #e0e0e0; /* var(--border-color) */
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.profile-socials a {
    color: var(--text-color);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
.profile-socials a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
/* Özel renkler (style.css'te zaten olabilir ama emin olmak için) */
.profile-socials a[title="Dribbble"] { color: #ea4c89; }
.profile-socials a[title="Twitter"] { color: #1DA1F2; }

/* Ana içerik alanındaki bölümler (Sekme içeriği) */
.profile-v5-main .profile-v5-section {
    margin-bottom: 2.5rem;
}
.profile-v5-main .profile-v5-section h2 {
    font-size: 1.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0; /* var(--border-color) */
    margin-bottom: 2rem;
    color: var(--primary-color);
}
.profile-v5-main .profile-v5-section h2 i {
    color: var(--accent-color);
    margin-right: 0.75rem;
}

/* Değerlendirme listesi için bir konteyner */
.review-list {
    max-width: 800px; /* project-detail'deki yorum listesiyle aynı */
}

/* Yetenek Radarı grafiğinin düzgün görünmesi için */
#skillsRadarChart {
    max-width: 400px;
    max-height: 400px;
    margin: 0 auto;
}

/* style.css dosyasında zaten var olan .stars sınıfına bir ekleme yapalım */
.profile-rating-summary .stars {
    font-size: 1.2rem;
    color: #FFC107;
}

/* style.css dosyasında zaten var olan .review-item stillerini ezelim (gerekirse) */
.review-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--accent-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.review-item .review-rating .stars {
     font-size: 1.1rem;
}
.review-item .review-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #333;
    margin: 1rem 0;
    padding: 0;
    border: none;
}
.review-item .review-meta {
    font-size: 0.9rem;
    color: #777;
    margin-top: 1rem;
    text-align: right;
}
.review-item .review-meta a {
    color: var(--accent-color);
    font-weight: 600;
}
/* ===========================
   AUTH MODAL (Giriş / Kayıt / Çıkış)
   =========================== */

.modal-content.auth-modal {
    background-color: var(--white-color);
    margin: auto;
    padding: 2.2rem 2rem 1.8rem;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    position: relative;
    width: 90%;
    max-width: 420px;
    animation: fadeIn 0.25s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Hafif gradient overlay */
.modal-content.auth-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(52, 152, 219, 0.06),
        rgba(26, 188, 156, 0.04)
    );
    pointer-events: none;
}

/* İçerik overlay üstünde kalsın */
.modal-content.auth-modal > * {
    position: relative;
    z-index: 1;
}

/* Başlık alanı */
.auth-modal-header {
    text-align: center;
    margin-bottom: 1.8rem;
}

.auth-modal-header h2 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    color: var(--primary-color);
}

.auth-modal-header p {
    margin: 0;
    font-size: 0.95rem;
    color: #7f8c8d;
}

/* Form alanı */
.auth-modal-form .form-group {
    margin-bottom: 1.1rem;
}

.auth-modal-form .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.35rem;
}

/* Mevcut input stilini biraz modernleştiriyoruz sadece modal içinde */
.auth-modal-form .form-group input[type="text"],
.auth-modal-form .form-group input[type="email"],
.auth-modal-form .form-group input[type="password"] {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #dcdde1;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-modal-form .form-group input::placeholder {
    color: #b4b8bd;
}

.auth-modal-form .form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.18);
    background-color: #fdfefe;
}

/* Şifreyi unuttum vs. */
.auth-modal .form-options {
    text-align: right;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
}

.auth-modal .form-options a {
    color: var(--accent-color);
    text-decoration: none;
}

.auth-modal .form-options a:hover {
    text-decoration: underline;
}

/* Giriş / Kayıt butonu */
.auth-modal .auth-submit-btn {
    width: 100%;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(26, 188, 156, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.auth-modal .auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(26, 188, 156, 0.45);
}

/* Alt bilgi */
.auth-modal-footer {
    margin-top: 1.3rem;
    text-align: center;
    font-size: 0.85rem;
    color: #7f8c8d;
}

.auth-modal-footer a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.auth-modal-footer a:hover {
    text-decoration: underline;
}

/* Hata / başarı mesajları için */
.auth-alert {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.auth-alert.error {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.5);
    color: #c0392b;
}

.auth-alert.success {
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.5);
    color: #27ae60;
}

/* Modal kapatma butonunu biraz modernleştir */
.modal-content.auth-modal .modal-close {
    top: 12px;
    right: 16px;
    font-size: 1.6rem;
    color: #bdc3c7;
}

.modal-content.auth-modal .modal-close:hover {
    color: var(--primary-color);
}

/* Mobil uyum */
@media (max-width: 576px) {
    .modal-content.auth-modal {
        padding: 1.8rem 1.3rem 1.5rem;
        max-width: 94%;
    }

    .auth-modal-header h2 {
        font-size: 1.4rem;
    }
}
/* ========================================================== */
/* === MODERN MODAL TASARIMI (v5.1 - Kompakt Sürüm)       === */
/* ========================================================== */

/* 1. Modal Konteyneri (İki Sütunlu) - KÜÇÜLTÜLDÜ */
.modal-content.modal-split {
    max-width: 800px; /* 850px'den 800px'e küçültüldü */
    padding: 0;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-height: 90vh; 
}

/* 2. Sol Taraf (Görsel Alanı) */
.modal-left {
    display: flex;
    flex: 0 0 40%;
    background-size: cover;
    background-position: center;
    padding: 3rem;
    color: white;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
    position: relative;
    z-index: 1;
}
.modal-left::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: -1;
}
.modal-left h3 {
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.modal-left p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* 3. Sağ Taraf (Form Alanı) - KÜÇÜLTÜLDÜ */
.modal-right {
    flex: 1 1 60%;
    /* Padding azaltıldı */
    padding: 2.5rem 3rem; 
    position: relative;
    background: var(--white-color);
    overflow-y: auto; /* İçerik sığmazsa scroll olsun */
}
.modal-right .section-title {
    text-align: left;
    font-size: 2rem; /* Başlık hafifçe küçültüldü */
    color: var(--primary-color);
    background: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.modal-right p.modal-subtitle {
    text-align: left;
    font-size: 1rem;
    color: #777;
    margin-top: 0.5rem;
    margin-bottom: 2rem; 
}

/* 4. Kapatma Butonu */
.modal-right .modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: #aaa;
    transition: all 0.3s ease;
    z-index: 10;
}
.modal-right .modal-close:hover {
    color: var(--primary-color);
    transform: rotate(90deg) scale(1.1);
}

/* 5. Form Elemanları (Yeni Premium Stil) */
.modal-right .form-group {
    margin-bottom: 1.25rem;
}
.modal-right .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.modal-right .form-group .input-group {
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    background: #f9f9f9;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.modal-right .form-group .input-group:focus-within {
    border-color: var(--accent-color);
    background: var(--white-color);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}
.modal-right .form-group input {
    background: transparent;
    border: none;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    flex: 1;
    width: auto;
    box-shadow: none !important; 
    margin-bottom: 0 !important;
}
.modal-right .form-group input:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
.modal-right .input-group i {
    color: #aaa;
    font-size: 1rem;
    padding-left: 1rem;
    transition: color 0.3s ease;
}
.modal-right .form-group .input-group:focus-within i {
    color: var(--accent-color);
}

/* 6. Şifremi Unuttum Linki */
.modal-right .form-options {
    text-align: right;
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
}
.modal-right .form-options a {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

/* 7. reCAPTCHA Alanı */
.form-group.recaptcha-group {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 8. Ana Buton (Sitenizin Vurgu Rengi) */
.btn-full-width {
    width: 100%;
    background: var(--accent-color);
    border: none;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0px;
    color: var(--white-color);
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3); 
    transition: all 0.3s ease;
    border-radius: var(--border-radius);
}
.btn-full-width:hover {
    background: #16a085;
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.5);
    transform: translateY(-2px);
}

/* 9. Modal Alt Link */
.modal-switch-link {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light-gray);
    font-size: 0.95rem;
    background: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
}
.modal-switch-link a {
    color: var(--accent-color);
    font-weight: 600;
}

/* 10. Mobil Görünüm Düzeltmesi */
@media (max-width: 768px) {
    .modal-left {
        display: none;
    }
    .modal-right {
        flex: 1 1 100%;
        padding: 2.5rem 2rem;
        overflow-y: auto;
    }
    .modal-content.modal-split {
        max-width: 450px;
        max-height: 95vh;
        display: block;
    }
}
/* ========================================================== */
/* === PROJELER SAYFASI - EXTREME MAKEOVER (v7 - FİNAL)   === */
/* ========================================================== */

/* --- 1. Sayfa Arka Planı --- */
/* Sayfanın tamamına temiz bir arka plan verelim */
body {
    background-color: var(--light-gray) !important;
}
/* PHP dosyasındaki .page-background'ı gizleyelim, body'i kullanmak daha temiz */
.page-background {
    display: none;
}

/* --- 2. Sayfa Başlığı (EXTREME GRADIENT) --- */
/* browse-projects.php dosyasındaki inline 'background: transparent' stilini ezer */
.page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
    color: var(--white-color);
    padding: 4rem 0; /* Başlık alanını büyüt */
    text-align: center;
    margin-bottom: 3rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 5px solid rgba(255, 255, 255, 0.2);
}
.page-header h1 {
    font-size: 3rem;
    color: var(--white-color); /* Soluk rengi düzelt */
}
.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    color: var(--white-color); /* Soluk rengi düzelt */
}

/* --- 3. Filtreleme Barı (Modern Kart Görünümü) --- */
.filter-bar {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Yükseltme efekti */
    padding: 1.5rem 2rem;
    display: grid; /* Izgara yapısıyla daha düzenli */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.filter-bar .form-group {
    margin-bottom: 0;
}
.filter-bar .form-group label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}
.filter-bar .form-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    background-color: var(--light-gray);
}

/* --- 4. "Haftanın Projesi" Kartı (PREMIUM KART) --- */
.featured-project-card {
    /* Ana vurgu renginizi (turkuaz) gradient olarak kullanıyoruz */
    background: linear-gradient(135deg, var(--accent-color) 0%, #16a085 100%);
    color: white;
    border-radius: 12px;
    padding: 2.5rem 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(26, 188, 156, 0.4);
}
.featured-tag {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: rgba(255,255,255,0.2);
    color: var(--white-color);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
}
.featured-body {
    gap: 2rem;
}
.featured-info h2 {
    font-size: 2.2rem;
    font-weight: 700;
}
.featured-info p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}
.featured-stats {
    background: rgba(0,0,0,0.1); /* İstatistikleri ayır */
    padding: 1.5rem;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}
.featured-stats .stat-item span {
    font-size: 1rem;
    opacity: 0.9;
}
.featured-stats .stat-item strong {
    font-size: 2.5rem;
    font-weight: 700;
}
.featured-stats .stat-item.prize strong {
    color: var(--white-color);
}

/* --- 5. Aktif Proje Kartı (TEMİZ KART) --- */
.project-card-v4-active {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-color);
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}
.project-card-v4-active:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: var(--accent-color);
}
.active-header { 
    padding: 1rem 1.5rem; 
    border-bottom: 1px solid var(--border-color); 
}
.owner-info { 
    font-weight: 500;
    font-size: 0.9rem; 
    color: #555;
}
.countdown { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--primary-color);
}
.countdown.urgent { 
    color: #e74c3c; /* Kırmızı */
}
.active-body { 
    padding: 1.5rem; 
    flex-grow: 1; 
}
.category-tag { 
    background: var(--light-gray);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem; 
    border-radius: 50px; 
    font-size: 0.8rem; 
    font-weight: 600; 
}
.active-body h3 { 
    font-size: 1.4rem;
    margin: 1rem 0 0 0; 
    line-height: 1.4;
    color: var(--primary-color);
}
.active-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 1.5rem; 
    background: var(--light-gray);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.prize-info { 
    font-size: 1.4rem; 
    font-weight: 700; 
    color: var(--accent-color);
}
.prize-info i { margin-right: 0.5rem; }
.stats-info { 
    display: flex; 
    gap: 1.25rem;
    color: #777;
    font-size: 0.9rem;
}
.stats-info i { margin-right: 0.3rem; }

/* --- 6. Tamamlanmış Proje Kartı (GÖRSEL KART) --- */
.project-card-v4-completed {
    display: flex;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.project-card-v4-completed:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.completed-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 70%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.completed-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0,0,0,0.6);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}
.completed-content h3 {
    font-size: 1.4rem;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 5px black;
    font-weight: 600;
}
.winner-info {
    font-size: 0.9rem;
    opacity: 0.9;
}
.winner-info strong::before {
    content: 'Kazanan: ';
    opacity: 0.8;
    font-weight: 400;
}

/* --- 7. Proje Bulunamadı Uyarısı (İkonlu) --- */
.no-projects-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background-color: var(--white-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
}
.no-projects-found::before {
    /* Font Awesome Arama İkonu */
    content: '\f002'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 3rem;
    color: #ccc;
    display: block;
    margin-bottom: 1.5rem;
}
.no-projects-found h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.no-projects-found p {
    color: #777;
}
/* ========================================================== */
/* === DASHBOARD - EXTREME INTERACTIVE (v8)               === */
/* ========================================================== */

.dashboard-wrapper {
    background-color: var(--light-gray);
    min-height: 100vh;
    padding-bottom: 4rem;
}

/* --- Hero Bölümü --- */
.dashboard-hero-section {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    color: white;
    padding: 3rem 0 6rem 0; /* Alt boşluk kartlar için */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}
.welcome-text h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.welcome-text p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2.5rem;
}

/* --- Tıklanabilir İstatistik Kartları --- */
.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: -3rem; /* Hero'nun dışına taşır */
}

.d-stat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
}

.d-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    background: #fff;
}

/* Kart Renkleri ve İkonlar */
.d-stat-card .icon-box {
    width: 55px; height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    flex-shrink: 0;
}
.d-stat-card.primary .icon-box { background: linear-gradient(135deg, #3498db, #2980b9); }
.d-stat-card.success .icon-box { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.d-stat-card.accent .icon-box { background: linear-gradient(135deg, #e74c3c, #c0392b); }

.d-stat-card .text-box h3 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    color: var(--primary-color);
}
.d-stat-card .text-box span {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

.d-stat-card .arrow-icon {
    margin-left: auto;
    color: #ccc;
    transition: all 0.3s ease;
}
.d-stat-card:hover .arrow-icon {
    color: var(--primary-color);
    transform: translateX(5px); /* Sağa kayma efekti */
}

/* --- Ana İçerik --- */
.main-dashboard-content {
    margin-top: 5rem; /* Hero taşması için boşluk */
    position: relative;
    z-index: 2;
}

.dashboard-panel {
    margin-bottom: 4rem;
    scroll-margin-top: 120px; /* Anchor link tıklandığında navbar altında kalmaması için */
}

.panel-header {
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}
.panel-header h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 0;
}
.panel-header h2 i { margin-right: 0.8rem; }

/* --- Aktif Proje Kartları --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}

.dash-card.active-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    position: relative;
    display: flex;
    flex-direction: column;
}
.dash-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

.card-status-bar { height: 6px; width: 100%; }
.card-status-bar.urgent { background: #e74c3c; }
.card-status-bar.normal { background: var(--accent-color); }
.card-status-bar.expired { background: #95a5a6; }

.card-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.cat-badge {
    background: #f4f6f9;
    color: #555;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.time-badge { font-size: 0.85rem; font-weight: 600; }
.time-badge.urgent { color: #e74c3c; }
.time-badge.normal { color: var(--accent-color); }

.dash-card h3 { margin: 0 0 1.5rem 0; font-size: 1.3rem; line-height: 1.4; }
.dash-card h3 a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; }
.dash-card h3 a:hover { color: var(--accent-color); }

.card-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.stat { display: flex; flex-direction: column; }
.stat .label { font-size: 0.8rem; color: #888; margin-bottom: 0.2rem; }
.stat .value { font-size: 1.1rem; font-weight: 700; color: #333; }
.stat .value.prize { color: var(--accent-color); }

.btn-action {
    margin-top: auto;
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}
.btn-action:hover { background: #34495e; }

/* --- Tamamlanmış Liste Görünümü --- */
.completed-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.completed-item {
    background: #fff;
    padding: 1.2rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}
.completed-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #2ecc71;
    transform: translateX(5px);
}
.item-icon {
    width: 45px; height: 45px;
    background: #e8f8f5;
    color: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.item-info { flex-grow: 1; }
.item-info h4 { margin: 0 0 0.2rem 0; font-size: 1.1rem; }
.item-info h4 a { color: var(--text-color); text-decoration: none; }
.item-info .date { font-size: 0.85rem; color: #888; }
.item-stats { color: #666; font-weight: 500; font-size: 0.9rem; }
.btn-icon {
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.3s;
}
.completed-item:hover .btn-icon { color: var(--primary-color); }

/* --- Boş Durum --- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed #e0e0e0;
}
.empty-icon { font-size: 3rem; color: #ddd; margin-bottom: 1rem; }
.empty-state p { color: #777; margin-bottom: 1.5rem; }
.btn-create {
    background: var(--accent-color);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
}

/* Mobil */
@media (max-width: 768px) {
    .dashboard-stats-row { grid-template-columns: 1fr; margin-bottom: -2rem; }
    .main-dashboard-content { margin-top: 4rem; }
    .completed-item { flex-wrap: wrap; }
    .item-stats { width: 100%; padding-left: 60px; margin-top: -0.5rem; }
}
/* ========================================================== */
/* === SUNUM KARTLARI STANDARTLAŞTIRMA DÜZELTMESİ         === */
/* ========================================================== */

.submission-grid,
.submission-grid.compact-grid {
    display: grid;
    /* auto-fit YERİNE auto-fill kullanıyoruz. 
       Bu sayede tek bir kart olsa bile tüm satırı kaplamaz, 
       sadece kendi alanını (min 300px) kaplar.
    */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 2rem; /* Kartlar arası boşluğu artırdık */
    align-items: start; /* Kart yüksekliklerini içeriğe göre başlat */
}

/* Kartın Kendisi */
.submission-card-v2 {
    width: 100%; /* Bulunduğu hücreyi tam doldursun */
    max-width: 450px; /* Çok geniş ekranlarda aşırı büyümesin */
    margin: 0 auto; /* Ortala (gerekirse) */

    /* Kart yüksekliklerini eşitlemek için */
    height: 100%; 
    display: flex;
    flex-direction: column;
}

/* Resim Alanını Standartlaştırma */
.submission-image-link {
    width: 100%;
    /* En-boy oranını sabitliyoruz (4:3). 
       Böylece yatay veya dikey her resim aynı kutu içinde görünür.
    */
    aspect-ratio: 4 / 3; 
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
}

.submission-image-link img {
    width: 100%;
    height: 100%;
    /* Resmi kutuya sığdır ve taşan kısımları kes (bozulmayı önler) */
    object-fit: cover; 
    object-position: center;
    transition: transform 0.5s ease;
}

/* Hover Efekti: Resme yaklaşma */
.submission-card-v2:hover .submission-image-link img {
    transform: scale(1.1);
}

/* ========================================================== */
/* === PROJELER SAYFASI - MODERN KOMPAKT & FİYAT ODAKLI v10 === */
/* ========================================================== */

.browse-page-wrapper {
    background-color: var(--light-gray);
    min-height: 100vh;
}

/* 1. Header ve Filtre Alanı */
.browse-header {
    background: var(--primary-color);
    padding: 3rem 0 5rem 0; /* Alt boşluk, içeriğin yukarı taşması için */
    color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.header-text {
    text-align: center;
    margin-bottom: 2rem;
}
.header-text h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.header-text p {
    opacity: 0.8;
    font-size: 1.1rem;
}

/* Filtre Barı */
.modern-filter-bar {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-width: 900px;
    margin: 0 auto;
}
.filter-group {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0 1rem;
    border: 1px solid #eee;
    transition: border-color 0.3s;
}
.filter-group:focus-within {
    border-color: var(--accent-color);
}
.filter-group i {
    color: #999;
    margin-right: 0.5rem;
}
.filter-group select {
    width: 100%;
    border: none;
    background: transparent;
    padding: 1rem 0;
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
    outline: none;
}

/* 2. Haftanın Projesi (Kompakt & Vurucu) */
.featured-compact-section {
    margin-bottom: 3rem;
}
.featured-compact-card {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); /* Premium Siyah/Koyu */
    border-radius: 16px;
    padding: 2rem;
    display: flex; /* Yatay Yerleşim */
    align-items: center;
    gap: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
}
/* Arka Plan Efekti */
.featured-compact-card::after {
    content: '';
    position: absolute;
    right: -50px; top: -50px;
    width: 200px; height: 200px;
    background: var(--accent-color);
    filter: blur(80px);
    opacity: 0.3;
    border-radius: 50%;
    pointer-events: none;
}

.featured-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: #e74c3c;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    z-index: 2;
}

/* Sol: Fiyat Alanı (ÇOK BÜYÜK) */
.featured-left {
    flex: 0 0 auto;
    text-align: center;
    padding-right: 2rem;
    border-right: 1px solid rgba(255,255,255,0.15);
    padding-top: 1.5rem; /* Badge için boşluk */
}
.prize-highlight {
    display: flex;
    flex-direction: column;
}
.prize-label {
    font-size: 0.9rem;
    color: #f1c40f; /* Altın rengi */
    font-weight: 600;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.prize-amount {
    font-size: 3rem; /* Devasa Fiyat */
    font-weight: 800;
    color: white;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(241, 196, 15, 0.3);
}

/* Orta: Bilgi Alanı */
.featured-center {
    flex: 1;
    min-width: 250px;
}
.featured-center h2 {
    margin: 0 0 1rem 0;
    font-size: 1.8rem;
    line-height: 1.3;
}
.featured-center h2 a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}
.featured-center h2 a:hover {
    color: var(--accent-color);
}
.featured-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.95rem;
    opacity: 0.8;
}
.featured-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mini-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid white;
}

/* Sağ: Buton */
.featured-right {
    flex: 0 0 auto;
}
.btn-featured-action {
    background: var(--accent-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(26, 188, 156, 0.4);
}
.btn-featured-action:hover {
    transform: translateX(5px);
    background: #16a085;
}

/* 3. Proje Izgarası */
.project-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding-bottom: 4rem;
}

/* Standart Aktif Kart */
.project-card.active-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-color);
}
.project-card.active-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}
.card-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}
.category-pill {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
}
.time-pill {
    font-size: 0.85rem;
    font-weight: 600;
}
.time-pill.urgent { color: #e74c3c; }
.time-pill.normal { color: var(--accent-color); }

.card-body {
    padding: 1.5rem;
    flex: 1;
}
.card-body h3 {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    color: var(--primary-color);
}
.user-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    color: #666;
}
.user-row img {
    width: 30px; height: 30px;
    border-radius: 50%;
}

.card-footer {
    background: #fcfcfc;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.budget-box {
    display: flex;
    flex-direction: column;
}
.budget-box .label {
    font-size: 0.75rem;
    color: #999;
}
.budget-box .value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
}
.stats-box {
    display: flex;
    gap: 1rem;
    color: #999;
    font-size: 0.9rem;
}

/* Tamamlanmış Kart */
.project-card.completed-card {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.project-card.completed-card:hover {
    transform: scale(1.03);
}
.completed-card .overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}
.status-label {
    position: absolute;
    top: 1rem; right: 1rem;
    background: #2ecc71;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
.completed-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Mobil */
@media (max-width: 768px) {
    .featured-compact-card {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .featured-left {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding-right: 0;
        padding-bottom: 1.5rem;
        padding-top: 2rem;
        width: 100%;
    }
    .featured-meta {
        justify-content: center;
    }
    .filter-group {
        min-width: 100%;
    }
}
/* ========================================================== */
/* === EK ÖZELLİKLER (YENİ ETİKETİ, PROGRESS BAR, SAYFALAMA) === */
/* ========================================================== */

/* 1. "YENİ" Kurdelesi (Sadece Yeni Projelerde) */
.project-card.active-card {
    position: relative;
    overflow: hidden; /* Kurdele dışarı taşmasın */
}
.is-new-project {
    border: 1px solid var(--accent-color) !important; /* Yeni projeleri çerçeveyle vurgula */
    box-shadow: 0 0 15px rgba(26, 188, 156, 0.15) !important;
}
.new-ribbon {
    position: absolute;
    top: 0; right: 0;
    width: 85px; height: 85px;
    overflow: hidden;
    z-index: 5;
}
.new-ribbon span {
    position: absolute;
    top: 15px; right: -25px;
    transform: rotate(45deg);
    background-color: #e74c3c; /* Kırmızı */
    color: white;
    width: 100px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 2. Süre İlerleme Çubuğu */
.time-progress-bar {
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
    border-radius: 2px;
    margin-top: 1rem;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #3498db);
    border-radius: 2px;
}

/* 3. Sayfalama (Pagination) Stilleri */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 8px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}
.page-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.page-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.page-btn.prev i, .page-btn.next i {
    margin: 0 5px;
}
/* ========================================================== */
/* === ANA SAYFA - ULTRA MODERN (vUltimate)               === */
/* ========================================================== */

/* 1. Hero Alanı (Animasyonlu Gradient) */
.hero-ultimate {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    background-color: #0f0c29; /* Fallback rengi */
    color: white;
}

/* Animasyonlu Arka Plan */
.hero-mesh-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, #24243e, #302b63, #0f0c29);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: 0;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Ekstra desen */
.hero-mesh-bg::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Sol yazı, sağ görsel */
    gap: 3rem;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--accent-color);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.gradient-text {
    background: linear-gradient(to right, var(--accent-color), #2ecc71);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 90%;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* Ultimate Butonlar */
.btn-ultimate {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.btn-ultimate.primary {
    background: var(--accent-color);
    color: white;
}
.btn-ultimate.primary.glow-effect:hover {
    box-shadow: 0 0 20px rgba(26, 188, 156, 0.6);
    transform: translateY(-3px);
}
.btn-ultimate.secondary {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}
.btn-ultimate.secondary:hover {
    background: white;
    color: var(--primary-color);
}
.btn-ultimate.white {
    background: white;
    color: var(--primary-color);
}
.btn-ultimate.white:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hero-trust-badges {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    opacity: 0.7;
}
.trust-item i { color: var(--accent-color); margin-right: 0.5rem; }

/* Sağ Taraf Görsel & Yüzen Kartlar */
.hero-visual-col {
    position: relative;
    display: flex;
    justify-content: center;
}
.hero-image {
    width: 100%;
    max-width: 500px;
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.floating-card {
    position: absolute;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    color: var(--text-color);
    z-index: 3;
}
.floating-card .card-icon {
    width: 40px; height: 40px;
    background: #fff3cd;
    color: #f1c40f;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.floating-card .card-icon.secondary {
    background: #d4edda;
    color: #2ecc71;
}
.floating-card strong { font-size: 1.2rem; display: block; line-height: 1; }
.floating-card small { font-size: 0.75rem; color: #666; }

/* Kart Konumları */
.floating-card:nth-child(1) { top: 10%; left: -20px; animation: float 5s infinite 1s; }
.floating-card:nth-child(2) { bottom: 15%; right: -10px; animation: float 7s infinite; }

/* 2. Nasıl Çalışır (Tab Sistemi) */
.section-how-ultimate {
    padding: 5rem 0;
    background: white;
}
.section-header-center {
    text-align: center;
    margin-bottom: 3rem;
}
.section-header-center h2 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--primary-color); }
.section-header-center p { color: #777; }

.role-toggle-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    background: #f0f2f5;
    padding: 0.5rem;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto; margin-right: auto;
}
.role-btn {
    padding: 0.8rem 2rem;
    border: none;
    background: transparent;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    color: #777;
    transition: all 0.3s;
}
.role-btn.active {
    background: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.role-btn i { margin-right: 0.5rem; }

.role-content { transition: opacity 0.5s ease; }

.steps-grid-ultimate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.step-item {
    text-align: center;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 20px;
    transition: transform 0.3s;
}
.step-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: var(--accent-color);
}
.step-num {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(26, 188, 156, 0.1); /* Accent rengin şeffafı */
    margin-bottom: 1rem;
    line-height: 1;
}
.step-item h3 { margin-bottom: 0.5rem; font-size: 1.3rem; color: var(--primary-color); }

/* 3. Vitrin (Izgara) */
.section-showcase-ultimate {
    padding: 5rem 0;
    background: #f8f9fa;
}
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}
.section-header-row h2 { margin: 0; font-size: 2rem; color: var(--primary-color); }
.link-arrow {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: padding 0.3s;
}
.link-arrow:hover { padding-left: 10px; }

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.showcase-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s;
    position: relative;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}
.card-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.cat-tag {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.showcase-card h3 {
    margin: 0.5rem 0 1.5rem 0;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--primary-color);
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f5f5f5;
    padding-top: 1rem;
}
.prize-tag { font-weight: 700; color: var(--accent-color); }
.user-tag { font-size: 0.9rem; color: #777; }

/* 4. Liderler */
.section-top-designers {
    padding: 3rem 0;
}
.leaderboard-box {
    background: var(--primary-color);
    border-radius: 20px;
    padding: 3rem;
    color: white;
}
.leaderboard-header { text-align: center; margin-bottom: 2rem; }
.leaderboard-header h2 { color: white; margin-bottom: 0.5rem; }
.leaderboard-header p { opacity: 0.8; }

.designers-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.designer-pill {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 1rem;
    border-radius: 50px; /* Tam yuvarlak */
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: white;
    transition: all 0.3s;
    min-width: 250px;
}
.designer-pill:hover {
    background: white;
    color: var(--primary-color);
}
.designer-pill img {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
}
.d-info strong { display: block; }
.d-info small { font-size: 0.85rem; opacity: 0.8; }

/* 5. Final CTA */
.section-final-ultimate { padding: 5rem 0; background: white; }
.final-box-gradient {
    background: linear-gradient(135deg, #8e44ad, #c0392b);
    border-radius: 30px;
    padding: 5rem 2rem;
    text-align: center;
    color: white;
    box-shadow: 0 20px 50px rgba(142, 68, 173, 0.4);
}
.final-box-gradient h2 { font-size: 3rem; margin-bottom: 1rem; }
.final-box-gradient p { font-size: 1.3rem; margin-bottom: 2.5rem; opacity: 0.9; }

/* Mobil */
@media (max-width: 992px) {
    .hero-content-wrapper { grid-template-columns: 1fr; text-align: center; }
    .hero-visual-col { display: none; } /* Mobilde görseli kaldırabiliriz */
    .hero-cta-group { justify-content: center; }
    .hero-trust-badges { justify-content: center; }
    .hero-title { font-size: 2.5rem; }

    .steps-grid-ultimate { grid-template-columns: 1fr; }
}
/* ========================================================== */
/* === VİTRİN KARTLARI TAŞMA DÜZELTMESİ (FIX)             === */
/* ========================================================== */

/* Kartın kendisinin sabit bir minimum yüksekliği olsun */
.showcase-card {
    height: 100%; /* Eşit yükseklik için */
    min-height: 280px; /* İçerik az olsa bile kart tok dursun */
    display: flex;
    flex-direction: column;
}

.card-content {
    flex-grow: 1; /* İçeriği yay */
    display: flex;
    flex-direction: column;
}

/* Başlıkları 2 satırla sınırla */
.showcase-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* En fazla 2 satır göster */
    line-clamp: 2; /* Standart özelliği ekle (uyumluluk için) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.8em; /* 2 satır yüksekliğinde sabitle (kaymayı önler) */
    margin-bottom: 1rem;
}

/* Eğer kartlara <p> ile açıklama eklediyseniz, onu da 3 satırla sınırla */
.showcase-card p {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem;
}

/* Alt kısmı (Fiyat ve Kullanıcı) her zaman en alta it */
.card-footer {
    margin-top: auto; /* En alta yapıştır */
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}
/* ========================================================== */
/* === PROFİL SAYFASI - EXTREME MODERN (v11)              === */
/* ========================================================== */

.profile-page-wrapper {
    background-color: var(--light-gray);
    min-height: 100vh;
    padding-bottom: 4rem;
}

/* 1. Profil Başlığı (Header Card) */
.profile-header-card {
    background: white;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: relative;
}

/* Kapak Fotoğrafı */
.profile-cover {
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
}
/* Kapak üzerine hafif karartma */
.profile-cover::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4));
}

.profile-header-content {
    position: relative;
    padding-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    margin-top: -80px; /* Avatarı yukarı çek */
}

/* Avatar */
.profile-avatar-wrapper {
    flex-shrink: 0;
    position: relative;
}
.profile-avatar-wrapper img {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    object-fit: cover;
    background: white;
}

/* Detaylar Alanı */
.profile-details {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 10px; /* Hizalama */
}

.details-left h1 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
}
.text-primary { color: var(--accent-color); font-size: 1.2rem; }

.user-title {
    font-size: 1.1rem;
    color: #777;
    margin: 0.3rem 0 1rem 0;
}

.user-badges {
    display: flex;
    gap: 0.8rem;
}
.badge-gold {
    background: #fff9db;
    color: #f1c40f;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex; align-items: center; gap: 0.4rem;
}
.badge-gray {
    background: #f4f6f9;
    color: #666;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 0.4rem;
}

/* Butonlar */
.btn-profile-action {
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-profile-action.primary {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
}
.btn-profile-action.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 188, 156, 0.5);
}
.btn-profile-action.secondary {
    background: white;
    border: 2px solid #eee;
    color: var(--text-color);
}
.btn-profile-action.secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* 2. Grid Layout (Sidebar + Main) */
.profile-grid-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
}

/* Sidebar Kartları */
.sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 1.5rem;
    border: 1px solid #eee;
}
.sidebar-card h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    color: var(--primary-color);
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.8rem;
}
.bio-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Sosyal Medya */
.social-links-profile {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.social-links-profile a {
    width: 40px; height: 40px;
    background: #f4f6f9;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #777;
    text-decoration: none;
    transition: all 0.3s;
}
.social-links-profile a:hover {
    background: var(--accent-color);
    color: white;
}

/* Mini Yorumlar */
.mini-review-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f9f9f9;
}
.mini-review-item:last-child { margin-bottom: 0; border-bottom: none; }
.mini-review-item .stars { color: #f1c40f; font-size: 0.8rem; margin-bottom: 0.3rem; }
.mini-review-item p { font-size: 0.9rem; color: #333; font-style: italic; margin: 0; }
.mini-review-item small { color: #999; font-size: 0.8rem; display: block; margin-top: 0.3rem; text-align: right; }

/* 3. Main Content (Portfolyo) */
.content-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}
.section-head {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-head h2 { margin: 0; font-size: 1.5rem; color: var(--primary-color); }

/* Modern Portfolyo Izgarası */
.portfolio-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}
.portfolio-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.portfolio-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.portfolio-card:hover img {
    transform: scale(1.1);
}

/* Hover Overlay */
.portfolio-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}
.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}
.p-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
    padding: 0 1rem;
}
.p-zoom {
    font-size: 1.5rem;
    color: var(--accent-color);
}

/* Boş Durum */
.empty-profile-state {
    text-align: center;
    padding: 3rem;
    color: #999;
    background: #f9f9f9;
    border-radius: 12px;
}
.empty-profile-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

/* Mobil Uyum */
@media (max-width: 992px) {
    .profile-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -60px;
    }
    .profile-details {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }
    .user-badges { justify-content: center; }

    .profile-grid-layout {
        grid-template-columns: 1fr;
    }
}
/* ========================================================== */
/* === PROFİL DÜZENLEME - MODERN & ÖLÇÜLÜ (v13)           === */
/* ========================================================== */

.modern-settings-wrapper {
    background-color: #f8f9fa; /* Çok açık gri, göz yormayan zemin */
    min-height: 100vh;
    padding: 2rem 0 6rem 0; /* Alt boşluk sticky bar için */
    font-family: 'Poppins', sans-serif;
}

/* 1. Üst Bar ve Progress Widget */
.settings-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.st-text h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin: 0;
    font-weight: 700;
}
.st-text p {
    color: #666;
    margin: 0.2rem 0 0 0;
}

/* Feature 1: Progress Widget */
.completion-widget {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    min-width: 250px;
}
.completion-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}
.progress-track {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #3498db);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* 2. Grid Yapısı */
.settings-form-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Kartlar (Genel Stil) */
.card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.card h3 {
    font-size: 1.1rem;
    margin: 0;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #f5f5f5;
    color: var(--primary-color);
    background: #fcfcfc;
}
.card-header {
    border-bottom: 1px solid #f5f5f5;
}

/* Feature 2: Görsel Yükleme Alanları */
.cover-upload-zone {
    height: 160px;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s;
}
.zone-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}
.cover-upload-zone:hover .zone-overlay { opacity: 1; }
.zone-overlay i { font-size: 1.5rem; margin-bottom: 0.5rem; }

.avatar-upload-row {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: -50px; /* Cover'ın üzerine bindir */
    position: relative;
    z-index: 2;
}
.avatar-preview img {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    object-fit: cover;
    background: white;
}
.avatar-info {
    display: flex; flex-direction: column;
    gap: 0.3rem;
    margin-top: 35px; /* Hizalama düzeltmesi */
}
.avatar-info span { font-size: 0.75rem; color: #999; }
.btn-outline-sm {
    padding: 0.4rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: white;
}
.btn-outline-sm:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* Navigasyon Linkleri */
.nav-card { padding: 0.5rem; }
.nav-link {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1rem;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 0.95rem;
}
.nav-link:hover { background: #f4f6f9; color: var(--primary-color); }

/* Form Alanları */
.form-card { padding: 0; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
.form-group { padding: 1.5rem; border-bottom: 1px solid #f9f9f9; }
.form-row .form-group { padding: 0; border: none; }
.form-group:last-child { border-bottom: none; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fffefe;
    margin-bottom: 0.5rem;
}
.form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s;
    color: #333;
}
.form-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1);
    outline: none;
}

/* Feature 3: Karakter Sayacı */
.label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.char-count { font-size: 0.75rem; color: #999; }

/* Feature 4: Sosyal Medya Inputları (Markalı) */
.social-group {
    position: relative;
    display: flex;
    align-items: center;
}
.social-group i {
    position: absolute;
    left: 1.5rem; /* padding + icon offset */
    font-size: 1.2rem;
    color: #ccc;
    transition: color 0.3s;
}
.social-group input {
    padding-left: 3rem; /* İkon için boşluk */
}
/* Marka Renkleri */
.social-group.website:focus-within i { color: var(--primary-color); }
.social-group.dribbble:focus-within i { color: #ea4c89; }
.social-group.twitter:focus-within i { color: #1DA1F2; }
.social-group:focus-within input { border-color: currentColor; } /* Border rengi ikona uysun */

/* Feature 6: Sticky Action Bar */
.sticky-action-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1100px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 100;
    animation: slideUp 0.5s ease-out;
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.action-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.action-content span { font-size: 0.9rem; color: #ccc; }
.btn-save-primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-save-primary:hover {
    background: #16a085;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 188, 156, 0.4);
}

/* Bildirimler */
.notification-toast {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.notification-toast.success { background: #e6fffa; color: #2c7a7b; border: 1px solid #b2f5ea; }
.notification-toast.error { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; }

/* Mobil */
@media (max-width: 768px) {
    .settings-form-grid { grid-template-columns: 1fr; }
    .settings-top-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .form-row { grid-template-columns: 1fr; padding: 1rem; }
    .sticky-action-bar { width: 95%; bottom: 10px; border-radius: 12px; flex-direction: column; gap: 1rem; padding: 1rem; }
    .action-content { flex-direction: column; gap: 1rem; text-align: center; }
}
/* ========================================================== */
/* === EXTREME CHAT WIDGET (v1.0)                         === */
/* ========================================================== */

.chat-widget-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: 'Poppins', sans-serif;
}

/* Toggle Butonu (Yuvarlak) */
.chat-toggle-btn {
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(26, 188, 156, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.chat-toggle-btn:hover {
    transform: scale(1.1);
    background: var(--accent-hover);
}
.chat-toggle-btn.hidden {
    transform: scale(0);
    opacity: 0;
}

/* Bildirim Noktası */
.chat-notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #e74c3c;
    border: 2px solid white;
    border-radius: 50%;
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Chat Kutusu */
.chat-box {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 450px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
}
.chat-box.active {
    transform: scale(1);
    opacity: 1;
}

/* Header */
.chat-header {
    background: var(--primary-color);
    padding: 1.2rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.status-indicator {
    width: 10px; height: 10px;
    background: #2ecc71;
    border-radius: 50%;
    position: absolute;
    bottom: 2px; left: 32px;
    border: 2px solid var(--primary-color);
}
.admin-profile img {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    object-fit: cover;
}
.header-info h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.header-info span { font-size: 0.75rem; opacity: 0.8; }
.chat-close {
    background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.2rem; cursor: pointer; transition: 0.2s;
}
.chat-close:hover { color: white; }

/* Body */
.chat-body {
    flex: 1;
    padding: 1rem;
    background: #f4f6f9;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.message {
    max-width: 80%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    animation: fadeIn 0.3s ease;
}
.message.received {
    background: white;
    color: var(--text-color);
    border-bottom-left-radius: 2px;
    align-self: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.message.sent {
    background: var(--accent-color);
    color: white;
    border-bottom-right-radius: 2px;
    align-self: flex-end;
    box-shadow: 0 2px 5px rgba(26, 188, 156, 0.3);
}
.message .time {
    font-size: 0.65rem;
    display: block;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
}

/* Footer */
.chat-footer {
    padding: 1rem;
    background: white;
    border-top: 1px solid #eee;
}
.chat-footer form {
    display: flex;
    gap: 10px;
}
.chat-footer input {
    flex: 1;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    background: #f9f9f9;
    transition: 0.3s;
}
.chat-footer input:focus {
    border-color: var(--accent-color);
    background: white;
    outline: none;
}
.chat-footer button {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.chat-footer button:hover {
    background: var(--accent-color);
    transform: rotate(-15deg);
}

/* Mobil */
@media (max-width: 480px) {
    .chat-box {
        width: calc(100vw - 40px);
        bottom: 80px;
        right: -10px;
    }
}
/* ========================================================== */
/* === CHAT WIDGET - ADMIN UI EKLEMELERİ (v2)             === */
/* ========================================================== */

/* Chat İçerik Alanı Yapısı */
.chat-body-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f9;
    position: relative;
}

/* --- 1. KULLANICI LİSTESİ (ADMIN) --- */
.user-list-view {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.user-list-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}
.user-list-item:hover {
    background: #f0f8ff;
}
.user-list-item .user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #ddd;
}
.user-list-item .user-info {
    flex: 1;
    overflow: hidden;
}
.user-list-item .user-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: var(--primary-color);
}
.user-list-item .user-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-list-item .user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75rem;
    color: #aaa;
    min-width: 50px;
}
.user-list-item .badge {
    background: var(--danger-color);
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    margin-top: 4px;
    font-weight: 700;
}

/* --- 2. SOHBET EKRANI --- */
.chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.messages-area {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Geri Butonu (Header içi) */
.chat-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 1rem;
    margin-right: 10px;
    padding: 5px;
}
.chat-back-btn:hover { color: white; }
.header-left {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
}

/* Yükleniyor İkonu */
.loading-spinner {
    text-align: center;
    padding: 2rem;
    color: var(--accent-color);
    font-size: 1.5rem;
}
/* Bildirim Noktası */
.chat-notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #e74c3c;
    border: 2px solid white;
    border-radius: 50%;
    animation: pulse-red 2s infinite; /* Nabız Animasyonu */
}
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
/* ========================================================== */
/* === CHAT WIDGET - YAZIYOR ANİMASYONU (TYPING)          === */
/* ========================================================== */

.typing-indicator-bubble {
    background: #e9ecef; /* Hafif gri balon */
    padding: 10px 15px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    margin: 0 15px 10px 15px; /* Mesaj alanının içinde */
    width: fit-content;
    display: none; /* Varsayılan olarak gizli */
    align-items: center;
    gap: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #888;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
/* Mesaj Meta (Saat ve Tik) */
.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 2px;
}
.read-tick { color: #4fc3f7; font-size: 0.7rem; } /* Mavi Tik */
.sent-tick { color: #ccc; font-size: 0.7rem; }   /* Gri Tik */
.user-list-item .badge {
    background: var(--danger-color); color: white; padding: 2px 6px;
    border-radius: 10px; font-size: 11px; font-weight: 700;
}

/* ========================================================== */
/* === SUNUM MODALI - AI BEYAN KUTUSU STİLLERİ            === */
/* ========================================================== */

.ai-declaration-wrapper {
    background-color: #fff3cd; /* Açık sarı arka plan */
    border: 1px solid #ffeeba; /* Sarı çerçeve */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.ai-declaration-wrapper:hover {
    background-color: #ffecb5; /* Üzerine gelince koyulaşsın */
    border-color: #ffdf7e;
}

.ai-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none; /* Metin seçimini engelle */
}

.ai-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: #856404; /* Tik rengi */
    flex-shrink: 0;
}

.ai-text-content {
    font-size: 0.9rem;
    color: #856404; /* Koyu sarı metin */
    line-height: 1.5;
}

.ai-text-content strong {
    font-weight: 700;
    text-decoration: underline;
}

.ai-text-content small {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #d35400; /* Kırmızımsı uyarı */
    font-weight: 600;
}
/* ========================================================== */
/* === SOSYAL MEDYA GİRİŞ BUTONLARI (EXTREME STYLE)       === */
/* ========================================================== */

.social-login-wrapper {
    margin-top: 1.5rem;
    text-align: center;
}

.divider-text {
    display: flex;
    align-items: center;
    color: #777;
    font-size: 0.85rem;
    margin: 1.5rem 0;
}
.divider-text::before, .divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}
.divider-text span {
    padding: 0 10px;
}

.btn-google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0.8rem;
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-google-login:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #ccc;
}

.btn-google-login img {
    width: 20px;
    height: 20px;
}
/* ========================================================== */
/* === MODAL PENCERELERİ (COMPACT & MODERN v2)            === */
/* ========================================================== */

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    z-index: 9999; display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }

/* Ana Kutu */
.modal-content.modal-split {
    width: 900px; 
    max-width: 95%; 
    height: 550px; /* Sabit yükseklik vererek ekrana sığmasını garantiliyoruz */
    background: white; border-radius: 16px; display: flex;
    overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.active .modal-content.modal-split { transform: scale(1); }

/* Sol Taraf (Görsel) */
.modal-left {
    flex: 0 0 45%; /* Genişliği biraz artırdık */
    background-size: cover; background-position: center;
    padding: 3rem; color: white; display: flex; flex-direction: column;
    justify-content: center; position: relative;
}
.modal-left::before { 
    content: ''; position: absolute; inset: 0; 
    background: linear-gradient(to bottom right, rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.4)); 
}
.modal-left h3, .modal-left p { position: relative; z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.modal-left h3 { font-size: 2.2rem; line-height: 1.1; margin-bottom: 1rem; font-weight: 800; }
.modal-left p { font-size: 1rem; opacity: 0.95; line-height: 1.5; }

/* Sağ Taraf (Form) - Kompakt Yapı */
.modal-right { 
    flex: 1; 
    padding: 2rem; /* İç boşluğu azalttık */
    position: relative; 
    overflow-y: auto; /* Sadece gerekirse kaydır */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikey ortala */
}

/* Kapatma Butonu */
.modal-close {
    position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem;
    color: #ccc; background: none; border: none; cursor: pointer; z-index: 10; transition: 0.2s;
}
.modal-close:hover { color: var(--danger-color); transform: rotate(90deg); }

/* Başlıklar */
.modal-right .section-title { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0.2rem; text-align: left; font-weight: 800; }
.modal-subtitle { color: #777; margin-bottom: 1.5rem; text-align: left; font-size: 0.9rem; }

/* Form Elemanları (Kompakt) */
.modal-right .form-group { margin-bottom: 1rem; } /* Araları sıkılaştırdık */
.modal-right label { font-size: 0.8rem; margin-bottom: 0.3rem; color: #555; font-weight: 600; }

.modal-right .input-group { position: relative; display: flex; align-items: center; }
.modal-right .input-group i { position: absolute; left: 1rem; color: #aaa; font-size: 0.9rem; pointer-events: none; transition: 0.3s; }
.modal-right .input-group input { 
    padding: 0.7rem 1rem 0.7rem 2.5rem; /* Daha ince inputlar */
    background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px;
    font-size: 0.95rem; width: 100%; transition: 0.3s;
}
.modal-right .input-group input:focus { background: white; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1); }
.modal-right .input-group input:focus + i { color: var(--accent-color); }

/* Linkler */
.form-options { text-align: right; margin-bottom: 1.2rem; font-size: 0.85rem; margin-top: -0.5rem; }
.form-options a { color: #777; text-decoration: none; }
.form-options a:hover { color: var(--accent-color); text-decoration: underline; }

/* Ana Buton */
.btn-full-width { 
    width: 100%; background: var(--accent-color); color: white; padding: 0.8rem; 
    border-radius: 8px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s; font-size: 1rem;
}
.btn-full-width:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(26, 188, 156, 0.3); }

/* Google Butonu */
.social-login-wrapper { margin-top: 1rem; text-align: center; }
.divider-text { display: flex; align-items: center; color: #999; font-size: 0.75rem; margin: 1rem 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: #eee; }
.divider-text span { padding: 0 10px; }

.btn-google-login {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 0.6rem; background-color: #fff; color: #555; border: 1px solid #ddd;
    border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: 0.3s;
}
.btn-google-login:hover { background-color: #f1f1f1; border-color: #ccc; }
.btn-google-login img { width: 18px; height: 18px; }

/* Alt Link */
.modal-switch-link { text-align: center; margin-top: 1rem; font-size: 0.85rem; color: #666; }
.modal-switch-link a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .modal-content.modal-split { flex-direction: column; height: auto; max-height: 95vh; overflow-y: auto; width: 95%; }
    .modal-left { display: none; } /* Mobilde resmi gizle */
    .modal-right { padding: 2rem 1.5rem; }
}
/* ========================================================== */
/* === ULTIMATE COOKIE MANAGER (KVKK/GDPR)                === */
/* ========================================================== */

/* 1. Çerez Banner (Alt Bant) */
.cookie-consent-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(150%); /* Başlangıçta gizli (aşağıda) */
    width: 90%;
    max-width: 1100px;
    background: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    z-index: 10000; /* En üstte */
    border: 1px solid #e0e0e0;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cookie-consent-banner.show {
    transform: translateX(-50%) translateY(0);
}

.cookie-text-content {
    flex: 1;
}
.cookie-text-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cookie-text-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}
.cookie-text-content a {
    color: var(--accent-color);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Butonlar */
.btn-cookie-accept {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-cookie-accept:hover { background: #1a252f; }

.btn-cookie-settings {
    background: transparent;
    border: 1px solid #ccc;
    color: #555;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-cookie-settings:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* 2. Çerez Ayarları Modalı */
.cookie-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}
.cookie-modal-overlay.active { display: flex; }

.cookie-modal {
    background: white;
    width: 600px;
    max-width: 90%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUpFade 0.3s ease;
}
@keyframes slideUpFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.cookie-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
}
.cookie-modal-header h3 { margin: 0; font-size: 1.3rem; }
.btn-close-cookie { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; }

.cookie-modal-body {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.cookie-option {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cookie-option:last-child { border-bottom: none; }

.option-info h5 { margin: 0 0 0.3rem 0; font-size: 1rem; }
.option-info p { margin: 0; font-size: 0.85rem; color: #777; }

/* Toggle Switch (Anahtar) */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute; content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: var(--accent-color); }
input:disabled + .slider { background-color: #bcefd0; cursor: not-allowed; } /* Zorunlu ise açık yeşil */
input:checked + .slider:before { transform: translateX(24px); }

.cookie-modal-footer {
    padding: 1.2rem 1.5rem;
    border-top: 1px solid #eee;
    text-align: right;
    background: #fff;
}

/* Mobil */
@media (max-width: 768px) {
    .cookie-consent-banner {
        flex-direction: column;
        bottom: 0;
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 100%;
    }
    .cookie-actions { width: 100%; justify-content: center; }
    .btn-cookie-accept, .btn-cookie-settings { flex: 1; text-align: center; }
}
/* ========================================================== */
/* === PREMIUM CHAT WIDGET (PROFESSIONAL EDITION v3)      === */
/* ========================================================== */

/* Widget Konumu ve Z-Index */
.chat-widget-container {
    position: fixed; bottom: 30px; right: 30px; z-index: 10000;
    font-family: 'Poppins', sans-serif;
}

/* 1. Widget Ana Butonu (Launcher) */
.chat-toggle-btn {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--accent-color), #16a085);
    border-radius: 50%; border: none; color: white; font-size: 1.8rem;
    cursor: pointer; box-shadow: 0 8px 24px rgba(26, 188, 156, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.chat-toggle-btn:hover { transform: scale(1.05) rotate(-5deg); box-shadow: 0 12px 30px rgba(26, 188, 156, 0.6); }
.chat-toggle-btn.hidden { transform: scale(0) rotate(180deg); opacity: 0; pointer-events: none; }

/* Bildirim Noktası */
.chat-notification-dot {
    position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
    background: #ff4757; border: 2px solid white; border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); animation: pulse 2s infinite;
}
@keyframes pulse { 0% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);} 70% {transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 71, 87, 0);} 100% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);} }

/* Bildirim Baloncuğu (Tooltip) */
.chat-notification-label {
    position: absolute; right: 80px; bottom: 18px;
    background: white; color: #2f3542; padding: 12px 20px;
    border-radius: 12px; border-bottom-right-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); font-weight: 600; font-size: 0.9rem;
    white-space: nowrap; opacity: 0; transform: translateX(10px) scale(0.95);
    visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none; border: 1px solid rgba(0,0,0,0.05);
}
.chat-notification-label.show { opacity: 1; transform: translateX(0) scale(1); visibility: visible; pointer-events: auto; cursor: pointer; }

/* 2. Ana Sohbet Kutusu */
.chat-box {
    position: absolute; bottom: 80px; right: 0;
    width: 380px; height: 600px; max-height: 80vh;
    background: white; border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; overflow: hidden;
    transform-origin: bottom right; transform: scale(0.9) translateY(20px); opacity: 0;
    visibility: hidden; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(0,0,0,0.05);
}
.chat-box.active { transform: scale(1) translateY(0); opacity: 1; visibility: visible; }

/* Header Alanı */
.chat-header {
    background: linear-gradient(135deg, var(--primary-color), #34495e);
    padding: 1.5rem; color: white; display: flex; justify-content: space-between;
    align-items: center; flex-shrink: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.header-left { display: flex; align-items: center; gap: 12px; }
.admin-profile { display: flex; align-items: center; gap: 12px; position: relative; }
.admin-profile img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); object-fit: cover; }
.status-indicator {
    width: 12px; height: 12px; background: #2ecc71; border: 2px solid var(--primary-color);
    border-radius: 50%; position: absolute; bottom: 2px; left: 35px;
}
.header-info h4 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.5px; }
.header-info span { font-size: 0.8rem; opacity: 0.8; display: block; }

/* Header Butonları */
.chat-actions { display: flex; align-items: center; gap: 8px; }
.chat-action-btn {
    background: rgba(255,255,255,0.15); border: none; color: white;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-size: 1rem;
}
.chat-action-btn:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }
.chat-action-btn.static:hover { transform: none; background: rgba(255,255,255,0.3); }

/* 3. İçerik Alanı */
.chat-body-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f1f2f6; position: relative; }

/* Admin Kullanıcı Listesi */
.user-list-view { flex: 1; overflow-y: auto; padding: 0; background: white; }
.user-list-item {
    display: flex; align-items: center; padding: 1rem 1.2rem;
    border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: 0.2s;
}
.user-list-item:hover { background: #f9fbfd; }
.user-list-item .user-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.user-list-item .user-info h4 { margin: 0 0 4px 0; font-size: 1rem; color: var(--primary-color); }
.user-list-item .user-info p { margin: 0; font-size: 0.85rem; color: #7f8c8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.user-list-item .user-meta { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.user-list-item .user-meta span { font-size: 0.75rem; color: #aaa; margin-bottom: 4px; }
.user-list-item .badge { background: var(--danger-color); color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }

/* Sohbet Ekranı */
.messages-area {
    flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
    background-image: radial-gradient(#e1e4e8 1px, transparent 1px); background-size: 20px 20px; /* Hafif desen */
}
.message {
    max-width: 75%; padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5;
    position: relative; word-wrap: break-word; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.message.received {
    background: white; color: #2f3542; border-bottom-left-radius: 4px; align-self: flex-start;
}
.message.sent {
    background: var(--accent-color); color: white; border-bottom-right-radius: 4px; align-self: flex-end;
    box-shadow: 0 4px 10px rgba(26, 188, 156, 0.3);
}
.message .msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; opacity: 0.8; font-size: 0.7rem; }
.message .read-tick { color: #a29bfe; } /* Okundu rengi */
.message .sent-tick { color: rgba(255,255,255,0.7); }

/* Admin Badge */
.admin-sender-badge {
    display: block; font-size: 0.7rem; font-weight: 800; color: #e74c3c;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.message.received.is-admin-msg { border-left: 3px solid #e74c3c; }

/* 4. Yazıyor Animasyonu */
.typing-indicator-bubble {
    background: white; padding: 10px 15px; border-radius: 20px; border-bottom-left-radius: 4px;
    margin: 0 1.5rem 1rem; width: fit-content; display: none; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.typing-dot { width: 6px; height: 6px; background: #ccc; border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* 5. Footer (Input Alanı) */
.chat-footer {
    padding: 1rem; background: white; border-top: 1px solid #eee;
}
.chat-footer form {
    display: flex; align-items: center; gap: 10px; background: #f1f2f6;
    padding: 5px 5px 5px 15px; border-radius: 30px; border: 1px solid transparent;
    transition: all 0.3s;
}
.chat-footer form:focus-within { border-color: var(--accent-color); background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chat-footer input {
    flex: 1; border: none; background: transparent; outline: none; font-size: 0.95rem; color: #2f3542;
}
.chat-footer button {
    width: 42px; height: 42px; background: var(--accent-color); color: white; border: none;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-size: 1rem;
}
.chat-footer button:hover { background: var(--accent-hover); transform: scale(1.05); }
.chat-footer button:disabled { background: #ccc; cursor: not-allowed; transform: none; }

/* Hoşgeldin Mesajı */
.system-welcome { text-align: center; align-self: center; background: #e0f7fa !important; color: #006064 !important; border-radius: 12px !important; margin-top: 1rem; max-width: 90% !important; }

/* Mobil Uyum */
@media (max-width: 480px) {
    .chat-box { width: 100%; height: 100%; bottom: 0; right: 0; border-radius: 0; max-height: 100vh; }
    .chat-widget-container { bottom: 0; right: 0; width: 100%; height: 0; } /* Containerı gizle ama içeriği göster */
    .chat-toggle-btn { position: fixed; bottom: 20px; right: 20px; }
    .chat-notification-label { bottom: 90px; right: 20px; }
}
/* ====================================================== */
/* === ÇEREZ (COOKIE) YÖNETİMİ STİLLERİ               === */
/* ====================================================== */

/* 1. Alt Bant (Banner) */
.cookie-consent-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(150%); /* Başlangıçta gizli */
    width: 90%;
    max-width: 1100px;
    background: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    z-index: 10000;
    border: 1px solid #e0e0e0;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cookie-consent-banner.show {
    transform: translateX(-50%) translateY(0);
}

.cookie-text-content h4 { margin: 0 0 0.5rem 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--primary-color); }
.cookie-text-content p { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.5; }
.cookie-text-content a { color: var(--accent-color); text-decoration: underline; }

.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

.btn-cookie-accept {
    background: var(--primary-color); color: white; border: none;
    padding: 0.8rem 1.5rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.btn-cookie-accept:hover { background: #1a252f; transform: translateY(-2px); }

.btn-cookie-settings {
    background: transparent; border: 1px solid #ccc; color: #555;
    padding: 0.8rem 1.5rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.btn-cookie-settings:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* 2. Ayar Modalı */
.cookie-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 10001;
    display: none; justify-content: center; align-items: center; backdrop-filter: blur(3px);
}
.cookie-modal-overlay.active { display: flex; }

.cookie-modal {
    background: white; width: 600px; max-width: 90%; border-radius: 16px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: fadeIn 0.3s ease;
}
.cookie-modal-header {
    padding: 1.5rem; border-bottom: 1px solid #eee; display: flex;
    justify-content: space-between; align-items: center; background: #f9f9f9;
}
.cookie-modal-header h3 { margin: 0; font-size: 1.3rem; color: var(--primary-color); }
.btn-close-cookie { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; }
.btn-close-cookie:hover { color: var(--danger-color); }

.cookie-modal-body { padding: 0; max-height: 60vh; overflow-y: auto; }

.cookie-option {
    padding: 1.2rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
}
.option-info h5 { margin: 0 0 0.3rem 0; font-size: 1rem; }
.option-info p { margin: 0; font-size: 0.85rem; color: #777; }

/* Toggle Switch */
.cookie-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--accent-color); }
input:disabled + .slider { background-color: #bcefd0; cursor: not-allowed; }
input:checked + .slider:before { transform: translateX(24px); }

.cookie-modal-footer { padding: 1.2rem 1.5rem; border-top: 1px solid #eee; text-align: right; background: #fff; }

@media (max-width: 768px) {
    .cookie-consent-banner { flex-direction: column; bottom: 0; border-radius: 16px 16px 0 0; width: 100%; max-width: 100%; padding: 1.5rem; }
    .cookie-actions { width: 100%; justify-content: center; }
    .btn-cookie-accept, .btn-cookie-settings { flex: 1; text-align: center; }
}
.cookie-consent-banner {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: white; padding: 15px 25px; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: none;
    align-items: center; gap: 20px; z-index: 9999; border: 1px solid #eee;
}
.cookie-consent-banner.show { display: flex; }
/* ========================================================== */
/* === MODERN BUTON SETİ (PROJECT DETAIL) - İKİZ GÖRÜNÜM  === */
/* ========================================================== */

/* Her iki butonu da aynı özelliklerle tanımlıyoruz */
.btn-edit-modern,
.btn-poll-modern {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    
    /* ORTAK RENK: Sitenin ana kırmızı rengi */
    background-color: var(--accent-color); 
    color: #ffffff;
    border: 2px solid var(--accent-color);
    
    /* Yapısal Ayarlar */
    padding: 0.5rem 1.2rem 0.5rem 0.5rem; /* Sol taraf ikon için dar */
    border-radius: 50px; /* Tam yuvarlak kapsül */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 50px; /* Yükseklikler eşit */
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1;
    
    /* Ortak Gölge ve Geçiş */
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.3); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Yan yana geldiklerinde boşluk olsun */
    margin-right: 15px; 
}

/* İkon Yuvarlağı (Ortak Stil) */
.btn-edit-modern .icon-circle,
.btn-poll-modern .poll-icon {
    width: 34px;
    height: 34px;
    /* Yarı saydam beyaz daire */
    background-color: rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #ffffff;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Hover (Üzerine Gelince) - İkisi için de aynı efekt */
.btn-edit-modern:hover,
.btn-poll-modern:hover {
    background-color: var(--accent-hover); /* Daha koyu kırmızıya dön */
    border-color: var(--accent-hover);
    transform: translateY(-3px); /* Hafif yukarı kalk */
    box-shadow: 0 8px 20px rgba(185, 28, 28, 0.5); /* Gölgeyi büyüt */
}

/* Hover'da İkon Efekti */
.btn-edit-modern:hover .icon-circle,
.btn-poll-modern:hover .poll-icon {
    background-color: #ffffff; /* Daire beyaz olsun */
    color: var(--accent-color); /* İkon kırmızı olsun */
    transform: rotate(-10deg); /* Hafif dönsün */
}

/* Tıklama (Active) Efekti */
.btn-edit-modern:active,
.btn-poll-modern:active {
    transform: translateY(-1px);
    box-shadow: none;
}