/* listelerim.css — tum seciciler #ll-root altina kapsullendi (index ile cakismasin) */
#ll-root{
            --primary: #D84315; --secondary: #E67E22; --accent: #F39C12;
            --success: #27ae60; --light: #ecf0f1; --white: #ffffff; --danger: #e74c3c;
            --warning: #f1c40f;
        }
#ll-root{ font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; height: 100vh; background: #f0f2f5; }
#ll-root #sidebar{ width: 300px; background: var(--primary); color: white; padding: 15px; display: flex; flex-direction: column; }
#ll-root .btn-add{ background: var(--success); color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 15px; }
#ll-root .level-container{ margin-bottom: 15px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 5px; }
#ll-root .level-head{ display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; background: var(--secondary); border-radius: 6px; }
#ll-root .level-head > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ll-root .level-actions{ display: none; gap: 4px; justify-content: flex-end; align-items: center; }
#ll-root .level-actions button, #ll-root .class-actions button{
            background: rgba(255, 255, 255, 0.15); border: none; color: #ffffff; padding: 4px 10px;
            border-radius: 4px; cursor: pointer; transition: all 0.2s ease; font-size: 14px;
        }
#ll-root .level-actions button:hover, #ll-root .class-actions button:hover{ transform: scale(1.1); background: var(--accent); }
#ll-root .class-list{ margin-left: 10px; margin-top: 5px; display: none; }
#ll-root .class-list.active{ display: block; }
#ll-root .class-item{ display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 4px; transition: 0.2s; }
#ll-root .class-item:hover{ background: rgba(255,255,255,0.1); }
#ll-root .class-link{ cursor: pointer; color: rgba(255,255,255,0.9); text-decoration: none; flex: 1; }
#ll-root .class-link:hover{ color: white; }
#ll-root #content{ flex: 1; padding: 25px; overflow-y: auto; display: none; }
#ll-root .header{ background: var(--white); padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#ll-root .tabs{ 
    display: flex; 
    flex-wrap: wrap; 
    border-bottom: 2px solid #ddd; 
    margin-bottom: 20px; 
    gap: 5px; 
}
#ll-root .tab{ 
    padding: 15px 20px; 
    cursor: pointer; 
    border: none; 
    background: #f1f3f5; 
    font-weight: 700; 
    color: var(--secondary); 
    white-space: nowrap;
    flex: 1 1 calc(20% - 10px); 
    text-align: center;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    font-size: 1.1rem; 
    border-bottom: 3px solid transparent;
}
#ll-root .tab:hover{
    background: #e9ecef;
    color: var(--accent);
}
#ll-root .tab.active{ 
    background: var(--white);
    border-bottom: 4px solid var(--accent); 
    color: var(--accent); 
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}
#ll-root .tab-panel{ display: none; background: var(--white); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#ll-root .tab-panel.active{ display: block; }

/* --- TEK LISTE MOD HAPLARI: Ogrenciler (Liste/Performans/Sinavlar/Genel
   Sonuc) ve Sinif Araclari (Kura/Geri Sayim/Kronometre/Takim) ust seritleri.
   Ayni liste yerinde durur, hap yalnizca gorunen sutunlari degistirir. --- */
#ll-root .ll-mod-serit{ display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
    margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px dashed #F3E2D3; }
#ll-root .ll-mod-hap{ padding: 11px 22px; border-radius: 999px; border: 1.5px solid #F0DACA;
    background: #fff; color: #8B6A57; cursor: pointer; font-family: inherit; font-weight: 700;
    font-size: 1.02rem; transition: transform .12s, box-shadow .12s; }
#ll-root .ll-mod-hap:hover{ transform: translateY(-1px); box-shadow: 0 3px 9px rgba(216,67,21,.12); }
#ll-root .ll-mod-hap.aktif{ background: linear-gradient(135deg,#F39C12,#D84315); color: #fff;
    border-color: transparent; box-shadow: 0 3px 10px rgba(216,67,21,.3); }
/* Arac panelleri tek basina tam ekran acilinca beyaz zemin korunur */
#llAracSayim:fullscreen, #llAracKron:fullscreen{ background: #fff; padding: 24px; overflow: auto; }
#ll-root table{ width: 100%; border-collapse: collapse; margin-top: 10px; }
#ll-root th, #ll-root td{ border: 1px solid #ddd; padding: 10px; text-align: left; }
#ll-root th{ background: #f8f9fa;text-align: center !important; }
#ll-root input[type="number"], #ll-root input[type="text"]{ width: 90%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
#ll-root #stuTable input[type="text"]{
    font-size: 1.2rem !important;
    font-weight: 600;
}
#ll-root .activity-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
#ll-root .act-btn{ padding: 25px; border: none; border-radius: 10px; color: white; font-weight: bold; cursor: pointer; font-size: 1.1em; transition: 0.2s; }
#ll-root .marker{ display: inline-block; width: 18px; height: 18px; margin-left: 4px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); }
#ll-root .tool-display{
            font-size: 4rem; font-weight: bold; text-align: center; margin: 20px 0;
            background: #2c3e50; color: #ecf0f1; padding: 20px; border-radius: 10px; font-family: 'Courier New', monospace;
        }
#ll-root .tool-controls{ display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
#ll-root .tool-btn{
            padding: 10px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: bold; color: white;
            transition: transform 0.1s;
        }
#ll-root .tool-btn:active{ transform: scale(0.95); }
#ll-root .btn-start{ background: var(--success); }
#ll-root .btn-stop{ background: var(--danger); }
#ll-root .btn-reset{ background: var(--secondary); }
#ll-root .btn-lap{ background: var(--warning); color: #333; }
#ll-root .team-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
#ll-root .team-card{ background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
#ll-root .team-title{ font-weight: bold; color: var(--accent); margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
#ll-root .team-member{ padding: 4px 0; border-bottom: 1px dotted #ccc; font-size: 0.95em; }
#ll-root .skill-slider{ -webkit-appearance: none; width: 100%; height: 12px; border-radius: 10px; background: #e0e0e0; outline: none; margin: 10px 0; }
#ll-root .skill-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; cursor: pointer; border: 3px solid var(--accent); }
#ll-root #customAlertModal{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
#ll-root .alert-box{ background: white; padding: 30px; border-radius: 15px; width: 90%; max-width: 400px; text-align: center; animation: ll_popIn 0.3s; }
@keyframes ll_popIn{ from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#ll-root .alert-btn{ padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 5px; }
#ll-root .btn-confirm{ background: var(--accent); color: white; }
#ll-root .btn-cancel{ background: #eee; color: #666; }
#ll-root .dragging-row{ opacity: 0.5; background-color: #f1f1f1; border: 2px dashed var(--accent); }
#ll-root .note-textarea{
    width: 100%;
    height: 250px;           
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.3rem !important; 
    line-height: 1.5;
    color: #2c3e50;
    resize: none;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
}
#ll-root .note-textarea:focus{
    border-color: var(--accent);
    background-color: #f8f9fa;
}
#ll-root .action-cell{
    display: flex;
    justify-content: center; 
    align-items: center;    
    gap: 15px;              
}
#ll-root .action-cell button{
    margin: 0;              
    width: 45px;            
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: 0.2s;
    font-size: 22px;
}
#ll-root .action-cell button:hover{
    background: var(--light);
    transform: scale(1.1);
}
#ll-root #tab8{
    width: 100%; 
    box-sizing: border-box;
}
#ll-root #planTable input[type="text"]{
    width: 100%;
    padding: 5px;
    border: 1px solid transparent;
    background: transparent;
}
#ll-root #planTable input[type="text"]:focus{
    border-color: var(--accent);
    background: #fff;
    outline: none;
}
#ll-root #planTable tr{
    transition: background-color 0.3s ease;
}
#ll-root #planTable tr:hover{
    background-color: #f5f5f5;
}
#ll-root #planBody{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
}
#ll-root #planBody tr{
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}
#ll-root #planTable thead{ display: none; }
#ll-root .week-info{
    min-width: 100px;
    border-right: 2px solid #eee;
    margin-right: 15px;
    padding-right: 10px;
}
#ll-root .week-number{
    font-size: 1.4rem; 
    font-weight: bold;
    color: var(--primary);
    display: block;
}
#ll-root .week-date{
    font-size: 0.9rem;
    color: #666;
}
#ll-root .plan-container{
    display: flex;
    gap: 40px;
    background: #fdfdfd;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    width: 100%;
    min-width: 1000px;
    box-sizing: border-box;
}
#ll-root .plan-container::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--primary); 
    transform: translateX(-50%);
    opacity: 0.15;
}
#ll-root .period-column{
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#ll-root .plan-card{
    display: flex;
    width: 100%;
    min-height: 70px; 
    height: auto;     
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 5px;
}
#ll-root .week-info{
    min-width: 100px; 
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    border-right: 2px solid #eee;
    gap: 2px;
}
#ll-root .gain-input-area{
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 15px;
}
#ll-root .gain-input-area textarea{
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    outline: none;
    resize: none;      
    height: auto;      
    min-height: 50px;
    font-family: inherit;
    line-height: 1.4;
}
#ll-root .check-container{
    min-width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #f0f0f0;
}
#ll-root .date-start{ 
    background: #e3f2fd; 
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 4px;
    width: 90%;
    text-align: center;
}
#ll-root .date-end{ 
    background: #fff3e0; 
    color: #e65100;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    width: 90%;
    text-align: center;
}
#ll-root .week-number{ 
    font-size: 1.2rem; 
    font-weight: 800; 
    color: var(--primary); 
    margin-bottom: 5px;
}
#ll-root .holiday-week{
    background: #e74c3c !important; 
    color: white !important;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
    width: 90%;
    margin-top: 3px;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}
#ll-root .plan-card.is-holiday .date-start, #ll-root .plan-card.is-holiday .date-end{
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
#ll-root .plan-card.is-current-week{
    border: 2px solid #3498db;
    background-color: #f0f9ff;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
    position: relative;
    z-index: 1;
}
#ll-root .holiday-separator{
    background-color: #f8f9fa;
    border: 1px dashed #cbd5e0;
    border-radius: 8px;
    margin: 5px 0;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ll-root .holiday-content{
    font-size: 0.85rem;
    color: #718096;
    font-weight: 600;
}
#ll-root .holiday-dates{
    font-weight: normal;
    margin-left: 5px;
    font-size: 0.8rem;
}
#ll-root .plan-card{
    display: flex;
    align-items: stretch;
    min-height: 60px; 
    margin-bottom: 5px;
}
#ll-root.sidebar-closed #sidebar{
    width: 0;
    padding: 0;
    overflow: hidden;
    transition: 0.3s;
}
#ll-root #sidebar{
    transition: 0.3s;
    position: relative;
}
#ll-root.sidebar-closed #content{
    margin-left: 0;
}
#ll-root .toggle-btn{
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 10000;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#ll-root.sidebar-closed .toggle-btn{
    left: 10px;
}
/* PROFILDEN acilan pencereler icin GORUNMEZ TASIYICI kipi:
   gizli listelerim bolumu gecici olarak gorunur yapilir ama kendisi
   bosluk kaplamaz/gorunmez (visibility) — yalniz sabit pencereler
   gorunur. Boylece #ll-root kapsamli TUM stiller pencerede yasamaya
   devam eder (agirlik puanlari tasarimi dahil). */
#listelerim-section.ll-modal-tasiyici{
    display: block !important;
    position: fixed; inset: 0;
    margin: 0 !important; padding: 0 !important;
    visibility: hidden; pointer-events: none;
    z-index: 10062;
}
#listelerim-section.ll-modal-tasiyici #lvlModal,
#listelerim-section.ll-modal-tasiyici #tatilModal,
#listelerim-section.ll-modal-tasiyici #behModal,
#listelerim-section.ll-modal-tasiyici #skillModal,
#listelerim-section.ll-modal-tasiyici #noteModal,
#listelerim-section.ll-modal-tasiyici #defterModal{
    visibility: visible; pointer-events: auto;
}

#ll-root #levelSettingsPanel,
#levelSettingsPanel{
    display: block !important;
    opacity: 1 !important;
}
#ll-root #lvlModal,
#lvlModal{
    display: none; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    max-width: 600px; 
    background: white; 
    padding: 30px; 
    box-shadow: 0 0 100px rgba(0,0,0,0.5); 
    z-index: 999999; 
    border-radius: 15px;
    color: #333;
    max-height: 85vh;
    overflow-y: auto;
}
#ll-root .student-box{
    transition: all 0.2s ease;
    text-align: center;
    min-width: 50px;
}
#ll-root .student-box:hover{
    filter: brightness(0.7);
    color: transparent !important;
}
#ll-root .selected-student-item{
    position: relative;
    display: inline-block;
    margin: 3px;
    padding: 5px 12px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
}
#ll-root .selected-student-item:hover{
    filter: brightness(0.8);
    color: transparent !important;
}
#ll-root .big-action-btn{
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    transition: all 0.2s;
}
#ll-root .big-action-btn{
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    transition: all 0.2s;
}
#ll-root .big-action-btn:hover{
    transform: scale(1.1);
    background: #f0f2f5;
}
#ll-root .delete-btn{
    color: #e74c3c !important;
    border-color: #fab1a0 !important;
}
#ll-root .student-name-input{
    border: none;
    background: transparent;
    font-size: 1.25rem !important; 
    font-weight: 600;
    width: 100%;
    padding: 8px 15px;
    font-family: inherit;
}
#ll-root .student-name-input:focus{
    background: rgba(52, 152, 219, 0.05);
    outline: none;
    border-bottom: 2px solid var(--accent);
}
#ll-root #stuTable th{
    font-size: 1.1rem;
    padding: 12px 5px;
}
#ll-root #sidebar, #ll-root #content{ 
    display: none !important; 
}
#ll-root.logged-in #sidebar{ 
    display: flex !important; 
}
#ll-root.logged-in #content{ 
    display: block !important; 
}
#ll-root .class-item.active-class{
    background-color: #e74c3c !important; 
    border-radius: 8px;
    transition: all 0.3s ease;
}
#ll-root .class-item.active-class .class-link{
    color: white !important; 
    font-weight: bold;
}
/* ESKI ROZET KURALI KALDIRILDI.
   Burada 'color:#fff !important' vardi; rozet artik bir SEKME oldugu ve
   pasifken koyu yaziyla acik zeminde durmasi gerektigi icin bu kural
   yaziyi gorunmez yapiyordu (beyaz uzerine acik gri, karsitlik 1.1).
   Rozetin butun bicimi tek yerde: '#ll-root #content .tabs #active-class-title'
   (dosyanin sonunda). */
#ll-root 700&display=swap');


#login-modal, #ll-root .auth-card, #ll-root #auth-title, #ll-root #auth-subtitle, #ll-root .index-btn-style, #ll-root .marhey-text, #ll-root .input-group label, #ll-root .input-group input, #ll-root .auth-footer, #ll-root .local-storage-warning p, #ll-root .ghost-btn, #ll-root #hata-mesaji{
    font-family: 'Marhey', sans-serif !important;
}
#ll-root #login-modal{
    display: flex;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #F7F9FC; 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
}
#ll-root .auth-card{
    background: #ffffff;
    padding: 20px 30px; 
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(22, 160, 133, 0.1);
    width: 95%;
    max-width: 500px;
    text-align: center;
    border: 2px solid #E9EEF5;
    box-sizing: border-box;
}
#ll-root .auth-header-area{
    margin-bottom: 12px; 
}
#ll-root #auth-action-btn{
    margin-bottom: 20px !important; 
}
#ll-root .toggle-pass{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.5;
    z-index: 10;
}
#ll-root #auth-title{
    color: #16A085;
    margin: 5px 0 2px 0;
    font-size: 22px;
}
#ll-root #auth-subtitle{
    font-size: 13px;
    color: #7F8C8D;
    margin-bottom: 5px;
    line-height: 1.2;
}
#ll-root .toggle-pass-btn{
    width: 45px;      
    height: 45px;     
    flex-shrink: 0;   
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F2F5;
    border-radius: 12px;
    cursor: pointer;
}
#ll-root .input-group{
    position: relative;
    margin-bottom: 15px; 
    width: 100%;
    box-sizing: border-box;
    flex: 1;
}
#ll-root .input-group input{
    width: 100%;
    padding: 12px 15px; 
    border: 2px solid #F0F2F5;
    border-radius: 12px;
    outline: none;
    font-size: 16px;
    color: #333;
    background: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box; 
    display: block;
}
#ll-root .input-group label{
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #95A5A6;
    pointer-events: none;
    font-size: 14px;
    transition: all 0.3s ease;
}
#ll-root .input-group input:focus + label, #ll-root .input-group input:not(:placeholder-shown) + label{
    top: 0px;
    left: 12px;
    font-size: 11px;
    background: white;
    padding: 0 5px;
    color: #16A085;
}
#ll-root .index-btn-style{
    width: 100%;
    padding: 12px; 
    background: linear-gradient(90deg, #FFC107, #F39C12);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    box-sizing: border-box;
    margin-top: 5px;
}
#ll-root .local-storage-warning{
    margin-top: 15px; 
    padding-top: 12px;
    border-top: 1px dashed #D5DBDB;
}
#ll-root .local-storage-warning p{
    font-size: 12px;
    color: #7F8C8D;
    line-height: 1.3;
    margin-bottom: 8px;
}
#ll-root .ghost-btn{
    background: #F0F3F4;
    border: none;
    color: #5D6D7E;
    padding: 8px 20px; 
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
#ll-root #auth-switch-link{
    color: #EF5350;
    text-decoration: none;
    font-weight: bold;
}
#ll-root .role-btn{
    flex: 1;
    padding: 10px 5px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #f0f2f5;
    color: #777;
    cursor: pointer;
    font-family: 'Nunito', 'Arakom', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}
#ll-root .role-btn.active-role{
    background: #E8F0FE; 
    color: #1a73e8;
    border-color: #1a73e8;
    font-weight: bold;
}
#ll-root .marhey-text{
    font-weight: 400 !important;
}
#ll-root .mission-card{
    background: #f8f9fa;
    border: 2px solid #eee;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}
