/* =====================================================
   TÜM DÜZELTMELERİ İÇEREN NİHAİ CSS DOSYASI
===================================================== */

:root {
    /* Genel Boyutlar ve Gölgeler */
    --sidebar-width-desktop-open: 240px;
    --sidebar-width-desktop-collapsed: 70px;
    --top-navbar-height: 60px;
    --footer-height: 45px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --transition-normal: 0.25s ease-in-out;

    /* Açık Tema Renkleri */
    --body-bg: #f4f4f8;
    --card-bg: #ffffff;
    --modal-bg: #ffffff;
    --task-item-bg: #ffffff;
    --task-item-hover-bg: #f8f8f8;
    --text-color: #1d1d1f;
    --text-color-secondary: #007AFF;
    --text-color-light: #6e6e73;
    --border-color: #e5e5e5;
    --control-bg: #f0f0f0;
    --control-border: #dcdcdc;

    /* Buton Renkleri (Açık Tema) */
    --button-primary-bg: #007AFF;
    --button-secondary-bg: #e5e5ea;
    --button-secondary-text: #000;
    --button-danger-bg: #dc3545;
    --button-success-bg: #28a745;

    /* Sidebar & Topnav Renkleri (Açık Tema) */
    --sidebar-bg: #ffffff;
    --sidebar-text-color: #3c3c43;
    --sidebar-active-link-bg: rgba(0, 122, 255, 0.1);
    --sidebar-active-link-color: var(--button-primary-bg);
    --sidebar-hover-link-bg: #f2f2f7;
    --top-navbar-bg: #ffffff;
    --top-navbar-text-color: #1d1d1f;
    --top-navbar-border-color: var(--border-color);

    /* Etiket Renkleri (Açık Tema) */
    --priority-high-bg: rgba(220, 53, 69, 0.15);
    --priority-high-text: #b02a37;
    --priority-medium-bg: rgba(255, 193, 7, 0.2);
    --priority-medium-text: #b38600;
    --priority-low-bg: rgba(40, 167, 69, 0.15);
    --priority-low-text: #1d7a34;
    --status-new-task-bg: rgba(13, 110, 253, 0.15);
    --status-new-task-text: #0b5ed7;
    --status-in-progress-bg: rgba(88, 86, 214, 0.2);
    --status-in-progress-text: #5856D6;
    --status-blocked-bg: var(--priority-high-bg);
    --status-blocked-text: var(--priority-high-text);
}

.dark-theme {
    /* Koyu Tema Renkleri */
    --body-bg: #101010;
    --card-bg: #1C1C1E;
    --modal-bg: #1C1C1E;
    --task-item-bg: #2C2C2E;
    --task-item-hover-bg: #3A3A3C;
    --text-color: #F2F2F7;
    --text-color-secondary: #5E5CE6;
    --text-color-light: #8E8E93;
    --border-color: #3A3A3C;
    --control-bg: #2C2C2E;
    --control-border: #48484A;

    /* Buton Renkleri (Koyu Tema) */
    --button-primary-bg: var(--text-color-secondary);
    --button-secondary-bg: #3A3A3C;
    --button-secondary-text: #fff;
    --button-danger-bg: #FF453A;
    --button-success-bg: #32D74B;

    /* Sidebar & Topnav Renkleri (Koyu Tema) */
    --sidebar-bg: #1C1C1E;
    --sidebar-text-color: #F2F2F7;
    --sidebar-active-link-bg: rgba(94, 92, 230, 0.2);
    --sidebar-active-link-color: var(--text-color-secondary);
    --sidebar-hover-link-bg: #2C2C2E;
    --top-navbar-bg: #1C1C1E;
    --top-navbar-text-color: #F2F2F7;
    --top-navbar-border-color: #3A3A3C;
    
    /* Etiket Renkleri (Koyu Tema) */
    --priority-high-bg: rgba(255, 69, 58, 0.2);
    --priority-high-text: #FF453A;
    --priority-medium-bg: rgba(255, 159, 10, 0.2);
    --priority-medium-text: #FF9F0A;
    --priority-low-bg: rgba(50, 215, 75, 0.2);
    --priority-low-text: #32D74B;
    --status-new-task-bg: rgba(10, 132, 255, 0.2);
    --status-new-task-text: #40a9ff;
    --status-in-progress-bg: rgba(94, 92, 230, 0.25);
    --status-in-progress-text: #9a99f0;
}

/* Genel Sayfa Yapısı ve Temel Elementler */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
    overflow-x: hidden; /* YATAY KAYDIRMA ÇUBUĞUNU ENGELLER */
}

.app-wrapper { display: flex; }
.content-wrapper {
    flex-grow: 1;
    margin-left: var(--sidebar-width-desktop-open);
    transition: margin-left var(--transition-normal);
    min-height: 100vh;
}
.main-content {
    padding: 25px;
    padding-top: calc(var(--top-navbar-height) + 25px);
    padding-bottom: calc(var(--footer-height) + 25px);
}
.page-content { display: none; }
.page-content.active-page { display: block; }
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width-desktop-open);
    background-color: var(--sidebar-bg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width var(--transition-normal), transform var(--transition-normal);
    z-index: 1020;
    border-right: 1px solid var(--border-color);
}
.sidebar-header { padding: 20px 0; }
.logo-image { display: block; margin: 0 auto; max-width: 120px; transition: max-width var(--transition-normal); }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-text-color);
    cursor: pointer;
    margin-bottom: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-nav .nav-item:hover { background-color: var(--sidebar-hover-link-bg); }
.sidebar-nav .nav-item.active-page-link {
    background-color: var(--sidebar-active-link-bg);
    color: var(--sidebar-active-link-color);
    font-weight: 600;
}
.sidebar-nav .nav-item i { font-size: 16px; margin-right: 15px; width: 20px; text-align: center; }

/* Top Navbar */
.top-navbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width-desktop-open);
    width: calc(100% - var(--sidebar-width-desktop-open));
    height: var(--top-navbar-height);
    background-color: var(--top-navbar-bg);
    border-bottom: 1px solid var(--top-navbar-border-color);
    display: flex;
    align-items: center;
    padding: 0 25px;
    z-index: 1010;
    transition: left var(--transition-normal), width var(--transition-normal);
}
.top-navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.top-navbar-left-section, .top-navbar-right-section { display: flex; align-items: center; gap: 15px; }
.hamburger-menu-btn { display: none; background: none; border: none; font-size: 1.2em; color: var(--text-color); cursor: pointer; padding: 5px; }

/* Footer */
.project-stats-footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width-desktop-open);
    width: calc(100% - var(--sidebar-width-desktop-open));
    height: var(--footer-height);
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    z-index: 1005;
    transition: left var(--transition-normal), width var(--transition-normal);
}
.footer-stat { display: flex; align-items: center; gap: 8px; color: var(--text-color-light); font-size: 13px; }
.footer-stat p { margin: 0; }
.footer-stat span { font-weight: 600; color: var(--text-color); }
.footer-stat i { color: var(--text-color-secondary); }

/* --- MOBİL & KAPALI SIDEBAR DAVRANIŞLARI --- */

/* Mobil (Ekran 992px'den dar olduğunda) */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }
    .sidebar.sidebar-mobile-open {
        transform: translateX(0);
    }
    .content-wrapper, .top-navbar, .project-stats-footer {
        margin-left: 0;
        left: 0;
        width: 100%;
    }
    .hamburger-menu-btn {
        display: inline-flex;
    }
    .mobile-nav-overlay.active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1019;
    }
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

/* Masaüstü - Sidebar Kapalıyken (Ekran Genişliğinden Bağımsız) */
.app-wrapper.sidebar-desktop-collapsed .sidebar {
    width: var(--sidebar-width-desktop-collapsed);
}
.app-wrapper.sidebar-desktop-collapsed .content-wrapper,
.app-wrapper.sidebar-desktop-collapsed .top-navbar,
.app-wrapper.sidebar-desktop-collapsed .project-stats-footer {
    width: calc(100% - var(--sidebar-width-desktop-collapsed));
    left: var(--sidebar-width-desktop-collapsed);
}
.app-wrapper.sidebar-desktop-collapsed .sidebar .logo-image {
    max-width: 40px;
}
.app-wrapper.sidebar-desktop-collapsed .sidebar .nav-item span {
    display: none;
}
.app-wrapper.sidebar-desktop-collapsed .sidebar-nav .nav-item {
    justify-content: center;
}
.app-wrapper.sidebar-desktop-collapsed .sidebar-nav .nav-item i {
    margin-right: 0;
}

/* Görevler Sayfası ve Gantt Şeması için Kaydırma Çubuğu düzeltmesi */
.task-list-container, .d3-gantt-chart-container.card {
    overflow: auto; /* Dikey ve yatay taşmalarda scrollbar göster */
}
.d3-gantt-chart-container.card {
    max-height: calc(100vh - var(--top-navbar-height) - var(--footer-height) - 150px);
}
/* =====================================================
   ANALİZ SAYFASI DÜZELTMELERİ
===================================================== */

