/* Harita Sistemi CSS (brytum benzeri) */



/* Harita konteyner */

.student-map {

    position: fixed;

    right: 0;

    top: 0;

    width: 350px;

    height: 100vh;

    background: white;

    box-shadow: -2px 0 10px rgba(0,0,0,0.1);

    z-index: 1000;

    display: flex;

    flex-direction: column;

}



.map-header {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    padding: 15px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.map-header h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

}



.map-close-btn {

    background: none;

    border: none;

    color: white;

    font-size: 18px;

    cursor: pointer;

    padding: 5px;

    border-radius: 3px;

    transition: background 0.2s;

}



.map-close-btn:hover {

    background: rgba(255,255,255,0.2);

}



/* Harita konteyner */

.map-container {

    flex: 1;

    position: relative;

    overflow: hidden;

}



/* Görsel harita stili */

.visual-map {

    width: 100%;

    height: 400px;

    position: relative;

    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);

    border-radius: 8px;

    margin: 15px 0;

    overflow: hidden;

}



.map-background {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 20%, transparent 21%),

        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 15%, transparent 16%),

        linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);

}



.city-outline {

    position: absolute;

    top: 20%;

    left: 20%;

    right: 20%;

    bottom: 20%;

    border: 2px dashed rgba(255,255,255,0.3);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.city-name {

    color: rgba(255,255,255,0.7);

    font-size: 24px;

    font-weight: bold;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

    letter-spacing: 2px;

}



.location-markers {

    position: relative;

    width: 100%;

    height: 100%;

}



/* Harita işaretçileri */

.map-marker {

    position: absolute;

    transform: translate(-50%, -50%);

    cursor: pointer;

    z-index: 10;

}



.marker-pin {

    position: relative;

    width: 40px;

    height: 40px;

    background: white;

    border-radius: 50%;

    border: 3px solid #ff6b6b;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

    transition: all 0.3s ease;

}



.map-marker.active-marker .marker-pin {

    border-color: #00b894;

    animation: pulse 2s infinite;

}



.marker-icon {

    font-size: 18px;

}



.pulse-ring {

    position: absolute;

    width: 60px;

    height: 60px;

    border: 2px solid #00b894;

    border-radius: 50%;

    animation: pulse-ring 2s infinite;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



@keyframes pulse-ring {

    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }

    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }

}



.marker-popup {

    position: absolute;

    top: -80px;

    left: 50%;

    transform: translateX(-50%);

    background: white;

    padding: 8px 12px;

    border-radius: 6px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.map-marker:hover .marker-popup {

    opacity: 1;

}



.marker-popup strong {

    display: block;

    color: #333;

    font-size: 12px;

    margin-bottom: 2px;

}



.marker-popup .student-count {

    color: #666;

    font-size: 11px;

}



.active-status, .inactive-status {

    font-size: 10px;

    margin-top: 2px;

}



.map-legend-bottom {

    padding: 10px 15px;

    background: rgba(255,255,255,0.9);

    border-top: 1px solid #eee;

    display: flex;

    gap: 20px;

    font-size: 12px;

}



.legend-dot {

    display: inline-block;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    margin-right: 6px;

}



.legend-dot.active {

    background: #00b894;

}



.legend-dot.inactive {

    background: #ff6b6b;

}



.legend-dot.location {

    background: #3498db;

}



/* Leaflet özel marker stilleri */

.custom-marker-container {

    background: transparent !important;

    border: none !important;

}



.custom-marker {

    position: relative;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.marker-inner {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 3px solid #ff6b6b;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    overflow: hidden;

    position: relative;

}



.custom-marker.active .marker-inner {

    border-color: #00b894;

}



.marker-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

}



.marker-initials {

    font-size: 12px;

    font-weight: bold;

    color: #333;

}



.custom-marker .pulse-ring {

    position: absolute;

    width: 56px;

    height: 56px;

    border: 2px solid #00b894;

    border-radius: 50%;

    animation: pulse-ring 2s infinite;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

}



@keyframes pulse-ring {

    0% {

        transform: translate(-50%, -50%) scale(0.8);

        opacity: 1;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.3);

        opacity: 0;

    }

}



/* Leaflet popup özelleştirme */

.marker-popup-content {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    max-width: 200px;

}



.marker-popup-content h4 {

    margin: 0 0 8px 0;

    color: #333;

    font-size: 14px;

    font-weight: 600;

}



.marker-popup-content p {

    margin: 4px 0;

    font-size: 12px;

    color: #666;

    line-height: 1.4;

}