#ll-root .mission-card:hover{
    border-color: var(--accent);
    background: #fff;
    transform: translateY(-3px);
}
#ll-root .mission-card h4{ margin: 0 0 10px 0; color: var(--primary); }
#ll-root .mission-card .status{ font-size: 0.8rem; color: #7f8c8d; }
#ll-root.role-student .btn-add, #ll-root.role-student .level-actions, #ll-root.role-student .class-actions{
    opacity: 0.3;
    pointer-events: none; 
}
#ll-root.role-student button[onclick*="switchView"]{
    opacity: 1 !important;
    pointer-events: auto !important;
    border: 2px solid #7B1FA2;
}
#ll-root .secure-code.revealed{
    color: #1a73e8 !important;
    background: #E8F0FE !important;
    user-select: text !important; 
}
@keyframes ll_spin{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ===== index ile uyumlu tema (font + sidebar) ===== */
#ll-root{ font-family: 'Nunito', sans-serif; }
#ll-root h1, #ll-root h2, #ll-root h3, #ll-root .marhey-text{ font-family: 'Marhey', sans-serif; }
#ll-root #sidebar{ background: linear-gradient(160deg, #FFC107 0%, #F39C12 45%, #EF5350 100%); }
#ll-root #sidebar h2, #ll-root #sidebar #listelerim-home-ico{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.15); }

/* sidebar ac/kapa: USTTEN SARKAN PERDE TUTAMACI (asagi ok)
   Perde kapaliyken ekranin ust-ortasinda, basliktan sarkan yuvarlak
   uclu bir tutamac gorunur; tiklaninca perde (sidebar) asagi iner. */
#ll-root .ll-reopen{
    display: none;
    position: fixed;
    left: 50%;
    top: calc(var(--header-height, 60px) - 3px);
    z-index: 240;   /* yapisik sekme cubugunun (250) altinda kalir; rozet acar */
    background: linear-gradient(160deg, #F39C12 0%, #E67E22 52%, #D84315 100%);
    color: #fff;
    border: none;
    border-radius: 0 0 18px 18px;
    padding: 7px 30px 9px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(216, 67, 21, .35);
    font-size: 1.1em;
    transform: translateX(-50%);
    animation: llPerdeSarkac 2.8s ease-in-out infinite;
}
/* OK TAMAMEN KALDIRILDI: profil artik ogrenci profili gibi sabit sayfa;
   sinif secimi profildeki kutulardan ve rozetteki okul haritasindan yapilir. */
#ll-root .ll-reopen,
#ll-root.sidebar-closed .ll-reopen{ display: none !important; }
#ll-root .ll-reopen:hover{ filter: brightness(1.08); animation-play-state: paused; }
@keyframes llPerdeSarkac{
    0%, 100%{ transform: translateX(-50%) translateY(0); }
    50%{ transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
    #ll-root .ll-reopen{ animation: none; }
}

/* ======================================================================
   SEVİYE AYARLARI — BÜYÜK OVERLAY (%80 x %80)
   Not: #lvlModal, #ll-root'un altinda ama position:fixed oldugu icin
   secicileri #ll-root'a bagli tutmuyoruz; id yeterince ozgun.
   ====================================================================== */
#lvlModal{
    /* index.html'deki satir ici stil ile ayni degerler; burada da sabitlenir
       ki tarayici farklarinda kutu kucuk kalmasin. */
    width: 80vw !important;
    height: 80vh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;          /* kaydirma govdede olacak */
    display: none;                         /* acilinca JS 'flex' yapar */
    flex-direction: column;
    font-family: 'Nunito', sans-serif;
    --primary: #D84315; --secondary: #E67E22; --accent: #F39C12;
    --success: #27ae60; --light: #ecf0f1; --white: #ffffff; --danger: #e74c3c;
    /* Arka plan karartmasi: ayri bir div gerekmesin diye devasa yayilimli golge
       kullaniyoruz; modal kapaninca karartma da kendiliginden kayboluyor. */
    box-shadow: 0 25px 80px rgba(0,0,0,0.45),
                0 0 0 100vmax rgba(20, 25, 40, 0.55) !important;
}
#lvlModal .lvl-bas{
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 26px;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 55%, #D84315 100%);
    color: #fff;
}
#lvlModal .lvl-bas h3{ margin: 0; font-family: 'Marhey', sans-serif; font-size: 1.5rem; color: #fff; }
#lvlModal .lvl-bas .lvl-ad{ font-size: 0.9rem; opacity: 0.9; }
#lvlModal .lvl-kapat{
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
    cursor: pointer; transition: background 0.2s;
}
#lvlModal .lvl-kapat:hover{ background: rgba(255,255,255,0.35); }

#lvlModal .lvl-govde{
    flex: 1 1 auto; overflow-y: auto; padding: 22px 26px;
    background: #f7f9fc;
}
#lvlModal .lvl-izgara{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px; align-items: start;
}
#lvlModal .lvl-kart{
    background: #fff; border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 1px solid #eef1f5;
}
#lvlModal .lvl-kart h4{
    margin: 0 0 12px; padding-bottom: 8px; font-size: 1.05rem;
    font-family: 'Marhey', sans-serif; color: var(--secondary);
    border-bottom: 2px solid var(--accent);
}
#lvlModal .lvl-kart.lvl-genis{ grid-column: 1 / -1; }
#lvlModal .lvl-bilgi{
    background: #e3f2fd; color: #1565c0; padding: 12px 14px; border-radius: 10px;
    margin-bottom: 18px; font-size: 0.9rem; line-height: 1.45; border-left: 5px solid #1565c0;
}
#lvlModal .lvl-alt{
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    padding: 14px 26px; background: #fff; border-top: 1px solid #e7ebf0;
}
#lvlModal .lvl-alt .lvl-not{ margin-right: auto; font-size: 0.8rem; color: #7f8c8d; font-style: italic; }
#lvlModal .lvl-alt button{ padding: 11px 22px; border: none; border-radius: 9px; cursor: pointer; font-weight: bold; font-size: 0.95rem; }
#lvlModal .lvl-iptal{ background: #eceff3; color: #4a5560; }
#lvlModal .lvl-kaydet{ background: var(--success); color: #fff; }
#lvlModal input[type="text"], #lvlModal input[type="number"]{
    padding: 8px 10px; border: 1px solid #dfe4ea; border-radius: 8px; font-family: inherit; font-size: 0.95rem;
}
#lvlModal .btn-add{ background: var(--success); color: #fff; border: none; padding: 9px; border-radius: 8px; cursor: pointer; }

/* ---------- DAVRANIŞ PUANI (artı / eksi) BÖLÜMÜ ---------- */
#lvlModal .beh-ust{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#lvlModal .beh-ust .beh-tanim{ font-size: 0.85rem; color: #7f8c8d; max-width: 640px; line-height: 1.45; }

/* Aç/kapa anahtari */
.beh-anahtar{ display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; white-space: nowrap; }
.beh-anahtar input{ position: absolute; opacity: 0; width: 0; height: 0; }
.beh-anahtar .beh-ray{
    width: 54px; height: 30px; border-radius: 999px; background: #cfd6de;
    position: relative; transition: background 0.25s; flex-shrink: 0;
}
.beh-anahtar .beh-ray::after{
    content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.25s;
}
.beh-anahtar input:checked + .beh-ray{ background: var(--success, #27ae60); }
.beh-anahtar input:checked + .beh-ray::after{ transform: translateX(24px); }
.beh-anahtar .beh-durum{ font-weight: bold; color: #95a5a6; font-size: 0.95rem; }
.beh-anahtar input:checked ~ .beh-durum{ color: var(--success, #27ae60); }

/* Pasifken icerik sonuk ve tiklanamaz olur */
#lvlModal .beh-icerik{ margin-top: 16px; transition: opacity 0.25s; }
#lvlModal .beh-icerik.pasif{ opacity: 0.4; pointer-events: none; filter: grayscale(0.6); }

#lvlModal .beh-satir{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
#lvlModal .beh-satir > label{ font-weight: bold; color: #2c3e50; font-size: 0.95rem; }
.beh-adim{ display: inline-flex; gap: 8px; }
.beh-adim button{
    width: 46px; height: 42px; border-radius: 10px; border: 2px solid #dfe4ea;
    background: #fff; color: #5b6875; font-size: 1.1rem; font-weight: bold; cursor: pointer;
    transition: all 0.18s;
}
.beh-adim button:hover{ border-color: var(--accent, #F39C12); }
.beh-adim button.secili{ background: var(--accent, #F39C12); border-color: var(--accent, #F39C12); color: #fff; }
#lvlModal .beh-ornek{ font-size: 0.85rem; color: #7f8c8d; }

/* Sebep basliklari duzenleyicisi */
#lvlModal .beh-sebep-kolon{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
#lvlModal .beh-kutu{ border: 1px solid #eef1f5; border-radius: 12px; padding: 12px 14px; background: #fbfcfe; }
#lvlModal .beh-kutu h5{ margin: 0 0 10px; font-size: 0.95rem; font-family: 'Marhey', sans-serif; }
#lvlModal .beh-kutu.arti h5{ color: #27ae60; }
#lvlModal .beh-kutu.eksi h5{ color: #e74c3c; }
#lvlModal .beh-liste{ display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; }
#lvlModal .beh-liste .beh-sat{ display: flex; gap: 6px; align-items: center; }
#lvlModal .beh-liste .beh-sat input{ flex: 1; min-width: 0; }
#lvlModal .beh-liste .beh-sat button{
    background: #fdecea; color: #e74c3c; border: none; border-radius: 8px;
    padding: 7px 10px; cursor: pointer; font-size: 0.9rem; flex-shrink: 0;
}
#lvlModal .beh-ekle{ margin-top: 10px; width: 100%; border: 2px dashed #cfd6de; background: #fff; color: #7f8c8d; padding: 8px; border-radius: 9px; cursor: pointer; font-weight: bold; }
#lvlModal .beh-ekle:hover{ border-color: var(--accent, #F39C12); color: var(--accent, #F39C12); }

@media (max-width: 900px){
    #lvlModal{ width: 94vw !important; height: 90vh !important; }
    #lvlModal .lvl-bas{ padding: 14px 16px; }
    #lvlModal .lvl-bas h3{ font-size: 1.2rem; }
    #lvlModal .lvl-govde{ padding: 16px; }
    #lvlModal .lvl-alt{ padding: 12px 16px; flex-wrap: wrap; }
    #lvlModal .lvl-alt .lvl-not{ display: none; }
}

/* ======================================================================
   PERFORMANS SEKMESİ — DAVRANIŞ SÜTUNU
   ====================================================================== */
#ll-root .beh-uyari{
    background: #fff8e1; border-left: 5px solid #F39C12; color: #8a6d3b;
    padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 0.88rem; line-height: 1.45;
}
#ll-root .beh-hucre{ display: flex; align-items: center; justify-content: center; gap: 8px; }
#ll-root .beh-tus{
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
    font-size: 1.15rem; font-weight: bold; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
    flex-shrink: 0; padding: 0;
}
#ll-root .beh-tus.arti{ background: #27ae60; color: #fff; box-shadow: 0 3px 8px rgba(39,174,96,0.28); }
#ll-root .beh-tus.arti:hover{ transform: scale(1.08); }
#ll-root .beh-tus.eksi{ background: #fff; color: #e74c3c; border-color: rgba(231,76,60,0.4); }
#ll-root .beh-tus.eksi:hover{ background: #e74c3c; color: #fff; border-color: transparent; }
#ll-root .beh-tus:active{ transform: scale(0.9); }
#ll-root .beh-net{
    min-width: 46px; text-align: center; font-weight: bold; font-size: 1.05rem;
    padding: 4px 8px; border-radius: 8px; background: #f1f3f5; color: #7f8c8d;
}
#ll-root .beh-net.arti{ background: #e8f7ef; color: #1e8449; }
#ll-root .beh-net.eksi{ background: #fdecea; color: #c0392b; }
#ll-root .beh-gecmis-tus{
    background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.55; padding: 2px 4px;
}
#ll-root .beh-gecmis-tus:hover{ opacity: 1; }

/* ======================================================================
   ARTI / EKSİ SEBEP POPUP'I
   ====================================================================== */
#behModal, #behLogModal{
    display: none; position: fixed; inset: 0; z-index: 1000000;
    align-items: center; justify-content: center;
    background: rgba(20, 25, 40, 0.6); backdrop-filter: blur(4px);
    font-family: 'Nunito', sans-serif;
}
#behModal .beh-pen, #behLogModal .beh-pen{
    background: #fff; width: 92%; max-width: 640px; max-height: 86vh;
    border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
#behModal .beh-pen-bas, #behLogModal .beh-pen-bas{
    padding: 16px 22px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#behModal.yon-arti .beh-pen-bas{ background: linear-gradient(135deg, #2ecc71, #1e8449); }
#behModal.yon-eksi .beh-pen-bas{ background: linear-gradient(135deg, #ef5350, #c0392b); }
#behLogModal .beh-pen-bas{ background: linear-gradient(135deg, #F39C12, #D84315); }
#behModal .beh-pen-bas h3, #behLogModal .beh-pen-bas h3{ margin: 0; font-family: 'Marhey', sans-serif; font-size: 1.25rem; color: #fff; }
#behModal .beh-pen-bas .beh-kim, #behLogModal .beh-pen-bas .beh-kim{ font-size: 0.88rem; opacity: 0.92; }
#behModal .beh-rozet{
    background: rgba(255,255,255,0.22); border-radius: 12px; padding: 6px 16px;
    font-size: 1.4rem; font-weight: bold; line-height: 1;
}
#behModal .beh-pen-govde, #behLogModal .beh-pen-govde{ padding: 18px 22px; overflow-y: auto; }
#behModal .beh-baslik{ font-weight: bold; color: #2c3e50; margin-bottom: 10px; font-size: 0.95rem; }
#behModal .beh-secenekler{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; }
#behModal .beh-sec{
    padding: 12px 14px; border-radius: 11px; border: 2px solid #e4e9ef; background: #fbfcfe;
    text-align: left; cursor: pointer; font-size: 0.92rem; color: #2c3e50; font-family: inherit;
    transition: all 0.15s; line-height: 1.3;
}
#behModal .beh-sec:hover{ border-color: #b9c3ce; }
#behModal.yon-arti .beh-sec.secili{ border-color: #27ae60; background: #e8f7ef; color: #1e8449; font-weight: bold; }
#behModal.yon-eksi .beh-sec.secili{ border-color: #e74c3c; background: #fdecea; color: #c0392b; font-weight: bold; }
#behModal .beh-not-alan{
    width: 100%; box-sizing: border-box; margin-top: 14px; padding: 10px 12px;
    border: 1px solid #dfe4ea; border-radius: 10px; font-family: inherit; font-size: 0.92rem; resize: vertical; min-height: 62px;
}
#behModal .beh-pen-alt, #behLogModal .beh-pen-alt{
    padding: 14px 22px; border-top: 1px solid #eef1f5; display: flex; gap: 12px; justify-content: flex-end; background: #fff;
}
#behModal .beh-pen-alt button, #behLogModal .beh-pen-alt button{
    padding: 11px 22px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-family: inherit; font-size: 0.95rem;
}
#behModal .beh-vazgec, #behLogModal .beh-vazgec{ background: #eceff3; color: #4a5560; }
#behModal.yon-arti .beh-onay{ background: #27ae60; color: #fff; }
#behModal.yon-eksi .beh-onay{ background: #e74c3c; color: #fff; }
#behModal .beh-onay:disabled{ background: #cfd6de !important; color: #8b97a3 !important; cursor: not-allowed; }

/* Geçmiş listesi */
#behLogModal .beh-kayit{
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid #eef1f5; border-radius: 11px; margin-bottom: 8px; background: #fbfcfe;
}
#behLogModal .beh-kayit .beh-d{
    min-width: 44px; text-align: center; font-weight: bold; padding: 5px 8px; border-radius: 8px; flex-shrink: 0;
}
#behLogModal .beh-kayit .beh-d.arti{ background: #e8f7ef; color: #1e8449; }
#behLogModal .beh-kayit .beh-d.eksi{ background: #fdecea; color: #c0392b; }
#behLogModal .beh-kayit .beh-sebep{ flex: 1; min-width: 0; color: #2c3e50; font-size: 0.94rem; }
#behLogModal .beh-kayit .beh-sebep small{ display: block; color: #95a5a6; font-size: 0.78rem; margin-top: 2px; }
#behLogModal .beh-kayit .beh-kaldir{
    background: #fdecea; color: #e74c3c; border: none; border-radius: 8px; padding: 7px 10px; cursor: pointer; flex-shrink: 0;
}
#behLogModal .beh-bos{ text-align: center; color: #95a5a6; padding: 26px 10px; }
#behLogModal .beh-ozet{
    display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap;
}
#behLogModal .beh-ozet div{ background: #f7f9fc; border-radius: 11px; padding: 10px 16px; text-align: center; min-width: 92px; }
#behLogModal .beh-ozet span{ display: block; font-size: 1.3rem; font-weight: bold; color: #2c3e50; }
#behLogModal .beh-ozet small{ color: #95a5a6; font-size: 0.76rem; }


/* ============================================================
   LL IKON SISTEMI - animasyonlu SVG ikon stilleri (emoji yerine)
   ============================================================ */
#ll-root .lli, .lli {
    width: 1.15em; height: 1.15em;
    display: inline-block; vertical-align: -0.19em;
    overflow: visible; flex: none;
    color: inherit;
}
.lli * { transform-box: fill-box; }
.lli-b { width: 1.5em; height: 1.5em; }
.lli-xl { width: 2.4em; height: 2.4em; vertical-align: -0.35em; }
.lli-xxl { width: 3.4em; height: 3.4em; vertical-align: -0.4em; }

@media (prefers-reduced-motion: reduce) { .lli * { animation: none !important; } }

/* --- klasor / kapak --- */
.li-kapak { transform-origin: 50% 100%; animation: liKapak 3.6s ease-in-out infinite; }
@keyframes liKapak { 0%,72%,100% { transform: rotateX(0deg); } 82% { transform: rotateX(-24deg); } }
.li-kapakac { transform-origin: 50% 0%; animation: liKapakAc 3.6s ease-in-out infinite; }
@keyframes liKapakAc { 0%,70%,100% { transform: skewX(0deg) translateY(0); } 84% { transform: skewX(-7deg) translateY(-.6px); } }

/* --- disli --- */
.li-disli { transform-origin: 50% 50%; animation: liDon 6s linear infinite; }
@keyframes liDon { to { transform: rotate(360deg); } }
.li-donen { transform-origin: 50% 50%; animation: liDon 2.6s linear infinite; }
.li-donen2 { transform-origin: 50% 50%; animation: liDon 9s linear infinite; }

/* --- kalem yazar --- */
.li-kalem { transform-origin: 50% 50%; animation: liKalem 2.8s ease-in-out infinite; }
@keyframes liKalem { 0%,100% { transform: translate(0,0); } 25% { transform: translate(1.1px,-1.1px); } 50% { transform: translate(0,0); } 75% { transform: translate(-.8px,.8px); } }

/* --- cop kutusu --- */
.li-kapakc { transform-origin: 90% 100%; animation: liCopKapak 3.4s ease-in-out infinite; }
@keyframes liCopKapak { 0%,74%,100% { transform: rotate(0) translateY(0); } 84% { transform: rotate(-17deg) translateY(-1px); } }
.li-cub1 { animation: liCubuk 2.2s ease-in-out infinite; }
.li-cub2 { animation: liCubuk 2.2s ease-in-out .18s infinite; }
.li-cub3 { animation: liCubuk 2.2s ease-in-out .36s infinite; }
@keyframes liCubuk { 0%,100% { opacity: .85; } 50% { opacity: .35; } }

/* --- not satirlari --- */
.li-satir1 { animation: liSatir 3s ease-in-out infinite; }
.li-satir2 { animation: liSatir 3s ease-in-out .35s infinite; }
.li-satir3 { animation: liSatir 3s ease-in-out .7s infinite; }
@keyframes liSatir { 0%,100% { opacity: 1; } 45% { opacity: .25; } }

/* --- grafik cubuklari --- */
.li-bar1 { transform-origin: 50% 100%; animation: liBar 2.6s ease-in-out infinite; }
.li-bar2 { transform-origin: 50% 100%; animation: liBar 2.6s ease-in-out .2s infinite; }
.li-bar3 { transform-origin: 50% 100%; animation: liBar 2.6s ease-in-out .4s infinite; }
@keyframes liBar { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }

/* --- saat / kronometre --- */
.li-akrep { transform-origin: 50% 100%; animation: liDon 12s linear infinite; }
.li-yelkovan { transform-origin: 0% 50%; animation: liDon 3s linear infinite; }
.li-ibre { transform-origin: 50% 100%; animation: liDon 2s linear infinite; }