.analytics-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.stat-card h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: var(--text-color-light);
    font-weight: 500;
}

.stat-card p {
    margin: 0;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--text-color-secondary);
}

.stat-card i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3em;
    color: var(--body-bg);
    opacity: 0.5;
}

.dark-theme .stat-card i {
    color: var(--container-bg);
}

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.chart-container {
    height: 400px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Analiz sayfasının mobil uyumluluğu için */
@media (max-width: 992px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}
/* Analizler Sayfası */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.chart-container {
    height: 400px;
    padding: 20px;
}

/* ... Diğer stiller buraya gelecek ... */
/* Örnek olarak .btn, .modal vb. stiller yukarıdaki gibidir. */
/* Bu dosya, projenizdeki tüm stilleri içermelidir. */
/* Eksik kısımları orijinal dosyanızdan tamamlayabilirsiniz. */
/* Burada sadece en kritik düzenlemeler yapılmıştır. */

/* DEĞİŞİKLİK: Grafik konteynerine sabit bir yükseklik verildi. */
.chart-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 380px; /* Sabit yükseklik */
}

.sidebar {
    width: var(--sidebar-width-desktop-open); 
    background-color: var(--sidebar-bg); 
    color: var(--sidebar-text-color);
    padding: 10px; display: flex; flex-direction: column; justify-content: space-between; 
    box-shadow: var(--shadow-md);
    transition: width var(--transition-normal), transform var(--transition-normal); 
    flex-shrink: 0; z-index: 1020;
    position: fixed; left: 0; top: 0; height: 100vh; 
    overflow-y: auto; overflow-x: hidden;
}
.sidebar-header { margin-bottom: 30px; text-align: center; }
.logo-image { max-width: 100px; transition: max-width var(--transition-normal); }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sidebar-nav .nav-item {
    display: flex; align-items: center; padding: 10px 15px; 
    text-decoration: none; border-radius: 6px;
    transition: all 0.15s ease; cursor: pointer; 
    font-size: 14px; font-weight: 500; 
    color: var(--sidebar-text-color);
}
.dark-theme .sidebar-nav .nav-item { color: var(--text-color); }
.sidebar-nav .nav-item:hover { background-color: var(--sidebar-hover-link-bg); }
.sidebar-nav .nav-item.active-page-link { 
    background-color: var(--sidebar-active-link-bg); 
    color: var(--sidebar-active-link-color); 
    font-weight: 600; 
}
.dark-theme .sidebar-nav .nav-item.active-page-link { color: var(--sidebar-active-link-color); }
.sidebar-nav .nav-item i { font-size: 16px; margin-right: 12px; width: 20px; text-align: center; }
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07); 
    padding-top: 15px; font-size: 11px;
    opacity: 0.7; text-align: center;
    transition: opacity var(--transition-normal);
}
.dark-theme .sidebar-footer { border-top-color: var(--border-color); }
.top-navbar {
    height: var(--top-navbar-height);
    background-color: #1d1d1f;
    border-bottom: 1px solid var(--top-navbar-border-color);
    z-index: 1010; color: var(--top-navbar-text-color);
    padding: 0 25px; display: flex; align-items: center;
    position: fixed; top: 0;
    left: var(--sidebar-width-desktop-open);
    width: calc(100% - var(--sidebar-width-desktop-open));
    transition: left var(--transition-normal), width var(--transition-normal);
}
.top-navbar-container {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 100%;
}
.top-navbar-left-section, .top-navbar-right-section { display: flex; align-items: center; gap: 15px; }
.top-navbar-left-section { min-width: 0; }
.top-navbar-right-section { flex-shrink: 0; }
.project-stats-footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width-desktop-open);
    width: calc(100% - var(--sidebar-width-desktop-open));
    height: var(--footer-height);
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    z-index: 1005;
    transition: left var(--transition-normal), width var(--transition-normal);
}
.footer-stat { display: flex; align-items: center; gap: 8px; color: var(--text-color-light); }
.footer-stat p { margin: 0; }
.footer-stat span { color: var(--text-color); font-weight: 600; }
.footer-stat i { color: var(--text-color-secondary); font-size: 16px; }
.btn {
    padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer;
    font-size: 13px; display: inline-flex; align-items: center;
    justify-content: center; transition: all 0.2s ease;
    white-space: nowrap; font-weight: 500; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background-color: var(--button-primary-bg); color: #fff; }
.btn-primary:hover { background-color: var(--button-primary-hover-bg); }
.btn-secondary { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); }
.btn-secondary:hover { background-color: var(--button-secondary-hover-bg); }
.btn-danger { background-color: var(--button-danger-bg); color: #fff; }
.btn-danger:hover { background-color: var(--button-danger-hover-bg); }
.btn-success { background-color: var(--button-success-bg); color: #fff; }
.btn-success:hover { background-color: var(--button-success-hover-bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon {
    background: none; border: none; cursor: pointer; color: var(--text-color-light);
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background-color: var(--control-bg); color: var(--text-color-secondary); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--label-color); font-weight: 500; font-size: 14px; }
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="search"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--control-border);
    border-radius: 6px; background: var(--control-bg); color: var(--text-color);
    transition: all 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--button-primary-bg); 
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.2);
}
.modal {
    display: none; position: fixed; z-index: 1050; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto; background-color: var(--overlay-bg);
    justify-content: center; align-items: center;
}
.modal-content {
    background-color: var(--modal-bg); margin: auto; padding: 25px;
    border-radius: 8px; width: 90%; max-width: 800px; box-shadow: var(--shadow-lg);
    position: relative; max-height: 90vh; display: flex; flex-direction: column;
}
.modal-content h2 { margin-top: 0; }
.modal-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal .close-button {
    position: absolute; top: 15px; right: 15px; width: 30px; height: 30px;
    border-radius: 50%; background-color: var(--body-bg); border: 1px solid var(--border-color);
    color: var(--text-color-light); font-size: 16px; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}
.modal .close-button:hover { background-color: var(--button-danger-bg); color: white; transform: rotate(90deg); }
.task-list-tabs { display: flex; margin-bottom: 15px; border-bottom: 2px solid var(--border-color); }
.tab-button {
    padding: 10px 18px; font-size: 1em; font-weight: 500; color: var(--text-color-light);
    background-color: transparent; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: all 0.2s ease; margin-bottom: -2px;
}
.tab-button.active { color: var(--button-primary-bg); border-bottom-color: var(--button-primary-bg); font-weight: 600; }
.task-list-content { display: none; }
.task-list-content.active { display: block; }
.task-list-content {
    max-height: calc(100vh - var(--top-navbar-height) - var(--footer-height) - 270px);
    overflow-y: auto;
    padding-right: 5px;
}
.task-list { min-height: 100px; display: flex; flex-direction: column; gap: 10px; }
.task-item {
    background-color: var(--task-item-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease;
    font-size: 0.9em;
}
.task-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background-color: var(--task-item-hover-bg);
}
.task-item.completed { opacity: 0.75; background-color: var(--status-completed-bg); }
.task-item.completed .task-title { text-decoration: line-through; color: var(--text-color-light); }
.task-item-main-line { display: flex; align-items: center; gap: 8px; padding: 5px 12px; width: 100%; }
.task-sequence-number { color: var(--text-color-light); font-weight: 500; font-size: 0.9em; }
.task-title {
    flex-grow: 1; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-weight: 500; cursor: pointer;
    font-size: 14.5px;
}
.task-title:hover { color: var(--text-color-secondary); }
.task-details-group { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.task-badges { display: flex; align-items: center; gap: 6px; }
.task-metadata { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-color-light); }
.task-metadata span { display: inline-flex; align-items: center; gap: 4px; }
.task-responsible-display img {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--border-color);
}
.task-line-actions { display: flex; gap: 4px; }
.controls-panel {
    background-color: var(--card-bg); padding: 15px 20px; border-radius: 8px;
    box-shadow: var(--shadow-sm); margin-bottom: 25px; font-size: 13px;
}
.filter-sort-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; }
.control-group { display: flex; flex-direction: column; gap: 0.4rem; }
.control-group label { font-size: 12px; font-weight: 500; color: var(--label-color); margin-left: 3px; }

