/* GENEL AYARLAR */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #f4f6f9; color: #333; }
#login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #2c3e50; color: white; }
.login-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 320px; text-align: center; box-sizing: border-box; max-width: 90%; }
.login-box h2 { margin-top: 0; color: #2c3e50; font-size: 22px; }
.login-box input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.login-box button { width: 100%; padding: 10px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; font-weight:bold; }
.login-box button:hover { background-color: #2980b9; }

#app-screen { display: none; height: 100vh; overflow: hidden; position: relative; }

/* SOL MENÜ & TOPBAR */
#sidebar { width: 250px; background-color: #2c3e50; color: white; padding-top: 20px; display: flex; flex-direction: column; overflow-y: auto; z-index: 2000; }
#sidebar h3 { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #34495e; padding-bottom: 10px; font-size: 18px; cursor: pointer; transition: 0.3s; }
#sidebar h3:hover { color: #3498db; }
#sidebar ul { list-style-type: none; padding: 0; margin: 0; }
#sidebar li { padding: 15px 20px; cursor: pointer; border-bottom: 1px solid #34495e; transition: 0.3s; user-select: none; position: relative; }
#sidebar li:hover { background-color: #34495e; }
.sub-menu { display: none; background-color: #1a252f; }
.sub-menu li { padding: 10px 20px 10px 40px; font-size: 14px; border-bottom: 1px solid #2c3e50; color: #bdc3c7; }
.sub-menu li:hover { background-color: #34495e; color: white; }
.sub-menu li.active { background-color: #3498db; color: white; border-left: 4px solid #fff; }

#main-content { flex-grow: 1; display: flex; flex-direction: column; width: calc(100% - 250px); overflow-x: hidden; height: 100vh; }
#topbar { background-color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); z-index: 10; }
.user-info { font-weight: bold; color: #2c3e50; }
.logout-btn { background-color: #e74c3c; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight:bold;}
#content-area { padding: 30px; background-color: #f4f6f9; flex-grow: 1; overflow-y: auto; }
.module-title { font-size: 24px; margin-bottom: 20px; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 5px; display: inline-block; }

/* BİLDİRİM VE TABLOLAR */
.notification-wrapper { position: relative; display: inline-block; margin-right: 20px; cursor: pointer; }
.notification-bell { font-size: 22px; transition: 0.3s; user-select: none; }
.notification-wrapper:hover .notification-bell { transform: scale(1.1); }
.notification-badge { position: absolute; top: -5px; right: -8px; background-color: #e74c3c; color: white; border-radius: 50%; padding: 2px 6px; font-size: 10px; font-weight: bold; border: 2px solid white; pointer-events: none;}
.notification-dropdown { display: none; position: absolute; right: -50px; top: 40px; background: white; width: 320px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 8px; z-index: 1000; border: 1px solid #eee; padding: 10px; text-align: left; cursor: default;}
.notification-dropdown::before { content: ''; position: absolute; top: -8px; right: 55px; border-width: 0 8px 8px 8px; border-style: solid; border-color: transparent transparent white transparent; }
.notification-item { padding: 12px 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #444; line-height: 1.4; border-radius: 4px; }
.notification-item:hover { background-color: #f8f9fa; }
.notification-time { display: block; font-size: 11px; color: #95a5a6; margin-top: 5px; font-weight: bold; }

.table-container { overflow-x: auto; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.data-table { width: 100%; border-collapse: collapse; min-width: 1000px; }
.data-table.wide-table { min-width: 2500px; } .data-table.ultra-wide { min-width: 4000px; } 
.data-table th, .data-table td { padding: 10px 12px; border: 1px solid #ddd; font-size: 13px; white-space: nowrap; text-align: left; }
.data-table tbody tr:hover { background-color: #f1f2f6; }
.data-table th { background-color: #34495e; color: white; }
tr.kirmizi-satir td { background-color: #ffebee !important; border-bottom: 1px solid #ffcdd2 !important; }

/* BUTONLAR VE FORMLAR */
.btn-edit, .btn-delete, .btn-finish, .btn-reactivate, .btn-pdf, .btn-download { color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-right: 5px; font-weight: bold;}
.btn-edit { background-color: #f39c12; } .btn-delete { background-color: #e74c3c; margin-right:0; }
.btn-finish { background-color: #8e44ad; } .btn-reactivate { background-color: #16a085; }
.btn-pdf { background-color: #e74c3c; margin-bottom: 4px;} .btn-pdf:hover { background-color: #c0392b; }
.btn-download { background-color: #27ae60; } .btn-download:hover { background-color: #2ecc71; }
.btn-pdf-en { background-color: #34495e; } .btn-pdf-en:hover { background-color: #2c3e50; }

.action-bar { display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center; gap:10px; flex-wrap: wrap; }
.action-bar.left-aligned { justify-content: flex-start; }
.action-bar-inner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.btn-add { background-color: #27ae60; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-search { background-color: #3498db; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-outline { background-color: white; color: #3498db; border: 2px solid #3498db; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-outline.active { background-color: #3498db; color: white; }
.search-input { padding: 10px 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; }

.tabs-container { margin-top: 15px; margin-bottom: 0; }
.tabs { display: flex; border-bottom: 2px solid #ddd; flex-wrap: wrap; gap: 2px; }
.tab-btn { background-color: #e2e6ea; border: 1px solid #ddd; border-bottom: none; padding: 8px 12px; cursor: pointer; border-radius: 6px 6px 0 0; font-weight: bold; font-size: 12px; color: #7f8c8d; }
.tab-btn.active { background-color: white; color: #2c3e50; border-top: 3px solid #3498db; border-bottom: 2px solid white; margin-bottom: -2px; }

.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; overflow-y: auto; padding: 20px; box-sizing: border-box;}
.modal-content { background-color: white; padding: 25px; border-radius: 8px; width: 100%; max-width: 900px; max-height: 85vh; overflow-y: auto; position: relative; box-sizing: border-box; }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; color: #aaa; cursor: pointer; z-index: 10;}

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; width: 100%; }
.form-group { display: flex; flex-direction: column; width: 100%; }
.form-group label { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #2c3e50; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; box-sizing: border-box; }
.split-form { display: flex; gap: 20px; width: 100%; }
.form-section { flex: 1; width: 100%; }

.admin-badge { background-color: #e74c3c; color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px; }

/* KART TASARIMLARI */
.patron-cards-container { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.patron-charts-container { display: flex; gap: 20px; flex-wrap: wrap;}
.patron-card { flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position:relative; overflow:hidden; }
.perf-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex: 1; min-width: 250px; border-top: 4px solid #3498db; }
.perf-score { font-size: 32px; font-weight: bold; color: #2ecc71; margin: 10px 0; }
.perf-score.bad { color: #e74c3c; } .perf-score.avg { color: #f39c12; }
.progress-bg { background: #eee; height: 10px; border-radius: 5px; width: 100%; margin-top: 5px; overflow: hidden;}
.progress-fill { height: 100%; background: #2ecc71; }

.yetki-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 13px; }
.yetki-table th, .yetki-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
.yetki-table th { background-color: #34495e; color: white; }
.yetki-table input[type="checkbox"] { transform: scale(1.2); cursor: pointer; }

/* ================= MOBİL UYUM (RESPONSIVE) AYARLARI ================= */
.table-container { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
}

.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: #2c3e50; cursor: pointer; margin-right: 10px; padding: 0; }
#mobile-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1500; }

@media screen and (max-width: 768px) {
    .mobile-menu-btn { display: inline-block; }
    
    /* Sidebar ve Menü Animasyonu */
    #sidebar { position: fixed; left: -260px; top: 0; bottom: 0; transition: left 0.3s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.5); z-index: 9999 !important; }
    #sidebar.open { left: 0; }
    
    /* Arka Plan Karartması */
    #mobile-overlay.active { display: block; z-index: 9998 !important; }
    
    /* İçerik Düzenleri */
    #main-content { width: 100%; }
    #topbar { padding: 10px 15px; flex-wrap: wrap; }
    #content-area { padding: 15px; }
    
    /* Bildirim Paneli (Mobil Hizalama) */
    .notification-dropdown { right: -80px; width: 260px; }
    .notification-dropdown::before { right: 85px; }
    
    /* Form ve Arama Elemanları Tam Ekran Olsun */
    .action-bar, .action-bar-inner, .search-group { flex-direction: column; width: 100%; align-items: stretch; gap: 10px; }
    .search-input { width: 100% !important; margin: 0; }
    .btn-add, .btn-search { width: 100%; margin-bottom: 5px; }
    .form-grid { grid-template-columns: 1fr; gap: 10px; }
    .split-form { flex-direction: column; gap: 10px; }
    .modal-content { width: 100%; padding: 15px; margin-top: 10px; }
    
    /* Kartlar ve Grafikler Alt Alta İnsin */
    .patron-charts-container > div { flex: 1 1 100%; }
    .ozet-container, .patron-cards-container { flex-direction: column; }
}