/* --- terazi --- */
.li-kefe { transform-origin: 50% 20%; animation: liTerazi 3.4s ease-in-out infinite; }
@keyframes liTerazi { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* --- nabiz --- */
.li-nabiz { transform-origin: 50% 50%; animation: liNabiz 2.2s ease-in-out infinite; }
@keyframes liNabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* --- ses dalgasi --- */
.li-dalga { transform-origin: 0% 50%; animation: liDalga 1.8s ease-in-out infinite; }
@keyframes liDalga { 0%,100% { opacity: .3; transform: translateX(-1px); } 50% { opacity: 1; transform: translateX(0); } }

/* --- kitap --- */
.li-imlec { transform-origin: 50% 0%; animation: liImlec 3.2s ease-in-out infinite; }
@keyframes liImlec { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.22); } }
.li-sayfa-sol { transform-origin: 100% 50%; animation: liSayfaS 4s ease-in-out infinite; }
.li-sayfa-sag { transform-origin: 0% 50%; animation: liSayfaG 4s ease-in-out infinite; }
@keyframes liSayfaS { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(11deg); } }
@keyframes liSayfaG { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(-11deg); } }
.li-kitap1 { transform-origin: 50% 100%; animation: liKitap 3.6s ease-in-out infinite; }
.li-kitap2 { transform-origin: 50% 100%; animation: liKitap 3.6s ease-in-out .25s infinite; }
.li-kitap3 { transform-origin: 50% 100%; animation: liKitap 3.6s ease-in-out .5s infinite; }
@keyframes liKitap { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* --- sinif (derslik): tahtaya tebesirle yazilir, ogrenciler hafifce sallanir --- */
.li-tebesir path { stroke-dasharray: 12; animation: liTebesir 4.2s ease-in-out infinite; }
.li-tebesir path + path { animation-delay: .55s; }
@keyframes liTebesir { 0% { stroke-dashoffset: 12; } 34%,78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
.li-ogrenci1 { transform-origin: 50% 100%; animation: liOgrenci 3.4s ease-in-out infinite; }
.li-ogrenci2 { transform-origin: 50% 100%; animation: liOgrenci 3.4s ease-in-out .6s infinite; }
@keyframes liOgrenci { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.9px) rotate(6deg); } }

/* --- hedef --- */
.li-halka { transform-origin: 50% 50%; animation: liHalka 2.6s ease-in-out infinite; }
@keyframes liHalka { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .55; } }
.li-ok { transform-origin: 100% 0%; animation: liOk 2.6s ease-in-out infinite; }
@keyframes liOk { 0%,60%,100% { transform: translate(0,0); } 25% { transform: translate(2.2px,-2.2px); } }

/* --- kapat / onay --- */
.li-carpi { transform-origin: 50% 50%; animation: liCarpi 3s ease-in-out infinite; }
@keyframes liCarpi { 0%,80%,100% { transform: rotate(0); } 90% { transform: rotate(90deg); } }
.li-tik { animation: liTik 3s ease-in-out infinite; }
@keyframes liTik { 0% { stroke-dashoffset: 16; } 30%,100% { stroke-dashoffset: 0; } }

/* --- araclar --- */
.li-somun { transform-origin: 50% 50%; animation: liSalla 3s ease-in-out infinite; }
@keyframes liSalla { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.li-salla { transform-origin: 30% 30%; animation: liSalla 2.8s ease-in-out infinite; }
.li-salla2 { transform-origin: 50% 50%; animation: liZil 2.4s ease-in-out infinite; }
@keyframes liZil { 0%,70%,100% { transform: rotate(0); } 78% { transform: rotate(-13deg); } 86% { transform: rotate(11deg); } 93% { transform: rotate(-6deg); } }

/* --- gonder --- */
.li-okYukari { animation: liOkYukari 1.9s ease-in-out infinite; }
@keyframes liOkYukari { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* --- bayrak --- */
.li-kumas { transform-origin: 0% 50%; animation: liKumas 3s ease-in-out infinite; }
@keyframes liKumas { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(2.6deg) scaleX(.95); } }

/* --- kisi --- */
.li-govde { transform-origin: 50% 100%; animation: liGovde 3.4s ease-in-out infinite; }
@keyframes liGovde { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.05); } }

/* --- zipla --- */
.li-zipla { transform-origin: 50% 100%; animation: liZipla 2.2s ease-in-out infinite; }
.li-zipla2 { transform-origin: 50% 100%; animation: liZipla 2.6s ease-in-out infinite; }
@keyframes liZipla { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-2.2px); } }

/* --- parilti --- */
.li-parilti { transform-origin: 50% 50%; animation: liParilti 2.4s ease-in-out infinite; }
.li-parilti2 { animation: liParilti 2s ease-in-out infinite; }
@keyframes liParilti { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: .95; transform: scale(1); } }

/* --- takvim gunu --- */
.li-gun { animation: liGun 2.6s ease-in-out infinite; }
.li-gun2 { transform-origin: 50% 50%; animation: liGun 2.6s ease-in-out infinite; }
@keyframes liGun { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }

/* --- menu cizgileri --- */
.li-cizgi1 { animation: liCizgi 3s ease-in-out infinite; }
.li-cizgi2 { animation: liCizgi 3s ease-in-out .18s infinite; }
.li-cizgi3 { animation: liCizgi 3s ease-in-out .36s infinite; }
@keyframes liCizgi { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }

/* --- roket --- */
.li-roket { animation: liRoket 2.4s ease-in-out infinite; }
@keyframes liRoket { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.li-alev { transform-origin: 50% 0%; animation: liAlev .5s ease-in-out infinite alternate; }
@keyframes liAlev { from { transform: scale(1); opacity: .95; } to { transform: scale(.7,1.28); opacity: .6; } }

/* --- el --- */
.li-el { transform-origin: 100% 50%; animation: liElSalla 1.8s ease-in-out infinite; }
@keyframes liElSalla { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-2.4px); } }

/* --- kum saati --- */
.li-kum { transform-origin: 50% 0%; animation: liKum 3.4s ease-in-out infinite; }
.li-kum2 { transform-origin: 50% 100%; animation: liKum2 3.4s ease-in-out infinite; }
@keyframes liKum { 0% { transform: scaleY(1); } 90%,100% { transform: scaleY(.15); } }
@keyframes liKum2 { 0% { transform: scaleY(.15); } 90%,100% { transform: scaleY(1); } }

/* --- unlem --- */
.li-unlem { transform-origin: 50% 50%; animation: liYanip 1.6s ease-in-out infinite; }
@keyframes liYanip { 0%,100% { opacity: 1; } 50% { opacity: .38; } }

/* --- dogal ogeler --- */
.li-suzul { transform-origin: 100% 0%; animation: liSuzul 4.2s ease-in-out infinite; }
@keyframes liSuzul { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
.li-susu { animation: liYanip 2.2s ease-in-out infinite; }
.li-yaprak2 { transform-origin: 100% 50%; animation: liYaprak 3.6s ease-in-out infinite; }
.li-yaprak3 { transform-origin: 0% 50%; animation: liYaprak 3.6s ease-in-out .4s infinite; }
@keyframes liYaprak { 0%,100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
.li-parla { animation: liYanip 4s ease-in-out infinite; }
.li-yildiz { transform-origin: 50% 50%; animation: liTwinkle 2.4s ease-in-out infinite; }
@keyframes liTwinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.2) rotate(18deg); opacity: .7; } }
.li-balon { transform-origin: 50% 100%; animation: liBalon 3.4s ease-in-out infinite; }
@keyframes liBalon { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-1.4px); } }
.li-boynuz { animation: liYanip 5s ease-in-out infinite; }
.li-kos { transform-origin: 50% 100%; animation: liKos 1.1s ease-in-out infinite; }
@keyframes liKos { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.4px) rotate(-4deg); } }
.li-oy { transform-origin: 50% 100%; animation: liOy 3s ease-in-out infinite; }
@keyframes liOy { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(3.4px); opacity: .4; } 56% { transform: translateY(-4px); opacity: 0; } 70% { transform: translateY(0); opacity: 1; } }
.li-isin { transform-origin: 50% 50%; animation: liDon 14s linear infinite; }
.li-isik { transform-origin: 50% 60%; animation: liIsik 2.6s ease-in-out infinite; }
@keyframes liIsik { 0%,100% { filter: none; opacity: 1; } 50% { opacity: .72; } }
.li-mercek { animation: liMercek 2.6s ease-in-out infinite; }
@keyframes liMercek { 0%,100% { transform: translateY(-3.4px); opacity: .25; } 50% { transform: translateY(3.4px); opacity: 1; } }
.li-kilit { transform-origin: 50% 0%; animation: liNabiz 2.8s ease-in-out infinite; }
.li-cim { animation: liYanip 4s ease-in-out infinite; }
.li-kalp { transform-origin: 50% 50%; animation: liKalpAt 1.9s ease-in-out infinite; }
@keyframes liKalpAt { 0%,100% { transform: scale(1); } 22% { transform: scale(1.13); } 42% { transform: scale(1); } 60% { transform: scale(1.08); } }
.li-bayrakcik { transform-origin: 0% 50%; animation: liKumas 2.6s ease-in-out infinite; }

/* --- ogrenci kutusu / secili ogrenci hover carpisi (emoji yerine SVG) --- */
#ll-root .student-box:hover::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); width: 20px; height: 20px;
    pointer-events: none;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/g%3E%3C/svg%3E");
}
#ll-root .selected-student-item:hover::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); width: 17px; height: 17px;
    pointer-events: none;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/g%3E%3C/svg%3E");
}


/* ==========================================================================
   YENİ BÖLÜMLER —  davranış→ortalama, özel not geçmişi, veli bilgileri,
   veli & durum taraması, sınıf mesajları
   ========================================================================== */

/* --- 1) Seviye Ayarları: davranışın ortalamaya etkisi --- */
#lvlModal .beh-ort-satir{
    align-items: flex-start;
    padding: 14px 16px;
    background: #fdf6ec;
    border: 1px solid #f5d9a8;
    border-radius: 12px;
}
#lvlModal .beh-anahtar{
    display: flex; align-items: center; gap: 10px;
    font-weight: bold; color: #2c3e50; font-size: 0.98rem; cursor: pointer;
}
#lvlModal .beh-anahtar input[type="checkbox"]{
    width: 20px; height: 20px; accent-color: #D84315; cursor: pointer; flex: none;
}
#lvlModal .beh-kat-kutu{
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    transition: opacity 0.25s;
}
#lvlModal .beh-kat-kutu.pasif{ opacity: 0.35; pointer-events: none; filter: grayscale(0.7); }
#lvlModal .beh-kat-kutu label{ font-weight: bold; color: #2c3e50; font-size: 0.92rem; }
#lvlModal .beh-kat-kutu input[type="number"]{
    width: 86px; padding: 8px 10px; font-size: 1rem; font-weight: bold;
    text-align: center; border: 2px solid #e0e0e0; border-radius: 8px; color: #D84315;
}
#lvlModal .beh-kat-kutu input[type="number"]:focus{ border-color: #F39C12; outline: none; }

/* --- 2) Notlar / Sonuçlar tablosundaki "Davranışlı ORT" hücresi --- */
#ll-root .beh-ort-hucre{ white-space: nowrap; }
#ll-root .beh-ort-hucre.arti{ color: #27ae60; }
#ll-root .beh-ort-hucre.eksi{ color: #e74c3c; }
#ll-root .beh-ort-fark{
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    font-size: 0.74rem; font-weight: bold; border-radius: 20px;
    background: rgba(0,0,0,0.06); color: #7f8c8d; vertical-align: middle;
}
#ll-root .beh-ort-hucre.arti .beh-ort-fark{ background: rgba(39,174,96,0.14); color: #1e8449; }
#ll-root .beh-ort-hucre.eksi .beh-ort-fark{ background: rgba(231,76,60,0.14); color: #c0392b; }

/* --- 3) Özel Notlar modalı + otomatik artı/eksi geçmişi --- */
#noteModal .note-modal-kutu{
    background: #fff; width: 92%; max-width: 760px; max-height: 88vh;
    overflow-y: auto; padding: 28px; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
#noteModal .note-modal-kutu h3 .lli{ vertical-align: -0.2em; }
#ll-root .note-log-blok, #noteModal .note-log-blok{
    margin-top: 22px; border-top: 2px dashed #e6e6e6; padding-top: 16px;
}
#noteModal .note-log-baslik{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
#noteModal .note-log-baslik h4{
    margin: 0; font-size: 1rem; color: #D84315; font-family: 'Marhey', 'Segoe UI', sans-serif;
}
#noteModal .note-log-ozet{ display: flex; gap: 8px; flex-wrap: wrap; }
#noteModal .note-ozet-rozet{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 20px; font-size: 0.84rem; font-weight: bold;
    background: #f0f2f5; color: #566573;
}
#noteModal .note-ozet-rozet.arti{ background: rgba(39,174,96,0.13); color: #1e8449; }
#noteModal .note-ozet-rozet.eksi{ background: rgba(231,76,60,0.13); color: #c0392b; }
#noteModal .note-ozet-rozet.net{ background: #ecf0f1; color: #2c3e50; }
#noteModal .note-log-liste{ max-height: 300px; overflow-y: auto; padding-right: 4px; }
#noteModal .note-log-kayit{
    border-left: 5px solid #bdc3c7; background: #fafafa;
    border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 9px;
}
#noteModal .note-log-kayit.arti{ border-left-color: #27ae60; background: #f3fbf6; }
#noteModal .note-log-kayit.eksi{ border-left-color: #e74c3c; background: #fdf5f4; }
#noteModal .note-log-ust{
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#noteModal .note-log-puan{
    font-weight: bold; font-size: 1.02rem; min-width: 36px; text-align: center;
    padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,0.05);
}
#noteModal .note-log-kayit.arti .note-log-puan{ color: #1e8449; background: rgba(39,174,96,0.14); }
#noteModal .note-log-kayit.eksi .note-log-puan{ color: #c0392b; background: rgba(231,76,60,0.14); }
#noteModal .note-log-sebep{ font-weight: bold; color: #2c3e50; flex: 1; min-width: 120px; }
#noteModal .note-log-tarih{ font-size: 0.8rem; color: #95a5a6; white-space: nowrap; }
#noteModal .note-log-not{
    margin-top: 6px; font-size: 0.9rem; color: #566573; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
#noteModal .note-log-bos{
    margin: 0; padding: 16px; text-align: center; color: #95a5a6;
    font-size: 0.9rem; background: #fafafa; border-radius: 10px; line-height: 1.5;
}

/* --- 4) İşlemler sütunundaki Veli düğmesi --- */
#ll-root .veli-btn{ color: #8e44ad; }
#ll-root .veli-btn.dolu{ border-color: #27ae60; background: #f2fbf5; }
#ll-root .veli-btn .lli{ width: 26px; height: 26px; }

/* --- 5) Veli Bilgileri overlay --- */
#ll-root .veli-modal{
    position: fixed; inset: 0; z-index: 2600;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(5px);
    align-items: center; justify-content: center; padding: 20px;
}
#ll-root .veli-modal-kutu{
    background: #fff; width: 100%; max-width: 1080px; max-height: 92vh;
    border-radius: 20px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 26px 70px rgba(0,0,0,0.4);
}
#ll-root .veli-modal-bas{
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 26px; color: #fff;
    background: linear-gradient(90deg, #D84315 0%, #E67E22 60%, #F39C12 100%);
}
#ll-root .veli-modal-bas h3{
    margin: 0; font-size: 1.4rem; font-family: 'Marhey', 'Segoe UI', sans-serif;
    display: flex; align-items: center; gap: 8px;
}
#ll-root .veli-kapat-tus{
    border: none; background: rgba(255,255,255,0.22); color: #fff;
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem;
    line-height: 1; cursor: pointer; flex: none; transition: 0.2s;
}
#ll-root .veli-kapat-tus:hover{ background: rgba(255,255,255,0.4); transform: rotate(90deg); }
#ll-root .veli-modal-govde{ padding: 22px 26px; overflow-y: auto; flex: 1; }
#ll-root .veli-modal-alt{
    display: flex; justify-content: flex-end; gap: 12px;
    padding: 16px 26px; border-top: 1px solid #eee; background: #fafafa;
}
#ll-root .veli-vazgec, #ll-root .veli-kaydet{
    padding: 13px 30px; border: none; border-radius: 10px;
    font-size: 1.02rem; font-weight: bold; cursor: pointer; transition: 0.2s;
}
#ll-root .veli-vazgec{ background: #ecf0f1; color: #566573; }
#ll-root .veli-vazgec:hover{ background: #dfe4e6; }
#ll-root .veli-kaydet{ background: #27ae60; color: #fff; }
#ll-root .veli-kaydet:hover{ background: #219150; transform: translateY(-1px); }

#ll-root .veli-izgara{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
#ll-root .veli-kart{
    border: 1px solid #e8e8e8; border-top: 4px solid #bdc3c7;
    border-radius: 14px; padding: 16px 18px; background: #fff;
}
#ll-root .veli-kart.anne{ border-top-color: #e84393; background: #fff9fc; }
#ll-root .veli-kart.baba{ border-top-color: #0984e3; background: #f7fbff; }
#ll-root .veli-kart.iletisim{ border-top-color: #F39C12; background: #fffcf5; }
#ll-root .veli-kart.durum{ border-top-color: #27ae60; background: #f7fdf9; }
#ll-root .veli-kart.saglik{ border-top-color: #e74c3c; background: #fffafa; }
#ll-root .veli-kart.genis{ grid-column: 1 / -1; }
#ll-root .veli-kart h4{
    margin: 0 0 12px; font-size: 1.05rem; color: #2c3e50;
    display: flex; align-items: center; gap: 7px;
    font-family: 'Marhey', 'Segoe UI', sans-serif;
}
#ll-root .veli-kart label{
    display: block; margin-bottom: 11px;
    font-size: 0.86rem; font-weight: bold; color: #566573;
}
#ll-root .veli-kart label .lli{ vertical-align: -0.2em; margin-right: 3px; }
#ll-root .veli-kart input[type="text"],
#ll-root .veli-kart input[type="tel"],
#ll-root .veli-kart input[type="number"],
#ll-root .veli-kart select,
#ll-root .veli-kart textarea{
    display: block; width: 100%; margin-top: 5px;
    padding: 10px 12px; font-size: 0.98rem; font-family: inherit; font-weight: normal;
    color: #2c3e50; background: #fff;
    border: 2px solid #e4e7e9; border-radius: 9px; transition: border-color 0.2s;
}
#ll-root .veli-kart input:focus,
#ll-root .veli-kart select:focus,
#ll-root .veli-kart textarea:focus{ border-color: #F39C12; outline: none; }
#ll-root .veli-kart textarea{ resize: vertical; line-height: 1.5; }
#ll-root .veli-kart label.veli-onay{
    display: flex; align-items: center; gap: 9px; margin-top: 14px;
    padding: 10px 12px; background: rgba(0,0,0,0.03); border-radius: 9px; cursor: pointer;
}
#ll-root .veli-kart label.veli-onay input{ width: 20px; height: 20px; accent-color: #D84315; flex: none; margin: 0; }
#ll-root .veli-kart label.veli-onay span{ font-size: 0.9rem; }
#ll-root .veli-gizlilik{
    margin: 18px 0 0; padding: 12px 16px; border-radius: 10px;
    background: #f4f6f7; color: #7f8c8d; font-size: 0.86rem; line-height: 1.5;
    display: flex; align-items: center; gap: 8px;
}