.badge {
    padding: 3px 8px; border-radius: 12px; font-size: 11px;
    font-weight: 500; white-space: nowrap; border: 1px solid transparent;
}
.badge.priority-low { background-color: var(--priority-low-bg); color: var(--priority-low-text); }
.badge.priority-medium { background-color: var(--priority-medium-bg); color: var(--priority-medium-text); }
.badge.priority-high { background-color: var(--priority-high-bg); color: var(--priority-high-text); }
.badge.task-type-badge { background-color: var(--control-bg); color: var(--text-color-light); border-color: var(--border-color); }
.badge.status-new-task { background-color: var(--status-new-task-bg); color: var(--status-new-task-text); }
.badge.status-in-progress { background-color: var(--status-in-progress-bg); color: var(--status-in-progress-text); }
.badge.status-blocked { background-color: var(--status-blocked-bg); color: var(--status-blocked-text); }
.badge.status-scheduled { background-color: var(--status-scheduled-bg); color: var(--status-scheduled-text); }
.calendar-container.card { padding: 20px; box-shadow: var(--shadow-md); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.calendar-header h2 { margin: 0; font-size: 1.5em; color: var(--text-color-secondary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--border-color); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.calendar-day, .day-name { background-color: var(--card-bg); padding: 8px; }
.day-name { text-align: center; font-weight: 600; font-size: 0.9em; padding: 10px 5px; background-color: var(--control-bg); color: var(--text-color-light); }
.calendar-day { min-height: 120px; display: flex; flex-direction: column; gap: 4px; transition: background-color 0.2s ease; }
.calendar-day:not(.empty):hover { background-color: var(--task-item-hover-bg); }
.day-number { font-weight: 500; font-size: 0.85em; margin-bottom: 5px; color: var(--text-color); }
.calendar-day.today { background-color: var(--control-bg); border: 1px solid var(--text-color-secondary); border-radius: 3px; }
.calendar-day.today .day-number { color: var(--text-color-secondary); font-weight: 700; }
.tasks-in-day { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.calendar-task-item { background-color: var(--button-primary-bg); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease; border-left: 3px solid transparent; }
.calendar-task-item:hover { opacity: 0.85; transform: scale(1.02); }
.inline-add-task-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    align-items: center;
    margin-bottom: 15px; /* EKLENEN SATIR */
}.inline-add-task-form input, .inline-add-task-form select {
    padding: 8px 10px;
    border-radius: 5px;
    background-color: var(--task-item-bg);
    font-size: 13px;
    height: 38px;
    color: var(--text-color); /* EKLENEN SATIR */
    border: 1px solid var(--control-border); /* EKLENEN SATIR */
}
.inline-add-task-form .btn { width: 38px; height: 38px; flex-shrink: 0; }
.task-expand-icon { color: var(--text-color-light); transition: transform 0.2s ease-in-out; font-size: 0.9em; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; border-radius: 4px; }
.task-expand-icon:not(.no-subtasks):hover { background-color: var(--control-bg); color: var(--text-color-secondary); }
.task-expand-icon.no-subtasks { visibility: hidden; cursor: default; }
.task-item.expanded .task-expand-icon { transform: rotate(90deg); }
.sub-task-list-container { padding-left: 25px; background-color: transparent;; max-height: 0; overflow: hidden; transition: max-height 0.35s ease-in-out; }
.dark-theme .sub-task-list-container { background-color: transparent; }
.task-item.expanded .sub-task-list-container { max-height: 500px; padding-top: 10px; padding-bottom: 15px; border-top: 1px solid var(--border-color); }
.sub-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.subtask-indent { width: 20px; flex-shrink: 0; }
#toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 350px; }
.toast { color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 15px; opacity: 0; transform: translateX(120%); transition: opacity 0.3s ease-in-out, transform 0.4s ease-in-out; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast i { font-size: 1.3em; }
.toast p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.toast.toast-info { background-color: #17a2b8; }
.toast.toast-success { background-color: var(--button-success-bg, #28a745); }
.toast.toast-warning { background-color: #ffc107; color: #1d1d1f; }
.toast.toast-error { background-color: var(--button-danger-bg, #dc3545); }
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); z-index: 1100; }
    .sidebar.sidebar-mobile-open { transform: translateX(0); }
    .content-wrapper, .project-stats-footer { margin-left: 0; width: 100%; }
    .top-navbar { left: 0; width: 100%; }
    .hamburger-menu-btn { display: inline-flex; }
    .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); z-index: 1099; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .mobile-nav-overlay.active { opacity: 1; visibility: visible; }
}
@media (max-width: 768px) {
    .modal-form-columns { grid-template-columns: 1fr; }
    .main-content { padding: 15px; padding-top: calc(var(--top-navbar-height) + 15px); padding-bottom: calc(var(--footer-height) + 15px); }
    .project-stats-footer { flex-wrap: wrap; height: auto; justify-content: space-around; }
    .calendar-header h2 { font-size: 1.2em; }
    .calendar-header .btn { padding: 5px 10px; }
    .calendar-grid { display: block; border: none; background-color: transparent; }
    .day-name { display: none; }
    .calendar-day { display: flex; align-items: flex-start; min-height: auto; padding: 12px 10px; border-bottom: 1px solid var(--border-color); gap: 15px; }
    .calendar-day.empty { display: none; }
    .day-number { font-size: 1.1em; font-weight: 600; color: var(--text-color-secondary); width: 35px; text-align: center; flex-shrink: 0; }
    .tasks-in-day { display: flex; flex-wrap: wrap; gap: 6px; flex-grow: 1; }
}
@media (max-width: 480px) {
    .footer-stat p { display: none; }
}
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-color-light); }
.dark-theme ::-webkit-scrollbar-thumb { background-color: #555558; }
.dark-theme ::-webkit-scrollbar-thumb:hover { background-color: #6E6E73; }
#top-nav-project-title-container.edit-mode-active #projectTitle { display: none; }
#top-nav-project-title-container:not(.edit-mode-active) #titleEditContainer { display: none; }
.top-navbar-profile-menu { position: relative; }
.profile-dropdown-panel {
    display: block; position: absolute; right: 0;
    top: calc(100% + 8px); background-color: var(--modal-bg);
    border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: var(--shadow-lg); width: 180px; z-index: 1100; padding: 6px;
    opacity: 0; transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.profile-dropdown-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.top-nav-link-dropdown {
    display: flex; align-items: center; padding: 10px 14px;
    color: var(--text-color); text-decoration: none;
    font-size: 14px; border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.top-nav-link-dropdown:hover { background-color: var(--control-bg); color: var(--text-color-secondary); }
.dark-theme .top-nav-link-dropdown:hover { background-color: var(--sidebar-hover-link-bg); }
.top-nav-link-dropdown i { margin-right: 10px; width: 16px; text-align: center; }
.profile-menu-button {
    background: none; border: none; padding: 0; cursor: pointer;
    border-radius: 50%; outline: none; display: flex;
    align-items: center; justify-content: center;
}
.profile-image {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--border-color);
    transition: border-color 0.2s ease;
}
.profile-menu-button:hover .profile-image,
.profile-menu-button:focus .profile-image {
    border-color: var(--text-color-secondary);
}

/* =====================================================
   GENEL DROPDOWN (SELECT) STİLİ
===================================================== */

select.form-control {
    /* Temel Görünüm */
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--control-border);
    background-color: var(--control-bg);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    /* Varsayılan oku kaldır */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Özel Ok İkonu */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Odaklanma Efekti */
select.form-control:focus {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* Koyu Tema Ayarları */
.dark-theme select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dark-theme select.form-control:focus {
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.3);
}

/* =====================================================
   12. PROJE DOSYALARI TABLOSU STİLLERİ
===================================================== */

/* Kartın içeriği taşıyorsa yatayda kaydırma çubuğu göster */
.card {
    overflow-x: auto;
}

#projectFilesPage .table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0; /* Kartın padding'i zaten boşluk bırakıyor */
    font-size: 14px;
    color: var(--text-color);
    /* Tablonun minimum genişliği, dar ekranlarda kaydırma çubuğunun çıkmasını sağlar */
    min-width: 600px; 
}

#projectFilesPage .table th,
#projectFilesPage .table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap; /* Hücre içeriğinin alt satıra kaymasını engelle */
}

#projectFilesPage .table thead th {
    background-color: var(--control-bg);
    color: var(--text-color-light);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#projectFilesPage .table tbody tr {
    transition: background-color 0.2s ease;
}

#projectFilesPage .table tbody tr:hover {
    background-color: var(--task-item-hover-bg);
}

#projectFilesPage .table td .task-link {
    color: var(--text-color-secondary);
    text-decoration: none;
    font-weight: 500;
}

#projectFilesPage .table td .task-link:hover {
    text-decoration: underline;
}

#projectFilesPage .table .delete-file-btn {
    color: var(--text-color-light);
}

#projectFilesPage .table .delete-file-btn:hover {
    color: var(--button-danger-bg);
    background-color: transparent;
}
/* =====================================================
   13. SAYFA BAŞLIĞI (MAIN-HEADER) STİLLERİ
===================================================== */

.main-header {
    display: flex;
    justify-content: space-between; /* Sol (başlık) ve sağ (buton) tarafı ayırır */
    align-items: center;           /* Dikeyde ortalar */
    flex-wrap: wrap;               /* Küçük ekranlarda alt satıra kaydırır */
    gap: 15px;                     /* Elemanlar arası boşluk */
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.main-header .header-section h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
    color: var(--text-color);
}

.main-header .header-section p {
    margin: 5px 0 0 0;
    color: var(--text-color-light);
}

.main-header .header-actions {
    flex-shrink: 0; /* Butonların daralmasını ve bozulmasını engeller */
}
/* =====================================================
   14. GELİŞMİŞ AYARLAR SAYFASI TASARIMI
===================================================== */