/* Harita kontrolleri */

.map-controls {

    padding: 10px;

    background: #f8f9fa;

    border-top: 1px solid #eee;

    display: flex;

    gap: 10px;

}



.map-control-btn {

    padding: 6px 12px;

    background: #007bff;

    color: white;

    border: none;

    border-radius: 4px;

    font-size: 12px;

    cursor: pointer;

    transition: background 0.2s;

}



.map-control-btn:hover {

    background: #0056b3;

}



/* Gerçek harita stilleri */

.real-map, .google-map, .leaflet-map {

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.map-loading-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255,255,255,0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

}



.loading-content {

    text-align: center;

}



.loading-content .loading-spinner {

    width: 40px;

    height: 40px;

    border: 4px solid #f3f3f3;

    border-top: 4px solid #007bff;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 0 auto 15px;

}



.simple-map {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    position: relative;

}



/* Lokasyon işaretçileri */

.location-marker {

    position: absolute;

    cursor: pointer;

    transform: translate(-50%, -50%);

    transition: all 0.3s ease;

}



.location-marker:hover {

    transform: translate(-50%, -50%) scale(1.1);

}



.marker-icon {

    font-size: 24px;

    text-align: center;

    margin-bottom: 5px;

    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));

}



.marker-label {

    background: white;

    padding: 8px;

    border-radius: 6px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.2);

    font-size: 12px;

    text-align: center;

    min-width: 80px;

    border: 2px solid #e0e0e0;

}



.marker-label strong {

    display: block;

    color: #333;

    margin-bottom: 2px;

}



.student-count {

    display: block;

    color: #666;

    font-size: 11px;

}



.active-lesson {

    display: block;

    color: #10b981;

    font-size: 10px;

    font-weight: bold;

    margin-top: 2px;

}



/* Aktif ders olan lokasyonlar */

.location-marker.has-active-lesson .marker-label {

    border-color: #10b981;

    background: #f0fff4;

}



.location-marker.has-active-lesson .marker-icon {

    animation: activePulse 2s infinite;

}



@keyframes activePulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.2); }

}



/* Harita legend */

.map-legend {

    background: #f8f9fa;

    padding: 15px;

    border-top: 1px solid #e0e0e0;

}



.legend-item {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

    font-size: 12px;

}



.legend-icon {

    margin-right: 8px;

    font-size: 16px;

}



/* Harita toggle butonu */

.map-toggle-btn {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    border: none !important;

    color: white !important;

    font-size: 11px !important;

    padding: 6px 12px !important;

    margin-left: 8px !important;

}



.map-toggle-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);

}



/* Loading spinner */

.map-loading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    color: #666;

}



.loading-spinner {

    width: 40px;

    height: 40px;

    border: 4px solid #e0e0e0;

    border-top: 4px solid #667eea;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin-bottom: 15px;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Lokasyon detay modal */

.location-details {

    max-width: 400px;

}



.student-list {

    margin: 15px 0;

}



.student-item {

    display: flex;

    align-items: center;

    padding: 10px;

    border: 1px solid #e0e0e0;

    border-radius: 6px;

    margin-bottom: 8px;

    transition: all 0.2s;

}



.student-item.has-lesson {

    border-color: #10b981;

    background: #f0fff4;

}



.student-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    margin-right: 10px;

}



.student-info {

    flex: 1;

}



.student-info strong {

    display: block;

    color: #333;

    margin-bottom: 2px;

}



.student-program {

    display: block;

    color: #666;

    font-size: 12px;

    margin-bottom: 4px;

}



.lesson-status {

    font-size: 11px;

    font-weight: bold;

}



.location-warning {

    background: #fff3cd;

    border: 1px solid #ffeaa7;

    border-radius: 6px;

    padding: 10px;

    margin-top: 15px;

}



.location-warning p {

    margin: 0;

    color: #856404;

    font-size: 12px;

}



/* Harita açıkken body düzenlemesi */

body.map-open .calendar-container {

    margin-right: 350px;

    transition: margin-right 0.3s ease;

}



/* Harita hatası */

.map-error {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    text-align: center;

    padding: 20px;

    color: #666;

}



.retry-btn {

    background: #667eea;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 4px;

    cursor: pointer;

    margin-top: 10px;

}



.retry-btn:hover {

    background: #5a67d8;

}



/* Responsive */

@media (max-width: 768px) {

    .student-map {

        width: 100%;

        right: 0;

        left: auto;

    }

    

    body.map-open .calendar-container {

        margin-left: 0;

        margin-right: 0;

    }

}