/* PERFORMANSMATİK 2026 - CSS ANA DOSYASI
   Renk Paleti: muzikogretmenleriyiz.biz Kurumsal Kırmızı & Beyaz
*/

:root {
    --ana-kirmizi: #d32f2f;
    --koyu-kirmizi: #b71c1c;
    --beyaz: #ffffff;
    --gri: #f8f9fa;
    --cerceve: #eeeeee;
}

/* Genel Ayarlar */
* { 
    box-sizing: border-box; 
    font-family: 'Montserrat', sans-serif; 
}

body { 
    background-color: var(--gri); 
    margin: 0; 
    padding: 15px; 
    color: #2d3436;
}

.container { 
    max-width: 1200px; 
    margin: auto; 
    background: var(--beyaz); 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
    border-top: 6px solid var(--ana-kirmizi);
}

/* Başlık Alanları */
.app-header h1 { color: var(--ana-kirmizi); text-align: center; margin-bottom: 5px; font-weight: 700; }
.subtitle { text-align: center; color: #666; margin-bottom: 25px; font-size: 0.9rem; }

/* Bilgi Giriş Panelleri */
.info-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 12px; 
    margin-bottom: 20px;
    background: #fff5f5;
    padding: 15px;
    border-radius: 8px;
}

.info-group label { font-size: 0.7rem; font-weight: 700; color: var(--ana-kirmizi); display: block; margin-bottom: 4px; }
.info-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; }

.setup-section { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.input-card label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 14px; }
textarea, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; margin-bottom: 5px;}

/* Buton Tasarımları */
.btn-main, .btn-print, .btn-help { 
    background: var(--ana-kirmizi); color: white; border: none; padding: 12px; 
    border-radius: 8px; cursor: pointer; font-weight: 700; width: 100%; transition: 0.3s;
    font-size: 14px; margin-top: 5px;
}
.btn-help { background: #2d3436; }
.btn-main:hover { background: var(--koyu-kirmizi); transform: translateY(-1px); }
.btn-help:hover { background: #000; }

.btn-clear-all { 
    background: #636e72; color: white; border: none; padding: 8px; 
    border-radius: 6px; cursor: pointer; font-size: 11px; width: 100%; 
    margin-top: 5px; font-weight: 600; transition: 0.3s;
}
.btn-clear-all:hover { background: #2d3436; }

.storage-btns { display: flex; gap: 5px; }
.btn-storage { background: #f1f1f1; border: 1px solid #ccc; padding: 6px; font-size: 10px; border-radius: 4px; cursor: pointer; flex: 1; font-weight: 600; }
.btn-load { background: #e3f2fd; color: #1976d2; }

/* Tablo Kaydırma ve Tasarım (Mobil Uyumluluk) */
#evaluationArea { 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
}

table { width: 100%; border-collapse: collapse; min-width: 900px; }
th { background: #fdfdfd; border: 1px solid #ddd; padding: 8px 4px; font-size: 0.65rem; color: #333; }
td { border: 1px solid #ddd; padding: 6px; text-align: center; font-size: 0.75rem; }
.student-name { text-align: left; padding-left: 10px; font-weight: 600; font-size: 0.8rem; }

/* Satır İşlemleri */
.btn-row-del { background: none; border: none; color: #ff5252; cursor: pointer; font-size: 14px; padding: 0 5px; transition: 0.2s; }
.btn-row-del:hover { color: var(--ana-kirmizi); transform: scale(1.2); }

.score-box { display: flex; gap: 2px; justify-content: center; }
.score-btn { 
    border: 1px solid #ccc; background: white; cursor: pointer; 
    font-size: 9px; padding: 4px 6px; border-radius: 3px; min-width: 28px; 
}
.score-btn.active { background: var(--ana-kirmizi); color: white; border-color: var(--ana-kirmizi); }

.score-display { display: none; font-weight: bold; }
.print-header { display: none; }

/* YARDIM MODALI (Gelişmiş Sabit Merkezleme) */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7); 
    backdrop-filter: blur(3px); 
}

.modal-content { 
    background-color: #fff; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    padding: 30px; 
    border-radius: 15px; 
    width: 90%; 
    max-width: 650px; 
    max-height: 85vh; 
    overflow-y: auto; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-top: 8px solid var(--ana-kirmizi);
}

.close-btn { 
    position: sticky;
    top: -10px;
    float: right; 
    color: #666;
    font-size: 32px; 
    font-weight: bold; 
    cursor: pointer;
    line-height: 1;
}
.close-btn:hover { color: var(--ana-kirmizi); }

/* Footer */
footer { margin-top: 30px; text-align: center; border-top: 1px solid #eee; padding-top: 15px; }
footer a { color: var(--ana-kirmizi); text-decoration: none; font-weight: 700; font-size: 0.85rem; }
footer p { font-size: 0.75rem; color: #999; margin-top: 4px; }

/* BASKI AYARLARI (A4) */
@media print {
    #evaluationArea { overflow: visible !important; border: none; }
    table { min-width: 100% !important; }
    .no-print, .btn-row-del, .storage-btns, .btn-clear-all { display: none !important; }
    body { background: white; padding: 0; }
    .container { box-shadow: none; border: none; width: 100%; padding: 0; border-top: none; }
    .print-header { display: block; text-align: center; margin-bottom: 20px; }
    .print-header h2 { font-size: 1.2rem; margin-bottom: 5px; text-transform: uppercase; }
    .print-header h3 { font-size: 1rem; text-decoration: underline; margin-bottom: 12px; }
    .print-info-line { display: flex; justify-content: space-between; border-bottom: 1px solid #000; padding-bottom: 8px; margin-bottom: 8px; font-size: 0.8rem; }
    .print-subject { font-size: 0.9rem; margin-top: 5px; font-weight: bold; }
    .score-display { display: inline !important; font-size: 11px; }
    .score-box { display: none !important; }
    th { background: #f2f2f2 !important; border: 1px solid #000; font-size: 0.65rem; color: #000; }
    td { border: 1px solid #000; font-size: 0.75rem; color: #000; }
}

@media screen and (max-width: 600px) {
    .setup-section { grid-template-columns: 1fr; }
    .modal-content { padding: 20px; width: 95%; }
}