/* Ayarlar sayfasının genel konteyneri */
/* style.css dosyanıza ekleyebilirsiniz */
.settings-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobil için varsayılan tek sütun */
    gap: 30px;
}

@media (min-width: 992px) {
    .settings-container {
        grid-template-columns: 1fr 1fr; /* Geniş ekranlarda iki sütun */
    }
}

/* Her bir ayar bölümü için kart yapısı */
.settings-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* Kenarlıkların düzgün görünmesi için */
}

.settings-section-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--control-bg);
}

.settings-section-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-section-body {
    padding: 20px;
}

/* Sorumlular listesi stilleri */
.responsible-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.responsible-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 6px;
    background-color: var(--body-bg);
    transition: background-color 0.2s ease;
}

.responsible-item:hover {
    background-color: var(--task-item-hover-bg);
}

.responsible-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.responsible-item span {
    flex-grow: 1; /* İsmin kalan boşluğu doldurmasını sağlar */
    font-weight: 500;
}

.responsible-item .remove-option-btn {
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.responsible-item .remove-option-btn:hover {
    color: var(--button-danger-bg);
    background-color: rgba(var(--button-danger-bg), 0.1);
}

/* Sorumlu ekleme formu stilleri */
.add-responsible-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed var(--border-color);
}

.add-responsible-form .form-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.add-responsible-form .form-row input[type="text"] {
    flex-grow: 1;
}

.avatar-preview-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#newResponsibleAvatarPreview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--control-bg);
    border: 2px dashed var(--border-color);
}

/* Diğer listeler için genel stil (Tip, Durum) */
.settings-option-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.settings-option-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; background-color: var(--body-bg); border-radius: 6px;
}
.add-option-form {
    display: flex; gap: 10px; margin-top: 15px;
    padding-top: 15px; border-top: 1px dashed var(--border-color);
}
.add-option-form input { flex-grow: 1; }
/* =====================================================
   15. YENİ DASHBOARD GÖRÜNÜMÜ STİLLERİ
===================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.widget-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.widget-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-header small {
    color: var(--text-color-light);
}

.widget-body {
    padding: 20px;
    flex-grow: 1;
}

/* Proje İlerleme Widget'ı */
.progress-bar-container {
    width: 100%;
    height: 12px;
    background-color: var(--control-bg);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-bar {
    height: 100%;
    background-color: var(--button-success-bg);
    border-radius: 6px;
    transition: width 0.5s ease-in-out;
}
.progress-text {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-color-secondary);
}
.progress-summary {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: var(--text-color-light);
}

/* Yaklaşan Görevler Widget'ı */
.widget-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.widget-body ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.widget-body ul li:hover {
    transform: translateX(5px);
}
.widget-body ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.task-title-widget {
    font-weight: 500;
}
.task-date-widget {
    font-size: 13px;
    font-weight: 600;
    color: var(--button-danger-bg);
}

/* Görev Durum Özeti Widget'ı */
.status-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.status-name {
    color: var(--text-color-light);
}
.status-count {
    font-weight: 700;
    background-color: var(--control-bg);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
/* =====================================================
   16. GÖREVLER SAYFASI ÜST BÖLÜM TASARIMI
===================================================== */
.tasks-page-header {
    display: grid;
    grid-template-columns: 1fr auto; /* Sol taraf esnek, sağ taraf içeriğe göre */
    gap: 25px;
    align-items: start;
    margin-bottom: 25px;
}

/* Sağdaki widget'lar için mini-grid */
.dashboard-grid-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* Widget kartlarının stillerini daha kompakt hale getirelim */
.dashboard-grid-mini .widget-card {
    box-shadow: none;
    border-radius: 8px;
}
.dashboard-grid-mini .widget-header {
    padding: 10px 15px;
}
.dashboard-grid-mini .widget-header h3 {
    font-size: 1em;
}
.dashboard-grid-mini .widget-body {
    padding: 15px;
}
.dashboard-grid-mini .progress-text {
    font-size: 1.2em;
}
.dashboard-grid-mini .progress-summary {
    font-size: 12px;
}
.dashboard-grid-mini .widget-body ul li {
    font-size: 13px;
    gap: 8px;
}

/* Responsive davranış */
@media (max-width: 1200px) {
    .tasks-page-header {
        grid-template-columns: 1fr; /* Ekran küçülünce alt alta gelsinler */
    }
    .dashboard-grid-mini {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
/* =====================================================
   17. YORUM VE ETİKET STİLLERİ
===================================================== */
/* Görev satırındaki etiket rozetleri */
.badge.task-tag-badge {
    background-color: var(--text-color-secondary);
    color: white;
    opacity: 0.8;
}
.dark-theme .badge.task-tag-badge {
    opacity: 1;
}

/* Modal içindeki yorumlar bölümü */
.comments-section {
    padding: 20px;
    background-color: var(--body-bg);
    margin-top: 15px;
}
.comments-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
}
.add-comment-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.add-comment-form textarea {
    flex-grow: 1;
    resize: vertical;
    min-height: 40px;
}
.add-comment-form button {
    height: fit-content;
    align-self: flex-end;
}
.modal-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.modal-comment-list li {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.modal-comment-list li:last-child {
    border-bottom: none;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.comment-author {
    font-weight: 600;
}
.comment-date {
    font-size: 12px;
    color: var(--text-color-light);
}
.comment-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}
/* =====================================================
   18. MODERN ONAY PENCERESİ (CONFIRMATION MODAL)
===================================================== */
.confirmation-modal .modal-content {
    max-width: 450px; /* Daha küçük bir pencere */
    text-align: center;
}

.confirmation-modal h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.confirmation-modal p {
    color: var(--text-color-light);
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
}

.confirmation-modal .form-actions {
    justify-content: center; /* Butonları ortala */
}

/* =====================================================
   19. SATIR İÇİ ALT GÖREV EKLEME FORMU STİLLERİ
===================================================== */
.inline-subtask-add-form-container {
    padding: 10px 15px 15px 70px; /* Sol taraftan girintili olması için */
    background-color: var(--control-bg);
    border-top: 1px dashed var(--border-color);
    display: none; /* Varsayılan olarak gizli */
}

.inline-subtask-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-subtask-add-form input {
    flex-grow: 1; /* Input alanının kalan boşluğu kaplaması için */
    height: 34px;
}

.inline-subtask-add-form .btn {
    flex-shrink: 0; /* Butonların küçülmemesi için */
    width: 34px;
    height: 34px;
    padding: 0;
}
/* =====================================================
   20. DOSYA EKİ ROZETİ STİLİ GÜNCELLEMESİ
===================================================== */

/* Artık kullanılmayan eski stil */
.task-attachments-summary {
    display: none;
}

/* Görev satırındaki yeni dosya eki rozeti */
.attachment-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color-light);
    background-color: var(--control-bg);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}
.dark-theme .attachment-summary-badge {
    background-color: var(--task-item-hover-bg);
}
.attachment-summary-badge i {
    font-size: 10px;
}
/* =====================================================
   21. KOZMETİK İYİLEŞTİRMELER
===================================================== */

/* 1. Görevler için Giriş Animasyonu */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Her görev öğesine animasyonu uygula */
/* .task-item'a zaten bir transition vardı, onu animasyonla güçlendiriyoruz. */
.task-item {
    /* ... mevcut .task-item stilleri ... */
    animation: fadeInUp 0.4s ease-out forwards;
}


/* 2. Daha Şık Boş Sayfa Görünümü */
.task-list-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color-light);
    display: none; /* Varsayılan olarak gizli */
}

.task-list-empty-state i {
    font-size: 4em;
    opacity: 0.5;
    margin-bottom: 20px;
    display: block;
}

.task-list-empty-state p {
    font-size: 1.2em;
    font-weight: 500;
    margin: 0;
}

/* Boş görev listesi için de bir ikon belirleyelim */
#active-task-list .task-list-empty-state::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0ae"; /* Font Awesome clipboard-list ikonu */
    font-size: 4em;
    opacity: 0.3;
    margin-bottom: 20px;
    display: block;
}
#completed-task-list .task-list-empty-state::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f560"; /* Font Awesome tasks ikonu */
    font-size: 4em;
    opacity: 0.3;
    margin-bottom: 20px;
    display: block;
}

/* ... Diğer tüm CSS kuralları ... */

/* =====================================================
   22. SEKME YAPILI MODERN MODAL TASARIMI
===================================================== */
.modal-content.modal-layout-tabbed {
    padding: 0;
    max-width: 900px;
    height: 85vh;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.4em;
}
.modal-body {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 25px;
}
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.modal-tab-link {
    padding: 12px 20px;
    border: none;
    background: none;
    color: var(--text-color-light);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-tab-link:hover {
    color: var(--text-color);
}
.modal-tab-link.active {
    color: var(--text-color-secondary);
    border-bottom-color: var(--text-color-secondary);
    font-weight: 600;
}
.modal-tab-content {
    flex-grow: 1;
    padding: 25px 5px 25px 0; /* Sağda scrollbar için boşluk */
    overflow-y: auto;
}
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
    animation: fadeIn 0.3s;
}
.modal-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--body-bg);
    flex-shrink: 0;
}
.empty-state-small {
    color: var(--text-color-light);
    padding: 20px;
    text-align: center;
    font-style: italic;
}