/* --- 6) Veli & Durum taraması --- */
#ll-root .tarama-bas h3, #tpTaramaKutu .tarama-bas h3, #ll-root .duyuru-bas h3{
    margin: 0 0 6px; color: #D84315; font-size: 1.5rem;
    display: flex; align-items: center; gap: 9px;
    font-family: 'Marhey', 'Segoe UI', sans-serif;
}
#ll-root .tarama-aciklama, #tpTaramaKutu .tarama-aciklama{
    margin: 0 0 14px; color: #7f8c8d; font-size: 0.92rem; line-height: 1.55; max-width: 900px;
}
#ll-root .tarama-arama, #tpTaramaKutu .tarama-arama{
    width: 100%; max-width: 460px; padding: 11px 16px; font-size: 0.98rem;
    border: 2px solid #e4e7e9; border-radius: 30px; background: #fff; color: #2c3e50;
}
#ll-root .tarama-arama:focus, #tpTaramaKutu .tarama-arama:focus{ border-color: #F39C12; outline: none; }
#ll-root .tarama-cipler, #tpTaramaKutu .tarama-cipler{ display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 14px; }
#ll-root .tarama-cip, #tpTaramaKutu .tarama-cip{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border: 2px solid #e4e7e9; border-radius: 30px;
    background: #fff; color: #566573; font-size: 0.9rem; font-weight: bold;
    cursor: pointer; transition: 0.2s;
}
#ll-root .tarama-cip:hover, #tpTaramaKutu .tarama-cip:hover{ border-color: #F39C12; transform: translateY(-1px); }
#ll-root .tarama-cip b, #tpTaramaKutu .tarama-cip b{
    min-width: 22px; padding: 1px 7px; border-radius: 20px;
    background: #f0f2f5; color: #2c3e50; font-size: 0.82rem;
}
#ll-root .tarama-cip.secili, #tpTaramaKutu .tarama-cip.secili{
    background: linear-gradient(90deg, #D84315, #E67E22); border-color: #D84315; color: #fff;
}
#ll-root .tarama-cip.secili b, #tpTaramaKutu .tarama-cip.secili b{ background: rgba(255,255,255,0.28); color: #fff; }
#ll-root .tarama-ozet, #tpTaramaKutu .tarama-ozet{
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 14px; border-radius: 10px;
    background: #fdf6ec; border-left: 5px solid #F39C12; color: #2c3e50; font-size: 0.95rem;
}
#ll-root .tarama-toplam, #tpTaramaKutu .tarama-toplam{ color: #95a5a6; font-size: 0.85rem; }
#ll-root .tarama-bos, #tpTaramaKutu .tarama-bos{
    padding: 34px 20px; text-align: center; color: #95a5a6;
    background: #fafafa; border-radius: 12px; font-size: 0.98rem;
    display: flex; align-items: center; justify-content: center; gap: 9px;
}
#ll-root .tarama-tablo, #tpTaramaKutu .tarama-tablo{
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
#ll-root .tarama-tablo th, #tpTaramaKutu .tarama-tablo th{
    background: var(--primary); color: #fff; padding: 12px 10px;
    font-size: 0.88rem; text-align: left; white-space: nowrap;
}
#ll-root .tarama-tablo td, #tpTaramaKutu .tarama-tablo td{
    padding: 10px; border-bottom: 1px solid #eef1f2; font-size: 0.9rem;
    color: #2c3e50; vertical-align: top;
}
#ll-root .tarama-tablo tr:hover td, #tpTaramaKutu .tarama-tablo tr:hover td{ background: #fffaf3; }
#ll-root .tarama-tablo small, #tpTaramaKutu .tarama-tablo small{ color: #95a5a6; font-size: 0.78rem; }
#ll-root .tarama-ad, #tpTaramaKutu .tarama-ad{ font-weight: bold; }
#ll-root .tarama-vefat, #tpTaramaKutu .tarama-vefat{ color: #c0392b; font-weight: bold; display: inline-flex; align-items: center; gap: 3px; }
#ll-root .tarama-maddi, #tpTaramaKutu .tarama-maddi{
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 0.8rem; font-weight: bold; background: #f0f2f5; color: #566573; white-space: nowrap;
}
#ll-root .tarama-maddi.m-İyi, #tpTaramaKutu .tarama-maddi.m-İyi{ background: rgba(39,174,96,0.14); color: #1e8449; }
#ll-root .tarama-maddi.m-Orta, #tpTaramaKutu .tarama-maddi.m-Orta{ background: rgba(243,156,18,0.16); color: #b9770e; }
#ll-root .tarama-maddi.m-Kötü, #tpTaramaKutu .tarama-maddi.m-Kötü{ background: rgba(231,76,60,0.14); color: #c0392b; }
#ll-root .tarama-maddi.m-Çokkötü, #tpTaramaKutu .tarama-maddi.m-Çokkötü{ background: #c0392b; color: #fff; }
#ll-root .tarama-eksik, #tpTaramaKutu .tarama-eksik{ color: #e74c3c; font-style: italic; font-size: 0.84rem; }
#ll-root .tarama-not, #tpTaramaKutu .tarama-not{ max-width: 260px; color: #566573; font-size: 0.84rem; line-height: 1.45; }
#ll-root .tarama-git, #tpTaramaKutu .tarama-git{
    border: 1px solid #e4e7e9; background: #fff; border-radius: 9px;
    width: 40px; height: 40px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; color: #8e44ad;
}
#ll-root .tarama-git:hover, #tpTaramaKutu .tarama-git:hover{ background: #f6f0fb; transform: scale(1.08); }
#ll-root .tarama-git .lli, #tpTaramaKutu .tarama-git .lli{ width: 22px; height: 22px; }

/* --- 7) Sınıf Mesajları --- */
#ll-root .duyuru-izgara{
    display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.1fr); gap: 20px; align-items: start;
}
#ll-root .duyuru-sol, #ll-root .duyuru-sag{
    background: #fff; border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
#ll-root .duyuru-sol h4, #ll-root .duyuru-sag h4{
    margin: 0 0 14px; font-size: 1.08rem; color: #2c3e50;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Marhey', 'Segoe UI', sans-serif;
}
#ll-root .duyuru-kapsam{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
#ll-root .duyuru-secenek{
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border: 2px solid #e4e7e9; border-radius: 11px;
    cursor: pointer; transition: 0.2s; font-size: 0.94rem; color: #566573;
}
#ll-root .duyuru-secenek:hover{ border-color: #F39C12; }
#ll-root .duyuru-secenek.secili{ border-color: #D84315; background: #fdf6ec; color: #2c3e50; }
#ll-root .duyuru-secenek input[type="radio"]{ width: 19px; height: 19px; accent-color: #D84315; flex: none; }
#ll-root .duyuru-secenek span{ display: flex; align-items: center; gap: 7px; }
#ll-root .duyuru-secim{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
#ll-root .duyuru-secim select{
    flex: 1; min-width: 150px; padding: 10px 12px; font-size: 0.95rem;
    border: 2px solid #e4e7e9; border-radius: 9px; background: #fff; color: #2c3e50;
}
#ll-root .duyuru-secim select:focus{ border-color: #F39C12; outline: none; }
#ll-root .duyuru-hedef{
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 4px; padding: 10px 14px; border-radius: 10px;
    background: #f4f9f5; border-left: 4px solid #27ae60; color: #2c3e50; font-size: 0.9rem;
}
#ll-root .duyuru-uyari{ display: inline-flex; align-items: center; gap: 6px; color: #c0392b; font-weight: bold; }
#ll-root .duyuru-etiket{
    display: block; margin: 12px 0 5px; font-size: 0.85rem; font-weight: bold; color: #566573;
}
#ll-root .duyuru-input, #ll-root .duyuru-metin{
    width: 100%; padding: 11px 13px; font-size: 0.98rem; font-family: inherit;
    color: #2c3e50; background: #fff; border: 2px solid #e4e7e9; border-radius: 10px;
}
#ll-root .duyuru-input:focus, #ll-root .duyuru-metin:focus{ border-color: #F39C12; outline: none; }
#ll-root .duyuru-metin{ resize: vertical; line-height: 1.55; min-height: 120px; }
#ll-root .duyuru-alt{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
#ll-root .duyuru-sayac{ font-size: 0.82rem; color: #95a5a6; }
#ll-root .duyuru-gonder{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border: none; border-radius: 10px;
    background: linear-gradient(90deg, #D84315, #E67E22); color: #fff;
    font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s;
}
#ll-root .duyuru-gonder:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(216,67,21,0.3); }
#ll-root .duyuru-durum{
    display: flex; align-items: center; gap: 7px; margin-top: 10px;
    font-size: 0.9rem; font-weight: bold; min-height: 20px;
}
#ll-root .duyuru-durum.iyi{ color: #1e8449; }
#ll-root .duyuru-durum.kotu{ color: #c0392b; }
#ll-root .duyuru-gecmis{ max-height: 620px; overflow-y: auto; padding-right: 4px; }
#ll-root .duyuru-kayit{
    border: 1px solid #eef1f2; border-left: 5px solid #E67E22;
    border-radius: 0 12px 12px 0; padding: 12px 15px; margin-bottom: 11px; background: #fffdfa;
}
#ll-root .duyuru-kayit-ust{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#ll-root .duyuru-etiket-rozet{
    padding: 3px 11px; border-radius: 20px; font-size: 0.78rem; font-weight: bold;
    background: rgba(216,67,21,0.1); color: #D84315; flex: 1; min-width: 120px;
}
#ll-root .duyuru-tarih{ font-size: 0.78rem; color: #95a5a6; white-space: nowrap; }
#ll-root .duyuru-sil{
    border: none; background: transparent; cursor: pointer; padding: 2px;
    border-radius: 7px; transition: 0.2s; line-height: 0; flex: none;
}
#ll-root .duyuru-sil:hover{ background: rgba(231,76,60,0.12); }
#ll-root .duyuru-baslik{ margin-top: 8px; font-weight: bold; color: #2c3e50; font-size: 1rem; }
#ll-root .duyuru-metin-oku{
    margin-top: 5px; color: #566573; font-size: 0.92rem; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
}
#ll-root .duyuru-kayit-alt{
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 9px; border-top: 1px dashed #eee;
    font-size: 0.82rem; color: #95a5a6;
}
#ll-root .duyuru-cevap-tus{
    margin-left: auto; padding: 5px 13px; border: 1px solid #e4e7e9;
    background: #fff; border-radius: 20px; font-size: 0.8rem; font-weight: bold;
    color: #D84315; cursor: pointer; transition: 0.2s;
}
#ll-root .duyuru-cevap-tus:hover{ background: #fdf6ec; border-color: #F39C12; }
#ll-root .duyuru-cevap-liste{
    margin: -6px 0 12px 16px; padding: 10px 12px;
    border-left: 3px solid #e4e7e9; background: #fafafa; border-radius: 0 10px 10px 0;
}
#ll-root .duyuru-cevap{ padding: 7px 0; border-bottom: 1px dashed #eee; }
#ll-root .duyuru-cevap:last-child{ border-bottom: none; }
#ll-root .duyuru-cevap b{ color: #2c3e50; font-size: 0.88rem; margin-right: 7px; }
#ll-root .duyuru-cevap p{
    margin: 4px 0 0; font-size: 0.9rem; color: #566573; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
}
#ll-root .duyuru-cevap.benim b{ color: #D84315; }

/* --- 8) Öğrenci tarafı: gelen mesajlar --- */
#ll-root .ogr-mesaj-kutu{ margin-top: 10px; }
#ll-root .ogr-mesaj-bos{
    padding: 22px; text-align: center; color: #95a5a6;
    background: #fafafa; border-radius: 12px; font-size: 0.92rem;
}
#ll-root .ogr-mesaj{
    border: 1px solid #eef1f2; border-left: 5px solid #E67E22;
    border-radius: 0 12px 12px 0; padding: 12px 15px; margin-bottom: 11px; background: #fff;
}
#ll-root .ogr-mesaj.yeni{ border-left-color: #27ae60; background: #f7fdf9; }
#ll-root .ogr-mesaj-baslik{ font-weight: bold; color: #2c3e50; }
#ll-root .ogr-mesaj-metin{
    margin-top: 5px; color: #566573; font-size: 0.93rem; line-height: 1.55; white-space: pre-wrap;
}
#ll-root .ogr-mesaj-cevaplar{ margin-top: 9px; padding-top: 9px; border-top: 1px dashed #eee; }
#ll-root .ogr-cevap{ padding: 6px 0; font-size: 0.9rem; color: #566573; }
#ll-root .ogr-cevap b{ color: #D84315; margin-right: 6px; }
#ll-root .ogr-cevap-alan{ display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
#ll-root .ogr-cevap-alan input{
    flex: 1; min-width: 160px; padding: 10px 13px; font-size: 0.95rem;
    border: 2px solid #e4e7e9; border-radius: 9px;
}
#ll-root .ogr-cevap-alan input:focus{ border-color: #F39C12; outline: none; }
#ll-root .ogr-cevap-alan button{
    padding: 10px 20px; border: none; border-radius: 9px; cursor: pointer;
    background: #27ae60; color: #fff; font-weight: bold; font-size: 0.92rem;
}
#ll-root .ogr-cevap-alan button:hover{ background: #219150; }
#ll-root .ogr-mesaj-rozet{
    display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
    border-radius: 20px; background: #e74c3c; color: #fff;
    font-size: 0.75rem; font-weight: bold; vertical-align: middle;
}

/* --- 9) Dar ekran uyumu --- */
@media (max-width: 1100px){
    #ll-root .duyuru-izgara{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
    #ll-root .veli-modal-kutu{ max-height: 96vh; }
    #ll-root .veli-modal-govde{ padding: 16px; }
    #ll-root .veli-izgara{ grid-template-columns: 1fr; }
    #ll-root .tarama-tablo{ display: block; overflow-x: auto; }   /* profil surumu kendi kutusunda kayar */
    #ll-root .veli-modal-alt{ padding: 12px 16px; }
    #ll-root .veli-vazgec, #ll-root .veli-kaydet{ flex: 1; padding: 13px 10px; }
}

/* ==========================================================================
   10) İletişim Merkezi — kulaklık pop-up'ı içindeki sınıf mesajlaşması
   DİKKAT: #imGovde, #ll-root'un DIŞINDA (#myMsgModal içinde) durur.
   Bu yüzden bu bloktaki kurallar KAPSAMSIZ (unscoped) yazılmıştır.
   Öğrenci kutusu (#ogrMesajModal) ise #ll-root İÇİNDEdir; oradaki
   #ll-root input[type="text"] kuralını ezmek için ayrıca override var.
   ========================================================================== */