/* =====================================================
   24. PROJE BİLGİLERİ (PANO) SAYFASI STİLLERİ
===================================================== */
.kpi-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.kpi-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
}
.kpi-item label {
    font-size: 13px;
    color: var(--text-color-light);
    margin-bottom: 8px;
    display: block;
}
.kpi-status-badge {
    font-size: 16px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
}
.kpi-status-badge.status-on-track { background-color: var(--button-success-bg); color: #fff; }
.kpi-status-badge.status-at-risk { background-color: #ffc107; color: #000; }
.kpi-status-badge.status-off-track { background-color: var(--button-danger-bg); color: #fff; }

.kpi-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kpi-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--control-bg);
    border-radius: 4px;
}
#kpiProgressBar {
    height: 100%;
    background-color: var(--text-color-secondary);
    border-radius: 4px;
    transition: width 0.3s ease;
}
#kpiProgressText {
    font-weight: 600;
    font-size: 16px;
}

.project-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
}
.project-info-column .card h4 {
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dynamic-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dynamic-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--body-bg);
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid var(--text-color-secondary);
}
.add-dynamic-item-form {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}
.add-dynamic-item-form input,
.add-dynamic-item-form select {
    flex-grow: 1;
}

/* =====================================================
   25. LOGIN SAYFASI STİLLERİ (NİHAİ VE TAM)
===================================================== */

body.login-page-body {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; min-height: 100vh;
    background-color: var(--sidebar-bg);
    margin: 0; padding: 20px; box-sizing: border-box;
    overflow-x: hidden;
}

/* DALGA ANİMASYONU */
.wave-layer { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; /* Bu değerin 0 olduğundan emin olun */
    overflow: hidden; 
}
.waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }

/* LOGIN KONTEYNERİ */
.login-container {
    display: flex; width: 920px; max-width: 95%;
    background-color: var(--container-bg);
    box-shadow: 0 10px 40px rgba(0,0,0, 0.2);
    border-radius: 16px; overflow: hidden;
    margin: 20px 0; z-index: 2;
}
.login-visual {
    flex: 1.3;
    background: linear-gradient(135deg, var(--button-primary-bg) 0%, var(--text-color-secondary) 100%);
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; padding: 40px; color: #fff; text-align: center;
}
.dark-theme .login-visual { background: linear-gradient(135deg, #1f2128 0%, #2a2f34 100%); }
.login-visual img { max-width: 80px; margin-bottom: 15px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); }
.login-visual .main-title { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.login-visual .slogan { font-size: 14.5px; opacity: 0.9; margin-bottom: 35px; max-width: 320px; line-height: 1.5; }

/* DEĞİŞİKLİK: Eksik olan özellik kutusu stilleri eklendi. */
.feature-boxes-container { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 15px; }
.feature-box { 
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 10px; 
    padding: 18px 20px; 
    text-align: left; 
    transition: transform 0.3s ease; 
}
.feature-box:hover { transform: translateY(-5px); }
.feature-box h4 { font-size: 16px; font-weight: 600; margin: 0 0 5px 0; color: #fff; }
.feature-box p { font-size: 13px; margin: 0; opacity: 0.85; color: #f0f0f0; line-height: 1.45; }


/* FORM KONTEYNERİ */
.login-form-container {
    flex: 1; padding: 40px 50px; display: flex;
    flex-direction: column; justify-content: center;
}
.login-form-container h2 {
    color: var(--text-color); font-weight: 600; text-align: center;
    margin-top: 0; margin-bottom: 30px; font-size: 26px;
}
.form-group label {
    font-size: 14px; margin-bottom: 8px; font-weight: 500;
}
.input-wrapper {
    display: flex; align-items: center; background-color: var(--control-bg);
    border: 1px solid var(--control-border); border-radius: 8px;
    transition: all 0.2s ease; position: relative;
}
.input-wrapper:focus-within {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.2);
}
.input-wrapper .input-icon { padding: 0 15px; color: var(--text-color-light); }
.input-wrapper input {
    flex-grow: 1; border: none; background: transparent;
    height: 46px; padding: 10px 0; outline: none;
    color: var(--text-color); font-size: 15px;
}
.password-toggle-icon { padding: 0 15px; color: var(--label-color); cursor: pointer; opacity: 0.7; }
.password-toggle-icon:hover { opacity: 1; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 13px; }
.form-options .remember-me { display: flex; align-items: center; }
.form-options .remember-me input[type="checkbox"] { margin-right: 7px; }
.form-options .remember-me label { margin-bottom: 0; }
.form-options a { color: var(--text-color-secondary); text-decoration: none; }
.form-options a:hover { text-decoration: underline; }
.btn-login { width: 100%; padding: 13px; font-size: 16px; }
.signup-link-container { text-align: center; margin-top: 25px; font-size: 14px; }
.signup-link-container a { color: var(--text-color-secondary); font-weight: 500; }

/* FOOTER */
.login-footer {
    position: absolute; bottom: 0; width: 100%; padding: 18px 35px;
    color: rgba(255,255,255,0.75); display: flex;
    justify-content: center; align-items: center; font-size: 12.5px; z-index: 5;
}
.dark-theme .login-footer { color: rgba(222, 226, 230, 0.75); }
.footer-links a { color: inherit; text-decoration: none; margin: 0 10px; }
.footer-links a:hover { color: #fff; }
.language-selector { position: absolute; right: 35px; }
.language-selector select { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.25); padding: 6px 8px; border-radius: 6px; }
.language-selector select option { background-color: var(--sidebar-bg); }

/* RESPONSIVE */
@media (max-width: 920px) {
    .login-visual { display: none; }
    .login-container { flex-direction: column; width: 90%; max-width: 480px; }
    .login-form-container { padding: 35px 30px; }
    .login-footer { flex-direction: column; gap: 12px; text-align: center; position: relative; margin-top: 20px; }
    .language-selector { position: static; }
}
/* =====================================================
   26. PROJELER SAYFASI STİLLERİ
===================================================== */
body.projects-page {
    background-color: var(--body-bg);
}

.projects-page-wrapper {
    width: 100%;
    min-height: 100vh;
    
    position: relative;
    z-index: 1;
}
.projects-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--header-border);
    background-color: var(--container-bg);
    box-shadow: var(--shadow-sm);
}

.projects-main-header .logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.projects-main-header .logo-area img { height: 38px; }
.projects-main-header .logo-area .page-title {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--text-color-secondary);
}

.btn-outline-danger {
    background-color: transparent;
    border: 1px solid var(--button-danger-bg);
    color: var(--button-danger-bg);
}
.btn-outline-danger:hover {
    background-color: var(--button-danger-bg);
    color: #fff;
}

.projects-page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px 30px 30px;
}

.projects-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.project-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.project-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--text-color-secondary);
}
.project-item-content {
    padding: 20px;
    flex-grow: 1;
}
.project-item-content h3 { margin: 0 0 10px 0; }
.project-item-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-color-light);
    flex-grow: 1;
}
.project-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}
.project-item.add-project-box {
    justify-content: center; align-items: center;
    text-align: center; border: 2px dashed var(--border-color);
    cursor: pointer; min-height: 250px;
}
.project-item.add-project-box:hover {
    background-color: var(--control-bg);
    border-color: var(--text-color-secondary);
}
.add-project-box i { font-size: 3em; color: var(--text-color-light); margin-bottom: 15px; }
.add-project-box span { font-weight: 500; color: var(--text-color-light); }

.btn-delete-project {
    background: none; border: none; font-size: 16px; color: var(--text-color-light);
    cursor: pointer; padding: 5px;
}
.btn-delete-project:hover { color: var(--button-danger-bg); }

.btn-go-project {
    text-decoration: none;
    font-weight: 500;
}
/* style.css sonuna eklenecek veya güncellenecek */
.project-item-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    font-size: 12px;
    color: var(--text-color-light);
    border-top: 1px solid var(--border-color);
}
.project-item-stats .stat span {
    font-weight: 600;
    color: var(--text-color);
}
.progress-bar-container-mini {
    flex-grow: 1;
    height: 8px;
    background-color: var(--control-bg);
    border-radius: 4px;
}
.progress-bar-mini {
    height: 100%;
    background-color: var(--button-success-bg);
    border-radius: 4px;
}
.progress-percentage {
    font-weight: 600;
    color: var(--text-color);
}

/* =====================================================
   GANTT ŞEMASI ÖNCELİK RENKLERİ (CANLI VERSİYON)
===================================================== */

/* Frappe-Gantt'taki bar'ın SVG dolgu rengini değiştiriyoruz. */
.gantt .bar-wrapper.gantt-priority-high .bar {
    fill: var(--priority-high-text) !important;
}
.gantt .bar-wrapper.gantt-priority-medium .bar {
    fill: var(--priority-medium-text) !important;
}
.gantt .bar-wrapper.gantt-priority-low .bar {
    fill: var(--priority-low-text) !important;
}

/* Tamamlanmış görevlerin ilerleme çubuğu rengi */
.gantt .bar-progress {
    fill: rgba(0, 0, 0, 0.25) !important;
}

/* =====================================================
   GANTT ŞEMASI STİLLERİ (NİHAİ)
===================================================== */

/* Öncelik Renkleri */
.gantt .bar-wrapper.gantt-priority-high .bar {
    fill: var(--priority-high-text) !important;
}
.gantt .bar-wrapper.gantt-priority-medium .bar {
    fill: var(--priority-medium-text) !important;
}
.gantt .bar-wrapper.gantt-priority-low .bar {
    fill: var(--priority-low-text) !important;
}

/* Tamamlanmış Görev Stili */
.gantt .bar-wrapper.gantt-task-completed {
    opacity: 0.5; /* Soluklaştır */
    transition: opacity 0.3s ease;
}
.gantt .bar-wrapper.gantt-task-completed:hover {
    opacity: 1; /* Üzerine gelince netleşsin */
}
.gantt .bar-wrapper.gantt-task-completed .bar-progress {
    fill: rgba(0, 0, 0, 0.4) !important; /* İlerleme çubuğunu koyulaştır */
}

/* Tamamlandı İkonu Stili */
.completion-icon {
    fill: var(--button-success-bg);
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* =====================================================
   28. ARAYÜZ KOZMETİK DÜZELTMELERİ (ARAMA & RENK)
===================================================== */

/* 1. Üst Menüdeki Arama Çubuğu Stili */
.top-navbar .search-control input[type="search"] {
    background-color: var(--sidebar-hover-link-bg); /* Menüyle uyumlu arkaplan */
    border-color: var(--top-navbar-border-color);
    color: var(--sidebar-text-color);
    transition: all 0.2s ease;
}
.top-navbar .search-control input[type="search"]::placeholder {
    color: var(--text-color-light);
}
.top-navbar .search-control input[type="search"]:focus {
    background-color: var(--container-bg);
    color: var(--text-color);
    border-color: var(--text-color-secondary);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.2); /* Koyu tema vurgu rengiyle uyumlu */
}
.dark-theme .top-navbar .search-control input[type="search"] {
    background-color: var(--body-bg);
}

/* 2. Öncelik Filtre Butonlarındaki İkon Renkleri */
.priority-filter-buttons .btn .text-danger { color: var(--priority-high-text); }
.priority-filter-buttons .btn .text-warning { color: var(--priority-medium-text); }
.priority-filter-buttons .btn .text-success { color: var(--priority-low-text); }

/* 3. Temizle Butonundaki Metin ve İkonu Hizalama */
#clearFiltersBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* =====================================================
   FİLTRE & ARAMA BARI NİHAİ STİLLERİ
===================================================== */

/* GÖREVLER SAYFASINDAKİ FİLTRE BARI */
.tasks-page-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    align-items: start;
    margin-bottom: 25px;
}
.unified-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    padding: 15px;
    background-color: var(--control-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.priority-filters {
    display: flex;
    align-items: flex-end;
}
.priority-filter-buttons {
    display: flex;
    background-color: var(--body-bg);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border-color);
}
.dark-theme .priority-filter-buttons {
    background-color: var(--container-bg);
}
.priority-filter-buttons .btn {
    background-color: transparent;
    border: none;
    padding: 5px 10px;
}
.priority-filter-buttons .btn i {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.priority-filter-buttons .btn:hover i {
    opacity: 1;
}
.priority-filter-buttons .btn.active {
    background-color: var(--task-item-hover-bg);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.priority-filter-buttons .btn.active i {
    opacity: 1;
}
.text-danger { color: var(--priority-high-text); }
.text-warning { color: var(--priority-medium-text); }
.text-success { color: var(--priority-low-text); }

#clearFiltersBtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ÜST MENÜDEKİ (TOPNAV) ARAMA ÇUBUĞU */
.top-navbar-center-section {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.top-navbar-center-section .search-control {
    position: relative;
    max-width: 450px;
    width: 100%;
}
.top-navbar-center-section .search-control i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-light);
}

/* YÜKSEK ÖNCELİKLİ (SPESİFİK) SEÇİCİ İLE DÜZELTME */
nav.top-navbar .search-control input[type="search"] {
    background-color: var(--sidebar-hover-link-bg);
    border: 1px solid var(--top-navbar-border-color);
    color: var(--sidebar-text-color);
    height: 38px;
    padding-left: 40px !important; /* Önemli: Diğer stilleri ezmesi için */
    border-radius: 6px;
    width: 100%;
    transition: all 0.2s ease;
}
nav.top-navbar .search-control input[type="search"]::placeholder {
    color: var(--text-color-light);
}
nav.top-navbar .search-control input[type="search"]:focus {
    background-color: var(--container-bg);
    color: var(--text-color);
    border-color: var(--text-color-secondary);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.3);
}
.dark-theme nav.top-navbar .search-control input[type="search"] {
    background-color: var(--body-bg);
}

/* RESPONSIVE AYARLAR */
@media (max-width: 1200px) {
    .tasks-page-header {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 992px) {
    .top-navbar-center-section {
        display: none; /* Mobilde üst menüdeki arama çubuğunu gizle */
    }
}
@media (max-width: 768px) {
    .unified-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    #clearFiltersBtn {
        margin-left: 0;
    }
}
/* =====================================================
   EKSİK STİL DÜZELTMELERİ
===================================================== */

/* LOGIN SAYFASI İKON HİZALAMA VE ÖZELLİK KUTULARI */
.login-form-container .form-group { 
    position: relative; 
}
.input-wrapper {
    display: flex; align-items: center; background-color: var(--control-bg);
    border: 1px solid var(--control-border); border-radius: 8px;
    transition: all 0.2s ease; position: relative;
}
.input-wrapper:focus-within {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.2);
}
.input-wrapper .input-icon { 
    padding: 0 15px; 
    color: var(--text-color-light);
}
.input-wrapper input {
    flex-grow: 1; border: none; background: transparent;
    height: 46px; padding: 10px 0; outline: none;
    color: var(--text-color); font-size: 15px;
}
.password-toggle-icon { 
    padding: 0 15px; color: var(--label-color); 
    cursor: pointer; opacity: 0.7; 
}