/* --- 10.1) Mod çubuğu: Öğrencilerim / Yöneticiyle Yazış --- */
.mymsg-mode{
    display: flex; gap: 8px; padding: 10px 12px;
    background: #eef6f4; border-bottom: 1px solid #dfeae7; flex: none;
}
.mymsg-mode-tus{
    flex: 1; padding: 10px 12px; border: 2px solid transparent;
    border-radius: 10px; background: #fff; color: #566573;
    font-family: inherit; font-size: 0.92rem; font-weight: bold;
    cursor: pointer; transition: 0.2s; line-height: 1.2;
}
.mymsg-mode-tus:hover{ border-color: #16A085; color: #16A085; }
.mymsg-mode-tus.secili{
    background: linear-gradient(90deg, #16A085, #1ABC9C);
    color: #fff; border-color: #16A085; box-shadow: 0 3px 10px rgba(22,160,133,0.28);
}

/* --- 10.2) Gövde --- */
.im-govde{
    flex: 1; min-height: 300px; max-height: 68vh; overflow-y: auto;
    padding: 14px 16px 18px; background: #f7f9fc;
    color: #2c3e50; font-size: 0.95rem; text-align: left;
}
.im-govde *{ box-sizing: border-box; }

/* --- 10.3) Yol (breadcrumb) --- */
.im-yol{
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #dfe4ea;
}
.im-yol-tus{
    border: none; background: transparent; cursor: pointer; padding: 4px 8px;
    border-radius: 8px; color: #16A085; font-family: inherit;
    font-size: 0.85rem; font-weight: bold; transition: 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
}
.im-yol-tus:hover{ background: rgba(22,160,133,0.1); }
.im-yol-tus .lli{ width: 17px; height: 17px; }
.im-yol-ayrac{ color: #b2bec3; font-size: 0.9rem; }
.im-yol-son{ padding: 4px 8px; font-size: 0.85rem; font-weight: bold; color: #7f8c8d; }

/* --- 10.4) Başlık satırı --- */
.im-baslik-satir{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.im-baslik-satir h4{
    margin: 0; font-size: 1.05rem; color: #2c3e50;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Marhey', 'Segoe UI', sans-serif;
}
.im-baslik-satir h4 .lli{ width: 22px; height: 22px; }
.im-etiket-kucuk{
    padding: 3px 11px; border-radius: 20px; font-size: 0.78rem; font-weight: bold;
    background: rgba(22,160,133,0.1); color: #16A085;
}
.im-aciklama{
    margin: 0 0 12px; font-size: 0.83rem; color: #7f8c8d; line-height: 1.5;
}
.im-alt-baslik{
    margin: 18px 0 9px; font-size: 0.92rem; color: #566573;
    display: flex; align-items: center; gap: 7px;
    font-family: 'Marhey', 'Segoe UI', sans-serif;
}
.im-alt-baslik .lli{ width: 18px; height: 18px; }

.im-hepsi-tus{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; border: none; border-radius: 20px;
    background: linear-gradient(90deg, #D84315, #E67E22); color: #fff;
    font-family: inherit; font-size: 0.82rem; font-weight: bold;
    cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.im-hepsi-tus:hover{ transform: translateY(-1px); box-shadow: 0 5px 14px rgba(216,67,21,0.3); }
.im-hepsi-tus .lli{ width: 17px; height: 17px; }

/* --- 10.5) Liste satırları --- */
.im-liste{ display: flex; flex-direction: column; gap: 9px; }
.im-satir{
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e8edf1; border-radius: 13px;
    padding: 7px 9px; transition: 0.2s;
}
.im-satir:hover{ border-color: #16A085; box-shadow: 0 4px 12px rgba(22,160,133,0.12); }
.im-satir-ana{
    flex: 1; min-width: 200px; display: flex; align-items: center; gap: 11px;
    border: none; background: transparent; cursor: pointer;
    padding: 7px 6px; border-radius: 10px; text-align: left;
    font-family: inherit; color: #2c3e50;
}
.im-satir-ana:hover{ background: #f4faf9; }
.im-ikon{
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22,160,133,0.1); color: #16A085;
}
.im-ikon .lli{ width: 23px; height: 23px; }
span.im-metin{
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
span.im-metin b{ font-size: 0.96rem; color: #2c3e50; }
span.im-metin em{
    font-style: normal; font-size: 0.79rem; color: #95a5a6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-ok{ flex: none; color: #b2bec3; font-size: 1.35rem; line-height: 1; }
.im-rozet{
    flex: none; min-width: 21px; padding: 2px 8px; border-radius: 20px;
    background: #e74c3c; color: #fff; font-size: 0.74rem; font-weight: bold;
    text-align: center;
}
.im-mesaj-tus{
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid #f0d5c4; border-radius: 20px;
    background: #fff8f3; color: #D84315;
    font-family: inherit; font-size: 0.79rem; font-weight: bold;
    cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.im-mesaj-tus:hover{ background: #D84315; color: #fff; border-color: #D84315; }
.im-mesaj-tus .lli{ width: 16px; height: 16px; }

/* --- 10.6) Boş durum --- */
.im-bos{
    padding: 30px 20px; text-align: center; color: #95a5a6;
    background: #fff; border: 1px dashed #dfe4ea; border-radius: 14px;
}
.im-bos .lli{ width: 40px; height: 40px; color: #f39c12; }
.im-bos p{ margin: 9px 0 0; font-size: 0.94rem; }
.im-bos-alt{ font-size: 0.83rem !important; color: #b2bec3; line-height: 1.5; }

/* --- 10.7) Sohbet (1-1 yazışma) --- */
.im-sohbet{
    display: flex; flex-direction: column; gap: 10px;
    max-height: 46vh; overflow-y: auto;
    padding: 14px; background: #fff;
    border: 1px solid #e8edf1; border-radius: 14px;
}
.im-sohbet-bos{
    margin: 0; padding: 26px 12px; text-align: center;
    color: #95a5a6; font-size: 0.9rem;
}
.im-sohbet-bos .lli{ width: 30px; height: 30px; display: block; margin: 0 auto 8px; color: #f39c12; }
.im-balon{
    max-width: 82%; padding: 10px 14px; border-radius: 16px;
    font-size: 0.92rem; line-height: 1.55; word-break: break-word;
}
.im-balon p{ margin: 0; white-space: pre-wrap; }
.im-balon.benim{
    align-self: flex-end; background: linear-gradient(135deg, #16A085, #1ABC9C);
    color: #fff; border-bottom-right-radius: 5px;
}
.im-balon.ogrenci{
    align-self: flex-start; background: #f1f4f7; color: #2c3e50;
    border-bottom-left-radius: 5px;
}
.im-balon-baslik{ display: block; margin-bottom: 4px; font-size: 0.9rem; }
.im-balon-tarih{ display: block; margin-top: 5px; font-size: 0.71rem; opacity: 0.75; }
.im-toplu-rozet{
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 5px; padding: 2px 9px; border-radius: 20px;
    background: rgba(255,255,255,0.25); font-size: 0.7rem; font-weight: bold;
}
.im-balon.ogrenci .im-toplu-rozet{ background: rgba(216,67,21,0.12); color: #D84315; }
.im-toplu-rozet .lli{ width: 13px; height: 13px; }

/* --- 10.8) Yazma alanı --- */
.im-yaz{ display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.im-yaz input{
    flex: 1; min-width: 150px; padding: 11px 14px;
    font-family: inherit; font-size: 0.94rem; color: #2c3e50;
    border: 2px solid #e4e7e9; border-radius: 22px; background: #fff;
}
.im-yaz input:focus{ border-color: #16A085; outline: none; }
.im-yaz button{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 20px; border: none; border-radius: 22px;
    background: linear-gradient(90deg, #16A085, #1ABC9C); color: #fff;
    font-family: inherit; font-size: 0.9rem; font-weight: bold;
    cursor: pointer; transition: 0.2s;
}
.im-yaz button:hover{ transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,160,133,0.3); }
.im-yaz button .lli{ width: 17px; height: 17px; }
.im-gizlilik{
    display: flex; align-items: flex-start; gap: 7px;
    margin: 11px 0 0; padding: 9px 12px; border-radius: 10px;
    background: #f4f9f5; border-left: 4px solid #27ae60;
    font-size: 0.79rem; color: #566573; line-height: 1.5;
}
.im-gizlilik .lli{ flex: none; width: 16px; height: 16px; color: #27ae60; margin-top: 1px; }

/* --- 10.9) Toplu mesaj formu --- */
.im-hedef-kutu{
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-bottom: 11px; padding: 11px 14px; border-radius: 11px;
    background: #fff8f3; border-left: 4px solid #D84315;
    font-size: 0.9rem; color: #2c3e50;
}
.im-hedef-kutu .lli{ width: 19px; height: 19px; color: #D84315; }
.im-hedef-kutu b{ color: #D84315; font-size: 1.05rem; }
.im-hedef-kutu em{ font-style: normal; color: #7f8c8d; }
.im-input, textarea.im-metin{
    width: 100%; margin-bottom: 9px; padding: 11px 14px;
    font-family: inherit; font-size: 0.95rem; color: #2c3e50;
    background: #fff; border: 2px solid #e4e7e9; border-radius: 11px;
}
.im-input:focus, textarea.im-metin:focus{ border-color: #16A085; outline: none; }
textarea.im-metin{ resize: vertical; min-height: 110px; line-height: 1.55; }
.im-yaz-alt{
    display: flex; align-items: center; justify-content: space-between;
    gap: 11px; flex-wrap: wrap;
}
.im-sayac{ font-size: 0.79rem; color: #95a5a6; }
.im-gonder-tus{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 26px; border: none; border-radius: 11px;
    background: linear-gradient(90deg, #D84315, #E67E22); color: #fff;
    font-family: inherit; font-size: 0.95rem; font-weight: bold;
    cursor: pointer; transition: 0.2s;
}
.im-gonder-tus:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(216,67,21,0.3); }
.im-gonder-tus .lli{ width: 18px; height: 18px; }
.im-durum{
    display: flex; align-items: center; gap: 7px; margin-top: 9px;
    font-size: 0.88rem; font-weight: bold; min-height: 18px;
}
.im-durum .lli{ width: 17px; height: 17px; }
.im-durum.iyi{ color: #1e8449; }
.im-durum.kotu{ color: #c0392b; }

/* --- 10.10) Gönderilenler geçmişi --- */
.im-gecmis{ display: flex; flex-direction: column; gap: 9px; }
.im-gecmis-kayit{
    background: #fff; border: 1px solid #eef1f2; border-left: 5px solid #E67E22;
    border-radius: 0 12px 12px 0; padding: 11px 14px;
}
.im-gecmis-ust{ display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.im-gecmis-kayit b{ display: block; margin-top: 6px; color: #2c3e50; font-size: 0.94rem; }
.im-gecmis-kayit p{
    margin: 5px 0 0; color: #566573; font-size: 0.89rem; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
}
.im-tarih{ font-size: 0.77rem; color: #95a5a6; }
.im-sil{
    border: none; background: transparent; cursor: pointer; padding: 3px;
    border-radius: 7px; transition: 0.2s; line-height: 0;
}
.im-sil:hover{ background: rgba(231,76,60,0.12); }
.im-sil .lli{ width: 17px; height: 17px; color: #e74c3c; }
.im-gecmis-alt{
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 9px; padding-top: 8px; border-top: 1px dashed #eee;
    font-size: 0.79rem; color: #95a5a6;
}
.im-gecmis-alt .lli{ width: 15px; height: 15px; }

/* --- 10.11) Öğrenci kutusu (#ll-root İÇİNDE) — özgüllük ezmeleri --- */
#ll-root .im-sohbet{ max-height: 52vh; }
#ll-root .im-sohbet.ogr{ background: #fff; }
#ll-root .im-yaz{ display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
#ll-root .im-yaz input[type="text"]{
    flex: 1; width: auto; min-width: 150px; padding: 11px 14px;
    border: 2px solid #e4e7e9; border-radius: 22px;
    font-family: inherit; font-size: 0.94rem; color: #2c3e50; background: #fff;
}
#ll-root .im-yaz input[type="text"]:focus{ border-color: #16A085; outline: none; }
#ll-root .im-balon{ max-width: 84%; }
#ll-root .im-balon p{ margin: 0; }
#ll-root .im-gizlilik{ margin-top: 11px; }

/* --- 10.12) Dar ekran --- */
@media (max-width: 760px){
    .im-govde{ padding: 12px 12px 16px; max-height: 66vh; }
    .im-baslik-satir{ align-items: flex-start; }
    .im-baslik-satir h4{ font-size: 0.98rem; }
    .im-hepsi-tus{ width: 100%; justify-content: center; }
    .im-satir{ flex-direction: column; align-items: stretch; }
    .im-satir-ana{ min-width: 0; }
    .im-mesaj-tus{ width: 100%; justify-content: center; }
    .im-balon{ max-width: 92%; }
    .im-sohbet{ max-height: 40vh; padding: 11px; }
    .im-yaz button, .im-gonder-tus{ width: 100%; justify-content: center; }
    .mymsg-mode-tus{ font-size: 0.85rem; padding: 9px 8px; }
}


/* ======================================================================
   11) SIDEBAR — ACIK (KREM) TEMA
   Turuncu gradyan zeminde klasor / kalem / cop SVG'leri (sari-turuncu-
   kirmizi ailesi) kayboluyordu. Sidebar krem zemine alindi; kimlik rengi
   ust seritte ve vurgu ogelerinde korundu. Ikonlar dogal renkleriyle
   net okunuyor; yalnizca secili sinif satirinda beyaz siluete cevriliyor.
   ====================================================================== */

#ll-root #sidebar{
    background: #FFF8F2;
    color: #5A4034;
    border-right: 1px solid #F3DCC9;
    box-shadow: inset -1px 0 0 rgba(216, 67, 21, .04);
}

/* --- 11.1 ust serit (kimlik rengi burada yasiyor) --- */
#ll-root #sidebar > div:first-child{
    margin: -15px -15px 14px;
    padding: 15px;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 48%, #D84315 100%);
    box-shadow: 0 2px 8px rgba(216, 67, 21, .18);
}
#ll-root #sidebar h2,
#ll-root #sidebar #listelerim-home-ico{ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* --- 11.2 ogretmen kodu --- */
#ll-root #teacher-code-display{ color: #B34700 !important; opacity: 1 !important; }
#ll-root .teacher-code-area{
    background: #fff;
    border: 1px dashed #E8A87C;
    box-shadow: 0 2px 6px rgba(216, 67, 21, .07);
}
#ll-root .teacher-code-area .tk-etiket{ color: #B34700; }
#ll-root .teacher-code-area .tk-kod{ color: #D84315; }

/* --- 11.3 seviye kutusu --- */
#ll-root #sidebar .level-container{
    background: #fff;
    border: 1px solid #F3E2D3;
    box-shadow: 0 2px 7px rgba(216, 67, 21, .06);
    padding: 6px;
}
#ll-root #sidebar .level-head{
    background: linear-gradient(90deg, #FFF1E6 0%, #FFE4D0 100%);
    color: #9C3B0C;
    border-left: 4px solid #E67E22;
}
#ll-root #sidebar .level-head > span{ color: #9C3B0C; }

/* --- 11.4 seviye / sinif islem tuslari --- */
#ll-root #sidebar .level-actions button,
#ll-root #sidebar .class-actions button{
    background: #fff;
    color: #B34700;
    border: 1px solid #F0DACA;
    box-shadow: 0 1px 3px rgba(216, 67, 21, .07);
}
#ll-root #sidebar .level-actions button:hover,
#ll-root #sidebar .class-actions button:hover{
    background: #F39C12;
    color: #fff;
}
#ll-root #sidebar .ll-sinif-ekle{ color: #B34700 !important; font-weight: 700; }
#ll-root #sidebar .ll-sinif-ekle:hover{ color: #fff !important; }

/* --- 11.5 sinif satiri --- */
#ll-root #sidebar .class-item:hover{ background: #FFF1E6; }
#ll-root #sidebar .class-link{ color: #6B4A38; }
#ll-root #sidebar .class-link:hover{ color: #D84315; }
#ll-root #sidebar .class-item.active-class{
    background: linear-gradient(90deg, #E74C3C 0%, #D84315 100%) !important;
    box-shadow: 0 3px 9px rgba(216, 67, 21, .28);
}
#ll-root #sidebar .class-item.active-class .class-link{ color: #fff !important; }
/* secili satirda ikon beyaz silueta cevrilir (turuncu ikon kirmizi zeminde kaybolmasin) */
#ll-root #sidebar .class-item.active-class .lli{ filter: brightness(0) invert(1); }
#ll-root #sidebar .class-item.active-class .class-actions button{
    background: rgba(255,255,255,.22); color: #fff;
}
#ll-root #sidebar .class-item.active-class .class-actions .lli{ filter: brightness(0) invert(1); }

/* --- 11.6 kaydirma cubugu --- */
#ll-root #levelNav::-webkit-scrollbar{ width: 8px; }
#ll-root #levelNav::-webkit-scrollbar-track{ background: transparent; }
#ll-root #levelNav::-webkit-scrollbar-thumb{ background: #F0C9AC; border-radius: 6px; }
#ll-root #levelNav::-webkit-scrollbar-thumb:hover{ background: #E8A87C; }

/* --- 11.7 alt bolum --- */
#ll-root #sidebar .role-preview-buttons button{
    box-shadow: 0 2px 6px rgba(123, 31, 162, .12);
}

/* ======================================================================
   12) BÜYÜTÜLMÜŞ SIDEBAR + BÜYÜTÜLMÜŞ İKONLAR + GENİŞ MOBİL UYUM
   ----------------------------------------------------------------------
   12.1  Sidebar 300px -> 348px, yazi ve tuslar orantili buyutuldu.
   12.2  SVG ikon olculeri (.lli ailesi) genel olarak buyutuldu.
   12.3  <=1024px : sidebar daralir, sekmeler kaydirilir.
   12.4  <=900px  : sidebar OFF-CANVAS cekmeceye doner, icerik tam genislik,
                    sekmeler yatay kaydirilan "hap" seridi olur, tablolar
                    yatay kaydirilir, sayac/kronometre olculeri kucultulur.
   12.5  <=480px  : en dar telefonlar icin ek sikistirma.
   ====================================================================== */

/* ---------------------------------------------- 12.1 SIDEBAR BUYUTME */
#ll-root #sidebar{
    width: 348px;
    padding: 18px;
    font-size: 1.05rem;
}
#ll-root #sidebar > div:first-child{
    margin: -18px -18px 16px;
    padding: 18px;
}
#ll-root #sidebar h2{ font-size: 1.6rem; }
#ll-root #sidebar .btn-add{
    padding: 13px 12px;
    font-size: 1.02rem;
    border-radius: 9px;
    font-weight: 700;
}
#ll-root #sidebar .level-container{ padding: 8px; margin-bottom: 16px; }
#ll-root #sidebar .level-head{ padding: 11px 12px; gap: 8px; }
#ll-root #sidebar .level-head > span{ font-size: 1.1rem; font-weight: 700; }
#ll-root #sidebar .class-item{ padding: 8px 10px; }
#ll-root #sidebar .class-link{ font-size: 1.04rem; }
#ll-root #sidebar .level-actions button,
#ll-root #sidebar .class-actions button{ font-size: 15px; padding: 6px 12px; }
#ll-root #teacher-code-display{ font-size: 0.95rem; }
#ll-root .teacher-code-area .tk-etiket{ font-size: 0.78rem !important; }
#ll-root .teacher-code-area .tk-kod{ font-size: 1.35rem !important; }
#ll-root .role-preview-buttons button{ font-size: 1.02rem; padding: 12px; font-weight: 700; }

/* ---------------------------------------------- 12.2 IKONLAR BUYUTME */
#ll-root .lli, .lli{
    width: 1.4em; height: 1.4em;
    vertical-align: -0.26em;
}
.lli-b { width: 1.85em; height: 1.85em; }
.lli-xl { width: 3em; height: 3em; vertical-align: -0.42em; }
.lli-xxl { width: 4.2em; height: 4.2em; vertical-align: -0.48em; }
#ll-root #sidebar .level-head .lli{ width: 1.65em; height: 1.65em; }
#ll-root #sidebar .class-link .lli{ width: 1.5em; height: 1.5em; }
#ll-root #sidebar .level-actions .lli,
#ll-root #sidebar .class-actions .lli{ width: 1.3em; height: 1.3em; }
#ll-root #sidebar h2 .lli{ width: 1.5em; height: 1.5em; }
#ll-root .tab .lli{ width: 1.35em; height: 1.35em; }
#ll-root .ll-reopen .lli{ width: 1.6em; height: 1.6em; }
#ll-root h3 .lli{ width: 1.45em; height: 1.45em; }

/* Cekmece arka plani (yalnizca mobilde gorunur) */
#ll-root .ll-backdrop{ display: none; }

/* ================================================ 12.3 <=1024px TABLET */
@media (max-width: 1024px){
    #ll-root #sidebar{ width: 290px; padding: 14px; font-size: 1rem; }
    #ll-root #sidebar > div:first-child{ margin: -14px -14px 12px; padding: 14px; }
    #ll-root #sidebar h2{ font-size: 1.35rem; }
    #ll-root #content{ padding: 18px; }
    #ll-root .tabs{ flex-wrap: nowrap; overflow-x: auto; }
    #ll-root .tab{ flex: 0 0 auto; padding: 12px 16px; font-size: 1rem; }
}

/* ============================================ 12.4 <=900px TELEFON/TABLET
   Sidebar her genislikte ustten inen PERDE oldu (bolum "IPLI PERDE",
   dosyanin sonuna yakin). Burada yalnizca icerik/sekme/tablo gibi dar
   ekran duzeni kaldi.                                                   */
@media (max-width: 900px){

    #ll-root{
        display: block;
        height: auto;
        min-height: 62vh;
    }

    #ll-root #sidebar > div:first-child{ margin: -16px -16px 12px; padding: 16px; }

    /* --- icerik --- */
    #ll-root.logged-in #content{
        margin-left: 0;
        padding: 14px 12px 24px;
        overflow-y: visible;
    }
    #ll-root .header{ padding: 14px; margin-bottom: 14px; }
    #ll-root .header h2{ font-size: 1.35rem; }

    /* --- SEKMELER: yatay kaydirilan hap seridi --- */
    #ll-root .tabs{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        border-bottom: none;
        margin: 0 -12px 14px;
        padding: 4px 12px 10px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #ll-root .tabs::-webkit-scrollbar{ height: 5px; }
    #ll-root .tabs::-webkit-scrollbar-track{ background: transparent; }
    #ll-root .tabs::-webkit-scrollbar-thumb{ background: #F0C9AC; border-radius: 6px; }
    #ll-root .tab{
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: .95rem;
        border-radius: 24px;
        border-bottom: none !important;
        box-shadow: none;
        scroll-snap-align: start;
        display: inline-flex; align-items: center; gap: 6px;
    }
    #ll-root .tab.active{
        background: var(--primary);
        color: #fff;
        box-shadow: 0 3px 10px rgba(216,67,21,.3);
    }
    #ll-root .tab .lli{ width: 1.2em; height: 1.2em; }

    /* --- PANELLER --- */
    #ll-root .tab-panel{ padding: 14px 12px; border-radius: 12px; }
    #ll-root .tab-panel h3{ font-size: 1.15rem; }

    /* --- TABLOLAR: yatay kaydirma --- */
    #ll-root .tab-panel table{
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    #ll-root .tab-panel th,
    #ll-root .tab-panel td{ padding: 8px 7px; font-size: .92rem; }
    #ll-root #stuTable th{ font-size: .95rem; padding: 9px 6px; }
    #ll-root #stuTable input[type="text"]{ font-size: 1rem !important; }
    #ll-root #planTable th{ width: auto !important; min-width: 88px; }
    #ll-root input[type="number"], #ll-root input[type="text"]{ width: 100%; }

    /* --- tab0 giris satiri: alt alta --- */
    #ll-root #tab0 > div[style*="display: flex"]{
        flex-direction: column;
        align-items: stretch;
    }

    /* --- KURA / ETKINLIK --- */
    #ll-root #luckyBox{ padding: 18px !important; font-size: 1.6rem !important; }
    #ll-root .activity-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    #ll-root .act-btn{ padding: 16px 10px; font-size: .98em; }

    /* --- SAYAC / KRONOMETRE --- */
    #ll-root .tool-display{ font-size: 2.6rem !important; padding: 14px !important; margin: 12px 0 !important; }
    #ll-root .tool-controls{ flex-wrap: wrap; gap: 12px !important; }
    #ll-root .tool-btn{ padding: 10px 18px; font-size: 1em; }
    /* geri sayim: dairesel +/- tuslari ve dakika rakami */
    #ll-root #llAracSayim .tool-controls > div:first-child{ padding: 14px !important; gap: 12px !important; }
    #ll-root #llAracSayim .tool-controls > div:first-child > button{
        width: 56px !important; height: 56px !important; font-size: 1.9rem !important;
    }
    #ll-root #manual-min-val{ font-size: 2.6rem !important; }
    #ll-root #llAracSayim .tool-controls > div:last-child{ flex-wrap: wrap; justify-content: center; }
    #ll-root #llAracSayim .tool-controls > div:last-child button{
        padding: 11px 20px !important; font-size: 1rem !important;
    }

    /* --- TAKIMLAR --- */
    #ll-root .team-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }

    /* --- OGRENCI GORUNUMU KAPLAMASI --- */
    #ll-root #student-overlay{ padding: 18px 12px !important; }
    #ll-root #student-overlay .student-content-wrapper > div:first-child{
        flex-direction: column; gap: 12px; text-align: center; padding: 14px !important;
        margin-bottom: 20px !important;
    }
    #ll-root #student-overlay h1{ font-size: 1.5rem !important; }
    #ll-root #student-dynamic-content{ grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ================================================ 12.5 <=480px DAR EKRAN */
@media (max-width: 480px){
    #ll-root.logged-in #content{ padding: 12px 8px 20px; }
    #ll-root .tabs{ margin: 0 -8px 12px; padding: 4px 8px 10px; }
    #ll-root .tab{ padding: 9px 13px; font-size: .88rem; }
    #ll-root .tab-panel{ padding: 12px 9px; }
    #ll-root .ll-mod-hap{ padding: 8px 14px; font-size: .88rem; }
    #ll-root .header h2{ font-size: 1.15rem; }
    #ll-root .activity-grid{ grid-template-columns: 1fr; }
    #ll-root .team-grid{ grid-template-columns: 1fr; }
    #ll-root .tool-display{ font-size: 2.1rem !important; }
    #ll-root #manual-min-val{ font-size: 2.1rem !important; }
    #ll-root #llAracSayim .tool-controls > div:first-child > button{
        width: 50px !important; height: 50px !important; font-size: 1.6rem !important;
    }
    #ll-root #luckyBox{ font-size: 1.3rem !important; padding: 14px !important; }
    #ll-root .lli, .lli{ width: 1.3em; height: 1.3em; }
}


/* ==========================================================================
   MASAUSTU kenar cubugu dengesi:
   - SINIF satirlari BUYUK (kolay hedef)
   - diger basliklar/tuslar (Listelerim, Ogretmen Girisi, Tatiller,
     Seviye Ekle, Bekleyen Istekler, ogretmen kodu) KUCUK, sol svg'li
   ========================================================================== */
@media (min-width: 1024px){
    #ll-root #sidebar{ width: 360px; font-size: 1rem; }
    #ll-root #sidebar h2{ font-size: 1.35em; }
    #ll-root #sidebar h2 .lli{ width: 1.25em; height: 1.25em; }

    /* seviye basligi kucuk; SINIF satirlari buyuk */
    #ll-root #sidebar .level-head{ font-size: 1rem; padding: 8px 10px; }
    #ll-root #sidebar .level-head .lli{ width: 1.2em; height: 1.2em; }
    #ll-root #sidebar .class-item{ padding: 10px 12px; }
    #ll-root #sidebar .class-link{ font-size: 1.25rem; }
    #ll-root #sidebar .class-link .lli{ width: 1.4em; height: 1.4em; }
    #ll-root #sidebar .class-list{ margin-left: 12px; }
    #ll-root #sidebar .level-actions button,
    #ll-root #sidebar .class-actions button{ font-size: 1rem; }
}

/* Kenar cubugu tuslari (her genislikte): kucuk, SOLDAN svg'li */
#ll-root #sidebar > div .btn-add{
    display: flex; align-items: center; justify-content: flex-start; gap: 9px;
    font-size: .92rem; padding: 9px 12px; text-align: left;
}
#ll-root #sidebar > div .btn-add .lli{ width: 1.25em; height: 1.25em; flex: 0 0 auto; }

/* Ogretmen kodu karti: kucuk */
#ll-root .teacher-code-area{ padding: 9px 11px !important; }
#ll-root .teacher-code-area .tk-etiket{ font-size: .78rem !important; }
#ll-root .teacher-code-area .tk-kod{ font-size: 1.02rem !important; letter-spacing: .5px; }
#ll-root .teacher-code-area button{ font-size: .78rem !important; padding: 5px 9px !important; }
#ll-root .teacher-code-area .lli{ width: 1.1em; height: 1.1em; }

/* Bekleyen Istekler: kucuk baslik gorunumu */
#ll-root #ohIstekTus{ font-size: .88rem !important; padding: 9px 11px !important;
    justify-content: flex-start !important; }
#ll-root #ohIstekTus .lli{ width: 1.2em; height: 1.2em; }

/* Ogretmen kodu: tiklaninca acilir (details) */
#ll-root .teacher-code-area summary::-webkit-details-marker{ display: none; }
#ll-root .teacher-code-area[open] .tk-ok{ transform: rotate(90deg); }
#ll-root #sidebar .ll-seviye-ekle-tus{ justify-content: center; }


/* ==========================================================================
   IPLI PERDE SIDEBAR (HER GENISLIK)
   Kenar cubugu ustten inen bir PERDE oldu: kapaliyken basligin altinda
   yalniz asagi-ok tutamaci gorunur (ust-orta); tiklaninca perde ASAGI
   iner, sinif secilince / toplama tusuna basilinca ipiyle cekilmis gibi
   YUKARI toplanir. Ac/kapa mantigi ayni: .sidebar-closed sinifi.
   ========================================================================== */
#ll-root.logged-in{ display: block; height: auto; min-height: 72vh; }
#ll-root.logged-in #sidebar,
#ll-root.logged-in.sidebar-closed #sidebar{
    box-sizing: border-box;
    /* OVERLAY DEGIL: liste SAYFANIN KENDISINDE, basligin altindaki bant
       olarak akista durur; acikken icerigi (sekmeleri) asagi iter. */
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding: 18px;                 /* .sidebar-closed'in eski width:0/padding:0 mirasini iptal eder */
    z-index: auto;
    display: flex; flex-direction: column;
    overflow: visible;
    transform: none;
    transition: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
    border-radius: 0;
}
/* Kapaliyken bant tamamen toplanir (sayfadan kalkar, icerik yukari cikar) */
#ll-root.logged-in.sidebar-closed #sidebar{ display: none !important; }
/* perde govdesi: baslik seridi kenarlara tam otursun ve SITE BASLIGININ
   devami gibi gorunsun (ayni 90 derece gradyan) */
#ll-root.logged-in #sidebar > div:first-child{
    margin: -18px -18px 14px; padding: 15px 18px;
    background: linear-gradient(90deg, #FFC107 0%, #F39C12 50%, #EF5350 100%);
}
/* seviye listesi perde icinde kayar (flex kucultmesine izin ver) */
#ll-root.logged-in #levelNav{ min-height: 0; }
/* Bant sayfada oldugu icin arka karartma HIC kullanilmaz */
#ll-root.logged-in .ll-backdrop,
#ll-root.logged-in.sidebar-closed .ll-backdrop{ display: none !important; }
#ll-root.logged-in #content{ margin-left: 0; }
/* genis perdede seviye kutulari iki kolona otursun */
#ll-root.logged-in #levelNav .kurum-ic,
#ll-root.logged-in #levelNav{ column-gap: 10px; }

/* --- perde etegi: alt kenarda "yukari topla" ip tutamaci --- */
#ll-root #sidebar .ll-perde-hem{ display: none; }
#ll-root.logged-in #sidebar .ll-perde-hem{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 0 auto;
    margin: 12px -18px -18px;      /* padding'i tasarak tam genislik serit olur */
    padding: 9px 0 11px;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 48%, #D84315 100%);
    color: #fff;
    font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 -3px 10px rgba(216, 67, 21, .18);
}
#ll-root.logged-in #sidebar .ll-perde-hem svg{ width: 1.4em; height: 1.4em; transition: transform .2s ease; }
#ll-root.logged-in #sidebar .ll-perde-hem:hover svg{ transform: translateY(-2px); }

/* --- MASAUSTU: perde ici 2 SUTUN ("ek header" duzeni) ---
   SOL dar sutun: Ogretmen Girisi + Tatiller (#llKisayollar), ogretmen kodu
   ve Bekleyen Istekler (#teacher-code-display). SAG genis sutun: kurumlar,
   seviyeler, siniflar (#levelNav). Yukseklik icerige gore uzar
   (ust kuralin height:auto + max-height'i gecerli). --- */
@media (min-width: 901px){
    /* DIKKAT: bu kural yalniz ACIK secicide kalmali — kapali secici burada
       olursa display:grid, kapali durumun display:none'unu ezer. */
    #ll-root.logged-in:not(.sidebar-closed) #sidebar{
        /* SABIT kenar boslugu: her acilista ayni gorunum, esneyen/ortalanan
           bosluk yok — liste kalan TUM genisligi hemen kullanir. */
        padding: 0 26px;
        /* !important: satir ~474'teki "display:flex !important" login kapisini asmak icin */
        display: grid !important;
        grid-template-columns: 244px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
        column-gap: 22px;
        align-content: start;
    }
    #ll-root.logged-in #sidebar > div:first-child{
        grid-column: 1 / -1; grid-row: 1;
        margin: 0 -26px 16px; padding: 13px 24px;   /* serit kenardan kenara */
    }
    #ll-root.logged-in #sidebar #llProfilKart{ grid-column: 1; grid-row: 2; }
    #ll-root.logged-in #sidebar #llKisayollar{ grid-column: 1; grid-row: 3; }
    #ll-root.logged-in #sidebar #teacher-code-display{ grid-column: 1; grid-row: 4; }
    #ll-root.logged-in #sidebar #levelNav{
        grid-column: 2; grid-row: 2 / 6;
        border-left: 1px solid #F3DCC9;
        padding-left: 22px;
        min-height: 0;
    }
    #ll-root.logged-in #sidebar .ll-perde-hem{ grid-column: 1 / -1; grid-row: 6; margin: 14px -26px 0; }
}

/* Ogretmen kimlik karti (ogrenci profilindeki gibi bas harfli avatar) */
#ll-root .ll-profil-kart{
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid #F0DACA; border-radius: 12px;
    padding: 10px 12px; margin: 0 5px 12px;
    box-shadow: 0 2px 6px rgba(216, 67, 21, .08);
}
#ll-root .ll-pk-avatar{
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #F39C12, #D84315); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.08rem; letter-spacing: .5px;
    box-shadow: 0 3px 7px rgba(216, 67, 21, .3);
}
#ll-root .ll-pk-metin{ display: flex; flex-direction: column; min-width: 0; }
#ll-root .ll-pk-metin b{
    color: #5A4034; font-size: .95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ll-root .ll-pk-metin small{ color: #8B6A57; font-size: .76rem; }

/* --- dar ekran: tek sutun, tam genislik --- */
@media (max-width: 900px){
    #ll-root.logged-in #sidebar,
    #ll-root.logged-in.sidebar-closed #sidebar{
        padding: 16px;
    }
    #ll-root.logged-in #sidebar > div:first-child{ margin: -16px -16px 12px; padding: 14px 16px; }
    #ll-root.logged-in #sidebar .ll-perde-hem{ margin: 12px -16px -16px; }
}


/* Seviye basligi TEK SATIR: klasor svg'si, isim ve islem tuslari ayni hizada;
   uzun isim tasmak yerine ... ile kisalir. */
#ll-root #sidebar .level-head{
    display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap;
}
#ll-root #sidebar .level-head > span{
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ll-root #sidebar .level-head > span .lli{ vertical-align: -0.18em; }
#ll-root #sidebar .level-actions{
    display: flex; flex-wrap: nowrap; flex: 0 0 auto; gap: 4px; align-items: center;
}
#ll-root #sidebar .class-item{ flex-wrap: nowrap; }
#ll-root #sidebar .class-link{
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ll-root #sidebar .class-actions{ display: flex; flex-wrap: nowrap; flex: 0 0 auto; gap: 4px; }


/* ==========================================================================
   YAPISKAN SEKME CUBUGU
   Sinif adi + "Ogrenciler / Performans / ..." cubugu, sayfa dikey
   kaydirilirken site basliginin hemen altinda SABIT kalir.
   Not: #content'in eski overflow-y:auto'su kaldirildi — kaydirma belgede
   oldugu icin sticky ancak boyle tutunabilir (icerik zaten belgede
   kayiyordu, gorunur davranis degismez).
   ========================================================================== */
#ll-root.logged-in #content{ overflow-y: visible; }
#ll-root.logged-in #content .tabs{
    position: -webkit-sticky;
    position: sticky;
    /* Site basligi kaydirinca gizleniyor; cubuk da onunla birlikte YUKARI
       CIKSIN, yoksa basligin bosalttigi yerde bos bir bant kaliyordu.
       --hdr-ofset index.html'de tanimli: normalde header yuksekligi,
       body.hdr-gizli iken 0. Anasayfadaki kategori basliklari da ayni
       degiskeni kullaniyor, boylece iki yerde ayni ritim olur. */
    top: var(--hdr-ofset, var(--header-height, 60px));
    transition: top .34s cubic-bezier(.4,0,.2,1);
    z-index: 250;   /* panellerin ustunde; site basligi (300) altinda */
}
@media (prefers-reduced-motion: reduce){
    #ll-root.logged-in #content .tabs{ transition: none; }
}

/* TAM EKRANDAYKEN site basligi gizlenir; sekme cubugu tepeye yapisir */
html:fullscreen header{ display: none !important; }
html:-webkit-full-screen header{ display: none !important; }
html:fullscreen #ll-root.logged-in #content .tabs,
html:-webkit-full-screen #ll-root.logged-in #content .tabs{ top: 0; }

/* GERI tusu: sekme cubugunun basinda (tam ekran tusu kaldirildi —
   tam ekran otomatik acilir, cikis geri tusu / ESC ile) */
#ll-root .ll-geri{
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center; flex: 0 0 auto;
    width: 58px; height: 58px; margin: 0 2px 0 0;
    border: none; border-radius: 13px; cursor: pointer;
    background: #F1F3F5; color: #D84315;
    transition: background .15s ease, transform .15s ease;
}
#ll-root .ll-geri:hover{ background: #FFE9DC; transform: translateX(-2px); }
#ll-root .ll-geri svg{ width: 32px; height: 32px; }

/* ==========================================================================
   GOREV GONDER (tab9): yazilar 2 KAT buyuk.
   Panel icindeki her sey ayni buyuk boyu devralir (satir ici kucuk
   boylari da ezer); basliklar bir kademe daha buyuk.
   ========================================================================== */
#ll-root #tab9{ font-size: 1.6rem; }
#ll-root #tab9 *{ font-size: inherit !important; }
#ll-root #tab9 h3{ font-size: 1.3em !important; }
#ll-root #tab9 input, #ll-root #tab9 select, #ll-root #tab9 textarea{ padding: 10px 12px; }
#ll-root #tab9 .lli{ width: 1.3em; height: 1.3em; }
/* Akordiyonlu yeni duzen: 2x taban korunur; alt satir/rozet gibi ikincil
   yazilar oransal kuculur ki basliklarla hiyerarsi bozulmasin. */
#ll-root #tab9 .gv-alt{ font-size: .58em !important; }
#ll-root #tab9 .gv-rozet{ font-size: .5em !important; }
#ll-root #tab9 #gvFiltreNot p{ font-size: .6em !important; }
#ll-root #tab9 #gvListeSayac, #ll-root #tab9 #gvOyunSayac{ font-size: .55em !important; }
#ll-root #tab9 .gv-ist-sayi{ font-size: 1.15em !important; }
#ll-root #tab9 button .lli, #ll-root #tab9 .gv-rozet .lli{ width: 1.05em; height: 1.05em; }
#ll-root #tab9 .gv-gicon .lli{ width: 1.5em; height: 1.5em; }


/* ==========================================================================
   OKUL POPUP — rozetten acilan kurum/sinif haritasi.
   (document.body altina eklenir; #ll-root kapsami DISINDA kalir.)
   Her kurum bir OKUL BINASI: bayrakli cati, tabelada ad, seviyeler KAT,
   siniflar katin KAPILARI. Buyuk kurumun binasi genisler.
   ========================================================================== */
#llOkulPopup{
    position: fixed; inset: 0; z-index: 10070;
    background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
#llOkulPopup .okul-panel{
    background: #FFF8F2; width: 100%; max-width: 700px; max-height: 88vh;
    border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .4);
}
#llOkulPopup .okul-baslik{
    background: linear-gradient(90deg, #FFC107 0%, #F39C12 50%, #EF5350 100%);
    color: #fff; padding: 12px 18px; display: flex; align-items: center;
    justify-content: space-between; font-family: 'Marhey', sans-serif; font-size: 1.05rem;
}
#llOkulPopup .okul-kapat{ background: none; border: none; color: #fff; font-size: 27px; cursor: pointer; line-height: 1; padding: 0 2px; }
#llOkulPopup .okul-icerik{ overflow-y: auto; padding: 26px 22px 28px; }

#llOkulPopup .okul-bina{ position: relative; max-width: 540px; margin: 0 auto 36px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .14)); }
#llOkulPopup .okul-bina.buyuk{ max-width: 640px; }
#llOkulPopup .okul-bayrak{ position: absolute; top: -19px; left: 50%; transform: translateX(-55%); width: 26px; height: 26px; }
#llOkulPopup .okul-cati{ display: block; width: 92%; height: 36px; margin: 0 auto; }
#llOkulPopup .okul-bina.buyuk .okul-cati{ height: 42px; }
/* sacak: catinin duvarlardan tasan kenari (derinlik hissi) */
#llOkulPopup .okul-sacak{
    width: 94%; height: 7px; margin: -1px auto 0;
    background: linear-gradient(180deg, #A93226, #922B21);
    border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    position: relative; z-index: 1;
}
/* tabela: koyu lacivert okul plaketi, altin serit, kepli */
#llOkulPopup .okul-tabela{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 82%; margin: 0 auto; padding: 8px 14px;
    background: linear-gradient(180deg, #34495E, #2C3E50);
    color: #fff; font-weight: 700; font-family: 'Marhey', sans-serif;
    font-size: 1.02rem; letter-spacing: .4px;
    border-bottom: 3px solid #F1C40F;
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .12);
}
#llOkulPopup .okul-tabela span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#llOkulPopup .okul-kep{ width: 1.25em; height: 1.25em; flex: 0 0 auto; }
/* govde: krem duvarlar + yan payandalar */
#llOkulPopup .okul-govde{
    width: 88%; margin: 0 auto; background: #FBF3E9;
    border-left: 6px solid #E3CBA8; border-right: 6px solid #E3CBA8;
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, .12), inset -4px 0 6px -4px rgba(0, 0, 0, .12);
}
/* katlar: dosemeler ince golgeli, satirlar donusumlu tonda */
#llOkulPopup .okul-kat{
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-bottom: 2px solid #EAD9C4;
    box-shadow: inset 0 -3px 4px -3px rgba(0, 0, 0, .08);
}
#llOkulPopup .okul-kat:nth-child(even){ background: rgba(255, 255, 255, .5); }
#llOkulPopup .okul-kat:last-child{ border-bottom: none; }
#llOkulPopup .okul-kat-ad{
    flex: 0 0 31%; min-width: 0; font-weight: 700; color: #7A5230; font-size: .93rem;
    display: flex; align-items: center; gap: 7px;
}
#llOkulPopup .okul-kat-ad .lli{ width: 22px; height: 22px; flex: 0 0 auto; }
#llOkulPopup .okul-kat-yazi{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#llOkulPopup .okul-kapilar{ flex: 1; display: flex; flex-wrap: wrap; gap: 7px; }
/* sinif kapilari: ustu kavisli, tokmakli */
#llOkulPopup .okul-kapi{
    position: relative; border: none; cursor: pointer;
    background: linear-gradient(180deg, #4A89B8, #3E76A2); color: #fff;
    font-family: inherit; font-weight: 700; font-size: .85rem; padding: 6px 16px 7px 12px;
    border-radius: 9px 9px 4px 4px; border-bottom: 3px solid #2C5F8A;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16); transition: transform .15s ease, box-shadow .15s ease;
}
#llOkulPopup .okul-kapi::after{
    content: ''; position: absolute; right: 6px; top: 50%; margin-top: -2px;
    width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .8);
}
#llOkulPopup .okul-kapi:hover{ transform: translateY(-2px); box-shadow: 0 5px 9px rgba(0, 0, 0, .2); }
#llOkulPopup .okul-kapi.aktif{
    background: linear-gradient(180deg, #E67E22, #D84315);
    border-bottom-color: #B33A10; box-shadow: 0 3px 10px rgba(216, 67, 21, .42);
}
#llOkulPopup .okul-bos{ font-size: .78rem; color: #A6836E; }
/* giris kati: pencere + kemerli cift kanatli kapi + pencere (AYRI kat —
   sinif kapilarinin ustune ASLA binmez) */