.feature-boxes-container { 
    width: 100%; 
    max-width: 340px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
.feature-box { 
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 10px; 
    padding: 18px 20px; 
    text-align: left; 
    transition: transform 0.3s ease; 
}
.feature-box:hover { transform: translateY(-5px); }
.feature-box h4 { font-size: 16px; font-weight: 600; margin: 0 0 5px 0; color: #fff; }
.feature-box p { font-size: 13px; margin: 0; opacity: 0.85; color: #f0f0f0; line-height: 1.45; }


/* GÖREVLER SAYFASI FİLTRE YERLEŞİMİ */
.tasks-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 15px;
    padding-top: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}
.task-list-container .task-list-tabs {
    border-bottom: none;
    margin-bottom: 0;
}
.unified-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0;
    background-color: transparent;
    border: none;
}
.unified-filter-bar .control-group label { display: none; }
.unified-filter-bar .control-group select {
    height: 36px;
    font-size: 13px;
    min-width: 130px;
    padding: 6px 10px;
}
.unified-filter-bar .priority-filters { align-items: center; }
.unified-filter-bar .priority-filters label { display: none; }
.unified-filter-bar #clearFiltersBtn { height: 36px; }


/* GANTT ŞEMASI İKONLARI VE RENKLERİ */
.gantt .bar-wrapper.gantt-task-completed {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.gantt .bar-wrapper.gantt-task-completed:hover {
    opacity: 1;
}
.gantt .bar-wrapper.gantt-task-completed .bar-progress {
    fill: rgba(0, 0, 0, 0.4) !important;
}
.completion-icon {
    fill: var(--button-success-bg);
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* =====================================================
   RİSK ANALİZ PANOSU STİLLERİ
===================================================== */
.risk-summary-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.risk-score-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
}
.risk-score {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 10px;
}
.risk-score.risk-low { background: linear-gradient(135deg, #28a745, #218838); }
.risk-score.risk-medium { background: linear-gradient(135deg, #ffc107, #d39e00); }
.risk-score.risk-high { background: linear-gradient(135deg, #fd7e14, #e66a00); }
.risk-score.risk-critical { background: linear-gradient(135deg, #dc3545, #c82333); }

.risk-score-title {
    font-weight: 500;
    color: var(--text-color-light);
}

.risk-commentary-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--border-color);
}
.risk-commentary-card h4 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.risk-commentary-card p { line-height: 1.7; font-size: 1.1em; }

.risk-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}
.risk-card h4 { margin-top: 0; }
.risk-card ul { padding-left: 20px; margin: 0; }
.risk-card li { margin-bottom: 5px; }

@media (max-width: 992px) {
    .risk-summary-container {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   ESTETİK CHECKBOX STİLLERİ
===================================================== */

/* Checkbox'ı ve etiketi saran kapsayıcı */
.custom-checkbox-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Daralmasını engelle */
    margin-right: 10px; /* Sağına boşluk ver */
}

/* Gerçek (orijinal) checkbox'ı gizle ama işlevsel bırak */
.custom-checkbox-wrapper .task-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}

/* Bizim tasarladığımız sahte checkbox (etiket) */
.custom-checkbox-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg);
    border: 2px solid var(--control-border);
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

/* Gerçek checkbox işaretlendiğinde, sahte checkbox'ın stilini değiştir */
.custom-checkbox-wrapper .task-checkbox:checked + .custom-checkbox-label {
    background-color: var(--button-success-bg);
    border-color: var(--button-success-bg);
}

/* İşaretlendiğinde görünecek olan 'tik' işaretini oluştur */
.custom-checkbox-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0); /* Başlangıçta gizli */
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/* Gerçek checkbox işaretlendiğinde 'tik' işaretini görünür yap */
.custom-checkbox-wrapper .task-checkbox:checked + .custom-checkbox-label::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

/* Odaklanma (klavye ile gezinme) durumunda bir halka göster */
.custom-checkbox-wrapper .task-checkbox:focus + .custom-checkbox-label {
    box-shadow: 0 0 0 3px rgba(var(--button-primary-bg), 0.3);
}
/* =====================================================
   GANTT ŞEMASI GÖRÜNÜM SEÇİCİSİ (DROPDOWN) STİLİ
===================================================== */

/* =====================================================
   D3.js GANTT ŞEMASI STİLLERİ
===================================================== */

.d3-gantt-chart-container {
    width: 100%;
    /* Yüksekliği ekranın yaklaşık %65'i ile sınırla */
    max-height: 65vh; 
    /* Hem yatay hem dikey taşmalarda scrollbar göster */
    overflow: auto; 
    position: relative;
}

.d3-gantt-chart-svg {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

.d3-gantt-chart-svg .axis .tick line {
    stroke: var(--border-color);
    stroke-dasharray: 2,2;
}

.d3-gantt-chart-svg .axis path {
    stroke: var(--border-color);
}

.d3-gantt-chart-svg .axis .tick text {
    fill: var(--text-color-light);
    font-size: 11px;
}

.d3-gantt-chart-svg .task-bar {
    stroke: rgba(0,0,0,0.2);
    stroke-width: 1px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.d3-gantt-chart-svg .task-bar:hover {
    opacity: 0.75;
}

.d3-gantt-chart-svg .task-label {
    fill: white;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none; /* Tıklama olayının çubuğa gitmesini sağlar */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.d3-gantt-tooltip {
    position: absolute;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text-color);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}
/* =====================================================
   GANTT ŞEMASI EKLENTİ STİLLERİ
===================================================== */

/* "Bugün" dikey çizgisi */
.today-marker {
    stroke: var(--button-danger-bg);
    stroke-width: 3px; /* Kalınlığı 2px'den 3px'e çıkardık */
    stroke-dasharray: 6, 4; /* Kesikli çizgi aralığını güncelledik */
    opacity: 0.8;
}

/* Bağımlılık oku çizgisi */
.dependency-line {
    fill: none;
    stroke: var(--text-color-light);
    stroke-width: 1.5px;
    opacity: 0.9;
}

/* Bağımlılık oku ucu */
.dependency-arrow-head {
    fill: var(--text-color-light);
}
/* =====================================================
   KİLOMETRE TAŞI (MILESTONE) STİLİ
===================================================== */
.task-milestone {
    fill: #BF55EC; /* Mor renk veya istediğiniz başka bir renk */
    stroke: #8E44AD;
    stroke-width: 1.5px;
}
/* İlerleme Çubuğu Stili */
.task-progress-bar {
    fill: rgba(0, 0, 0, 0.25);
    stroke: rgba(0,0,0,0.3);
    stroke-width: 1px;
    pointer-events: none; /* Tıklanmasını engelle */
}
/* =====================================================
   GANTT ZOOM BUTONLARI STİLİ
===================================================== */
.gantt-zoom-controls {
    display: flex;
    gap: 5px;
    border-left: 1px solid var(--border-color);
    margin-left: 10px;
    padding-left: 10px;
}
/* İlerleme Çubuğu Stili */
.task-progress-bar {
    fill: rgba(0, 0, 0, 0.25);
    stroke: rgba(0,0,0,0.3);
    stroke-width: 1px;
    pointer-events: none; /* Tıklanmasını engelle */
    border-radius: 5px; /* Ana çubukla aynı yuvarlaklıkta olsun */
}
/* =====================================================
   KRİTİK YOL (CRITICAL PATH) STİLİ
===================================================== */
.task-bar.critical-path {
    stroke: #e74c3c; /* Belirgin bir kırmızı */
    stroke-width: 2.5px;
    stroke-opacity: 0.9;
}
/* =====================================================
   FOOTER İLERLEME ÇUBUĞU STİLİ
===================================================== */


/* İlerleme çubuğunun arka planını (tamamlanmamış kısmı) oluşturan konteyner */
.footer-progress-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Çubuğun kalınlığı */
    background-color: var(--control-bg);
    cursor: pointer;
}

/* İlerlemeyi gösteren yeşil kısım */
.footer-progress-bar {
    height: 100%;
    width: 0%; /* Genişlik JavaScript ile ayarlanacak */
    background-color: var(--button-success-bg);
    transition: width 0.4s ease-in-out;
}
/* =====================================================
   KAYNAK YÖNETİMİ SAYFASI STİLLERİ
===================================================== */

/* Sayfanın ana yerleşimi için grid yapısı */
.resource-management-layout {
    display: grid;
    grid-template-columns: 350px 1fr; /* Sol sütun sabit, sağ esnek */
    gap: 25px;
    align-items: flex-start;
}

/* Sol taraftaki kaynak listesi */
.resource-list-container .responsible-list .responsible-item {
    cursor: pointer;
}

.resource-list-container .responsible-list .responsible-item.active,
.resource-list-container .responsible-list .responsible-item:hover {
    background-color: var(--sidebar-active-link-bg);
    border-left: 3px solid var(--text-color-secondary);
}

.resource-list-container .responsible-list .responsible-item.active span {
    color: var(--sidebar-active-link-color);
    font-weight: 600;
}

/* Sağ taraftaki detay alanı */
.resource-details-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Kaynağa özel görev listesi */
.resource-task-detail-list h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.resource-task-detail-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.resource-task-detail-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--body-bg);
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
}
.resource-task-detail-list .task-title {
    font-weight: 500;
}
.resource-task-detail-list .task-due-date {
    font-size: 13px;
    color: var(--text-color-light);
}
.resource-task-detail-list .task-status-badge {
    font-size: 11px;
}


/* Mobil uyumluluk */
@media (max-width: 1024px) {
    .resource-management-layout {
        grid-template-columns: 1fr; /* Ekran küçülünce alt alta gelsin */
    }
}
/* =====================================================
   MOBİL UYUMLULUK DÜZELTMELERİ
===================================================== */

/* --- Genel Görevler Sayfası Filtre Barı --- */
@media (max-width: 1200px) {
    .tasks-header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .unified-filter-bar {
        justify-content: space-between;
    }
}

@media (max-width: 992px) {
    /* Daha küçük tablet ve telefonlar için filtreleri alt alta diz */
    .unified-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .unified-filter-bar .control-group {
        width: 100%;
    }
    #clearFiltersBtn {
        margin-left: 0; /* Otomatik boşluğu kaldır */
    }
}


/* --- Görev Satırı Yerleşim Düzeltmesi --- */
@media (max-width: 768px) {
    .task-item {
        /* Görev satırının içindeki aksiyon butonlarını konumlandırmak için */
        position: relative; 
    }

    .task-item-main-line {
        /* Flexbox'tan Grid'e geçerek daha kontrollü bir yerleşim sağlıyoruz */
        display: grid;
        grid-template-columns: auto 1fr; /* Sol: Checkbox/İkonlar, Sağ: Başlık/Detaylar */
        grid-template-rows: auto auto;    /* İki satırlı yapı */
        gap: 5px 12px;                   /* Satır ve sütun arası boşluk */
        align-items: center;
        padding: 12px 15px;
    }

    /* 1. Satır Elemanları */
    .task-sequence-number,
    .custom-checkbox-wrapper,
    .task-expand-icon {
        grid-row: 1 / 2;
    }

    .task-title {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        font-size: 15px; /* Mobilde biraz daha okunaklı yapalım */
    }
    
    .task-line-actions {
        /* Aksiyon butonlarını başlığın sağına, en üste alıyoruz */
        position: absolute;
        top: 8px;
        right: 8px;
    }

    /* 2. Satır Elemanları */
    .task-details-group {
        grid-row: 2 / 3;
        grid-column: 1 / -1; /* Tüm sütunları kapla */
        justify-content: flex-start; /* Detayları sola yasla */
        flex-wrap: wrap; /* Etiketlerin sığmazsa alt satıra geçmesini sağla */
        gap: 8px 12px;
        margin-left: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }
}

/* 3. Madde: Mobil filtreleme butonu ve açılır kapanır filtre barı */
    .mobile-filter-btn {
        display: none; /* Varsayılan olarak gizli */
    }
/* =================================================================
   MOBİL GÖRÜNÜM NİHAİ DÜZENLEMELERİ (4 MADDE)
================================================================= */

@media (max-width: 992px) {
    
    /* 1. ve 2. Madde: Widget'ları gizle ve düzenle */
    #dashboard-widgets-container {
        grid-template-columns: 1fr; /* Kalan tek widget tam genişlik olsun */
    }
    .dashboard-grid-mini .widget-card:nth-child(1), /* Proje ilerlemesi gizle */
    .dashboard-grid-mini .widget-card:nth-child(3) { /* Durum özeti gizle */
        display: none;
    }
    
    .tasks-header-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .tasks-header-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .unified-filter-bar {
        display: none; /* Filtre barını varsayılan olarak gizle */
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 15px;
        margin-top: 10px;
        background-color: var(--control-bg);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .unified-filter-bar.filters-open {
        display: flex; /* Görünür yapmak için */
    }

    .mobile-filter-btn {
        display: inline-flex; /* Sadece bu ekran boyutunda göster */
    }
}


@media (max-width: 768px) {
    /* 4. Madde: Görev satırlarındaki butonların üst üste binmesini engelle */
    .task-item {
        position: relative; 
    }

    .task-item-main-line {
        display: grid;
        grid-template-columns: auto 1fr auto; /* Sütunlar: İkonlar | Başlık | Aksiyonlar */
        grid-template-rows: auto auto;    /* Satırlar: Üst Satır | Detaylar */
        gap: 5px 12px;
        align-items: center;
        padding: 12px 15px;
    }

    /* Üst Satır Yerleşimi */
    .task-sequence-number,
    .custom-checkbox-wrapper,
    .task-expand-icon {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }

    .task-title {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        font-size: 15px;
    }
    
    .task-line-actions {
        grid-row: 1 / 2;
        grid-column: 3 / 4;
        justify-self: end; /* Sağa yasla */
    }

    /* Alt Satır Yerleşimi */
    .task-details-group {
        grid-row: 2 / 3;
        grid-column: 1 / -1; /* Tüm sütunları kapla */
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-left: 0;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid var(--border-color);
    }
}
/* =====================================================
   MOBİL GÖRÜNÜM SON DOKUNUŞLAR
===================================================== */

@media (max-width: 768px) {
    
    /* 1. Proje Başlığını Küçültme */
    .top-navbar-left-section #projectTitle {
        font-size: 1.1em; /* Yazı tipini küçült */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Sığmazsa sonuna ... koy */
        max-width: 150px; /* Genişliği sınırla */
    }

    /* 2. Yaklaşan Etkinlikler Widget'ını Küçültme */
    .dashboard-grid-mini .widget-card:nth-child(2) .widget-body ul {
        max-height: 110px; /* Maksimum yükseklik belirle */
        overflow-y: auto;  /* Taşarsa kaydırma çubuğu ekle */
        padding-right: 8px; /* Kaydırma çubuğu için boşluk */
    }

    /* 3. Footer Elemanlarını Dikey Sıralama */
    .project-stats-footer {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 8px;
        align-items: flex-start;
        position: sticky;

    }
    .footer-stat {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .footer-stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .footer-stat p {
        display: inline-block; /* "Başlangıç:", "Bitiş:" gibi etiketleri göster */
    }

    /* 4. Görev Satırı Yüksekliğini Azaltma */
    .task-item-main-line {
        padding: 10px 12px;
        gap: 5px 10px;
    }
    .task-details-group {
        padding-top: 8px;
        margin-top: 8px;
        gap: 6px 10px; /* Etiketler arası boşluğu azalt */
    }
    .task-line-actions {
        top: 5px;
        right: 5px;
    }

}
/* =====================================================
   MOBİL FOOTER NİHAİ DÜZENLEMESİ
===================================================== */

/* Önce butonu varsayılan olarak gizliyoruz (Bu kural zaten olmalı) */
.footer-toggle-btn {
    position: absolute;
    top: 0; /* DÜZELTME: Üst kenara hizala */
    left: 50%;
    /* DÜZELTME: Butonu kendi yüksekliği kadar yukarı taşı */
    transform: translate(-50%, -100%); 
    width: 44px;
    height: 22px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    z-index: 1006;
    display: none; /* Varsayılan olarak gizli kalacak */
    align-items: center;
    justify-content: center;
    color: var(--text-color-light);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}

.footer-toggle-btn i {
    transition: transform 0.3s ease;
}

/* Footer açıkken okun aşağı bakmasını sağla */
.project-stats-footer:not(.footer-collapsed) .footer-toggle-btn i {
    transform: rotate(180deg);
}


/* Tüm mobil davranışları bu tek bloktan yönetiyoruz */
@media (max-width: 992px) {
    
    /* Butonu göster */
    .footer-toggle-btn {
        display: flex; 
    }

    /* Footer kapalıyken (varsayılan durum) */
    .project-stats-footer.footer-collapsed {
        height: 5px !important; /* Sadece progress bar kalınlığında olsun */
        padding: 0;
        position: sticky;

    }
    
    /* Kapalıyken footer içeriğini tamamen gizle */
    .footer-collapsed .footer-stat {
        display: none;
    }
    
    /* AÇIK HALDEKİ footer içeriğini dikeyde sırala */
    .project-stats-footer:not(.footer-collapsed) {
        flex-direction: column;
        height: auto;
        padding: 15px;
        padding-top: 10px; /* Buton altta kaldığı için üst boşluk az olabilir */
        gap: 8px;
        align-items: flex-start;
                position: sticky;

    }

    .project-stats-footer:not(.footer-collapsed) .footer-stat {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-color);
    }

     .project-stats-footer:not(.footer-collapsed) .footer-stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Ana içerik alanının alt boşluğunu ayarla ki footer görevlerin üstünü örtmesin */
    .main-content {
        padding-bottom: 60px; /* Footer'ın kapalı hali için yeterli boşluk */
    }
}
/* =====================================================
   SATIR İÇİ GÖREV EKLEME FORMU MOBİL UYUMLULUĞU
===================================================== */

@media (max-width: 768px) {
    .inline-add-task-form {
        flex-direction: column;     /* Elemanları dikeyde sırala */
        align-items: stretch;       /* Tüm elemanların genişliğini eşitle */
        gap: 12px;                  /* Elemanlar arasına dikey boşluk ekle */
    }

    .inline-form-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end; /* Butonları sağa yasla */
        width: 100%;
    }

    /* Butonların kendileri artık tam genişlikte olmasın */
    .inline-add-task-form .inline-form-actions .btn {
        width: auto;
        padding: 8px 15px; /* Buton boyutunu standart hale getir */
    }
}
/* =====================================================
   MODAL İÇİ ALT GÖREV LİSTESİ STİLİ
===================================================== */
.modal-subtask-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Ana görev listesiyle aynı boşluk */
}
/* style.css dosyasının en sonuna ekleyin */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--body-bg-rgb, 244, 244, 248), 0.75); /* Yarı saydam arka plan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px); /* Arka planı hafifçe bulanıklaştırır */
}