#llOkulPopup .okul-giris{
    display: flex; align-items: flex-end; justify-content: center; gap: 34px;
    width: 88%; margin: 0 auto; padding: 8px 14px 0;
    box-sizing: border-box;
    background: #F4E7D6;
    border-left: 6px solid #E3CBA8; border-right: 6px solid #E3CBA8;
    border-top: 2px solid #EAD9C4;
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, .12), inset -4px 0 6px -4px rgba(0, 0, 0, .12);
}
#llOkulPopup .okul-pencere{ width: 34px; height: 27px; margin-bottom: 8px; }
#llOkulPopup .okul-kapi-svg{ width: 44px; height: 35px; display: block; }
/* taban: temel/kaldirim */
#llOkulPopup .okul-taban{
    width: 96%; height: 11px; margin: 0 auto;
    background: linear-gradient(180deg, #9A7B63, #82644E);
    border-radius: 0 0 6px 6px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}
/* Genel (kurumsuz) bina: gri/sonuk surum */
#llOkulPopup .okul-bina.genel .okul-sacak{ background: linear-gradient(180deg, #607D8B, #546E7A); }
#llOkulPopup .okul-bina.genel .okul-tabela{ background: linear-gradient(180deg, #78909C, #607D8B); border-bottom-color: #CFD8DC; }
#llOkulPopup .okul-bina.genel .okul-govde,
#llOkulPopup .okul-bina.genel .okul-giris{ background: #F6F8F9; border-color: #CFD8DC; }
#llOkulPopup .okul-bina.genel .okul-kat{ border-bottom-color: #DDE4E8; }
#llOkulPopup .okul-bina.genel .okul-giris{ border-top-color: #DDE4E8; }
#llOkulPopup .okul-bina.genel .okul-kat-ad{ color: #5f6f74; }
#llOkulPopup .okul-bina.genel .okul-taban{ background: linear-gradient(180deg, #90A4AE, #78909C); }
@media (max-width: 600px){
    #llOkulPopup .okul-kat{ flex-direction: column; align-items: flex-start; gap: 5px; }
    #llOkulPopup .okul-kat-ad{ flex: none; width: 100%; }
}


/* ==========================================================================
   MASAUSTU: HAFTALIK PLAN PENCEREYE YAYILSIN
   #planTable bir <table> oldugu icin kendi icerigine buzuluyor, eski
   #planBody izgara kurali da plani tablonun YARISINA sikistiriyordu.
   Blok yapip tam genislige aciyoruz; iki donem kolonu pencereyi paylasir.
   ========================================================================== */
@media (min-width: 901px){
    #ll-root #planTable{ display: block; width: 100%; }
    #ll-root #planBody{ display: block; }
    #ll-root .plan-container{ min-width: 0; }
}

/* ======================================================================
   PROFIL — KURUMLARIM & SINIFLARIM: okul binasi gorunumu.
   #llOkulPopup altindaki bina kurallarinin profile (#tpOkullar) uyarlanmis
   kopyasi + duzenleme modu ogeleri (kat ekle, koridor +, islem tuslari).
   ====================================================================== */
#tpOkullar .okul-bina{ position: relative; max-width: 540px; margin: 0 auto 36px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .14)); }
#tpOkullar .okul-bina.buyuk{ max-width: 640px; }
#tpOkullar .okul-bayrak{ position: absolute; top: -19px; left: 50%; transform: translateX(-55%); width: 26px; height: 26px; }
#tpOkullar .okul-cati{ display: block; width: 92%; height: 36px; margin: 0 auto; }
#tpOkullar .okul-bina.buyuk .okul-cati{ height: 42px; }
/* sacak: catinin duvarlardan tasan kenari (derinlik hissi) */
#tpOkullar .okul-sacak{
    width: 94%; height: 7px; margin: -1px auto 0;
    background: linear-gradient(180deg, #A93226, #922B21);
    border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    position: relative; z-index: 1;
}
/* tabela: koyu lacivert okul plaketi, altin serit, kepli */
#tpOkullar .okul-tabela{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 82%; margin: 0 auto; padding: 8px 14px;
    background: linear-gradient(180deg, #34495E, #2C3E50);
    color: #fff; font-weight: 700; font-family: 'Marhey', sans-serif;
    font-size: 1.02rem; letter-spacing: .4px;
    border-bottom: 3px solid #F1C40F;
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .12);
}
#tpOkullar .okul-tabela span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tpOkullar .okul-kep{ width: 1.25em; height: 1.25em; flex: 0 0 auto; }
/* govde: krem duvarlar + yan payandalar */
#tpOkullar .okul-govde{
    width: 88%; margin: 0 auto; background: #FBF3E9;
    border-left: 6px solid #E3CBA8; border-right: 6px solid #E3CBA8;
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, .12), inset -4px 0 6px -4px rgba(0, 0, 0, .12);
}
/* katlar: dosemeler ince golgeli, satirlar donusumlu tonda */
#tpOkullar .okul-kat{
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-bottom: 2px solid #EAD9C4;
    box-shadow: inset 0 -3px 4px -3px rgba(0, 0, 0, .08);
}
#tpOkullar .okul-kat:nth-child(even){ background: rgba(255, 255, 255, .5); }
#tpOkullar .okul-kat:last-child{ border-bottom: none; }
#tpOkullar .okul-kat-ad{
    flex: 0 0 31%; min-width: 0; font-weight: 700; color: #7A5230; font-size: .93rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tpOkullar .okul-kapilar{ flex: 1; display: flex; flex-wrap: wrap; gap: 7px; }
/* sinif kapilari: ustu kavisli, tokmakli */
#tpOkullar .okul-kapi{
    position: relative; border: none; cursor: pointer;
    background: linear-gradient(180deg, #4A89B8, #3E76A2); color: #fff;
    font-family: inherit; font-weight: 700; font-size: .85rem; padding: 6px 16px 7px 12px;
    border-radius: 9px 9px 4px 4px; border-bottom: 3px solid #2C5F8A;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16); transition: transform .15s ease, box-shadow .15s ease;
}
#tpOkullar .okul-kapi::after{
    content: ''; position: absolute; right: 6px; top: 50%; margin-top: -2px;
    width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .8);
}
#tpOkullar .okul-kapi:hover{ transform: translateY(-2px); box-shadow: 0 5px 9px rgba(0, 0, 0, .2); }
#tpOkullar .okul-kapi.aktif{
    background: linear-gradient(180deg, #E67E22, #D84315);
    border-bottom-color: #B33A10; box-shadow: 0 3px 10px rgba(216, 67, 21, .42);
}
#tpOkullar .okul-bos{ font-size: .78rem; color: #A6836E; }
/* giris kati: pencere + kemerli cift kanatli kapi + pencere (AYRI kat —
   sinif kapilarinin ustune ASLA binmez) */
#tpOkullar .okul-giris{
    display: flex; align-items: flex-end; justify-content: center; gap: 34px;
    width: 88%; margin: 0 auto; padding: 8px 14px 0;
    box-sizing: border-box;
    background: #F4E7D6;
    border-left: 6px solid #E3CBA8; border-right: 6px solid #E3CBA8;
    border-top: 2px solid #EAD9C4;
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, .12), inset -4px 0 6px -4px rgba(0, 0, 0, .12);
}
#tpOkullar .okul-pencere{ width: 34px; height: 27px; margin-bottom: 8px; }
#tpOkullar .okul-kapi-svg{ width: 44px; height: 35px; display: block; }
/* taban: temel/kaldirim */
#tpOkullar .okul-taban{
    width: 96%; height: 11px; margin: 0 auto;
    background: linear-gradient(180deg, #9A7B63, #82644E);
    border-radius: 0 0 6px 6px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}
/* Genel (kurumsuz) bina: gri/sonuk surum */
#tpOkullar .okul-bina.genel .okul-sacak{ background: linear-gradient(180deg, #607D8B, #546E7A); }
#tpOkullar .okul-bina.genel .okul-tabela{ background: linear-gradient(180deg, #78909C, #607D8B); border-bottom-color: #CFD8DC; }
#tpOkullar .okul-bina.genel .okul-govde,
#tpOkullar .okul-bina.genel .okul-giris{ background: #F6F8F9; border-color: #CFD8DC; }
#tpOkullar .okul-bina.genel .okul-kat{ border-bottom-color: #DDE4E8; }
#tpOkullar .okul-bina.genel .okul-giris{ border-top-color: #DDE4E8; }
#tpOkullar .okul-bina.genel .okul-kat-ad{ color: #5f6f74; }
#tpOkullar .okul-bina.genel .okul-taban{ background: linear-gradient(180deg, #90A4AE, #78909C); }

/* --- profil binasi: kat basligi (animasyonlu ikon SADECE burada) --- */
#tpOkullar .okul-bina{ margin: 0 auto 30px; }
#tpOkullar .okul-kat{ flex-wrap: wrap; }
#tpOkullar .okul-kat-ad{ display: flex; align-items: center; gap: 7px; font-size: 1rem; }
#tpOkullar .okul-kat-ad .lli{ width: 22px; height: 22px; flex: 0 0 auto; }
#tpOkullar .okul-kat-yazi{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tpOkullar .okul-kapi{ font-size: .9rem; padding: 8px 18px 9px 14px; }
/* koridordaki + : seviye adi yazilinca cikar, duzenleme bitene kadar kalir */
#tpOkullar .okul-kapi.okul-ekle{
    background: linear-gradient(180deg, #2ECC71, #27AE60); border-bottom-color: #1E8449;
    font-size: 1.05rem; padding: 6px 15px 7px; font-weight: 800;
}
#tpOkullar .okul-kapi.okul-ekle::after{ display: none; }
#tpOkullar .okul-kapi.okul-onay{ background: linear-gradient(180deg, #2ECC71, #27AE60); border-bottom-color: #1E8449; }
#tpOkullar .okul-kapi.okul-iptal{ background: linear-gradient(180deg, #B0BEC5, #90A4AE); border-bottom-color: #78909C; }
#tpOkullar .okul-kapi.okul-onay::after, #tpOkullar .okul-kapi.okul-iptal::after{ display: none; }
/* duzenleme modu islem tuslari */
#tpOkullar .okul-mtus{
    border: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: .85rem;
    font-family: inherit; line-height: 1; background: #EDF1F4; color: #546E7A;
}
#tpOkullar .okul-mtus.acik{ background: rgba(255, 255, 255, .22); color: #fff; }
#tpOkullar .okul-mtus:hover{ filter: brightness(.95); }
/* Seviye islem tuslari SEVIYE ISMININ HEMEN YANINDA durur (margin-left:auto
   ile satirin sagina itilmez). Duzenleme modunda isim sutunu icerigi kadar
   daralir ki tuslar isme yapissin, kapilar da hemen ardindan aksin. */
#tpOkullar .okul-kat-tus{ display: inline-flex; gap: 5px; margin-left: 0; flex: 0 0 auto; }
#tpOkullar .okul-kat.duzen .okul-kat-ad{ flex: 0 1 auto; max-width: 46%; }
#tpOkullar .okul-kurum-tus{ display: inline-flex; gap: 5px; margin-left: 8px; }
/* yeni kat (taslak) + isim alani */
#tpOkullar .okul-kat-yeni{ background: rgba(46, 204, 113, .12); }
#tpOkullar .okul-kat-yeni .okul-kat-ad{ flex: 1 1 55%; }
#tpOkullar .okul-kat-input{
    flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid #A9DFBF; border-radius: 8px;
    font-family: inherit; font-size: .92rem; background: #fff; color: #5A4034;
}
/* binaya kat ekleme cubugu (govde ile giris kati arasinda) */
#tpOkullar .okul-katbar{
    width: 88%; margin: 0 auto; padding: 8px; text-align: center; background: #F4E7D6;
    border-left: 6px solid #E3CBA8; border-right: 6px solid #E3CBA8; border-top: 2px dashed #E0C9A6;
    box-sizing: border-box;
}
#tpOkullar .okul-kat-ekle{
    border: 1px dashed #C89B6A; cursor: pointer; padding: 9px 16px; border-radius: 9px;
    background: #FFF8F2; color: #B34700; font-family: inherit; font-weight: 700; font-size: .87rem;
}
#tpOkullar .okul-kat-ekle:hover{ background: #FFEFE0; }
@media (max-width: 600px){
    #tpOkullar .okul-kat{ flex-direction: column; align-items: flex-start; gap: 6px; }
    #tpOkullar .okul-kat-ad{ flex: none; width: 100%; }
    #tpOkullar .okul-kat-tus{ margin-left: 0; }
}

/* --- ust arac cubugu: Listeyi Duzenle / Kurum Ekle / Arsiv --- */
.tp-arac{ display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.tp-arac button{ border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .9rem; padding: 11px 18px; border-radius: 10px; }
.tp-arac .tp-duzen{ border: 1px dashed #CBD3D9; background: #F1F3F5; color: #7f8c8d; }
.tp-arac .tp-duzen.bitir{ border: none; background: #27ae60; color: #fff; }
.tp-arac .tp-kurum{ border: 1px dashed #B39DDB; background: #F6F2FA; color: #8e44ad; }
.tp-arac .tp-arsiv{ border: 1px dashed #D5BFAE; background: #FBF6F1; color: #8B6A57; }
.tp-ipucu{ margin: 0 0 14px; font-size: .84rem; color: #7f8c8d; background: #F7F9FC; border-left: 3px solid #27ae60; padding: 8px 12px; border-radius: 0 8px 8px 0; }

/* --- sinif islem penceresi (duzenleme modunda kapiya tiklayinca) --- */
#tpSinifPopup{
    position: fixed; inset: 0; z-index: 1000090; background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px;
}
#tpSinifPopup .tps-panel{ background: #fff; width: 100%; max-width: 430px; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 60px rgba(0, 0, 0, .4); }
#tpSinifPopup .tps-baslik{
    background: linear-gradient(90deg, #F39C12, #D84315); color: #fff; padding: 13px 18px;
    display: flex; align-items: center; justify-content: space-between; font-family: 'Marhey', sans-serif; font-size: 1.05rem;
}
#tpSinifPopup .tps-kapat{ background: none; border: none; color: #fff; font-size: 27px; cursor: pointer; line-height: 1; padding: 0 2px; }
#tpSinifPopup .tps-govde{ padding: 16px; display: flex; flex-direction: column; gap: 11px; }
#tpSinifPopup .tps-tus{
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
    padding: 15px 17px; border-radius: 13px; border: 2px solid #ECEFF1; background: #F7F9FC; font-family: inherit;
}
#tpSinifPopup .tps-tus:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
#tpSinifPopup .tps-ikon{ font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
#tpSinifPopup .tps-yazi{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#tpSinifPopup .tps-yazi b{ font-size: 1.05rem; color: #37474F; }
#tpSinifPopup .tps-yazi small{ font-size: .8rem; color: #90A4AE; }
#tpSinifPopup .tps-tus.ac{ border-color: #A5D6C7; background: #EAF7F3; }
#tpSinifPopup .tps-tus.ad{ border-color: #BBDEFB; background: #EDF5FD; }
#tpSinifPopup .tps-tus.ars{ border-color: #FFE0B2; background: #FFF6E9; }
#tpSinifPopup .tps-tus.sil{ border-color: #FFCDD2; background: #FEF0F0; }
#tpSinifPopup .tps-tus.sil b{ color: #C0392B; }


/* ==========================================================================
   SEKME CUBUGU: YALNIZ SIMGE
   --------------------------------------------------------------------------
   Sinif adi rozetinin yanindaki sekmeler (Ogrenciler, Haftalik Plan, Veli &
   Durum, Sinif Araclari) ve OKUL tusu artik yazisiz duruyor: dar ekranda
   yazilar simgelerin altina kayip cubugu iki satira cikariyordu. Anlam
   kaybolmasin diye her tusta title + aria-label var (fare ile bekleyince
   yazi cikar, ekran okuyucu okur). Simgeler yaziya ayrilan yeri alip
   buyudu, dokunma hedefi de genisledi.
   ========================================================================== */
/* Yazi tamamen kaldirilir (gizli metin degil): cubuk gercekten simge
   seridi olsun. Anlam title + aria-label'da duruyor. */
#ll-root #content .tabs .tab > span{ display: none; }
#ll-root #content .tabs .tab{
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0; padding: 9px 13px;
}
#ll-root #content .tabs .tab .tab-ikon{
    width: 27px; height: 27px; margin: 0;
}
/* OKUL tusu: cubugun basinda, sinif adindan once; hafif ayrilsin */
#ll-root #content .tabs .ll-okul-tus{ margin-right: 4px; }
@media (max-width: 620px){
    #ll-root #content .tabs .tab{ padding: 8px 10px; }
    #ll-root #content .tabs .tab .tab-ikon{ width: 24px; height: 24px; }
}

/* Okul penceresindeki seviye-ayari dislisi (tpOkullar'daki tuslarin esi) */
#llOkulPopup .okul-kat-tus{ display: inline-flex; gap: 5px; flex: 0 0 auto; margin: 0 6px 0 2px; }
#llOkulPopup .okul-mtus{
    background: rgba(0, 0, 0, .06); border: 0; border-radius: 8px; cursor: pointer;
    padding: 4px 7px; line-height: 0; display: inline-flex; align-items: center;
    transition: background .15s, transform .15s;
}
#llOkulPopup .okul-mtus .lli{ width: 20px; height: 20px; }
#llOkulPopup .okul-mtus:hover{ background: rgba(0, 0, 0, .12); transform: translateY(-1px); }

/* Okul penceresi basligindaki "+ Kurum" tusu ve bos durum daveti */
#llOkulPopup .okul-baslik-tus{ display: inline-flex; align-items: center; gap: 8px; }
#llOkulPopup .okul-ekle-kucuk{
    background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 9px; padding: 5px 12px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: .86rem; white-space: nowrap;
    transition: background .15s, transform .15s;
}
#llOkulPopup .okul-ekle-kucuk:hover{ background: rgba(255, 255, 255, .36); transform: translateY(-1px); }
#llOkulPopup .okul-bosluk{
    text-align: center; padding: 34px 18px; display: flex; flex-direction: column;
    align-items: center; gap: 12px; font-family: inherit;
}
#llOkulPopup .okul-bosluk p{ margin: 0; color: #6B4A38; font-weight: 700; font-size: 1.05rem; }
#llOkulPopup .okul-bosluk small{ color: #9A7B68; font-size: .85rem; }
#llOkulPopup .okul-ekle-buyuk{
    background: linear-gradient(135deg, #F39C12, #D84315); color: #fff; border: 0;
    border-radius: 12px; padding: 12px 26px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 1rem;
    box-shadow: 0 4px 12px rgba(216, 67, 21, .28);
    transition: filter .15s, transform .15s;
}
#llOkulPopup .okul-ekle-buyuk:hover{ filter: brightness(1.08); transform: translateY(-1px); }

/* ==========================================================================
   SINIF ADI ROZETI = "OGRENCILER" SEKMESI
   --------------------------------------------------------------------------
   Rozet artik ayri bir dugme degil, sekme cubugunun bir sekmesi. Bu yuzden
   oteki sekmelerle ayni mantikla davranir: normalde sakin, YALNIZ kendi
   sekmesi acikken turuncu. Eskiden her zaman turuncuydu ve Haftalik Plan
   acikken bile "burasi secili" gibi duruyordu.
   ========================================================================== */
#ll-root #content .tabs #active-class-title{
    display: inline-flex; align-items: center; cursor: pointer;
    font-family: 'Marhey', sans-serif; font-size: 1.24rem; font-weight: 700;
    padding: 11px 20px; border-radius: 13px; margin: 0;
    white-space: nowrap; letter-spacing: .3px; text-transform: none;
    background: #f1f3f5; color: #6B4A38;
    border: 1px solid #E6D6C8; box-shadow: none;
    transition: background .18s, color .18s, box-shadow .18s, transform .15s;
}
#ll-root #content .tabs #active-class-title:hover{
    background: #e9ecef; color: var(--accent); transform: translateY(-1px);
}
#ll-root #content .tabs #active-class-title.aktif{
    background: linear-gradient(135deg, #D84315, #E67E22);
    color: #fff; border-color: transparent;
    box-shadow: 0 3px 8px rgba(216, 67, 21, .3);
}
#ll-root #content .tabs #active-class-title:focus-visible{
    outline: 3px solid #F39C12; outline-offset: 2px;
}
@media (max-width: 620px){
    #ll-root #content .tabs #active-class-title{ font-size: 1.05rem; padding: 9px 14px; }
}

/* ==========================================================================
   SEKME VURGUSU: SIMGELER HER ZAMAN ACIK ZEMINDE
   --------------------------------------------------------------------------
   Etkin sekme dolu turuncuydu; simgeler cok renkli oldugu icin (turuncu
   canta, kirmizi takvim…) turuncu zeminde birbirine giriyor, pasif hallerine
   gore kotu duruyordu. Artik etkin sekme BEYAZ kart + turuncu halka +
   yumusak golge: simge her iki durumda da acik zeminde, yalnizca cerceve
   ve derinlik degisiyor. Secili oldugu yine net belli.
   ========================================================================== */
#ll-root #content .tabs .tab.active{
    background: #fff;
    color: var(--primary);
    border-bottom-color: transparent;
    box-shadow: inset 0 0 0 2.5px var(--primary), 0 4px 12px rgba(216, 67, 21, .22);
}
#ll-root #content .tabs .tab.active .tab-ikon{ transform: scale(1.06); }
#ll-root #content .tabs .tab{ transition: box-shadow .18s, background .18s, transform .15s; }
#ll-root #content .tabs .tab:hover:not(.active){ background: #e9ecef; transform: translateY(-1px); }
#ll-root #content .tabs .tab:focus-visible{ outline: 3px solid #F39C12; outline-offset: 2px; }

/* Sinif adi rozeti de ayni dili konussun: etkinken beyaz zemin + turuncu
   halka + turuncu yazi. Boylece cubuktaki butun etkin ogeler ayni gorunur. */
#ll-root #content .tabs #active-class-title.aktif{
    background: #fff;
    /* --primary (#D84315) beyaz uzerinde 4.44 karsitlik veriyor; WCAG AA icin
       4.5 gerek. Halka o rengi kullaniyor (buyuk oge, sorun degil), YAZI ise
       bir tik koyu tonda: 5.3 karsitlik. */
    color: #B03A10;
    border-color: transparent;
    box-shadow: inset 0 0 0 2.5px var(--primary), 0 4px 12px rgba(216, 67, 21, .22);
}
/* Pasif rozet: koyu yazi, acik zemin (eskiden beyaz yaziydi, okunmuyordu) */
#ll-root #content .tabs #active-class-title{ color: #6B4A38; }

/* Dar ekranda da ayni: dolu turuncu yerine beyaz kart + halka */
@media (max-width: 768px){
    #ll-root #content .tabs .tab.active{
        background: #fff; color: var(--primary);
        box-shadow: inset 0 0 0 2.5px var(--primary), 0 3px 10px rgba(216, 67, 21, .22);
    }
}

/* ================= OKUL NUMARASI SUTUNU (Ogrenciler tablosu) ================= */
#ll-root .student-no-input{
    border: 1px solid transparent;
    background: #f6f7f9;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #4a5b6a;
    width: 68px;
    max-width: 100%;
    padding: 7px 6px;
    text-align: center;
    font-family: inherit;
    letter-spacing: .5px;
}
#ll-root .student-no-input::placeholder{ color: #b9c2cb; font-weight: 500; }
#ll-root .student-no-input:focus{
    background: #fff;
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(52,152,219,.15);
}

/* ====================== TAKIM OLUSTURUCU ====================== */
/* --- Akordiyon: her adim tek satirlik bir baslik; yalniz acik olanin govdesi
       gorunur. Baslik <button> oldugu icin klavye/erisilebilirlik bedava gelir. --- */
#ll-root #llAracTakim .tk-blok{
    background: #fbfbfc;
    border: 1px solid #e6e9ed;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .18s, border-color .18s;
}
#ll-root #llAracTakim .tk-blok.acik{
    background: #fff;
    border-color: #dbe1e7;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
#ll-root #llAracTakim .tk-baslik{
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    margin: 0; padding: 12px 15px;
    background: none; border: 0; border-radius: 14px;
    font: inherit; font-weight: 800; color: #4a3a30; font-size: 1.06rem;
    text-align: left; cursor: pointer; transition: background .16s;
}
#ll-root #llAracTakim .tk-baslik:hover{ background: rgba(216,67,21,.05); }
#ll-root #llAracTakim .tk-baslik:focus-visible{ outline: 3px solid rgba(216,67,21,.45); outline-offset: -3px; }
#ll-root #llAracTakim .tk-ad2{ flex: 0 0 auto; }
#ll-root #llAracTakim .tk-adim{
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: .92rem; font-weight: 800; flex: 0 0 auto;
}
/* Kapaliyken bile ne secili oldugunu gosteren ozet */
#ll-root #llAracTakim .tk-ozet{
    margin-left: auto; min-width: 0;
    font-weight: 600; font-size: .92rem; color: #8b98a4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ll-root #llAracTakim .tk-ok{
    width: 20px; height: 20px; flex: 0 0 auto; color: #9aa6b1;
    transition: transform .22s ease;
}
#ll-root #llAracTakim .tk-blok.acik .tk-ok{ transform: rotate(180deg); color: var(--primary); }
#ll-root #llAracTakim .tk-govde{ padding: 2px 15px 14px; }
#ll-root #llAracTakim .tk-blok:not(.acik) .tk-govde{ display: none; }
#ll-root #llAracTakim .tk-satir{
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px;
}
#ll-root #teamContainer{ scroll-margin-top: 96px; }
#ll-root #llAracTakim .tk-etiket{ font-weight: 700; color: #6b7a88; font-size: .95rem; min-width: 120px; }
#ll-root #llAracTakim .tk-ipucu{ color: #8b98a4; font-size: .88rem; line-height: 1.45; flex: 1 1 220px; }

/* Numaralandirma secici */
#ll-root #llAracTakim .tk-mod{
    border: 2px solid #dfe4e9; background: #fff; color: #62707c;
    font: inherit; font-weight: 700; font-size: 1rem;
    padding: 9px 20px; border-radius: 999px; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
#ll-root #llAracTakim .tk-mod:hover{ border-color: #c3ccd4; }
#ll-root #llAracTakim .tk-mod.aktif{
    background: #fff; color: #B03A10; border-color: var(--primary);
    box-shadow: inset 0 0 0 1.5px var(--primary), 0 3px 10px rgba(216,67,21,.18);
}

/* Katilimci cipleri */
#ll-root #llAracTakim .tk-cipler{ display: flex; flex-wrap: wrap; gap: 8px; }
#ll-root #llAracTakim .tk-bos{ color: #8b98a4; font-size: .95rem; padding: 6px 2px; }
#ll-root #llAracTakim .tk-cip{
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1.5px solid #dbe1e7; border-radius: 999px;
    padding: 6px 13px 6px 7px; cursor: pointer; user-select: none;
    font-size: .98rem; font-weight: 600; color: #3d4a55;
    transition: opacity .16s, border-color .16s, background .16s;
}
#ll-root #llAracTakim .tk-cip:hover{ border-color: #b6c0c9; }
#ll-root #llAracTakim .tk-cip .tk-no{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
    background: #eef2f6; color: #55636f; font-size: .85rem; font-weight: 800;
}
#ll-root #llAracTakim .tk-cip.misafir{ border-style: dashed; border-color: #b48ead; background: #faf6fa; }
#ll-root #llAracTakim .tk-cip.misafir .tk-no{ background: #f0e3ef; color: #7d5f7a; }
#ll-root #llAracTakim .tk-cip.yok{ opacity: .42; background: #f2f4f6; text-decoration: line-through; }
#ll-root #llAracTakim .tk-cip .tk-sil{
    font-style: normal; font-weight: 800; color: #a86f9f; font-size: 1.05rem;
    line-height: 1; padding: 0 2px; cursor: pointer;
}
#ll-root #llAracTakim .tk-cip .tk-sil:hover{ color: #c0392b; }

/* Girisler */
#ll-root #llAracTakim .tk-giris{
    flex: 1 1 260px; min-width: 180px;
    border: 1.5px solid #dbe1e7; border-radius: 10px;
    padding: 10px 13px; font: inherit; font-size: 1rem; background: #fff;
}
#ll-root #llAracTakim .tk-giris:focus{
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,152,219,.14);
}
#ll-root #llAracTakim .tk-alan{
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1.5px solid #dbe1e7; border-radius: 10px; background: #fff;
    padding: 11px 13px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem; line-height: 1.6; color: #37424c;
}
#ll-root #llAracTakim .tk-alan:focus{
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,152,219,.14);
}
#ll-root #llAracTakim .tool-btn.tk-kucuk{ padding: 10px 18px; font-size: 1rem; }
#ll-root #llAracTakim .tool-btn.tk-sade{ background: #6b7a88; }

/* Uyari / bilgi seridi */
#ll-root #llAracTakim .tk-uyari{
    border-radius: 12px; padding: 11px 15px; margin: 4px 0 14px;
    font-size: .96rem; line-height: 1.55;
    background: #fff6e6; border: 1px solid #f0d49a; color: #7a5510;
}
#ll-root #llAracTakim .tk-uyari.iyi{ background: #eaf7ee; border-color: #a9d9ba; color: #256b3c; }
#ll-root #llAracTakim .tk-arac{ margin: 0 0 8px; }

/* Sonuc kartlari */
#ll-root #llAracTakim .team-title{ display: flex; align-items: center; gap: 8px; }
#ll-root #llAracTakim .team-title .tm-adet{
    margin-left: auto; font-style: normal; font-size: .82rem; font-weight: 700;
    background: #eef2f6; color: #6b7a88; border-radius: 999px; padding: 2px 9px;
}
#ll-root #llAracTakim .team-member{ display: flex; align-items: center; gap: 8px; }
#ll-root #llAracTakim .team-member .tm-no{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: .86rem; font-weight: 800; flex: 0 0 auto;
}
#ll-root #llAracTakim .team-member .tm-misafir{
    margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 700;
    background: #f3e6f1; color: #7d5f7a; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

@media (max-width: 768px){
    #ll-root #llAracTakim .tk-baslik{ padding: 11px 12px; font-size: 1rem; gap: 8px; }
    #ll-root #llAracTakim .tk-govde{ padding: 2px 12px 12px; }
    #ll-root #llAracTakim .tk-ozet{ font-size: .82rem; }
    #ll-root #llAracTakim .tk-etiket{ min-width: 100%; }
    #ll-root #llAracTakim .tk-ipucu{ flex-basis: 100%; }
    #ll-root #llAracTakim .tool-btn.tk-kucuk{ padding: 9px 14px; font-size: .95rem; }
    #ll-root #llAracTakim .tk-mod{ padding: 8px 15px; font-size: .95rem; }
    #ll-root .student-no-input{ width: 56px; font-size: 1rem; padding: 6px 4px; }
}

/* ============ VELİ & DURUM TARAMASI — PROFİL SÜRÜMÜ ============
   Tarama sinif seridindeki sekmeden ogretmen profiline tasindi
   (#student-profile-section, #ll-root'un DISINDA). Renk degiskenleri
   #ll-root'ta tanimli oldugu icin kutuya kendi degiskenleri veriliyor;
   ustteki .tarama-* kurallari zaten #tpTaramaKutu icin de yaziliyor. */
#tpTaramaKutu{
    --primary: #D84315; --secondary: #E67E22; --accent: #F39C12;
    --success: #27ae60; --danger: #e74c3c;
    font-family: 'Segoe UI', sans-serif;
    color: #2c3e50;
}
/* Profil sutunu sinif panelinden dar: genis tablo kutunun icinde kaysin,
   sayfayi yatay tasirmasin. */
#tpTaramaKutu #taramaSonuc{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
#tpTaramaKutu .tarama-tablo{ min-width: 720px; }
#tpTaramaKutu .tarama-aciklama{ margin-top: 0; }
#tpTaramaKutu .tarama-ozet{ flex-wrap: wrap; }

@media (max-width: 760px){
    #tpTaramaKutu .tarama-tablo{ min-width: 620px; }
    #tpTaramaKutu .tarama-not{ max-width: 200px; }
    /* Dar ekranda 10 olcut alt alta cok yer kapliyordu: cipler kucultuldu. */
    #tpTaramaKutu .tarama-cipler{ gap: 7px; }
    #tpTaramaKutu .tarama-cip{ padding: 7px 11px; font-size: 0.82rem; gap: 5px; }
    #tpTaramaKutu .tarama-cip b{ min-width: 18px; padding: 1px 6px; font-size: 0.75rem; }
    #tpTaramaKutu .tarama-cip .lli{ width: 16px; height: 16px; }
    #tpTaramaKutu .tarama-arama{ padding: 10px 14px; font-size: 0.92rem; }
}

/* ======================================================================
   MOD ŞERİTLERİNDEKİ ANİMASYONLU İKONLAR
   Haplarda emoji vardı: her işletim sisteminde başka türlü çiziliyor,
   boyu satırla oynuyor ve sitenin ikon diliyle uyuşmuyordu. Yerlerine
   kendi SVG'lerimiz kondu; animasyonlar YALNIZ hap etkinken çalışır,
   böylece şerit sürekli kıpırdamaz.
   ====================================================================== */
#ll-root .ll-mod-hap{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.15;
}
#ll-root .ll-mod-hap .hap-ikon{
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: block;
    overflow: visible;
}
/* ETKİN HAPTA BEYAZ ALTLIK.
   Hap seçilince zemin turuncu gradyan oluyordu; roket (kırmızı kanat +
   turuncu alev), koşucu (turuncu baş, koyu turuncu gövde) ve kupa (altın
   sarısı + turuncu kaide) bu zeminde eriyip kayboluyordu. Tek tek renk
   değiştirmek yerine ikonun ARKASINA beyaz bir altlık kondu: bütün
   ikonlar kendi renklerini korur, hangisi olursa olsun kontrast garanti
   olur ve ileride eklenecek ikonlar için de kural baştan doğrudur.
   Daire yerine yuvarlatılmış kare: zarın köşeleri daireden taşıyordu. */
#ll-root .ll-mod-hap.aktif .hap-ikon{
    background: #fff;
    border-radius: 9px;
    padding: 3px;
    box-sizing: content-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: reduce){
    #ll-root .ll-mod-hap .hap-ikon *{ animation: none !important; }
}

/* --- kurayla seç: zar sallanır --- */
#ll-root .ll-mod-hap.aktif .hi-zar{ transform-origin: 50% 50%; animation: hiZar 2.4s ease-in-out infinite; }
@keyframes hiZar{
    0%, 62%, 100%{ transform: rotate(0deg) translateY(0); }
    68%{ transform: rotate(-14deg) translateY(-1.4px); }
    76%{ transform: rotate(12deg) translateY(-1px); }
    84%{ transform: rotate(-6deg) translateY(0); }
    92%{ transform: rotate(3deg); }
}
/* --- geri sayım: kum akar --- */
#ll-root .ll-mod-hap.aktif .hi-kum-ust{ transform-origin: 50% 0%; animation: hiKumUst 2.6s linear infinite; }
#ll-root .ll-mod-hap.aktif .hi-kum-alt{ transform-origin: 50% 100%; animation: hiKumAlt 2.6s linear infinite; }
#ll-root .ll-mod-hap.aktif .hi-tane{ animation: hiTane 1.1s linear infinite; }
@keyframes hiKumUst{ 0%{ transform: scaleY(1); } 100%{ transform: scaleY(.15); } }
@keyframes hiKumAlt{ 0%{ transform: scaleY(.15); } 100%{ transform: scaleY(1); } }
@keyframes hiTane{ 0%{ opacity:0; transform: translateY(-1.5px); } 30%{ opacity:1; } 100%{ opacity:0; transform: translateY(3.5px); } }
/* --- kronometre: ibre döner --- */
#ll-root .ll-mod-hap.aktif .hi-ibre{ transform-origin: 12px 13.6px; animation: hiIbre 3s linear infinite; }
@keyframes hiIbre{ to{ transform: rotate(360deg); } }
/* --- takım: iki kişi yaklaşır, kalp atar --- */
#ll-root .ll-mod-hap.aktif .hi-kisi-sol{ animation: hiSol 2.6s ease-in-out infinite; }
#ll-root .ll-mod-hap.aktif .hi-kisi-sag{ animation: hiSag 2.6s ease-in-out infinite; }
#ll-root .ll-mod-hap.aktif .hi-kalp{ transform-origin: 12px 14px; animation: hiKalp 1.3s ease-in-out infinite; }
@keyframes hiSol{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(1.3px); } }
@keyframes hiSag{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(-1.3px); } }
@keyframes hiKalp{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.22); } }
/* --- liste: arkadaki kişi belirir --- */
#ll-root .ll-mod-hap.aktif .hi-arka{ animation: hiArka 2.8s ease-in-out infinite; }
@keyframes hiArka{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* --- performans: sütunlar sırayla yükselir --- */
#ll-root .ll-mod-hap.aktif .hi-sut1{ transform-origin: 50% 18px; animation: hiSutun 2.4s ease-in-out infinite; }
#ll-root .ll-mod-hap.aktif .hi-sut2{ transform-origin: 50% 18px; animation: hiSutun 2.4s ease-in-out .22s infinite; }
#ll-root .ll-mod-hap.aktif .hi-sut3{ transform-origin: 50% 18px; animation: hiSutun 2.4s ease-in-out .44s infinite; }
@keyframes hiSutun{ 0%,100%{ transform: scaleY(1); } 45%{ transform: scaleY(.55); } }
/* --- sınav: tik çizilir --- */
#ll-root .ll-mod-hap.aktif .hi-tik{ stroke-dasharray: 12; animation: hiTik 2.6s ease-in-out infinite; }
@keyframes hiTik{ 0%{ stroke-dashoffset: 12; } 35%,100%{ stroke-dashoffset: 0; } }
/* --- görev: roket titrer, alev oynar --- */
#ll-root .ll-mod-hap.aktif .hi-roket{ animation: hiRoket 2.2s ease-in-out infinite; }
#ll-root .ll-mod-hap.aktif .hi-alev{ transform-origin: 12px 16.4px; animation: hiAlev .5s ease-in-out infinite; }
@keyframes hiRoket{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.4px); } }
@keyframes hiAlev{ 0%,100%{ transform: scaleY(1); opacity:.95; } 50%{ transform: scaleY(.65); opacity:.75; } }
/* --- etkinlik: koşucu adım atar, hız çizgileri kayar --- */
#ll-root .ll-mod-hap.aktif .hi-kosucu{ transform-origin: 13px 12px; animation: hiKosucu 1.1s ease-in-out infinite; }
#ll-root .ll-mod-hap.aktif .hi-iz{ animation: hiIz 1.1s linear infinite; }
@keyframes hiKosucu{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }
@keyframes hiIz{ 0%{ opacity:.3; transform: translateX(1.5px); } 50%{ opacity:1; transform: translateX(-1.5px); } 100%{ opacity:.3; transform: translateX(1.5px); } }
/* --- genel sonuç: kupa parlar --- */
#ll-root .ll-mod-hap.aktif .hi-parla{ transform-origin: 12px 7.4px; animation: hiParla 2.2s ease-in-out infinite; }
@keyframes hiParla{ 0%,100%{ opacity:.25; transform: scale(.75); } 50%{ opacity:1; transform: scale(1.1); } }

@media (max-width: 768px){
    #ll-root .ll-mod-hap{ gap: 6px; }
    #ll-root .ll-mod-hap .hap-ikon{ width: 20px; height: 20px; }
}