.dark-theme .loading-overlay {
    background-color: rgba(var(--body-bg-rgb, 16, 16, 16), 0.75);
}

.spinner {
    border: 5px solid var(--control-bg);
    border-top: 5px solid var(--button-primary-bg);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* style.css sonuna ekleyin */
.calendar-day.holiday {
    background-color: rgba(var(--priority-high-text, #b02a37), 0.1);
}
.calendar-holiday-item {
    background-color: var(--priority-high-text);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}
/* style.css dosyasının sonuna ekleyin */

/* DÜZELTİLMİŞ KOD - Önceki bloğun yerine bunu yapıştırın */
.list-item-edit-form {
    display: none; /* Varsayılan olarak gizli kalacak */
    flex-grow: 1;
    /* display: flex; buradan kaldırıldı. Sadece .editing durumunda aktif olacak. */
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.list-item-display {
    display: flex; /* Varsayılan olarak görünür */
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Düzenleme modundayken göster/gizle */
.settings-option-list li.editing .list-item-display {
    display: none;
}
.settings-option-list li.editing .list-item-edit-form {
    display: flex;
}

.list-item-edit-form .form-control {
    flex-grow: 1;
}

.list-item-edit-form .edit-actions {
    display: flex;
    gap: 5px;
}
/* style.css dosyasının sonuna ekleyin */
.color-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    margin-right: 10px;
    flex-shrink: 0; /* Küçülmesini engelle */
}